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

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

@@ -0,0 +1,341 @@
+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 && children != void 0,
+        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  ForwardedRef,\n  Ref,\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<Item = string>\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n    ListControlProps<Item> {\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(function DropdownNext<Item>(\n  props: DropdownNextProps<Item>,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\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 ? emptyReadOnlyMarker : defaultValueProp;\n\n  const listControl = useListControl<Item>({\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>(reference, buttonRef);\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={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\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 && children != undefined}\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}) as <Item = string>(\n  props: DropdownNextProps<Item> & { ref?: Ref<HTMLButtonElement> }\n) => JSX.Element;\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