@vodafone_de/brix-components 3.1.6 → 3.1.7

package/Modal/modalClasses.d.ts

@@ -0,0 +1,12 @@
+export interface ModalClasses {
+  /** Class name applied to the root element. */
+  root: string;
+  /** Class name applied to the root element if the `Modal` has exited. */
+  hidden: string;
+  /** Class name applied to the backdrop element. */
+  backdrop: string;
+}
+export type ModalClassKey = keyof ModalClasses;
+export declare function getModalUtilityClass(slot: string): string;
+declare const modalClasses: ModalClasses;
+export default modalClasses;

package/Modal/modalClasses.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.getModalUtilityClass = getModalUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getModalUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiModal', slot);
+}
+const modalClasses = (0, _generateUtilityClasses.default)('MuiModal', ['root', 'hidden', 'backdrop']);
+var _default = exports.default = modalClasses;

package/Modal/useModal.d.ts

@@ -0,0 +1,3 @@
+import { UseModalParameters, UseModalReturnValue } from "./useModal.types.js";
+declare function useModal(parameters: UseModalParameters): UseModalReturnValue;
+export default useModal;

package/Modal/useModal.js

@@ -0,0 +1,200 @@
+"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 _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _createChainedFunction = _interopRequireDefault(require("@mui/utils/createChainedFunction"));
+var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
+var _ModalManager = require("./ModalManager");
+function getContainer(container) {
+  return typeof container === 'function' ? container() : container;
+}
+function getHasTransition(children) {
+  return children ? children.props.hasOwnProperty('in') : false;
+}
+const noop = () => {};
+
+// A modal manager used to track and manage the state of open Modals.
+// Modals don't open on the server so this won't conflict with concurrent requests.
+const manager = new _ModalManager.ModalManager();
+function useModal(parameters) {
+  const {
+    container,
+    disableEscapeKeyDown = false,
+    disableScrollLock = false,
+    closeAfterTransition = false,
+    onTransitionEnter,
+    onTransitionExited,
+    children,
+    onClose,
+    open,
+    rootRef
+  } = parameters;
+
+  // @ts-ignore internal logic
+  const modal = React.useRef({});
+  const mountNodeRef = React.useRef(null);
+  const modalRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(modalRef, rootRef);
+  const [exited, setExited] = React.useState(!open);
+  const hasTransition = getHasTransition(children);
+  let ariaHiddenProp = true;
+  if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
+    ariaHiddenProp = false;
+  }
+  const getDoc = () => (0, _ownerDocument.default)(mountNodeRef.current);
+  const getModal = () => {
+    modal.current.modalRef = modalRef.current;
+    modal.current.mount = mountNodeRef.current;
+    return modal.current;
+  };
+  const handleMounted = () => {
+    manager.mount(getModal(), {
+      disableScrollLock
+    });
+
+    // Fix a bug on Chrome where the scroll isn't initially 0.
+    if (modalRef.current) {
+      modalRef.current.scrollTop = 0;
+    }
+  };
+  const handleOpen = (0, _useEventCallback.default)(() => {
+    const resolvedContainer = getContainer(container) || getDoc().body;
+    manager.add(getModal(), resolvedContainer);
+
+    // The element was already mounted.
+    if (modalRef.current) {
+      handleMounted();
+    }
+  });
+  const isTopModal = () => manager.isTopModal(getModal());
+  const handlePortalRef = (0, _useEventCallback.default)(node => {
+    mountNodeRef.current = node;
+    if (!node) {
+      return;
+    }
+    if (open && isTopModal()) {
+      handleMounted();
+    } else if (modalRef.current) {
+      (0, _ModalManager.ariaHidden)(modalRef.current, ariaHiddenProp);
+    }
+  });
+  const handleClose = React.useCallback(() => {
+    manager.remove(getModal(), ariaHiddenProp);
+  }, [ariaHiddenProp]);
+  React.useEffect(() => {
+    return () => {
+      handleClose();
+    };
+  }, [handleClose]);
+  React.useEffect(() => {
+    if (open) {
+      handleOpen();
+    } else if (!hasTransition || !closeAfterTransition) {
+      handleClose();
+    }
+  }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
+  const createHandleKeyDown = otherHandlers => event => {
+    otherHandlers.onKeyDown?.(event);
+
+    // The handler doesn't take event.defaultPrevented into account:
+    //
+    // event.preventDefault() is meant to stop default behaviors like
+    // clicking a checkbox to check it, hitting a button to submit a form,
+    // and hitting left arrow to move the cursor in a text input etc.
+    // Only special HTML elements have these default behaviors.
+    if (event.key !== 'Escape' || event.which === 229 ||
+    // Wait until IME is settled.
+    !isTopModal()) {
+      return;
+    }
+    if (!disableEscapeKeyDown) {
+      // Swallow the event, in case someone is listening for the escape key on the body.
+      event.stopPropagation();
+      if (onClose) {
+        onClose(event, 'escapeKeyDown');
+      }
+    }
+  };
+  const createHandleBackdropClick = otherHandlers => event => {
+    otherHandlers.onClick?.(event);
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+    if (onClose) {
+      onClose(event, 'backdropClick');
+    }
+  };
+  const getRootProps = (otherHandlers = {}) => {
+    const propsEventHandlers = (0, _extractEventHandlers.default)(parameters);
+
+    // The custom event handlers shouldn't be spread on the root element
+    delete propsEventHandlers.onTransitionEnter;
+    delete propsEventHandlers.onTransitionExited;
+    const externalEventHandlers = {
+      ...propsEventHandlers,
+      ...otherHandlers
+    };
+    return {
+      /*
+       * Marking an element with the role presentation indicates to assistive technology
+       * that this element should be ignored; it exists to support the web application and
+       * is not meant for humans to interact with directly.
+       * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
+       */
+      role: 'presentation',
+      ...externalEventHandlers,
+      onKeyDown: createHandleKeyDown(externalEventHandlers),
+      ref: handleRef
+    };
+  };
+  const getBackdropProps = (otherHandlers = {}) => {
+    const externalEventHandlers = otherHandlers;
+    return {
+      'aria-hidden': true,
+      ...externalEventHandlers,
+      onClick: createHandleBackdropClick(externalEventHandlers),
+      open
+    };
+  };
+  const getTransitionProps = () => {
+    const handleEnter = () => {
+      setExited(false);
+      if (onTransitionEnter) {
+        onTransitionEnter();
+      }
+    };
+    const handleExited = () => {
+      setExited(true);
+      if (onTransitionExited) {
+        onTransitionExited();
+      }
+      if (closeAfterTransition) {
+        handleClose();
+      }
+    };
+    return {
+      onEnter: (0, _createChainedFunction.default)(handleEnter, children?.props.onEnter ?? noop),
+      onExited: (0, _createChainedFunction.default)(handleExited, children?.props.onExited ?? noop)
+    };
+  };
+  return {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    rootRef: handleRef,
+    portalRef: handlePortalRef,
+    isTopModal,
+    exited,
+    hasTransition
+  };
+}
+var _default = exports.default = useModal;

