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

package/dist/cjs/Select/Select.cjs

@@ -1,236 +0,0 @@
-"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/Select/Select.styles.cjs

@@ -1,43 +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 { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect", {
-  root: {
-    position: "relative",
-    "&$disabled,&$readOnly": {
-      pointerEvents: "none"
-    }
-  },
-  disabled: {},
-  readOnly: {},
-  invalid: {},
-  labelContainer: {},
-  label: {},
-  description: {},
-  select: {
-    "&&$invalid": { borderColor: uikitStyles.theme.form.errorColor }
-  },
-  popper: {
-    zIndex: uikitStyles.theme.zIndices.popover
-  },
-  panel: {
-    maxHeight: 400,
-    border: `1px solid ${uikitStyles.theme.colors.text}`,
-    marginTop: -1,
-    marginBottom: -1,
-    // panel styles
-    position: "relative",
-    padding: uikitStyles.theme.space.xs,
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    overflowY: "auto",
-    borderRadius: "inherit"
-  },
-  /** @deprecated leverage `[data-popper-placement]` instead */
-  panelOpenedUp: {},
-  /** @deprecated leverage `[data-popper-placement]` instead */
-  panelOpenedDown: {},
-  error: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/SelectionList/SelectionList.cjs

@@ -1,223 +0,0 @@
-"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;

package/dist/cjs/SelectionList/SelectionList.styles.cjs

@@ -1,38 +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 { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelectionList", {
-  root: { display: "inline-block", padding: 0, margin: 0 },
-  error: { width: "100%", float: "left", clear: "both" },
-  listbox: {
-    display: "flex",
-    float: "left",
-    clear: "both",
-    width: "100%",
-    paddingBottom: uikitStyles.theme.space.xs
-  },
-  label: {},
-  description: { float: "left" },
-  horizontal: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    marginLeft: -uikitStyles.theme.space.sm,
-    "&>*": {
-      marginLeft: uikitStyles.theme.space.sm
-    }
-  },
-  vertical: {
-    flexDirection: "column",
-    // Prevent the focus ring to be hidden by sibling hover background
-    "&>*": {
-      zIndex: 0
-    },
-    "&>*:focus-within": {
-      zIndex: 1
-    }
-  },
-  invalid: { borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}` }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/SimpleGrid/SimpleGrid.cjs

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const SimpleGrid_styles = require("./SimpleGrid.styles.cjs");
-const HvSimpleGrid = (props) => {
-  const {
-    children,
-    breakpoints,
-    spacing,
-    cols,
-    className,
-    classes: classesProp,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvSimpleGrid", props);
-  const { classes, cx, css } = SimpleGrid_styles.useClasses(classesProp);
-  const containerStyle = SimpleGrid_styles.getContainerStyle(breakpoints, spacing, cols);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cx(css(containerStyle), classes.root, className),
-      ...others,
-      children
-    }
-  );
-};
-exports.simpleGridClasses = SimpleGrid_styles.staticClasses;
-exports.HvSimpleGrid = HvSimpleGrid;

package/dist/cjs/SimpleGrid/SimpleGrid.styles.cjs

@@ -1,45 +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 { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSimpleGrid", {
-  root: {
-    display: "grid",
-    boxSizing: "border-box",
-    gridTemplateColumns: `repeat(var(--cols, 1), minmax(0, 1fr))`
-  }
-});
-function getSize(size) {
-  return size || Number(uikitStyles.theme.breakpoints.values.md);
-}
-function getSortedBreakpoints(breakpoints) {
-  if (breakpoints.length === 0) {
-    return breakpoints;
-  }
-  const property = "maxWidth" in breakpoints[0] ? "maxWidth" : "minWidth";
-  const sorted = [...breakpoints].sort(
-    (a, b) => getSize(b[property]) - getSize(a[property])
-  );
-  return property === "minWidth" ? sorted.reverse() : sorted;
-}
-const getContainerStyle = (breakpoints, spacing = "sm", cols = 1) => {
-  return {
-    // TODO: review/document precedence of cols/spacing vs breakpoints[cols/spacing]
-    "--cols": cols,
-    gap: uikitStyles.theme.space[spacing],
-    ...breakpoints && getSortedBreakpoints(breakpoints).reduce((acc, breakpoint) => {
-      const property = "maxWidth" in breakpoint ? "max-width" : "min-width";
-      const breakpointSize = getSize(
-        property === "max-width" ? breakpoint.maxWidth : breakpoint.minWidth
-      );
-      acc[`@media (${property}: ${breakpointSize}px)`] = {
-        ["--cols"]: breakpoint.cols,
-        gap: uikitStyles.theme.space[breakpoint.spacing || spacing]
-      };
-      return acc;
-    }, {})
-  };
-};
-exports.getContainerStyle = getContainerStyle;
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Skeleton/Skeleton.cjs

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const Skeleton_styles = require("./Skeleton.styles.cjs");
-const HvSkeleton = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    children,
-    hidden = false,
-    variant = "text",
-    animation = "pulse",
-    backgroundImage,
-    width,
-    height,
-    style,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvSkeleton", props);
-  const { classes, cx } = Skeleton_styles.useClasses(classesProp);
-  if (hidden) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.content, children });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: cx(
-        classes.root,
-        classes[variant],
-        classes[animation],
-        className
-      ),
-      style: {
-        width,
-        height,
-        ...backgroundImage && {
-          background: `center / contain no-repeat url(${backgroundImage})`
-        },
-        ...style
-      },
-      ...others,
-      children
-    }
-  );
-};
-exports.skeletonClasses = Skeleton_styles.staticClasses;
-exports.HvSkeleton = HvSkeleton;