1
0
Fork 0

worked on GarageApp stuff

This commit is contained in:
Techognito 2025-08-25 17:46:11 +02:00
parent 60aaf17af3
commit eb606572b0
51919 changed files with 2168177 additions and 18 deletions

View file

@ -0,0 +1,269 @@
import { StandardCSSProperties } from "./StandardCssProperties.js";
export interface AliasesCSSProperties {
/**
* The **`background-color`** CSS property sets the background color of an element.
*
* **Initial value**: `transparent`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/background-color
*/
bgcolor?: StandardCSSProperties['backgroundColor'];
/**
* The **`margin`** CSS property sets the margin on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin
*/
m?: StandardCSSProperties['margin'];
/**
* The **`margin-top`** CSS property sets the margin on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin-top
*/
mt?: StandardCSSProperties['marginTop'];
/**
* The **`margin-right`** CSS property sets the margin on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin-right
*/
mr?: StandardCSSProperties['marginRight'];
/**
* The **`margin-bottom`** CSS property sets the margin on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
*/
mb?: StandardCSSProperties['marginBottom'];
/**
* The **`margin-left`** CSS property sets the margin on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin-left
*/
ml?: StandardCSSProperties['marginLeft'];
/**
* The **`mx`** property is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin on the left and right side of an element. A positive value places it
* farther from its neighbors, while a negative value places it closer.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin-left
* @see https://developer.mozilla.org/docs/Web/CSS/margin-right
*/
mx?: StandardCSSProperties['marginLeft'];
/**
* The **`marginX`** property is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin on the left and right side of an element. A positive value
* places it farther from its neighbors, while a negative value places it closer.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin-left
* @see https://developer.mozilla.org/docs/Web/CSS/margin-right
*/
marginX?: StandardCSSProperties['marginLeft'];
/**
* The **`my`** property is shorthand for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin on the top and bottom of an element. A positive value places it
* farther from its neighbors, while a negative value places it closer.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin-top
* @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
*/
my?: StandardCSSProperties['marginTop'];
/**
* The **`marginY`** property is shorthand for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin on the top and bottom of an element. A positive value places
* it farther from its neighbors, while a negative value places it closer.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/margin-top
* @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
*/
marginY?: StandardCSSProperties['marginTop'];
/**
* The **`padding`** CSS property sets the padding on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding
*/
p?: StandardCSSProperties['padding'];
/**
* The **`padding-top`** CSS property sets the height of the padding at the top of an element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding-top
*/
pt?: StandardCSSProperties['paddingTop'];
/**
* The **`padding-right`** CSS property sets the width of the padding at the right side of an element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding-right
*/
pr?: StandardCSSProperties['paddingRight'];
/**
* The **`padding-bottom`** CSS property sets the height of the padding on the bottom of an element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
*/
pb?: StandardCSSProperties['paddingBottom'];
/**
* The **`padding-left`** CSS property sets the width of the padding at the left side of an element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding-left
*/
pl?: StandardCSSProperties['paddingLeft'];
/**
* The **`px`** property is shorthand for the CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding at the left and right side of an element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding-left
* @see https://developer.mozilla.org/docs/Web/CSS/padding-right
*/
px?: StandardCSSProperties['paddingLeft'];
/**
* The **`paddingX`** property is shorthand for the CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding at the left and right sides of an element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding-left
* @see https://developer.mozilla.org/docs/Web/CSS/padding-right
*/
paddingX?: StandardCSSProperties['paddingLeft'];
/**
* The **`py`** property is shorthand for the CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding at the top and bottom of an element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding-top
* @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
*/
py?: StandardCSSProperties['paddingTop'];
/**
* The **`paddingY`** property is shorthand for the CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding at the top and bottom of an element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/padding-top
* @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
*/
paddingY?: StandardCSSProperties['paddingTop'];
/**
* The **`typography`** property is shorthand for the CSS properties **`font-family`**, **`font-weight`**, **`font-size`**, **`line-height`**, **`letter-spacing`** and **`text-transform``**.
* It takes the values defined under `theme.typography` and spreads them on the element.
*
* **Initial value**: `0`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **2** | **1** | **1** | **12** | **5.5** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/font-family
* @see https://developer.mozilla.org/docs/Web/CSS/font-weight
* @see https://developer.mozilla.org/docs/Web/CSS/font-size
* @see https://developer.mozilla.org/docs/Web/CSS/line-height
* @see https://developer.mozilla.org/docs/Web/CSS/letter-spacing
* @see https://developer.mozilla.org/docs/Web/CSS/text-transform
*/
typography?: string;
/**
* The **`displayPrint`** property sets the display value for the element when the page is printed.
*
* **Initial value**: `inline`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/display
*/
displayPrint?: StandardCSSProperties['display'];
}

