ece-docs-components 1.0.19 → 1.0.21

package/dist/cjs/node_modules/@mui/material/esm/Chip/Chip.js

@@ -0,0 +1,652 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../../../../_virtual/index.js');
+var clsx = require('../../../../clsx/dist/clsx.js');
+var Cancel = require('../internal/svg-icons/Cancel.js');
+var memoTheme = require('../utils/memoTheme.js');
+var createSimplePaletteValueFilter = require('../utils/createSimplePaletteValueFilter.js');
+var chipClasses = require('./chipClasses.js');
+var useSlot = require('../utils/useSlot.js');
+var jsxRuntime = require('../../../../../_virtual/jsx-runtime.js');
+var DefaultPropsProvider = require('../DefaultPropsProvider/DefaultPropsProvider.js');
+var useForkRef = require('../../../utils/esm/useForkRef/useForkRef.js');
+var ButtonBase = require('../ButtonBase/ButtonBase.js');
+var styled = require('../styles/styled.js');
+var capitalize = require('../../../utils/esm/capitalize/capitalize.js');
+var composeClasses = require('../../../utils/esm/composeClasses/composeClasses.js');
+var unsupportedProp = require('../../../utils/esm/unsupportedProp/unsupportedProp.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    disabled,
+    size,
+    color,
+    iconColor,
+    onDelete,
+    clickable,
+    variant
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, disabled && 'disabled', `size${capitalize.default(size)}`, `color${capitalize.default(color)}`, clickable && 'clickable', clickable && `clickableColor${capitalize.default(color)}`, onDelete && 'deletable', onDelete && `deletableColor${capitalize.default(color)}`, `${variant}${capitalize.default(color)}`],
+    label: ['label', `label${capitalize.default(size)}`],
+    avatar: ['avatar', `avatar${capitalize.default(size)}`, `avatarColor${capitalize.default(color)}`],
+    icon: ['icon', `icon${capitalize.default(size)}`, `iconColor${capitalize.default(iconColor)}`],
+    deleteIcon: ['deleteIcon', `deleteIcon${capitalize.default(size)}`, `deleteIconColor${capitalize.default(color)}`, `deleteIcon${capitalize.default(variant)}Color${capitalize.default(color)}`]
+  };
+  return composeClasses.default(slots, chipClasses.getChipUtilityClass, classes);
+};
+const ChipRoot = styled.default('div', {
+  name: 'MuiChip',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      color,
+      iconColor,
+      clickable,
+      onDelete,
+      size,
+      variant
+    } = ownerState;
+    return [{
+      [`& .${chipClasses.default.avatar}`]: styles.avatar
+    }, {
+      [`& .${chipClasses.default.avatar}`]: styles[`avatar${capitalize.default(size)}`]
+    }, {
+      [`& .${chipClasses.default.avatar}`]: styles[`avatarColor${capitalize.default(color)}`]
+    }, {
+      [`& .${chipClasses.default.icon}`]: styles.icon
+    }, {
+      [`& .${chipClasses.default.icon}`]: styles[`icon${capitalize.default(size)}`]
+    }, {
+      [`& .${chipClasses.default.icon}`]: styles[`iconColor${capitalize.default(iconColor)}`]
+    }, {
+      [`& .${chipClasses.default.deleteIcon}`]: styles.deleteIcon
+    }, {
+      [`& .${chipClasses.default.deleteIcon}`]: styles[`deleteIcon${capitalize.default(size)}`]
+    }, {
+      [`& .${chipClasses.default.deleteIcon}`]: styles[`deleteIconColor${capitalize.default(color)}`]
+    }, {
+      [`& .${chipClasses.default.deleteIcon}`]: styles[`deleteIcon${capitalize.default(variant)}Color${capitalize.default(color)}`]
+    }, styles.root, styles[`size${capitalize.default(size)}`], styles[`color${capitalize.default(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize.default(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize.default(color)}`], styles[variant], styles[`${variant}${capitalize.default(color)}`]];
+  }
+})(memoTheme.default(({
+  theme
+}) => {
+  const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
+  return {
+    maxWidth: '100%',
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.pxToRem(13),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
+    lineHeight: 1.5,
+    color: (theme.vars || theme).palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
+    borderRadius: 32 / 2,
+    whiteSpace: 'nowrap',
+    transition: theme.transitions.create(['background-color', 'box-shadow']),
+    // reset cursor explicitly in case ButtonBase is used
+    cursor: 'unset',
+    // We disable the focus ring for mouse, touch and keyboard users.
+    outline: 0,
+    textDecoration: 'none',
+    border: 0,
+    // Remove `button` border
+    padding: 0,
+    // Remove `button` padding
+    verticalAlign: 'middle',
+    boxSizing: 'border-box',
+    [`&.${chipClasses.default.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      pointerEvents: 'none'
+    },
+    [`& .${chipClasses.default.avatar}`]: {
+      marginLeft: 5,
+      marginRight: -6,
+      width: 24,
+      height: 24,
+      color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
+      fontSize: theme.typography.pxToRem(12)
+    },
+    [`& .${chipClasses.default.avatarColorPrimary}`]: {
+      color: (theme.vars || theme).palette.primary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    },
+    [`& .${chipClasses.default.avatarColorSecondary}`]: {
+      color: (theme.vars || theme).palette.secondary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.secondary.dark
+    },
+    [`& .${chipClasses.default.avatarSmall}`]: {
+      marginLeft: 4,
+      marginRight: -4,
+      width: 18,
+      height: 18,
+      fontSize: theme.typography.pxToRem(10)
+    },
+    [`& .${chipClasses.default.icon}`]: {
+      marginLeft: 5,
+      marginRight: -6
+    },
+    [`& .${chipClasses.default.deleteIcon}`]: {
+      WebkitTapHighlightColor: 'transparent',
+      color: theme.alpha((theme.vars || theme).palette.text.primary, 0.26),
+      fontSize: 22,
+      cursor: 'pointer',
+      margin: '0 5px 0 -6px',
+      '&:hover': {
+        color: theme.alpha((theme.vars || theme).palette.text.primary, 0.4)
+      }
+    },
+    variants: [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        height: 24,
+        [`& .${chipClasses.default.icon}`]: {
+          fontSize: 18,
+          marginLeft: 4,
+          marginRight: -4
+        },
+        [`& .${chipClasses.default.deleteIcon}`]: {
+          fontSize: 16,
+          marginRight: 4,
+          marginLeft: -4
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter.default(['contrastText'])).map(([color]) => {
+      return {
+        props: {
+          color
+        },
+        style: {
+          backgroundColor: (theme.vars || theme).palette[color].main,
+          color: (theme.vars || theme).palette[color].contrastText,
+          [`& .${chipClasses.default.deleteIcon}`]: {
+            color: theme.alpha((theme.vars || theme).palette[color].contrastText, 0.7),
+            '&:hover, &:active': {
+              color: (theme.vars || theme).palette[color].contrastText
+            }
+          }
+        }
+      };
+    }), {
+      props: props => props.iconColor === props.color,
+      style: {
+        [`& .${chipClasses.default.icon}`]: {
+          color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
+        }
+      }
+    }, {
+      props: props => props.iconColor === props.color && props.color !== 'default',
+      style: {
+        [`& .${chipClasses.default.icon}`]: {
+          color: 'inherit'
+        }
+      }
+    }, {
+      props: {
+        onDelete: true
+      },
+      style: {
+        [`&.${chipClasses.default.focusVisible}`]: {
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter.default(['dark'])).map(([color]) => {
+      return {
+        props: {
+          color,
+          onDelete: true
+        },
+        style: {
+          [`&.${chipClasses.default.focusVisible}`]: {
+            background: (theme.vars || theme).palette[color].dark
+          }
+        }
+      };
+    }), {
+      props: {
+        clickable: true
+      },
+      style: {
+        userSelect: 'none',
+        WebkitTapHighlightColor: 'transparent',
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`)
+        },
+        [`&.${chipClasses.default.focusVisible}`]: {
+          backgroundColor: theme.alpha((theme.vars || theme).palette.action.selected, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.focusOpacity}`)
+        },
+        '&:active': {
+          boxShadow: (theme.vars || theme).shadows[1]
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter.default(['dark'])).map(([color]) => ({
+      props: {
+        color,
+        clickable: true
+      },
+      style: {
+        [`&:hover, &.${chipClasses.default.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette[color].dark
+        }
+      }
+    })), {
+      props: {
+        variant: 'outlined'
+      },
+      style: {
+        backgroundColor: 'transparent',
+        border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+        [`&.${chipClasses.default.clickable}:hover`]: {
+          backgroundColor: (theme.vars || theme).palette.action.hover
+        },
+        [`&.${chipClasses.default.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette.action.focus
+        },
+        [`& .${chipClasses.default.avatar}`]: {
+          marginLeft: 4
+        },
+        [`& .${chipClasses.default.avatarSmall}`]: {
+          marginLeft: 2
+        },
+        [`& .${chipClasses.default.icon}`]: {
+          marginLeft: 4
+        },
+        [`& .${chipClasses.default.iconSmall}`]: {
+          marginLeft: 2
+        },
+        [`& .${chipClasses.default.deleteIcon}`]: {
+          marginRight: 5
+        },
+        [`& .${chipClasses.default.deleteIconSmall}`]: {
+          marginRight: 3
+        }
+      }
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter.default()) // no need to check for mainChannel as it's calculated from main
+    .map(([color]) => ({
+      props: {
+        variant: 'outlined',
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main,
+        border: `1px solid ${theme.alpha((theme.vars || theme).palette[color].main, 0.7)}`,
+        [`&.${chipClasses.default.clickable}:hover`]: {
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.hoverOpacity)
+        },
+        [`&.${chipClasses.default.focusVisible}`]: {
+          backgroundColor: theme.alpha((theme.vars || theme).palette[color].main, (theme.vars || theme).palette.action.focusOpacity)
+        },
+        [`& .${chipClasses.default.deleteIcon}`]: {
+          color: theme.alpha((theme.vars || theme).palette[color].main, 0.7),
+          '&:hover, &:active': {
+            color: (theme.vars || theme).palette[color].main
+          }
+        }
+      }
+    }))]
+  };
+}));
+const ChipLabel = styled.default('span', {
+  name: 'MuiChip',
+  slot: 'Label',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    const {
+      size
+    } = ownerState;
+    return [styles.label, styles[`label${capitalize.default(size)}`]];
+  }
+})({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  paddingLeft: 12,
+  paddingRight: 12,
+  whiteSpace: 'nowrap',
+  variants: [{
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      paddingLeft: 11,
+      paddingRight: 11
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      paddingLeft: 8,
+      paddingRight: 8
+    }
+  }, {
+    props: {
+      size: 'small',
+      variant: 'outlined'
+    },
+    style: {
+      paddingLeft: 7,
+      paddingRight: 7
+    }
+  }]
+});
+function isDeleteKeyboardEvent(keyboardEvent) {
+  return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
+}
+
+/**
+ * Chips represent complex entities in small blocks, such as a contact.
+ */
+const Chip = /*#__PURE__*/React__namespace.forwardRef(function Chip(inProps, ref) {
+  const props = DefaultPropsProvider.useDefaultProps({
+    props: inProps,
+    name: 'MuiChip'
+  });
+  const {
+    avatar: avatarProp,
+    className,
+    clickable: clickableProp,
+    color = 'default',
+    component: ComponentProp,
+    deleteIcon: deleteIconProp,
+    disabled = false,
+    icon: iconProp,
+    label,
+    onClick,
+    onDelete,
+    onKeyDown,
+    onKeyUp,
+    size = 'medium',
+    variant = 'filled',
+    tabIndex,
+    skipFocusWhenDisabled = false,
+    // TODO v6: Rename to `focusableWhenDisabled`.
+    slots = {},
+    slotProps = {},
+    ...other
+  } = props;
+  const chipRef = React__namespace.useRef(null);
+  const handleRef = useForkRef.default(chipRef, ref);
+  const handleDeleteIconClick = event => {
+    // Stop the event from bubbling up to the `Chip`
+    event.stopPropagation();
+    if (onDelete) {
+      onDelete(event);
+    }
+  };
+  const handleKeyDown = event => {
+    // Ignore events from children of `Chip`.
+    if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {
+      // Will be handled in keyUp, otherwise some browsers
+      // might init navigation
+      event.preventDefault();
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  const handleKeyUp = event => {
+    // Ignore events from children of `Chip`.
+    if (event.currentTarget === event.target) {
+      if (onDelete && isDeleteKeyboardEvent(event)) {
+        onDelete(event);
+      }
+    }
+    if (onKeyUp) {
+      onKeyUp(event);
+    }
+  };
+  const clickable = clickableProp !== false && onClick ? true : clickableProp;
+  const component = clickable || onDelete ? ButtonBase.default : ComponentProp || 'div';
+  const ownerState = {
+    ...props,
+    component,
+    disabled,
+    size,
+    color,
+    iconColor: /*#__PURE__*/React__namespace.isValidElement(iconProp) ? iconProp.props.color || color : color,
+    onDelete: !!onDelete,
+    clickable,
+    variant
+  };
+  const classes = useUtilityClasses(ownerState);
+  const moreProps = component === ButtonBase.default ? {
+    component: ComponentProp || 'div',
+    focusVisibleClassName: classes.focusVisible,
+    ...(onDelete && {
+      disableRipple: true
+    })
+  } : {};
+  let deleteIcon = null;
+  if (onDelete) {
+    deleteIcon = deleteIconProp && /*#__PURE__*/React__namespace.isValidElement(deleteIconProp) ? (/*#__PURE__*/React__namespace.cloneElement(deleteIconProp, {
+      className: clsx.clsx(deleteIconProp.props.className, classes.deleteIcon),
+      onClick: handleDeleteIconClick
+    })) : /*#__PURE__*/jsxRuntime.jsxRuntimeExports.jsx(Cancel.default, {
+      className: classes.deleteIcon,
+      onClick: handleDeleteIconClick
+    });
+  }
+  let avatar = null;
+  if (avatarProp && /*#__PURE__*/React__namespace.isValidElement(avatarProp)) {
+    avatar = /*#__PURE__*/React__namespace.cloneElement(avatarProp, {
+      className: clsx.clsx(classes.avatar, avatarProp.props.className)
+    });
+  }
+  let icon = null;
+  if (iconProp && /*#__PURE__*/React__namespace.isValidElement(iconProp)) {
+    icon = /*#__PURE__*/React__namespace.cloneElement(iconProp, {
+      className: clsx.clsx(classes.icon, iconProp.props.className)
+    });
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    if (avatar && icon) {
+      console.error('MUI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
+    }
+  }
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot.default('root', {
+    elementType: ChipRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    // The `component` prop is preserved because `Chip` relies on it for internal logic. If `shouldForwardComponentProp` were `false`, `useSlot` would remove the `component` prop, potentially breaking the component's behavior.
+    shouldForwardComponentProp: true,
+    ref: handleRef,
+    className: clsx.clsx(classes.root, className),
+    additionalProps: {
+      disabled: clickable && disabled ? true : undefined,
+      tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
+      ...moreProps
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClick: event => {
+        handlers.onClick?.(event);
+        onClick?.(event);
+      },
+      onKeyDown: event => {
+        handlers.onKeyDown?.(event);
+        handleKeyDown(event);
+      },
+      onKeyUp: event => {
+        handlers.onKeyUp?.(event);
+        handleKeyUp(event);
+      }
+    })
+  });
+  const [LabelSlot, labelProps] = useSlot.default('label', {
+    elementType: ChipLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.label
+  });
+  return /*#__PURE__*/jsxRuntime.jsxRuntimeExports.jsxs(RootSlot, {
+    as: component,
+    ...rootProps,
+    children: [avatar || icon, /*#__PURE__*/jsxRuntime.jsxRuntimeExports.jsx(LabelSlot, {
+      ...labelProps,
+      children: label
+    }), deleteIcon]
+  });
+});
+process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The Avatar element to display.
+   */
+  avatar: index.default.element,
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children: unsupportedProp.default,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: index.default.object,
+  /**
+   * @ignore
+   */
+  className: index.default.string,
+  /**
+   * If `true`, the chip will appear clickable, and will raise when pressed,
+   * even if the onClick prop is not defined.
+   * If `false`, the chip will not appear clickable, even if onClick prop is defined.
+   * This can be used, for example,
+   * along with the component prop to indicate an anchor Chip is clickable.
+   * Note: this controls the UI and does not affect the onClick event.
+   */
+  clickable: index.default.bool,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'default'
+   */
+  color: index.default /* @typescript-to-proptypes-ignore */.oneOfType([index.default.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), index.default.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: index.default.elementType,
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon: index.default.element,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: index.default.bool,
+  /**
+   * Icon element.
+   */
+  icon: index.default.element,
+  /**
+   * The content of the component.
+   */
+  label: index.default.node,
+  /**
+   * @ignore
+   */
+  onClick: index.default.func,
+  /**
+   * Callback fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete: index.default.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: index.default.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: index.default.func,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: index.default /* @typescript-to-proptypes-ignore */.oneOfType([index.default.oneOf(['medium', 'small']), index.default.string]),
+  /**
+   * If `true`, allows the disabled chip to escape focus.
+   * If `false`, allows the disabled chip to receive focus.
+   * @default false
+   */
+  skipFocusWhenDisabled: index.default.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: index.default.shape({
+    label: index.default.oneOfType([index.default.func, index.default.object]),
+    root: index.default.oneOfType([index.default.func, index.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: index.default.shape({
+    label: index.default.elementType,
+    root: index.default.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: index.default.oneOfType([index.default.arrayOf(index.default.oneOfType([index.default.func, index.default.object, index.default.bool])), index.default.func, index.default.object]),
+  /**
+   * @ignore
+   */
+  tabIndex: index.default.number,
+  /**
+   * The variant to use.
+   * @default 'filled'
+   */
+  variant: index.default /* @typescript-to-proptypes-ignore */.oneOfType([index.default.oneOf(['filled', 'outlined']), index.default.string])
+} : void 0;
+
+exports.default = Chip;
+//# sourceMappingURL=Chip.js.map