@hitachivantara/uikit-react-core 5.106.1 → 6.0.0-next.1

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -1,287 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const reactPopper = require("react-popper");
-const utils = require("@mui/material/utils");
-const core = require("@popperjs/core");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useControlled = require("../hooks/useControlled.cjs");
-const useUniqueId = require("../hooks/useUniqueId.cjs");
-const icons = require("../icons.cjs");
-const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
-const keyboardUtils = require("../utils/keyboardUtils.cjs");
-const setId = require("../utils/setId.cjs");
-const BaseDropdown_styles = require("./BaseDropdown.styles.cjs");
-const BaseDropdownPanel = require("./BaseDropdownPanel.cjs");
-const context = require("./context.cjs");
-const Typography = require("../Typography/Typography.cjs");
-const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
-  const {
-    id: idProp,
-    className,
-    classes: classesProp,
-    children,
-    role,
-    placeholder,
-    component,
-    headerComponent: HeaderComponentProp,
-    adornment,
-    expanded,
-    dropdownHeaderProps,
-    defaultExpanded,
-    disabled,
-    readOnly,
-    required,
-    disablePortal,
-    "aria-expanded": ariaExpandedProp,
-    "aria-label": ariaLabelProp,
-    "aria-labelledby": ariaLabelledByProp,
-    dropdownHeaderRef: dropdownHeaderRefProp,
-    onToggle,
-    onClickOutside,
-    ...others
-  } = props;
-  const { classes, cx } = BaseDropdown_styles.useClasses(classesProp);
-  const {
-    popperPlacement,
-    popperElement,
-    referenceElement,
-    setReferenceElement
-  } = context.useBaseDropdownContext();
-  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
-  const headerRef = utils.useForkRef(
-    setReferenceElement,
-    dropdownHeaderRefProp,
-    dropdownHeaderProps?.ref
-  );
-  const customHeaderRef = utils.useForkRef(ref, headerRef);
-  const ariaRole = role || (component == null ? "combobox" : void 0);
-  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
-  const id = useUniqueId.useUniqueId(idProp);
-  const containerId = setId.setId(id, "children-container");
-  const headerControlArias = {
-    "aria-required": required ?? void 0,
-    "aria-readonly": readOnly ?? void 0,
-    "aria-disabled": disabled ?? void 0,
-    "aria-expanded": ariaExpanded,
-    "aria-owns": isOpen ? containerId : void 0,
-    "aria-controls": isOpen ? containerId : void 0
-  };
-  const headerAriaLabels = {
-    "aria-label": ariaLabelProp,
-    "aria-labelledby": ariaLabelledByProp
-  };
-  const handleToggle = React.useCallback(
-    (event) => {
-      if (event && !keyboardUtils.isKey(event, "Tab")) {
-        event.preventDefault();
-      }
-      const notControlKey = !!event?.code && !keyboardUtils.isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
-      const ignoredCombinations = keyboardUtils.isKey(event, "Esc") && !isOpen || keyboardUtils.isKey(event, "ArrowDown") && isOpen || keyboardUtils.isKey(event, "Tab") && !isOpen;
-      if (disabled || notControlKey || ignoredCombinations) return;
-      const newOpen = !isOpen;
-      setIsOpen(() => {
-        if (!newOpen) {
-          referenceElement?.focus({ preventScroll: true });
-        }
-        return newOpen;
-      });
-      onToggle?.(event, newOpen);
-    },
-    [isOpen, disabled, setIsOpen, onToggle, referenceElement]
-  );
-  const defaultHeaderElement = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      id: setId.setId(id, "header"),
-      "data-popper-placement": popperPlacement,
-      className: cx(classes.header, {
-        [classes.headerOpen]: isOpen,
-        [classes.headerOpenUp]: isOpen && popperPlacement?.includes("top"),
-        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom"),
-        [classes.headerReadOnly]: readOnly,
-        [classes.headerDisabled]: disabled
-      }),
-      role: ariaRole === "combobox" ? "textbox" : void 0,
-      ...headerAriaLabels,
-      style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
-      tabIndex: disabled ? -1 : 0,
-      ref: headerRef,
-      ...dropdownHeaderProps,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cx(classes.selection, {
-              [classes.selectionDisabled]: disabled
-            }),
-            children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { noWrap: true, className: classes.placeholder, children: placeholder }) : placeholder
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsxRuntime.jsx(
-          icons.HvIcon,
-          {
-            name: "CaretDown",
-            size: "xs",
-            rotate: isOpen,
-            className: classes.arrow
-          }
-        ) })
-      ]
-    }
-  );
-  const headerElement = component && React.isValidElement(component) ? React.cloneElement(component, {
-    ref: headerRef,
-    ...headerControlArias
-  }) : defaultHeaderElement;
-  const handleContainerKeyDown = (event) => {
-    if (keyboardUtils.isKey(event, "Esc")) {
-      handleToggle(event);
-    }
-    if (keyboardUtils.isKey(event, "Tab") && !event.shiftKey) {
-      const focusList = focusableElementFinder.getFirstAndLastFocus(popperElement);
-      if (document.activeElement === focusList?.last) {
-        event.preventDefault();
-        focusList?.first?.focus();
-      }
-    }
-  };
-  const handleOutside = (event) => {
-    const isButtonClick = referenceElement?.contains(event.target);
-    if (!isButtonClick) {
-      onClickOutside?.(event);
-      setIsOpen(false);
-      onToggle?.(event, false);
-    }
-  };
-  const hasCustomHeader = !!HeaderComponentProp;
-  const HeaderComponent = HeaderComponentProp || "div";
-  const RootComponent = HeaderComponentProp ? React.Fragment : "div";
-  return /* @__PURE__ */ jsxRuntime.jsxs(RootComponent, { ...!hasCustomHeader && { className: classes.root }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      HeaderComponent,
-      {
-        ref: hasCustomHeader ? customHeaderRef : ref,
-        id,
-        disabled: hasCustomHeader && disabled,
-        className: cx(className, {
-          [classes.anchor]: !hasCustomHeader,
-          [classes.rootDisabled]: disabled
-        }),
-        ...!readOnly && {
-          onKeyDown: handleToggle,
-          onClick: handleToggle
-        },
-        ...(ariaRole || hasCustomHeader) && {
-          role: hasCustomHeader ? void 0 : ariaRole,
-          ...headerAriaLabels,
-          ...headerControlArias
-        },
-        tabIndex: hasCustomHeader ? void 0 : -1,
-        ...others,
-        children: headerElement
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      BaseDropdownPanel.BaseDropdownPanel,
-      {
-        classes,
-        containerId,
-        onClickAway: handleOutside,
-        disablePortal,
-        onContainerKeyDown: handleContainerKeyDown,
-        children
-      }
-    )
-  ] });
-});
-const HvBaseDropdown = React.forwardRef(
-  function HvBaseDropdown2(props, ref) {
-    const {
-      popperProps = {},
-      variableWidth,
-      placement: placementProp = "right",
-      onContainerCreation,
-      ...others
-    } = uikitReactUtils.useDefaultProps("HvBaseDropdown", props);
-    const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
-    const { modifiers: popperPropsModifiers, ...otherPopperProps } = popperProps;
-    const [referenceElement, setReferenceElement] = React.useState(null);
-    const [popperElement, setPopperElement] = React.useState(
-      null
-    );
-    const onFirstUpdate = React.useCallback(() => {
-      onContainerCreation?.(popperElement);
-    }, [onContainerCreation, popperElement]);
-    const modifiers = React.useMemo(
-      () => [
-        {
-          name: "variableWidth",
-          enabled: !variableWidth,
-          phase: "beforeWrite",
-          requires: ["computeStyles"],
-          fn: ({ state }) => {
-            state.styles.popper.width = `${state.rects.reference.width}px`;
-          },
-          effect: ({ state }) => {
-            state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
-          }
-        },
-        {
-          name: "maxSize",
-          enabled: true,
-          phase: "main",
-          requiresIfExists: ["offset", "preventOverflow", "flip"],
-          fn: ({ state, name, options }) => {
-            const overflow = core.detectOverflow(state, options);
-            const x = state.modifiersData.preventOverflow?.x || 0;
-            const y = state.modifiersData.preventOverflow?.y || 0;
-            const popperWidth = state.rects.popper.width;
-            const popperHeight = state.rects.popper.height;
-            const basePlacement = state.placement.split("-")[0];
-            const widthProp = basePlacement === "left" ? "left" : "right";
-            const heightProp = basePlacement === "top" ? "top" : "bottom";
-            state.modifiersData[name] = {
-              width: popperWidth - overflow[widthProp] - x,
-              height: popperHeight - overflow[heightProp] - y
-            };
-          }
-        },
-        {
-          name: "applyMaxSize",
-          enabled: true,
-          phase: "beforeWrite",
-          requires: ["maxSize"],
-          fn: ({ state }) => {
-            const { width, height } = state.modifiersData.maxSize;
-            state.styles.popper.maxWidth = `${width}px`;
-            state.styles.popper.maxHeight = `${height}px`;
-          }
-        },
-        ...popperPropsModifiers || []
-      ],
-      [popperPropsModifiers, variableWidth]
-    );
-    const popper = reactPopper.usePopper(referenceElement, popperElement, {
-      placement,
-      modifiers,
-      onFirstUpdate,
-      ...otherPopperProps
-    });
-    const value = React.useMemo(
-      () => ({
-        popperPlacement: popper?.attributes.popper?.["data-popper-placement"] ?? "bottom",
-        popper,
-        popperElement,
-        setPopperElement,
-        referenceElement,
-        setReferenceElement
-      }),
-      [popper, popperElement, referenceElement]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(context.BaseDropdownContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown, { ref, ...others }) });
-  }
-);
-exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;
-exports.HvBaseDropdown = HvBaseDropdown;

