impact-ui 5.0.0-alpha.1 → 5.0.0-beta.2

package/dist/node_modules/@mui/material/Tabs/ScrollbarSize.js

@@ -3,9 +3,9 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { jsx } from "react/jsx-runtime";
-import useEnhancedEffect from "../../utils/useEnhancedEffect/useEnhancedEffect.js";
-import debounce from "../../utils/debounce/debounce.js";
-import ownerWindow from "../../utils/ownerWindow/ownerWindow.js";
+import useEnhancedEffect from "../node_modules/@mui/utils/esm/useEnhancedEffect/useEnhancedEffect.js";
+import debounce from "../node_modules/@mui/utils/esm/debounce/debounce.js";
+import ownerWindow from "../node_modules/@mui/utils/esm/ownerWindow/ownerWindow.js";
 const _excluded = ["onChange"];
 const styles = {
   width: 99,
@@ -43,9 +43,10 @@ function ScrollbarSize(props) {
     onChange(scrollbarHeight.current);
   }, [onChange]);
   return /* @__PURE__ */ jsx("div", _extends({
-    style: styles,
+    style: styles
+  }, other, {
     ref: nodeRef
-  }, other));
+  }));
 }
 process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
   onChange: PropTypes.func.isRequired

package/dist/node_modules/@mui/material/Tabs/Tabs.js

@@ -1,25 +1,26 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from "react";
-import { r as reactIsExports } from "../node_modules/react-is/index.js";
+import { r as reactIsExports } from "../../../react-is/index.js";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
+import { useRtl } from "../../system/esm/RtlProvider/index.js";
 import styled from "../styles/styled.js";
-import useThemeProps from "../styles/useThemeProps.js";
 import useTheme from "../styles/useTheme.js";
 import animate from "../internal/animate.js";
 import ScrollbarSize from "./ScrollbarSize.js";
 import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
 import TabScrollButton from "../TabScrollButton/TabScrollButton.js";
-import { useSlotProps } from "../node_modules/@mui/base/utils/useSlotProps.js";
-import useEventCallback from "../../utils/useEventCallback/useEventCallback.js";
-import debounce from "../../utils/debounce/debounce.js";
-import ownerWindow from "../../utils/ownerWindow/ownerWindow.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
-import ownerDocument from "../../utils/ownerDocument/ownerDocument.js";
-import { getNormalizedScrollLeft, detectScrollType } from "../../utils/scrollLeft/scrollLeft.js";
-import refType from "../../utils/refType/refType.js";
+import useSlotProps from "../node_modules/@mui/utils/esm/useSlotProps/useSlotProps.js";
+import useEventCallback from "../node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js";
+import debounce from "../node_modules/@mui/utils/esm/debounce/debounce.js";
+import ownerWindow from "../node_modules/@mui/utils/esm/ownerWindow/ownerWindow.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
+import ownerDocument from "../node_modules/@mui/utils/esm/ownerDocument/ownerDocument.js";
+import { getNormalizedScrollLeft, detectScrollType } from "../node_modules/@mui/utils/esm/scrollLeft/scrollLeft.js";
+import refType from "../node_modules/@mui/utils/esm/refType/refType.js";
 const _excluded = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
 const nextItem = (list, item) => {
   if (list === item) {
@@ -185,10 +186,7 @@ const TabsIndicator = styled("span", {
   width: 2,
   right: 0
 }));
-const TabsScrollbarSize = styled(ScrollbarSize, {
-  name: "MuiTabs",
-  slot: "ScrollbarSize"
-})({
+const TabsScrollbarSize = styled(ScrollbarSize)({
   overflowX: "auto",
   overflowY: "hidden",
   // Hide dimensionless scrollbar on macOS
@@ -202,12 +200,12 @@ const TabsScrollbarSize = styled(ScrollbarSize, {
 const defaultIndicatorStyle = {};
 let warnedOnceTabPresent = false;
 const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: "MuiTabs"
   });
   const theme = useTheme();
-  const isRtl = theme.direction === "rtl";
+  const isRtl = useRtl();
   const {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -293,7 +291,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
         clientWidth: tabsNode.clientWidth,
         scrollLeft: tabsNode.scrollLeft,
         scrollTop: tabsNode.scrollTop,
-        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, theme.direction),
+        scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? "rtl" : "ltr"),
         scrollWidth: tabsNode.scrollWidth,
         top: rect.top,
         bottom: rect.bottom,
@@ -479,23 +477,44 @@ const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
         updateIndicatorState();
       }
     });
+    let resizeObserver;
+    const handleMutation = (records) => {
+      records.forEach((record) => {
+        record.removedNodes.forEach((item) => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);
+        });
+        record.addedNodes.forEach((item) => {
+          var _resizeObserver2;
+          (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);
+        });
+      });
+      handleResize();
+      updateScrollButtonState();
+    };
     const win = ownerWindow(tabsRef.current);
     win.addEventListener("resize", handleResize);
