@vodafone_de/brix-components 3.1.3 → 3.1.6

package/ButtonBase/ButtonBase.js

@@ -1,453 +0,0 @@
-"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 = exports.ButtonBaseRoot = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _refType = _interopRequireDefault(require("@mui/utils/refType"));
-var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
-var _zeroStyled = require("../zero-styled");
-var _DefaultPropsProvider = require("../DefaultPropsProvider");
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
-var _useLazyRipple = _interopRequireDefault(require("../useLazyRipple"));
-var _TouchRipple = _interopRequireDefault(require("./TouchRipple"));
-var _buttonBaseClasses = _interopRequireWildcard(require("./buttonBaseClasses"));
-var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = ownerState => {
-  const {
-    disabled,
-    focusVisible,
-    focusVisibleClassName,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
-  };
-  const composedClasses = (0, _composeClasses.default)(slots, _buttonBaseClasses.getButtonBaseUtilityClass, classes);
-  if (focusVisible && focusVisibleClassName) {
-    composedClasses.root += ` ${focusVisibleClassName}`;
-  }
-  return composedClasses;
-};
-const ButtonBaseRoot = exports.ButtonBaseRoot = (0, _zeroStyled.styled)('button', {
-  name: 'MuiButtonBase',
-  slot: 'Root'
-})({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  position: 'relative',
-  boxSizing: 'border-box',
-  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
-  textDecoration: 'none',
-  // So we take precedent over the style of a native <a /> element.
-  color: 'inherit',
-  '&::-moz-focus-inner': {
-    borderStyle: 'none' // Remove Firefox dotted outline.
-  },
-  [`&.${_buttonBaseClasses.default.disabled}`]: {
-    pointerEvents: 'none',
-    // Disable link interactions
-    cursor: 'default'
-  },
-  '@media print': {
-    colorAdjust: 'exact'
-  }
-});
-
-/**
- * `ButtonBase` contains as few styles as possible.
- * It aims to be a simple building block for creating a button.
- * It contains a load of style reset and some focus/ripple logic.
- */
-const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {
-  const props = (0, _DefaultPropsProvider.useDefaultProps)({
-    props: inProps,
-    name: 'MuiButtonBase'
-  });
-  const {
-    action,
-    centerRipple = false,
-    children,
-    className,
-    component = 'button',
-    disabled = false,
-    disableRipple = false,
-    disableTouchRipple = false,
-    focusRipple = false,
-    focusVisibleClassName,
-    LinkComponent = 'a',
-    onBlur,
-    onClick,
-    onContextMenu,
-    onDragLeave,
-    onFocus,
-    onFocusVisible,
-    onKeyDown,
-    onKeyUp,
-    onMouseDown,
-    onMouseLeave,
-    onMouseUp,
-    onTouchEnd,
-    onTouchMove,
-    onTouchStart,
-    tabIndex = 0,
-    TouchRippleProps,
-    touchRippleRef,
-    type,
-    ...other
-  } = props;
-  const buttonRef = React.useRef(null);
-  const ripple = (0, _useLazyRipple.default)();
-  const handleRippleRef = (0, _useForkRef.default)(ripple.ref, touchRippleRef);
-  const [focusVisible, setFocusVisible] = React.useState(false);
-  if (disabled && focusVisible) {
-    setFocusVisible(false);
-  }
-  React.useImperativeHandle(action, () => ({
-    focusVisible: () => {
-      setFocusVisible(true);
-      buttonRef.current.focus();
-    }
-  }), []);
-  const enableTouchRipple = ripple.shouldMount && !disableRipple && !disabled;
-  React.useEffect(() => {
-    if (focusVisible && focusRipple && !disableRipple) {
-      ripple.pulsate();
-    }
-  }, [disableRipple, focusRipple, focusVisible, ripple]);
-  const handleMouseDown = useRippleHandler(ripple, 'start', onMouseDown, disableTouchRipple);
-  const handleContextMenu = useRippleHandler(ripple, 'stop', onContextMenu, disableTouchRipple);
-  const handleDragLeave = useRippleHandler(ripple, 'stop', onDragLeave, disableTouchRipple);
-  const handleMouseUp = useRippleHandler(ripple, 'stop', onMouseUp, disableTouchRipple);
-  const handleMouseLeave = useRippleHandler(ripple, 'stop', event => {
-    if (focusVisible) {
-      event.preventDefault();
-    }
-    if (onMouseLeave) {
-      onMouseLeave(event);
-    }
-  }, disableTouchRipple);
-  const handleTouchStart = useRippleHandler(ripple, 'start', onTouchStart, disableTouchRipple);
-  const handleTouchEnd = useRippleHandler(ripple, 'stop', onTouchEnd, disableTouchRipple);
-  const handleTouchMove = useRippleHandler(ripple, 'stop', onTouchMove, disableTouchRipple);
-  const handleBlur = useRippleHandler(ripple, 'stop', event => {
-    if (!(0, _isFocusVisible.default)(event.target)) {
-      setFocusVisible(false);
-    }
-    if (onBlur) {
-      onBlur(event);
-    }
-  }, false);
-  const handleFocus = (0, _useEventCallback.default)(event => {
-    // Fix for https://github.com/facebook/react/issues/7769
-    if (!buttonRef.current) {
-      buttonRef.current = event.currentTarget;
-    }
-    if ((0, _isFocusVisible.default)(event.target)) {
-      setFocusVisible(true);
-      if (onFocusVisible) {
-        onFocusVisible(event);
-      }
-    }
-    if (onFocus) {
-      onFocus(event);
-    }
-  });
-  const isNonNativeButton = () => {
-    const button = buttonRef.current;
-    return component && component !== 'button' && !(button.tagName === 'A' && button.href);
-  };
-  const handleKeyDown = (0, _useEventCallback.default)(event => {
-    // Check if key is already down to avoid repeats being counted as multiple activations
-    if (focusRipple && !event.repeat && focusVisible && event.key === ' ') {
-      ripple.stop(event, () => {
-        ripple.start(event);
-      });
-    }
-    if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
-      event.preventDefault();
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-
-    // Keyboard accessibility for non interactive elements
-    if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
-      event.preventDefault();
-      if (onClick) {
-        onClick(event);
-      }
-    }
-  });
-  const handleKeyUp = (0, _useEventCallback.default)(event => {
-    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-    if (focusRipple && event.key === ' ' && focusVisible && !event.defaultPrevented) {
-      ripple.stop(event, () => {
-        ripple.pulsate(event);
-      });
-    }
-    if (onKeyUp) {
-      onKeyUp(event);
-    }
-
-    // Keyboard accessibility for non interactive elements
-    if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
-      onClick(event);
-    }
-  });
-  let ComponentProp = component;
-  if (ComponentProp === 'button' && (other.href || other.to)) {
-    ComponentProp = LinkComponent;
-  }
-  const buttonProps = {};
-  if (ComponentProp === 'button') {
-    buttonProps.type = type === undefined ? 'button' : type;
-    buttonProps.disabled = disabled;
-  } else {
-    if (!other.href && !other.to) {
-      buttonProps.role = 'button';
-    }
-    if (disabled) {
-      buttonProps['aria-disabled'] = disabled;
-    }
-  }
-  const handleRef = (0, _useForkRef.default)(ref, buttonRef);
-  const ownerState = {
-    ...props,
-    centerRipple,
-    component,
-    disabled,
-    disableRipple,
-    disableTouchRipple,
-    focusRipple,
-    tabIndex,
-    focusVisible
-  };
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonBaseRoot, {
-    as: ComponentProp,
-    className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState,
-    onBlur: handleBlur,
-    onClick: onClick,
-    onContextMenu: handleContextMenu,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    onMouseDown: handleMouseDown,
-    onMouseLeave: handleMouseLeave,
-    onMouseUp: handleMouseUp,
-    onDragLeave: handleDragLeave,
-    onTouchEnd: handleTouchEnd,
-    onTouchMove: handleTouchMove,
-    onTouchStart: handleTouchStart,
-    ref: handleRef,
-    tabIndex: disabled ? -1 : tabIndex,
-    type: type,
-    ...buttonProps,
-    ...other,
-    children: [children, enableTouchRipple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchRipple.default, {
-      ref: handleRippleRef,
-      center: centerRipple,
-      ...TouchRippleProps
-    }) : null]
-  });
-});
-function useRippleHandler(ripple, rippleAction, eventCallback, skipRippleAction = false) {
-  return (0, _useEventCallback.default)(event => {
-    if (eventCallback) {
-      eventCallback(event);
-    }
-    if (!skipRippleAction) {
-      ripple[rippleAction](event);
-    }
-    return true;
-  });
-}
-process.env.NODE_ENV !== "production" ? ButtonBase.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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
-   */
-  action: _refType.default,
-  /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
-   */
-  centerRipple: _propTypes.default.bool,
-  /**
-   * 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: _elementTypeAcceptingRef.default,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: _propTypes.default.bool,
-  /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
-   */
-  disableTouchRipple: _propTypes.default.bool,
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * @default false
-   */
-  focusRipple: _propTypes.default.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: _propTypes.default.string,
-  /**
-   * @ignore
-   */
-  href: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: _propTypes.default.elementType,
-  /**
-   * @ignore
-   */
-  onBlur: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onClick: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onContextMenu: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onDragLeave: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onFocus: _propTypes.default.func,
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onMouseDown: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onMouseUp: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onTouchEnd: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onTouchMove: _propTypes.default.func,
-  /**
-   * @ignore
-   */
-  onTouchStart: _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]),
-  /**
-   * @default 0
-   */
-  tabIndex: _propTypes.default.number,
-  /**
-   * Props applied to the `TouchRipple` element.
-   */
-  TouchRippleProps: _propTypes.default.object,
-  /**
-   * A ref that points to the `TouchRipple` element.
-   */
-  touchRippleRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      pulsate: _propTypes.default.func.isRequired,
-      start: _propTypes.default.func.isRequired,
-      stop: _propTypes.default.func.isRequired
-    })
-  })]),
-  /**
-   * @ignore
-   */
-  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'reset', 'submit']), _propTypes.default.string])
-} : void 0;
-var _default = exports.default = ButtonBase;