View file

@ -0,0 +1 @@
export {};

View file

@ -0,0 +1,54 @@
import * as CSS from 'csstype';
export interface OverwriteCSSProperties {
/**
* The **`border`** CSS property is shorthand for the CSS properties **`border-width`**, **`border-style`**, and **`border-color`**. It sets an element's border.
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/border
*/
border?: CSS.Property.Border | number;
/**
* The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
* element for blur and spread radii, and by its color.
*
* **Initial value**: `none`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :-----: | :-----: | :-----: | :----: | :---: |
* | **10** | **4** | **5.1** | **12** | **9** |
* | 1 _-x-_ | | 3 _-x-_ | | |
*
* @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
*/
boxShadow?: CSS.Property.BoxShadow | number;
/**
* The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
* available in `normal` and `bold`.
*
* **Initial value**: `normal`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **2** | **1** | **1** | **12** | **3** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/font-weight
*/
fontWeight?: CSS.Property.FontWeight | string;
/**
* The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a higher z-index cover those with a lower one.
*
* **Initial value**: `auto`
*
* | Chrome | Firefox | Safari | Edge | IE |
* | :----: | :-----: | :----: | :----: | :---: |
* | **1** | **1** | **1** | **12** | **4** |
*
* @see https://developer.mozilla.org/docs/Web/CSS/z-index
*/
zIndex?: CSS.Property.ZIndex | string;
}

View file

@ -0,0 +1 @@
export {};

View file

@ -0,0 +1,2 @@
import * as CSS from 'csstype';
export type StandardCSSProperties = CSS.PropertiesFallback<number | string>;

View file

@ -0,0 +1 @@
export {};

View file

@ -0,0 +1,14 @@
import { StyleFunction, TransformFunction } from "../style/index.js";
type SimpleStyleFunction<PropKey extends keyof any> = StyleFunction<Partial<Record<PropKey, any>>>;
export interface SxConfigRecord {
cssProperty?: keyof React.CSSProperties | false;
/**
* dot access in `Theme`
*/
themeKey?: string;
transform?: TransformFunction;
style?: SimpleStyleFunction<any>;
}
export type SxConfig = Record<string, SxConfigRecord>;
declare const defaultSxConfig: SxConfig;
export default defaultSxConfig;

View file

