@hitachivantara/uikit-react-core 5.50.1 → 5.51.0

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -12,8 +12,8 @@ const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
 const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const Button = require("../Button/Button.cjs");
-const Panel = require("../Panel/Panel.cjs");
 const List = require("../List/List.cjs");
+const Panel = require("../Panel/Panel.cjs");
 const HvDropDownMenu = (props) => {
   const {
     id: idProp,

package/dist/cjs/Select/Option.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const useOption = require("@mui/base/useOption");
+const utils = require("@mui/material/utils");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const generic = require("../types/generic.cjs");
+const classes = require("../utils/classes.cjs");
+const focusUtils = require("../utils/focusUtils.cjs");
+const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvOption", {
+  root: {},
+  highlighted: {
+    ...focusUtils.outlineStyles
+  }
+});
+const HvOption = generic.fixedForwardRef(function HvOption2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    disabled = false,
+    label,
+    value,
+    children,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvOption", props);
+  const { classes: classes2, 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(classes2.root, className, {
+        [classes2.highlighted]: highlighted
+      }),
+      ...getRootProps(),
+      ...others,
+      children
+    }
+  );
+});
+exports.HvOption = HvOption;
+exports.optionClasses = staticClasses;

package/dist/cjs/Select/Option.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.cjs","sources":["../../../src/Select/Option.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useOption } from \"@mui/base/useOption\";\nimport { OptionOwnProps } from \"@mui/base/Option\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvListItem, HvListItemProps } from \"../ListContainer\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { ExtractNames, createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvOption\", {\n  root: {},\n  highlighted: {\n    ...outlineStyles,\n  },\n});\n\nexport { staticClasses as optionClasses };\n\nexport type HvOptionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOptionProps<OptionValue extends {}>\n  extends Omit<HvListItemProps, \"value\" | \"disabled\">,\n    Pick<OptionOwnProps<OptionValue>, \"disabled\" | \"label\" | \"value\"> {\n  classes?: HvOptionClasses;\n}\n\nexport const HvOption = fixedForwardRef(function HvOption<\n  OptionValue extends {}\n>(props: HvOptionProps<OptionValue>, ref: React.Ref<HTMLLIElement>) {\n  const {\n    classes: classesProp,\n    className,\n    disabled = false,\n    label,\n    value,\n    children,\n    ...others\n  } = useDefaultProps(\"HvOption\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const optionRef = useRef<HTMLElement>(null);\n  const rootRef = useForkRef(optionRef, ref);\n\n  const computedLabel =\n    label ??\n    (typeof children === \"string\"\n      ? children\n      : optionRef.current?.textContent?.trim());\n\n  const { getRootProps, selected, highlighted } = useOption({\n    disabled,\n    label: computedLabel,\n    rootRef,\n    value,\n  });\n\n  return (\n    <HvListItem\n      ref={ref}\n      selected={selected}\n      className={cx(classes.root, className, {\n        [classes.highlighted]: highlighted,\n      })}\n      {...getRootProps()}\n      {...others}\n    >\n      {children}\n    </HvListItem>\n  );\n});\n"],"names":["createClasses","outlineStyles","fixedForwardRef","HvOption","useDefaultProps","classes","useRef","useForkRef","useOption","jsx","HvListItem"],"mappings":";;;;;;;;;;;AAWA,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,YAAY;AAAA,EAC9D,MAAM,CAAC;AAAA,EACP,aAAa;AAAA,IACX,GAAGC,WAAA;AAAA,EACL;AACF,CAAC;AAYM,MAAM,WAAWC,QAAAA,gBAAgB,SAASC,UAE/C,OAAmC,KAA+B;AAC5D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,YAAY,KAAK;AACrC,QAAM,EAAE,SAAAC,UAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAYC,aAAoB,IAAI;AACpC,QAAA,UAAUC,MAAAA,WAAW,WAAW,GAAG;AAEnC,QAAA,gBACJ,UACC,OAAO,aAAa,WACjB,WACA,UAAU,SAAS,aAAa,KAAK;AAE3C,QAAM,EAAE,cAAc,UAAU,YAAA,IAAgBC,UAAAA,UAAU;AAAA,IACxD;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAAC,2BAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAGL,SAAQ,MAAM,WAAW;AAAA,QACrC,CAACA,SAAQ,WAAW,GAAG;AAAA,MAAA,CACxB;AAAA,MACA,GAAG,aAAa;AAAA,MAChB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;;;"}