-    let resizeObserver;
+    let mutationObserver;
     if (typeof ResizeObserver !== "undefined") {
       resizeObserver = new ResizeObserver(handleResize);
       Array.from(tabListRef.current.children).forEach((child) => {
         resizeObserver.observe(child);
       });
     }
+    if (typeof MutationObserver !== "undefined") {
+      mutationObserver = new MutationObserver(handleMutation);
+      mutationObserver.observe(tabListRef.current, {
+        childList: true
+      });
+    }
     return () => {
+      var _mutationObserver, _resizeObserver3;
       handleResize.clear();
       win.removeEventListener("resize", handleResize);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
+      (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();
+      (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();
     };
-  }, [updateIndicatorState]);
+  }, [updateIndicatorState, updateScrollButtonState]);
   React.useEffect(() => {
     const tabListChildren = Array.from(tabListRef.current.children);
     const length = tabListChildren.length;
@@ -629,10 +648,10 @@ const Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(inProps, ref) {
   }));
 });
 process.env.NODE_ENV !== "production" ? Tabs.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
   /**
    * Callback fired when the component mounts.
    * This is useful when you want to trigger an action programmatically.
@@ -764,7 +783,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = {
    *
    *  - `scrollable` will invoke scrolling properties and allow for horizontally
    *  scrolling (or swiping) of the tab bar.
-   *  -`fullWidth` will make the tabs grow to use all the available space,
+   *  - `fullWidth` will make the tabs grow to use all the available space,
    *  which should be used for small views, like on mobile.
    *  - `standard` will render the default state.
    * @default 'standard'

package/dist/node_modules/@mui/material/Tabs/tabsClasses.js

@@ -1,5 +1,5 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
 function getTabsUtilityClass(slot) {
   return generateUtilityClass("MuiTabs", slot);
 }

package/dist/node_modules/@mui/material/TextareaAutosize/TextareaAutosize.js

@@ -0,0 +1,216 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import * as React from "react";
+import PropTypes from "../../../prop-types/index.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import useForkRef from "../node_modules/@mui/utils/esm/useForkRef/useForkRef.js";
+import ownerWindow from "../node_modules/@mui/utils/esm/ownerWindow/ownerWindow.js";
+import useEventCallback from "../node_modules/@mui/utils/esm/useEventCallback/useEventCallback.js";
+import useEnhancedEffect from "../node_modules/@mui/utils/esm/useEnhancedEffect/useEnhancedEffect.js";
+import debounce from "../node_modules/@mui/utils/esm/debounce/debounce.js";
+const _excluded = ["onChange", "maxRows", "minRows", "style", "value"];
+function getStyleValue(value) {
+  return parseInt(value, 10) || 0;
+}
+const styles = {
+  shadow: {
+    // Visibility needed to hide the extra text area on iPads
+    visibility: "hidden",
+    // Remove from the content flow
+    position: "absolute",
+    // Ignore the scrollbar width
+    overflow: "hidden",
+    height: 0,
+    top: 0,
+    left: 0,
+    // Create a new layer, increase the isolation of the computed values
+    transform: "translateZ(0)"
+  }
+};
+function isObjectEmpty(object) {
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
+function isEmpty(obj) {
+  return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
+}
+const TextareaAutosize = /* @__PURE__ */ React.forwardRef(function TextareaAutosize2(props, forwardedRef) {
+  const {
+    onChange,
+    maxRows,
+    minRows = 1,
+    style,
+    value
+  } = props, other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    current: isControlled
+  } = React.useRef(value != null);
+  const textareaRef = React.useRef(null);
+  const handleRef = useForkRef(forwardedRef, textareaRef);
+  const heightRef = React.useRef(null);
+  const hiddenTextareaRef = React.useRef(null);
+  const calculateTextareaStyles = React.useCallback(() => {
+    const textarea = textareaRef.current;
+    const hiddenTextarea = hiddenTextareaRef.current;
+    if (!textarea || !hiddenTextarea) {
+      return void 0;
+    }
+    const containerWindow = ownerWindow(textarea);
+    const computedStyle = containerWindow.getComputedStyle(textarea);
+    if (computedStyle.width === "0px") {
+      return {
+        outerHeightStyle: 0,
+        overflowing: false
+      };
+    }
+    hiddenTextarea.style.width = computedStyle.width;
+    hiddenTextarea.value = textarea.value || props.placeholder || "x";
+    if (hiddenTextarea.value.slice(-1) === "\n") {
+      hiddenTextarea.value += " ";
+    }
+    const boxSizing = computedStyle.boxSizing;
+    const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
+    const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
+    const innerHeight = hiddenTextarea.scrollHeight;
+    hiddenTextarea.value = "x";
+    const singleRowHeight = hiddenTextarea.scrollHeight;
+    let outerHeight = innerHeight;
+    if (minRows) {
+      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+    }
+    if (maxRows) {
+      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+    }
+    outerHeight = Math.max(outerHeight, singleRowHeight);
+    const outerHeightStyle = outerHeight + (boxSizing === "border-box" ? padding + border : 0);
+    const overflowing = Math.abs(outerHeight - innerHeight) <= 1;
+    return {
+      outerHeightStyle,
+      overflowing
+    };
+  }, [maxRows, minRows, props.placeholder]);
+  const didHeightChange = useEventCallback(() => {
+    const textarea = textareaRef.current;
+    const textareaStyles = calculateTextareaStyles();
+    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
+      return false;
+    }
+    const outerHeightStyle = textareaStyles.outerHeightStyle;
+    return heightRef.current != null && heightRef.current !== outerHeightStyle;
+  });
+  const syncHeight = React.useCallback(() => {
+    const textarea = textareaRef.current;
+    const textareaStyles = calculateTextareaStyles();
+    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
+      return;
+    }
+    const outerHeightStyle = textareaStyles.outerHeightStyle;
+    if (heightRef.current !== outerHeightStyle) {
+      heightRef.current = outerHeightStyle;
+      textarea.style.height = `${outerHeightStyle}px`;
+    }
+    textarea.style.overflow = textareaStyles.overflowing ? "hidden" : "";
+  }, [calculateTextareaStyles]);
+  const frameRef = React.useRef(-1);
+  useEnhancedEffect(() => {
+    const debouncedHandleResize = debounce(syncHeight);
+    const textarea = textareaRef == null ? void 0 : textareaRef.current;
+    if (!textarea) {
+      return void 0;
+    }
+    const containerWindow = ownerWindow(textarea);
+    containerWindow.addEventListener("resize", debouncedHandleResize);
+    let resizeObserver;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        if (didHeightChange()) {
+          resizeObserver.unobserve(textarea);
+          cancelAnimationFrame(frameRef.current);
+          syncHeight();
+          frameRef.current = requestAnimationFrame(() => {
+            resizeObserver.observe(textarea);
+          });
+        }
+      });
+      resizeObserver.observe(textarea);
+    }
+    return () => {
+      debouncedHandleResize.clear();
+      cancelAnimationFrame(frameRef.current);
+      containerWindow.removeEventListener("resize", debouncedHandleResize);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [calculateTextareaStyles, syncHeight, didHeightChange]);
+  useEnhancedEffect(() => {
+    syncHeight();
+  });
+  const handleChange = (event) => {
+    if (!isControlled) {
+      syncHeight();
+    }
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  return /* @__PURE__ */ jsxs(React.Fragment, {
+    children: [/* @__PURE__ */ jsx("textarea", _extends({
+      value,
+      onChange: handleChange,
+      ref: handleRef,
+      rows: minRows,
+      style
+    }, other)), /* @__PURE__ */ jsx("textarea", {
+      "aria-hidden": true,
+      className: props.className,
+      readOnly: true,
+      ref: hiddenTextareaRef,
+      tabIndex: -1,
+      style: _extends({}, styles.shadow, style, {
+        paddingTop: 0,
+        paddingBottom: 0
+      })
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" ? TextareaAutosize.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Maximum number of rows to display.
+   */
+  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Minimum number of rows to display.
+   * @default 1
+   */
+  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  placeholder: PropTypes.string,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * @ignore
+   */
+  value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string])
+} : void 0;
+export {
+  TextareaAutosize as default
+};

package/dist/node_modules/@mui/material/ToggleButton/ToggleButton.js

@@ -3,15 +3,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from "react";
 import PropTypes from "../../../prop-types/index.js";
 import { clsx } from "../../../clsx/dist/clsx.js";
-import useThemeProps from "../styles/useThemeProps.js";
 import styled from "../styles/styled.js";
 import toggleButtonClasses, { getToggleButtonUtilityClass } from "./toggleButtonClasses.js";
+import ToggleButtonGroupContext from "../ToggleButtonGroup/ToggleButtonGroupContext.js";
+import ToggleButtonGroupButtonContext from "../ToggleButtonGroup/ToggleButtonGroupButtonContext.js";
+import isValueSelected from "../ToggleButtonGroup/isValueSelected.js";
 import { jsx } from "react/jsx-runtime";
-import capitalize from "../../utils/capitalize/capitalize.js";
-import composeClasses from "../../utils/composeClasses/composeClasses.js";
+import resolveProps from "../node_modules/@mui/utils/esm/resolveProps/resolveProps.js";
+import { useDefaultProps } from "../DefaultPropsProvider/DefaultPropsProvider.js";
+import capitalize from "../node_modules/@mui/utils/esm/capitalize/capitalize.js";
+import composeClasses from "../node_modules/@mui/utils/esm/composeClasses/composeClasses.js";
 import ButtonBase from "../ButtonBase/ButtonBase.js";
 import { alpha } from "../../system/esm/colorManipulator.js";
-const _excluded = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
+const _excluded = ["value"], _excluded2 = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
 const useUtilityClasses = (ownerState) => {
   const {
     classes,
@@ -85,8 +89,15 @@ const ToggleButtonRoot = styled(ButtonBase, {
   });
 });
 const ToggleButton = /* @__PURE__ */ React.forwardRef(function ToggleButton2(inProps, ref) {
-  const props = useThemeProps({
-    props: inProps,
+  const _React$useContext = React.useContext(ToggleButtonGroupContext), {
+    value: contextValue
+  } = _React$useContext, contextProps = _objectWithoutPropertiesLoose(_React$useContext, _excluded);
+  const toggleButtonGroupButtonContextPositionClassName = React.useContext(ToggleButtonGroupButtonContext);
+  const resolvedProps = resolveProps(_extends({}, contextProps, {
+    selected: isValueSelected(inProps.value, contextValue)
+  }), inProps);
+  const props = useDefaultProps({
+    props: resolvedProps,
     name: "MuiToggleButton"
   });
   const {
@@ -101,7 +112,7 @@ const ToggleButton = /* @__PURE__ */ React.forwardRef(function ToggleButton2(inP
     selected,
     size = "medium",
     value
-  } = props, other = _objectWithoutPropertiesLoose(props, _excluded);
+  } = props, other = _objectWithoutPropertiesLoose(props, _excluded2);
   const ownerState = _extends({}, props, {
     color,
     disabled,
@@ -121,8 +132,9 @@ const ToggleButton = /* @__PURE__ */ React.forwardRef(function ToggleButton2(inP
       onChange(event, value);
     }
   };
+  const positionClassName = toggleButtonGroupButtonContextPositionClassName || "";
   return /* @__PURE__ */ jsx(ToggleButtonRoot, _extends({
-    className: clsx(classes.root, className),
+    className: clsx(contextProps.className, classes.root, className, positionClassName),
     disabled,
     focusRipple: !disableFocusRipple,
     ref,
@@ -136,10 +148,10 @@ const ToggleButton = /* @__PURE__ */ React.forwardRef(function ToggleButton2(inP
   }));
 });
 process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn 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.
    */
@@ -155,7 +167,7 @@ process.env.NODE_ENV !== "production" ? ToggleButton.propTypes = {
   /**
    * The color of the button when it is in an active state.
    * 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/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'standard'
    */
   color: PropTypes.oneOfType([PropTypes.oneOf(["standard", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),

package/dist/node_modules/@mui/material/ToggleButton/toggleButtonClasses.js

@@ -1,9 +1,9 @@
-import generateUtilityClass from "../../utils/generateUtilityClass/generateUtilityClass.js";
-import generateUtilityClasses from "../../utils/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClasses from "../node_modules/@mui/utils/esm/generateUtilityClasses/generateUtilityClasses.js";
+import generateUtilityClass from "../node_modules/@mui/utils/esm/generateUtilityClass/generateUtilityClass.js";
 function getToggleButtonUtilityClass(slot) {
   return generateUtilityClass("MuiToggleButton", slot);
 }
-const toggleButtonClasses = generateUtilityClasses("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge"]);
+const toggleButtonClasses = generateUtilityClasses("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]);
 export {
   toggleButtonClasses as default,
   getToggleButtonUtilityClass