package/ButtonBase/Ripple.js

@@ -1,93 +0,0 @@
-"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 _jsxRuntime = require("react/jsx-runtime");
-/**
- * @ignore - internal component.
- */function Ripple(props) {
-  const {
-    className,
-    classes,
-    pulsate = false,
-    rippleX,
-    rippleY,
-    rippleSize,
-    in: inProp,
-    onExited,
-    timeout
-  } = props;
-  const [leaving, setLeaving] = React.useState(false);
-  const rippleClassName = (0, _clsx.default)(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
-  const rippleStyles = {
-    width: rippleSize,
-    height: rippleSize,
-    top: -(rippleSize / 2) + rippleY,
-    left: -(rippleSize / 2) + rippleX
-  };
-  const childClassName = (0, _clsx.default)(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
-  if (!inProp && !leaving) {
-    setLeaving(true);
-  }
-  React.useEffect(() => {
-    if (!inProp && onExited != null) {
-      // react-transition-group#onExited
-      const timeoutId = setTimeout(onExited, timeout);
-      return () => {
-        clearTimeout(timeoutId);
-      };
-    }
-    return undefined;
-  }, [onExited, inProp, timeout]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-    className: rippleClassName,
-    style: rippleStyles,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: childClassName
-    })
-  });
-}
-process.env.NODE_ENV !== "production" ? Ripple.propTypes /* remove-proptypes */ = {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: _propTypes.default.object.isRequired,
-  className: _propTypes.default.string,
-  /**
-   * @ignore - injected from TransitionGroup
-   */
-  in: _propTypes.default.bool,
-  /**
-   * @ignore - injected from TransitionGroup
-   */
-  onExited: _propTypes.default.func,
-  /**
-   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
-   */
-  pulsate: _propTypes.default.bool,
-  /**
-   * Diameter of the ripple.
-   */
-  rippleSize: _propTypes.default.number,
-  /**
-   * Horizontal position of the ripple center.
-   */
-  rippleX: _propTypes.default.number,
-  /**
-   * Vertical position of the ripple center.
-   */
-  rippleY: _propTypes.default.number,
-  /**
-   * exit delay
-   */
-  timeout: _propTypes.default.number.isRequired
-} : void 0;
-var _default = exports.default = Ripple;

package/ButtonBase/TouchRipple.d.ts

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { InternalStandardProps as StandardProps } from "../index.js";
-import { TouchRippleClasses, TouchRippleClassKey } from "./touchRippleClasses.js";
-export { TouchRippleClassKey };
-export interface StartActionOptions {
-  pulsate?: boolean;
-  center?: boolean;
-}
-export interface TouchRippleActions {
-  start: (event?: React.SyntheticEvent, options?: StartActionOptions, callback?: () => void) => void;
-  pulsate: (event?: React.SyntheticEvent) => void;
-  stop: (event?: React.SyntheticEvent, callback?: () => void) => void;
-}
-export type TouchRippleProps = StandardProps<React.HTMLAttributes<HTMLElement>> & {
-  center?: boolean;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<TouchRippleClasses>;
-};
-declare const TouchRipple: React.ForwardRefRenderFunction<TouchRippleActions, TouchRippleProps>;
-export default TouchRipple;