@vodafone_de/brix-components 3.1.6 → 3.1.7

package/Select/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 = {
+  selectClasses: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Select.default;
+  }
+});
+Object.defineProperty(exports, "selectClasses", {
+  enumerable: true,
+  get: function () {
+    return _selectClasses.default;
+  }
+});
+var _Select = _interopRequireDefault(require("./Select"));
+var _selectClasses = _interopRequireWildcard(require("./selectClasses"));
+Object.keys(_selectClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _selectClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectClasses[key];
+    }
+  });
+});

package/Select/selectClasses.d.ts

@@ -0,0 +1,42 @@
+export interface SelectClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the select component `select` class. */
+  select: string;
+  /** Styles applied to the select component if `multiple={true}`. */
+  multiple: string;
+  /** Styles applied to the select component if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the select component if it is focused. */
+  focused: string;
+  /** Styles applied to the select component if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the select component if `variant="standard"`. */
+  standard: string;
+  /** State class applied to the select component `disabled` class. */
+  disabled: string;
+  /** Styles applied to the icon component. */
+  icon: string;
+  /** Styles applied to the icon component if the popup is open. */
+  iconOpen: string;
+  /** Styles applied to the icon component if `variant="filled"`.
+   * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-filled](/material-ui/api/select/#select-classes-filled) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  iconFilled: string;
+  /** Styles applied to the icon component if `variant="outlined"`.
+   * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-outlined](/material-ui/api/select/#select-classes-outlined) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  iconOutlined: string;
+  /** Styles applied to the icon component if `variant="standard"`.
+   * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-standard](/material-ui/api/select/#select-classes-standard) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  iconStandard: string;
+  /** Styles applied to the underlying native input component. */
+  nativeInput: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+}
+export type SelectClassKey = keyof SelectClasses;
+export declare function getSelectUtilityClasses(slot: string): string;
+declare const selectClasses: SelectClasses;
+export default selectClasses;

