npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.48 → 1.0.0-alpha.49 - Mend

@salt-ds/lab 1.0.0-alpha.48 → 1.0.0-alpha.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1219) hide show

package/dist-es/deck-layout/DeckLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import {\n ~~Children~~,\n ~~CSSProperties~~,\n ~~forwardRef~~,\n ~~HTMLAttributes~~,\n useCallback,\n useState,\n} from \"react\";\nimport { ~~makePrefixer~~, ~~useIsomorphicLayoutEffect~~ ~~} from \"@salt-ds/core\";\nimport { DeckItem,~~ DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { ~~clsx~~ } from \"~~clsx~~\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ~~useComponentCssInjection~~ } from \"~~@salt-ds/styles~~\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" \| \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" \| \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" \| \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n The initial item to render.\n /\n activeIndex?: number;\n /\n * The animation when the slides are shown.\n /\n animation?: LayoutAnimation;\n /\n * The direction in which items will transition.\n /\n direction?: LayoutAnimationDirection;\n /\n * Props to be passed to the DeckItem component.\n /\n deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n function DeckLayout(\n {\n activeIndex = 0,\n animation,\n className,\n children,\n direction = \"horizontal\",\n style,\n deckItemProps,\n ...rest\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-deck-layout\",\n css: deckLayoutCss,\n window: targetWindow,\n });\n\n const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n const handleResize = useCallback(function handleResize(\n contentRect: DOMRect\n ) {\n setDeckItemHeight(contentRect.height);\n }~~,\n~~ []);\n\n useIsomorphicLayoutEffect(() => {\n if (!deckItemRef.current) {\n return undefined;\n }\n\n handleResize(deckItemRef.current.getBoundingClientRect());\n\n const observer = new ResizeObserver(\n ([{ contentRect }]: ResizeObserverEntry[]) => {\n handleResize(contentRect);\n }\n );\n observer.observe(deckItemRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, [deckItemRef, handleResize]);\n\n const deckLayoutStyles = {\n ...style,\n \"--deckLayout-width\": `${deckItemWidth}px`,\n \"--deckLayout-height\": `${deckItemHeight}px`,\n };\n\n const innerStyles = {\n \"--deckLayout-transform-value\": `-${activeIndex 100}%`,\n } as CSSProperties;\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n style={deckLayoutStyles}\n ref={ref}\n {...rest}\n >\n <div\n className={clsx(\n {\n [withBaseName(\"animate\")]: animation,\n },\n {\n [withBaseName(`${animation \|\| \"slide\"}-${direction}`)]: animation,\n }\n )}\n style={innerStyles}\n >\n {Children.map(children, (child, index) => {\n return (\n <DeckItem\n ref={deckItemRef}\n index={index}\n activeIndex={activeIndex}\n animation={animation}\n {...deckItemProps}\n >\n {child}\n </DeckItem>\n );\n })}\n </div>\n </div>\n );\n }\n);\n"],"names":["DeckLayout","deckLayoutCss","handleResize"],"mappings":";;;;;;;;;;;AAyCA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAE3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAY,GAAA,YAAA;AAAA,IACZ,KAAA;AAAA,IACA,aAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,WAAA,EAAa,aAAa,CAAA,GAAI,SAAyB,IAAI,CAAA,CAAA;AAElE,IAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAiB,CAAC,CAAA,CAAA;AAE9D,IAAA,MAAM,YAAe,GAAA,WAAA~~;AAAA~~,~~MAAY~~,SAASC,~~cACxC~~,WACA,EAAA;AACA,~~QAAA~~,iBAAA,CAAkB,YAAY,MAAM,CAAA,CAAA;AAAA,~~OACtC;AAAA~~,~~MACA~~,~~EAAC;AAAA~~,~~KAAC~~,CAAA;~~AAEF~~,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAI,IAAA,CAAC,YAAY,OAAS,EAAA;AACxB,QAAO,OAAA,KAAA,CAAA,CAAA;AAAA,OACT;AAEA,MAAa,YAAA,CAAA,WAAA,CAAY,OAAQ,CAAA,qBAAA,EAAuB,CAAA,CAAA;AAExD,MAAA,MAAM,WAAW,IAAI,cAAA;AAAA,QACnB,CAAC,CAAC,EAAE,WAAA,EAAa,CAA6B,KAAA;AAC5C,UAAA,YAAA,CAAa,WAAW,CAAA,CAAA;AAAA,SAC1B;AAAA,OACF,CAAA;AACA,MAAS,QAAA,CAAA,OAAA,CAAQ,YAAY,OAAO,CAAA,CAAA;AAEpC,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB,CAAA;AAAA,KACC,EAAA,CAAC,WAAa,EAAA,YAAY,CAAC,CAAA,CAAA;AAE9B,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,GAAG,KAAA;AAAA,MACH,sBAAsB,CAAG,EAAA,aAAA,CAAA,EAAA,CAAA;AAAA,MACzB,uBAAuB,CAAG,EAAA,cAAA,CAAA,EAAA,CAAA;AAAA,KAC5B,CAAA;AAEA,IAAA,MAAM,WAAc,GAAA;AAAA,MAClB,8BAAA,EAAgC,IAAI,WAAc,GAAA,GAAA,CAAA,CAAA,CAAA;AAAA,KACpD,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,KAAO,EAAA,gBAAA;AAAA,MACP,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT;AAAA,YACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,WAC7B;AAAA,UACA;AAAA,YACE,CAAC,YAAa,CAAA,CAAA,EAAG,SAAa,IAAA,OAAA,CAAA,CAAA,EAAW,WAAW,CAAI,GAAA,SAAA;AAAA,WAC1D;AAAA,SACF;AAAA,QACA,KAAO,EAAA,WAAA;AAAA,QAEN,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,QAAU,EAAA,CAAC,OAAO,KAAU,KAAA;AACxC,UAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,YACC,GAAK,EAAA,WAAA;AAAA,YACL,KAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA;AAAA,YACC,GAAG,aAAA;AAAA,YAEH,QAAA,EAAA,KAAA;AAAA,WACH,CAAA,CAAA;AAAA,SAEH,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n type CSSProperties,\n Children,\n type HTMLAttributes,\n forwardRef,\n useCallback,\n useState,\n} from \"react\";\nimport { DeckItem, type DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" \| \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" \| \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" \| \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n The initial item to render.\n /\n activeIndex?: number;\n /\n * The animation when the slides are shown.\n /\n animation?: LayoutAnimation;\n /\n * The direction in which items will transition.\n /\n direction?: LayoutAnimationDirection;\n /\n * Props to be passed to the DeckItem component.\n /\n deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n function DeckLayout(\n {\n activeIndex = 0,\n animation,\n className,\n children,\n direction = \"horizontal\",\n style,\n deckItemProps,\n ...rest\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-deck-layout\",\n css: deckLayoutCss,\n window: targetWindow,\n });\n\n const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n const handleResize = useCallback(function handleResize(\n contentRect: DOMRect,\n ) {\n setDeckItemHeight(contentRect.height);\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n if (!deckItemRef.current) {\n return undefined;\n }\n\n handleResize(deckItemRef.current.getBoundingClientRect());\n\n const observer = new ResizeObserver(\n ([{ contentRect }]: ResizeObserverEntry[]) => {\n handleResize(contentRect);\n },\n );\n observer.observe(deckItemRef.current);\n\n return () => {\n observer.disconnect();\n };\n }, [deckItemRef, handleResize]);\n\n const deckLayoutStyles = {\n ...style,\n \"--deckLayout-width\": `${deckItemWidth}px`,\n \"--deckLayout-height\": `${deckItemHeight}px`,\n };\n\n const innerStyles = {\n \"--deckLayout-transform-value\": `-${activeIndex 100}%`,\n } as CSSProperties;\n\n return (\n <div\n className={clsx(withBaseName(), className)}\n style={deckLayoutStyles}\n ref={ref}\n {...rest}\n >\n <div\n className={clsx(\n {\n [withBaseName(\"animate\")]: animation,\n },\n {\n [withBaseName(`${animation \|\| \"slide\"}-${direction}`)]: animation,\n },\n )}\n style={innerStyles}\n >\n {Children.map(children, (child, index) => {\n return (\n <DeckItem\n ref={deckItemRef}\n index={index}\n activeIndex={activeIndex}\n animation={animation}\n {...deckItemProps}\n >\n {child}\n </DeckItem>\n );\n })}\n </div>\n </div>\n );\n },\n);\n"],"names":["DeckLayout","deckLayoutCss","handleResize"],"mappings":"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"}

package/dist-es/dropdown/Dropdown.js CHANGED Viewed

@@ -28,7 +28,7 @@ const Dropdown = forwardRef(function Dropdown2({
   source,
   triggerComponent,
   ListItem,
-  ListProps: ListProps2,
+  ListProps,
   width = 180,
   ...props
 }, forwardedRef) {
@@ -52,14 +52,14 @@ const Dropdown = forwardRef(function Dropdown2({
     ...dropdownListHook
   } = useDropdown({
     collectionHook,
-    defaultHighlightedIndex: ListProps2 == null ? void 0 : ListProps2.defaultHighlightedIndex,
+    defaultHighlightedIndex: ListProps == null ? void 0 : ListProps.defaultHighlightedIndex,
     defaultIsOpen,
     defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
-    highlightedIndex: ListProps2 == null ? void 0 : ListProps2.highlightedIndex,
+    highlightedIndex: ListProps == null ? void 0 : ListProps.highlightedIndex,
     isOpen: isOpenProp,
     itemToString: itemToString$1,
     label: "Dropdown",
-    onHighlight: ListProps2 == null ? void 0 : ListProps2.onHighlight,
+    onHighlight: ListProps == null ? void 0 : ListProps.onHighlight,
     onOpenChange,
     onSelectionChange,
     onSelect,
@@ -70,7 +70,8 @@ const Dropdown = forwardRef(function Dropdown2({
     (itemOrItems) => {
       if (Array.isArray(itemOrItems)) {
         return itemOrItems.map((i) => i.value);
-      } else if (itemOrItems) {
+      }
+      if (itemOrItems) {
         return itemOrItems.value;
       }
     },
@@ -90,13 +91,12 @@ const Dropdown = forwardRef(function Dropdown2({
           ...ariaProps
         })
       );
-    } else {
-      return /* @__PURE__ */ jsx(DropdownButton, {
-        label: triggerLabel,
-        ...dropdownListHook.isOpen ? listControlProps : {},
-        ...ariaProps
-      });
     }
+    return /* @__PURE__ */ jsx(DropdownButton, {
+      label: triggerLabel,
+      ...dropdownListHook.isOpen ? listControlProps : {},
+      ...ariaProps
+    });
   };
   return /* @__PURE__ */ jsx(CollectionProvider, {
     collectionHook,
@@ -112,7 +112,7 @@ const Dropdown = forwardRef(function Dropdown2({
         /* @__PURE__ */ jsx(List, {
           ListItem,
           itemToString: itemToString$1,
-          ...ListProps2,
+          ...ListProps,
           highlightedIndex,
           listHandlers,
           onSelectionChange,

package/dist-es/dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n ~~cloneElement~~,\n ~~ForwardedRef~~,\n ~~forwardRef~~,\n ~~ReactElement~~,\n useCallback,\n useRef,\n} from \"react\";\n\nimport {\n CollectionItem,\n CollectionProvider,\n ~~itemToString~~ ~~as defaultItemToString,\n~~ SelectionProps,\n SelectionStrategy,\n SingleSelectionStrategy,\n useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport { ListProps } from \"../list/listTypes\";\nimport { ~~DropdownBase,~~ ~~MaybeChildProps~~ } from \"~~./DropdownBase~~\";\nimport { ~~DropdownButton~~ } from \"./~~DropdownButton~~\";\nimport { ~~DropdownBaseProps~~ } from \"./~~dropdownTypes~~\";\nimport { ~~useDropdown~~ } from \"./~~useDropdown~~\";\nimport { ~~forwardCallbackProps~~ } from \"~~../utils~~\";\n\nexport interface DropdownProps<\n Item = string,\n Selection extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n Pick<\n ListProps<Item, Selection>,\n \"ListItem\" \| \"itemToString\" \| \"source\" \| \"width\"\n >,\n SelectionProps<Item, Selection> {\n ListProps?: Omit<\n ListProps<Item, Selection>,\n \"ListItem\" \| \"itemToString\" \| \"source\"\n >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n Item = string,\n Selection extends SelectionStrategy = \"default\"\n>(\n {\n \"aria-label\": ariaLabel,\n children,\n defaultIsOpen,\n defaultSelected,\n id: idProp,\n isOpen: isOpenProp,\n itemToString = defaultItemToString,\n onOpenChange,\n onSelectionChange,\n onSelect,\n selected: selectedProp,\n selectionStrategy,\n source,\n triggerComponent,\n ListItem,\n ListProps,\n width = 180,\n ...props\n }: DropdownProps<Item, Selection>,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const id = useId(idProp);\n const rootRef = useRef<HTMLDivElement>(null);\n const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n source,\n children,\n options: {\n itemToString,\n },\n });\n\n const {\n highlightedIndex,\n triggerLabel,\n listHandlers,\n listControlProps,\n selected,\n ...dropdownListHook\n } = useDropdown<Item, Selection>({\n collectionHook,\n defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n defaultIsOpen,\n defaultSelected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(defaultSelected),\n highlightedIndex: ListProps?.highlightedIndex,\n isOpen: isOpenProp,\n itemToString,\n label: \"Dropdown\",\n onHighlight: ListProps?.onHighlight,\n onOpenChange,\n onSelectionChange,\n onSelect,\n selected: collectionHook.itemToCollectionItem<\n Selection,\n typeof selectedProp\n >(selectedProp),\n selectionStrategy,\n });\n\n const collectionItemsToItem = useCallback(\n (\n itemOrItems?: CollectionItem<Item> \| null \| CollectionItem<Item>[]\n ):\n \| undefined\n \| (Selection extends SingleSelectionStrategy ? Item \| null : Item[]) => {\n type returnType = Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[];\n if (Array.isArray(itemOrItems)) {\n return itemOrItems.map((i) => i.value) as returnType;\n } ~~else~~ if (itemOrItems) {\n return itemOrItems.value as returnType;\n }\n },\n []\n );\n\n const getTriggerComponent = () => {\n const ariaProps = {\n \"aria-activedescendant\": dropdownListHook.isOpen\n ? listControlProps?.[\"aria-activedescendant\"]\n : undefined,\n \"aria-label\": ariaLabel,\n };\n if (triggerComponent) {\n const ownProps = triggerComponent.props as MaybeChildProps;\n return cloneElement(\n triggerComponent,\n forwardCallbackProps(ownProps, {\n ...(dropdownListHook.isOpen ? listControlProps : {}),\n ...ariaProps,\n })\n );\n } ~~else {~~\n return (\n <DropdownButton\n label={triggerLabel}\n {...(dropdownListHook.isOpen ? listControlProps : {})}\n {...ariaProps}\n />\n );\n ~~}\n~~ };\n\n return (\n <CollectionProvider<Item> collectionHook={collectionHook}>\n <DropdownBase\n {...props}\n id={id}\n isOpen={dropdownListHook.isOpen}\n onOpenChange={dropdownListHook.onOpenChange}\n ref={forkedRef}\n width={width}\n >\n {getTriggerComponent()}\n <List<Item, Selection>\n ListItem={ListItem}\n itemToString={itemToString}\n {...ListProps}\n highlightedIndex={highlightedIndex}\n listHandlers={listHandlers}\n onSelectionChange={onSelectionChange}\n onSelect={onSelect}\n selected={collectionItemsToItem(selected)}\n selectionStrategy={selectionStrategy}\n data-testid=\"dropdown-list\"\n />\n </DropdownBase>\n </CollectionProvider>\n );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n props: DropdownProps<Item, Selection> & {\n ref?: ForwardedRef<HTMLDivElement>;\n }\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","~~ListProps","~~useId"],"mappings":";;;;;;;;;;;;;;AA0Ca,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAI1C,CAAA;AAAA,EACE,YAAc,EAAA,SAAA;AAAA,EACd,QAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,MAAQ,EAAA,UAAA;AAAA,gBACRC,cAAe,GAAAC,YAAA;AAAA,EACf,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,~~SAAAC,EAAAA,UAAAA~~;AAAA,EACA,KAAQ,GAAA,GAAA;AAAA,EACL,GAAA,KAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAKC,UAAM,MAAM,CAAA,CAAA;AACvB,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAM,MAAA,SAAA,GAAY,UAA2B,CAAA,OAAA,EAAS,YAAY,CAAA,CAAA;AAElE,EAAA,MAAM,iBAAiB,kBAAyB,CAAA;AAAA,IAC9C,EAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA;AAAA,~~oBACPH~~,cAAA;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,gBAAA;AAAA,MACD,WAA6B,CAAA;AAAA,IAC/B,cAAA;AAAA,IACA,~~uBAAA~~,~~EAAyBE~~,~~UAAA,~~IAAA,IAAA,GAAA,KAAA,CAAA,~~GAAAA~~,~~UAAW~~,CAAA,uBAAA;AAAA,IACpC,aAAA;AAAA,IACA,eAAA,EAAiB,cAAe,CAAA,oBAAA,CAG9B,eAAe,CAAA;AAAA,IACjB,~~gBAAA~~,~~EAAkBA~~,~~UAAA,~~IAAA,IAAA,GAAA,KAAA,CAAA,~~GAAAA~~,~~UAAW~~,CAAA,gBAAA;AAAA,IAC7B,MAAQ,EAAA,UAAA;AAAA,~~kBACRF~~,cAAA;AAAA,IACA,KAAO,EAAA,UAAA;AAAA,IACP,~~WAAA~~,~~EAAaE~~,~~UAAA,~~IAAA,IAAA,GAAA,KAAA,CAAA,~~GAAAA~~,~~UAAW~~,CAAA,WAAA;AAAA,IACxB,YAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA,EAAU,cAAe,CAAA,oBAAA,CAGvB,YAAY,CAAA;AAAA,IACd,iBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CACE,WAGwE,KAAA;AAIxE,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,WAAW,CAAG,EAAA;AAC9B,QAAA,OAAO,WAAY,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,KAAK,CAAA,CAAA;AAAA,~~iBAC5B~~,WAAa,EAAA;~~AACtB~~,QAAA,OAAO,WAAY,CAAA,KAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,uBAAyB,EAAA,gBAAA,CAAiB,MACtC,GAAA,gBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAmB,uBACnB,CAAA,GAAA,KAAA,CAAA;AAAA,MACJ,YAAc,EAAA,SAAA;AAAA,KAChB,CAAA;AACA,IAAA,IAAI,gBAAkB,EAAA;AACpB,MAAA,MAAM,WAAW,gBAAiB,CAAA,KAAA,CAAA;AAClC,MAAO,OAAA,YAAA;AAAA,QACL,gBAAA;AAAA,QACA,qBAAqB,QAAU,EAAA;AAAA,UAC7B,GAAI,gBAAA,CAAiB,MAAS,GAAA,gBAAA,GAAmB,EAAC;AAAA,UAClD,GAAG,SAAA;AAAA,SACJ,CAAA;AAAA,OACH,CAAA;AAAA,~~KACK,MAAA~~;~~AACL~~,~~MAAA~~,uBACG,GAAA,CAAA,cAAA,EAAA;AAAA,~~QACC~~,KAAO,EAAA,YAAA;AAAA,~~QACN~~,GAAI,gBAAA,CAAiB,MAAS,GAAA,gBAAA,GAAmB,EAAC;AAAA,~~QAClD~~,GAAG,SAAA;AAAA,~~OACN~~,CAAA,CAAA;AAAA,~~KAEJ;AAAA~~,~~GACF,~~CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,IAAyB,cAAA;AAAA,IACxB,QAAC,kBAAA,IAAA,CAAA,YAAA,EAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,EAAA;AAAA,MACA,QAAQ,gBAAiB,CAAA,MAAA;AAAA,MACzB,cAAc,gBAAiB,CAAA,YAAA;AAAA,MAC/B,GAAK,EAAA,SAAA;AAAA,MACL,KAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAoB,mBAAA,EAAA;AAAA,wBACpB,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,QAAA;AAAA,~~wBACAF~~,cAAA;AAAA,UACC,~~GAAGE~~,~~UAAAA~~;AAAA,UACJ,gBAAA;AAAA,UACA,YAAA;AAAA,UACA,iBAAA;AAAA,UACA,QAAA;AAAA,UACA,QAAA,EAAU,sBAAsB,QAAQ,CAAA;AAAA,UACxC,iBAAA;AAAA,UACA,aAAY,EAAA,eAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n type ForwardedRef,\n type ReactElement,\n cloneElement,\n forwardRef,\n useCallback,\n useRef,\n} from \"react\";\n\nimport {\n type CollectionItem,\n CollectionProvider,\n type SelectionProps,\n type SelectionStrategy,\n type SingleSelectionStrategy,\n itemToString as defaultItemToString,\n useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport type { ListProps } from \"../list/listTypes\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBase, type MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport type { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\n\nexport interface DropdownProps<\n Item = string,\n Selection extends SelectionStrategy = \"default\",\n> extends DropdownBaseProps,\n Pick<\n ListProps<Item, Selection>,\n \"ListItem\" \| \"itemToString\" \| \"source\" \| \"width\"\n >,\n SelectionProps<Item, Selection> {\n ListProps?: Omit<\n ListProps<Item, Selection>,\n \"ListItem\" \| \"itemToString\" \| \"source\"\n >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n Item = string,\n Selection extends SelectionStrategy = \"default\",\n>(\n {\n \"aria-label\": ariaLabel,\n children,\n defaultIsOpen,\n defaultSelected,\n id: idProp,\n isOpen: isOpenProp,\n itemToString = defaultItemToString,\n onOpenChange,\n onSelectionChange,\n onSelect,\n selected: selectedProp,\n selectionStrategy,\n source,\n triggerComponent,\n ListItem,\n ListProps,\n width = 180,\n ...props\n }: DropdownProps<Item, Selection>,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const id = useId(idProp);\n const rootRef = useRef<HTMLDivElement>(null);\n const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n const collectionHook = useCollectionItems<Item>({\n id,\n source,\n children,\n options: {\n itemToString,\n },\n });\n\n const {\n highlightedIndex,\n triggerLabel,\n listHandlers,\n listControlProps,\n selected,\n ...dropdownListHook\n } = useDropdown<Item, Selection>({\n collectionHook,\n defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n defaultIsOpen,\n defaultSelected: collectionHook.itemToCollectionItem<\n Selection,\n typeof defaultSelected\n >(defaultSelected),\n highlightedIndex: ListProps?.highlightedIndex,\n isOpen: isOpenProp,\n itemToString,\n label: \"Dropdown\",\n onHighlight: ListProps?.onHighlight,\n onOpenChange,\n onSelectionChange,\n onSelect,\n selected: collectionHook.itemToCollectionItem<\n Selection,\n typeof selectedProp\n >(selectedProp),\n selectionStrategy,\n });\n\n const collectionItemsToItem = useCallback(\n (\n itemOrItems?: CollectionItem<Item> \| null \| CollectionItem<Item>[],\n ):\n \| undefined\n \| (Selection extends SingleSelectionStrategy ? Item \| null : Item[]) => {\n type returnType = Selection extends SingleSelectionStrategy\n ? Item \| null\n : Item[];\n if (Array.isArray(itemOrItems)) {\n return itemOrItems.map((i) => i.value) as returnType;\n }\n if (itemOrItems) {\n return itemOrItems.value as returnType;\n }\n },\n [],\n );\n\n const getTriggerComponent = () => {\n const ariaProps = {\n \"aria-activedescendant\": dropdownListHook.isOpen\n ? listControlProps?.[\"aria-activedescendant\"]\n : undefined,\n \"aria-label\": ariaLabel,\n };\n if (triggerComponent) {\n const ownProps = triggerComponent.props as MaybeChildProps;\n return cloneElement(\n triggerComponent,\n forwardCallbackProps(ownProps, {\n ...(dropdownListHook.isOpen ? listControlProps : {}),\n ...ariaProps,\n }),\n );\n }\n return (\n <DropdownButton\n label={triggerLabel}\n {...(dropdownListHook.isOpen ? listControlProps : {})}\n {...ariaProps}\n />\n );\n };\n\n return (\n <CollectionProvider<Item> collectionHook={collectionHook}>\n <DropdownBase\n {...props}\n id={id}\n isOpen={dropdownListHook.isOpen}\n onOpenChange={dropdownListHook.onOpenChange}\n ref={forkedRef}\n width={width}\n >\n {getTriggerComponent()}\n <List<Item, Selection>\n ListItem={ListItem}\n itemToString={itemToString}\n {...ListProps}\n highlightedIndex={highlightedIndex}\n listHandlers={listHandlers}\n onSelectionChange={onSelectionChange}\n onSelect={onSelect}\n selected={collectionItemsToItem(selected)}\n selectionStrategy={selectionStrategy}\n data-testid=\"dropdown-list\"\n />\n </DropdownBase>\n </CollectionProvider>\n );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n props: DropdownProps<Item, Selection> & {\n ref?: ForwardedRef<HTMLDivElement>;\n },\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","useId"],"mappings":"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"}

package/dist-es/dropdown/DropdownBase.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { flip, shift, limitShift, size } from '@floating-ui/react';
 import { makePrefixer, useIdMemo, useFloatingUI, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, Children, useState, cloneElement } from 'react';
-import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
-import { useDropdownBase } from './useDropdownBase.js';
 import { Portal } from '../portal/Portal.js';
+import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
 import { useWindow as useWindow$1, isDesktop } from '../window/WindowContext.js';
 import '../window/ElectronWindow.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
+import { useDropdownBase } from './useDropdownBase.js';
 import { useWindow } from '@salt-ds/window';
 import css_248z from './Dropdown.css.js';

package/dist-es/dropdown/DropdownBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { ~~forwardCallbackProps~~ } from \"../~~utils~~\";\nimport { ~~DropdownBaseProps~~ } from \"~~./dropdownTypes~~\";\nimport { ~~useDropdownBase~~ } ~~from~~ ~~\"./useDropdownBase\";\nimport~~ ~~{ Portal~~ } from \"../~~portal~~\";\nimport { ~~isDesktop,~~ ~~useWindow as usePortalWindow~~ } from \"~~../window~~\";\nimport { ~~useComponentCssInjection~~ } from \"~~@salt-ds/styles~~\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n className?: string;\n id?: string;\n role?: string;\n width: number \| string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n function Dropdown(\n {\n \"aria-labelledby\": ariaLabelledByProp,\n children,\n className: classNameProp,\n container,\n defaultIsOpen,\n disabled,\n disablePortal,\n fullWidth,\n id: idProp,\n isOpen: isOpenProp,\n onKeyDown,\n onOpenChange,\n openOnFocus,\n placement = \"bottom-start\",\n popupWidth,\n width,\n ...htmlAttributes\n },\n forwardedRef\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const className = clsx(withBaseName(), classNameProp, {\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(\"disabled\")]: disabled,\n });\n const [trigger, popupComponent] = Children.toArray(\n children\n ) as JSX.Element[];\n const id = useId(idProp);\n const Window = usePortalWindow();\n\n const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n {\n ariaLabelledBy: ariaLabelledByProp,\n defaultIsOpen,\n disabled,\n fullWidth,\n id,\n isOpen: isOpenProp,\n onOpenChange,\n onKeyDown,\n openOnFocus,\n popupComponent,\n popupWidth,\n rootRef,\n width,\n }\n );\n const [maxPopupHeight, setMaxPopupHeight] = useState<number \| undefined>(\n undefined\n );\n\n const middleware = isDesktop\n ? []\n : [\n flip({\n fallbackPlacements: [\"bottom-start\", \"top-start\"],\n }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight }) {\n setMaxPopupHeight(availableHeight);\n },\n }),\n ];\n\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement,\n middleware,\n });\n\n const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n reference,\n forwardedRef\n );\n const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n const getTriggerComponent = () => {\n const {\n id: defaultId,\n role: defaultRole,\n ...restTriggerProps\n } = triggerProps;\n\n const {\n id = defaultId,\n role = defaultRole,\n ...ownProps\n } = trigger.props as MaybeChildProps;\n\n return cloneElement(\n trigger,\n forwardCallbackProps(ownProps, {\n ...restTriggerProps,\n id,\n role,\n })\n );\n };\n\n const getPopupComponent = () => {\n const { id: defaultId, width, ...restComponentProps } = componentProps;\n const {\n className,\n id = defaultId,\n width: ownWidth,\n ...ownProps\n } = popupComponent.props as MaybeChildProps;\n return cloneElement(popupComponent, {\n ...ownProps,\n ...restComponentProps,\n className: clsx(className, withBaseName(\"popup-component\")),\n id,\n width: ownWidth ?? width,\n });\n };\n\n return (\n <div\n {...htmlAttributes}\n className={className}\n data-testid=\"dropdown\"\n id={idProp}\n ref={handleRootRef}\n >\n {getTriggerComponent()}\n {isOpen && (\n <Portal disablePortal={disablePortal} container={container}>\n <Window\n className={clsx(withBaseName(\"popup\"), classNameProp)}\n id={`${id}-popup`}\n style={{\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n maxHeight: maxPopupHeight,\n }}\n ref={handleFloatingRef}\n >\n {getPopupComponent()}\n </Window>\n </Portal>\n )}\n </div>\n );\n }\n);\n"],"names":["dropdownCss","useId","usePortalWindow","id","width","className"],"mappings":"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"}
1	+ {"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { Portal } from \"../portal\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { isDesktop, useWindow as usePortalWindow } from \"../window\";\nimport type { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n className?: string;\n id?: string;\n role?: string;\n width: number \| string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n function Dropdown(\n {\n \"aria-labelledby\": ariaLabelledByProp,\n children,\n className: classNameProp,\n container,\n defaultIsOpen,\n disabled,\n disablePortal,\n fullWidth,\n id: idProp,\n isOpen: isOpenProp,\n onKeyDown,\n onOpenChange,\n openOnFocus,\n placement = \"bottom-start\",\n popupWidth,\n width,\n ...htmlAttributes\n },\n forwardedRef,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown\",\n css: dropdownCss,\n window: targetWindow,\n });\n\n const rootRef = useRef<HTMLDivElement>(null);\n const className = clsx(withBaseName(), classNameProp, {\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(\"disabled\")]: disabled,\n });\n const [trigger, popupComponent] = Children.toArray(\n children,\n ) as JSX.Element[];\n const id = useId(idProp);\n const Window = usePortalWindow();\n\n const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n {\n ariaLabelledBy: ariaLabelledByProp,\n defaultIsOpen,\n disabled,\n fullWidth,\n id,\n isOpen: isOpenProp,\n onOpenChange,\n onKeyDown,\n openOnFocus,\n popupComponent,\n popupWidth,\n rootRef,\n width,\n },\n );\n const [maxPopupHeight, setMaxPopupHeight] = useState<number \| undefined>(\n undefined,\n );\n\n const middleware = isDesktop\n ? []\n : [\n flip({\n fallbackPlacements: [\"bottom-start\", \"top-start\"],\n }),\n shift({ limiter: limitShift() }),\n size({\n apply({ availableHeight }) {\n setMaxPopupHeight(availableHeight);\n },\n }),\n ];\n\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement,\n middleware,\n });\n\n const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n reference,\n forwardedRef,\n );\n const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n const getTriggerComponent = () => {\n const {\n id: defaultId,\n role: defaultRole,\n ...restTriggerProps\n } = triggerProps;\n\n const {\n id = defaultId,\n role = defaultRole,\n ...ownProps\n } = trigger.props as MaybeChildProps;\n\n return cloneElement(\n trigger,\n forwardCallbackProps(ownProps, {\n ...restTriggerProps,\n id,\n role,\n }),\n );\n };\n\n const getPopupComponent = () => {\n const { id: defaultId, width, ...restComponentProps } = componentProps;\n const {\n className,\n id = defaultId,\n width: ownWidth,\n ...ownProps\n } = popupComponent.props as MaybeChildProps;\n return cloneElement(popupComponent, {\n ...ownProps,\n ...restComponentProps,\n className: clsx(className, withBaseName(\"popup-component\")),\n id,\n width: ownWidth ?? width,\n });\n };\n\n return (\n <div\n {...htmlAttributes}\n className={className}\n data-testid=\"dropdown\"\n id={idProp}\n ref={handleRootRef}\n >\n {getTriggerComponent()}\n {isOpen && (\n <Portal disablePortal={disablePortal} container={container}>\n <Window\n className={clsx(withBaseName(\"popup\"), classNameProp)}\n id={`${id}-popup`}\n style={{\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n maxHeight: maxPopupHeight,\n }}\n ref={handleFloatingRef}\n >\n {getPopupComponent()}\n </Window>\n </Portal>\n )}\n </div>\n );\n },\n);\n"],"names":["dropdownCss","useId","usePortalWindow","id","width","className"],"mappings":"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"}

package/dist-es/dropdown/DropdownButton.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makePrefixer, Button } from '@salt-ds/core';
 import { ChevronDownIcon, DEFAULT_ICON_SIZE } from '@salt-ds/icons';
-import '../form-field-context-legacy/FormFieldLegacyContext.js';
-import { useFormFieldLegacyProps } from '../form-field-context-legacy/useFormFieldLegacyProps.js';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
-import { useWindow } from '@salt-ds/window';
+import '../form-field-context-legacy/FormFieldLegacyContext.js';
+import { useFormFieldLegacyProps } from '../form-field-context-legacy/useFormFieldLegacyProps.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import css_248z from './DropdownButton.css.js';
 const withBaseName = makePrefixer("saltDropdownButton");

package/dist-es/dropdown/DropdownButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon, IconProps~~, DEFAULT_ICON_SIZE~~ } from \"@salt-ds/icons\";\nimport { ~~useFormFieldLegacyProps~~ } from \"~~../form-field-context-legacy~~\";\nimport { ~~clsx~~ } from \"~~clsx~~\";\nimport { ~~AriaAttributes,~~ ~~ComponentType, ForwardedRef, forwardRef~~ } from \"~~react~~\";\n\nimport { ~~useWindow~~ } from \"@salt-ds/~~window~~\";\nimport { ~~useComponentCssInjection~~ } from \"@salt-ds/~~styles~~\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n /*\n Replace the default Icon component\n /\n IconComponent?: ComponentType<any>;\n /\n Whether the dropdown button should hide role='option' via 'aria-hidden'\n /\n ariaHideOptionRole?: boolean;\n /\n If, `true`, the Dropdown button will occupy the full width of it's container\n /\n fullWidth?: boolean;\n /\n Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n /\n iconSize?: IconProps[\"size\"];\n /\n Is the dropdown list open\n /\n isOpen?: boolean;\n /\n Label for the dropdown button\n /\n label?: string;\n /\n Id for the label. This is needed for ARIA attributes.\n /\n labelId?: string;\n /\n When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n * /\n posInSet?: number;\n /\n * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n * /\n setSize?: number;\n /\n \n **/\n labelAriaAttributes?: Pick<\n AriaAttributes,\n \"aria-posinset\" \| \"aria-setsize\" \| \"aria-selected\"\n >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n {\n IconComponent = ChevronDownIcon,\n ariaHideOptionRole,\n className,\n disabled,\n iconSize = DEFAULT_ICON_SIZE,\n isOpen,\n label,\n labelId,\n fullWidth,\n posInSet,\n setSize,\n labelAriaAttributes,\n ...rest\n }: DropdownButtonProps,\n ref: ForwardedRef<HTMLButtonElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-button\",\n css: dropdownButtonCss,\n window: targetWindow,\n });\n\n const { inFormField } = useFormFieldLegacyProps();\n // FIXME: use polymorphic button\n // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n // tool's false alarm on role of 'listbox'\n return (\n <Button\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fullwidth\")]: fullWidth,\n [withBaseName(\"formField\")]: inFormField,\n },\n className\n )}\n data-testid=\"dropdown-button\"\n disabled={disabled}\n variant=\"secondary\"\n {...rest}\n ref={ref}\n >\n <div className={withBaseName(\"content\")}>\n <span\n // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n {...labelAriaAttributes}\n className={withBaseName(\"buttonLabel\")}\n id={labelId}\n // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n role=\"option\"\n >\n {label}\n </span>\n <IconComponent\n className={withBaseName(\"icon\")}\n size={iconSize}\n aria-label={null}\n aria-hidden=\"true\"\n />\n </div>\n </Button>\n );\n});\n"],"names":["DropdownButton","dropdownButtonCss"],"mappings":";;;;;;;;;;;~~AAyDA~~,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,aAAgB,GAAA,eAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,iBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,uBAAwB,EAAA,CAAA;AAIhD,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport {\n ChevronDownIcon,\n DEFAULT_ICON_SIZE,\n type IconProps,\n} from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n type AriaAttributes,\n type ComponentType,\n type ForwardedRef,\n forwardRef,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n /*\n Replace the default Icon component\n /\n IconComponent?: ComponentType<any>;\n /\n Whether the dropdown button should hide role='option' via 'aria-hidden'\n /\n ariaHideOptionRole?: boolean;\n /\n If, `true`, the Dropdown button will occupy the full width of it's container\n /\n fullWidth?: boolean;\n /\n Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n /\n iconSize?: IconProps[\"size\"];\n /\n Is the dropdown list open\n /\n isOpen?: boolean;\n /\n Label for the dropdown button\n /\n label?: string;\n /\n Id for the label. This is needed for ARIA attributes.\n /\n labelId?: string;\n /\n When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n * /\n posInSet?: number;\n /\n * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n * /\n setSize?: number;\n /\n \n **/\n labelAriaAttributes?: Pick<\n AriaAttributes,\n \"aria-posinset\" \| \"aria-setsize\" \| \"aria-selected\"\n >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n {\n IconComponent = ChevronDownIcon,\n ariaHideOptionRole,\n className,\n disabled,\n iconSize = DEFAULT_ICON_SIZE,\n isOpen,\n label,\n labelId,\n fullWidth,\n posInSet,\n setSize,\n labelAriaAttributes,\n ...rest\n }: DropdownButtonProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dropdown-button\",\n css: dropdownButtonCss,\n window: targetWindow,\n });\n\n const { inFormField } = useFormFieldLegacyProps();\n // FIXME: use polymorphic button\n // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n // tool's false alarm on role of 'listbox'\n return (\n <Button\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"fullwidth\")]: fullWidth,\n [withBaseName(\"formField\")]: inFormField,\n },\n className,\n )}\n data-testid=\"dropdown-button\"\n disabled={disabled}\n variant=\"secondary\"\n {...rest}\n ref={ref}\n >\n <div className={withBaseName(\"content\")}>\n <span\n // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n {...labelAriaAttributes}\n className={withBaseName(\"buttonLabel\")}\n id={labelId}\n // 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role.\n role=\"option\"\n >\n {label}\n </span>\n <IconComponent\n className={withBaseName(\"icon\")}\n size={iconSize}\n aria-label={null}\n aria-hidden=\"true\"\n />\n </div>\n </Button>\n );\n});\n"],"names":["DropdownButton","dropdownButtonCss"],"mappings":";;;;;;;;;;;AAkEA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAEzC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,aAAgB,GAAA,eAAA;AAAA,EAChB,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,iBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,uBAAwB,EAAA,CAAA;AAIhD,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,WAAA;AAAA,OAC/B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,aAAY,EAAA,iBAAA;AAAA,IACZ,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MACpC,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,KAAA,CAAA;AAAA,UAC1C,GAAG,mBAAA;AAAA,UACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,EAAI,EAAA,OAAA;AAAA,UAEJ,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,aAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,IAAM,EAAA,QAAA;AAAA,UACN,YAAY,EAAA,IAAA;AAAA,UACZ,aAAY,EAAA,MAAA;AAAA,SACd,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/dropdown/useClickAway.js CHANGED Viewed

@@ -32,7 +32,7 @@ const useClickAway = ({
         document.body.removeEventListener("keydown", escapeKeyHandler, true);
       }
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, onClose, popperRef, rootRef]);
 };
 export { useClickAway };

package/dist-es/dropdown/useClickAway.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useClickAway.js","sources":["../src/dropdown/useClickAway.ts"],"sourcesContent":["import { 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]);\n};\n"],"names":[],"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,EAAA,SAAA,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,~~GACC~~,~~EAAA,~~CAAC,~~MAAQ~~,EAAA,OAAO,CAAC,CAAA,CAAA;~~AACtB~~;;;;"}
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":[],"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,EAAA,SAAA,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;;;;"}