package/Modal/useModal.types.d.ts

@@ -0,0 +1,118 @@
+import { PortalProps } from "../Portal/index.js";
+import { EventHandlers } from "../utils/types.js";
+export interface UseModalRootSlotOwnProps {
+  role: React.AriaRole;
+  onKeyDown: React.KeyboardEventHandler;
+  ref: React.RefCallback<Element> | null;
+}
+export interface UseModalBackdropSlotOwnProps {
+  'aria-hidden': React.AriaAttributes['aria-hidden'];
+  onClick: React.MouseEventHandler;
+  open?: boolean;
+}
+export type UseModalBackdropSlotProps<TOther = {}> = TOther & UseModalBackdropSlotOwnProps;
+export type UseModalRootSlotProps<TOther = {}> = TOther & UseModalRootSlotOwnProps;
+export type UseModalParameters = {
+  'aria-hidden'?: React.AriaAttributes['aria-hidden'];
+  /**
+   * A single child content element.
+   */
+  children: React.ReactElement<{
+    in?: boolean;
+    onEnter?: (this: unknown) => void;
+    onExited?: (this: unknown) => void;
+  }> | undefined | null;
+  /**
+   * When set to true the Modal waits until a nested Transition is completed before closing.
+   * @default false
+   */
+  closeAfterTransition?: boolean;
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container?: PortalProps['container'];
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   * @default false
+   */
+  disableEscapeKeyDown?: boolean;
+  /**
+   * Disable the scroll lock behavior.
+   * @default false
+   */
+  disableScrollLock?: boolean;
+  /**
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose?: {
+    bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
+  }['bivarianceHack'];
+  onKeyDown?: React.KeyboardEventHandler;
+  /**
+   * A function called when a transition enters.
+   */
+  onTransitionEnter?: () => void;
+  /**
+   * A function called when a transition has exited.
+   */
+  onTransitionExited?: () => void;
+  /**
+   * If `true`, the component is shown.
+   */
+  open: boolean;
+  rootRef: React.Ref<Element>;
+};
+export interface UseModalReturnValue {
+  /**
+   * Resolver for the root slot's props.
+   * @param externalProps props for the root slot
+   * @returns props that should be spread on the root slot
+   */
+  getRootProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalRootSlotProps<TOther>;
+  /**
+   * Resolver for the backdrop slot's props.
+   * @param externalProps props for the backdrop slot
+   * @returns props that should be spread on the backdrop slot
+   */
+  getBackdropProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => UseModalBackdropSlotProps<TOther>;
+  /**
+   * Resolver for the transition related props.
+   * @param externalProps props for the transition element
+   * @returns props that should be spread on the transition element
+   */
+  getTransitionProps: <TOther extends EventHandlers = {}>(externalProps?: TOther) => {
+    onEnter: () => void;
+    onExited: () => void;
+  };
+  /**
+   * A ref to the component's root DOM element.
+   */
+  rootRef: React.RefCallback<Element> | null;
+  /**
+   * A ref to the component's portal DOM element.
+   */
+  portalRef: React.RefCallback<Element> | null;
+  /**
+   * If `true`, the modal is the top most one.
+   */
+  isTopModal: () => boolean;
+  /**
+   * If `true`, the exiting transition finished (to be used for unmounting the component).
+   */
+  exited: boolean;
+  /**
+   * If `true`, the component's child is transition component.
+   */
+  hasTransition: boolean;
+}

