@hitachivantara/uikit-react-core 5.50.1 → 5.51.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGroup.js","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":[],"mappings":";;;;;;AAOA,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EACnE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,GAAG,MAAM,WAAW;AAAA,EACtB;AACF,CAAC;AAUM,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/Select/Select.js

@@ -0,0 +1,213 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { useState, useRef } from "react";
+import clsx from "clsx";
+import { useSelect, SelectProvider } from "@mui/base/useSelect";
+import { useForkRef, useControlled } from "@mui/material/utils";
+import { Popper } from "@mui/base/Popper";
+import { fixedForwardRef } from "../types/generic.js";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./Select.styles.js";
+import { staticClasses } from "./Select.styles.js";
+import { setId } from "../utils/setId.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvSelectButton } from "./SelectButton.js";
+import { HvPanel } from "../Panel/Panel.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvListContainer } from "../ListContainer/ListContainer.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
+function defaultRenderValue(options) {
+  if (Array.isArray(options)) {
+    if (options.length === 0)
+      return null;
+    return /* @__PURE__ */ jsx(Fragment, { children: options.map((o) => o.label).join(", ") });
+  }
+  return options?.label ?? null;
+}
+const mergeIds = (...ids) => clsx(ids) || void 0;
+const HvSelect = 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("HvSelect", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [placement, setPlacement] = useState("bottom-start");
+  const buttonRef = useRef(null);
+  const handleButtonRef = useForkRef(ref, buttonRef);
+  const {
+    contextValue,
+    disabled,
+    getButtonProps,
+    getListboxProps,
+    getHiddenInputProps,
+    getOptionMetadata,
+    value,
+    open
+  } = 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(idProp);
+  const labelId = useUniqueId(setId(idProp, "label"));
+  const descriptionId = useUniqueId(setId(idProp, "description"));
+  const errorMessageId = useUniqueId(setId(idProp, "error"));
+  const [validationMessage] = useControlled({
+    name: "HvSelect.statusMessage",
+    controlled: statusMessage,
+    default: "Required"
+  });
+  const [validationState, setValidationState] = 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__ */ jsxs(
+    HvFormElement,
+    {
+      name,
+      required,
+      disabled,
+      readOnly,
+      status: validationState,
+      className: cx(classes.root, className, {
+        [classes.disabled]: disabled,
+        [classes.readOnly]: readOnly
+      }),
+      ...others,
+      children: [
+        (label || description) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+          label && /* @__PURE__ */ jsx(
+            HvLabel,
+            {
+              id: labelId,
+              htmlFor: id,
+              label,
+              className: classes.label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(HvInfoMessage, { id: descriptionId, className: classes.description, children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          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__ */ jsx(
+          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__ */ jsx(
+              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__ */ jsx(SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsx(HvListContainer, { condensed: true, selectable: true, ...getListboxProps(), children }) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("input", { ...getHiddenInputProps(), autoComplete }),
+        canShowError && /* @__PURE__ */ jsx(
+          HvWarningText,
+          {
+            id: errorMessageId,
+            disableBorder: true,
+            className: classes.error,
+            children: validationMessage
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  HvSelect,
+  staticClasses as selectClasses
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","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":["HvSelect"],"mappings":"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"}

package/dist/esm/Select/Select.styles.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.js","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":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,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,aAAa,MAAM,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,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAC;AACV,CAAC;"}

package/dist/esm/Select/SelectButton.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectButton.js","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":[],"mappings":";;;;;;;AASO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,aAAa,MAAM,MAAM;AAAA,IACzB,gBAAgB;AAAA,EAClB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,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,aAAa,MAAM,QAAQ,EAAE;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,EACd;AACF,CAAC;AAiBM,MAAM,iBAAiB,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,IACD,gBAAgB,kBAAkB,KAAK;AAC3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,UAAU,aACd;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ,OAAO,WAAW,OAAU;AAAA,MAC7C,WAAW,QAAQ;AAAA,IAAA;AAAA,EAAA;AAKrB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,UAAU,YAAY;AAAA,MACtB,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,IAAI,GAAG;AAAA,QAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,QAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,QACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MACD,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,OAAI,EAAA,WAAW,QAAQ,WACrB,sBAAY,OAAO,aAAa,WAC/B,oBAAC,SAAI,WAAW,QAAQ,aAAc,SAAA,CAAS,IAE/C,UAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}