@ -0,0 +1,294 @@
import { padding, margin } from "../spacing/index.js";
import { borderRadius, borderTransform } from "../borders/index.js";
import { gap, rowGap, columnGap } from "../cssGrid/index.js";
import { paletteTransform } from "../palette/index.js";
import { maxWidth, sizingTransform } from "../sizing/index.js";
const defaultSxConfig = {
// borders
border: {
themeKey: 'borders',
transform: borderTransform
},
borderTop: {
themeKey: 'borders',
transform: borderTransform
},
borderRight: {
themeKey: 'borders',
transform: borderTransform
},
borderBottom: {
themeKey: 'borders',
transform: borderTransform
},
borderLeft: {
themeKey: 'borders',
transform: borderTransform
},
borderColor: {
themeKey: 'palette'
},
borderTopColor: {
themeKey: 'palette'
},
borderRightColor: {
themeKey: 'palette'
},
borderBottomColor: {
themeKey: 'palette'
},
borderLeftColor: {
themeKey: 'palette'
},
outline: {
themeKey: 'borders',
transform: borderTransform
},
outlineColor: {
themeKey: 'palette'
},
borderRadius: {
themeKey: 'shape.borderRadius',
style: borderRadius
},
// palette
color: {
themeKey: 'palette',
transform: paletteTransform
},
bgcolor: {
themeKey: 'palette',
cssProperty: 'backgroundColor',
transform: paletteTransform
},
backgroundColor: {
themeKey: 'palette',
transform: paletteTransform
},
// spacing
p: {
style: padding
},
pt: {
style: padding
},
pr: {
style: padding
},
pb: {
style: padding
},
pl: {
style: padding
},
px: {
style: padding
},
py: {
style: padding
},
padding: {
style: padding
},
paddingTop: {
style: padding
},
paddingRight: {
style: padding
},
paddingBottom: {
style: padding
},
paddingLeft: {
style: padding
},
paddingX: {
style: padding
},
paddingY: {
style: padding
},
paddingInline: {
style: padding
},
paddingInlineStart: {
style: padding
},
paddingInlineEnd: {
style: padding
},
paddingBlock: {
style: padding
},
paddingBlockStart: {
style: padding
},
paddingBlockEnd: {
style: padding
},
m: {
style: margin
},
mt: {
style: margin
},
mr: {
style: margin
},
mb: {
style: margin
},
ml: {
style: margin
},
mx: {
style: margin
},
my: {
style: margin
},
margin: {
style: margin
},
marginTop: {
style: margin
},
marginRight: {
style: margin
},
marginBottom: {
style: margin
},
marginLeft: {
style: margin
},
marginX: {
style: margin
},
marginY: {
style: margin
},
marginInline: {
style: margin
},
marginInlineStart: {
style: margin
},
marginInlineEnd: {
style: margin
},
marginBlock: {
style: margin
},
marginBlockStart: {
style: margin
},
marginBlockEnd: {
style: margin
},
// display
displayPrint: {
cssProperty: false,
transform: value => ({
'@media print': {
display: value
}
})
},
display: {},
overflow: {},
textOverflow: {},
visibility: {},
whiteSpace: {},
// flexbox
flexBasis: {},
flexDirection: {},
flexWrap: {},
justifyContent: {},
alignItems: {},
alignContent: {},
order: {},
flex: {},
flexGrow: {},
flexShrink: {},
alignSelf: {},
justifyItems: {},
justifySelf: {},
// grid
gap: {
style: gap
},
rowGap: {
style: rowGap
},
columnGap: {
style: columnGap
},
gridColumn: {},
gridRow: {},
gridAutoFlow: {},
gridAutoColumns: {},
gridAutoRows: {},
gridTemplateColumns: {},
gridTemplateRows: {},
gridTemplateAreas: {},
gridArea: {},
// positions
position: {},
zIndex: {
themeKey: 'zIndex'
},
top: {},
right: {},
bottom: {},
left: {},
// shadows
boxShadow: {
themeKey: 'shadows'
},
// sizing
width: {
transform: sizingTransform
},
maxWidth: {
style: maxWidth
},
minWidth: {
transform: sizingTransform
},
height: {
transform: sizingTransform
},
maxHeight: {
transform: sizingTransform
},
minHeight: {
transform: sizingTransform
},
boxSizing: {},
// typography
font: {
themeKey: 'font'
},
fontFamily: {
themeKey: 'typography'
},
fontSize: {
themeKey: 'typography'
},
fontStyle: {
themeKey: 'typography'
},
fontWeight: {
themeKey: 'typography'
},
letterSpacing: {},
textTransform: {},
lineHeight: {},
textAlign: {},
typography: {
cssProperty: false,
themeKey: 'typography'
}
};
export default defaultSxConfig;

View file

@ -0,0 +1,4 @@
import { SxProps } from "./styleFunctionSx.js";
export default function extendSxProp<Props extends {
sx?: SxProps<any>;
} = {}>(props: Props): Props;

View file

