@salt-ds/lab 1.0.0-alpha.54 → 1.0.0-alpha.56

package/dist-cjs/dropdown/useClickAway.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickAway.js","sources":["../src/dropdown/useClickAway.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: () => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              onClose();\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              onClose();\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose, popperRef, rootRef]);\n};\n"],"names":["useEffect"],"mappings":";;;;;;AAYA,MAAM,cAA2D,EAAC,CAAA;AAE3D,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AACF,CAAM,KAAA;AACJ,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AAvB/B,QAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAwBY,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA,CAAA;AAC1B,QACE,IAAA,EAAA,CAAC,EAAU,GAAA,SAAA,CAAA,OAAA,KAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,aAC7B,CAAA,CAAA,IAAA,EAAA,CAAC,EAAQ,GAAA,OAAA,CAAA,OAAA,KAAR,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,aAC3B,CAAA,CAAA,EAAA;AACA,UAAQ,OAAA,EAAA,CAAA;AAAA,SACV;AAAA,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAQ,OAAA,EAAA,CAAA;AAAA,SACV;AAAA,OACF;AAAA,KAEF,GAAA,WAAA,CAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,KAClE;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA,CAAA;AAAA,OACrE;AAAA,KACF,CAAA;AAAA,KACC,CAAC,MAAA,EAAQ,OAAS,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA,CAAA;AAC1C;;;;"}
+{"version":3,"file":"useClickAway.js","sources":["../src/dropdown/useClickAway.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\n\nexport type ClickawayHook = (props: {\n  popperRef: RefObject<HTMLElement>;\n  rootRef: RefObject<HTMLElement>;\n  isOpen: boolean;\n  onClose: () => void;\n}) => void;\n\ntype MouseEventHandler = (e: MouseEvent) => void;\ntype KeyboardEventHandler = (e: KeyboardEvent) => void;\n\nconst NO_HANDLERS: [MouseEventHandler?, KeyboardEventHandler?] = [];\n\nexport const useClickAway: ClickawayHook = ({\n  popperRef,\n  rootRef,\n  isOpen,\n  onClose,\n}) => {\n  useEffect(() => {\n    const [clickHandler, escapeKeyHandler] = isOpen\n      ? [\n          (evt: MouseEvent) => {\n            const targetElement = evt.target as HTMLElement;\n            if (\n              !popperRef.current?.contains(targetElement) &&\n              !rootRef.current?.contains(targetElement)\n            ) {\n              onClose();\n            }\n          },\n          (e: KeyboardEvent) => {\n            if (e.key === \"Escape\") {\n              onClose();\n            }\n          },\n        ]\n      : NO_HANDLERS;\n\n    if (clickHandler && escapeKeyHandler) {\n      document.body.addEventListener(\"mousedown\", clickHandler, true);\n      document.body.addEventListener(\"keydown\", escapeKeyHandler, true);\n    }\n\n    return () => {\n      if (clickHandler && escapeKeyHandler) {\n        document.body.removeEventListener(\"mousedown\", clickHandler, true);\n        document.body.removeEventListener(\"keydown\", escapeKeyHandler, true);\n      }\n    };\n  }, [isOpen, onClose, popperRef, rootRef]);\n};\n"],"names":["useEffect"],"mappings":";;;;AAYA,MAAM,cAA2D,EAAC;AAE3D,MAAM,eAA8B,CAAC;AAAA,EAC1C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,CAAC,YAAA,EAAc,gBAAgB,CAAA,GAAI,MACrC,GAAA;AAAA,MACE,CAAC,GAAoB,KAAA;AAvB/B,QAAA,IAAA,EAAA,EAAA,EAAA;AAwBY,QAAA,MAAM,gBAAgB,GAAI,CAAA,MAAA;AAC1B,QACE,IAAA,EAAA,CAAC,EAAU,GAAA,SAAA,CAAA,OAAA,KAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,aAC7B,CAAA,CAAA,IAAA,EAAA,CAAC,EAAQ,GAAA,OAAA,CAAA,OAAA,KAAR,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAS,aAC3B,CAAA,CAAA,EAAA;AACA,UAAQ,OAAA,EAAA;AAAA;AACV,OACF;AAAA,MACA,CAAC,CAAqB,KAAA;AACpB,QAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,UAAQ,OAAA,EAAA;AAAA;AACV;AACF,KAEF,GAAA,WAAA;AAEJ,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA;AAC9D,MAAA,QAAA,CAAS,IAAK,CAAA,gBAAA,CAAiB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA;AAAA;AAGlE,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,WAAa,EAAA,YAAA,EAAc,IAAI,CAAA;AACjE,QAAA,QAAA,CAAS,IAAK,CAAA,mBAAA,CAAoB,SAAW,EAAA,gBAAA,EAAkB,IAAI,CAAA;AAAA;AACrE,KACF;AAAA,KACC,CAAC,MAAA,EAAQ,OAAS,EAAA,SAAA,EAAW,OAAO,CAAC,CAAA;AAC1C;;;;"}

package/dist-cjs/dropdown/useDropdown.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@salt-ds/core');
 var react = require('react');
 require('../common-hooks/collectionProvider.js');
