@hitachivantara/uikit-react-core 5.104.0 → 5.104.1

package/dist/cjs/packages/core/src/Section/Section.cjs

@@ -1,108 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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 = a.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 = a.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/packages/core/src/Select/Option.cjs

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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 = a.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/packages/core/src/Select/OptionGroup.cjs

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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 = a.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/packages/core/src/Select/Select.cjs

@@ -1,236 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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] = a.useState("bottom-start");
-  const buttonRef = a.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/packages/core/src/SelectionList/SelectionList.cjs

@@ -1,223 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const a = 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 = a.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 = a.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] = a.useMemo(() => {
-    const childValues = [];
-    const childSelectedState = [];
-    a.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 = a.useRef(void 0);
-  const listRef = a.useRef(null);
-  const listForkedRef = utils.useForkRef(ref, listRef);
-  a.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 = a.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 = a.useMemo(() => {
-    return a.Children.map(children, (child, i) => {
-      const childIsSelected = selectedState[i];
-      return a.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;