@ -0,0 +1,51 @@
import { isPlainObject } from '@mui/utils/deepmerge';
import defaultSxConfig from "./defaultSxConfig.js";
const splitProps = props => {
const result = {
systemProps: {},
otherProps: {}
};
const config = props?.theme?.unstable_sxConfig ?? defaultSxConfig;
Object.keys(props).forEach(prop => {
if (config[prop]) {
result.systemProps[prop] = props[prop];
} else {
result.otherProps[prop] = props[prop];
}
});
return result;
};
export default function extendSxProp(props) {
const {
sx: inSx,
...other
} = props;
const {
systemProps,
otherProps
} = splitProps(other);
let finalSx;
if (Array.isArray(inSx)) {
finalSx = [systemProps, ...inSx];
} else if (typeof inSx === 'function') {
finalSx = (...args) => {
const result = inSx(...args);
if (!isPlainObject(result)) {
return systemProps;
}
return {
...systemProps,
...result
};
};
} else {
finalSx = {
...systemProps,
...inSx
};
}
return {
...otherProps,
sx: finalSx
};
}

View file

@ -0,0 +1,9 @@
export { default } from "./styleFunctionSx.js";
export * from "./styleFunctionSx.js";
export * from "./AliasesCSSProperties.js";
export * from "./OverwriteCSSProperties.js";
export * from "./StandardCssProperties.js";
export { default as extendSxProp } from "./extendSxProp.js";
export { default as unstable_defaultSxConfig } from "./defaultSxConfig.js";
export * from "./defaultSxConfig.js";
export * from "./extendSxProp.js";

View file

@ -0,0 +1,4 @@
export { default } from "./styleFunctionSx.js";
export { unstable_createStyleFunctionSx } from "./styleFunctionSx.js";
export { default as extendSxProp } from "./extendSxProp.js";
export { default as unstable_defaultSxConfig } from "./defaultSxConfig.js";

View file

@ -0,0 +1,62 @@
import * as CSS from 'csstype';
import { CSSObject } from '@mui/styled-engine';
import { StandardCSSProperties } from "./StandardCssProperties.js";
import { AliasesCSSProperties } from "./AliasesCSSProperties.js";
import { OverwriteCSSProperties } from "./OverwriteCSSProperties.js";
/**
* The `css` function accepts arrays as values for mobile-first responsive styles.
* Note that this extends to non-theme values also. For example `display=['none', 'block']`
* will also works.
*/
export type ResponsiveStyleValue<T> = T | ReadonlyArray<T | null> | {
[key: string]: T | null;
};
/**
* Map of all CSS pseudo selectors (`:hover`, `:focus`, ...).
*/
export type CSSPseudoSelectorProps<Theme extends object = {}> = { [K in CSS.Pseudos]?: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme> };
/**
* Map all nested selectors.
*/
export interface CSSSelectorObject<Theme extends object = {}> {
[cssSelector: string]: ((theme: Theme) => SystemStyleObject<Theme>) | SystemStyleObject<Theme>;
}
type CssVariableType = string | number;
/**
* Map all nested selectors and CSS variables.
*/
export interface CSSSelectorObjectOrCssVariables<Theme extends object = {}> {
[cssSelectorOrVariable: string]: ((theme: Theme) => SystemStyleObject<Theme> | string | number) | SystemStyleObject<Theme> | CssVariableType;
}
/**
* Map of all available CSS properties (including aliases) and their raw value.
* Only used internally to map CSS properties to input types (responsive value,
* theme function or nested) in `SystemCssProperties`.
*/
export interface AllSystemCSSProperties extends Omit<StandardCSSProperties, keyof OverwriteCSSProperties>, OverwriteCSSProperties, AliasesCSSProperties {}
export type SystemCssProperties<Theme extends object = {}> = { [K in keyof AllSystemCSSProperties]: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: Theme) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) | null };
/**
* The `SystemStyleObject` defines custom properties that will be transformed to
* their corresponding values from the `Theme`. Other valid CSS properties are also allowed.
*/
export type SystemStyleObject<Theme extends object = {}> = SystemCssProperties<Theme> | CSSPseudoSelectorProps<Theme> | CSSSelectorObjectOrCssVariables<Theme> | null;
/**
* The `SxProps` can be either object or function
*/
export type SxProps<Theme extends object = {}> = SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>) | ReadonlyArray<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
export interface StyleFunctionSx {
(props: object): CSSObject;
filterProps?: string[];
}
// eslint-disable-next-line @typescript-eslint/naming-convention
export function unstable_createStyleFunctionSx(styleFunctionMapping: Record<string, StyleFunctionSx>): StyleFunctionSx;
declare const styleFunctionSx: StyleFunctionSx;
export default styleFunctionSx;

