New source found from dndbeyond.com
This commit is contained in:
Generated
Vendored
+64
@@ -0,0 +1,64 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import resolveProps from '@mui/utils/resolveProps';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const PropsContext = /*#__PURE__*/React.createContext(undefined);
|
||||
function DefaultPropsProvider({
|
||||
value,
|
||||
children
|
||||
}) {
|
||||
return /*#__PURE__*/_jsx(PropsContext.Provider, {
|
||||
value: value,
|
||||
children: children
|
||||
});
|
||||
}
|
||||
process.env.NODE_ENV !== "production" ? DefaultPropsProvider.propTypes /* remove-proptypes */ = {
|
||||
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
||||
// │ These PropTypes are generated from the TypeScript type definitions. │
|
||||
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
||||
// └─────────────────────────────────────────────────────────────────────┘
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
children: PropTypes.node,
|
||||
/**
|
||||
* @ignore
|
||||
*/
|
||||
value: PropTypes.object
|
||||
} : void 0;
|
||||
function getThemeProps(params) {
|
||||
const {
|
||||
theme,
|
||||
name,
|
||||
props
|
||||
} = params;
|
||||
if (!theme || !theme.components || !theme.components[name]) {
|
||||
return props;
|
||||
}
|
||||
const config = theme.components[name];
|
||||
if (config.defaultProps) {
|
||||
// compatible with v5 signature
|
||||
return resolveProps(config.defaultProps, props);
|
||||
}
|
||||
if (!config.styleOverrides && !config.variants) {
|
||||
// v6 signature, no property 'defaultProps'
|
||||
return resolveProps(config, props);
|
||||
}
|
||||
return props;
|
||||
}
|
||||
export function useDefaultProps({
|
||||
props,
|
||||
name
|
||||
}) {
|
||||
const ctx = React.useContext(PropsContext);
|
||||
return getThemeProps({
|
||||
props,
|
||||
name,
|
||||
theme: {
|
||||
components: ctx
|
||||
}
|
||||
});
|
||||
}
|
||||
export default DefaultPropsProvider;
|
||||
+26
-2
@@ -2,16 +2,40 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { GlobalStyles as MuiGlobalStyles } from '@mui/styled-engine';
|
||||
import { GlobalStyles as MuiGlobalStyles, internal_serializeStyles as serializeStyles } from '@mui/styled-engine';
|
||||
import useTheme from '../useTheme';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
function wrapGlobalLayer(styles) {
|
||||
const serialized = serializeStyles(styles);
|
||||
if (styles !== serialized && serialized.styles) {
|
||||
if (!serialized.styles.match(/^@layer\s+[^{]*$/)) {
|
||||
// If the styles are not already wrapped in a layer, wrap them in a global layer.
|
||||
serialized.styles = `@layer global{${serialized.styles}}`;
|
||||
}
|
||||
return serialized;
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
function GlobalStyles({
|
||||
styles,
|
||||
themeId,
|
||||
defaultTheme = {}
|
||||
}) {
|
||||
const upperTheme = useTheme(defaultTheme);
|
||||
const globalStyles = typeof styles === 'function' ? styles(themeId ? upperTheme[themeId] || upperTheme : upperTheme) : styles;
|
||||
const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
|
||||
let globalStyles = typeof styles === 'function' ? styles(resolvedTheme) : styles;
|
||||
if (resolvedTheme.modularCssLayers) {
|
||||
if (Array.isArray(globalStyles)) {
|
||||
globalStyles = globalStyles.map(styleArg => {
|
||||
if (typeof styleArg === 'function') {
|
||||
return wrapGlobalLayer(styleArg(resolvedTheme));
|
||||
}
|
||||
return wrapGlobalLayer(styleArg);
|
||||
});
|
||||
} else {
|
||||
globalStyles = wrapGlobalLayer(globalStyles);
|
||||
}
|
||||
}
|
||||
return /*#__PURE__*/_jsx(MuiGlobalStyles, {
|
||||
styles: globalStyles
|
||||
});
|
||||
|
||||
-173
@@ -1,173 +0,0 @@
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
const _excluded = ["component", "direction", "spacing", "divider", "children", "className", "useFlexGap"];
|
||||
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';
|
||||
import useThemePropsSystem from '../useThemeProps';
|
||||
import { extendSxProp } from '../styleFunctionSx';
|
||||
import createTheme from '../createTheme';
|
||||
import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from '../breakpoints';
|
||||
import { createUnarySpacing, getValue } from '../spacing';
|
||||
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 = _extends({
|
||||
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
|
||||
} = props,
|
||||
other = _objectWithoutPropertiesLoose(props, _excluded);
|
||||
const ownerState = {
|
||||
direction,
|
||||
spacing,
|
||||
useFlexGap
|
||||
};
|
||||
const classes = useUtilityClasses();
|
||||
return /*#__PURE__*/_jsx(StackRoot, _extends({
|
||||
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;
|
||||
}
|
||||
+8
-1
@@ -8,6 +8,9 @@ import exactProp from '@mui/utils/exactProp';
|
||||
import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
|
||||
import useThemeWithoutDefault from '../useThemeWithoutDefault';
|
||||
import RtlProvider from '../RtlProvider';
|
||||
import DefaultPropsProvider from '../DefaultPropsProvider';
|
||||
import useLayerOrder from './useLayerOrder';
|
||||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
const EMPTY_THEME = {};
|
||||
function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
|
||||
@@ -54,13 +57,17 @@ function ThemeProvider(props) {
|
||||
const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
|
||||
const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
|
||||
const rtlValue = engineTheme.direction === 'rtl';
|
||||
const layerOrder = useLayerOrder(engineTheme);
|
||||
return /*#__PURE__*/_jsx(MuiThemeProvider, {
|
||||
theme: privateTheme,
|
||||
children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
|
||||
value: engineTheme,
|
||||
children: /*#__PURE__*/_jsx(RtlProvider, {
|
||||
value: rtlValue,
|
||||
children: children
|
||||
children: /*#__PURE__*/_jsxs(DefaultPropsProvider, {
|
||||
value: engineTheme == null ? void 0 : engineTheme.components,
|
||||
children: [layerOrder, children]
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
||||
import useId from '@mui/utils/useId';
|
||||
import GlobalStyles from '../GlobalStyles';
|
||||
import useThemeWithoutDefault from '../useThemeWithoutDefault';
|
||||
|
||||
/**
|
||||
* This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
|
||||
* Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
|
||||
*/
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
export default function useLayerOrder(theme) {
|
||||
const upperTheme = useThemeWithoutDefault();
|
||||
const id = useId() || '';
|
||||
const {
|
||||
modularCssLayers
|
||||
} = theme;
|
||||
let layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
|
||||
if (!modularCssLayers || upperTheme !== null) {
|
||||
// skip this hook if upper theme exists.
|
||||
layerOrder = '';
|
||||
} else if (typeof modularCssLayers === 'string') {
|
||||
layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
|
||||
} else {
|
||||
layerOrder = `@layer ${layerOrder};`;
|
||||
}
|
||||
useEnhancedEffect(() => {
|
||||
const head = document.querySelector('head');
|
||||
if (!head) {
|
||||
return;
|
||||
}
|
||||
const firstChild = head.firstChild;
|
||||
if (layerOrder) {
|
||||
var _firstChild$hasAttrib;
|
||||
// Only insert if first child doesn't have data-mui-layer-order attribute
|
||||
if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
|
||||
return;
|
||||
}
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.setAttribute('data-mui-layer-order', id);
|
||||
styleElement.textContent = layerOrder;
|
||||
head.prepend(styleElement);
|
||||
} else {
|
||||
var _head$querySelector;
|
||||
(_head$querySelector = head.querySelector(`style[data-mui-layer-order="${id}"]`)) == null || _head$querySelector.remove();
|
||||
}
|
||||
}, [layerOrder, id]);
|
||||
if (!layerOrder) {
|
||||
return null;
|
||||
}
|
||||
return /*#__PURE__*/_jsx(GlobalStyles, {
|
||||
styles: layerOrder
|
||||
});
|
||||
}
|
||||
-345
@@ -1,345 +0,0 @@
|
||||
import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import clamp from '@mui/utils/clamp';
|
||||
/**
|
||||
* Returns a number whose value is limited to the given range.
|
||||
* @param {number} value The value to be clamped
|
||||
* @param {number} min The lower boundary of the output range
|
||||
* @param {number} max The upper boundary of the output range
|
||||
* @returns {number} A number in the range [min, max]
|
||||
*/
|
||||
function clampWrapper(value, min = 0, max = 1) {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (value < min || value > max) {
|
||||
console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
|
||||
}
|
||||
}
|
||||
return clamp(value, min, max);
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a color from CSS hex format to CSS rgb format.
|
||||
* @param {string} color - Hex color, i.e. #nnn or #nnnnnn
|
||||
* @returns {string} A CSS rgb color string
|
||||
*/
|
||||
export function hexToRgb(color) {
|
||||
color = color.slice(1);
|
||||
const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
|
||||
let colors = color.match(re);
|
||||
if (colors && colors[0].length === 1) {
|
||||
colors = colors.map(n => n + n);
|
||||
}
|
||||
return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {
|
||||
return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
|
||||
}).join(', ')})` : '';
|
||||
}
|
||||
function intToHex(int) {
|
||||
const hex = int.toString(16);
|
||||
return hex.length === 1 ? `0${hex}` : hex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an object with the type and values of a color.
|
||||
*
|
||||
* Note: Does not support rgb % values.
|
||||
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
||||
* @returns {object} - A MUI color object: {type: string, values: number[]}
|
||||
*/
|
||||
export function decomposeColor(color) {
|
||||
// Idempotent
|
||||
if (color.type) {
|
||||
return color;
|
||||
}
|
||||
if (color.charAt(0) === '#') {
|
||||
return decomposeColor(hexToRgb(color));
|
||||
}
|
||||
const marker = color.indexOf('(');
|
||||
const type = color.substring(0, marker);
|
||||
if (['rgb', 'rgba', 'hsl', 'hsla', 'color'].indexOf(type) === -1) {
|
||||
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
|
||||
The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : _formatMuiErrorMessage(9, color));
|
||||
}
|
||||
let values = color.substring(marker + 1, color.length - 1);
|
||||
let colorSpace;
|
||||
if (type === 'color') {
|
||||
values = values.split(' ');
|
||||
colorSpace = values.shift();
|
||||
if (values.length === 4 && values[3].charAt(0) === '/') {
|
||||
values[3] = values[3].slice(1);
|
||||
}
|
||||
if (['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].indexOf(colorSpace) === -1) {
|
||||
throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
|
||||
The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : _formatMuiErrorMessage(10, colorSpace));
|
||||
}
|
||||
} else {
|
||||
values = values.split(',');
|
||||
}
|
||||
values = values.map(value => parseFloat(value));
|
||||
return {
|
||||
type,
|
||||
values,
|
||||
colorSpace
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a channel created from the input color.
|
||||
*
|
||||
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
||||
* @returns {string} - The channel for the color, that can be used in rgba or hsla colors
|
||||
*/
|
||||
export const colorChannel = color => {
|
||||
const decomposedColor = decomposeColor(color);
|
||||
return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.indexOf('hsl') !== -1 && idx !== 0 ? `${val}%` : val).join(' ');
|
||||
};
|
||||
export const private_safeColorChannel = (color, warning) => {
|
||||
try {
|
||||
return colorChannel(color);
|
||||
} catch (error) {
|
||||
if (warning && process.env.NODE_ENV !== 'production') {
|
||||
console.warn(warning);
|
||||
}
|
||||
return color;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a color object with type and values to a string.
|
||||
* @param {object} color - Decomposed color
|
||||
* @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla', 'color'
|
||||
* @param {array} color.values - [n,n,n] or [n,n,n,n]
|
||||
* @returns {string} A CSS color string
|
||||
*/
|
||||
export function recomposeColor(color) {
|
||||
const {
|
||||
type,
|
||||
colorSpace
|
||||
} = color;
|
||||
let {
|
||||
values
|
||||
} = color;
|
||||
if (type.indexOf('rgb') !== -1) {
|
||||
// Only convert the first 3 values to int (i.e. not alpha)
|
||||
values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
|
||||
} else if (type.indexOf('hsl') !== -1) {
|
||||
values[1] = `${values[1]}%`;
|
||||
values[2] = `${values[2]}%`;
|
||||
}
|
||||
if (type.indexOf('color') !== -1) {
|
||||
values = `${colorSpace} ${values.join(' ')}`;
|
||||
} else {
|
||||
values = `${values.join(', ')}`;
|
||||
}
|
||||
return `${type}(${values})`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a color from CSS rgb format to CSS hex format.
|
||||
* @param {string} color - RGB color, i.e. rgb(n, n, n)
|
||||
* @returns {string} A CSS rgb color string, i.e. #nnnnnn
|
||||
*/
|
||||
export function rgbToHex(color) {
|
||||
// Idempotent
|
||||
if (color.indexOf('#') === 0) {
|
||||
return color;
|
||||
}
|
||||
const {
|
||||
values
|
||||
} = decomposeColor(color);
|
||||
return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts a color from hsl format to rgb format.
|
||||
* @param {string} color - HSL color values
|
||||
* @returns {string} rgb color values
|
||||
*/
|
||||
export function hslToRgb(color) {
|
||||
color = decomposeColor(color);
|
||||
const {
|
||||
values
|
||||
} = color;
|
||||
const h = values[0];
|
||||
const s = values[1] / 100;
|
||||
const l = values[2] / 100;
|
||||
const a = s * Math.min(l, 1 - l);
|
||||
const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
||||
let type = 'rgb';
|
||||
const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
|
||||
if (color.type === 'hsla') {
|
||||
type += 'a';
|
||||
rgb.push(values[3]);
|
||||
}
|
||||
return recomposeColor({
|
||||
type,
|
||||
values: rgb
|
||||
});
|
||||
}
|
||||
/**
|
||||
* The relative brightness of any point in a color space,
|
||||
* normalized to 0 for darkest black and 1 for lightest white.
|
||||
*
|
||||
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
||||
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
||||
* @returns {number} The relative brightness of the color in the range 0 - 1
|
||||
*/
|
||||
export function getLuminance(color) {
|
||||
color = decomposeColor(color);
|
||||
let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
|
||||
rgb = rgb.map(val => {
|
||||
if (color.type !== 'color') {
|
||||
val /= 255; // normalized
|
||||
}
|
||||
return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
|
||||
});
|
||||
|
||||
// Truncate at 3 digits
|
||||
return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the contrast ratio between two colors.
|
||||
*
|
||||
* Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
|
||||
* @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
|
||||
* @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
|
||||
* @returns {number} A contrast ratio value in the range 0 - 21.
|
||||
*/
|
||||
export function getContrastRatio(foreground, background) {
|
||||
const lumA = getLuminance(foreground);
|
||||
const lumB = getLuminance(background);
|
||||
return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the absolute transparency of a color.
|
||||
* Any existing alpha values are overwritten.
|
||||
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
||||
* @param {number} value - value to set the alpha channel to in the range 0 - 1
|
||||
* @returns {string} A CSS color string. Hex input values are returned as rgb
|
||||
*/
|
||||
export function alpha(color, value) {
|
||||
color = decomposeColor(color);
|
||||
value = clampWrapper(value);
|
||||
if (color.type === 'rgb' || color.type === 'hsl') {
|
||||
color.type += 'a';
|
||||
}
|
||||
if (color.type === 'color') {
|
||||
color.values[3] = `/${value}`;
|
||||
} else {
|
||||
color.values[3] = value;
|
||||
}
|
||||
return recomposeColor(color);
|
||||
}
|
||||
export function private_safeAlpha(color, value, warning) {
|
||||
try {
|
||||
return alpha(color, value);
|
||||
} catch (error) {
|
||||
if (warning && process.env.NODE_ENV !== 'production') {
|
||||
console.warn(warning);
|
||||
}
|
||||
return color;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Darkens a color.
|
||||
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
||||
* @param {number} coefficient - multiplier in the range 0 - 1
|
||||
* @returns {string} A CSS color string. Hex input values are returned as rgb
|
||||
*/
|
||||
export function darken(color, coefficient) {
|
||||
color = decomposeColor(color);
|
||||
coefficient = clampWrapper(coefficient);
|
||||
if (color.type.indexOf('hsl') !== -1) {
|
||||
color.values[2] *= 1 - coefficient;
|
||||
} else if (color.type.indexOf('rgb') !== -1 || color.type.indexOf('color') !== -1) {
|
||||
for (let i = 0; i < 3; i += 1) {
|
||||
color.values[i] *= 1 - coefficient;
|
||||
}
|
||||
}
|
||||
return recomposeColor(color);
|
||||
}
|
||||
export function private_safeDarken(color, coefficient, warning) {
|
||||
try {
|
||||
return darken(color, coefficient);
|
||||
} catch (error) {
|
||||
if (warning && process.env.NODE_ENV !== 'production') {
|
||||
console.warn(warning);
|
||||
}
|
||||
return color;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Lightens a color.
|
||||
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
||||
* @param {number} coefficient - multiplier in the range 0 - 1
|
||||
* @returns {string} A CSS color string. Hex input values are returned as rgb
|
||||
*/
|
||||
export function lighten(color, coefficient) {
|
||||
color = decomposeColor(color);
|
||||
coefficient = clampWrapper(coefficient);
|
||||
if (color.type.indexOf('hsl') !== -1) {
|
||||
color.values[2] += (100 - color.values[2]) * coefficient;
|
||||
} else if (color.type.indexOf('rgb') !== -1) {
|
||||
for (let i = 0; i < 3; i += 1) {
|
||||
color.values[i] += (255 - color.values[i]) * coefficient;
|
||||
}
|
||||
} else if (color.type.indexOf('color') !== -1) {
|
||||
for (let i = 0; i < 3; i += 1) {
|
||||
color.values[i] += (1 - color.values[i]) * coefficient;
|
||||
}
|
||||
}
|
||||
return recomposeColor(color);
|
||||
}
|
||||
export function private_safeLighten(color, coefficient, warning) {
|
||||
try {
|
||||
return lighten(color, coefficient);
|
||||
} catch (error) {
|
||||
if (warning && process.env.NODE_ENV !== 'production') {
|
||||
console.warn(warning);
|
||||
}
|
||||
return color;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Darken or lighten a color, depending on its luminance.
|
||||
* Light colors are darkened, dark colors are lightened.
|
||||
* @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
|
||||
* @param {number} coefficient=0.15 - multiplier in the range 0 - 1
|
||||
* @returns {string} A CSS color string. Hex input values are returned as rgb
|
||||
*/
|
||||
export function emphasize(color, coefficient = 0.15) {
|
||||
return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
|
||||
}
|
||||
export function private_safeEmphasize(color, coefficient, warning) {
|
||||
try {
|
||||
return emphasize(color, coefficient);
|
||||
} catch (error) {
|
||||
if (warning && process.env.NODE_ENV !== 'production') {
|
||||
console.warn(warning);
|
||||
}
|
||||
return color;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Blend a transparent overlay color with a background color, resulting in a single
|
||||
* RGB color.
|
||||
* @param {string} background - CSS color
|
||||
* @param {string} overlay - CSS color
|
||||
* @param {number} opacity - Opacity multiplier in the range 0 - 1
|
||||
* @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
|
||||
*/
|
||||
export function blend(background, overlay, opacity, gamma = 1.0) {
|
||||
const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
|
||||
const backgroundColor = decomposeColor(background);
|
||||
const overlayColor = decomposeColor(overlay);
|
||||
const rgb = [blendChannel(backgroundColor.values[0], overlayColor.values[0]), blendChannel(backgroundColor.values[1], overlayColor.values[1]), blendChannel(backgroundColor.values[2], overlayColor.values[2])];
|
||||
return recomposeColor({
|
||||
type: 'rgb',
|
||||
values: rgb
|
||||
});
|
||||
}
|
||||
-38
@@ -1,38 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
const _excluded = ["className", "component"];
|
||||
import * as React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styled from '@mui/styled-engine';
|
||||
import styleFunctionSx, { extendSxProp } from './styleFunctionSx';
|
||||
import useTheme from './useTheme';
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
export default function createBox(options = {}) {
|
||||
const {
|
||||
themeId,
|
||||
defaultTheme,
|
||||
defaultClassName = 'MuiBox-root',
|
||||
generateClassName
|
||||
} = options;
|
||||
const BoxRoot = styled('div', {
|
||||
shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
|
||||
})(styleFunctionSx);
|
||||
const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
|
||||
const theme = useTheme(defaultTheme);
|
||||
const _extendSxProp = extendSxProp(inProps),
|
||||
{
|
||||
className,
|
||||
component = 'div'
|
||||
} = _extendSxProp,
|
||||
other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded);
|
||||
return /*#__PURE__*/_jsx(BoxRoot, _extends({
|
||||
as: component,
|
||||
ref: ref,
|
||||
className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
|
||||
theme: themeId ? theme[themeId] || theme : theme
|
||||
}, other));
|
||||
});
|
||||
return Box;
|
||||
}
|
||||
-240
@@ -1,240 +0,0 @@
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
||||
const _excluded = ["ownerState"],
|
||||
_excluded2 = ["variants"],
|
||||
_excluded3 = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"];
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
|
||||
import { isPlainObject } from '@mui/utils/deepmerge';
|
||||
import capitalize from '@mui/utils/capitalize';
|
||||
import getDisplayName from '@mui/utils/getDisplayName';
|
||||
import createTheme from './createTheme';
|
||||
import styleFunctionSx from './styleFunctionSx';
|
||||
function isEmpty(obj) {
|
||||
return Object.keys(obj).length === 0;
|
||||
}
|
||||
|
||||
// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
|
||||
function isStringTag(tag) {
|
||||
return typeof tag === 'string' &&
|
||||
// 96 is one less than the char code
|
||||
// for "a" so this is checking that
|
||||
// it's a lowercase character
|
||||
tag.charCodeAt(0) > 96;
|
||||
}
|
||||
|
||||
// Update /system/styled/#api in case if this changes
|
||||
export function shouldForwardProp(prop) {
|
||||
return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
|
||||
}
|
||||
export const systemDefaultTheme = createTheme();
|
||||
const lowercaseFirstLetter = string => {
|
||||
if (!string) {
|
||||
return string;
|
||||
}
|
||||
return string.charAt(0).toLowerCase() + string.slice(1);
|
||||
};
|
||||
function resolveTheme({
|
||||
defaultTheme,
|
||||
theme,
|
||||
themeId
|
||||
}) {
|
||||
return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
|
||||
}
|
||||
function defaultOverridesResolver(slot) {
|
||||
if (!slot) {
|
||||
return null;
|
||||
}
|
||||
return (props, styles) => styles[slot];
|
||||
}
|
||||
function processStyleArg(callableStyle, _ref) {
|
||||
let {
|
||||
ownerState
|
||||
} = _ref,
|
||||
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
||||
const resolvedStylesArg = typeof callableStyle === 'function' ? callableStyle(_extends({
|
||||
ownerState
|
||||
}, props)) : callableStyle;
|
||||
if (Array.isArray(resolvedStylesArg)) {
|
||||
return resolvedStylesArg.flatMap(resolvedStyle => processStyleArg(resolvedStyle, _extends({
|
||||
ownerState
|
||||
}, props)));
|
||||
}
|
||||
if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
|
||||
const {
|
||||
variants = []
|
||||
} = resolvedStylesArg,
|
||||
otherStyles = _objectWithoutPropertiesLoose(resolvedStylesArg, _excluded2);
|
||||
let result = otherStyles;
|
||||
variants.forEach(variant => {
|
||||
let isMatch = true;
|
||||
if (typeof variant.props === 'function') {
|
||||
isMatch = variant.props(_extends({
|
||||
ownerState
|
||||
}, props, ownerState));
|
||||
} else {
|
||||
Object.keys(variant.props).forEach(key => {
|
||||
if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
|
||||
isMatch = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isMatch) {
|
||||
if (!Array.isArray(result)) {
|
||||
result = [result];
|
||||
}
|
||||
result.push(typeof variant.style === 'function' ? variant.style(_extends({
|
||||
ownerState
|
||||
}, props, ownerState)) : variant.style);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return resolvedStylesArg;
|
||||
}
|
||||
export default function createStyled(input = {}) {
|
||||
const {
|
||||
themeId,
|
||||
defaultTheme = systemDefaultTheme,
|
||||
rootShouldForwardProp = shouldForwardProp,
|
||||
slotShouldForwardProp = shouldForwardProp
|
||||
} = input;
|
||||
const systemSx = props => {
|
||||
return styleFunctionSx(_extends({}, props, {
|
||||
theme: resolveTheme(_extends({}, props, {
|
||||
defaultTheme,
|
||||
themeId
|
||||
}))
|
||||
}));
|
||||
};
|
||||
systemSx.__mui_systemSx = true;
|
||||
return (tag, inputOptions = {}) => {
|
||||
// Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
|
||||
processStyles(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
|
||||
const {
|
||||
name: componentName,
|
||||
slot: componentSlot,
|
||||
skipVariantsResolver: inputSkipVariantsResolver,
|
||||
skipSx: inputSkipSx,
|
||||
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
|
||||
// For more details: https://github.com/mui/material-ui/pull/37908
|
||||
overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
|
||||
} = inputOptions,
|
||||
options = _objectWithoutPropertiesLoose(inputOptions, _excluded3);
|
||||
|
||||
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
|
||||
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
|
||||
// TODO v6: remove `Root` in the next major release
|
||||
// For more details: https://github.com/mui/material-ui/pull/37908
|
||||
componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
|
||||
const skipSx = inputSkipSx || false;
|
||||
let label;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (componentName) {
|
||||
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
|
||||
// For more details: https://github.com/mui/material-ui/pull/37908
|
||||
label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
|
||||
}
|
||||
}
|
||||
let shouldForwardPropOption = shouldForwardProp;
|
||||
|
||||
// TODO v6: remove `Root` in the next major release
|
||||
// For more details: https://github.com/mui/material-ui/pull/37908
|
||||
if (componentSlot === 'Root' || componentSlot === 'root') {
|
||||
shouldForwardPropOption = rootShouldForwardProp;
|
||||
} else if (componentSlot) {
|
||||
// any other slot specified
|
||||
shouldForwardPropOption = slotShouldForwardProp;
|
||||
} else if (isStringTag(tag)) {
|
||||
// for string (html) tag, preserve the behavior in emotion & styled-components.
|
||||
shouldForwardPropOption = undefined;
|
||||
}
|
||||
const defaultStyledResolver = styledEngineStyled(tag, _extends({
|
||||
shouldForwardProp: shouldForwardPropOption,
|
||||
label
|
||||
}, options));
|
||||
const transformStyleArg = stylesArg => {
|
||||
// On the server Emotion doesn't use React.forwardRef for creating components, so the created
|
||||
// component stays as a function. This condition makes sure that we do not interpolate functions
|
||||
// which are basically components used as a selectors.
|
||||
if (typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg || isPlainObject(stylesArg)) {
|
||||
return props => processStyleArg(stylesArg, _extends({}, props, {
|
||||
theme: resolveTheme({
|
||||
theme: props.theme,
|
||||
defaultTheme,
|
||||
themeId
|
||||
})
|
||||
}));
|
||||
}
|
||||
return stylesArg;
|
||||
};
|
||||
const muiStyledResolver = (styleArg, ...expressions) => {
|
||||
let transformedStyleArg = transformStyleArg(styleArg);
|
||||
const expressionsWithDefaultTheme = expressions ? expressions.map(transformStyleArg) : [];
|
||||
if (componentName && overridesResolver) {
|
||||
expressionsWithDefaultTheme.push(props => {
|
||||
const theme = resolveTheme(_extends({}, props, {
|
||||
defaultTheme,
|
||||
themeId
|
||||
}));
|
||||
if (!theme.components || !theme.components[componentName] || !theme.components[componentName].styleOverrides) {
|
||||
return null;
|
||||
}
|
||||
const styleOverrides = theme.components[componentName].styleOverrides;
|
||||
const resolvedStyleOverrides = {};
|
||||
// TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
|
||||
Object.entries(styleOverrides).forEach(([slotKey, slotStyle]) => {
|
||||
resolvedStyleOverrides[slotKey] = processStyleArg(slotStyle, _extends({}, props, {
|
||||
theme
|
||||
}));
|
||||
});
|
||||
return overridesResolver(props, resolvedStyleOverrides);
|
||||
});
|
||||
}
|
||||
if (componentName && !skipVariantsResolver) {
|
||||
expressionsWithDefaultTheme.push(props => {
|
||||
var _theme$components;
|
||||
const theme = resolveTheme(_extends({}, props, {
|
||||
defaultTheme,
|
||||
themeId
|
||||
}));
|
||||
const themeVariants = theme == null || (_theme$components = theme.components) == null || (_theme$components = _theme$components[componentName]) == null ? void 0 : _theme$components.variants;
|
||||
return processStyleArg({
|
||||
variants: themeVariants
|
||||
}, _extends({}, props, {
|
||||
theme
|
||||
}));
|
||||
});
|
||||
}
|
||||
if (!skipSx) {
|
||||
expressionsWithDefaultTheme.push(systemSx);
|
||||
}
|
||||
const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
|
||||
if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
|
||||
const placeholders = new Array(numOfCustomFnsApplied).fill('');
|
||||
// If the type is array, than we need to add placeholders in the template for the overrides, variants and the sx styles.
|
||||
transformedStyleArg = [...styleArg, ...placeholders];
|
||||
transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
|
||||
}
|
||||
const Component = defaultStyledResolver(transformedStyleArg, ...expressionsWithDefaultTheme);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
let displayName;
|
||||
if (componentName) {
|
||||
displayName = `${componentName}${capitalize(componentSlot || '')}`;
|
||||
}
|
||||
if (displayName === undefined) {
|
||||
displayName = `Styled(${getDisplayName(tag)})`;
|
||||
}
|
||||
Component.displayName = displayName;
|
||||
}
|
||||
if (tag.muiName) {
|
||||
Component.muiName = tag.muiName;
|
||||
}
|
||||
return Component;
|
||||
};
|
||||
if (defaultStyledResolver.withConfig) {
|
||||
muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
|
||||
}
|
||||
return muiStyledResolver;
|
||||
};
|
||||
}
|
||||
+9
-2
@@ -64,7 +64,8 @@ export function unstable_createStyleFunctionSx() {
|
||||
var _theme$unstable_sxCon;
|
||||
const {
|
||||
sx,
|
||||
theme = {}
|
||||
theme = {},
|
||||
nested
|
||||
} = props || {};
|
||||
if (!sx) {
|
||||
return null; // Emotion & styled-components will neglect null
|
||||
@@ -105,7 +106,8 @@ export function unstable_createStyleFunctionSx() {
|
||||
if (objectsHaveSameKeys(breakpointsValues, value)) {
|
||||
css[styleKey] = styleFunctionSx({
|
||||
sx: value,
|
||||
theme
|
||||
theme,
|
||||
nested: true
|
||||
});
|
||||
} else {
|
||||
css = merge(css, breakpointsValues);
|
||||
@@ -116,6 +118,11 @@ export function unstable_createStyleFunctionSx() {
|
||||
}
|
||||
}
|
||||
});
|
||||
if (!nested && theme.modularCssLayers) {
|
||||
return {
|
||||
'@layer sx': removeUnusedBreakpoints(breakpointsKeys, css)
|
||||
};
|
||||
}
|
||||
return removeUnusedBreakpoints(breakpointsKeys, css);
|
||||
}
|
||||
return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
|
||||
|
||||
-3
@@ -1,3 +0,0 @@
|
||||
import createStyled from './createStyled';
|
||||
const styled = createStyled();
|
||||
export default styled;
|
||||
-126
@@ -1,126 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
|
||||
import { getThemeProps } from '../useThemeProps';
|
||||
import useTheme from '../useThemeWithoutDefault';
|
||||
|
||||
/**
|
||||
* @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
|
||||
*/
|
||||
|
||||
function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
|
||||
const [match, setMatch] = React.useState(() => {
|
||||
if (noSsr && matchMedia) {
|
||||
return matchMedia(query).matches;
|
||||
}
|
||||
if (ssrMatchMedia) {
|
||||
return ssrMatchMedia(query).matches;
|
||||
}
|
||||
|
||||
// Once the component is mounted, we rely on the
|
||||
// event listeners to return the correct matches value.
|
||||
return defaultMatches;
|
||||
});
|
||||
useEnhancedEffect(() => {
|
||||
let active = true;
|
||||
if (!matchMedia) {
|
||||
return undefined;
|
||||
}
|
||||
const queryList = matchMedia(query);
|
||||
const updateMatch = () => {
|
||||
// Workaround Safari wrong implementation of matchMedia
|
||||
// TODO can we remove it?
|
||||
// https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
|
||||
if (active) {
|
||||
setMatch(queryList.matches);
|
||||
}
|
||||
};
|
||||
updateMatch();
|
||||
// TODO: Use `addEventListener` once support for Safari < 14 is dropped
|
||||
queryList.addListener(updateMatch);
|
||||
return () => {
|
||||
active = false;
|
||||
queryList.removeListener(updateMatch);
|
||||
};
|
||||
}, [query, matchMedia]);
|
||||
return match;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
|
||||
const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
|
||||
function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
|
||||
const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
|
||||
const getServerSnapshot = React.useMemo(() => {
|
||||
if (noSsr && matchMedia) {
|
||||
return () => matchMedia(query).matches;
|
||||
}
|
||||
if (ssrMatchMedia !== null) {
|
||||
const {
|
||||
matches
|
||||
} = ssrMatchMedia(query);
|
||||
return () => matches;
|
||||
}
|
||||
return getDefaultSnapshot;
|
||||
}, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
|
||||
const [getSnapshot, subscribe] = React.useMemo(() => {
|
||||
if (matchMedia === null) {
|
||||
return [getDefaultSnapshot, () => () => {}];
|
||||
}
|
||||
const mediaQueryList = matchMedia(query);
|
||||
return [() => mediaQueryList.matches, notify => {
|
||||
// TODO: Use `addEventListener` once support for Safari < 14 is dropped
|
||||
mediaQueryList.addListener(notify);
|
||||
return () => {
|
||||
mediaQueryList.removeListener(notify);
|
||||
};
|
||||
}];
|
||||
}, [getDefaultSnapshot, matchMedia, query]);
|
||||
const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
||||
return match;
|
||||
}
|
||||
export default function useMediaQuery(queryInput, options = {}) {
|
||||
const theme = useTheme();
|
||||
// Wait for jsdom to support the match media feature.
|
||||
// All the browsers MUI support have this built-in.
|
||||
// This defensive check is here for simplicity.
|
||||
// Most of the time, the match media logic isn't central to people tests.
|
||||
const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
|
||||
const {
|
||||
defaultMatches = false,
|
||||
matchMedia = supportMatchMedia ? window.matchMedia : null,
|
||||
ssrMatchMedia = null,
|
||||
noSsr = false
|
||||
} = getThemeProps({
|
||||
name: 'MuiUseMediaQuery',
|
||||
props: options,
|
||||
theme
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (typeof queryInput === 'function' && theme === null) {
|
||||
console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
|
||||
}
|
||||
}
|
||||
let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
|
||||
query = query.replace(/^@media( ?)/m, '');
|
||||
|
||||
// TODO: Drop `useMediaQueryOld` and use `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
|
||||
const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
|
||||
const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
React.useDebugValue({
|
||||
query,
|
||||
match
|
||||
});
|
||||
}
|
||||
return match;
|
||||
}
|
||||
-12
@@ -1,12 +0,0 @@
|
||||
import resolveProps from '@mui/utils/resolveProps';
|
||||
export default function getThemeProps(params) {
|
||||
const {
|
||||
theme,
|
||||
name,
|
||||
props
|
||||
} = params;
|
||||
if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
|
||||
return props;
|
||||
}
|
||||
return resolveProps(theme.components[name].defaultProps, props);
|
||||
}
|
||||
-21
@@ -1,21 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import getThemeProps from './getThemeProps';
|
||||
import useTheme from '../useTheme';
|
||||
export default function useThemeProps({
|
||||
props,
|
||||
name,
|
||||
defaultTheme,
|
||||
themeId
|
||||
}) {
|
||||
let theme = useTheme(defaultTheme);
|
||||
if (themeId) {
|
||||
theme = theme[themeId] || theme;
|
||||
}
|
||||
const mergedProps = getThemeProps({
|
||||
theme,
|
||||
name,
|
||||
props
|
||||
});
|
||||
return mergedProps;
|
||||
}
|
||||
Reference in New Issue
Block a user