@mui/material 5.10.2 → 5.10.3

package/esm/SpeedDialAction/SpeedDialAction.js

@@ -0,0 +1,270 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "delay", "FabProps", "icon", "id", "open", "TooltipClasses", "tooltipOpen", "tooltipPlacement", "tooltipTitle"];
+// @inheritedComponent Tooltip
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { emphasize } from '@mui/system';
+import styled from '../styles/styled';
+import useThemeProps from '../styles/useThemeProps';
+import Fab from '../Fab';
+import Tooltip from '../Tooltip';
+import capitalize from '../utils/capitalize';
+import speedDialActionClasses, { getSpeedDialActionUtilityClass } from './speedDialActionClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    open,
+    tooltipPlacement,
+    classes
+  } = ownerState;
+  const slots = {
+    fab: ['fab', !open && 'fabClosed'],
+    staticTooltip: ['staticTooltip', `tooltipPlacement${capitalize(tooltipPlacement)}`, !open && 'staticTooltipClosed'],
+    staticTooltipLabel: ['staticTooltipLabel']
+  };
+  return composeClasses(slots, getSpeedDialActionUtilityClass, classes);
+};
+
+const SpeedDialActionFab = styled(Fab, {
+  name: 'MuiSpeedDialAction',
+  slot: 'Fab',
+  skipVariantsResolver: false,
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.fab, !ownerState.open && styles.fabClosed];
+  }
+})(({
+  theme,
+  ownerState
+}) => _extends({
+  margin: 8,
+  color: (theme.vars || theme).palette.text.secondary,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  '&:hover': {
+    backgroundColor: theme.vars ? theme.vars.palette.SpeedDialAction.fabHoverBg : emphasize(theme.palette.background.paper, 0.15)
+  },
+  transition: `${theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shorter
+  })}, opacity 0.8s`,
+  opacity: 1
+}, !ownerState.open && {
+  opacity: 0,
+  transform: 'scale(0)'
+}));
+const SpeedDialActionStaticTooltip = styled('span', {
+  name: 'MuiSpeedDialAction',
+  slot: 'StaticTooltip',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.staticTooltip, !ownerState.open && styles.staticTooltipClosed, styles[`tooltipPlacement${capitalize(ownerState.tooltipPlacement)}`]];
+  }
+})(({
+  theme,
+  ownerState
+}) => ({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  [`& .${speedDialActionClasses.staticTooltipLabel}`]: _extends({
+    transition: theme.transitions.create(['transform', 'opacity'], {
+      duration: theme.transitions.duration.shorter
+    }),
+    opacity: 1
+  }, !ownerState.open && {
+    opacity: 0,
+    transform: 'scale(0.5)'
+  }, ownerState.tooltipPlacement === 'left' && {
+    transformOrigin: '100% 50%',
+    right: '100%',
+    marginRight: 8
+  }, ownerState.tooltipPlacement === 'right' && {
+    transformOrigin: '0% 50%',
+    left: '100%',
+    marginLeft: 8
+  })
+}));
+const SpeedDialActionStaticTooltipLabel = styled('span', {
+  name: 'MuiSpeedDialAction',
+  slot: 'StaticTooltipLabel',
+  overridesResolver: (props, styles) => styles.staticTooltipLabel
+})(({
+  theme
+}) => _extends({
+  position: 'absolute'
+}, theme.typography.body1, {
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  boxShadow: (theme.vars || theme).shadows[1],
+  color: (theme.vars || theme).palette.text.secondary,
+  padding: '4px 16px',
+  wordBreak: 'keep-all'
+}));
+const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiSpeedDialAction'
+  });
+
+  const {
+    className,
+    delay = 0,
+    FabProps = {},
+    icon,
+    id,
+    open,
+    TooltipClasses,
+    tooltipOpen: tooltipOpenProp = false,
+    tooltipPlacement = 'left',
+    tooltipTitle
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const ownerState = _extends({}, props, {
+    tooltipPlacement
+  });
+
+  const classes = useUtilityClasses(ownerState);
+  const [tooltipOpen, setTooltipOpen] = React.useState(tooltipOpenProp);
+
+  const handleTooltipClose = () => {
+    setTooltipOpen(false);
+  };
+
+  const handleTooltipOpen = () => {
+    setTooltipOpen(true);
+  };
+
+  const transitionStyle = {
+    transitionDelay: `${delay}ms`
+  };
+
+  const fab = /*#__PURE__*/_jsx(SpeedDialActionFab, _extends({
+    size: "small",
+    className: clsx(classes.fab, className),
+    tabIndex: -1,
+    role: "menuitem",
+    ownerState: ownerState
+  }, FabProps, {
+    style: _extends({}, transitionStyle, FabProps.style),
+    children: icon
+  }));
+
+  if (tooltipOpenProp) {
+    return /*#__PURE__*/_jsxs(SpeedDialActionStaticTooltip, _extends({
+      id: id,
+      ref: ref,
+      className: classes.staticTooltip,
+      ownerState: ownerState
+    }, other, {
+      children: [/*#__PURE__*/_jsx(SpeedDialActionStaticTooltipLabel, {
+        style: transitionStyle,
+        id: `${id}-label`,
+        className: classes.staticTooltipLabel,
+        ownerState: ownerState,
+        children: tooltipTitle
+      }), /*#__PURE__*/React.cloneElement(fab, {
+        'aria-labelledby': `${id}-label`
+      })]
+    }));
+  }
+
+  if (!open && tooltipOpen) {
+    setTooltipOpen(false);
+  }
+
+  return /*#__PURE__*/_jsx(Tooltip, _extends({
+    id: id,
+    ref: ref,
+    title: tooltipTitle,
+    placement: tooltipPlacement,
+    onClose: handleTooltipClose,
+    onOpen: handleTooltipOpen,
+    open: open && tooltipOpen,
+    classes: TooltipClasses
+  }, other, {
+    children: fab
+  }));
+});
+process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * Adds a transition delay, to allow a series of SpeedDialActions to be animated.
+   * @default 0
+   */
+  delay: PropTypes.number,
+
+  /**
+   * Props applied to the [`Fab`](/material-ui/api/fab/) component.
+   * @default {}
+   */
+  FabProps: PropTypes.object,
+
+  /**
+   * The icon to display in the SpeedDial Fab.
+   */
+  icon: PropTypes.node,
+
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: PropTypes.string,
+
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool,
+
+  /**
+   * The system prop that 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]),
+
+  /**
+   * `classes` prop applied to the [`Tooltip`](/material-ui/api/tooltip/) element.
+   */
+  TooltipClasses: PropTypes.object,
+
+  /**
+   * Make the tooltip always visible when the SpeedDial is open.
+   * @default false
+   */
+  tooltipOpen: PropTypes.bool,
+
+  /**
+   * Placement of the tooltip.
+   * @default 'left'
+   */
+  tooltipPlacement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+
+  /**
+   * Label to display in the tooltip.
+   */
+  tooltipTitle: PropTypes.node
+} : void 0;
+export default SpeedDialAction;