View file

@ -0,0 +1,134 @@
import capitalize from '@mui/utils/capitalize';
import merge from "../merge/index.js";
import { getPath, getStyleValue as getValue } from "../style/index.js";
import { handleBreakpoints, createEmptyBreakpointObject, removeUnusedBreakpoints } from "../breakpoints/index.js";
import { sortContainerQueries } from "../cssContainerQueries/index.js";
import defaultSxConfig from "./defaultSxConfig.js";
function objectsHaveSameKeys(...objects) {
const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
const union = new Set(allKeys);
return objects.every(object => union.size === Object.keys(object).length);
}
function callIfFn(maybeFn, arg) {
return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
}
// eslint-disable-next-line @typescript-eslint/naming-convention
export function unstable_createStyleFunctionSx() {
function getThemeValue(prop, val, theme, config) {
const props = {
[prop]: val,
theme
};
const options = config[prop];
if (!options) {
return {
[prop]: val
};
}
const {
cssProperty = prop,
themeKey,
transform,
style
} = options;
if (val == null) {
return null;
}
// TODO v6: remove, see https://github.com/mui/material-ui/pull/38123
if (themeKey === 'typography' && val === 'inherit') {
return {
[prop]: val
};
}
const themeMapping = getPath(theme, themeKey) || {};
if (style) {
return style(props);
}
const styleFromPropValue = propValueFinal => {
let value = getValue(themeMapping, transform, propValueFinal);
if (propValueFinal === value && typeof propValueFinal === 'string') {
// Haven't found value
value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : capitalize(propValueFinal)}`, propValueFinal);
}
if (cssProperty === false) {
return value;
}
return {
[cssProperty]: value
};
};
return handleBreakpoints(props, val, styleFromPropValue);
}
function styleFunctionSx(props) {
const {
sx,
theme = {},
nested
} = props || {};
if (!sx) {
return null; // Emotion & styled-components will neglect null
}
const config = theme.unstable_sxConfig ?? defaultSxConfig;
/*
* Receive `sxInput` as object or callback
* and then recursively check keys & values to create media query object styles.
* (the result will be used in `styled`)
*/
function traverse(sxInput) {
let sxObject = sxInput;
if (typeof sxInput === 'function') {
sxObject = sxInput(theme);
} else if (typeof sxInput !== 'object') {
// value
return sxInput;
}
if (!sxObject) {
return null;
}
const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
const breakpointsKeys = Object.keys(emptyBreakpoints);
let css = emptyBreakpoints;
Object.keys(sxObject).forEach(styleKey => {
const value = callIfFn(sxObject[styleKey], theme);
if (value !== null && value !== undefined) {
if (typeof value === 'object') {
if (config[styleKey]) {
css = merge(css, getThemeValue(styleKey, value, theme, config));
} else {
const breakpointsValues = handleBreakpoints({
theme
}, value, x => ({
[styleKey]: x
}));
if (objectsHaveSameKeys(breakpointsValues, value)) {
css[styleKey] = styleFunctionSx({
sx: value,
theme,
nested: true
});
} else {
css = merge(css, breakpointsValues);
}
}
} else {
css = merge(css, getThemeValue(styleKey, value, theme, config));
}
}
});
if (!nested && theme.modularCssLayers) {
return {
'@layer sx': sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css))
};
}
return sortContainerQueries(theme, removeUnusedBreakpoints(breakpointsKeys, css));
}
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
}
return styleFunctionSx;
}
const styleFunctionSx = unstable_createStyleFunctionSx();
styleFunctionSx.filterProps = ['sx'];
export default styleFunctionSx;