@hitachivantara/uikit-react-core 5.104.0 → 5.105.0

package/dist/cjs/Section/Section.cjs

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useExpandable = require("../hooks/useExpandable.cjs");
+const icons = require("../icons.cjs");
+const Section_styles = require("./Section.styles.cjs");
+const Button = require("../Button/Button.cjs");
+const HvSection = React.forwardRef(
+  function HvSection2(props, ref) {
+    const {
+      id,
+      classes: classesProp,
+      className,
+      title,
+      expandable,
+      expanded,
+      expandableHeader,
+      defaultExpanded = true,
+      actions,
+      onToggle,
+      expandButtonProps,
+      raisedHeader,
+      contentRef,
+      children,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvSection", props);
+    const { classes, cx } = Section_styles.useClasses(classesProp);
+    const expandButtonRef = React.useRef(null);
+    const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
+      id,
+      expanded,
+      defaultExpanded
+    });
+    const hasHeader = title || actions || expandable;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        id,
+        className: cx(classes.root, className, {
+          [classes.raisedHeader]: raisedHeader && isOpen
+        }),
+        ...others,
+        children: [
+          hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cx(classes.header, {
+                [classes.headerExpandable]: expandable && expandableHeader
+              }),
+              onClick: () => {
+                if (!expandableHeader) return;
+                expandButtonRef.current?.click();
+              },
+              children: [
+                expandable && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button.HvButton,
+                  {
+                    ref: expandButtonRef,
+                    icon: true,
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      toggleOpen();
+                      onToggle?.(event, !isOpen);
+                    },
+                    "aria-label": isOpen ? "Collapse" : "Expand",
+                    ...buttonProps,
+                    ...expandButtonProps,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
+                  }
+                ),
+                title,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: classes.actions,
+                    onClick: (evt) => {
+                      evt.stopPropagation();
+                    },
+                    children: actions
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: contentRef,
+              hidden: !isOpen,
+              className: cx(classes.content, {
+                [classes.hidden]: expandable && !isOpen,
+                [classes.spaceTop]: !hasHeader,
+                [classes.hasHeader]: hasHeader
+              }),
+              ...expandable && regionProps,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.sectionClasses = Section_styles.staticClasses;
+exports.HvSection = HvSection;

package/dist/cjs/Select/Option.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const useOption = require("@mui/base/useOption");
+const utils = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const generic = require("../types/generic.cjs");
+const focusUtils = require("../utils/focusUtils.cjs");
+const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvOption", {
+  root: {},
+  highlighted: {
+    ...focusUtils.outlineStyles
+  }
+});
+const HvOption = generic.fixedForwardRef(function HvOption2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    disabled = false,
+    label,
+    value,
+    children,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvOption", props);
+  const { classes, cx } = useClasses(classesProp);
+  const optionRef = React.useRef(null);
+  const rootRef = utils.useForkRef(optionRef, ref);
+  const computedLabel = label ?? (typeof children === "string" ? children : optionRef.current?.textContent?.trim());
+  const { getRootProps, selected, highlighted } = useOption.useOption({
+    disabled,
+    label: computedLabel,
+    rootRef,
+    value
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ListItem.HvListItem,
+    {
+      ref,
+      selected,
+      className: cx(classes.root, className, {
+        [classes.highlighted]: highlighted
+      }),
+      ...getRootProps(others),
+      children
+    }
+  );
+});
+exports.HvOption = HvOption;
+exports.optionClasses = staticClasses;

package/dist/cjs/Select/OptionGroup.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const OptionGroup = require("@mui/base/OptionGroup");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvOptionGroup", {
+  root: {
+    listStyle: "none",
+    ...uikitStyles.theme.typography.label
+  }
+});
+const HvOptionGroup = React.forwardRef(
+  function HvOptionGroup2(props, ref) {
+    const {
+      className,
+      classes: classesProp,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvOptionGroup", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      OptionGroup.OptionGroup,
+      {
+        ref,
+        className: cx(classes.root, className),
+        ...others
+      }
+    );
+  }
+);
+exports.HvOptionGroup = HvOptionGroup;
+exports.optionGroupClasses = staticClasses;