package/dist-es/dropdown/useDropdown.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import { useControlled } from '@salt-ds/core';
 import { useCallback, useMemo } from 'react';
-import '../list/Highlighter.js';
-import '../list/ListItem.js';
-import '../list/List.js';
-import { useList } from '../list/useList.js';
-import '../list/VirtualizedList.js';
 import '../common-hooks/collectionProvider.js';
 import { itemToString } from '../common-hooks/itemToString.js';
 import '../common-hooks/keyUtils.js';
 import 'react/jsx-runtime';
 import '../responsive/useResizeObserver.js';
+import '../list/Highlighter.js';
+import '../list/ListItem.js';
+import '../list/List.js';
+import { useList } from '../list/useList.js';
+import '../list/VirtualizedList.js';
 const NULL_REF = { current: null };
 const useDropdown = ({
@@ -41,7 +41,7 @@ const useDropdown = ({
       }
       onSelectionChange == null ? void 0 : onSelectionChange(evt, selected2);
     },
-    [isMultiSelect, onOpenChange, onSelectionChange, setIsOpen]
+    [isMultiSelect, onOpenChange, onSelectionChange]
   );
   const handleSelect = useCallback(
     (evt, selected2) => {
@@ -51,7 +51,7 @@ const useDropdown = ({
       }
       onSelect == null ? void 0 : onSelect(evt, selected2);
     },
-    [isMultiSelect, onOpenChange, onSelect, setIsOpen]
+    [isMultiSelect, onOpenChange, onSelect]
   );
   const listHook = useList({
     collectionHook,
@@ -72,23 +72,22 @@ const useDropdown = ({
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open);
     },
-    [onOpenChange, setIsOpen]
+    [onOpenChange]
   );
   const triggerLabel = useMemo(() => {
     if (isMultiSelect && Array.isArray(listHook.selected)) {
       const selectedItems = listHook.selected;
       if (selectedItems.length === 0) {
         return void 0;
-      } else if (selectedItems.length === 1) {
+      }
+      if (selectedItems.length === 1) {
         const { value } = selectedItems[0];
         return value === null ? void 0 : itemToString$1(value);
-      } else {
-        return `${selectedItems.length} items selected`;
       }
-    } else {
-      const selectedItem = listHook.selected;
-      return selectedItem == null || selectedItem.value === null ? void 0 : itemToString$1(selectedItem.value);
+      return `${selectedItems.length} items selected`;
     }
+    const selectedItem = listHook.selected;
+    return selectedItem == null || selectedItem.value === null ? void 0 : itemToString$1(selectedItem.value);
   }, [isMultiSelect, itemToString$1, listHook.selected]);
   return {
     isOpen,

package/dist-es/dropdown/useDropdown.js.map CHANGED Viewed

	@@ -1 +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 { ~~ListHookProps,~~ ~~ListHookResult,~~ ~~useList~~ } from \"../~~list~~\";\nimport { ~~DropdownHookResult~~, ~~DropdownHookProps~~ } from \"~~./dropdownTypes~~\";\nimport {~~\n CollectionItem,\n itemToString~~ as ~~defaultItemToString,\n SelectionChangeHandler,\n SelectHandler,\n SelectionStrategy,\n~~} from \"~~../common-hooks~~\";\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~~, setIsOpen~~]\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~~, setIsOpen~~]\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~~, setIsOpen~~]\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 } ~~else~~ if (selectedItems.length === 1) {\n const { value } = selectedItems[0];\n return value === null ? undefined : itemToString(value);\n } ~~else {~~\n return `${selectedItems.length} items selected`;\n }\n ~~} else {\n~~ const selectedItem = listHook.selected as CollectionItem<Item>;\n return selectedItem == null \|\| selectedItem.value === null\n ? undefined\n : itemToString(selectedItem.value);\n ~~}\n~~ }, [isMultiSelect, itemToString, listHook.selected]);\n\n return {\n isOpen,\n onOpenChange: handleOpenChange,\n triggerLabel,\n ...listHook,\n };\n};\n"],"names":["itemToString","defaultItemToString","selected"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,QAAA,GAAW,EAAE,OAAA,EAAS,IAAK,EAAA,CAAA;AAiB1B,MAAM,cAAc,CAGzB;AAAA,EACA,cAAA;AAAA,EACA,uBAAyB,EAAA,2BAAA;AAAA,EACzB,aAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EAClB,MAAQ,EAAA,UAAA;AAAA,gBACRA,cAAe,GAAAC,YAAA;AAAA,EACf,WAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AACF,CAGK,KAAA;AACH,EAAM,MAAA,aAAA,GACJ,iBAAsB,KAAA,UAAA,IAAc,iBAAsB,KAAA,UAAA,CAAA;AAE5D,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,aAAuB,CAAA;AAAA,IACjD,UAAY,EAAA,UAAA;AAAA,IACZ,SAAS,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,KAAA;AAAA,IAC1B,IAAM,EAAA,iBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAG5B,CAAC,KAAKC,SAAa,KAAA;AACjB,MAAA,IAAI,CAAC,aAAe,EAAA;AAClB,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACjB;AACA,MAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAoB,GAAKA,EAAAA,SAAAA,CAAAA,CAAAA;AAAA,KAC3B;AAAA,IACA,CAAC,~~aAAA~~,~~EAAe,YAAc,~~EAAA,~~iBAAA~~,~~EAAmB~~,~~SAAS~~,CAAA;AAAA,~~GAC5D~~,CAAA;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,KAAKA,SAAa,KAAA;AACjB,MAAA,IAAI,CAAC,aAAe,EAAA;AAClB,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACjB;AACA,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,GAAKA,EAAAA,SAAAA,CAAAA,CAAAA;AAAA,KAClB;AAAA,IACA,CAAC,~~aAAA~~,~~EAAe,YAAc,~~EAAA,~~QAAA~~,~~EAAU~~,~~SAAS~~,CAAA;AAAA,~~GACnD~~,CAAA;AAEA,EAAA,MAAM,WAAW,OAAyB,CAAA;AAAA,IACxC,cAAA;AAAA,IACA,uBACE,EAAA,CAAA,2BAAA,IAAA,IAAA,GAAA,2BAAA,GAA+B,oBAAyB,KAAA,KAAA,CAAA,IACpD,CACA,GAAA,KAAA,CAAA;AAAA,IACN,eAAA;AAAA,IACA,KAAO,EAAA,iBAAA;AAAA,IACP,iBAAmB,EAAA,qBAAA;AAAA,IACnB,QAAU,EAAA,YAAA;AAAA,IACV,YAAc,EAAA,QAAA;AAAA,IACd,gBAAkB,EAAA,oBAAA;AAAA,IAClB,WAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAa,CAAC,aAAA;AAAA,GACf,CAAA,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,IAAkB,KAAA;AACjB,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAAA,KACjB;AAAA,IACA,CAAC,~~cAAc~~,~~SAAS,~~CAAA;AAAA,~~GAC1B~~,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,IAAI,aAAiB,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAA,CAAS,QAAQ,CAAG,EAAA;AACrD,MAAA,MAAM,gBAAgB,QAAS,CAAA,QAAA,CAAA;AAC/B,MAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,QAAO,OAAA,KAAA,CAAA,CAAA;AAAA,OACT,~~MAAA~~,~~IAAW~~,~~aAAc~~,~~CAAA~~,~~MAAA~~,~~KAAW,~~CAAG,EAAA;~~AACrC~~,QAAM,MAAA,EAAE,KAAM,EAAA,GAAI,aAAc,CAAA,CAAA,CAAA,CAAA;AAChC,QAAA,OAAO,KAAU,KAAA,IAAA,GAAO,KAAY,CAAA,GAAAF,cAAA,CAAa,KAAK,CAAA,CAAA;AAAA,~~OACjD~~,MAAA~~;AACL~~,~~QAAA,~~OAAO,GAAG,aAAc,CAAA,MAAA,CAAA,eAAA,CAAA,CAAA;AAAA,~~OAC1B~~;~~AAAA~~,~~KACK~~,~~MAAA;AACL,MAAA,~~MAAM,eAAe,QAAS,CAAA,QAAA,CAAA;AAC9B,~~MAAO~~,OAAA,YAAA,IAAgB,QAAQ,YAAa,CAAA,KAAA,KAAU,OAClD,KACA,CAAA,GAAAA,cAAA,CAAa,aAAa,KAAK,CAAA,CAAA;AAAA,~~KACrC;AAAA~~,~~KACC,~~CAAC,aAAA,EAAeA,cAAc,EAAA,QAAA,CAAS,QAAQ,CAAC,CAAA,CAAA;AAEnD,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,YAAA;AAAA,IACA,GAAG,QAAA;AAAA,GACL,CAAA;AACF;;;;"}
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","selected"],"mappings":"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"}

package/dist-es/dropdown/useDropdownBase.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { useControlled } from '@salt-ds/core';
 import { useRef, useCallback, useState } from 'react';
-import { useClickAway } from './useClickAway.js';
-import 'react/jsx-runtime';
-import { useResizeObserver, WidthOnly } from '../responsive/useResizeObserver.js';
 import '../form-field-context-legacy/FormFieldLegacyContext.js';
 import { useFormFieldLegacyProps } from '../form-field-context-legacy/useFormFieldLegacyProps.js';
+import 'react/jsx-runtime';
+import { useResizeObserver, WidthOnly } from '../responsive/useResizeObserver.js';
+import { useClickAway } from './useClickAway.js';
 const NO_OBSERVER = [];
 const useDropdownBase = ({
@@ -17,7 +17,6 @@ const useDropdownBase = ({
   onOpenChange,
   onKeyDown: onKeyDownProp,
   openOnFocus,
-  popupComponent: { props: componentProps },
   popupWidth: popupWidthProp,
   rootRef,
   width
@@ -45,11 +44,11 @@ const useDropdownBase = ({
   const showDropdown = useCallback(() => {
     setIsOpen(true);
     onOpenChange == null ? void 0 : onOpenChange(true);
-  }, [onOpenChange, setIsOpen]);
+  }, [onOpenChange]);
   const hideDropdown = useCallback(() => {
     setIsOpen(false);
     onOpenChange == null ? void 0 : onOpenChange(false);
-  }, [onOpenChange, setIsOpen]);
+  }, [onOpenChange]);
   useClickAway({
     popperRef,
     rootRef,
@@ -67,7 +66,7 @@ const useDropdownBase = ({
         }, 1e3);
       }
     }
-  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused, setIsOpen]);
+  }, [disabled, onOpenChange, openOnFocus, setFormFieldFocused]);
   const handleTriggerBlur = useCallback(() => {
     setFormFieldFocused == null ? void 0 : setFormFieldFocused(false);
   }, [setFormFieldFocused]);
@@ -81,7 +80,7 @@ const useDropdownBase = ({
         onOpenChange == null ? void 0 : onOpenChange(newIsOpen);
       }
     },
-    [isOpen, setIsOpen, onOpenChange]
+    [isOpen, onOpenChange]
   );
   const handleKeydown = useCallback(
     (evt) => {
@@ -97,15 +96,14 @@ const useDropdownBase = ({
     [hideDropdown, isOpen, onKeyDownProp, showDropdown]
   );
   const fullWidth = fullWidthProp != null ? fullWidthProp : inFormField;
-  const measurements2 = fullWidth ? WidthOnly : NO_OBSERVER;
-  useResizeObserver(rootRef, measurements2, setPopup, fullWidth);
+  const measurements = fullWidth ? WidthOnly : NO_OBSERVER;
+  useResizeObserver(rootRef, measurements, setPopup, fullWidth);
   const componentId = `${id}-dropdown`;
   const getAriaLabelledBy = (labelledBy, labelledByProp) => {
     if (labelledBy === void 0 && labelledByProp === void 0) {
       return void 0;
-    } else {
-      return [labelledBy, labelledByProp].filter((x) => !!x).join(" ");
     }
+    return [labelledBy, labelledByProp].filter((x) => !!x).join(" ");
   };
   const triggerProps = {
     ...restA11yProps,

package/dist-es/dropdown/useDropdownBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDropdownBase.js","sources":["../src/dropdown/useDropdownBase.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { KeyboardEvent, useCallback, useRef, useState } from \"react\";\n\nimport { ~~DropdownHookProps,~~ ~~DropdownHookResult~~ } from \"~~./dropdownTypes~~\";\nimport { ~~useClickAway~~ } from \"~~./useClickAway~~\";\nimport { ~~measurements~~, ~~useResizeObserver,~~ ~~WidthOnly~~ } from \"~~../responsive~~\";\nimport { ~~useFormFieldLegacyProps~~ } from \"~~../form-field-context-legacy~~\";\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 ~~popupComponent: { props: componentProps },\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~~, setIsOpen~~]);\n\n const hideDropdown = useCallback(() => {\n setIsOpen(false);\n onOpenChange?.(false);\n }, [onOpenChange~~, setIsOpen~~]);\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~~, setIsOpen~~]);\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, ~~setIsOpen,~~ 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 } ~~else {~~\n return [labelledBy, labelledByProp].filter((x) => !!x).join(\" \");\n ~~}\n~~ };\n\n // TODO do we use aria-popup - valid values are menu, ~~disloag~~, 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":[~~"measurements"~~],"mappings":";;;;;;;;AAQA,MAAM,cAAwB,EAAC,CAAA;AAExB,MAAM,kBAAkB,CAAC;AAAA,EAC9B,cAAgB,EAAA,kBAAA;AAAA,EAChB,aAAA;AAAA,EACA,QAAA;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,~~cAAA,EAAgB,EAAE,KAAA,EAAO,cAAe,EAAA;AAAA,EACxC,~~UAAY,EAAA,cAAA;AAAA,EACZ,OAAA;AAAA,EACA,KAAA;AACF,CAA6C,KAAA;~~AAzB7C~~,EAAA,IAAA,EAAA,CAAA;~~AA0BE~~,EAAM,MAAA,WAAA,GAAc,OAAsB,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA,CAAA;AACjD,EAAM,MAAA,iBAAA,GAAoB,WAAY,CAAA,CAAC,OAAgC,KAAA;AACrE,IAAA,SAAA,CAAU,OAAU,GAAA,OAAA,CAAA;AAAA,GACtB,EAAG,EAAE,CAAA,CAAA;AACL,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,aAAc,CAAA;AAAA,IACxC,UAAY,EAAA,UAAA;AAAA,IACZ,OAAA,EAAS,QAAQ,aAAa,CAAA;AAAA,IAC9B,IAAM,EAAA,aAAA;AAAA,IACN,KAAO,EAAA,QAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,WAAW,EAAE,iBAAA,EAAmB,cAAmB,EAAA,GAAA,aAAA,KAAkB,EAAC;AAAA,MACpE,uBAAwB,EAAA,CAAA;AAE5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAuB,CAAA;AAAA,IAC/C,KAAA,EAAA,CAAO,EAAkB,GAAA,cAAA,IAAA,IAAA,GAAA,cAAA,GAAA,KAAA,KAAlB,IAA2B,GAAA,EAAA,GAAA,CAAA;AAAA,GACnC,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAAA,~~GACd~~,~~EAAA~~,CAAC,~~YAAc~~,~~EAAA,SAAS,~~CAAC,CAAA,CAAA;~~AAE5B~~,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,~~GACd~~,~~EAAA~~,CAAC,~~YAAc~~,~~EAAA,SAAS,~~CAAC,CAAA,CAAA;~~AAE5B~~,EAAa,YAAA,CAAA;AAAA,IACX,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,GACV,CAAA,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqB,YAAY,MAAM;AAC3C,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAsB,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAA,IAAA,CAAA,CAAA;AAEtB,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACd,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,IAAA,CAAA,CAAA;AAEf,QAAY,WAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC5C,UAAA,WAAA,CAAY,OAAU,GAAA,IAAA,CAAA;AAAA,WACrB,GAAI,CAAA,CAAA;AAAA,OACT;AAAA,KACF;AAAA,KACC,CAAC,QAAA,EAAU,~~cAAc~~,~~WAAa,~~EAAA,~~mBAAA~~,~~EAAqB~~,~~SAAS~~,CAAC,CAAA,CAAA;~~AAExE~~,EAAM,MAAA,iBAAA,GAAoB,YAAY,MAAM;AAC1C,IAAsB,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACxB,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,CAAC,CAAkB,KAAA;AAEjB,MACE,IAAA,CAAC,OAAS,EAAA,GAAG,CAAE,CAAA,OAAA;AAAA,QACZ,CAA+C,CAAA,GAAA;AAAA,YAC5C,CACN,CAAA,EAAA;AACA,QAAA,MAAM,YAAY,CAAC,MAAA,CAAA;AACnB,QAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,QAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,SAAA,CAAA,CAAA;AAAA,OACjB;AAAA,KACF;AAAA,IACA,CAAC,~~MAAQ~~,~~EAAA,SAAA,EAAW,~~YAAY,CAAA;AAAA,~~GAClC~~,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;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,CAAA;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,CAAA;AACnB,QAAa,YAAA,EAAA,CAAA;AAAA,OACR,MAAA;AACL,QAAgB,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,GAAA,CAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,YAAA,EAAc,MAAQ,EAAA,aAAA,EAAe,YAAY,CAAA;AAAA,GACpD,CAAA;AAEA,EAAA,MAAM,YAAY,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,WAAA,CAAA;AACnC,~~EAAMA~~,~~MAAAA~~,~~aAAAA~~,GAAe,YAAY,SAAY,GAAA,WAAA,CAAA;AAC7C,EAAkB,iBAAA,CAAA,OAAA,~~EAASA~~,~~aAAc~~,EAAA,QAAA,EAAU,SAAS,CAAA,CAAA;AAE5D,EAAA,MAAM,cAAc,CAAG,EAAA,EAAA,CAAA,SAAA,CAAA,CAAA;AAEvB,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,CAAA;AAAA,~~KACF,MAAA~~;~~AACL~~,~~MAAA~~,OAAO,CAAC,UAAA,EAAY,cAAc,CAAA,CAAE,MAAO,CAAA,CAAC,CAAM,KAAA,CAAC,CAAC,CAAC,CAAE,CAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAAA,~~KACjE;AAAA~~,~~GACF,~~CAAA;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,IAAI,CAAG,EAAA,EAAA,CAAA,QAAA,CAAA;AAAA,IACP,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,EAAA;AAAA,GAChD,CAAA;AAEA,EAAA,MAAM,sBAAyB,GAAA;AAAA,IAC7B,iBAAmB,EAAA,cAAA;AAAA,IACnB,EAAI,EAAA,WAAA;AAAA,IACJ,OAAO,KAAM,CAAA,KAAA;AAAA,GACf,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,cAAgB,EAAA,sBAAA;AAAA,IAChB,SAAW,EAAA,iBAAA;AAAA,IACX,MAAA;AAAA,IACA,KAAO,EAAA,iBAAA;AAAA,IACP,YAAA;AAAA,GACF,CAAA;AACF;;;;"}
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":[],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
+import { useControlled, useIsomorphicLayoutEffect } from '@salt-ds/core';
 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 { useWindow } from '@salt-ds/window';
 import css_248z from './EditableLabel.css.js';
 const classBase = "saltEditableLabel";
@@ -46,11 +46,11 @@ const EditableLabel = forwardRef(function EditableLabel2({
         inputRef.current.focus();
       }
     }
-  }, [editing, inputRef]);
+  }, [editing]);
   const enterEditMode = useCallback(() => {
     setEditing(true);
-    onEnterEditMode && onEnterEditMode();
-  }, [onEnterEditMode, setEditing]);
+    onEnterEditMode == null ? void 0 : onEnterEditMode();
+  }, [onEnterEditMode]);
   const exitEditMode = ({
     cancelEdit = false,
     allowDeactivation = false
@@ -64,12 +64,12 @@ const EditableLabel = forwardRef(function EditableLabel2({
         initialValue.current = value;
       }
     }
-    onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);
+    onExitEditMode == null ? void 0 : onExitEditMode(originalValue, value, allowDeactivation);
   };
   const handleChange = (evt) => {
     const { value: value2 } = evt.target;
     setValue(value2);
-    onChange && onChange(value2);
+    onChange == null ? void 0 : onChange(value2);
   };
   const handleDoubleClick = () => {
     enterEditMode();

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

	@@ -1 +1 @@
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":";;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,mBAAA,CAAA;AAkBL,MAAA,aAAA,GAAgB,UAAW,CAAA,SAASA,cAC/C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,cAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,QAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAO,EAAA,SAAA;AACT,CAAA,EACA,YACkC,EAAA;AAClC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,OAAgC,IAAI,CAAA,CAAA;AAErD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,SAAS,YAAgB,IAAA,IAAA,GAAA,YAAA,GAAA,EAAA;AAAA,IACzB,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,SAAS,cAAkB,IAAA,KAAA;AAAA,IAC3B,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,OAAO,KAAK,CAAA,CAAA;AAEjC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,OAAS,EAAA;AACX,MAAI,IAAA,QAAA,CAAS,YAAY,IAAM,EAAA;AAC7B,QAAA,QAAA,CAAS,QAAQ,MAAO,EAAA,CAAA;AACxB,QAAA,QAAA,CAAS,QAAQ,KAAM,EAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,~~GACC~~,~~EAAA~~,CAAC,~~OAAS~~,~~EAAA,QAAQ,~~CAAC,CAAA,CAAA;~~AAEtB~~,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAEf,IAAA,eAAA,~~IAAmB~~,~~eAAgB~~,EAAA,CAAA;AAAA,~~GAClC~~,~~EAAA~~,CAAC,~~eAAiB~~,~~EAAA,UAAU,~~CAAC,CAAA,CAAA;~~AAEhC~~,EAAA,MAAM,eAAe,CAAC;AAAA,IACpB,UAAa,GAAA,KAAA;AAAA,IACb,iBAAoB,GAAA,KAAA;AAAA,GACtB,GAAI,EAAO,KAAA;AACT,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,IAAA,MAAM,gBAAgB,YAAa,CAAA,OAAA,CAAA;AACnC,IAAA,IAAI,kBAAkB,KAAO,EAAA;AAC3B,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,QAAA,CAAS,aAAa,CAAA,CAAA;AAAA,OACjB,MAAA;AACL,QAAA,YAAA,CAAa,OAAU,GAAA,KAAA,CAAA;AAAA,OACzB;AAAA,KACF;AACA,~~IAAkB~~,cAAA,IAAA,cAAA,~~CAAe~~,~~aAAe~~,EAAA,~~KAAA~~,~~EAAO,iBAAiB,~~CAAA,CAAA;AAAA,~~GAC1E~~,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,GAAuC,KAAA;AAC3D,IAAA,MAAM,EAAE,KAAA,EAAAC,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AACtB,IAAA,QAAA,CAASA,MAAK,CAAA,CAAA;AACd,~~IAAA~~,~~QAAA~~,~~IAAY~~,~~SAASA~~,~~MAAK~~,~~CAAA~~,~~CAAA~~;AAAA,~~GAC5B~~,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAc,aAAA,EAAA,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAa,YAAA,CAAA,EAAE,iBAAmB,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,GAAyC,KAAA;AAC9D,IAAI,IAAA,OAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,OAAS,EAAA;AAClC,MAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AAIpB,MAAa,YAAA,EAAA,CAAA;AAAA,eACJ,GAAI,CAAA,GAAA,KAAQ,YAAgB,IAAA,GAAA,CAAI,QAAQ,WAAa,EAAA;AAC9D,MAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AAAA,KACtB,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC/B,MAAa,YAAA,CAAA,EAAE,UAAY,EAAA,IAAA,EAAM,CAAA,CAAA;AAAA,KACnC;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC/C,CAAC,GAAG,SAAsB,CAAA,QAAA,CAAA,GAAA,OAAA;AAAA,GAC3B,CAAA,CAAA;AACD,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACA,aAAe,EAAA,iBAAA;AAAA,IACf,WAAW,EAAA,KAAA;AAAA,IACX,GAAK,EAAA,YAAA;AAAA,IAEJ,oCACE,GAAA,CAAAC,WAAA,EAAA;AAAA,MACC,UAAY,EAAA,EAAE,SAAW,EAAA,CAAA,EAAG,SAAkB,CAAA,MAAA,CAAA,EAAA;AAAA,MAC9C,KAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,QAAU,EAAA,YAAA;AAAA,MACV,SAAW,EAAA,aAAA;AAAA,MACX,GAAK,EAAA,QAAA;AAAA,MACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,MACpB,SAAU,EAAA,MAAA;AAAA,KACZ,CAEA,GAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
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":["EditableLabel","editableLabelCss","value","Input"],"mappings":"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"}

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

	@@ -1 +1 @@
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;;;;"}
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":[],"mappings":";;AAkBO,MAAM,sBAAyB,GAAA,aAAA;AAAA,EACpC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}