package/Select/selectClasses.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.getSelectUtilityClasses = getSelectUtilityClasses;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getSelectUtilityClasses(slot) {
+  return (0, _generateUtilityClass.default)('MuiSelect', slot);
+}
+const selectClasses = (0, _generateUtilityClasses.default)('MuiSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
+var _default = exports.default = selectClasses;

package/Skeleton/Skeleton.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Theme } from "../index.js";
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { SkeletonClasses } from "./skeletonClasses.js";
+export interface SkeletonPropsVariantOverrides {}
+export interface SkeletonOwnProps {
+  /**
+   * The animation.
+   * If `false` the animation effect is disabled.
+   * @default 'pulse'
+   */
+  animation?: 'pulse' | 'wave' | false;
+  /**
+   * Optional children to infer width and height from.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SkeletonClasses>;
+  /**
+   * Height of the skeleton.
+   * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   */
+  height?: number | string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The type of content that will be rendered.
+   * @default 'text'
+   */
+  variant?: OverridableStringUnion<'text' | 'rectangular' | 'rounded' | 'circular', SkeletonPropsVariantOverrides>;
+  /**
+   * Width of the skeleton.
+   * Useful when the skeleton is inside an inline element with no width of its own.
+   */
+  width?: number | string;
+}
+export interface SkeletonTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> {
+  props: AdditionalProps & SkeletonOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Skeleton](https://mui.com/material-ui/react-skeleton/)
+ *
+ * API:
+ *
+ * - [Skeleton API](https://mui.com/material-ui/api/skeleton/)
+ */
+declare const Skeleton: OverridableComponent<SkeletonTypeMap>;
+export type SkeletonProps<RootComponent extends React.ElementType = SkeletonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<SkeletonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Skeleton;

package/Skeleton/Skeleton.js

@@ -0,0 +1,276 @@
+"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 _clsx = _interopRequireDefault(require("clsx"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("../styles");
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _skeletonClasses = require("./skeletonClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    variant,
+    animation,
+    hasChildren,
+    width,
+    height
+  } = ownerState;
+  const slots = {
+    root: ['root', variant, animation, hasChildren && 'withChildren', hasChildren && !width && 'fitContent', hasChildren && !height && 'heightAuto']
+  };
+  return (0, _composeClasses.default)(slots, _skeletonClasses.getSkeletonUtilityClass, classes);
+};
+const pulseKeyframe = (0, _zeroStyled.keyframes)`
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`;
+const waveKeyframe = (0, _zeroStyled.keyframes)`
+  0% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    /* +0.5s of delay between each loop */
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+`;
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const pulseAnimation = typeof pulseKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
+      ` : null;
+const waveAnimation = typeof waveKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        &::after {
+          animation: ${waveKeyframe} 2s linear 0.5s infinite;
+        }
+      ` : null;
+const SkeletonRoot = (0, _zeroStyled.styled)('span', {
+  name: 'MuiSkeleton',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, styles[ownerState.variant], ownerState.animation !== false && styles[ownerState.animation], ownerState.hasChildren && styles.withChildren, ownerState.hasChildren && !ownerState.width && styles.fitContent, ownerState.hasChildren && !ownerState.height && styles.heightAuto];
+  }
+})((0, _memoTheme.default)(({
+  theme
+}) => {
+  const radiusUnit = (0, _styles.unstable_getUnit)(theme.shape.borderRadius) || 'px';
+  const radiusValue = (0, _styles.unstable_toUnitless)(theme.shape.borderRadius);
+  return {
+    display: 'block',
+    // Create a "on paper" color with sufficient contrast retaining the color
+    backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+    height: '1.2em',
+    variants: [{
+      props: {
+        variant: 'text'
+      },
+      style: {
+        marginTop: 0,
+        marginBottom: 0,
+        height: 'auto',
+        transformOrigin: '0 55%',
+        transform: 'scale(1, 0.60)',
+        borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
+        '&:empty:before': {
+          content: '"\\00a0"'
+        }
+      }
+    }, {
+      props: {
+        variant: 'circular'
+      },
+      style: {
+        borderRadius: '50%'
+      }
+    }, {
+      props: {
+        variant: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren,
+      style: {
+        '& > *': {
+          visibility: 'hidden'
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.width,
+      style: {
+        maxWidth: 'fit-content'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.height,
+      style: {
+        height: 'auto'
+      }
+    }, {
+      props: {
+        animation: 'pulse'
+      },
+      style: pulseAnimation || {
+        animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: {
+        position: 'relative',
+        overflow: 'hidden',
+        /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
+        WebkitMaskImage: '-webkit-radial-gradient(white, black)',
+        '&::after': {
+          background: `linear-gradient(
+                90deg,
+                transparent,
+                ${(theme.vars || theme).palette.action.hover},
+                transparent
+              )`,
+          content: '""',
+          position: 'absolute',
+          transform: 'translateX(-100%)' /* Avoid flash during server-side hydration */,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0
+        }
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: waveAnimation || {
+        '&::after': {
+          animation: `${waveKeyframe} 2s linear 0.5s infinite`
+        }
+      }
+    }]
+  };
+}));
+const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
+    props: inProps,
+    name: 'MuiSkeleton'
+  });
+  const {
+    animation = 'pulse',
+    className,
+    component = 'span',
+    height,
+    style,
+    variant = 'text',
+    width,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    animation,
+    component,
+    variant,
+    hasChildren: Boolean(other.children)
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SkeletonRoot, {
+    as: component,
+    ref: ref,
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: ownerState,
+    ...other,
+    style: {
+      width,
+      height,
+      ...style
+    }
+  });
+});
+process.env.NODE_ENV !== "production" ? Skeleton.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 animation.
+   * If `false` the animation effect is disabled.
+   * @default 'pulse'
+   */
+  animation: _propTypes.default.oneOf(['pulse', 'wave', false]),
+  /**
+   * Optional children to infer width and height from.
+   */
+  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,
+  /**
+   * Height of the skeleton.
+   * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   */
+  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * @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]),
+  /**
+   * The type of content that will be rendered.
+   * @default 'text'
+   */
+  variant: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['circular', 'rectangular', 'rounded', 'text']), _propTypes.default.string]),
+  /**
+   * Width of the skeleton.
+   * Useful when the skeleton is inside an inline element with no width of its own.
+   */
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+} : void 0;
+var _default = exports.default = Skeleton;

