@vodafone_de/brix-components 3.1.6 → 3.1.7

package/Link/Link.js

@@ -0,0 +1,290 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
+var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _Typography = _interopRequireDefault(require("../Typography"));
+var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
+var _getTextDecoration = _interopRequireDefault(require("./getTextDecoration"));
+var _jsxRuntime = require("react/jsx-runtime");
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    component,
+    focusVisible,
+    underline
+  } = ownerState;
+  const slots = {
+    root: ['root', `underline${(0, _capitalize.default)(underline)}`, component === 'button' && 'button', focusVisible && 'focusVisible']
+  };
+  return (0, _composeClasses.default)(slots, _linkClasses.getLinkUtilityClass, classes);
+};
+const LinkRoot = (0, _zeroStyled.styled)(_Typography.default, {
+  name: 'MuiLink',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[`underline${(0, _capitalize.default)(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
+  }
+})((0, _memoTheme.default)(({
+  theme
+}) => {
+  return {
+    variants: [{
+      props: {
+        underline: 'none'
+      },
+      style: {
+        textDecoration: 'none'
+      }
+    }, {
+      props: {
+        underline: 'hover'
+      },
+      style: {
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline'
+        }
+      }
+    }, {
+      props: {
+        underline: 'always'
+      },
+      style: {
+        textDecoration: 'underline',
+        '&:hover': {
+          textDecorationColor: 'inherit'
+        }
+      }
+    }, {
+      props: ({
+        underline,
+        ownerState
+      }) => underline === 'always' && ownerState.color !== 'inherit',
+      style: {
+        textDecorationColor: 'var(--Link-underlineColor)'
+      }
+    }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
+      props: {
+        underline: 'always',
+        color
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette[color].main, 0.4)
+      }
+    })), {
+      props: {
+        underline: 'always',
+        color: 'textPrimary'
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette.text.primary, 0.4)
+      }
+    }, {
+      props: {
+        underline: 'always',
+        color: 'textSecondary'
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette.text.secondaryChannel} / 0.4)` : (0, _colorManipulator.alpha)(theme.palette.text.secondary, 0.4)
+      }
+    }, {
+      props: {
+        underline: 'always',
+        color: 'textDisabled'
+      },
+      style: {
+        '--Link-underlineColor': (theme.vars || theme).palette.text.disabled
+      }
+    }, {
+      props: {
+        component: 'button'
+      },
+      style: {
+        position: 'relative',
+        WebkitTapHighlightColor: 'transparent',
+        backgroundColor: 'transparent',
+        // Reset default value
+        // We disable the focus ring for mouse, touch and keyboard users.
+        outline: 0,
+        border: 0,
+        margin: 0,
+        // Remove the margin in Safari
+        borderRadius: 0,
+        padding: 0,
+        // Remove the padding in Firefox
+        cursor: 'pointer',
+        userSelect: 'none',
+        verticalAlign: 'middle',
+        MozAppearance: 'none',
+        // Reset
+        WebkitAppearance: 'none',
+        // Reset
+        '&::-moz-focus-inner': {
+          borderStyle: 'none' // Remove Firefox dotted outline.
+        },
+        [`&.${_linkClasses.default.focusVisible}`]: {
+          outline: 'auto'
+        }
+      }
+    }]
+  };
+}));
+const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
+    props: inProps,
+    name: 'MuiLink'
+  });
+  const theme = (0, _zeroStyled.useTheme)();
+  const {
+    className,
+    color = 'primary',
+    component = 'a',
+    onBlur,
+    onFocus,
+    TypographyClasses,
+    underline = 'always',
+    variant = 'inherit',
+    sx,
+    ...other
+  } = props;
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  const handleBlur = event => {
+    if (!(0, _isFocusVisible.default)(event.target)) {
+      setFocusVisible(false);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleFocus = event => {
+    if ((0, _isFocusVisible.default)(event.target)) {
+      setFocusVisible(true);
+    }
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const ownerState = {
+    ...props,
+    color,
+    component,
+    focusVisible,
+    underline,
+    variant
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkRoot, {
+    color: color,
+    className: (0, _clsx.default)(classes.root, className),
+    classes: TypographyClasses,
+    component: component,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    ref: ref,
+    ownerState: ownerState,
+    variant: variant,
+    ...other,
+    sx: [...(v6Colors[color] === undefined ? [{
+      color
+    }] : []), ...(Array.isArray(sx) ? sx : [sx])],
+    style: {
+      ...other.style,
+      ...(underline === 'always' && color !== 'inherit' && !v6Colors[color] && {
+        '--Link-underlineColor': (0, _getTextDecoration.default)({
+          theme,
+          ownerState
+        })
+      })
+    }
+  });
+});
+process.env.NODE_ENV !== "production" ? Link.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 content of the component.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+  /**
+   * The color of the link.
+   * @default 'primary'
+   */
+  color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['primary', 'secondary', 'success', 'error', 'info', 'warning', 'textPrimary', 'textSecondary', 'textDisabled']), _propTypes.default.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _elementTypeAcceptingRef.default,
+  /**
+   * @ignore
+   */
+  onBlur: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onFocus: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  style: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * `classes` prop applied to the [`Typography`](https://mui.com/material-ui/api/typography/) element.
+   */
+  TypographyClasses: _propTypes.default.object,
+  /**
+   * Controls when the link should have an underline.
+   * @default 'always'
+   */
+  underline: _propTypes.default.oneOf(['always', 'hover', 'none']),
+  /**
+   * Applies the theme typography styles.
+   * @default 'inherit'
+   */
+  variant: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['body1', 'body2', 'button', 'caption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'inherit', 'overline', 'subtitle1', 'subtitle2']), _propTypes.default.string])
+} : void 0;
+var _default = exports.default = Link;

package/Link/getTextDecoration.d.ts

@@ -0,0 +1,11 @@
+import type { Theme } from "../styles/index.js";
+declare const getTextDecoration: <T extends Theme>({
+  theme,
+  ownerState
+}: {
+  theme: T;
+  ownerState: {
+    color: string;
+  };
+}) => string;
+export default getTextDecoration;

package/Link/getTextDecoration.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _style = require("@mui/system/style");
+var _colorManipulator = require("@mui/system/colorManipulator");
+const getTextDecoration = ({
+  theme,
+  ownerState
+}) => {
+  const transformedColor = ownerState.color;
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = (0, _style.getPath)(theme, `palette.${transformedColor}.main`, false) || (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}.mainChannel`) || (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
+  if ('vars' in theme && channelColor) {
+    return `rgba(${channelColor} / 0.4)`;
+  }
+  return (0, _colorManipulator.alpha)(color, 0.4);
+};
+var _default = exports.default = getTextDecoration;

package/Link/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Link.js";
+export * from "./Link.js";
+export { default as linkClasses } from "./linkClasses.js";
+export * from "./linkClasses.js";

package/Link/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  linkClasses: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Link.default;
+  }
+});
+Object.defineProperty(exports, "linkClasses", {
+  enumerable: true,
+  get: function () {
+    return _linkClasses.default;
+  }
+});
+var _Link = _interopRequireDefault(require("./Link"));
+var _linkClasses = _interopRequireWildcard(require("./linkClasses"));
+Object.keys(_linkClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _linkClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _linkClasses[key];
+    }
+  });
+});

package/Link/linkClasses.d.ts

@@ -0,0 +1,18 @@
+export interface LinkClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `underline="none"`. */
+  underlineNone: string;
+  /** Styles applied to the root element if `underline="hover"`. */
+  underlineHover: string;
+  /** Styles applied to the root element if `underline="always"`. */
+  underlineAlways: string;
+  /** Styles applied to the root element if `component="button"`. */
+  button: string;
+  /** State class applied to the root element if the link is keyboard focused. */
+  focusVisible: string;
+}
+export type LinkClassKey = keyof LinkClasses;
+export declare function getLinkUtilityClass(slot: string): string;
+declare const linkClasses: LinkClasses;
+export default linkClasses;

package/Link/linkClasses.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getLinkUtilityClass = getLinkUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getLinkUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiLink', slot);
+}
+const linkClasses = (0, _generateUtilityClasses.default)('MuiLink', ['root', 'underlineNone', 'underlineHover', 'underlineAlways', 'button', 'focusVisible']);
+var _default = exports.default = linkClasses;

package/List/List.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../index.js";
+import { OverridableComponent, OverridableTypeMap, OverrideProps } from "../OverridableComponent/index.js";
+import { ListClasses } from "./listClasses.js";
+export interface ListOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListClasses>;
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used for
+   * the list and list items.
+   * The prop is available to descendant components as the `dense` context.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * If `true`, vertical padding is removed from the list.
+   * @default false
+   */
+  disablePadding?: boolean;
+  /**
+   * The content of the subheader, normally `ListSubheader`.
+   */
+  subheader?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface ListTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'ul'> {
+  props: AdditionalProps & ListOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ * utility to create component types that inherit props from List.
+ */
+export interface ExtendListTypeMap<TypeMap extends OverridableTypeMap> {
+  props: TypeMap['props'] & ListTypeMap['props'];
+  defaultComponent: TypeMap['defaultComponent'];
+}
+export type ExtendList<TypeMap extends OverridableTypeMap> = OverridableComponent<ExtendListTypeMap<TypeMap>>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Lists](https://mui.com/material-ui/react-list/)
+ * - [Transfer List](https://mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [List API](https://mui.com/material-ui/api/list/)
+ */
+declare const List: ExtendList<ListTypeMap>;
+export type ListProps<RootComponent extends React.ElementType = ListTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default List;

package/List/List.js

@@ -0,0 +1,141 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _ListContext = _interopRequireDefault(require("./ListContext"));
+var _listClasses = require("./listClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    disablePadding,
+    dense,
+    subheader
+  } = ownerState;
+  const slots = {
+    root: ['root', !disablePadding && 'padding', dense && 'dense', subheader && 'subheader']
+  };
+  return (0, _composeClasses.default)(slots, _listClasses.getListUtilityClass, classes);
+};
+const ListRoot = (0, _zeroStyled.styled)('ul', {
+  name: 'MuiList',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, !ownerState.disablePadding && styles.padding, ownerState.dense && styles.dense, ownerState.subheader && styles.subheader];
+  }
+})({
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  position: 'relative',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding,
+    style: {
+      paddingTop: 8,
+      paddingBottom: 8
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.subheader,
+    style: {
+      paddingTop: 0
+    }
+  }]
+});
+const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
+    props: inProps,
+    name: 'MuiList'
+  });
+  const {
+    children,
+    className,
+    component = 'ul',
+    dense = false,
+    disablePadding = false,
+    subheader,
+    ...other
+  } = props;
+  const context = React.useMemo(() => ({
+    dense
+  }), [dense]);
+  const ownerState = {
+    ...props,
+    component,
+    dense,
+    disablePadding
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListContext.default.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ListRoot, {
+      as: component,
+      className: (0, _clsx.default)(classes.root, className),
+      ref: ref,
+      ownerState: ownerState,
+      ...other,
+      children: [subheader, children]
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? List.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 content of the component.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: _propTypes.default.elementType,
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used for
+   * the list and list items.
+   * The prop is available to descendant components as the `dense` context.
+   * @default false
+   */
+  dense: _propTypes.default.bool,
+  /**
+   * If `true`, vertical padding is removed from the list.
+   * @default false
+   */
+  disablePadding: _propTypes.default.bool,
+  /**
+   * The content of the subheader, normally `ListSubheader`.
+   */
+  subheader: _propTypes.default.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+var _default = exports.default = List;

package/List/ListContext.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const ListContext: React.Context<{
+  dense?: boolean;
+}>;
+export default ListContext;

package/List/ListContext.js

@@ -0,0 +1,17 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+const ListContext = /*#__PURE__*/React.createContext({});
+if (process.env.NODE_ENV !== 'production') {
+  ListContext.displayName = 'ListContext';
+}
+var _default = exports.default = ListContext;

package/List/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./List.js";
+export * from "./List.js";
+export { default as listClasses } from "./listClasses.js";
+export * from "./listClasses.js";

package/List/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  listClasses: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "listClasses", {
+  enumerable: true,
+  get: function () {
+    return _listClasses.default;
+  }
+});
+var _List = _interopRequireDefault(require("./List"));
+var _listClasses = _interopRequireWildcard(require("./listClasses"));
+Object.keys(_listClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _listClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _listClasses[key];
+    }
+  });
+});