package/Modal/useModal.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/NativeSelect/NativeSelect.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { InputProps } from "../Input/index.js";
+import { NativeSelectInputProps } from "./NativeSelectInput.js";
+import { NativeSelectClasses } from "./nativeSelectClasses.js";
+export interface NativeSelectProps extends StandardProps<InputProps, 'inputProps' | 'value' | 'onChange'> {
+  /**
+   * The option elements to populate the select with.
+   * Can be some `<option>` elements.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   * @default {}
+   */
+  classes?: Partial<NativeSelectClasses>;
+  /**
+   * The icon that displays the arrow.
+   * @default ArrowDropDownIcon
+   */
+  IconComponent?: React.ElementType;
+  /**
+   * An `Input` element; does not have to be a material-ui specific `Input`.
+   * @default <Input />
+   */
+  input?: React.ReactElement<unknown, any>;
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#attributes) applied to the `select` element.
+   */
+  inputProps?: Partial<NativeSelectInputProps>;
+  /**
+   * Callback fired when a menu item is selected.
+   *
+   * @param {React.ChangeEvent<HTMLSelectElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange?: NativeSelectInputProps['onChange'];
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The `input` value. The DOM API casts this to a string.
+   */
+  value?: unknown;
+  /**
+   * The variant to use.
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
+/**
+ * An alternative to `<Select native />` with a much smaller bundle size footprint.
+ *
+ * Demos:
+ *
+ * - [Select](https://mui.com/material-ui/react-select/)
+ *
+ * API:
+ *
+ * - [NativeSelect API](https://mui.com/material-ui/api/native-select/)
+ * - inherits [Input API](https://mui.com/material-ui/api/input/)
+ */
+declare const NativeSelect: ((props: NativeSelectProps) => React.JSX.Element) & {
+  muiName: string;
+};
+export default NativeSelect;

package/NativeSelect/NativeSelect.js

@@ -0,0 +1,140 @@
+"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 _NativeSelectInput = _interopRequireDefault(require("./NativeSelectInput"));
+var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _nativeSelectClasses = require("./nativeSelectClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, _nativeSelectClasses.getNativeSelectUtilityClasses, classes);
+};
+const defaultInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {});
+/**
+ * An alternative to `<Select native />` with a much smaller bundle size footprint.
+ */
+const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps, ref) {
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
+    name: 'MuiNativeSelect',
+    props: inProps
+  });
+  const {
+    className,
+    children,
+    classes: classesProp = {},
+    IconComponent = _ArrowDropDown.default,
+    input = defaultInput,
+    inputProps,
+    variant,
+    ...other
+  } = props;
+  const muiFormControl = (0, _useFormControl.default)();
+  const fcs = (0, _formControlState.default)({
+    props,
+    muiFormControl,
+    states: ['variant']
+  });
+  const ownerState = {
+    ...props,
+    classes: classesProp
+  };
+  const classes = useUtilityClasses(ownerState);
+  const {
+    root,
+    ...otherClasses
+  } = classesProp;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: /*#__PURE__*/React.cloneElement(input, {
+      // Most of the logic is implemented in `NativeSelectInput`.
+      // The `Select` component is a simple API wrapper to expose something better to play with.
+      inputComponent: _NativeSelectInput.default,
+      inputProps: {
+        children,
+        classes: otherClasses,
+        IconComponent,
+        variant: fcs.variant,
+        type: undefined,
+        // We render a select. We can ignore the type provided by the `Input`.
+        ...inputProps,
+        ...(input ? input.props.inputProps : {})
+      },
+      ref,
+      ...other,
+      className: (0, _clsx.default)(classes.root, input.props.className, className)
+    })
+  });
+});
+process.env.NODE_ENV !== "production" ? NativeSelect.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 option elements to populate the select with.
+   * Can be some `<option>` elements.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   * @default {}
+   */
+  classes: _propTypes.default.object,
+  /**
+   * @ignore
+   */
+  className: _propTypes.default.string,
+  /**
+   * The icon that displays the arrow.
+   * @default ArrowDropDownIcon
+   */
+  IconComponent: _propTypes.default.elementType,
+  /**
+   * An `Input` element; does not have to be a material-ui specific `Input`.
+   * @default <Input />
+   */
+  input: _propTypes.default.element,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select#attributes) applied to the `select` element.
+   */
+  inputProps: _propTypes.default.object,
+  /**
+   * Callback fired when a menu item is selected.
+   *
+   * @param {React.ChangeEvent<HTMLSelectElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * 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 `input` value. The DOM API casts this to a string.
+   */
+  value: _propTypes.default.any,
+  /**
+   * The variant to use.
+   */
+  variant: _propTypes.default.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+NativeSelect.muiName = 'Select';
+var _default = exports.default = NativeSelect;

package/NativeSelect/NativeSelectInput.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../index.js";
+export interface NativeSelectInputProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  disabled?: boolean;
+  IconComponent: React.ElementType;
+  inputRef?: React.Ref<HTMLSelectElement>;
+  variant?: 'standard' | 'outlined' | 'filled';
+  error?: boolean;
+  sx?: SxProps<Theme>;
+}
+declare const NativeSelectInput: React.JSXElementConstructor<NativeSelectInputProps>;
+export default NativeSelectInput;