package/esm/SpeedDialAction/index.js

@@ -0,0 +1,3 @@
+export { default } from './SpeedDialAction';
+export { default as speedDialActionClasses } from './speedDialActionClasses';
+export * from './speedDialActionClasses';

package/esm/SpeedDialAction/speedDialActionClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getSpeedDialActionUtilityClass(slot) {
+  return generateUtilityClass('MuiSpeedDialAction', slot);
+}
+const speedDialActionClasses = generateUtilityClasses('MuiSpeedDialAction', ['fab', 'fabClosed', 'staticTooltip', 'staticTooltipClosed', 'staticTooltipLabel', 'tooltipPlacementLeft', 'tooltipPlacementRight']);
+export default speedDialActionClasses;

package/esm/SpeedDialIcon/SpeedDialIcon.js

@@ -0,0 +1,150 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "icon", "open", "openIcon"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+import styled from '../styles/styled';
+import useThemeProps from '../styles/useThemeProps';
+import AddIcon from '../internal/svg-icons/Add';
+import speedDialIconClasses, { getSpeedDialIconUtilityClass } from './speedDialIconClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    open,
+    openIcon
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    icon: ['icon', open && 'iconOpen', openIcon && open && 'iconWithOpenIconOpen'],
+    openIcon: ['openIcon', open && 'openIconOpen']
+  };
+  return composeClasses(slots, getSpeedDialIconUtilityClass, classes);
+};
+
+const SpeedDialIconRoot = styled('span', {
+  name: 'MuiSpeedDialIcon',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [{
+      [`& .${speedDialIconClasses.icon}`]: styles.icon
+    }, {
+      [`& .${speedDialIconClasses.icon}`]: ownerState.open && styles.iconOpen
+    }, {
+      [`& .${speedDialIconClasses.icon}`]: ownerState.open && ownerState.openIcon && styles.iconWithOpenIconOpen
+    }, {
+      [`& .${speedDialIconClasses.openIcon}`]: styles.openIcon
+    }, {
+      [`& .${speedDialIconClasses.openIcon}`]: ownerState.open && styles.openIconOpen
+    }, styles.root];
+  }
+})(({
+  theme,
+  ownerState
+}) => ({
+  height: 24,
+  [`& .${speedDialIconClasses.icon}`]: _extends({
+    transition: theme.transitions.create(['transform', 'opacity'], {
+      duration: theme.transitions.duration.short
+    })
+  }, ownerState.open && _extends({
+    transform: 'rotate(45deg)'
+  }, ownerState.openIcon && {
+    opacity: 0
+  })),
+  [`& .${speedDialIconClasses.openIcon}`]: _extends({
+    position: 'absolute',
+    transition: theme.transitions.create(['transform', 'opacity'], {
+      duration: theme.transitions.duration.short
+    }),
+    opacity: 0,
+    transform: 'rotate(-45deg)'
+  }, ownerState.open && {
+    transform: 'rotate(0deg)',
+    opacity: 1
+  })
+}));
+const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiSpeedDialIcon'
+  });
+
+  const {
+    className,
+    icon: iconProp,
+    openIcon: openIconProp
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
+
+  function formatIcon(icon, newClassName) {
+    if ( /*#__PURE__*/React.isValidElement(icon)) {
+      return /*#__PURE__*/React.cloneElement(icon, {
+        className: newClassName
+      });
+    }
+
+    return icon;
+  }
+
+  return /*#__PURE__*/_jsxs(SpeedDialIconRoot, _extends({
+    className: clsx(classes.root, className),
+    ref: ref,
+    ownerState: ownerState
+  }, other, {
+    children: [openIconProp ? formatIcon(openIconProp, classes.openIcon) : null, iconProp ? formatIcon(iconProp, classes.icon) : /*#__PURE__*/_jsx(AddIcon, {
+      className: classes.icon
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" ? SpeedDialIcon.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
+  /**
+   * The icon to display.
+   */
+  icon: PropTypes.node,
+
+  /**
+   * @ignore
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool,
+
+  /**
+   * The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open.
+   */
+  openIcon: PropTypes.node,
+
+  /**
+   * The system prop that 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])
+} : void 0;
+SpeedDialIcon.muiName = 'SpeedDialIcon';
+export default SpeedDialIcon;

package/esm/SpeedDialIcon/index.js

@@ -0,0 +1,3 @@
+export { default } from './SpeedDialIcon';
+export { default as speedDialIconClasses } from './speedDialIconClasses';
+export * from './speedDialIconClasses';

package/esm/SpeedDialIcon/speedDialIconClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getSpeedDialIconUtilityClass(slot) {
+  return generateUtilityClass('MuiSpeedDialIcon', slot);
+}
+const speedDialIconClasses = generateUtilityClasses('MuiSpeedDialIcon', ['root', 'icon', 'iconOpen', 'iconWithOpenIconOpen', 'openIcon', 'openIconOpen']);
+export default speedDialIconClasses;

package/esm/Stack/Stack.js

@@ -0,0 +1,183 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["component", "direction", "spacing", "divider", "children"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { createUnarySpacing, getValue, handleBreakpoints, mergeBreakpointsInOrder, unstable_extendSxProp as extendSxProp, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
+import { deepmerge } from '@mui/utils';
+import styled from '../styles/styled';
+import useThemeProps from '../styles/useThemeProps';
+/**
+ * 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]
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+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) => {
+      return {
+        '& > :not(style) + :not(style)': {
+          margin: 0,
+          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
+        }
+      };
+    };
+
+    styles = deepmerge(styles, handleBreakpoints({
+      theme
+    }, spacingValues, styleFromPropValue));
+  }
+
+  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
+  return styles;
+};
+const StackRoot = styled('div', {
+  name: 'MuiStack',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    return [styles.root];
+  }
+})(style);
+const Stack = /*#__PURE__*/React.forwardRef(function Stack(inProps, ref) {
+  const themeProps = useThemeProps({
+    props: inProps,
+    name: 'MuiStack'
+  });
+  const props = extendSxProp(themeProps);
+
+  const {
+    component = 'div',
+    direction = 'column',
+    spacing = 0,
+    divider,
+    children
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const ownerState = {
+    direction,
+    spacing
+  };
+  return /*#__PURE__*/_jsx(StackRoot, _extends({
+    as: component,
+    ownerState: ownerState,
+    ref: ref
+  }, other, {
+    children: divider ? joinChildren(children, divider) : children
+  }));
+});
+process.env.NODE_ENV !== "production" ? Stack.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn 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])
+} : void 0;
+export default Stack;

package/esm/Stack/index.js

@@ -0,0 +1 @@
+export { default } from './Stack';