package/dist/cjs/Select/OptionGroup.cjs

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

package/dist/cjs/Select/OptionGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGroup.cjs","sources":["../../../src/Select/OptionGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { OptionGroup, OptionGroupProps } from \"@mui/base/OptionGroup\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { ExtractNames, createClasses } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvOptionGroup\", {\n  root: {\n    listStyle: \"none\",\n    ...theme.typography.label,\n  },\n});\n\nexport { staticClasses as optionGroupClasses };\n\nexport type HvOptionGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOptionGroupProps extends OptionGroupProps {\n  classes?: HvOptionGroupClasses;\n}\n\nexport const HvOptionGroup = forwardRef<HTMLLIElement, HvOptionGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvOptionGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    return (\n      <OptionGroup\n        ref={ref}\n        className={cx(classes.root, className)}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["createClasses","theme","forwardRef","useDefaultProps","classes","jsx","OptionGroup"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,iBAAiB;AAAA,EACnE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,GAAGC,YAAAA,MAAM,WAAW;AAAA,EACtB;AACF,CAAC;AAUM,MAAM,gBAAgBC,MAAA;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAAC,UAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAAC,2BAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAGF,SAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;;;"}

package/dist/cjs/Select/Select.cjs

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const clsx = require("clsx");
+const useSelect = require("@mui/base/useSelect");
+const utils = require("@mui/material/utils");
+const Popper = require("@mui/base/Popper");
+const generic = require("../types/generic.cjs");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const Select_styles = require("./Select.styles.cjs");
+const setId = require("../utils/setId.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const SelectButton = require("./SelectButton.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
+const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const ListContainer = require("../ListContainer/ListContainer.cjs");
+const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const clsx__default = /* @__PURE__ */ _interopDefault(clsx);
+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__default.default(ids) || void 0;
+const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
+  const {
+    children,
+    classes: classesProp,
+    className,
+    id: idProp,
+    name,
+    required,
+    disabled: disabledProp,
+    readOnly,
+    label,
+    open: openProp,
+    defaultOpen,
+    multiple,
+    autoComplete,
+    options: optionsProp,
+    variableWidth,
+    value: valueProp,
+    defaultValue,
+    placeholder,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    getSerializedValue,
+    onClick,
+    onChange,
+    onOpenChange,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvSelect", props);
+  const { classes, cx } = Select_styles.useClasses(classesProp);
+  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 isOpen = open && !!children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormElement.HvFormElement,
+    {
+      name,
+      required,
+      disabled,
+      readOnly,
+      status: validationState,
+      className: cx(classes.root, className, {
+        [classes.disabled]: disabled,
+        [classes.readOnly]: readOnly
+      }),
+      ...others,
+      children: [
+        (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            Label.HvLabel,
+            {
+              id: labelId,
+              htmlFor: id,
+              label,
+              className: classes.label
+            }
+          ),
+          description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: descriptionId, className: classes.description, children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectButton.HvSelectButton,
+          {
+            id,
+            open: isOpen,
+            disabled,
+            readOnly,
+            className: cx(classes.select, {
+              [classes.invalid]: validationState === "invalid"
+            }),
+            placement,
+            "aria-label": ariaLabel,
+            "aria-labelledby": mergeIds(label && labelId, ariaLabelledBy),
+            "aria-invalid": isInvalid ? true : void 0,
+            "aria-errormessage": errorMessageId,
+            "aria-describedby": mergeIds(
+              description && descriptionId,
+              ariaDescribedBy
+            ),
+            ...getButtonProps(),
+            children: defaultRenderValue(actualValue) ?? placeholder
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Popper.Popper,
+          {
+            open: isOpen,
+            keepMounted: true,
+            disablePortal: true,
+            anchorEl: buttonRef.current,
+            className: classes.popper,
+            placement,
+            modifiers: [
+              {
+                enabled: true,
+                phase: "main",
+                fn: ({ state }) => setPlacement(state.placement)
+              }
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Panel.HvPanel,
+              {
+                style: {
+                  width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
+                },
+                className: cx(classes.panel, className, {
+                  [classes.panelOpenedUp]: placement.includes("top"),
+                  [classes.panelOpenedDown]: placement.includes("bottom")
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(useSelect.SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(ListContainer.HvListContainer, { condensed: true, selectable: true, ...getListboxProps(), children }) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { ...getHiddenInputProps(), autoComplete }),
+        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.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":["../../../src/Select/Select.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport React, { useRef, useState } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport clsx from \"clsx\";\n\nimport {\n  SelectProvider,\n  UseSelectParameters,\n  useSelect,\n} from \"@mui/base/useSelect\";\nimport { useControlled, useForkRef } from \"@mui/material/utils\";\nimport { Popper } from \"@mui/base/Popper\";\nimport { SelectOption } from \"@mui/base/useOption\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { staticClasses, useClasses } from \"./Select.styles\";\nimport { setId } from \"../utils/setId\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvPanel } from \"../Panel\";\nimport { HvListContainer } from \"../ListContainer\";\nimport { HvSelectButton } from \"./SelectButton\";\n\nfunction defaultRenderValue<Value>(\n  options: SelectOption<Value> | SelectOption<Value>[] | null\n) {\n  if (Array.isArray(options)) {\n    if (options.length === 0) return null;\n    return <>{options.map((o) => o.label).join(\", \")}</>;\n  }\n\n  return options?.label ?? null;\n}\n\nconst mergeIds = (...ids: clsx.ClassValue[]) => clsx(ids) || undefined;\n\nexport { staticClasses as selectClasses };\n\nexport type HvSelectClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectProps<\n  OptionValue extends {},\n  Multiple extends boolean = false\n> extends Omit<HvFormElementProps, \"value\" | \"defaultValue\" | \"onChange\">,\n    Pick<\n      UseSelectParameters<OptionValue, Multiple>,\n      | \"name\"\n      | \"required\"\n      | \"disabled\"\n      | \"multiple\"\n      | \"open\"\n      | \"defaultOpen\"\n      | \"value\"\n      | \"defaultValue\"\n      | \"buttonRef\"\n      | \"options\"\n      | \"getSerializedValue\"\n      | \"onChange\"\n      | \"onOpenChange\"\n    > {\n  classes?: HvSelectClasses;\n  placeholder?: React.ReactNode;\n  autoComplete?: string;\n  /** Whether the width of the select panel can vary independently. */\n  variableWidth?: boolean;\n}\n\n/**\n * The `HvSelect` component is a form control element that allows selection from a list of options.\n *\n * It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.\n *\n * @example\n * <HvSelect name=\"pets\">\n *   <HvOption value=\"dog\">Dog</HvOption>\n *   <HvOption value=\"cat\">Cat</HvOption>\n * </HvSelect>\n * */\nexport const HvSelect = fixedForwardRef(function HvSelect<\n  OptionValue extends {},\n  Multiple extends boolean\n>(\n  props: HvSelectProps<OptionValue, Multiple>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const {\n    children,\n    classes: classesProp,\n    className,\n    id: idProp,\n    name,\n    required,\n    disabled: disabledProp,\n    readOnly,\n    label,\n    open: openProp,\n    defaultOpen,\n    multiple,\n    autoComplete,\n    options: optionsProp,\n    variableWidth,\n    value: valueProp,\n    defaultValue,\n    placeholder,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    getSerializedValue,\n    onClick,\n    onChange,\n    onOpenChange,\n    ...others\n  } = useDefaultProps(\"HvSelect\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [placement, setPlacement] = useState<Placement>(\"bottom-start\");\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleButtonRef = useForkRef(ref, buttonRef);\n\n  const {\n    contextValue,\n    disabled,\n    getButtonProps,\n    getListboxProps,\n    getHiddenInputProps,\n    getOptionMetadata,\n    value,\n    open,\n  } = useSelect<OptionValue, Multiple>({\n    componentName: \"HvSelect\",\n    name,\n    required,\n    disabled: disabledProp,\n    multiple,\n    open: openProp,\n    defaultOpen,\n    value: valueProp,\n    defaultValue,\n    options: optionsProp,\n    buttonRef: handleButtonRef,\n    getSerializedValue,\n    onChange,\n    onOpenChange: handleOpenChange,\n  });\n\n  const id = useUniqueId(idProp);\n  const labelId = useUniqueId(setId(idProp, \"label\"));\n  const descriptionId = useUniqueId(setId(idProp, \"description\"));\n  const errorMessageId = useUniqueId(setId(idProp, \"error\"));\n\n  const [validationMessage] = useControlled({\n    name: \"HvSelect.statusMessage\",\n    controlled: statusMessage,\n    default: \"Required\",\n  });\n  const [validationState, setValidationState] = useControlled<HvFormStatus>({\n    name: \"HvSelect.status\",\n    controlled: status,\n    default: \"standBy\",\n  });\n\n  function handleOpenChange(newOpen: boolean) {\n    if (!newOpen) {\n      const hasValue = multiple ? (value as OptionValue[]).length > 0 : !!value;\n      setValidationState(required && !hasValue ? \"invalid\" : \"valid\");\n    }\n    onOpenChange?.(newOpen);\n  }\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isInvalid = validationState === \"invalid\";\n\n  const actualValue = multiple\n    ? (value as OptionValue[])\n        .map((v) => getOptionMetadata(v))\n        .filter((v): v is SelectOption<OptionValue> => v !== undefined)\n    : getOptionMetadata(value as OptionValue) ?? null;\n\n  const isOpen = open && !!children;\n\n  return (\n    <HvFormElement\n      name={name}\n      required={required}\n      disabled={disabled}\n      readOnly={readOnly}\n      status={validationState}\n      className={cx(classes.root, className, {\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      {...others}\n    >\n      {(label || description) && (\n        <div className={classes.labelContainer}>\n          {label && (\n            <HvLabel\n              id={labelId}\n              htmlFor={id}\n              label={label}\n              className={classes.label}\n            />\n          )}\n          {description && (\n            <HvInfoMessage id={descriptionId} className={classes.description}>\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n\n      <HvSelectButton\n        id={id}\n        open={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        className={cx(classes.select, {\n          [classes.invalid]: validationState === \"invalid\",\n        })}\n        placement={placement}\n        aria-label={ariaLabel}\n        aria-labelledby={mergeIds(label && labelId, ariaLabelledBy)}\n        aria-invalid={isInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={mergeIds(\n          description && descriptionId,\n          ariaDescribedBy\n        )}\n        {...getButtonProps()}\n      >\n        {defaultRenderValue(actualValue) ?? placeholder}\n      </HvSelectButton>\n      <Popper\n        open={isOpen}\n        keepMounted\n        disablePortal\n        anchorEl={buttonRef.current}\n        className={classes.popper}\n        placement={placement}\n        modifiers={[\n          {\n            enabled: true,\n            phase: \"main\",\n            fn: ({ state }) => setPlacement(state.placement),\n          },\n        ]}\n      >\n        <HvPanel\n          style={{\n            width: variableWidth\n              ? \"auto\"\n              : (buttonRef.current?.clientWidth || 0) + 2,\n          }}\n          className={cx(classes.panel, className, {\n            [classes.panelOpenedUp]: placement.includes(\"top\"),\n            [classes.panelOpenedDown]: placement.includes(\"bottom\"),\n          })}\n        >\n          <SelectProvider value={contextValue}>\n            <HvListContainer condensed selectable {...getListboxProps()}>\n              {children}\n            </HvListContainer>\n          </SelectProvider>\n        </HvPanel>\n      </Popper>\n\n      <input {...getHiddenInputProps()} autoComplete={autoComplete} />\n\n      {canShowError && (\n        <HvWarningText\n          id={errorMessageId}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["jsx","Fragment","clsx","fixedForwardRef","HvSelect","useDefaultProps","useClasses","useState","useRef","useForkRef","useSelect","useUniqueId","setId","useControlled","jsxs","HvFormElement","HvLabel","HvInfoMessage","HvSelectButton","Popper","HvPanel","SelectProvider","HvListContainer","HvWarningText"],"mappings":"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"}

package/dist/cjs/Select/Select.styles.cjs

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../utils/classes.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvSelect", {
+  root: {
+    position: "relative",
+    "&$disabled,&$readOnly": {
+      pointerEvents: "none"
+    }
+  },
+  disabled: {},
+  readOnly: {},
+  invalid: {
+    border: `1px solid ${uikitStyles.theme.colors.negative}`
+  },
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  label: {
+    display: "block",
+    paddingBottom: 6
+  },
+  description: {},
+  select: {},
+  popper: {
+    zIndex: uikitStyles.theme.zIndices.popover
+  },
+  panel: {
+    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    marginTop: -1,
+    marginBottom: -1
+  },
+  panelOpenedUp: {
+    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`
+  },
+  panelOpenedDown: {
+    borderRadius: `0 0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+  },
+  error: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Select/Select.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.cjs","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n  root: {\n    position: \"relative\",\n    \"&$disabled,&$readOnly\": {\n      pointerEvents: \"none\",\n    },\n  },\n  disabled: {},\n  readOnly: {},\n  invalid: {\n    border: `1px solid ${theme.colors.negative}`,\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    display: \"block\",\n    paddingBottom: 6,\n  },\n  description: {},\n  select: {},\n  popper: {\n    zIndex: theme.zIndices.popover,\n  },\n  panel: {\n    border: `1px solid ${theme.colors.secondary}`,\n    marginTop: -1,\n    marginBottom: -1,\n  },\n  panelOpenedUp: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  error: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,QAAQ,aAAaC,YAAM,MAAA,OAAO,QAAQ;AAAA,EAC5C;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQA,YAAAA,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,QAAQ,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAGA,YAAM,MAAA,MAAM,IAAI,IAAIA,kBAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAOA,YAAAA,MAAM,MAAM,IAAI,IAAIA,YAAA,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAC;AACV,CAAC;;;"}

package/dist/cjs/Select/SelectButton.cjs

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const classes = require("../utils/classes.cjs");
+const Button = require("../Button/Button.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvSelectButton", {
+  root: {
+    width: "100%",
+    minWidth: "unset",
+    userSelect: "none",
+    position: "relative",
+    paddingLeft: uikitStyles.theme.space.xs,
+    justifyContent: "flex-start"
+  },
+  disabled: {},
+  readOnly: {
+    userSelect: "text",
+    backgroundColor: uikitStyles.theme.colors.atmo2
+  },
+  open: {
+    backgroundColor: uikitStyles.theme.colors.atmo1
+  },
+  openUp: {
+    borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+  },
+  openDown: {
+    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
+  },
+  selection: {
+    color: "inherit",
+    flex: 1,
+    textAlign: "start",
+    overflow: "clip visible",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  placeholder: {},
+  arrowContainer: {
+    marginRight: uikitStyles.theme.spacing(-2)
+  },
+  arrow: {
+    transition: "rotate 0.2s ease"
+  }
+});
+const HvSelectButton = React.forwardRef((props, ref) => {
+  const {
+    classes: classesProp,
+    className,
+    open,
+    placement = "bottom",
+    disabled,
+    readOnly,
+    children,
+    adornment,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvSelectButton", props);
+  const { classes: classes2, cx } = useClasses(classesProp);
+  const endIcon = adornment ?? /* @__PURE__ */ jsxRuntime.jsx(
+    uikitReactIcons.DropDownXS,
+    {
+      iconSize: "XS",
+      style: { rotate: open ? "180deg" : void 0 },
+      className: classes2.arrow
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.HvButton,
+    {
+      ref,
+      variant: "secondarySubtle",
+      disabled: disabled || readOnly,
+      className: cx(classes2.root, className, {
+        [classes2.open]: open,
+        [classes2.openUp]: open && placement.includes("top"),
+        [classes2.openDown]: open && placement.includes("bottom"),
+        [classes2.disabled]: disabled,
+        [classes2.readOnly]: readOnly
+      }),
+      classes: { endIcon: classes2.arrowContainer },
+      endIcon,
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.selection, children: children && typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.placeholder, children }) : children })
+    }
+  );
+});
+exports.HvSelectButton = HvSelectButton;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/Select/SelectButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectButton.cjs","sources":["../../../src/Select/SelectButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames, createClasses } from \"../utils/classes\";\nimport { HvButton } from \"../Button\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectButton\", {\n  root: {\n    width: \"100%\",\n    minWidth: \"unset\",\n    userSelect: \"none\",\n    position: \"relative\",\n    paddingLeft: theme.space.xs,\n    justifyContent: \"flex-start\",\n  },\n  disabled: {},\n  readOnly: {\n    userSelect: \"text\",\n    backgroundColor: theme.colors.atmo2,\n  },\n  open: {\n    backgroundColor: theme.colors.atmo1,\n  },\n  openUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  openDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n\n  selection: {\n    color: \"inherit\",\n    flex: 1,\n    textAlign: \"start\",\n\n    overflow: \"clip visible\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholder: {},\n  arrowContainer: {\n    marginRight: theme.spacing(-2),\n  },\n  arrow: {\n    transition: \"rotate 0.2s ease\",\n  },\n});\n\nexport type HvSelectButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSelectButtonProps\n  extends React.HTMLAttributes<HTMLButtonElement> {\n  readOnly?: boolean;\n  open?: boolean;\n  disabled?: boolean;\n  placement?: Placement;\n  adornment?: React.ReactNode;\n  classes?: HvSelectButtonClasses;\n}\n\n/**\n * HvSelect internal header button component\n */\nexport const HvSelectButton = forwardRef<\n  HTMLButtonElement,\n  HvSelectButtonProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    open,\n    placement = \"bottom\",\n    disabled,\n    readOnly,\n    children,\n    adornment,\n    ...others\n  } = useDefaultProps(\"HvSelectButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const endIcon = adornment ?? (\n    <DropDownXS\n      iconSize=\"XS\"\n      style={{ rotate: open ? \"180deg\" : undefined }}\n      className={classes.arrow}\n    />\n  );\n\n  return (\n    <HvButton\n      ref={ref}\n      variant=\"secondarySubtle\"\n      disabled={disabled || readOnly}\n      className={cx(classes.root, className, {\n        [classes.open]: open,\n        [classes.openUp]: open && placement.includes(\"top\"),\n        [classes.openDown]: open && placement.includes(\"bottom\"),\n        [classes.disabled]: disabled,\n        [classes.readOnly]: readOnly,\n      })}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      {...others}\n    >\n      <div className={classes.selection}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":["createClasses","theme","forwardRef","useDefaultProps","classes","jsx","DropDownXS","HvButton"],"mappings":";;;;;;;;;AASO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,aAAaC,YAAAA,MAAM,MAAM;AAAA,IACzB,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAWA,YAAAA,MAAM,MAAM,IAAI,IAAIA,YAAA,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAGA,YAAM,MAAA,MAAM,IAAI,IAAIA,kBAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EAEA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IAEX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAaA,YAAM,MAAA,QAAQ,EAAE;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,EACd;AACF,CAAC;AAiBM,MAAM,iBAAiBC,MAAA,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,kBAAkB,KAAK;AAC3C,QAAM,EAAE,SAAAC,UAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,UAAU,aACdC,2BAAA;AAAA,IAACC,gBAAA;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,OAAO,WAAW,OAAU;AAAA,MAC7C,WAAWF,SAAQ;AAAA,IAAA;AAAA,EAAA;AAKrB,SAAAC,2BAAA;AAAA,IAACE,OAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,UAAU,YAAY;AAAA,MACtB,WAAW,GAAGH,SAAQ,MAAM,WAAW;AAAA,QACrC,CAACA,SAAQ,IAAI,GAAG;AAAA,QAChB,CAACA,SAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,QAClD,CAACA,SAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,QACvD,CAACA,SAAQ,QAAQ,GAAG;AAAA,QACpB,CAACA,SAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MACD,SAAS,EAAE,SAASA,SAAQ,eAAe;AAAA,MAC3C;AAAA,MACC,GAAG;AAAA,MAEJ,yCAAC,OAAI,EAAA,WAAWA,SAAQ,WACrB,sBAAY,OAAO,aAAa,WAC/BC,2BAAA,IAAC,SAAI,WAAWD,SAAQ,aAAc,SAAA,CAAS,IAE/C,UAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;;;;"}

package/dist/cjs/index.cjs

@@ -62,6 +62,10 @@ const InfoMessage_styles = require("./Forms/InfoMessage/InfoMessage.styles.cjs")
 const InfoMessage = require("./Forms/InfoMessage/InfoMessage.cjs");
 const WarningText_styles = require("./Forms/WarningText/WarningText.styles.cjs");
 const WarningText = require("./Forms/WarningText/WarningText.cjs");
+const Select_styles = require("./Select/Select.styles.cjs");
+const Select = require("./Select/Select.cjs");
+const Option = require("./Select/Option.cjs");
+const OptionGroup = require("./Select/OptionGroup.cjs");
 const SelectionList_styles = require("./SelectionList/SelectionList.styles.cjs");
 const SelectionList = require("./SelectionList/SelectionList.cjs");
 const Suggestions_styles = require("./Forms/Suggestions/Suggestions.styles.cjs");
@@ -405,6 +409,12 @@ exports.infoMessageClasses = InfoMessage_styles.staticClasses;
 exports.HvInfoMessage = InfoMessage.HvInfoMessage;
 exports.warningTextClasses = WarningText_styles.staticClasses;
 exports.HvWarningText = WarningText.HvWarningText;
+exports.selectClasses = Select_styles.staticClasses;
+exports.HvSelect = Select.HvSelect;
+exports.HvOption = Option.HvOption;
+exports.optionClasses = Option.optionClasses;
+exports.HvOptionGroup = OptionGroup.HvOptionGroup;
+exports.optionGroupClasses = OptionGroup.optionGroupClasses;
 exports.selectionListClasses = SelectionList_styles.staticClasses;
 exports.HvSelectionList = SelectionList.HvSelectionList;
 exports.suggestionsClasses = Suggestions_styles.staticClasses;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/DropDownMenu/DropDownMenu.js

@@ -11,8 +11,8 @@ import { useClasses } from "./DropDownMenu.styles.js";
 import { staticClasses } from "./DropDownMenu.styles.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvButton } from "../Button/Button.js";
-import { HvPanel } from "../Panel/Panel.js";
 import { HvList } from "../List/List.js";
+import { HvPanel } from "../Panel/Panel.js";
 const HvDropDownMenu = (props) => {
   const {
     id: idProp,

package/dist/esm/Select/Option.js

@@ -0,0 +1,53 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useRef } from "react";
+import { useOption } from "@mui/base/useOption";
+import { useForkRef } from "@mui/material/utils";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { fixedForwardRef } from "../types/generic.js";
+import { createClasses } from "../utils/classes.js";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
+const { staticClasses, useClasses } = createClasses("HvOption", {
+  root: {},
+  highlighted: {
+    ...outlineStyles
+  }
+});
+const HvOption = fixedForwardRef(function HvOption2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    disabled = false,
+    label,
+    value,
+    children,
+    ...others
+  } = useDefaultProps("HvOption", props);
+  const { classes, cx } = useClasses(classesProp);
+  const optionRef = useRef(null);
+  const rootRef = useForkRef(optionRef, ref);
+  const computedLabel = label ?? (typeof children === "string" ? children : optionRef.current?.textContent?.trim());
+  const { getRootProps, selected, highlighted } = useOption({
+    disabled,
+    label: computedLabel,
+    rootRef,
+    value
+  });
+  return /* @__PURE__ */ jsx(
+    HvListItem,
+    {
+      ref,
+      selected,
+      className: cx(classes.root, className, {
+        [classes.highlighted]: highlighted
+      }),
+      ...getRootProps(),
+      ...others,
+      children
+    }
+  );
+});
+export {
+  HvOption,
+  staticClasses as optionClasses
+};

package/dist/esm/Select/Option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sources":["../../../src/Select/Option.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useOption } from \"@mui/base/useOption\";\nimport { OptionOwnProps } from \"@mui/base/Option\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvListItem, HvListItemProps } from \"../ListContainer\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { fixedForwardRef } from \"../types/generic\";\nimport { ExtractNames, createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvOption\", {\n  root: {},\n  highlighted: {\n    ...outlineStyles,\n  },\n});\n\nexport { staticClasses as optionClasses };\n\nexport type HvOptionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOptionProps<OptionValue extends {}>\n  extends Omit<HvListItemProps, \"value\" | \"disabled\">,\n    Pick<OptionOwnProps<OptionValue>, \"disabled\" | \"label\" | \"value\"> {\n  classes?: HvOptionClasses;\n}\n\nexport const HvOption = fixedForwardRef(function HvOption<\n  OptionValue extends {}\n>(props: HvOptionProps<OptionValue>, ref: React.Ref<HTMLLIElement>) {\n  const {\n    classes: classesProp,\n    className,\n    disabled = false,\n    label,\n    value,\n    children,\n    ...others\n  } = useDefaultProps(\"HvOption\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const optionRef = useRef<HTMLElement>(null);\n  const rootRef = useForkRef(optionRef, ref);\n\n  const computedLabel =\n    label ??\n    (typeof children === \"string\"\n      ? children\n      : optionRef.current?.textContent?.trim());\n\n  const { getRootProps, selected, highlighted } = useOption({\n    disabled,\n    label: computedLabel,\n    rootRef,\n    value,\n  });\n\n  return (\n    <HvListItem\n      ref={ref}\n      selected={selected}\n      className={cx(classes.root, className, {\n        [classes.highlighted]: highlighted,\n      })}\n      {...getRootProps()}\n      {...others}\n    >\n      {children}\n    </HvListItem>\n  );\n});\n"],"names":["HvOption"],"mappings":";;;;;;;;;AAWA,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EAC9D,MAAM,CAAC;AAAA,EACP,aAAa;AAAA,IACX,GAAG;AAAA,EACL;AACF,CAAC;AAYM,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAmC,KAA+B;AAC5D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAY,OAAoB,IAAI;AACpC,QAAA,UAAU,WAAW,WAAW,GAAG;AAEnC,QAAA,gBACJ,UACC,OAAO,aAAa,WACjB,WACA,UAAU,SAAS,aAAa,KAAK;AAE3C,QAAM,EAAE,cAAc,UAAU,YAAA,IAAgB,UAAU;AAAA,IACxD;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,WAAW,GAAG;AAAA,MAAA,CACxB;AAAA,MACA,GAAG,aAAa;AAAA,MAChB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/esm/Select/OptionGroup.js

@@ -0,0 +1,34 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { OptionGroup } from "@mui/base/OptionGroup";
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+const { staticClasses, useClasses } = createClasses("HvOptionGroup", {
+  root: {
+    listStyle: "none",
+    ...theme.typography.label
+  }
+});
+const HvOptionGroup = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      classes: classesProp,
+      ...others
+    } = useDefaultProps("HvOptionGroup", props);
+    const { classes, cx } = useClasses(classesProp);
+    return /* @__PURE__ */ jsx(
+      OptionGroup,
+      {
+        ref,
+        className: cx(classes.root, className),
+        ...others
+      }
+    );
+  }
+);
+export {
+  HvOptionGroup,
+  staticClasses as optionGroupClasses
+};