package/dist/cjs/Select/Select.cjs

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Popper = require("@mui/base/Popper");
+const useSelect = require("@mui/base/useSelect");
+const utils = require("@mui/material/utils");
+const clsx = require("clsx");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const generic = require("../types/generic.cjs");
+const document = require("../utils/document.cjs");
+const setId = require("../utils/setId.cjs");
+const Option = require("./Option.cjs");
+const Select_styles = require("./Select.styles.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
+const ListContainer = require("../ListContainer/ListContainer.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+function defaultRenderValue(options) {
+  if (Array.isArray(options)) {
+    if (options.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((o) => o.label).join(", ") });
+  }
+  return options?.label ?? null;
+}
+const mergeIds = (...ids) => clsx.clsx(ids) || void 0;
+function renderOptions(options) {
+  return options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Option.HvOption, { ...option, children: option.label }, option.value));
+}
+const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
+  const {
+    children: childrenProp,
+    classes: classesProp,
+    className,
+    id: idProp,
+    size,
+    variant = "secondarySubtle",
+    name,
+    required,
+    disabled: disabledProp,
+    readOnly,
+    label,
+    open: openProp,
+    defaultOpen,
+    multiple,
+    autoComplete,
+    options: optionsProp,
+    variableWidth,
+    value: valueProp,
+    defaultValue,
+    placeholder,
+    inputProps,
+    enablePortal,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    getSerializedValue,
+    onClick,
+    onChange,
+    onOpenChange,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSelect", props);
+  const { classes, cx } = Select_styles.useClasses(classesProp);
+  const { rootId } = uikitReactUtils.useTheme();
+  const [placement, setPlacement] = React.useState("bottom-start");
+  const buttonRef = React.useRef(null);
+  const handleButtonRef = utils.useForkRef(ref, buttonRef);
+  const {
+    contextValue,
+    disabled,
+    getButtonProps,
+    getListboxProps,
+    getHiddenInputProps,
+    getOptionMetadata,
+    value,
+    open
+  } = useSelect.useSelect({
+    componentName: "HvSelect",
+    name,
+    required,
+    disabled: disabledProp,
+    multiple,
+    open: openProp,
+    defaultOpen,
+    value: valueProp,
+    defaultValue,
+    options: optionsProp,
+    buttonRef: handleButtonRef,
+    getSerializedValue,
+    onChange,
+    onOpenChange: handleOpenChange
+  });
+  const id = useUniqueId.useUniqueId(idProp);
+  const labelId = useUniqueId.useUniqueId(setId.setId(idProp, "label"));
+  const descriptionId = useUniqueId.useUniqueId(setId.setId(idProp, "description"));
+  const errorMessageId = useUniqueId.useUniqueId(setId.setId(idProp, "error"));
+  const [validationMessage] = utils.useControlled({
+    name: "HvSelect.statusMessage",
+    controlled: statusMessage,
+    default: "Required"
+  });
+  const [validationState, setValidationState] = utils.useControlled({
+    name: "HvSelect.status",
+    controlled: status,
+    default: "standBy"
+  });
+  function handleOpenChange(newOpen) {
+    if (!newOpen) {
+      const hasValue = multiple ? value.length > 0 : !!value;
+      setValidationState(required && !hasValue ? "invalid" : "valid");
+    }
+    onOpenChange?.(newOpen);
+  }
+  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+  const isInvalid = validationState === "invalid";
+  const actualValue = multiple ? value.map((v) => getOptionMetadata(v)).filter((v) => v !== void 0) : getOptionMetadata(value) ?? null;
+  const children = childrenProp ?? renderOptions(optionsProp);
+  const isOpen = open && !!children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormElement.HvFormElement,
+    {
+      name,
+      required,
+      disabled,
+      readOnly,
+      status: validationState,
+      className: cx(classes.root, className, {
+        [classes.readOnly]: readOnly,
+        [classes.disabled]: disabled
+      }),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: id,
+            labelId,
+            descriptionId,
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownButton.HvDropdownButton,
+          {
+            id,
+            open: isOpen,
+            disabled,
+            readOnly,
+            className: cx(classes.select, {
+              [classes.invalid]: validationState === "invalid"
+            }),
+            placement,
+            size,
+            variant,
+            "aria-label": ariaLabel,
+            "aria-labelledby": mergeIds(ariaLabelledBy, { [labelId]: label }),
+            "aria-invalid": isInvalid ? true : void 0,
+            "aria-errormessage": errorMessageId,
+            "aria-describedby": mergeIds(ariaDescribedBy, {
+              [descriptionId]: description
+            }),
+            ...getButtonProps(),
+            children: defaultRenderValue(actualValue) ?? placeholder
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Popper.Popper,
+          {
+            role: "none",
+            open: isOpen,
+            keepMounted: true,
+            disablePortal: !enablePortal,
+            container: enablePortal ? document.getContainerElement(rootId) : void 0,
+            anchorEl: buttonRef.current,
+            className: classes.popper,
+            placement,
+            modifiers: [
+              {
+                enabled: true,
+                phase: "main",
+                fn: ({ state }) => setPlacement(state.placement)
+              }
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ListContainer.HvListContainer,
+              {
+                condensed: true,
+                selectable: true,
+                style: {
+                  width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
+                },
+                className: cx(classes.panel, {
+                  [classes.panelOpenedUp]: placement.includes("top"),
+                  [classes.panelOpenedDown]: placement.includes("bottom")
+                }),
+                ...getListboxProps(),
+                children: /* @__PURE__ */ jsxRuntime.jsx(useSelect.SelectProvider, { value: contextValue, children })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...getHiddenInputProps(),
+            autoComplete,
+            ...inputProps
+          }
+        ),
+        canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+          WarningText.HvWarningText,
+          {
+            id: errorMessageId,
+            disableBorder: true,
+            className: classes.error,
+            children: validationMessage
+          }
+        )
+      ]
+    }
+  );
+});
+exports.selectClasses = Select_styles.staticClasses;
+exports.HvSelect = HvSelect;

