paradiego

node_modules/@mui/material/modern/Hidden/withWidth.js

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import getDisplayName from '@mui/utils/getDisplayName';
+import { getThemeProps } from '@mui/system/useThemeProps';
+import useTheme from "../styles/useTheme.js";
+import useEnhancedEffect from "../utils/useEnhancedEffect.js";
+import useMediaQuery from "../useMediaQuery/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+// By default, returns true if screen width is the same or greater than the given breakpoint.
+export const isWidthUp = (breakpoint, width, inclusive = true) => {
+  if (inclusive) {
+    return breakpointKeys.indexOf(breakpoint) <= breakpointKeys.indexOf(width);
+  }
+  return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
+};
+
+// By default, returns true if screen width is less than the given breakpoint.
+export const isWidthDown = (breakpoint, width, inclusive = false) => {
+  if (inclusive) {
+    return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
+  }
+  return breakpointKeys.indexOf(width) < breakpointKeys.indexOf(breakpoint);
+};
+const withWidth = (options = {}) => Component => {
+  const {
+    withTheme: withThemeOption = false,
+    noSSR = false,
+    initialWidth: initialWidthOption
+  } = options;
+  function WithWidth(props) {
+    const contextTheme = useTheme();
+    const theme = props.theme || contextTheme;
+    const {
+      initialWidth,
+      width,
+      ...other
+    } = getThemeProps({
+      theme,
+      name: 'MuiWithWidth',
+      props
+    });
+    const [mountedState, setMountedState] = React.useState(false);
+    useEnhancedEffect(() => {
+      setMountedState(true);
+    }, []);
+
+    /**
+     * innerWidth |xs      sm      md      lg      xl
+     *            |-------|-------|-------|-------|------>
+     * width      |  xs   |  sm   |  md   |  lg   |  xl
+     */
+    const keys = theme.breakpoints.keys.slice().reverse();
+    const widthComputed = keys.reduce((output, key) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const matches = useMediaQuery(theme.breakpoints.up(key));
+      return !output && matches ? key : output;
+    }, null);
+    const more = {
+      width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption,
+      ...(withThemeOption ? {
+        theme
+      } : {}),
+      ...other
+    };
+
+    // When rendering the component on the server,
+    // we have no idea about the client browser screen width.
+    // In order to prevent blinks and help the reconciliation of the React tree
+    // we are not rendering the child component.
+    //
+    // An alternative is to use the `initialWidth` property.
+    if (more.width === undefined) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(Component, {
+      ...more
+    });
+  }
+  process.env.NODE_ENV !== "production" ? WithWidth.propTypes = {
+    /**
+     * As `window.innerWidth` is unavailable on the server,
+     * we default to rendering an empty component during the first mount.
+     * You might want to use a heuristic to approximate
+     * the screen width of the client browser screen width.
+     *
+     * For instance, you could be using the user-agent or the client-hints.
+     * https://caniuse.com/#search=client%20hint
+     */
+    initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+    /**
+     * @ignore
+     */
+    theme: PropTypes.object,
+    /**
+     * Bypass the width calculation logic.
+     */
+    width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
+  } : void 0;
+  if (process.env.NODE_ENV !== 'production') {
+    WithWidth.displayName = `WithWidth(${getDisplayName(Component)})`;
+  }
+  return WithWidth;
+};
+export default withWidth;