package/Skeleton/index.d.ts

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

package/Skeleton/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 = {
+  skeletonClasses: true
+};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+Object.defineProperty(exports, "skeletonClasses", {
+  enumerable: true,
+  get: function () {
+    return _skeletonClasses.default;
+  }
+});
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+var _skeletonClasses = _interopRequireWildcard(require("./skeletonClasses"));
+Object.keys(_skeletonClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _skeletonClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _skeletonClasses[key];
+    }
+  });
+});

package/Skeleton/skeletonClasses.d.ts

@@ -0,0 +1,26 @@
+export interface SkeletonClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="text"`. */
+  text: string;
+  /** Styles applied to the root element if `variant="rectangular"`. */
+  rectangular: string;
+  /** Styles applied to the root element if `variant="rounded"`. */
+  rounded: string;
+  /** Styles applied to the root element if `variant="circular"`. */
+  circular: string;
+  /** Styles applied to the root element if `animation="pulse"`. */
+  pulse: string;
+  /** Styles applied to the root element if `animation="wave"`. */
+  wave: string;
+  /** Styles applied when the component is passed children. */
+  withChildren: string;
+  /** Styles applied when the component is passed children and no width. */
+  fitContent: string;
+  /** Styles applied when the component is passed children and no height. */
+  heightAuto: string;
+}
+export type SkeletonClassKey = keyof SkeletonClasses;
+export declare function getSkeletonUtilityClass(slot: string): string;
+declare const skeletonClasses: SkeletonClasses;
+export default skeletonClasses;

package/Skeleton/skeletonClasses.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.getSkeletonUtilityClass = getSkeletonUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getSkeletonUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiSkeleton', slot);
+}
+const skeletonClasses = (0, _generateUtilityClasses.default)('MuiSkeleton', ['root', 'text', 'rectangular', 'rounded', 'circular', 'pulse', 'wave', 'withChildren', 'fitContent', 'heightAuto']);
+var _default = exports.default = skeletonClasses;

package/Slide/Slide.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { TransitionProps } from "../transitions/transition.js";
+export interface SlideProps extends TransitionProps {
+  /**
+   * Perform the enter transition when it first mounts if `in` is also `true`.
+   * Set this to `false` to disable this behavior.
+   * @default true
+   */
+  appear?: boolean;
+  /**
+   * A single child content element.
+   */
+  children: React.ReactElement<unknown, any>;
+  /**
+   * An HTML element, or a function that returns one.
+   * It's used to set the container the Slide is transitioning from.
+   */
+  container?: null | Element | ((element: Element) => Element);
+  /**
+   * Direction the child node will enter from.
+   * @default 'down'
+   */
+  direction?: 'left' | 'right' | 'up' | 'down';
+  /**
+   * The transition timing function.
+   * You may specify a single easing or a object containing enter and exit values.
+   * @default {
+   *   enter: theme.transitions.easing.easeOut,
+   *   exit: theme.transitions.easing.sharp,
+   * }
+   */
+  easing?: TransitionProps['easing'];
+  /**
+   * If `true`, the component will transition in.
+   */
+  in?: TransitionProps['in'];
+  ref?: React.Ref<unknown>;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  timeout?: TransitionProps['timeout'];
+}
+
+/**
+ * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
+ * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
+ *
+ * Demos:
+ *
+ * - [Dialog](https://mui.com/material-ui/react-dialog/)
+ * - [Transitions](https://mui.com/material-ui/transitions/)
+ *
+ * API:
+ *
+ * - [Slide API](https://mui.com/material-ui/api/slide/)
+ * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
+ */
+export default function Slide(props: SlideProps): React.JSX.Element;