package/dist/cjs/SelectionList/SelectionList.cjs

@@ -0,0 +1,223 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const utils = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useControlled = require("../hooks/useControlled.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const multiSelectionEventHandler = require("../utils/multiSelectionEventHandler.cjs");
+const setId = require("../utils/setId.cjs");
+const SelectionList_styles = require("./SelectionList.styles.cjs");
+const Label = require("../FormElement/Label/Label.cjs");
+const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
+const ListContainer = require("../ListContainer/ListContainer.cjs");
+const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const getValueFromSelectedChildren = (children, multiple) => {
+  const selectedValues = React.Children.toArray(children).map((child) => {
+    const childIsControlled = child?.props?.selected !== void 0;
+    const childIsSelected = child && childIsControlled ? child.props?.selected : child.props?.defaultSelected;
+    return childIsSelected ? child?.props.value : void 0;
+  }).filter((v) => v !== void 0);
+  return multiple ? selectedValues : selectedValues?.[0];
+};
+const HvSelectionList = React.forwardRef(function HvSelectionList2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    children,
+    name,
+    value: valueProp,
+    defaultValue,
+    required,
+    readOnly,
+    disabled,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    onChange,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    orientation = "vertical",
+    multiple = false,
+    singleSelectionToggle = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSelectionList", props);
+  const { classes, cx } = SelectionList_styles.useClasses(classesProp);
+  const elementId = useUniqueId.useUniqueId(id);
+  const [value, setValue] = useControlled.useControlled(
+    valueProp,
+    defaultValue !== void 0 ? defaultValue : (
+      // when uncontrolled and no default value is given,
+      // extract the initial selected values from the children own state
+      () => getValueFromSelectedChildren(children, multiple)
+    )
+  );
+  const [validationState, setValidationState] = useControlled.useControlled(
+    status,
+    "standBy"
+  );
+  const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
+  const [allValues, selectedState] = React.useMemo(() => {
+    const childValues = [];
+    const childSelectedState = [];
+    React.Children.toArray(children).forEach((child, i) => {
+      const childValue = child?.props?.value;
+      const childIsSelected = multiple ? value.indexOf(childValue) !== -1 : value === childValue;
+      childValues[i] = childValue;
+      childSelectedState[i] = childIsSelected;
+    });
+    return [childValues, childSelectedState];
+  }, [children, multiple, value]);
+  const selectionAnchor = React.useRef(void 0);
+  const listRef = React.useRef(null);
+  const listForkedRef = utils.useForkRef(ref, listRef);
+  React.useEffect(() => {
+    const handleMeta = (event) => {
+      const tempArray = [];
+      if (keyboardUtils.isKey(event, "ArrowUp") && event.shiftKey && listRef.current.contains(event.target) || keyboardUtils.isKey(event, "ArrowDown") && event.shiftKey && listRef.current.contains(event.target)) {
+        selectedState.forEach((isSelected, i) => {
+          if (i === event.target.value - 1) {
+            if (!isSelected) {
+              tempArray.push(allValues[i]);
+            }
+          } else if (isSelected) {
+            tempArray.push(allValues[i]);
+          }
+        });
+        setValue(tempArray);
+      }
+    };
+    window.addEventListener("keyup", handleMeta);
+    return () => {
+      window.removeEventListener("keyup", handleMeta);
+    };
+  }, [allValues, selectedState, setValue]);
+  const onChildChangeInterceptor = React.useCallback(
+    (index, childOnClick, evt) => {
+      childOnClick?.(evt);
+      if (!readOnly && !disabled) {
+        let newValue;
+        if (multiple) {
+          newValue = multiSelectionEventHandler.multiSelectionEventHandler(
+            evt,
+            index,
+            selectionAnchor,
+            allValues,
+            selectedState,
+            void 0
+          );
+        } else {
+          newValue = singleSelectionToggle && selectedState[index] ? null : allValues[index];
+        }
+        onChange?.(evt, newValue);
+        setValue(() => {
+          if (required && newValue.length === 0) {
+            setValidationState("invalid");
+          } else {
+            setValidationState("valid");
+          }
+          return newValue;
+        });
+      }
+    },
+    [
+      allValues,
+      disabled,
+      multiple,
+      onChange,
+      readOnly,
+      required,
+      selectedState,
+      setValidationState,
+      setValue,
+      singleSelectionToggle,
+      selectionAnchor
+    ]
+  );
+  const modifiedChildren = React.useMemo(() => {
+    return React.Children.map(children, (child, i) => {
+      const childIsSelected = selectedState[i];
+      return React.cloneElement(child, {
+        role: "option",
+        selected: childIsSelected,
+        onClick: (evt) => onChildChangeInterceptor(i, child?.props?.onClick, evt),
+        disabled: disabled || child?.props?.disabled
+      });
+    });
+  }, [children, disabled, onChildChangeInterceptor, selectedState]);
+  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+  const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
+  const listId = label && setId.setId(elementId, "listbox") || "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormElement.HvFormElement,
+    {
+      id,
+      name,
+      status: validationState,
+      disabled,
+      required,
+      readOnly,
+      className: cx(classes.root, className),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          Label.HvLabel,
+          {
+            showGutter: true,
+            id: setId.setId(elementId, "label"),
+            label,
+            className: classes.label
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          InfoMessage.HvInfoMessage,
+          {
+            id: setId.setId(elementId, "description"),
+            className: classes.description,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ListContainer.HvListContainer,
+          {
+            id: listId,
+            interactive: true,
+            condensed: true,
+            role: "listbox",
+            "aria-multiselectable": multiple || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+            "aria-invalid": validationState === "invalid" ? true : void 0,
+            "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
+            "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+            className: cx(classes.listbox, {
+              [classes.vertical]: orientation === "vertical",
+              [classes.horizontal]: orientation === "horizontal",
+              [classes.invalid]: validationState === "invalid"
+            }),
+            ref: listForkedRef,
+            ...others,
+            children: modifiedChildren
+          }
+        ),
+        canShowError && /* @__PURE__ */ jsxRuntime.jsx(
+          WarningText.HvWarningText,
+          {
+            id: setId.setId(elementId, "error"),
+            disableBorder: true,
+            className: classes.error,
+            children: validationMessage
+          }
+        )
+      ]
+    }
+  );
+});
+exports.selectionListClasses = SelectionList_styles.staticClasses;
+exports.HvSelectionList = HvSelectionList;