paradiego
This commit is contained in:
62
node_modules/@mui/system/modern/Stack/Stack.js
generated
vendored
Normal file
62
node_modules/@mui/system/modern/Stack/Stack.js
generated
vendored
Normal file
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import createStack from "./createStack.js";
|
||||
/**
|
||||
*
|
||||
* Demos:
|
||||
*
|
||||
* - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
|
||||
* - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
|
||||
* - [Stack (MUI System)](https://mui.com/system/react-stack/)
|
||||
*
|
||||
* API:
|
||||
*
|
||||
* - [Stack API](https://mui.com/system/api/stack/)
|
||||
*/
|
||||
const Stack = createStack();
|
||||
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
|
||||
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
||||
// │ These PropTypes are generated from the TypeScript type definitions. │
|
||||
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* The content of the component.
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* The component used for the root node.
|
||||
* Either a string to use a HTML element or a component.
|
||||
*/
|
||||
component: PropTypes.elementType,
|
||||
/**
|
||||
* Defines the `flex-direction` style property.
|
||||
* It is applied for all screen sizes.
|
||||
* @default 'column'
|
||||
*/
|
||||
direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
|
||||
/**
|
||||
* Add an element between each child.
|
||||
*/
|
||||
divider: PropTypes.node,
|
||||
/**
|
||||
* Defines the space between immediate children.
|
||||
* @default 0
|
||||
*/
|
||||
spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
||||
/**
|
||||
* The system prop, which allows defining system overrides as well as additional CSS styles.
|
||||
*/
|
||||
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
||||
/**
|
||||
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
|
||||
*
|
||||
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
|
||||
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
|
||||
*
|
||||
* To enable this flag globally, follow the theme's default props configuration.
|
||||
* @default false
|
||||
*/
|
||||
useFlexGap: PropTypes.bool
|
||||
} : void 0;
|
||||
export default Stack;
|
||||
1
node_modules/@mui/system/modern/Stack/StackProps.js
generated
vendored
Normal file
1
node_modules/@mui/system/modern/Stack/StackProps.js
generated
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
171
node_modules/@mui/system/modern/Stack/createStack.js
generated
vendored
Normal file
171
node_modules/@mui/system/modern/Stack/createStack.js
generated
vendored
Normal file
@@ -0,0 +1,171 @@
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import clsx from 'clsx';
|
||||
import deepmerge from '@mui/utils/deepmerge';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
import composeClasses from '@mui/utils/composeClasses';
|
||||
import systemStyled from "../styled/index.js";
|
||||
import useThemePropsSystem from "../useThemeProps/index.js";
|
||||
import { extendSxProp } from "../styleFunctionSx/index.js";
|
||||
import createTheme from "../createTheme/index.js";
|
||||
import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from "../breakpoints/index.js";
|
||||
import { createUnarySpacing, getValue } from "../spacing/index.js";
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const defaultTheme = createTheme();
|
||||
// widening Theme to any so that the consumer can own the theme structure.
|
||||
const defaultCreateStyledComponent = systemStyled('div', {
|
||||
name: 'MuiStack',
|
||||
slot: 'Root',
|
||||
overridesResolver: (props, styles) => styles.root
|
||||
});
|
||||
function useThemePropsDefault(props) {
|
||||
return useThemePropsSystem({
|
||||
props,
|
||||
name: 'MuiStack',
|
||||
defaultTheme
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Return an array with the separator React element interspersed between
|
||||
* each React node of the input children.
|
||||
*
|
||||
* > joinChildren([1,2,3], 0)
|
||||
* [1,0,2,0,3]
|
||||
*/
|
||||
function joinChildren(children, separator) {
|
||||
const childrenArray = React.Children.toArray(children).filter(Boolean);
|
||||
return childrenArray.reduce((output, child, index) => {
|
||||
output.push(child);
|
||||
if (index < childrenArray.length - 1) {
|
||||
output.push(/*#__PURE__*/React.cloneElement(separator, {
|
||||
key: `separator-${index}`
|
||||
}));
|
||||
}
|
||||
return output;
|
||||
}, []);
|
||||
}
|
||||
const getSideFromDirection = direction => {
|
||||
return {
|
||||
row: 'Left',
|
||||
'row-reverse': 'Right',
|
||||
column: 'Top',
|
||||
'column-reverse': 'Bottom'
|
||||
}[direction];
|
||||
};
|
||||
export const style = ({
|
||||
ownerState,
|
||||
theme
|
||||
}) => {
|
||||
let styles = {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
...handleBreakpoints({
|
||||
theme
|
||||
}, resolveBreakpointValues({
|
||||
values: ownerState.direction,
|
||||
breakpoints: theme.breakpoints.values
|
||||
}), propValue => ({
|
||||
flexDirection: propValue
|
||||
}))
|
||||
};
|
||||
if (ownerState.spacing) {
|
||||
const transformer = createUnarySpacing(theme);
|
||||
const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
|
||||
if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
|
||||
acc[breakpoint] = true;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
const directionValues = resolveBreakpointValues({
|
||||
values: ownerState.direction,
|
||||
base
|
||||
});
|
||||
const spacingValues = resolveBreakpointValues({
|
||||
values: ownerState.spacing,
|
||||
base
|
||||
});
|
||||
if (typeof directionValues === 'object') {
|
||||
Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
|
||||
const directionValue = directionValues[breakpoint];
|
||||
if (!directionValue) {
|
||||
const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
|
||||
directionValues[breakpoint] = previousDirectionValue;
|
||||
}
|
||||
});
|
||||
}
|
||||
const styleFromPropValue = (propValue, breakpoint) => {
|
||||
if (ownerState.useFlexGap) {
|
||||
return {
|
||||
gap: getValue(transformer, propValue)
|
||||
};
|
||||
}
|
||||
return {
|
||||
// The useFlexGap={false} implement relies on each child to give up control of the margin.
|
||||
// We need to reset the margin to avoid double spacing.
|
||||
'& > :not(style):not(style)': {
|
||||
margin: 0
|
||||
},
|
||||
'& > :not(style) ~ :not(style)': {
|
||||
[`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
|
||||
}
|
||||
};
|
||||
};
|
||||
styles = deepmerge(styles, handleBreakpoints({
|
||||
theme
|
||||
}, spacingValues, styleFromPropValue));
|
||||
}
|
||||
styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
|
||||
return styles;
|
||||
};
|
||||
export default function createStack(options = {}) {
|
||||
const {
|
||||
// This will allow adding custom styled fn (for example for custom sx style function)
|
||||
createStyledComponent = defaultCreateStyledComponent,
|
||||
useThemeProps = useThemePropsDefault,
|
||||
componentName = 'MuiStack'
|
||||
} = options;
|
||||
const useUtilityClasses = () => {
|
||||
const slots = {
|
||||
root: ['root']
|
||||
};
|
||||
return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
|
||||
};
|
||||
const StackRoot = createStyledComponent(style);
|
||||
const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
|
||||
const themeProps = useThemeProps(inProps);
|
||||
const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
|
||||
const {
|
||||
component = 'div',
|
||||
direction = 'column',
|
||||
spacing = 0,
|
||||
divider,
|
||||
children,
|
||||
className,
|
||||
useFlexGap = false,
|
||||
...other
|
||||
} = props;
|
||||
const ownerState = {
|
||||
direction,
|
||||
spacing,
|
||||
useFlexGap
|
||||
};
|
||||
const classes = useUtilityClasses();
|
||||
return /*#__PURE__*/_jsx(StackRoot, {
|
||||
as: component,
|
||||
ownerState: ownerState,
|
||||
ref: ref,
|
||||
className: clsx(classes.root, className),
|
||||
...other,
|
||||
children: divider ? joinChildren(children, divider) : children
|
||||
});
|
||||
});
|
||||
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
|
||||
children: PropTypes.node,
|
||||
direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
|
||||
divider: PropTypes.node,
|
||||
spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
|
||||
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
||||
} : void 0;
|
||||
return Stack;
|
||||
}
|
||||
5
node_modules/@mui/system/modern/Stack/index.js
generated
vendored
Normal file
5
node_modules/@mui/system/modern/Stack/index.js
generated
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
export { default } from "./Stack.js";
|
||||
export { default as createStack } from "./createStack.js";
|
||||
export * from "./StackProps.js";
|
||||
export { default as stackClasses } from "./stackClasses.js";
|
||||
export * from "./stackClasses.js";
|
||||
7
node_modules/@mui/system/modern/Stack/stackClasses.js
generated
vendored
Normal file
7
node_modules/@mui/system/modern/Stack/stackClasses.js
generated
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
||||
import generateUtilityClass from '@mui/utils/generateUtilityClass';
|
||||
export function getStackUtilityClass(slot) {
|
||||
return generateUtilityClass('MuiStack', slot);
|
||||
}
|
||||
const stackClasses = generateUtilityClasses('MuiStack', ['root']);
|
||||
export default stackClasses;
|
||||
Reference in New Issue
Block a user