package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs

@@ -1,109 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../utils/focusUtils.cjs");
-const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropdown", {
-  root: { width: "100%", position: "relative" },
-  rootDisabled: {
-    cursor: "not-allowed",
-    "&:focus": {
-      outline: "none"
-    }
-  },
-  anchor: { display: "inline-block", width: "100%" },
-  container: { zIndex: uikitStyles.theme.zIndices.popover, width: "auto" },
-  header: {
-    cursor: "pointer",
-    userSelect: "none",
-    position: "relative",
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    boxSizing: "border-box",
-    border: `1px solid ${uikitStyles.theme.colors.text}`,
-    borderRadius: uikitStyles.theme.radii.round,
-    ":hover,:focus-visible": {
-      borderColor: uikitStyles.theme.colors.primary
-    },
-    ":focus": {
-      outline: "none"
-    },
-    ":focus-visible": {
-      ...focusUtils.outlineStyles
-    }
-  },
-  headerOpen: {
-    "&,:hover": {
-      borderColor: uikitStyles.theme.colors.text
-    }
-  },
-  /** @deprecated use `[data-popper-placement*='top']` selector instead */
-  headerOpenUp: {},
-  /** @deprecated use `[data-popper-placement*='bottom']` selector instead */
-  headerOpenDown: {},
-  headerDisabled: {
-    cursor: "not-allowed",
-    pointerEvents: "none",
-    color: uikitStyles.theme.colors.textDisabled,
-    backgroundColor: uikitStyles.theme.colors.bgPage,
-    "&,:hover": {
-      borderColor: "currentcolor"
-    }
-  },
-  headerReadOnly: {
-    cursor: "not-allowed",
-    pointerEvents: "none",
-    color: uikitStyles.theme.colors.textSubtle,
-    borderColor: "currentcolor",
-    backgroundColor: uikitStyles.theme.colors.bgPage,
-    userSelect: "text",
-    ":focus-visible": {
-      outline: "none",
-      borderColor: "currentcolor"
-    }
-  },
-  arrowContainer: {
-    position: "absolute",
-    pointerEvents: "none",
-    top: -1,
-    right: -1
-  },
-  arrow: {},
-  selection: {
-    display: "flex",
-    alignItems: "center",
-    height: "30px",
-    boxSizing: "border-box",
-    paddingLeft: uikitStyles.theme.space.xs,
-    paddingRight: 32
-  },
-  selectionDisabled: {},
-  placeholder: {
-    display: "block",
-    color: uikitStyles.theme.colors.textSubtle
-  },
-  panel: {
-    // TODO: remove padding override in v6 (most elements need it)
-    padding: 0,
-    border: `1px solid ${uikitStyles.theme.colors.text}`
-  },
-  /** @deprecated leverage `[data-popper-placement]` instead */
-  panelOpenedUp: {},
-  /** @deprecated leverage `[data-popper-placement]` instead */
-  panelOpenedDown: {},
-  inputExtensionOpen: {
-    height: "0px",
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    borderTop: "none",
-    borderBottom: "none",
-    borderRight: `1px solid ${uikitStyles.theme.colors.text}`,
-    borderLeft: `1px solid ${uikitStyles.theme.colors.text}`
-  },
-  inputExtensionLeftPosition: { marginLeft: "auto" },
-  inputExtensionOpenShadow: {
-    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`
-  },
-  inputExtensionFloatRight: { float: "right" },
-  inputExtensionFloatLeft: { float: "left" }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/BaseDropdown/BaseDropdownPanel.cjs

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const ClickAwayListener = require("@mui/base/ClickAwayListener");
-const Portal = require("@mui/base/Portal");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const document = require("../utils/document.cjs");
-const context = require("./context.cjs");
-const Panel = require("../Panel/Panel.cjs");
-const BaseDropdownPanel = ({
-  classes,
-  containerId,
-  children,
-  disablePortal,
-  onContainerKeyDown,
-  onClickAway
-}) => {
-  const { cx } = uikitReactUtils.useCss();
-  const { popperPlacement, popper, referenceElement, setPopperElement } = context.useBaseDropdownContext();
-  const { rootId } = uikitReactUtils.useTheme();
-  const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
-  const container = (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: setPopperElement,
-        className: classes.container,
-        onKeyDown: onContainerKeyDown,
-        style: popper?.styles.popper,
-        ...popper?.attributes.popper,
-        children: [
-          popperPlacement?.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(classes.inputExtensionOpen, {
-                [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Panel.HvPanel,
-            {
-              id: containerId,
-              "data-popper-placement": popperPlacement,
-              className: cx(classes.panel, {
-                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
-                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
-              }),
-              children
-            }
-          ),
-          popperPlacement?.includes("top") && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: { width: extensionWidth },
-              className: cx(
-                classes.inputExtensionOpen,
-                classes.inputExtensionOpenShadow,
-                {
-                  [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
-                  [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
-                }
-              )
-            }
-          )
-        ]
-      }
-    )
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Portal.Portal,
-    {
-      container: document.getContainerElement(rootId),
-      disablePortal,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener.ClickAwayListener, { onClickAway, children: container })
-    }
-  );
-};
-exports.BaseDropdownPanel = BaseDropdownPanel;

package/dist/cjs/BaseDropdown/context.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const BaseDropdownContext = React.createContext({
-  referenceElement: null,
-  popperElement: null
-});
-BaseDropdownContext.displayName = "BaseDropdownContext";
-const useBaseDropdownContext = () => React.useContext(BaseDropdownContext);
-exports.BaseDropdownContext = BaseDropdownContext;
-exports.useBaseDropdownContext = useBaseDropdownContext;

package/dist/cjs/BaseInput/BaseInput.cjs

@@ -1,97 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const MuiInputBase = require("@mui/material/InputBase");
-const utils$1 = require("@mui/material/utils");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const BaseInput_styles = require("./BaseInput.styles.cjs");
-const context = require("../FormElement/context.cjs");
-const utils = require("../FormElement/utils.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const MuiInputBase__default = /* @__PURE__ */ _interopDefault(MuiInputBase);
-const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
-  const {
-    classes: classesProp,
-    className = "",
-    id,
-    name,
-    value,
-    defaultValue,
-    required,
-    readOnly,
-    disabled,
-    onChange,
-    type = "text",
-    placeholder,
-    multiline,
-    resizable,
-    invalid: invalidProp,
-    inputRef,
-    inputProps = {},
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvBaseInput", props);
-  const { classes, cx } = BaseInput_styles.useClasses(classesProp);
-  const formElementContext = React.useContext(context.HvFormElementContext);
-  const formElementProps = utils.buildFormElementPropsFromContext(
-    name,
-    disabled,
-    readOnly,
-    required,
-    formElementContext
-  );
-  const forkedRef = utils$1.useForkRef(ref, inputRef);
-  const invalid = invalidProp || formElementProps.status === "invalid";
-  const formElementDescriptorsContext = React.useContext(
-    context.HvFormElementDescriptorsContext
-  );
-  const ariaProps = utils.buildAriaPropsFromContext(
-    inputProps,
-    formElementDescriptorsContext,
-    invalid,
-    id
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    MuiInputBase__default.default,
-    {
-      id,
-      name: formElementProps.name,
-      value,
-      defaultValue,
-      placeholder,
-      readOnly: !!formElementProps.readOnly,
-      disabled: formElementProps.disabled,
-      onChange: (event) => onChange?.(event, event.target.value),
-      className: cx(classes.root, classes.inputRoot, className, {
-        [classes.inputRootMultiline]: multiline,
-        [classes.multiline]: multiline,
-        [classes.inputRootInvalid]: invalid,
-        [classes.invalid]: invalid,
-        [classes.inputRootReadOnly]: formElementProps.readOnly,
-        [classes.readOnly]: formElementProps.readOnly,
-        [classes.inputRootDisabled]: formElementProps.disabled,
-        [classes.disabled]: formElementProps.disabled
-      }),
-      classes: {
-        focused: cx(classes.focused, classes.inputRootFocused),
-        input: cx(classes.input, {
-          [classes.inputResizable]: !formElementProps.disabled && resizable,
-          [classes.inputDisabled]: formElementProps.disabled,
-          [classes.inputReadOnly]: formElementProps.readOnly
-        })
-      },
-      inputProps: {
-        // Avoid the required attribute at the root node
-        required: formElementProps.required,
-        ...inputProps,
-        ...ariaProps
-      },
-      inputRef: forkedRef,
-      multiline,
-      ...multiline ? { rows: 10 } : { type },
-      ...others
-    }
-  );
-});
-exports.baseInputClasses = BaseInput_styles.staticClasses;
-exports.HvBaseInput = HvBaseInput;