@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.30

package/dist-es/dropdown-next/DropdownNext.js

@@ -0,0 +1,346 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useListControl } from '../list-control/ListControlState.js';
+import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
+import { makePrefixer, useFormFieldProps, useFloatingComponent, useFloatingUI, useForkRef, useId, StatusAdornment } from '@salt-ds/core';
+import { size, flip } from '@floating-ui/react';
+import { clsx } from 'clsx';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './DropdownNext.css.js';
+import { ListControlContext } from '../list-control/ListControlContext.js';
+import { OptionList } from '../option/OptionList.js';
+
+function ExpandIcon({ open }) {
+  return open ? /* @__PURE__ */ jsx(ChevronUpIcon, {
+    "aria-hidden": true
+  }) : /* @__PURE__ */ jsx(ChevronDownIcon, {
+    "aria-hidden": true
+  });
+}
+const withBaseName = makePrefixer("saltDropdownNext");
+const DropdownNext = forwardRef(
+  function DropdownNext2(props, ref) {
+    var _a, _b;
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      children,
+      className,
+      disabled: disabledProp,
+      emptyReadOnlyMarker = "\u2014",
+      readOnly: readOnlyProp,
+      multiselect,
+      onSelectionChange,
+      selected,
+      defaultSelected,
+      defaultOpen,
+      defaultValue: defaultValueProp,
+      value,
+      onOpenChange,
+      open,
+      placeholder,
+      startAdornment,
+      required: requiredProp,
+      variant = "primary",
+      validationStatus: validationStatusProp,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-DropdownNext",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      a11yProps: {
+        "aria-describedby": formFieldDescribedBy,
+        "aria-labelledby": formFieldLabelledBy
+      } = {},
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly,
+      necessity: formFieldRequired,
+      validationStatus: formFieldValidationStatus
+    } = useFormFieldProps();
+    const disabled = Boolean(disabledProp) || formFieldDisabled;
+    const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;
+    const validationStatus = validationStatusProp != null ? validationStatusProp : formFieldValidationStatus;
+    const required = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : requiredProp;
+    const isEmptyReadOnly = readOnly && !defaultValueProp && !value;
+    const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+    const listControl = useListControl({
+      open,
+      defaultOpen,
+      onOpenChange,
+      multiselect,
+      defaultSelected,
+      selected,
+      onSelectionChange,
+      defaultValue,
+      value
+    });
+    const {
+      activeState,
+      setActive,
+      openState,
+      setOpen,
+      openKey,
+      getOptionAtIndex,
+      getIndexOfOption,
+      getOptionsMatching,
+      getOptionFromSearch,
+      options,
+      selectedState,
+      select,
+      valueState,
+      setFocusVisibleState,
+      focusedState,
+      setFocusedState,
+      listRef
+    } = listControl;
+    const { Component: FloatingComponent } = useFloatingComponent();
+    const { x, y, strategy, elements, floating, reference } = useFloatingUI({
+      open,
+      placement: "bottom-start",
+      middleware: [
+        size({
+          apply({ rects, elements: elements2, availableHeight }) {
+            Object.assign(elements2.floating.style, {
+              minWidth: `${rects.reference.width}px`,
+              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`
+            });
+          }
+        }),
+        flip({ fallbackStrategy: "initialPlacement" })
+      ]
+    });
+    const buttonRef = useRef(null);
+    const handleTriggerRef = useForkRef(
+      reference,
+      buttonRef
+    );
+    const handleButtonRef = useForkRef(handleTriggerRef, ref);
+    const handleClick = (event) => {
+      if (!readOnly) {
+        setFocusVisibleState(false);
+        setOpen(event, !openState);
+      }
+      onClick == null ? void 0 : onClick(event);
+    };
+    const typeaheadString = useRef("");
+    const typeaheadTimeout = useRef();
+    const handleTypeahead = (event) => {
+      if (typeaheadTimeout.current) {
+        clearTimeout(typeaheadTimeout.current);
+      }
+      typeaheadString.current += event.key;
+      typeaheadTimeout.current = window.setTimeout(() => {
+        typeaheadString.current = "";
+      }, 500);
+      if (!openState) {
+        setOpen(event, true);
+      }
+      let newOption = getOptionFromSearch(typeaheadString.current, activeState);
+      if (!newOption) {
+        newOption = getOptionFromSearch(typeaheadString.current);
+      }
+      if (newOption) {
+        setActive(newOption);
+        setFocusVisibleState(true);
+      }
+    };
+    const handleKeyDown = (event) => {
+      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;
+      const count = options.length - 1;
+      if (readOnly) {
+        return;
+      }
+      if (!openState) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          setOpen(event, true);
+          return;
+        }
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        handleTypeahead(event);
+      }
+      let newActive;
+      switch (event.key) {
+        case "ArrowDown":
+          newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));
+          break;
+        case "ArrowUp":
+          newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));
+          break;
+        case "Home":
+          newActive = getOptionAtIndex(0);
+          break;
+        case "End":
+          newActive = getOptionAtIndex(count);
+          break;
+        case "PageUp":
+          newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));
+          break;
+        case "PageDown":
+          newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));
+          break;
+        case "Enter":
+        case " ":
+          if (openState && Boolean(activeState == null ? void 0 : activeState.disabled) || typeaheadString.current.trim().length > 0 && event.key === " ") {
+            event.preventDefault();
+            return;
+          }
+          if (!openState || !activeState) {
+            return;
+          }
+          event.preventDefault();
+          select(event, activeState);
+          if (!multiselect) {
+            setOpen(event, false);
+          }
+          break;
+        case "Escape":
+          setOpen(event, false);
+          break;
+        case "Tab":
+          if (!multiselect && activeState) {
+            select(event, activeState);
+          }
+          break;
+      }
+      if (newActive && (newActive == null ? void 0 : newActive.id) != (activeState == null ? void 0 : activeState.id)) {
+        event.preventDefault();
+        setActive(newActive);
+        setFocusVisibleState(true);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleFocus = (event) => {
+      setFocusedState(true);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const ignoreBlur = useRef(false);
+    const handleBlur = (event) => {
+      if (!ignoreBlur.current) {
+        setOpen(event, false);
+      }
+      ignoreBlur.current = false;
+      setFocusedState(false);
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleListMouseOver = () => {
+      setFocusVisibleState(false);
+    };
+    const handleListMouseDown = () => {
+      ignoreBlur.current = true;
+    };
+    const handleListFocus = () => {
+      var _a2;
+      (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+    };
+    const handleListClick = () => {
+      var _a2;
+      (_a2 = buttonRef.current) == null ? void 0 : _a2.focus();
+    };
+    useEffect(() => {
+      const activeIndex = activeState ? getIndexOfOption(activeState) : -1;
+      if (openState && activeIndex < 0) {
+        if (openKey.current.key === "ArrowDown") {
+          setActive(getOptionAtIndex(0));
+        } else if (openKey.current.key === "ArrowUp") {
+          setActive(getOptionAtIndex(options.length - 1));
+        } else {
+          if (selectedState.length > 0) {
+            const selected2 = getOptionsMatching(
+              (option) => option.value === selectedState[0]
+            ).pop();
+            if (selected2) {
+              setActive(selected2);
+            }
+          } else {
+            setActive(getOptionAtIndex(0));
+          }
+        }
+      } else if (!openState) {
+        setActive(void 0);
+      }
+    }, [openState, children]);
+    const listId = useId();
+    return /* @__PURE__ */ jsxs(ListControlContext.Provider, {
+      value: listControl,
+      children: [
+        /* @__PURE__ */ jsxs("button", {
+          className: clsx(
+            withBaseName(),
+            withBaseName(variant),
+            {
+              [withBaseName("disabled")]: disabled,
+              [withBaseName(validationStatus != null ? validationStatus : "")]: validationStatus
+            },
+            className
+          ),
+          ref: handleButtonRef,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          role: "combobox",
+          type: "button",
+          disabled,
+          "aria-readonly": readOnly ? "true" : void 0,
+          "aria-required": required ? "true" : void 0,
+          "aria-expanded": openState,
+          "aria-activedescendant": activeState == null ? void 0 : activeState.id,
+          "aria-labelledby": clsx(formFieldLabelledBy, ariaLabelledBy) || void 0,
+          "aria-describedby": clsx(formFieldDescribedBy, ariaDescribedBy) || void 0,
+          "aria-multiselectable": multiselect,
+          "aria-controls": openState ? listId : void 0,
+          ...rest,
+          children: [
+            startAdornment,
+            /* @__PURE__ */ jsx("span", {
+              className: clsx(withBaseName("content"), {
+                [withBaseName("placeholder")]: !valueState
+              }),
+              children: valueState != null ? valueState : placeholder
+            }),
+            validationStatus && /* @__PURE__ */ jsx(StatusAdornment, {
+              status: validationStatus
+            }),
+            !readOnly && /* @__PURE__ */ jsx(ExpandIcon, {
+              open: openState
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx(FloatingComponent, {
+          open: (openState || focusedState) && !readOnly,
+          left: x != null ? x : 0,
+          top: y != null ? y : 0,
+          position: strategy,
+          width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
+          height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
+          ref: floating,
+          children: /* @__PURE__ */ jsx(OptionList, {
+            id: listId,
+            collapsed: !openState,
+            onMouseOver: handleListMouseOver,
+            onMouseDown: handleListMouseDown,
+            onFocus: handleListFocus,
+            onClick: handleListClick,
+            ref: listRef,
+            children
+          })
+        })
+      ]
+    });
+  }
+);
+
+export { DropdownNext };
+//# sourceMappingURL=DropdownNext.js.map

package/dist-es/dropdown-next/DropdownNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  MouseEvent,\n  KeyboardEvent,\n  useEffect,\n  FocusEvent,\n  useRef,\n} from \"react\";\nimport {\n  ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n  makePrefixer,\n  StatusAdornment,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n  ValidationStatus,\n} from \"@salt-ds/core\";\nimport { flip, size } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dropdownCss from \"./DropdownNext.css\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface DropdownNextProps\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n    ListControlProps {\n  /**\n   * If `true`, the dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the dropdown will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The options to display in the dropdown.\n   */\n  children?: ReactNode;\n  /**\n   * The marker to use in an empty read only dropdown.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * If `true`, the dropdown will be multiselect.\n   */\n  multiselect?: boolean;\n  /**\n   * The text shown when the dropdown has no value.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the dropdown will be required.\n   */\n  required?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Validation status, one of \"error\" | \"warning\" | \"success\".\n   */\n  validationStatus?: Exclude<ValidationStatus, \"info\">;\n}\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n  return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport const DropdownNext = forwardRef<HTMLButtonElement, DropdownNextProps>(\n  function DropdownNext(props, ref) {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      disabled: disabledProp,\n      emptyReadOnlyMarker = \"—\",\n      readOnly: readOnlyProp,\n      multiselect,\n      onSelectionChange,\n      selected,\n      defaultSelected,\n      defaultOpen,\n      defaultValue: defaultValueProp,\n      value,\n      onOpenChange,\n      open,\n      placeholder,\n      startAdornment,\n      required: requiredProp,\n      variant = \"primary\",\n      validationStatus: validationStatusProp,\n      onClick,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-DropdownNext\",\n      css: dropdownCss,\n      window: targetWindow,\n    });\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = Boolean(disabledProp) || formFieldDisabled;\n    const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n    const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n    const required = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : undefined ?? requiredProp;\n\n    const isEmptyReadOnly = readOnly && !defaultValueProp && !value;\n    const defaultValue = isEmptyReadOnly\n      ? emptyReadOnlyMarker\n      : defaultValueProp;\n\n    const listControl = useListControl({\n      open,\n      defaultOpen,\n      onOpenChange,\n      multiselect,\n      defaultSelected,\n      selected,\n      onSelectionChange,\n      defaultValue,\n      value,\n    });\n\n    const {\n      activeState,\n      setActive,\n      openState,\n      setOpen,\n      openKey,\n      getOptionAtIndex,\n      getIndexOfOption,\n      getOptionsMatching,\n      getOptionFromSearch,\n      options,\n      selectedState,\n      select,\n      valueState,\n      setFocusVisibleState,\n      focusedState,\n      setFocusedState,\n      listRef,\n    } = listControl;\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const { x, y, strategy, elements, floating, reference } = useFloatingUI({\n      open,\n      placement: \"bottom-start\",\n      middleware: [\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleTriggerRef = useForkRef<HTMLButtonElement>(\n      reference,\n      buttonRef\n    );\n    const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      if (!readOnly) {\n        setFocusVisibleState(false);\n        setOpen(event, !openState);\n      }\n      onClick?.(event);\n    };\n\n    const typeaheadString = useRef(\"\");\n    const typeaheadTimeout = useRef<number | undefined>();\n\n    const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n      if (typeaheadTimeout.current) {\n        clearTimeout(typeaheadTimeout.current);\n      }\n      typeaheadString.current += event.key;\n      typeaheadTimeout.current = window.setTimeout(() => {\n        typeaheadString.current = \"\";\n      }, 500);\n\n      if (!openState) {\n        setOpen(event, true);\n      }\n\n      let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n      if (!newOption) {\n        newOption = getOptionFromSearch(typeaheadString.current);\n      }\n\n      if (newOption) {\n        setActive(newOption);\n        setFocusVisibleState(true);\n      }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n      const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n      const count = options.length - 1;\n\n      if (readOnly) {\n        return;\n      }\n\n      if (!openState) {\n        if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n          setOpen(event, true);\n          return;\n        }\n      }\n\n      if (\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey &&\n        !event.altKey\n      ) {\n        event.preventDefault();\n        event.stopPropagation();\n        handleTypeahead(event);\n      }\n\n      let newActive;\n      switch (event.key) {\n        case \"ArrowDown\":\n          newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n          break;\n        case \"ArrowUp\":\n          newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n          break;\n        case \"Home\":\n          newActive = getOptionAtIndex(0);\n          break;\n        case \"End\":\n          newActive = getOptionAtIndex(count);\n          break;\n        case \"PageUp\":\n          newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n          break;\n        case \"PageDown\":\n          newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n          break;\n        case \"Enter\":\n        case \" \":\n          if (\n            (openState && Boolean(activeState?.disabled)) ||\n            (typeaheadString.current.trim().length > 0 && event.key === \" \")\n          ) {\n            event.preventDefault();\n            return;\n          }\n\n          if (!openState || !activeState) {\n            return;\n          }\n\n          event.preventDefault();\n          select(event, activeState);\n\n          if (!multiselect) {\n            setOpen(event, false);\n          }\n\n          break;\n        case \"Escape\":\n          setOpen(event, false);\n          break;\n        case \"Tab\":\n          if (!multiselect && activeState) {\n            select(event, activeState);\n          }\n          break;\n      }\n\n      if (newActive && newActive?.id != activeState?.id) {\n        event.preventDefault();\n        setActive(newActive);\n        setFocusVisibleState(true);\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      setFocusedState(true);\n\n      onFocus?.(event);\n    };\n\n    const ignoreBlur = useRef(false);\n\n    const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n      if (!ignoreBlur.current) {\n        setOpen(event, false);\n      }\n      ignoreBlur.current = false;\n\n      setFocusedState(false);\n      onBlur?.(event);\n    };\n\n    const handleListMouseOver = () => {\n      setFocusVisibleState(false);\n    };\n\n    const handleListMouseDown = () => {\n      ignoreBlur.current = true;\n    };\n\n    const handleListFocus = () => {\n      buttonRef.current?.focus();\n    };\n    const handleListClick = () => {\n      buttonRef.current?.focus();\n    };\n\n    useEffect(() => {\n      // We check the active index because the active item may have been removed\n      const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n      if (openState && activeIndex < 0) {\n        if (openKey.current.key === \"ArrowDown\") {\n          setActive(getOptionAtIndex(0));\n        } else if (openKey.current.key === \"ArrowUp\") {\n          setActive(getOptionAtIndex(options.length - 1));\n        } else {\n          if (selectedState.length > 0) {\n            const selected = getOptionsMatching(\n              (option) => option.value === selectedState[0]\n            ).pop();\n            if (selected) {\n              setActive(selected);\n            }\n          } else {\n            setActive(getOptionAtIndex(0));\n          }\n        }\n      } else if (!openState) {\n        setActive(undefined);\n      }\n    }, [openState, children]);\n\n    const listId = useId();\n\n    return (\n      <ListControlContext.Provider value={listControl}>\n        <button\n          className={clsx(\n            withBaseName(),\n            withBaseName(variant),\n            {\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(validationStatus ?? \"\")]: validationStatus,\n            },\n            className\n          )}\n          ref={handleButtonRef}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          role=\"combobox\"\n          type=\"button\"\n          disabled={disabled}\n          aria-readonly={readOnly ? \"true\" : undefined}\n          aria-required={required ? \"true\" : undefined}\n          aria-expanded={openState}\n          aria-activedescendant={activeState?.id}\n          aria-labelledby={\n            clsx(formFieldLabelledBy, ariaLabelledBy) || undefined\n          }\n          aria-describedby={\n            clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n          }\n          aria-multiselectable={multiselect}\n          aria-controls={openState ? listId : undefined}\n          {...rest}\n        >\n          {startAdornment}\n          <span\n            className={clsx(withBaseName(\"content\"), {\n              [withBaseName(\"placeholder\")]: !valueState,\n            })}\n          >\n            {valueState ?? placeholder}\n          </span>\n          {validationStatus && <StatusAdornment status={validationStatus} />}\n          {!readOnly && <ExpandIcon open={openState} />}\n        </button>\n        <FloatingComponent\n          open={(openState || focusedState) && !readOnly}\n          left={x ?? 0}\n          top={y ?? 0}\n          position={strategy}\n          width={elements.floating?.offsetWidth}\n          height={elements.floating?.offsetHeight}\n          ref={floating}\n        >\n          <OptionList\n            id={listId}\n            collapsed={!openState}\n            onMouseOver={handleListMouseOver}\n            onMouseDown={handleListMouseDown}\n            onFocus={handleListFocus}\n            onClick={handleListClick}\n            ref={listRef}\n          >\n            {children}\n          </OptionList>\n        </FloatingComponent>\n      </ListControlContext.Provider>\n    );\n  }\n);\n"],"names":["DropdownNext","dropdownCss","elements","_a","selected"],"mappings":"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"}

package/dist-es/editable-label/EditableLabel.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltEditableLabel {\n  --saltInputLegacy-minWidth: 14px;\n  --saltInputLegacy-position: absolute;\n  --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n  --editableLabel-height: var(--saltEditableLabel-height, 26px);\n  color: inherit;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.saltEditableLabel .saltInputLegacy {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  right: var(--editableLabel-padding, 0);\n}\n\n.saltEditableLabel-input {\n  outline: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=EditableLabel.css.js.map

package/dist-es/editable-label/EditableLabel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/editable-label/EditableLabel.js

@@ -0,0 +1,112 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useCallback } from 'react';
+import { useControlled, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './EditableLabel.css.js';
+
+const classBase = "saltEditableLabel";
+const EditableLabel = forwardRef(function EditableLabel2({
+  className: classNameProp,
+  defaultEditing,
+  defaultValue,
+  editing: editingProp,
+  onChange,
+  onEnterEditMode,
+  onExitEditMode,
+  value: valueProp
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-editable-label",
+    css: css_248z,
+    window: targetWindow
+  });
+  const inputRef = useRef(null);
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue != null ? defaultValue : "",
+    name: "EditableLabel",
+    state: "value"
+  });
+  const [editing, setEditing] = useControlled({
+    controlled: editingProp,
+    default: defaultEditing || false,
+    name: "EditableLabel",
+    state: "editing"
+  });
+  const initialValue = useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    if (editing) {
+      if (inputRef.current !== null) {
+        inputRef.current.select();
+        inputRef.current.focus();
+      }
+    }
+  }, [editing, inputRef]);
+  const enterEditMode = useCallback(() => {
+    setEditing(true);
+    onEnterEditMode && onEnterEditMode();
+  }, [onEnterEditMode, setEditing]);
+  const exitEditMode = ({
+    cancelEdit = false,
+    allowDeactivation = false
+  } = {}) => {
+    setEditing(false);
+    const originalValue = initialValue.current;
+    if (originalValue !== value) {
+      if (cancelEdit) {
+        setValue(originalValue);
+      } else {
+        initialValue.current = value;
+      }
+    }
+    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);
+  };
+  const handleChange = (evt) => {
+    const { value: value2 } = evt.target;
+    setValue(value2);
+    onChange && onChange(value2);
+  };
+  const handleDoubleClick = () => {
+    enterEditMode();
+  };
+  const handleBlur = () => {
+    exitEditMode({ allowDeactivation: true });
+  };
+  const handleKeyDown = (evt) => {
+    if (editing && evt.key === "Enter") {
+      evt.stopPropagation();
+      exitEditMode();
+    } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft") {
+      evt.stopPropagation();
+    } else if (evt.key === "Escape") {
+      exitEditMode({ cancelEdit: true });
+    }
+  };
+  const className = clsx(classBase, classNameProp, {
+    [`${classBase}-editing`]: editing
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className,
+    onDoubleClick: handleDoubleClick,
+    "data-text": value,
+    ref: forwardedRef,
+    children: editing ? /* @__PURE__ */ jsx(InputLegacy, {
+      inputProps: { className: `${classBase}-input` },
+      value,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      ref: inputRef,
+      style: { padding: 0 },
+      textAlign: "left"
+    }) : value
+  });
+});
+
+export { EditableLabel };
+//# sourceMappingURL=EditableLabel.js.map

package/dist-es/editable-label/EditableLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  ChangeEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: (\n    originalLabel: string | undefined,\n    editedLabel: string | undefined,\n    allowDeactivation?: boolean\n  ) => void;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing || false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const initialValue = useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode && onEnterEditMode();\n  }, [onEnterEditMode, setEditing]);\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  const handleDoubleClick = () => {\n    enterEditMode();\n  };\n\n  const handleBlur = () => {\n    exitEditMode({ allowDeactivation: true });\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = clsx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      className={className}\n      onDoubleClick={handleDoubleClick}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input` }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          ref={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n        />\n      ) : (\n        value\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","editableLabelCss","value","Input"],"mappings":"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"}

package/dist-es/form-field-context-legacy/FormFieldLegacyContext.js

@@ -0,0 +1,9 @@
+import { createContext } from '@salt-ds/core';
+
+const FormFieldLegacyContext = createContext(
+  "FormFieldContext",
+  {}
+);
+
+export { FormFieldLegacyContext };
+//# sourceMappingURL=FormFieldLegacyContext.js.map

package/dist-es/form-field-context-legacy/FormFieldLegacyContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLegacyContext.js","sources":["../src/form-field-context-legacy/FormFieldLegacyContext.ts"],"sourcesContent":["import { Dispatch, FocusEventHandler, RefObject, SetStateAction } from \"react\";\nimport { createContext } from \"@salt-ds/core\";\nimport { useA11yValueValue } from \"../form-field-legacy\";\nexport interface FormFieldLegacyContextValue {\n  inFormField: true;\n  ref: RefObject<HTMLDivElement>;\n  a11yProps: useA11yValueValue;\n  focused: boolean;\n  setFocused: Dispatch<SetStateAction<boolean>>;\n  onBlur: FocusEventHandler<HTMLElement>;\n  onFocus: FocusEventHandler<HTMLElement>;\n}\n\nexport const FormFieldLegacyContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldLegacyContextValue\n);\n"],"names":[],"mappings":";;AAaO,MAAM,sBAAyB,GAAA,aAAA;AAAA,EACpC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/form-field-context-legacy/useFormFieldLegacyProps.js

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { FormFieldLegacyContext } from './FormFieldLegacyContext.js';
+
+function useFormFieldLegacyProps({
+  focusVisible
+} = {}) {
+  const { setFocused, ...formFieldProps } = useContext(FormFieldLegacyContext) || {};
+  useIsomorphicLayoutEffect(() => {
+    if (focusVisible !== void 0 && setFocused) {
+      setFocused(focusVisible);
+    }
+  }, [focusVisible, setFocused]);
+  return {
+    setFocused,
+    ...formFieldProps
+  };
+}
+
+export { useFormFieldLegacyProps };
+//# sourceMappingURL=useFormFieldLegacyProps.js.map

package/dist-es/form-field-context-legacy/useFormFieldLegacyProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldLegacyProps.js","sources":["../src/form-field-context-legacy/useFormFieldLegacyProps.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  FormFieldLegacyContext,\n  FormFieldLegacyContextValue,\n} from \"./FormFieldLegacyContext\";\n\ninterface useFormFieldLegacyPropsProps {\n  focusVisible?: boolean;\n}\n\nexport function useFormFieldLegacyProps({\n  focusVisible,\n}: useFormFieldLegacyPropsProps = {}): Partial<FormFieldLegacyContextValue> {\n  // TODO should this be a separate value for FocusVisible\n  const { setFocused, ...formFieldProps } =\n    useContext(FormFieldLegacyContext) || {};\n\n  useIsomorphicLayoutEffect(() => {\n    if (focusVisible !== undefined && setFocused) {\n      setFocused(focusVisible);\n    }\n  }, [focusVisible, setFocused]);\n\n  return {\n    setFocused,\n    ...formFieldProps,\n  };\n}\n"],"names":[],"mappings":";;;;AAWO,SAAS,uBAAwB,CAAA;AAAA,EACtC,YAAA;AACF,CAAA,GAAkC,EAA0C,EAAA;AAE1E,EAAA,MAAM,EAAE,UAAe,EAAA,GAAA,cAAA,KACrB,UAAW,CAAA,sBAAsB,KAAK,EAAC,CAAA;AAEzC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,YAAA,KAAiB,UAAa,UAAY,EAAA;AAC5C,MAAA,UAAA,CAAW,YAAY,CAAA,CAAA;AAAA,KACzB;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA,CAAA;AAE7B,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,GAAG,cAAA;AAAA,GACL,CAAA;AACF;;;;"}

package/dist-es/form-field-legacy/FormActivationIndicator.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n  --formFieldLegacy-activationIndicator-icon-size: 7px;\n}\n.salt-density-low {\n  --formFieldLegacy-activationIndicator-icon-size: 5px;\n}\n.salt-density-medium {\n  --formFieldLegacy-activationIndicator-icon-size: 5px;\n}\n.salt-density-high {\n  --formFieldLegacy-activationIndicator-icon-size: 3px;\n}\n\n.saltFormActivationIndicator {\n  height: 0px;\n  width: 100%;\n  position: relative;\n}\n\n/* Styles applied to the indication bar */\n.saltFormActivationIndicator-bar {\n  bottom: 0px;\n  border-color: var(--saltFormFieldLegacy-activationIndicator-borderColor, var(--formFieldLegacy-activationIndicator-color));\n  border-bottom-width: var(--saltFormFieldLegacy-activationIndicator-borderWidth, var(--formFieldLegacy-activationIndicator-size));\n  border-bottom-style: var(--saltFormFieldLegacy-activationIndicator-borderStyle, var(--formFieldLegacy-activationIndicator-style));\n  height: 0;\n  opacity: var(--saltFormFieldLegacy-activationIndicator-opacity, 1);\n  position: absolute;\n  width: 100%;\n}\n\n/* Styles applied to the indication icon */\n.saltFormActivationIndicator-icon {\n  width: var(--saltFormFieldLegacy-activationIndicator-icon-size, var(--formFieldLegacy-activationIndicator-icon-size));\n  height: var(--saltFormFieldLegacy-activationIndicator-icon-size, var(--formFieldLegacy-activationIndicator-icon-size));\n  fill: var(--saltFormFieldLegacy-activationIndicator-icon-color, var(--formFieldLegacy-activationIndicator-color));\n  /**\n * It's only a solid icon showing different color for validation states.\n * Applying opacity instead of re-defining all colors.\n */\n  opacity: var(--saltFormFieldLegacy-activationIndicator-opacity, 1);\n  position: absolute;\n  bottom: 3px;\n  right: 2px;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=FormActivationIndicator.css.js.map

package/dist-es/form-field-legacy/FormActivationIndicator.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActivationIndicator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/form-field-legacy/FormActivationIndicator.js

@@ -0,0 +1,72 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import css_248z from './FormActivationIndicator.css.js';
+
+const ErrorIndicatorIcon = (props) => {
+  return /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 16 16",
+    focusable: false,
+    "data-testid": "ErrorIndicatorIcon",
+    ...props,
+    children: /* @__PURE__ */ jsx("circle", {
+      cx: 8,
+      cy: 8,
+      r: 8
+    })
+  });
+};
+const WarningIndicatorIcon = (props) => {
+  return /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 16 16",
+    focusable: false,
+    "data-testid": "WarningIndicatorIcon",
+    ...props,
+    children: /* @__PURE__ */ jsx("polygon", {
+      points: "0, 16 16, 16 16, 0"
+    })
+  });
+};
+const withBaseName = makePrefixer("saltFormActivationIndicator");
+const ActivationIndicatorIcon = ({
+  validationStatus,
+  ...restSvgProps
+}) => {
+  if (validationStatus === "error") {
+    return /* @__PURE__ */ jsx(ErrorIndicatorIcon, {
+      ...restSvgProps
+    });
+  } else if (validationStatus === "warning") {
+    return /* @__PURE__ */ jsx(WarningIndicatorIcon, {
+      ...restSvgProps
+    });
+  } else {
+    return null;
+  }
+};
+const FormActivationIndicator = ({
+  hasIcon,
+  validationStatus
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-form-activation-indicator",
+    css: css_248z,
+    window: targetWindow
+  });
+  const rootClass = "saltFormActivationIndicator";
+  return /* @__PURE__ */ jsx("div", {
+    className: withBaseName(),
+    children: /* @__PURE__ */ jsx("div", {
+      className: withBaseName("bar"),
+      children: hasIcon && validationStatus && /* @__PURE__ */ jsx(ActivationIndicatorIcon, {
+        className: `${rootClass}-icon`,
+        validationStatus
+      })
+    })
+  });
+};
+
+export { FormActivationIndicator };
+//# sourceMappingURL=FormActivationIndicator.js.map