@hitachivantara/uikit-react-core 5.39.3 → 5.39.4

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -0,0 +1,349 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import React__default, { forwardRef, useState, useCallback, useMemo } from "react";
+import { createPortal } from "react-dom";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { usePopper } from "react-popper";
+import { detectOverflow } from "@popperjs/core";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { useForkRef } from "../hooks/useForkRef.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
+import { setId } from "../utils/setId.js";
+import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
+import { useClasses } from "./BaseDropdown.styles.js";
+import { staticClasses } from "./BaseDropdown.styles.js";
+import BaseDropdownContext from "./BaseDropdownContext/BaseDropdownContext.js";
+import { HvTypography } from "../Typography/Typography.js";
+const HvBaseDropdown = forwardRef(
+  (props, ref) => {
+    const {
+      id: idProp,
+      className,
+      classes: classesProp,
+      children,
+      role,
+      placeholder,
+      component,
+      adornment,
+      expanded,
+      dropdownHeaderProps,
+      defaultExpanded,
+      disabled,
+      readOnly,
+      required,
+      disablePortal,
+      variableWidth,
+      placement: placementProp = "right",
+      "aria-expanded": ariaExpandedProp,
+      "aria-label": ariaLabelProp,
+      "aria-labelledby": ariaLabelledByProp,
+      popperProps = {},
+      dropdownHeaderRef: dropdownHeaderRefProp,
+      onToggle,
+      onClickOutside,
+      onContainerCreation,
+      ...others
+    } = useDefaultProps("HvBaseDropdown", props);
+    const { classes, cx } = useClasses(classesProp);
+    const { rootId } = useTheme();
+    const [isOpen, setIsOpen] = useControlled(
+      expanded,
+      Boolean(defaultExpanded)
+    );
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(
+      null
+    );
+    const [popperMaxSize, setPopperMaxSize] = useState({});
+    const handleDropdownHeaderRefProp = useForkRef(
+      dropdownHeaderRefProp,
+      dropdownHeaderProps?.ref
+    );
+    const handleDropdownHeaderRef = useForkRef(
+      setReferenceElement,
+      handleDropdownHeaderRefProp
+    );
+    const ariaRole = role || (component == null ? "combobox" : void 0);
+    const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
+    const id = useUniqueId(idProp, "hvbasedropdown");
+    const containerId = setId(id, "children-container");
+    const headerControlArias = {
+      "aria-required": required ?? void 0,
+      "aria-readonly": readOnly ?? 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 placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
+    const extensionWidth = referenceElement ? referenceElement?.offsetWidth : "inherit";
+    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } = popperProps;
+    const onFirstUpdate = useCallback(() => {
+      onContainerCreation?.(popperElement);
+    }, [onContainerCreation, popperElement]);
+    const widthCalculator = useCallback(
+      ({ state }) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`;
+      },
+      []
+    );
+    const widthCalculatorEffect = useCallback(
+      ({ state }) => {
+        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+      },
+      []
+    );
+    const applyMaxSizeCalculator = useCallback(
+      ({ state }) => {
+        const { width, height } = state.modifiersData.maxSize;
+        if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {
+          setPopperMaxSize({ width, height });
+        }
+        state.styles.popper = {
+          ...state.styles.popper,
+          maxWidth: `${width}px`,
+          maxHeight: `${height}px`
+        };
+      },
+      [popperMaxSize]
+    );
+    const maxSizeCalculator = useCallback(
+      ({ state, name, options }) => {
+        const overflow = 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
+        };
+      },
+      []
+    );
+    const modifiers = useMemo(
+      () => [
+        {
+          name: "variableWidth",
+          enabled: !variableWidth,
+          phase: "beforeWrite",
+          requires: ["computeStyles"],
+          fn: widthCalculator,
+          effect: widthCalculatorEffect
+        },
+        {
+          name: "maxSize",
+          enabled: true,
+          phase: "main",
+          requiresIfExists: ["offset", "preventOverflow", "flip"],
+          fn: maxSizeCalculator
+        },
+        {
+          name: "applyMaxSize",
+          enabled: true,
+          phase: "beforeWrite",
+          requires: ["maxSize"],
+          fn: applyMaxSizeCalculator
+        },
+        ...popperPropsModifiers
+      ],
+      [
+        maxSizeCalculator,
+        applyMaxSizeCalculator,
+        popperPropsModifiers,
+        variableWidth,
+        widthCalculator,
+        widthCalculatorEffect
+      ]
+    );
+    const { styles: popperStyles, attributes } = usePopper(
+      referenceElement,
+      popperElement,
+      {
+        placement,
+        modifiers,
+        onFirstUpdate,
+        ...otherPopperProps
+      }
+    );
+    const popperPlacement = attributes.popper?.["data-popper-placement"] ?? "bottom";
+    const handleToggle = useCallback(
+      (event) => {
+        if (event && !isKey(event, "Tab")) {
+          event.preventDefault();
+        }
+        const notControlKey = !!event?.code && !isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
+        const ignoredCombinations = isKey(event, "Esc") && !isOpen || isKey(event, "ArrowDown") && isOpen || 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 ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
+    const defaultHeaderElement = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: setId(id, "header"),
+        className: cx(classes.header, {
+          [classes.headerDisabled]: disabled,
+          [classes.headerReadOnly]: readOnly,
+          [classes.headerOpen]: isOpen,
+          [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
+          [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
+        }),
+        role: ariaRole === "combobox" ? "textbox" : void 0,
+        ...headerAriaLabels,
+        style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
+        tabIndex: disabled ? -1 : 0,
+        ref: handleDropdownHeaderRef,
+        ...dropdownHeaderProps,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsx(
+            HvTypography,
+            {
+              className: cx(classes.placeholder, {
+                [classes.selectionDisabled]: disabled
+              }),
+              variant: "body",
+              children: placeholder
+            }
+          ) : placeholder }),
+          /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(
+            ExpanderComponent,
+            {
+              iconSize: "XS",
+              color: disabled ? "secondary_60" : void 0,
+              className: classes.arrow
+            }
+          ) })
+        ]
+      }
+    );
+    const headerElement = component && React__default.isValidElement(component) ? React__default.cloneElement(component, {
+      ref: handleDropdownHeaderRef,
+      ...headerControlArias
+    }) : defaultHeaderElement;
+    const containerComponent = (() => {
+      const handleContainerKeyDown = (event) => {
+        if (isKey(event, "Esc")) {
+          handleToggle(event);
+        }
+        if (isKey(event, "Tab") && !event.shiftKey) {
+          const focusList = 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 container = /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: setPopperElement,
+          className: classes.container,
+          style: popperStyles.popper,
+          ...attributes.popper,
+          children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleOutside, children: /* @__PURE__ */ jsxs("div", { onKeyDown: handleContainerKeyDown, children: [
+            popperPlacement.includes("bottom") && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { width: extensionWidth },
+                className: cx(classes.inputExtensionOpen, {
+                  [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(BaseDropdownContext.Provider, { value: popperMaxSize, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: containerId,
+                className: cx(classes.panel, {
+                  [classes.panelOpenedUp]: popperPlacement.includes("top"),
+                  [classes.panelOpenedDown]: popperPlacement.includes("bottom")
+                }),
+                children
+              }
+            ) }),
+            popperPlacement.includes("top") && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { width: extensionWidth },
+                className: cx(
+                  classes.inputExtensionOpen,
+                  classes.inputExtensionOpenShadow,
+                  {
+                    [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
+                    [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
+                  }
+                )
+              }
+            )
+          ] }) })
+        }
+      );
+      if (disablePortal)
+        return container;
+      return createPortal(
+        container,
+        document.getElementById(rootId || "") || document.body
+      );
+    })();
+    return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          id,
+          className: cx(
+            classes.anchor,
+            { [classes.rootDisabled]: disabled },
+            className
+          ),
+          ...!readOnly && {
+            onKeyDown: handleToggle,
+            onClick: handleToggle
+          },
+          ...ariaRole && {
+            role: ariaRole,
+            ...headerAriaLabels,
+            ...headerControlArias
+          },
+          tabIndex: -1,
+          ...others,
+          children: headerElement
+        }
+      ),
+      isOpen && containerComponent
+    ] });
+  }
+);
+export {
+  HvBaseDropdown,
+  staticClasses as baseDropdownClasses
+};
+//# sourceMappingURL=BaseDropdown.js.map

package/dist/esm/BaseDropdown/BaseDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useState,\n  useCallback,\n  KeyboardEventHandler,\n  AriaAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport ClickAwayListener, {\n  ClickAwayListenerProps,\n} from \"@mui/material/ClickAwayListener\";\nimport { PopperPlacementType, PopperProps } from \"@mui/material/Popper\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"../Typography\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps extends HvBaseProps {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      className,\n      classes: classesProp,\n      children,\n      role,\n      placeholder,\n      component,\n      adornment,\n      expanded,\n      dropdownHeaderProps,\n      defaultExpanded,\n      disabled,\n      readOnly,\n      required,\n      disablePortal,\n      variableWidth,\n      placement: placementProp = \"right\",\n      \"aria-expanded\": ariaExpandedProp,\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledByProp,\n      popperProps = {},\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      onToggle,\n      onClickOutside,\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const { rootId } = useTheme();\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null\n    );\n    const [popperMaxSize, setPopperMaxSize] = useState<{\n      width?: number;\n      height?: number;\n    }>({});\n\n    const handleDropdownHeaderRefProp = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderProps?.ref\n    );\n    const handleDropdownHeaderRef = useForkRef(\n      setReferenceElement,\n      handleDropdownHeaderRefProp\n    );\n\n    const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n    const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n    const id = useUniqueId(idProp, \"hvbasedropdown\");\n    const containerId = setId(id, \"children-container\");\n\n    const headerControlArias = {\n      \"aria-required\": required ?? undefined,\n      \"aria-readonly\": readOnly ?? undefined,\n\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": isOpen ? containerId : undefined,\n      \"aria-controls\": isOpen ? containerId : undefined,\n    } satisfies AriaAttributes;\n\n    const headerAriaLabels = {\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledByProp,\n    } satisfies AriaAttributes;\n\n    const placement: PopperPlacementType = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const extensionWidth = referenceElement\n      ? referenceElement?.offsetWidth\n      : \"inherit\";\n\n    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n      popperProps;\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const widthCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.styles.popper.width = `${state.rects.reference.width}px`;\n      },\n      []\n    );\n\n    const widthCalculatorEffect = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.elements.popper.style.width = `${\n          (state.elements.reference as any).offsetWidth\n        }px`;\n      },\n      []\n    );\n\n    const applyMaxSizeCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        // The `maxSize` modifier provides this data\n        const { width, height } = state.modifiersData.maxSize;\n        if (\n          width !== popperMaxSize?.width ||\n          height !== popperMaxSize?.height\n        ) {\n          setPopperMaxSize({ width, height });\n        }\n\n        state.styles.popper = {\n          ...state.styles.popper,\n          maxWidth: `${width}px`,\n          maxHeight: `${height}px`,\n        };\n      },\n      [popperMaxSize]\n    );\n\n    const maxSizeCalculator = useCallback(\n      ({ state, name, options }: ModifierArguments<Options>) => {\n        const overflow = detectOverflow(state, options);\n\n        const x = state.modifiersData.preventOverflow?.x || 0;\n        const y = state.modifiersData.preventOverflow?.y || 0;\n\n        const popperWidth = state.rects.popper.width;\n        const popperHeight = state.rects.popper.height;\n\n        const basePlacement = state.placement.split(\"-\")[0];\n\n        const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n        const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n        state.modifiersData[name] = {\n          width: popperWidth - overflow[widthProp] - x,\n          height: popperHeight - overflow[heightProp] - y,\n        };\n      },\n      []\n    );\n\n    const modifiers = useMemo<PopperProps[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: widthCalculator,\n          effect: widthCalculatorEffect,\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: maxSizeCalculator,\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: applyMaxSizeCalculator,\n        },\n        ...popperPropsModifiers,\n      ],\n      [\n        maxSizeCalculator,\n        applyMaxSizeCalculator,\n        popperPropsModifiers,\n        variableWidth,\n        widthCalculator,\n        widthCalculatorEffect,\n      ]\n    );\n\n    const { styles: popperStyles, attributes } = usePopper(\n      referenceElement,\n      popperElement,\n      {\n        placement,\n        modifiers,\n        onFirstUpdate,\n        ...otherPopperProps,\n      }\n    );\n\n    const popperPlacement =\n      attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n    const handleToggle = useCallback(\n      (event) => {\n        if (event && !isKey(event, \"Tab\")) {\n          event.preventDefault();\n        }\n\n        const notControlKey =\n          !!event?.code &&\n          !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n        const ignoredCombinations =\n          (isKey(event, \"Esc\") && !isOpen) ||\n          (isKey(event, \"ArrowDown\") && isOpen) ||\n          (isKey(event, \"Tab\") && !isOpen);\n\n        if (disabled || notControlKey || ignoredCombinations) return;\n\n        const newOpen = !isOpen;\n\n        /* If about to close focus on the header component. */\n        setIsOpen(() => {\n          if (!newOpen) {\n            // Focus-ring won't be visible even if using the keyboard:\n            // https://github.com/WICG/focus-visible/issues/88\n            referenceElement?.focus({ preventScroll: true });\n          }\n\n          return newOpen;\n        });\n\n        onToggle?.(event, newOpen);\n      },\n      [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n    );\n\n    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n    const defaultHeaderElement = (\n      <div\n        id={setId(id, \"header\")}\n        className={cx(classes.header, {\n          [classes.headerDisabled]: disabled,\n          [classes.headerReadOnly]: readOnly,\n          [classes.headerOpen]: isOpen,\n          [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n          [classes.headerOpenDown]:\n            isOpen && popperPlacement.includes(\"bottom\"),\n        })}\n        // TODO: review \"textbox\" role\n        role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n        {...headerAriaLabels}\n        style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n        // Removes the element from the navigation sequence for keyboard focus if disabled\n        tabIndex={disabled ? -1 : 0}\n        ref={handleDropdownHeaderRef}\n        {...dropdownHeaderProps}\n      >\n        <div className={classes.selection}>\n          {placeholder && typeof placeholder === \"string\" ? (\n            <HvTypography\n              className={cx(classes.placeholder, {\n                [classes.selectionDisabled]: disabled,\n              })}\n              variant=\"body\"\n            >\n              {placeholder}\n            </HvTypography>\n          ) : (\n            placeholder\n          )}\n        </div>\n        <div className={classes.arrowContainer}>\n          {adornment || (\n            <ExpanderComponent\n              iconSize=\"XS\"\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.arrow}\n            />\n          )}\n        </div>\n      </div>\n    );\n\n    const headerElement =\n      component && React.isValidElement(component)\n        ? React.cloneElement(component as React.ReactElement, {\n            ref: handleDropdownHeaderRef,\n            ...headerControlArias,\n          })\n        : defaultHeaderElement;\n\n    const containerComponent = (() => {\n      /**\n       *  Handle keyboard inside children container.\n       */\n      const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n        if (isKey(event, \"Esc\")) {\n          handleToggle(event);\n        }\n        if (isKey(event, \"Tab\") && !event.shiftKey) {\n          const focusList = getFirstAndLastFocus(popperElement);\n          if (document.activeElement === focusList?.last) {\n            event.preventDefault();\n            focusList?.first?.focus();\n          }\n        }\n      };\n\n      const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n        const isButtonClick = referenceElement?.contains(event.target as any);\n        if (!isButtonClick) {\n          onClickOutside?.(event);\n          setIsOpen(false);\n          onToggle?.(event, false);\n        }\n      };\n\n      const container = (\n        <div\n          ref={setPopperElement}\n          className={classes.container}\n          style={popperStyles.popper}\n          {...attributes.popper}\n        >\n          <ClickAwayListener onClickAway={handleOutside}>\n            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n            <div onKeyDown={handleContainerKeyDown}>\n              {popperPlacement.includes(\"bottom\") && (\n                <div\n                  style={{ width: extensionWidth }}\n                  className={cx(classes.inputExtensionOpen, {\n                    [classes.inputExtensionLeftPosition]:\n                      popperPlacement.includes(\"end\"),\n                  })}\n                />\n              )}\n              <BaseDropdownContext.Provider value={popperMaxSize}>\n                <div\n                  id={containerId}\n                  className={cx(classes.panel, {\n                    [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n                    [classes.panelOpenedDown]:\n                      popperPlacement.includes(\"bottom\"),\n                  })}\n                >\n                  {children}\n                </div>\n              </BaseDropdownContext.Provider>\n              {popperPlacement.includes(\"top\") && (\n                <div\n                  style={{ width: extensionWidth }}\n                  className={cx(\n                    classes.inputExtensionOpen,\n                    classes.inputExtensionOpenShadow,\n                    {\n                      [classes.inputExtensionFloatRight]:\n                        popperPlacement.includes(\"end\"),\n                      [classes.inputExtensionFloatLeft]:\n                        popperPlacement.includes(\"start\"),\n                    }\n                  )}\n                />\n              )}\n            </div>\n          </ClickAwayListener>\n        </div>\n      );\n\n      if (disablePortal) return container;\n\n      return createPortal(\n        container,\n        document.getElementById(rootId || \"\") || document.body\n      );\n    })();\n\n    return (\n      <div className={classes.root}>\n        <div\n          ref={ref}\n          id={id}\n          className={cx(\n            classes.anchor,\n            { [classes.rootDisabled]: disabled },\n            className\n          )}\n          {...(!readOnly && {\n            onKeyDown: handleToggle,\n            onClick: handleToggle,\n          })}\n          {...(ariaRole && {\n            role: ariaRole,\n            ...headerAriaLabels,\n            ...headerControlArias,\n          })}\n          // Removes the element from the navigation sequence for keyboard focus\n          tabIndex={-1}\n          {...others}\n        >\n          {headerElement}\n        </div>\n        {isOpen && containerComponent}\n      </div>\n    );\n  }\n);\n"],"names":["React"],"mappings":"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"}

package/dist/esm/BaseDropdown/BaseDropdown.styles.js

@@ -0,0 +1,120 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
+  root: { width: "100%", position: "relative" },
+  rootDisabled: {
+    cursor: "not-allowed",
+    "&:focus": {
+      outline: "none"
+    }
+  },
+  anchor: { display: "inline-block", width: "100%" },
+  container: { zIndex: theme.zIndices.popover, width: "auto" },
+  header: {
+    cursor: "pointer",
+    userSelect: "none",
+    position: "relative",
+    background: theme.colors.atmo1,
+    boxSizing: "border-box",
+    border: `1px solid ${theme.colors.secondary}`,
+    borderRadius: theme.radii.base,
+    "&:hover": {
+      border: `1px solid ${theme.colors.primary}`
+    },
+    "&:focus": {
+      outline: "none"
+    },
+    "&:focus-visible": {
+      ...outlineStyles,
+      border: `1px solid ${theme.colors.primary}`
+    }
+  },
+  headerOpen: {
+    border: `1px solid ${theme.colors.secondary}`,
+    "&:hover": {
+      border: `1px solid ${theme.colors.secondary}`
+    }
+  },
+  headerOpenUp: {
+    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`
+  },
+  headerOpenDown: {
+    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`
+  },
+  headerDisabled: {
+    cursor: "not-allowed",
+    pointerEvents: "none",
+    border: `1px solid ${theme.colors.secondary_60}`,
+    background: theme.colors.atmo2,
+    "&:hover": {
+      border: `1px solid ${theme.colors.secondary_60}`
+    }
+  },
+  headerReadOnly: {
+    cursor: "not-allowed",
+    pointerEvents: "none",
+    border: `1px solid ${theme.colors.secondary_60}`,
+    background: theme.colors.atmo2,
+    userSelect: "text",
+    "&:focus-visible": {
+      outline: "none",
+      border: `1px solid ${theme.colors.secondary_60}`
+    }
+  },
+  arrowContainer: {
+    position: "absolute",
+    pointerEvents: "none",
+    top: -1,
+    right: -1
+  },
+  arrow: {},
+  selection: {
+    display: "flex",
+    alignItems: "center",
+    height: "30px",
+    boxSizing: "border-box",
+    paddingLeft: theme.space.xs
+  },
+  placeholder: {
+    display: "block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    ...theme.typography.body,
+    color: theme.colors.secondary_80
+  },
+  selectionDisabled: { color: theme.colors.secondary_60 },
+  panel: {
+    position: "relative",
+    backgroundColor: theme.colors.atmo1,
+    border: `1px solid ${theme.colors.secondary}`
+  },
+  panelOpenedUp: {
+    top: 1,
+    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`
+  },
+  panelOpenedDown: {
+    top: -1,
+    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`
+  },
+  inputExtensionOpen: {
+    height: "0px",
+    backgroundColor: theme.colors.atmo1,
+    borderTop: "none",
+    borderBottom: "none",
+    borderRight: `1px solid ${theme.colors.secondary}`,
+    borderLeft: `1px solid ${theme.colors.secondary}`
+  },
+  inputExtensionLeftPosition: { marginLeft: "auto" },
+  inputExtensionOpenShadow: {
+    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
+  },
+  inputExtensionFloatRight: { float: "right" },
+  inputExtensionFloatLeft: { float: "left" }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=BaseDropdown.styles.js.map

package/dist/esm/BaseDropdown/BaseDropdown.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.secondary}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.primary}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.colors.secondary}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n  },\n  placeholder: {\n    display: \"block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    color: theme.colors.secondary_80,\n  },\n  selectionDisabled: { color: theme.colors.secondary_60 },\n  panel: {\n    position: \"relative\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.secondary}`,\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseDropdown/BaseDropdownContext/BaseDropdownContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseDropdownContext.js","sources":["../../../../src/BaseDropdown/BaseDropdownContext/BaseDropdownContext.tsx"],"sourcesContent":["import React from \"react\";\n\nconst BaseDropdownContext = React.createContext<{\n  width?: number;\n  height?: number;\n}>({});\n\nBaseDropdownContext.displayName = \"BaseDropdownContext\";\n\nexport default BaseDropdownContext;\n"],"names":["React"],"mappings":";AAEA,MAAM,sBAAsBA,eAAM,cAG/B,CAAA,CAAE;AAEL,oBAAoB,cAAc;AAElC,MAAA,wBAAe;"}

package/dist/esm/BaseInput/BaseInput.js

@@ -0,0 +1,138 @@
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { useContext } from "react";
+import MuiInput from "@mui/material/Input";
+import { css, Global } from "@emotion/react";
+import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./BaseInput.styles.js";
+import { staticClasses } from "./BaseInput.styles.js";
+import { buildFormElementPropsFromContext, buildAriaPropsFromContext } from "../Forms/FormElement/utils/FormUtils.js";
+import { HvFormElementContext } from "../Forms/FormElement/context/FormElementContext.js";
+import { HvFormElementDescriptorsContext } from "../Forms/FormElement/context/FormElementDescriptorsContext.js";
+const baseInputStyles = css({
+  "input:-webkit-autofill": {
+    WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,
+    WebkitTextFillColor: theme.colors.secondary
+  },
+  // Clears number input up/down arrows in Chrome and Firefox
+  "input::-webkit-outer-spin-button,input::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "input[type=number]": {
+    MozAppearance: "textfield"
+  },
+  // Clears time input clock in Chrome
+  "input::-webkit-calendar-picker-indicator": {
+    display: "none"
+  },
+  // Clears search input clear button in Chrome
+  "input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration": {
+    display: "none"
+  }
+});
+const HvBaseInput = (props) => {
+  const {
+    classes: classesProp,
+    className = "",
+    id,
+    name,
+    value,
+    defaultValue,
+    required,
+    readOnly,
+    disabled,
+    onChange,
+    type = "text",
+    placeholder,
+    multiline = false,
+    resizable = false,
+    invalid = false,
+    inputRef,
+    inputProps = {},
+    ...others
+  } = useDefaultProps("HvBaseInput", props);
+  const { classes, cx } = useClasses(classesProp);
+  const formElementContext = useContext(HvFormElementContext);
+  const formElementProps = buildFormElementPropsFromContext(
+    name,
+    disabled,
+    readOnly,
+    required,
+    formElementContext
+  );
+  const localInvalid = invalid || formElementProps.status === "invalid";
+  const formElementDescriptorsContext = useContext(
+    HvFormElementDescriptorsContext
+  );
+  const ariaProps = buildAriaPropsFromContext(
+    inputProps,
+    formElementDescriptorsContext,
+    localInvalid,
+    id
+  );
+  const onChangeHandler = (event) => {
+    onChange?.(event, event.target.value);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Global, { styles: baseInputStyles }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(classes.root, className, {
+          [classes.disabled]: formElementProps.disabled,
+          [classes.invalid]: localInvalid,
+          [classes.resizable]: multiline && resizable,
+          [classes.readOnly]: formElementProps.readOnly
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            MuiInput,
+            {
+              id,
+              name: formElementProps.name,
+              value,
+              defaultValue,
+              type,
+              placeholder,
+              readOnly: !!formElementProps.readOnly,
+              disabled: formElementProps.disabled,
+              onChange: onChangeHandler,
+              className: cx({
+                [classes.inputRootInvalid]: localInvalid,
+                [classes.inputRootReadOnly]: formElementProps.readOnly
+              }),
+              classes: {
+                root: classes.inputRoot,
+                focused: classes.inputRootFocused,
+                disabled: classes.inputRootDisabled,
+                multiline: classes.inputRootMultiline,
+                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,
+              multiline,
+              rows: 10,
+              ...others
+            }
+          ),
+          !multiline && /* @__PURE__ */ jsx("div", { role: "presentation", className: classes.inputBorderContainer })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  HvBaseInput,
+  staticClasses as baseInputClasses
+};
+//# sourceMappingURL=BaseInput.js.map