@@ -34,7 +32,7 @@ const useDropdown = ({
   const isMultiSelect = selectionStrategy === "multiple" || selectionStrategy === "extended";
   const [isOpen, setIsOpen] = core.useControlled({
     controlled: isOpenProp,
-    default: defaultIsOpen != null ? defaultIsOpen : false,
+    default: defaultIsOpen ?? false,
     name: "useDropdownList"
   });
   const handleSelectionChange = react.useCallback(
@@ -59,7 +57,7 @@ const useDropdown = ({
   );
   const listHook = useList.useList({
     collectionHook,
-    defaultHighlightedIndex: (defaultHighlightedIndexProp != null ? defaultHighlightedIndexProp : highlightedIndexProp === void 0) ? 0 : void 0,
+    defaultHighlightedIndex: defaultHighlightedIndexProp ?? highlightedIndexProp === void 0 ? 0 : void 0,
     defaultSelected,
     label: "useDropDownList",
     onSelectionChange: handleSelectionChange,

package/dist-cjs/dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n  type CollectionItem,\n  type SelectHandler,\n  type SelectionChangeHandler,\n  type SelectionStrategy,\n  itemToString as defaultItemToString,\n} from \"../common-hooks\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\n\nconst NULL_REF = { current: null };\n\nexport interface DropdownListHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, Strategy>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n}\n\nexport interface DropdownListHookResult<\n  Item,\n  Selection extends SelectionStrategy,\n> extends Partial<ListHookResult<Item, Selection>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <\n  Item,\n  Selection extends SelectionStrategy = \"default\",\n>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  onSelect,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, Selection>): DropdownListHookResult<\n  Item,\n  Selection\n> => {\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelectionChange?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange],\n  );\n\n  const handleSelect = useCallback<SelectHandler<Item>>(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelect?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelect],\n  );\n\n  const listHook = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex:\n      (defaultHighlightedIndexProp ?? highlightedIndexProp === undefined)\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"useDropDownList\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: handleSelect,\n    containerRef: NULL_REF,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange],\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (isMultiSelect && Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected as CollectionItem<Item>[];\n      if (selectedItems.length === 0) {\n        return undefined;\n      }\n      if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      }\n      return `${selectedItems.length} items selected`;\n    }\n    const selectedItem = listHook.selected as CollectionItem<Item>;\n    return selectedItem == null || selectedItem.value === null\n      ? undefined\n      : itemToString(selectedItem.value);\n  }, [isMultiSelect, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","useControlled","useCallback","selected","useList","useMemo"],"mappings":"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"}
+{"version":3,"file":"useDropdown.js","sources":["../src/dropdown/useDropdown.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n  type CollectionItem,\n  type SelectHandler,\n  type SelectionChangeHandler,\n  type SelectionStrategy,\n  itemToString as defaultItemToString,\n} from \"../common-hooks\";\nimport { type ListHookProps, type ListHookResult, useList } from \"../list\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\n\nconst NULL_REF = { current: null };\n\nexport interface DropdownListHookProps<Item, Strategy extends SelectionStrategy>\n  extends Partial<Omit<DropdownHookProps, \"onKeyDown\">>,\n    Omit<ListHookProps<Item, Strategy>, \"containerRef\"> {\n  itemToString?: (item: Item) => string;\n}\n\nexport interface DropdownListHookResult<\n  Item,\n  Selection extends SelectionStrategy,\n> extends Partial<ListHookResult<Item, Selection>>,\n    Partial<DropdownHookResult> {\n  onOpenChange: any;\n  triggerLabel?: string;\n}\n\nexport const useDropdown = <\n  Item,\n  Selection extends SelectionStrategy = \"default\",\n>({\n  collectionHook,\n  defaultHighlightedIndex: defaultHighlightedIndexProp,\n  defaultIsOpen,\n  defaultSelected,\n  highlightedIndex: highlightedIndexProp,\n  isOpen: isOpenProp,\n  itemToString = defaultItemToString,\n  onHighlight,\n  onOpenChange,\n  onSelectionChange,\n  onSelect,\n  selected,\n  selectionStrategy,\n}: DropdownListHookProps<Item, Selection>): DropdownListHookResult<\n  Item,\n  Selection\n> => {\n  const isMultiSelect =\n    selectionStrategy === \"multiple\" || selectionStrategy === \"extended\";\n\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen ?? false,\n    name: \"useDropdownList\",\n  });\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<Item, Selection>\n  >(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelectionChange?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelectionChange],\n  );\n\n  const handleSelect = useCallback<SelectHandler<Item>>(\n    (evt, selected) => {\n      if (!isMultiSelect) {\n        setIsOpen(false);\n        onOpenChange?.(false);\n      }\n      onSelect?.(evt, selected);\n    },\n    [isMultiSelect, onOpenChange, onSelect],\n  );\n\n  const listHook = useList<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex:\n      (defaultHighlightedIndexProp ?? highlightedIndexProp === undefined)\n        ? 0\n        : undefined,\n    defaultSelected,\n    label: \"useDropDownList\",\n    onSelectionChange: handleSelectionChange,\n    onSelect: handleSelect,\n    containerRef: NULL_REF,\n    highlightedIndex: highlightedIndexProp,\n    onHighlight,\n    selected,\n    selectionStrategy,\n    tabToSelect: !isMultiSelect,\n  });\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      onOpenChange?.(open);\n    },\n    [onOpenChange],\n  );\n\n  const triggerLabel = useMemo(() => {\n    if (isMultiSelect && Array.isArray(listHook.selected)) {\n      const selectedItems = listHook.selected as CollectionItem<Item>[];\n      if (selectedItems.length === 0) {\n        return undefined;\n      }\n      if (selectedItems.length === 1) {\n        const { value } = selectedItems[0];\n        return value === null ? undefined : itemToString(value);\n      }\n      return `${selectedItems.length} items selected`;\n    }\n    const selectedItem = listHook.selected as CollectionItem<Item>;\n    return selectedItem == null || selectedItem.value === null\n      ? undefined\n      : itemToString(selectedItem.value);\n  }, [isMultiSelect, itemToString, listHook.selected]);\n\n  return {\n    isOpen,\n    onOpenChange: handleOpenChange,\n    triggerLabel,\n    ...listHook,\n  };\n};\n"],"names":["itemToString","defaultItemToString","useControlled","useCallback","selected","useList","useMemo"],"mappings":"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"}

package/dist-cjs/dropdown/useDropdownBase.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@salt-ds/core');
 var react = require('react');
 require('../form-field-context-legacy/FormFieldLegacyContext.js');
@@ -15,6 +13,7 @@ const useDropdownBase = ({
   ariaLabelledBy: ariaLabelledByProp,
   defaultIsOpen,
   disabled,
+  // TODO check how we're using fullWidth, do we need a separate value for the popup component
   fullWidth: fullWidthProp,
   id,
   isOpen: isOpenProp,
@@ -25,7 +24,6 @@ const useDropdownBase = ({
   rootRef,
   width
 }) => {
-  var _a;
   const justFocused = react.useRef(null);
   const popperRef = react.useRef(null);
   const popperCallbackRef = react.useCallback((element) => {
@@ -43,7 +41,7 @@ const useDropdownBase = ({
     a11yProps: { "aria-labelledby": ariaLabelledBy, ...restA11yProps } = {}
   } = useFormFieldLegacyProps.useFormFieldLegacyProps();
   const [popup, setPopup] = react.useState({
-    width: (_a = popupWidthProp != null ? popupWidthProp : width) != null ? _a : 0
+    width: popupWidthProp ?? width ?? 0
   });
   const showDropdown = react.useCallback(() => {
     setIsOpen(true);
@@ -99,7 +97,7 @@ const useDropdownBase = ({
     },
     [hideDropdown, isOpen, onKeyDownProp, showDropdown]
   );
-  const fullWidth = fullWidthProp != null ? fullWidthProp : inFormField;
+  const fullWidth = fullWidthProp ?? inFormField;
   const measurements = fullWidth ? useResizeObserver.WidthOnly : NO_OBSERVER;
   useResizeObserver.useResizeObserver(rootRef, measurements, setPopup, fullWidth);
   const componentId = `${id}-dropdown`;

package/dist-cjs/dropdown/useDropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { WidthOnly, type measurements, useResizeObserver } from \"../responsive\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  ariaLabelledBy: ariaLabelledByProp,\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openOnFocus,\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n  const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n    popperRef.current = element;\n  }, []);\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n\n  const {\n    inFormField,\n    setFocused: setFormFieldFocused,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldLegacyProps();\n\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    if (!disabled) {\n      setFormFieldFocused?.(true);\n\n      if (openOnFocus) {\n        setIsOpen(true);\n        onOpenChange?.(true);\n        // Suppress response to click if click was the cause of focus\n        justFocused.current = window.setTimeout(() => {\n          justFocused.current = null;\n        }, 1000);\n      }\n    }\n  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused]);\n\n  const handleTriggerBlur = useCallback(() => {\n    setFormFieldFocused?.(false);\n  }, [setFormFieldFocused]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key,\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, onOpenChange],\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n        // No preventDefault here, this behaviour does not need to be exclusive\n        hideDropdown();\n      } else if (\n        (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n        !isOpen\n      ) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, showDropdown],\n  );\n\n  const fullWidth = fullWidthProp ?? inFormField;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  const getAriaLabelledBy = (\n    labelledBy: string | undefined,\n    labelledByProp: string | undefined,\n  ): string | undefined => {\n    if (labelledBy === undefined && labelledByProp === undefined) {\n      return undefined;\n    }\n    return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n  };\n\n  // TODO do we use aria-popup - valid values are menu, dialog, grid, tree, listbox\n  const triggerProps = {\n    ...restA11yProps,\n    \"aria-expanded\": isOpen,\n    \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: handleTriggerFocus,\n    onBlur: handleTriggerBlur,\n    role: \"listbox\",\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    \"aria-labelledby\": ariaLabelledBy,\n    id: componentId,\n    width: popup.width,\n  };\n\n  return {\n    componentProps: dropdownComponentProps,\n    popperRef: popperCallbackRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["useRef","useCallback","useControlled","useFormFieldLegacyProps","useState","useClickAway","WidthOnly","useResizeObserver"],"mappings":"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"}
+{"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { WidthOnly, type measurements, useResizeObserver } from \"../responsive\";\nimport type { DropdownHookProps, DropdownHookResult } from \"./dropdownTypes\";\nimport { useClickAway } from \"./useClickAway\";\n\nconst NO_OBSERVER: string[] = [];\n\nexport const useDropdownBase = ({\n  ariaLabelledBy: ariaLabelledByProp,\n  defaultIsOpen,\n  disabled,\n  // TODO check how we're using fullWidth, do we need a separate value for the popup component\n  fullWidth: fullWidthProp,\n  id,\n  isOpen: isOpenProp,\n  onOpenChange,\n  onKeyDown: onKeyDownProp,\n  openOnFocus,\n  popupWidth: popupWidthProp,\n  rootRef,\n  width,\n}: DropdownHookProps): DropdownHookResult => {\n  const justFocused = useRef<number | null>(null);\n  const popperRef = useRef<HTMLElement | null>(null);\n  const popperCallbackRef = useCallback((element: HTMLElement | null) => {\n    popperRef.current = element;\n  }, []);\n  const [isOpen, setIsOpen] = useControlled({\n    controlled: isOpenProp,\n    default: Boolean(defaultIsOpen),\n    name: \"useDropdown\",\n    state: \"isOpen\",\n  });\n\n  const {\n    inFormField,\n    setFocused: setFormFieldFocused,\n    a11yProps: { \"aria-labelledby\": ariaLabelledBy, ...restA11yProps } = {},\n  } = useFormFieldLegacyProps();\n\n  const [popup, setPopup] = useState<measurements>({\n    width: popupWidthProp ?? width ?? 0,\n  });\n\n  const showDropdown = useCallback(() => {\n    setIsOpen(true);\n    onOpenChange?.(true);\n  }, [onOpenChange]);\n\n  const hideDropdown = useCallback(() => {\n    setIsOpen(false);\n    onOpenChange?.(false);\n  }, [onOpenChange]);\n\n  useClickAway({\n    popperRef,\n    rootRef,\n    isOpen,\n    onClose: hideDropdown,\n  });\n\n  const handleTriggerFocus = useCallback(() => {\n    if (!disabled) {\n      setFormFieldFocused?.(true);\n\n      if (openOnFocus) {\n        setIsOpen(true);\n        onOpenChange?.(true);\n        // Suppress response to click if click was the cause of focus\n        justFocused.current = window.setTimeout(() => {\n          justFocused.current = null;\n        }, 1000);\n      }\n    }\n  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused]);\n\n  const handleTriggerBlur = useCallback(() => {\n    setFormFieldFocused?.(false);\n  }, [setFormFieldFocused]);\n\n  const handleTriggerToggle = useCallback(\n    (e: MouseEvent) => {\n      // Do not trigger menu open for 'Enter' and 'SPACE' key as they're handled in `handleKeyDown`\n      if (\n        [\"Enter\", \" \"].indexOf(\n          (e as unknown as KeyboardEvent<HTMLDivElement>).key,\n        ) === -1\n      ) {\n        const newIsOpen = !isOpen;\n        setIsOpen(newIsOpen);\n        onOpenChange?.(newIsOpen);\n      }\n    },\n    [isOpen, onOpenChange],\n  );\n\n  const handleKeydown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if ((evt.key === \"Tab\" || evt.key === \"Escape\") && isOpen) {\n        // No preventDefault here, this behaviour does not need to be exclusive\n        hideDropdown();\n      } else if (\n        (evt.key === \"Enter\" || evt.key === \"ArrowDown\" || evt.key === \" \") &&\n        !isOpen\n      ) {\n        evt.preventDefault();\n        showDropdown();\n      } else {\n        onKeyDownProp?.(evt);\n      }\n    },\n    [hideDropdown, isOpen, onKeyDownProp, showDropdown],\n  );\n\n  const fullWidth = fullWidthProp ?? inFormField;\n  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;\n  useResizeObserver(rootRef, measurements, setPopup, fullWidth);\n\n  const componentId = `${id}-dropdown`;\n\n  const getAriaLabelledBy = (\n    labelledBy: string | undefined,\n    labelledByProp: string | undefined,\n  ): string | undefined => {\n    if (labelledBy === undefined && labelledByProp === undefined) {\n      return undefined;\n    }\n    return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n  };\n\n  // TODO do we use aria-popup - valid values are menu, dialog, grid, tree, listbox\n  const triggerProps = {\n    ...restA11yProps,\n    \"aria-expanded\": isOpen,\n    \"aria-labelledby\": getAriaLabelledBy(ariaLabelledBy, ariaLabelledByProp),\n    \"aria-owns\": isOpen ? componentId : undefined,\n    id: `${id}-control`,\n    onClick: disabled || openOnFocus ? undefined : handleTriggerToggle,\n    onFocus: handleTriggerFocus,\n    onBlur: handleTriggerBlur,\n    role: \"listbox\",\n    onKeyDown: disabled ? undefined : handleKeydown,\n    style: { width: fullWidth ? undefined : width },\n  };\n\n  const dropdownComponentProps = {\n    \"aria-labelledby\": ariaLabelledBy,\n    id: componentId,\n    width: popup.width,\n  };\n\n  return {\n    componentProps: dropdownComponentProps,\n    popperRef: popperCallbackRef,\n    isOpen,\n    label: \"Dropdown Button\",\n    triggerProps,\n  };\n};\n"],"names":["useRef","useCallback","useControlled","useFormFieldLegacyProps","useState","useClickAway","WidthOnly","useResizeObserver"],"mappings":";;;;;;;;;;AAQA,MAAM,cAAwB,EAAC;AAExB,MAAM,kBAAkB,CAAC;AAAA,EAC9B,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;AAAA;AAAA,EAEA,SAAW,EAAA,aAAA;AAAA,EACX,EAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,YAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,WAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAA6C,KAAA;AAC3C,EAAM,MAAA,WAAA,GAAcA,aAAsB,IAAI,CAAA;AAC9C,EAAM,MAAA,SAAA,GAAYA,aAA2B,IAAI,CAAA;AACjD,EAAM,MAAA,iBAAA,GAAoBC,iBAAY,CAAA,CAAC,OAAgC,KAAA;AACrE,IAAA,SAAA,CAAU,OAAU,GAAA,OAAA;AAAA,GACtB,EAAG,EAAE,CAAA;AACL,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACxC,UAAY,EAAA,UAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,aAAa,CAAA;AAAA,IAC9B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,WAAW,EAAE,iBAAA,EAAmB,gBAAgB,GAAG,aAAA,KAAkB;AAAC,MACpEC,+CAAwB,EAAA;AAE5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,cAAuB,CAAA;AAAA,IAC/C,KAAA,EAAO,kBAAkB,KAAS,IAAA;AAAA,GACnC,CAAA;AAED,EAAM,MAAA,YAAA,GAAeH,kBAAY,MAAM;AACrC,IAAA,SAAA,CAAU,IAAI,CAAA;AACd,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA;AAAA,GACjB,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAM,MAAA,YAAA,GAAeA,kBAAY,MAAM;AACrC,IAAA,SAAA,CAAU,KAAK,CAAA;AACf,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA;AAAA,GACjB,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAaI,yBAAA,CAAA;AAAA,IACX,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAS,EAAA;AAAA,GACV,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqBJ,kBAAY,MAAM;AAC3C,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAsB,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAA,IAAA,CAAA;AAEtB,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,SAAA,CAAU,IAAI,CAAA;AACd,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA;AAEf,QAAY,WAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC5C,UAAA,WAAA,CAAY,OAAU,GAAA,IAAA;AAAA,WACrB,GAAI,CAAA;AAAA;AACT;AACF,KACC,CAAC,QAAA,EAAU,YAAc,EAAA,WAAA,EAAa,mBAAmB,CAAC,CAAA;AAE7D,EAAM,MAAA,iBAAA,GAAoBA,kBAAY,MAAM;AAC1C,IAAsB,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAA,KAAA,CAAA;AAAA,GACxB,EAAG,CAAC,mBAAmB,CAAC,CAAA;AAExB,EAAA,MAAM,mBAAsB,GAAAA,iBAAA;AAAA,IAC1B,CAAC,CAAkB,KAAA;AAEjB,MACE,IAAA,CAAC,OAAS,EAAA,GAAG,CAAE,CAAA,OAAA;AAAA,QACZ,CAA+C,CAAA;AAAA,YAC5C,CACN,CAAA,EAAA;AACA,QAAA,MAAM,YAAY,CAAC,MAAA;AACnB,QAAA,SAAA,CAAU,SAAS,CAAA;AACnB,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,SAAA,CAAA;AAAA;AACjB,KACF;AAAA,IACA,CAAC,QAAQ,YAAY;AAAA,GACvB;AAEA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,GAAoC,KAAA;AACnC,MAAA,IAAA,CAAK,IAAI,GAAQ,KAAA,KAAA,IAAS,GAAI,CAAA,GAAA,KAAQ,aAAa,MAAQ,EAAA;AAEzD,QAAa,YAAA,EAAA;AAAA,OACf,MAAA,IAAA,CACG,GAAI,CAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,CAAI,GAAQ,KAAA,WAAA,IAAe,GAAI,CAAA,GAAA,KAAQ,GAC/D,KAAA,CAAC,MACD,EAAA;AACA,QAAA,GAAA,CAAI,cAAe,EAAA;AACnB,QAAa,YAAA,EAAA;AAAA,OACR,MAAA;AACL,QAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,GAAA,CAAA;AAAA;AAClB,KACF;AAAA,IACA,CAAC,YAAA,EAAc,MAAQ,EAAA,aAAA,EAAe,YAAY;AAAA,GACpD;AAEA,EAAA,MAAM,YAAY,aAAiB,IAAA,WAAA;AACnC,EAAM,MAAA,YAAA,GAAe,YAAYK,2BAAY,GAAA,WAAA;AAC7C,EAAkBC,mCAAA,CAAA,OAAA,EAAS,YAAc,EAAA,QAAA,EAAU,SAAS,CAAA;AAE5D,EAAM,MAAA,WAAA,GAAc,GAAG,EAAE,CAAA,SAAA,CAAA;AAEzB,EAAM,MAAA,iBAAA,GAAoB,CACxB,UAAA,EACA,cACuB,KAAA;AACvB,IAAI,IAAA,UAAA,KAAe,KAAa,CAAA,IAAA,cAAA,KAAmB,KAAW,CAAA,EAAA;AAC5D,MAAO,OAAA,KAAA,CAAA;AAAA;AAET,IAAA,OAAO,CAAC,UAAA,EAAY,cAAc,CAAA,CAAE,MAAO,CAAA,CAAC,CAAM,KAAA,CAAC,CAAC,CAAC,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,GACjE;AAGA,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB,GAAG,aAAA;AAAA,IACH,eAAiB,EAAA,MAAA;AAAA,IACjB,iBAAA,EAAmB,iBAAkB,CAAA,cAAA,EAAgB,kBAAkB,CAAA;AAAA,IACvE,WAAA,EAAa,SAAS,WAAc,GAAA,KAAA,CAAA;AAAA,IACpC,EAAA,EAAI,GAAG,EAAE,CAAA,QAAA,CAAA;AAAA,IACT,OAAA,EAAS,QAAY,IAAA,WAAA,GAAc,KAAY,CAAA,GAAA,mBAAA;AAAA,IAC/C,OAAS,EAAA,kBAAA;AAAA,IACT,MAAQ,EAAA,iBAAA;AAAA,IACR,IAAM,EAAA,SAAA;AAAA,IACN,SAAA,EAAW,WAAW,KAAY,CAAA,GAAA,aAAA;AAAA,IAClC,KAAO,EAAA,EAAE,KAAO,EAAA,SAAA,GAAY,SAAY,KAAM;AAAA,GAChD;AAEA,EAAA,MAAM,sBAAyB,GAAA;AAAA,IAC7B,iBAAmB,EAAA,cAAA;AAAA,IACnB,EAAI,EAAA,WAAA;AAAA,IACJ,OAAO,KAAM,CAAA;AAAA,GACf;AAEA,EAAO,OAAA;AAAA,IACL,cAAgB,EAAA,sBAAA;AAAA,IAChB,SAAW,EAAA,iBAAA;AAAA,IACX,MAAA;AAAA,IACA,KAAO,EAAA,iBAAA;AAAA,IACP;AAAA,GACF;AACF;;;;"}

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
@@ -32,7 +30,7 @@ const EditableLabel = react.forwardRef(function EditableLabel2({
   const inputRef = react.useRef(null);
   const [value, setValue] = core.useControlled({
     controlled: valueProp,
-    default: defaultValue != null ? defaultValue : "",
+    default: defaultValue ?? "",
     name: "EditableLabel",
     state: "value"
   });
@@ -94,22 +92,28 @@ const EditableLabel = react.forwardRef(function EditableLabel2({
   const className = clsx.clsx(classBase, classNameProp, {
     [`${classBase}-editing`]: editing
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className,
-    onDoubleClick: handleDoubleClick,
-    "data-text": value,
-    ref: forwardedRef,
-    children: editing ? /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
-      inputProps: { className: `${classBase}-input` },
-      value,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      ref: inputRef,
-      style: { padding: 0 },
-      textAlign: "left"
-    }) : value
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className,
+      onDoubleClick: handleDoubleClick,
+      "data-text": value,
+      ref: forwardedRef,
+      children: editing ? /* @__PURE__ */ jsxRuntime.jsx(
+        InputLegacy.InputLegacy,
+        {
+          inputProps: { className: `${classBase}-input` },
+          value,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          ref: inputRef,
+          style: { padding: 0 },
+          textAlign: "left"
+        }
+      ) : value
+    }
+  );
 });
 
 exports.EditableLabel = EditableLabel;

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

@@ -1 +1 @@
-{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport React, {\n  type ChangeEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode?.();\n  }, [onEnterEditMode]);\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?.(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    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":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useIsomorphicLayoutEffect","useCallback","value","clsx","jsx","Input"],"mappings":"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"}
+{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode?.();\n  }, [onEnterEditMode]);\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?.(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    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":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useIsomorphicLayoutEffect","useCallback","value","clsx","jsx","Input"],"mappings":"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"}

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@salt-ds/core');
 
 const FormFieldLegacyContext = core.createContext(

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLegacyContext.js","sources":["../src/form-field-context-legacy/FormFieldLegacyContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type {\n  Dispatch,\n  FocusEventHandler,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport type { 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":["createContext"],"mappings":";;;;;;AAkBO,MAAM,sBAAyB,GAAAA,kBAAA;AAAA,EACpC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}
+{"version":3,"file":"FormFieldLegacyContext.js","sources":["../src/form-field-context-legacy/FormFieldLegacyContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type {\n  Dispatch,\n  FocusEventHandler,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport type { 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":["createContext"],"mappings":";;;;AAkBO,MAAM,sBAAyB,GAAAA,kBAAA;AAAA,EACpC,kBAAA;AAAA,EACA;AACF;;;;"}

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var core = require('@salt-ds/core');
 var react = require('react');
 var FormFieldLegacyContext = require('./FormFieldLegacyContext.js');

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

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldLegacyProps.js","sources":["../src/form-field-context-legacy/useFormFieldLegacyProps.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport {\n  FormFieldLegacyContext,\n  type 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":["useContext","FormFieldLegacyContext","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAWO,SAAS,uBAAwB,CAAA;AAAA,EACtC,YAAA;AACF,CAAA,GAAkC,EAA0C,EAAA;AAE1E,EAAA,MAAM,EAAE,UAAe,EAAA,GAAA,cAAA,KACrBA,gBAAW,CAAAC,6CAAsB,KAAK,EAAC,CAAA;AAEzC,EAAAC,8BAAA,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;;;;"}
+{"version":3,"file":"useFormFieldLegacyProps.js","sources":["../src/form-field-context-legacy/useFormFieldLegacyProps.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport {\n  FormFieldLegacyContext,\n  type 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":["useContext","FormFieldLegacyContext","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAWO,SAAS,uBAAwB,CAAA;AAAA,EACtC;AACF,CAAA,GAAkC,EAA0C,EAAA;AAE1E,EAAM,MAAA,EAAE,YAAY,GAAG,cAAA,KACrBA,gBAAW,CAAAC,6CAAsB,KAAK,EAAC;AAEzC,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,YAAA,KAAiB,UAAa,UAAY,EAAA;AAC5C,MAAA,UAAA,CAAW,YAAY,CAAA;AAAA;AACzB,GACC,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA;AAE7B,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,GAAG;AAAA,GACL;AACF;;;;"}

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

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
@@ -9,28 +7,28 @@ var window = require('@salt-ds/window');
 var FormActivationIndicator$1 = require('./FormActivationIndicator.css.js');
 
 const ErrorIndicatorIcon = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", {
-    viewBox: "0 0 16 16",
-    focusable: false,
-    "data-testid": "ErrorIndicatorIcon",
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("circle", {
-      cx: 8,
-      cy: 8,
-      r: 8
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      focusable: false,
+      "data-testid": "ErrorIndicatorIcon",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 8, cy: 8, r: 8 })
+    }
+  );
 };
 const WarningIndicatorIcon = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", {
-    viewBox: "0 0 16 16",
-    focusable: false,
-    "data-testid": "WarningIndicatorIcon",
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx("polygon", {
-      points: "0, 16 16, 16 16, 0"
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      focusable: false,
+      "data-testid": "WarningIndicatorIcon",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "0, 16 16, 16 16, 0" })
+    }
+  );
 };
 const withBaseName = core.makePrefixer("saltFormActivationIndicator");
 const ActivationIndicatorIcon = ({
@@ -38,14 +36,10 @@ const ActivationIndicatorIcon = ({
   ...restSvgProps
 }) => {
   if (validationStatus === "error") {
-    return /* @__PURE__ */ jsxRuntime.jsx(ErrorIndicatorIcon, {
-      ...restSvgProps
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(ErrorIndicatorIcon, { ...restSvgProps });
   }
   if (validationStatus === "warning") {
-    return /* @__PURE__ */ jsxRuntime.jsx(WarningIndicatorIcon, {
-      ...restSvgProps
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(WarningIndicatorIcon, { ...restSvgProps });
   }
   return null;
 };
@@ -60,16 +54,13 @@ const FormActivationIndicator = ({
     window: targetWindow
   });
   const rootClass = "saltFormActivationIndicator";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: withBaseName(),
-    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: withBaseName("bar"),
-      children: hasIcon && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(ActivationIndicatorIcon, {
-        className: `${rootClass}-icon`,
-        validationStatus
-      })
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName(), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("bar"), children: hasIcon && validationStatus && /* @__PURE__ */ jsxRuntime.jsx(
+    ActivationIndicatorIcon,
+    {
+      className: `${rootClass}-icon`,
+      validationStatus
+    }
+  ) }) });
 };
 
 exports.FormActivationIndicator = FormActivationIndicator;

package/dist-cjs/form-field-legacy/FormActivationIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormActivationIndicator.js","sources":["../src/form-field-legacy/FormActivationIndicator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { SVGAttributes } from \"react\";\nimport type { FormFieldLegacyProps as FormFieldProps } from \"./FormFieldLegacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formActivationIndicatorCss from \"./FormActivationIndicator.css\";\n\nconst ErrorIndicatorIcon = (props: SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      focusable={false}\n      data-testid=\"ErrorIndicatorIcon\"\n      {...props}\n    >\n      <circle cx={8} cy={8} r={8} />\n    </svg>\n  );\n};\n\nconst WarningIndicatorIcon = (props: SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      focusable={false}\n      data-testid=\"WarningIndicatorIcon\"\n      {...props}\n    >\n      <polygon points=\"0, 16 16, 16 16, 0\" />\n    </svg>\n  );\n};\n\nconst withBaseName = makePrefixer(\"saltFormActivationIndicator\");\n\nconst ActivationIndicatorIcon = ({\n  validationStatus,\n  ...restSvgProps\n}: Pick<FormFieldProps, \"validationStatus\"> & SVGAttributes<SVGSVGElement>) => {\n  if (validationStatus === \"error\") {\n    return <ErrorIndicatorIcon {...restSvgProps} />;\n  }\n  if (validationStatus === \"warning\") {\n    return <WarningIndicatorIcon {...restSvgProps} />;\n  }\n  return null;\n};\n\n// Removed `enabled` prop, it's better to let parent to control render\nexport interface FormActivationIndicatorProps\n  extends Pick<FormFieldProps, \"validationStatus\"> {\n  hasIcon?: boolean;\n}\n\nexport const FormActivationIndicator = ({\n  hasIcon,\n  validationStatus,\n}: FormActivationIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-activation-indicator\",\n    css: formActivationIndicatorCss,\n    window: targetWindow,\n  });\n\n  const rootClass = \"saltFormActivationIndicator\";\n\n  return (\n    <div className={withBaseName()}>\n      <div className={withBaseName(\"bar\")}>\n        {hasIcon && validationStatus && (\n          <ActivationIndicatorIcon\n            className={`${rootClass}-icon`}\n            validationStatus={validationStatus}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["jsx","makePrefixer","useWindow","useComponentCssInjection","formActivationIndicatorCss"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAA,GAAqB,CAAC,KAAwC,KAAA;AAClE,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,oBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAAA,cAAA,CAAA,QAAA,EAAA;AAAA,MAAO,EAAI,EAAA,CAAA;AAAA,MAAG,EAAI,EAAA,CAAA;AAAA,MAAG,CAAG,EAAA,CAAA;AAAA,KAAG,CAAA;AAAA,GAC9B,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,oBAAA,GAAuB,CAAC,KAAwC,KAAA;AACpE,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,sBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAAA,cAAA,CAAA,SAAA,EAAA;AAAA,MAAQ,MAAO,EAAA,oBAAA;AAAA,KAAqB,CAAA;AAAA,GACvC,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,YAAA,GAAeC,kBAAa,6BAA6B,CAAA,CAAA;AAE/D,MAAM,0BAA0B,CAAC;AAAA,EAC/B,gBAAA;AAAA,EACG,GAAA,YAAA;AACL,CAA+E,KAAA;AAC7E,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,uBAAQD,cAAA,CAAA,kBAAA,EAAA;AAAA,MAAoB,GAAG,YAAA;AAAA,KAAc,CAAA,CAAA;AAAA,GAC/C;AACA,EAAA,IAAI,qBAAqB,SAAW,EAAA;AAClC,IAAA,uBAAQA,cAAA,CAAA,oBAAA,EAAA;AAAA,MAAsB,GAAG,YAAA;AAAA,KAAc,CAAA,CAAA;AAAA,GACjD;AACA,EAAO,OAAA,IAAA,CAAA;AACT,CAAA,CAAA;AAQO,MAAM,0BAA0B,CAAC;AAAA,EACtC,OAAA;AAAA,EACA,gBAAA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,eAAeE,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gCAAA;AAAA,IACR,GAAK,EAAAC,yBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAY,GAAA,6BAAA,CAAA;AAElB,EAAA,uBACGJ,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAC3B,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,MAC/B,QAAA,EAAA,OAAA,IAAW,oCACTA,cAAA,CAAA,uBAAA,EAAA;AAAA,QACC,WAAW,CAAG,EAAA,SAAA,CAAA,KAAA,CAAA;AAAA,QACd,gBAAA;AAAA,OACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormActivationIndicator.js","sources":["../src/form-field-legacy/FormActivationIndicator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport type { SVGAttributes } from \"react\";\nimport type { FormFieldLegacyProps as FormFieldProps } from \"./FormFieldLegacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport formActivationIndicatorCss from \"./FormActivationIndicator.css\";\n\nconst ErrorIndicatorIcon = (props: SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      focusable={false}\n      data-testid=\"ErrorIndicatorIcon\"\n      {...props}\n    >\n      <circle cx={8} cy={8} r={8} />\n    </svg>\n  );\n};\n\nconst WarningIndicatorIcon = (props: SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      focusable={false}\n      data-testid=\"WarningIndicatorIcon\"\n      {...props}\n    >\n      <polygon points=\"0, 16 16, 16 16, 0\" />\n    </svg>\n  );\n};\n\nconst withBaseName = makePrefixer(\"saltFormActivationIndicator\");\n\nconst ActivationIndicatorIcon = ({\n  validationStatus,\n  ...restSvgProps\n}: Pick<FormFieldProps, \"validationStatus\"> & SVGAttributes<SVGSVGElement>) => {\n  if (validationStatus === \"error\") {\n    return <ErrorIndicatorIcon {...restSvgProps} />;\n  }\n  if (validationStatus === \"warning\") {\n    return <WarningIndicatorIcon {...restSvgProps} />;\n  }\n  return null;\n};\n\n// Removed `enabled` prop, it's better to let parent to control render\nexport interface FormActivationIndicatorProps\n  extends Pick<FormFieldProps, \"validationStatus\"> {\n  hasIcon?: boolean;\n}\n\nexport const FormActivationIndicator = ({\n  hasIcon,\n  validationStatus,\n}: FormActivationIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-activation-indicator\",\n    css: formActivationIndicatorCss,\n    window: targetWindow,\n  });\n\n  const rootClass = \"saltFormActivationIndicator\";\n\n  return (\n    <div className={withBaseName()}>\n      <div className={withBaseName(\"bar\")}>\n        {hasIcon && validationStatus && (\n          <ActivationIndicatorIcon\n            className={`${rootClass}-icon`}\n            validationStatus={validationStatus}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["jsx","makePrefixer","useWindow","useComponentCssInjection","formActivationIndicatorCss"],"mappings":";;;;;;;;AASA,MAAM,kBAAA,GAAqB,CAAC,KAAwC,KAAA;AAClE,EACE,uBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAA,KAAA;AAAA,MACX,aAAY,EAAA,oBAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEJ,yCAAC,QAAO,EAAA,EAAA,EAAA,EAAI,GAAG,EAAI,EAAA,CAAA,EAAG,GAAG,CAAG,EAAA;AAAA;AAAA,GAC9B;AAEJ,CAAA;AAEA,MAAM,oBAAA,GAAuB,CAAC,KAAwC,KAAA;AACpE,EACE,uBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,SAAW,EAAA,KAAA;AAAA,MACX,aAAY,EAAA,sBAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAA,cAAA,CAAC,SAAQ,EAAA,EAAA,MAAA,EAAO,oBAAqB,EAAA;AAAA;AAAA,GACvC;AAEJ,CAAA;AAEA,MAAM,YAAA,GAAeC,kBAAa,6BAA6B,CAAA;AAE/D,MAAM,0BAA0B,CAAC;AAAA,EAC/B,gBAAA;AAAA,EACA,GAAG;AACL,CAA+E,KAAA;AAC7E,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAO,uBAAAD,cAAA,CAAC,kBAAoB,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AAAA;AAE/C,EAAA,IAAI,qBAAqB,SAAW,EAAA;AAClC,IAAO,uBAAAA,cAAA,CAAC,oBAAsB,EAAA,EAAA,GAAG,YAAc,EAAA,CAAA;AAAA;AAEjD,EAAO,OAAA,IAAA;AACT,CAAA;AAQO,MAAM,0BAA0B,CAAC;AAAA,EACtC,OAAA;AAAA,EACA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,eAAeE,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gCAAA;AAAA,IACR,GAAK,EAAAC,yBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAY,GAAA,6BAAA;AAElB,EAAA,uBACGJ,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,EACd,EAAA,QAAA,kBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,KAAK,CAC/B,EAAA,QAAA,EAAA,OAAA,IAAW,gBACV,oBAAAA,cAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,MACvB;AAAA;AAAA,KAGN,CACF,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/form-field-legacy/FormFieldLegacy.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
@@ -118,10 +116,9 @@ const FormFieldLegacy = react.forwardRef(
     const inlineHelperText = renderHelperText && helperTextPlacement === "bottom";
     const tooltipHelperText = renderHelperText && helperTextPlacement === "tooltip" && !hasStatusIndicator;
     const handleTriggerRef = core.useForkRef(rootRef, ref);
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
-      disabled: !tooltipHelperText,
-      content: helperText,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, { disabled: !tooltipHelperText, content: helperText, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
         ref: handleTriggerRef,
         className: clsx.clsx(
           withBaseName(),
@@ -141,44 +138,56 @@ const FormFieldLegacy = react.forwardRef(
         ),
         ...eventHandlers,
         ...restProps,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(FormFieldLegacyContext.FormFieldLegacyContext.Provider, {
-          value: {
-            ...states,
-            ...dispatchers,
-            ...eventHandlers,
-            a11yProps: a11yValue,
-            inFormField: true,
-            ref: rootRef
-          },
-          children: [
-            hasLabel && /* @__PURE__ */ jsxRuntime.jsx(LabelComponent, {
-              ...LabelProps,
-              validationStatus,
-              hasStatusIndicator,
-              StatusIndicatorProps,
-              className: LabelProps.className,
-              label,
-              disabled,
-              readOnly,
-              required,
-              tooltipText: helperText,
-              id: labelId
-            }),
-            children,
-            /* @__PURE__ */ jsxRuntime.jsx(ActivationIndicatorComponent, {
-              hasIcon: !hasStatusIndicator,
-              validationStatus
-            }),
-            renderHelperText && /* @__PURE__ */ jsxRuntime.jsx(HelperTextComponent, {
-              helperText,
-              helperTextPlacement,
-              ...HelperTextProps,
-              id: helperTextId
-            })
-          ]
-        })
-      })
-    });
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          FormFieldLegacyContext.FormFieldLegacyContext.Provider,
+          {
+            value: {
+              ...states,
+              ...dispatchers,
+              ...eventHandlers,
+              a11yProps: a11yValue,
+              inFormField: true,
+              ref: rootRef
+            },
+            children: [
+              hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                LabelComponent,
+                {
+                  ...LabelProps,
+                  validationStatus,
+                  hasStatusIndicator,
+                  StatusIndicatorProps,
+                  className: LabelProps.className,
+                  label,
+                  disabled,
+                  readOnly,
+                  required,
+                  tooltipText: helperText,
+                  id: labelId
+                }
+              ),
+              children,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ActivationIndicatorComponent,
+                {
+                  hasIcon: !hasStatusIndicator,
+                  validationStatus
+                }
+              ),
+              renderHelperText && /* @__PURE__ */ jsxRuntime.jsx(
+                HelperTextComponent,
+                {
+                  helperText,
+                  helperTextPlacement,
+                  ...HelperTextProps,
+                  id: helperTextId
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) });
   }
 );