npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.1 → 1.0.0-alpha.3 - Mend

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

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 (458) hide show

package/dist-cjs/packages/lab/src/list-deprecated/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.js","sources":["../src/list-deprecated/List.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\n\nimport {\n ~~forwardRef~~,\n ~~useRef~~,\n ~~useContext~~,\n ~~KeyboardEvent~~,\n ~~ForwardedRef~~,\n ~~ReactElement~~,\n} from \"react\";\n\nimport { ListBase, ListScrollHandles } from \"./ListBase\";\nimport { ListProps, ListSelectionVariant } from \"./ListProps\";\nimport { ListStateContext } from \"./ListStateContext\";\nimport { useList } from \"./useList\";\nimport { useTypeSelect } from \"./useTypeSelect\";\~~nimport { TooltipContext } from \"../tooltip\";\~~n\nimport {\n DescendantContext,\n DescendantProvider,\n} from \"./internal/DescendantContext\";\n\nconst ListWithDescendants = forwardRef(function ListWithDescendants<\n Item,\n Variant extends ListSelectionVariant\n>(\n props: ListProps<Item, Variant>,\n ref?: ForwardedRef<ListScrollHandles<Item>>\n) {\n const { items } = useContext(DescendantContext);\n\n const { focusedRef, state, helpers, listProps } = useList({\n source: items.current.length ? items.current : [],\n ...props,\n });\n\n const { highlightedIndex } = state;\n const { setHighlightedIndex, setFocusVisible } = helpers;\n\n const {\n disabled,\n disableTypeToSelect,\n getItemAtIndex,\n itemCount,\n itemToString,\n onKeyDownCapture: onListKeyDownCapture,\n ...restListProps\n } = listProps;\n\n const { onKeyDownCapture: onTypeSelectKeyDownCapture } = useTypeSelect({\n getItemAtIndex,\n highlightedIndex,\n itemCount,\n itemToString,\n setFocusVisible,\n setHighlightedIndex,\n });\n\n const setListRef = useForkRef(focusedRef, props.listRef);\n\n const handleKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n\n if (onListKeyDownCapture) {\n onListKeyDownCapture(event);\n }\n\n if (!disableTypeToSelect && onTypeSelectKeyDownCapture) {\n onTypeSelectKeyDownCapture(event);\n }\n };\n\n return (\n <ListStateContext.Provider value={{ state, helpers }}>\n <ListBase\n listRef={setListRef}\n ref={ref}\n {...restListProps}\n disabled={disabled}\n getItemAtIndex={getItemAtIndex}\n itemCount={itemCount}\n itemToString={itemToString}\n onKeyDownCapture={handleKeyDownCapture}\n />\n </ListStateContext.Provider>\n );\n}) as <Item, Variant extends ListSelectionVariant>(\n props: ListProps<Item, Variant> & {\n ref?: ForwardedRef<ListScrollHandles<Item>>;\n }\n) => ReactElement<ListProps<Item, Variant>>;\n\nexport const List = forwardRef(function List<\n Item,\n Variant extends ListSelectionVariant\n>(\n props: ListProps<Item, Variant>,\n ref?: ForwardedRef<ListScrollHandles<Item>>\n) {\n const ~~{\n Tooltip,\n tooltipEnterDelay,\n tooltipLeaveDelay,\n tooltipPlacement,\n ...restProps\n } = props;\n\n const~~ itemsRef = useRef([]);\n\n return (\n <TooltipContext.Provider\n value={{\n Tooltip,\n enterDelay: tooltipEnterDelay,\n leaveDelay: tooltipLeaveDelay,\n placement: tooltipPlacement,\n }}\n >\n <DescendantProvider items={itemsRef}>\n <ListWithDescendants<Item, Variant> ref={ref} {...~~restProps~~} />\n </DescendantProvider>\n ~~</TooltipContext.Provider>\n~~ );\n}) as <Item = string, Variant extends ListSelectionVariant = \"default\">(\n props: ListProps<Item, Variant> & {\n ref?: ForwardedRef<ListScrollHandles<Item>>;\n }\n) => ReactElement<ListProps<Item, Variant>>;\n"],"names":["forwardRef","ListWithDescendants","useContext","DescendantContext","useList","useTypeSelect","useForkRef","jsx","ListStateContext","ListBase","List","useRef","~~TooltipContext","~~DescendantProvider"],"mappings":"~~;;;;;;;;;;;;;;;;;;;AAuBA~~,MAAM,mBAAsB,GAAAA,gBAAA,CAAW,SAASC,oBAAAA,CAI9C,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,KAAA,EAAU,GAAAC,gBAAA,CAAWC,mCAAiB,CAAA,CAAA;AAE9C,EAAA,MAAM,EAAE,UAAY,EAAA,KAAA,EAAO,OAAS,EAAA,SAAA,KAAcC,eAAQ,CAAA;AAAA,IACxD,QAAQ,KAAM,CAAA,OAAA,CAAQ,MAAS,GAAA,KAAA,CAAM,UAAU,EAAC;AAAA,IAChD,GAAG,KAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,kBAAqB,GAAA,KAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,mBAAqB,EAAA,eAAA,EAAoB,GAAA,OAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,oBAAA;AAAA,IACf,GAAA,aAAA;AAAA,GACD,GAAA,SAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,0BAA2B,EAAA,GAAIC,2BAAc,CAAA;AAAA,IACrE,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,mBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAAC,eAAA,CAAW,UAAY,EAAA,KAAA,CAAM,OAAO,CAAA,CAAA;AAEvD,EAAM,MAAA,oBAAA,GAAuB,CAAC,KAAyC,KAAA;AACrE,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,oBAAsB,EAAA;AACxB,MAAA,oBAAA,CAAqB,KAAK,CAAA,CAAA;AAAA,KAC5B;AAEA,IAAI,IAAA,CAAC,uBAAuB,0BAA4B,EAAA;AACtD,MAAA,0BAAA,CAA2B,KAAK,CAAA,CAAA;AAAA,KAClC;AAAA,GACF,CAAA;AAEA,EACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,IAA0B,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,IACjD,QAAC,kBAAAD,cAAA,CAAAE,iBAAA,EAAA;AAAA,MACC,OAAS,EAAA,UAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,aAAA;AAAA,MACJ,QAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAkB,EAAA,oBAAA;AAAA,KACpB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAMM,MAAM,IAAO,GAAAT,gBAAA,CAAW,SAASU,KAAAA,CAItC,OACA,GACA,EAAA;AACA,EAAM,MAAA~~;AAAA~~,~~IACJ,OAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,~~QAAA,GAAWC,YAAO,CAAA,EAAE,CAAA,CAAA;AAE1B,~~EACE,uBAAAJ,cAAA,CAACK,8BAAe,QAAf,~~EAAA~~;AAAA~~,~~IACC~~,~~KAAO,EAAA;AAAA,MACL,OAAA;AAAA,MACA,UAAY,EAAA,iBAAA;AAAA,MACZ,UAAY,EAAA,iBAAA;AAAA,MACZ,SAAW,EAAA,gBAAA;AAAA,KACb;AAAA,IAEA,QAAC,kBAAAL,~~cAAA,~~CAAAM~~,oCAAA,EAAA;AAAA,~~MAAmB~~,KAAO,EAAA,QAAA;AAAA,~~MACzB~~,QAAC,~~kBAAAN~~,cAAA,CAAA,mBAAA,EAAA;AAAA,~~QAAmC~~,GAAA;AAAA,~~QAAW~~,GAAG,~~SAAA~~;AAAA,~~OAAW~~,CAAA;AAAA,~~KAC/D~~,CAAA~~;AAAA~~,~~GACF,~~CAAA~~,CAAA~~;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"List.js","sources":["../src/list-deprecated/List.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\n\nimport {\n ForwardedRef,\n forwardRef,\n KeyboardEvent,\n ReactElement,\n useContext,\n useRef,\n} from \"react\";\n\nimport { ListBase, ListScrollHandles } from \"./ListBase\";\nimport { ListProps, ListSelectionVariant } from \"./ListProps\";\nimport { ListStateContext } from \"./ListStateContext\";\nimport { useList } from \"./useList\";\nimport { useTypeSelect } from \"./useTypeSelect\";\n\nimport {\n DescendantContext,\n DescendantProvider,\n} from \"./internal/DescendantContext\";\n\nconst ListWithDescendants = forwardRef(function ListWithDescendants<\n Item,\n Variant extends ListSelectionVariant\n>(\n props: ListProps<Item, Variant>,\n ref?: ForwardedRef<ListScrollHandles<Item>>\n) {\n const { items } = useContext(DescendantContext);\n\n const { focusedRef, state, helpers, listProps } = useList({\n source: items.current.length ? items.current : [],\n ...props,\n });\n\n const { highlightedIndex } = state;\n const { setHighlightedIndex, setFocusVisible } = helpers;\n\n const {\n disabled,\n disableTypeToSelect,\n getItemAtIndex,\n itemCount,\n itemToString,\n onKeyDownCapture: onListKeyDownCapture,\n ...restListProps\n } = listProps;\n\n const { onKeyDownCapture: onTypeSelectKeyDownCapture } = useTypeSelect({\n getItemAtIndex,\n highlightedIndex,\n itemCount,\n itemToString,\n setFocusVisible,\n setHighlightedIndex,\n });\n\n const setListRef = useForkRef(focusedRef, props.listRef);\n\n const handleKeyDownCapture = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n\n if (onListKeyDownCapture) {\n onListKeyDownCapture(event);\n }\n\n if (!disableTypeToSelect && onTypeSelectKeyDownCapture) {\n onTypeSelectKeyDownCapture(event);\n }\n };\n\n return (\n <ListStateContext.Provider value={{ state, helpers }}>\n <ListBase\n listRef={setListRef}\n ref={ref}\n {...restListProps}\n disabled={disabled}\n getItemAtIndex={getItemAtIndex}\n itemCount={itemCount}\n itemToString={itemToString}\n onKeyDownCapture={handleKeyDownCapture}\n />\n </ListStateContext.Provider>\n );\n}) as <Item, Variant extends ListSelectionVariant>(\n props: ListProps<Item, Variant> & {\n ref?: ForwardedRef<ListScrollHandles<Item>>;\n }\n) => ReactElement<ListProps<Item, Variant>>;\n\nexport const List = forwardRef(function List<\n Item,\n Variant extends ListSelectionVariant\n>(\n props: ListProps<Item, Variant>,\n ref?: ForwardedRef<ListScrollHandles<Item>>\n) {\n const itemsRef = useRef([]);\n\n return (\n <DescendantProvider items={itemsRef}>\n <ListWithDescendants<Item, Variant> ref={ref} {...props} />\n </DescendantProvider>\n );\n}) as <Item = string, Variant extends ListSelectionVariant = \"default\">(\n props: ListProps<Item, Variant> & {\n ref?: ForwardedRef<ListScrollHandles<Item>>;\n }\n) => ReactElement<ListProps<Item, Variant>>;\n"],"names":["forwardRef","ListWithDescendants","useContext","DescendantContext","useList","useTypeSelect","useForkRef","jsx","ListStateContext","ListBase","List","useRef","DescendantProvider"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,mBAAsB,GAAAA,gBAAA,CAAW,SAASC,oBAAAA,CAI9C,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,KAAA,EAAU,GAAAC,gBAAA,CAAWC,mCAAiB,CAAA,CAAA;AAE9C,EAAA,MAAM,EAAE,UAAY,EAAA,KAAA,EAAO,OAAS,EAAA,SAAA,KAAcC,eAAQ,CAAA;AAAA,IACxD,QAAQ,KAAM,CAAA,OAAA,CAAQ,MAAS,GAAA,KAAA,CAAM,UAAU,EAAC;AAAA,IAChD,GAAG,KAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,kBAAqB,GAAA,KAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,mBAAqB,EAAA,eAAA,EAAoB,GAAA,OAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAkB,EAAA,oBAAA;AAAA,IACf,GAAA,aAAA;AAAA,GACD,GAAA,SAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,0BAA2B,EAAA,GAAIC,2BAAc,CAAA;AAAA,IACrE,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,mBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAAC,eAAA,CAAW,UAAY,EAAA,KAAA,CAAM,OAAO,CAAA,CAAA;AAEvD,EAAM,MAAA,oBAAA,GAAuB,CAAC,KAAyC,KAAA;AACrE,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,oBAAsB,EAAA;AACxB,MAAA,oBAAA,CAAqB,KAAK,CAAA,CAAA;AAAA,KAC5B;AAEA,IAAI,IAAA,CAAC,uBAAuB,0BAA4B,EAAA;AACtD,MAAA,0BAAA,CAA2B,KAAK,CAAA,CAAA;AAAA,KAClC;AAAA,GACF,CAAA;AAEA,EACE,uBAAAC,cAAA,CAACC,kCAAiB,QAAjB,EAAA;AAAA,IAA0B,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,IACjD,QAAC,kBAAAD,cAAA,CAAAE,iBAAA,EAAA;AAAA,MACC,OAAS,EAAA,UAAA;AAAA,MACT,GAAA;AAAA,MACC,GAAG,aAAA;AAAA,MACJ,QAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAkB,EAAA,oBAAA;AAAA,KACpB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAMM,MAAM,IAAO,GAAAT,gBAAA,CAAW,SAASU,KAAAA,CAItC,OACA,GACA,EAAA;AACA,EAAM,MAAA,QAAA,GAAWC,YAAO,CAAA,EAAE,CAAA,CAAA;AAE1B,EAAA,uBACGJ,cAAA,CAAAK,oCAAA,EAAA;AAAA,IAAmB,KAAO,EAAA,QAAA;AAAA,IACzB,QAAC,kBAAAL,cAAA,CAAA,mBAAA,EAAA;AAAA,MAAmC,GAAA;AAAA,MAAW,GAAG,KAAA;AAAA,KAAO,CAAA;AAAA,GAC3D,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/list-deprecated/ListItemBase.js CHANGED Viewed

@@ -6,11 +6,9 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var clsx = require('clsx');
 var React = require('react');
+require('../utils/useFloatingUI.js');
 var useOverflowDetection = require('../utils/useOverflowDetection.js');
 var Highlighter = require('./internal/Highlighter.js');
-require('../tooltip/Tooltip.js');
-var TooltipContext = require('../tooltip/TooltipContext.js');
-var useTooltip = require('../tooltip/useTooltip.js');
 require('./ListItem.css.js');
 const withBaseName = core.makePrefixer("saltListItemDeprecated");
@@ -28,64 +26,36 @@ const ListItemBase = React.memo(
       itemTextHighlightPattern,
       ...restProps
     } = props;
-    const [openTooltip, setOpenTooltip] = React.useState(false);
-    const { Tooltip, enterDelay, leaveDelay, placement } = TooltipContext.useTooltipContext();
     const { current: detectTruncation } = React.useRef(typeof children === "string");
     const [overflowRef, isOverflowed] = useOverflowDetection.useOverflowDetection();
     const setItemRef = core.useForkRef(overflowRef, ref);
-    React.useEffect(() => {
-      if (detectTruncation && isOverflowed) {
-        const timeout = setTimeout(
-          () => setOpenTooltip(highlighted),
-          highlighted ? enterDelay : leaveDelay
-        );
-        return () => {
-          clearTimeout(timeout);
-        };
-      }
-    }, [highlighted, enterDelay, leaveDelay, detectTruncation, isOverflowed]);
-    const { getTooltipProps, getTriggerProps } = useTooltip.useTooltip({
-      placement,
-      open: openTooltip,
-      disabled: !isOverflowed
-    });
-    const { ref: triggerRef, ...triggerProps } = getTriggerProps({
-      "aria-label": typeof children === "string" ? children : void 0,
-      ...restProps,
-      className: clsx.clsx(
-        withBaseName(),
-        {
-          [withBaseName("deselectable")]: deselectable,
-          [withBaseName("highlighted")]: highlighted,
-          [withBaseName("selected")]: selected,
-          [withBaseName("focusVisible")]: focusVisible,
-          [withBaseName("disabled")]: disabled
-        },
-        className
-      )
-    });
-    const handleRef = core.useForkRef(
-      triggerRef,
-      detectTruncation ? ref : setItemRef
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Tooltip, {
-          ...getTooltipProps({ title: tooltipText })
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ref: handleRef,
-          ...triggerProps,
-          children: detectTruncation ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: withBaseName("textWrapper"),
-            ref: overflowRef,
-            children: itemTextHighlightPattern == null ? children : /* @__PURE__ */ jsxRuntime.jsx(Highlighter.Highlighter, {
-              matchPattern: itemTextHighlightPattern,
-              text: children
-            })
-          }) : children
-        })
-      ]
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
+      disabled: !isOverflowed,
+      content: tooltipText,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        "aria-label": typeof children === "string" ? children : void 0,
+        ref: detectTruncation ? ref : setItemRef,
+        ...restProps,
+        className: clsx.clsx(
+          withBaseName(),
+          {
+            [withBaseName("deselectable")]: deselectable,
+            [withBaseName("highlighted")]: highlighted,
+            [withBaseName("selected")]: selected,
+            [withBaseName("focusVisible")]: focusVisible,
+            [withBaseName("disabled")]: disabled
+          },
+          className
+        ),
+        children: detectTruncation ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: withBaseName("textWrapper"),
+          ref: overflowRef,
+          children: itemTextHighlightPattern == null ? children : /* @__PURE__ */ jsxRuntime.jsx(Highlighter.Highlighter, {
+            matchPattern: itemTextHighlightPattern,
+            text: children
+          })
+        }) : children
+      })
     });
   })
 );

package/dist-cjs/packages/lab/src/list-deprecated/ListItemBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemBase.js","sources":["../src/list-deprecated/ListItemBase.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n ForwardedRef~~,\n~~ forwardRef~~,\n~~ HTMLAttributes~~,\n~~ memo~~,\n useEffect,\n~~ useRef~~,\n useState,\n~~} from \"react\";\nimport { useOverflowDetection } from \"../utils\";\nimport { Highlighter } from \"./internal/Highlighter\";\~~nimport { useTooltip, useTooltipContext } from \"../tooltip\";\~~n\nimport \"./ListItem.css\";\n\n//TODO does this need to be generic <Item?\nexport interface ListItemBaseProps extends HTMLAttributes<HTMLDivElement> {\n disabled?: boolean;\n deselectable?: boolean;\n focusVisible?: boolean;\n highlighted?: boolean;\n itemTextHighlightPattern?: RegExp \| string;\n selected?: boolean;\n tooltipText?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltListItemDeprecated\");\n\n// just to keep line number parity\n//\nexport const ListItemBase = memo(\n forwardRef(function ListItemBase(\n props: ListItemBaseProps,\n ref: ForwardedRef<HTMLDivElement>\n ) {\n const {\n className,\n deselectable,\n selected,\n highlighted = false,\n focusVisible,\n tooltipText,\n disabled,\n children,\n itemTextHighlightPattern,\n ...restProps\n } = props;\n\n const ~~[openTooltip, setOpenTooltip] = useState(false);\n const~~ { ~~Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();\n const {~~ current: detectTruncation } = useRef(typeof children === \"string\");\n\n const [overflowRef, isOverflowed] = useOverflowDetection<HTMLDivElement>();\n const setItemRef = useForkRef(overflowRef, ref);\n\n useEffect(() => {\n if (detectTruncation && isOverflowed) {\n const timeout = setTimeout(\n () => setOpenTooltip(highlighted),\n highlighted ? enterDelay : leaveDelay\n );\n\n return (~~) => {~~\n ~~clearTimeout(timeout);\n };\n~~ ~~}\n },~~ ~~[highlighted, enterDelay, leaveDelay, detectTruncation, isOverflowed]);\n\n const { getTooltipProps, getTriggerProps }~~ = ~~useTooltip(~~{~~\n placement,\n open: openTooltip,\n disabled:~~ !isOverflowed~~,\n~~ }~~);\n\n const~~ { ~~ref: triggerRef, ...triggerProps~~ } ~~= getTriggerProps({~~\n \"aria-label~~\":~~ typeof children === \"string\" ? children : undefined,\n ...restProps,\n className: clsx(\n withBaseName(),\n {\n [withBaseName(\"deselectable\")]: deselectable,\n [withBaseName(\"highlighted\")]: highlighted,\n [withBaseName(\"selected\")]: selected,\n [withBaseName(\"focusVisible\")]: focusVisible,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )~~,\n~~ }~~);\n~~\n ~~const handleRef = useForkRef(\n triggerRef,\n detectTruncation ? ref : setItemRef\n );\n\n return (\n <>\n~~ ~~<Tooltip {...getTooltipProps({ title: tooltipText })} />\n <div ref={handleRef} {...triggerProps}~~>\n {detectTruncation ? (\n <span className={withBaseName(\"textWrapper\")} ref={overflowRef}>\n {itemTextHighlightPattern == null ? (\n children\n ) : (\n <Highlighter\n matchPattern={itemTextHighlightPattern}\n text={children}\n />\n )}\n </span>\n ) : (\n children\n )}\n </div>\n ~~</>\~~n );\n })\n);\n"],"names":["makePrefixer","memo","forwardRef","ListItemBase","~~useState","useTooltipContext","~~useRef","useOverflowDetection","useForkRef","~~useEffect~~","~~useTooltip~~","clsx","~~jsxs","Fragment","jsx","~~Highlighter"],"mappings":"~~;;;;;;;;;;;;;;;AA4BA~~,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA,CAAA;AAInD,MAAM,YAAe,GAAAC,UAAA;AAAA,EAC1BC,gBAAW,CAAA,SAASC,aAClB,CAAA,KAAA,EACA,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAc,GAAA,KAAA;AAAA,MACd,YAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,wBAAA;AAAA,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,~~CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AACpD,IAAA,MAAM,~~EAAE,OAAS,EAAA,~~UAAA,EAAY,UAAY,EAAA,SAAA,KAAcC,gCAAkB,EAAA,CAAA;AACzE,IAAA,MAAM,EAAE,OAAS,EAAA,~~gBAAA,KAAqBC,YAAO,CAAA,OAAO,aAAa,QAAQ,CAAA,CAAA;AAEzE,IAAA,MAAM,CAAC,WAAA,EAAa,YAAY,CAAA,GAAIC,yCAAqC,EAAA,CAAA;AACzE,IAAM,MAAA,UAAA,GAAaC,eAAW,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AAE9C,~~IAAAC~~,~~eAAA~~,~~CAAU~~,~~MAAM;AACd~~,~~MAAA~~,~~IAAI,oBAAoB,YAAc,~~EAAA;~~AACpC,QAAA,MAAM,OAAU,GAAA,UAAA;~~AAAA,~~UACd~~,~~MAAM~~,~~eAAe~~,~~WAAW,CAAA~~;AAAA,~~UAChC~~,~~cAAc~~,~~UAAa~~,~~GAAA,UAAA~~;AAAA,~~SAC7B~~,~~CAAA;AAEA~~,~~QAAA~~,~~OAAO~~,~~MAAM;AACX,UAAA,YAAA,CAAa,OAAO,~~CAAA,~~CAAA;AAAA~~,~~SACtB,CAAA~~;AAAA,~~OACF;AAAA~~,~~OACC,CAAC,WAAA,EAAa,~~YAAY,~~UAAY,~~EAAA,~~gBAAA~~,~~EAAkB~~,~~YAAY~~,~~CAAC~~,~~CAAA~~,~~CAAA;AAExE~~,~~IAAA~~,~~MAAM~~,~~EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAIC,qBAAW,~~CAAA;AAAA,~~MACtD~~,~~SAAA;AAAA,MACA,IAAM,EAAA,WAAA;AAAA,MACN,UAAU,CAAC,YAAA;AAAA,KACZ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,~~GAAA,EAAK,~~UAAe~~,~~EAAA~~,GAAA,~~YAAA,KAAiB,eAAgB,CAAA~~;AAAA,~~MAC3D~~,~~YAAc,EAAA,OAAO,QAAa,KAAA,QAAA,GAAW,QAAW,GAAA,KAAA,CAAA;AAAA,MACxD,~~GAAG,SAAA;AAAA,~~MACH~~,SAAW,~~EAAAC~~,SAAA;AAAA,~~QACT~~,YAAa,EAAA;AAAA,~~QACb~~;AAAA,~~UACE~~,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,~~UAChC~~,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,~~UAC~~/B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,~~UAC5B~~,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,~~UAChC~~,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,~~SAC9B~~;AAAA,~~QACA~~,SAAA;AAAA,~~OACF~~;AAAA,~~KACD~~,~~CAAA~~,~~CAAA;AAED,IAAA,MAAM,SAAY,GAAAH,eAAA;AAAA,MAChB,UAAA;AAAA,MACA,mBAAmB,GAAM,GAAA,UAAA;AAAA,KAC3B,CAAA;AAEA,IACE,uBAAAI,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACC,~~cAAA,CAAA,~~OAAA,EAAA;AAAA,UAAS,GAAG,eAAA,CAAgB,EAAE,KAAA,EAAO,aAAa,CAAA;AAAA,SAAG,CAAA;AAAA,wBACrDA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,GAAK,EAAA,SAAA;AAAA,UAAY,GAAG,YAAA;AAAA,UACtB,6CACEA,cAAA,CAAA,~~MAAA,EAAA;AAAA,~~YAAK~~,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,~~YAAG~~,GAAK,EAAA,WAAA;AAAA,~~YAChD~~,QAAA,EAAA,wBAAA,IAA4B,IAC3B,GAAA,QAAA,mBAECA,cAAA,~~CAAAC~~,uBAAA,EAAA;AAAA,~~cACC~~,YAAc,EAAA,wBAAA;AAAA,~~cACd~~,IAAM,EAAA,QAAA;AAAA,~~aACR~~,CAAA;AAAA,~~WAEJ~~,CAEA,GAAA,QAAA;AAAA,~~SAEJ~~,CAAA;AAAA,~~OAAA;AAAA,~~KACF,CAAA,CAAA;AAAA,GAEH,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"ListItemBase.js","sources":["../src/list-deprecated/ListItemBase.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, memo, useRef } from \"react\";\n\nimport { useOverflowDetection } from \"../utils\";\nimport { Highlighter } from \"./internal/Highlighter\";\n\nimport \"./ListItem.css\";\n\n//TODO does this need to be generic <Item?\nexport interface ListItemBaseProps extends HTMLAttributes<HTMLDivElement> {\n disabled?: boolean;\n deselectable?: boolean;\n focusVisible?: boolean;\n highlighted?: boolean;\n itemTextHighlightPattern?: RegExp \| string;\n selected?: boolean;\n tooltipText?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltListItemDeprecated\");\n\n// just to keep line number parity\n//\nexport const ListItemBase = memo(\n forwardRef(function ListItemBase(\n props: ListItemBaseProps,\n ref: ForwardedRef<HTMLDivElement>\n ) {\n const {\n className,\n deselectable,\n selected,\n highlighted = false,\n focusVisible,\n tooltipText,\n disabled,\n children,\n itemTextHighlightPattern,\n ...restProps\n } = props;\n\n const { current: detectTruncation } = useRef(typeof children === \"string\");\n\n const [overflowRef, isOverflowed] = useOverflowDetection<HTMLDivElement>();\n const setItemRef = useForkRef(overflowRef, ref);\n\n return (\n <Tooltip disabled={!isOverflowed} content={tooltipText}>\n <div\n aria-label={typeof children === \"string\" ? children : undefined}\n ref={detectTruncation ? ref : setItemRef}\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"deselectable\")]: deselectable,\n [withBaseName(\"highlighted\")]: highlighted,\n [withBaseName(\"selected\")]: selected,\n [withBaseName(\"focusVisible\")]: focusVisible,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n >\n {detectTruncation ? (\n <span className={withBaseName(\"textWrapper\")} ref={overflowRef}>\n {itemTextHighlightPattern == null ? (\n children\n ) : (\n <Highlighter\n matchPattern={itemTextHighlightPattern}\n text={children}\n />\n )}\n </span>\n ) : (\n children\n )}\n </div>\n </Tooltip>\n );\n })\n);\n"],"names":["makePrefixer","memo","forwardRef","ListItemBase","useRef","useOverflowDetection","useForkRef","jsx","Tooltip","clsx","Highlighter"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA,CAAA;AAInD,MAAM,YAAe,GAAAC,UAAA;AAAA,EAC1BC,gBAAW,CAAA,SAASC,aAClB,CAAA,KAAA,EACA,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAc,GAAA,KAAA;AAAA,MACd,YAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,wBAAA;AAAA,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,EAAE,OAAS,EAAA,gBAAA,KAAqBC,YAAO,CAAA,OAAO,aAAa,QAAQ,CAAA,CAAA;AAEzE,IAAA,MAAM,CAAC,WAAA,EAAa,YAAY,CAAA,GAAIC,yCAAqC,EAAA,CAAA;AACzE,IAAM,MAAA,UAAA,GAAaC,eAAW,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AAE9C,IAAA,uBACGC,cAAA,CAAAC,YAAA,EAAA;AAAA,MAAQ,UAAU,CAAC,YAAA;AAAA,MAAc,OAAS,EAAA,WAAA;AAAA,MACzC,QAAC,kBAAAD,cAAA,CAAA,KAAA,EAAA;AAAA,QACC,YAAY,EAAA,OAAO,QAAa,KAAA,QAAA,GAAW,QAAW,GAAA,KAAA,CAAA;AAAA,QACtD,GAAA,EAAK,mBAAmB,GAAM,GAAA,UAAA;AAAA,QAC7B,GAAG,SAAA;AAAA,QACJ,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,YAChC,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,YAC/B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,YAChC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC9B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QAEC,6CACEF,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UAAG,GAAK,EAAA,WAAA;AAAA,UAChD,QAAA,EAAA,wBAAA,IAA4B,IAC3B,GAAA,QAAA,mBAECA,cAAA,CAAAG,uBAAA,EAAA;AAAA,YACC,YAAc,EAAA,wBAAA;AAAA,YACd,IAAM,EAAA,QAAA;AAAA,WACR,CAAA;AAAA,SAEJ,CAEA,GAAA,QAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEH,CAAA;AACH;;;;"}

package/dist-cjs/packages/lab/src/list-deprecated/internal/Highlighter.js CHANGED Viewed

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var escapeRegExp = require('../../utils/escapeRegExp.js');
 require('@salt-ds/core');
+require('../../utils/useFloatingUI.js');
 require('./Highlighter.css.js');
 const baseName = "saltHighlighter";

package/dist-cjs/packages/lab/src/list-deprecated/internal/Highlighter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Highlighter.js","sources":["../src/list-deprecated/internal/Highlighter.jsx"],"sourcesContent":["import React from \"react\";\nimport { escapeRegExp } from \"../../utils\";\n\nimport \"./Highlighter.css\";\n\nconst baseName = \"saltHighlighter\";\n\nexport const Highlighter = (props) => {\n const { matchPattern, text = \"\" } = props;\n const matchRegex =\n typeof matchPattern === \"string\"\n ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n : matchPattern;\n return (\n <>\n {text.split(matchRegex).map((part, index) =>\n part.match(matchRegex) ? (\n <strong className={`${baseName}-highlight`} key={`${index}-${part}`}>\n {part}\n </strong>\n ) : (\n part\n )\n )}\n </>\n );\n};\n"],"names":["escapeRegExp","jsx","Fragment"],"mappings":"~~;;;;;;;;;;~~AAKA,MAAM,QAAW,GAAA,iBAAA,CAAA;AAEJ,MAAA,WAAA,GAAc,CAAC,KAAU,KAAA;AACpC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AACpC,EAAM,MAAA,UAAA,GACJ,OAAO,YAAA,KAAiB,QACpB,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAIA,yBAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AACN,EACE,uBAAAC,cAAA,CAAAC,mBAAA,EAAA;AAAA,IACG,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAE,CAAA,GAAA;AAAA,MAAI,CAAC,IAAM,EAAA,KAAA,KACjC,KAAK,KAAM,CAAA,UAAU,oBAClBD,cAAA,CAAA,QAAA,EAAA;AAAA,QAAO,WAAW,CAAG,EAAA,QAAA,CAAA,UAAA,CAAA;AAAA,QACnB,QAAA,EAAA,IAAA;AAAA,OAD8C,EAAA,CAAA,EAAG,KAAS,CAAA,CAAA,EAAA,IAAA,CAAA,CAE7D,CAEA,GAAA,IAAA;AAAA,KAEJ;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Highlighter.js","sources":["../src/list-deprecated/internal/Highlighter.jsx"],"sourcesContent":["import React from \"react\";\nimport { escapeRegExp } from \"../../utils\";\n\nimport \"./Highlighter.css\";\n\nconst baseName = \"saltHighlighter\";\n\nexport const Highlighter = (props) => {\n const { matchPattern, text = \"\" } = props;\n const matchRegex =\n typeof matchPattern === \"string\"\n ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n : matchPattern;\n return (\n <>\n {text.split(matchRegex).map((part, index) =>\n part.match(matchRegex) ? (\n <strong className={`${baseName}-highlight`} key={`${index}-${part}`}>\n {part}\n </strong>\n ) : (\n part\n )\n )}\n </>\n );\n};\n"],"names":["escapeRegExp","jsx","Fragment"],"mappings":";;;;;;;;;;;AAKA,MAAM,QAAW,GAAA,iBAAA,CAAA;AAEJ,MAAA,WAAA,GAAc,CAAC,KAAU,KAAA;AACpC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA,CAAA;AACpC,EAAM,MAAA,UAAA,GACJ,OAAO,YAAA,KAAiB,QACpB,GAAA,IAAI,MAAO,CAAA,CAAA,CAAA,EAAIA,yBAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AACN,EACE,uBAAAC,cAAA,CAAAC,mBAAA,EAAA;AAAA,IACG,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAE,CAAA,GAAA;AAAA,MAAI,CAAC,IAAM,EAAA,KAAA,KACjC,KAAK,KAAM,CAAA,UAAU,oBAClBD,cAAA,CAAA,QAAA,EAAA;AAAA,QAAO,WAAW,CAAG,EAAA,QAAA,CAAA,UAAA,CAAA;AAAA,QACnB,QAAA,EAAA,IAAA;AAAA,OAD8C,EAAA,CAAA,EAAG,KAAS,CAAA,CAAA,EAAA,IAAA,CAAA,CAE7D,CAEA,GAAA,IAAA;AAAA,KAEJ;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/list-deprecated/internal/scrollIntoView.js CHANGED Viewed

@@ -4,15 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var computeScrollIntoView = require('compute-scroll-into-view');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var computeScrollIntoView__default = /*#__PURE__*/_interopDefaultLegacy(computeScrollIntoView);
 function scrollIntoView(item, list) {
   if (!item) {
     return;
   }
-  const actions = computeScrollIntoView__default["default"](item, {
+  const actions = computeScrollIntoView.compute(item, {
     boundary: list,
     block: "nearest",
     scrollMode: "if-needed"

package/dist-cjs/packages/lab/src/list-deprecated/internal/scrollIntoView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scrollIntoView.js","sources":["../src/list-deprecated/internal/scrollIntoView.js"],"sourcesContent":["import ~~computeScrollIntoView~~ from \"compute-scroll-into-view\";\n\nexport function scrollIntoView(item, list) {\n if (!item) {\n return;\n }\n\n const actions = ~~computeScrollIntoView~~(item, {\n boundary: list,\n block: \"nearest\",\n scrollMode: \"if-needed\",\n });\n\n actions.forEach(({ el, top, left }) => {\n el.scrollTop = top;\n el.scrollLeft = left;\n });\n}\n"],"names":["~~computeScrollIntoView~~"],"mappings":"~~;;;;;;;;;;~~AAEgB,SAAA,cAAA,CAAe,MAAM,IAAM,EAAA;AACzC,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,OAAA;AAAA,GACF;AAEA,EAAM,MAAA,OAAA,GAAUA,~~0CAAsB~~,IAAM,EAAA;AAAA,~~IAC1C~~,QAAU,EAAA,IAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IACP,UAAY,EAAA,WAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,QAAQ,CAAC,EAAE,EAAI,EAAA,GAAA,EAAK,MAAW,KAAA;AACrC,IAAA,EAAA,CAAG,SAAY,GAAA,GAAA,CAAA;AACf,IAAA,EAAA,CAAG,UAAa,GAAA,IAAA,CAAA;AAAA,GACjB,CAAA,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"scrollIntoView.js","sources":["../src/list-deprecated/internal/scrollIntoView.js"],"sourcesContent":["import { compute } from \"compute-scroll-into-view\";\n\nexport function scrollIntoView(item, list) {\n if (!item) {\n return;\n }\n\n const actions = compute(item, {\n boundary: list,\n block: \"nearest\",\n scrollMode: \"if-needed\",\n });\n\n actions.forEach(({ el, top, left }) => {\n el.scrollTop = top;\n el.scrollLeft = left;\n });\n}\n"],"names":["compute"],"mappings":";;;;;;AAEgB,SAAA,cAAA,CAAe,MAAM,IAAM,EAAA;AACzC,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,OAAA;AAAA,GACF;AAEA,EAAM,MAAA,OAAA,GAAUA,8BAAQ,IAAM,EAAA;AAAA,IAC5B,QAAU,EAAA,IAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IACP,UAAY,EAAA,WAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,QAAQ,CAAC,EAAE,EAAI,EAAA,GAAA,EAAK,MAAW,KAAA;AACrC,IAAA,EAAA,CAAG,SAAY,GAAA,GAAA,CAAA;AACf,IAAA,EAAA,CAAG,UAAa,GAAA,IAAA,CAAA;AAAA,GACjB,CAAA,CAAA;AACH;;;;"}

package/dist-cjs/packages/lab/src/list-deprecated/useTypeSelect.js CHANGED Viewed

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var escapeRegExp = require('../utils/escapeRegExp.js');
 require('@salt-ds/core');
+require('../utils/useFloatingUI.js');
 var itemToString = require('./itemToString.js');
 const TYPE_SELECT_TIMEOUT = 1500;

package/dist-cjs/packages/lab/src/list-deprecated/useTypeSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTypeSelect.js","sources":["../src/list-deprecated/useTypeSelect.js"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { itemToString as defaultItemToString } from \"./itemToString\";\n\nconst TYPE_SELECT_TIMEOUT = 1500;\n\nexport function useTypeSelect(options) {\n const {\n getItemAtIndex,\n highlightedIndex,\n itemCount,\n itemToString = defaultItemToString,\n onTypeSelect,\n setFocusVisible,\n setHighlightedIndex,\n } = options;\n\n const getItemIndexForSearch = useCallback(\n (searchTerm, fromIndex) => {\n if (itemCount === 0) {\n return null;\n }\n\n let index = fromIndex \|\| 0;\n while (index < itemCount) {\n const item = getItemAtIndex(index);\n const textValue = itemToString ? itemToString(item) : item;\n if (\n textValue &&\n textValue.match(new RegExp(`^${escapeRegExp(searchTerm)}`, \"i\"))\n ) {\n return index;\n }\n\n index = index + 1;\n }\n\n return null;\n },\n [itemCount, itemToString, getItemAtIndex]\n );\n\n const state = useRef({\n search: \"\",\n timeout: null,\n }).current;\n\n // eslint-disable-next-line complexity\n const onKeyDownCapture = (event) => {\n const character = getStringForKey(event.key);\n if (!character \|\| event.ctrlKey \|\| event.metaKey) {\n return;\n }\n\n // Do not propagate the Spacebar event if it's meant to be part of the search.\n // When we time out, the search term becomes empty, hence the check on length.\n // Trimming is to account for the case of pressing the Spacebar more than once,\n // which should cycle through the selection/deselection of the focused item.\n if (character !== \" \" \|\| state.search.trim().length > 0) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // When typing same character sebsequently and quickly, we treat it as cyling through items\n // starting with that char instead of seaching for double character, because in most cases\n // there won't be any option having same characters at the beginning. This should be only\n // impacting beginning of the words because length of `character` would be 1.\n if (character !== state.search) {\n state.search += character;\n }\n\n // Prioritize items after the currently focused item, falling back to searching the whole list.\n // We want to cycle through choices when keep typing the same first character, hence the +1\n // condition. All subsequent characters should stay at the current item otherwise it will\n // always jumping around.\n let index = getItemIndexForSearch(\n state.search,\n state.search.length > 1 ? highlightedIndex : highlightedIndex + 1\n );\n\n // If no key found, search from the top.\n if (index == null) {\n index = getItemIndexForSearch(state.search);\n }\n\n if (index != null) {\n setFocusVisible(true);\n // TODO: Maybe we can repurpose this setHighlightedIndex so that the user controls it's meant to set\n // hightlighted index when expanded v.s. selected item when collapsed\n setHighlightedIndex(index);\n if (onTypeSelect) {\n onTypeSelect(index);\n }\n }\n\n clearTimeout(state.timeout);\n state.timeout = setTimeout(() => {\n state.search = \"\";\n }, TYPE_SELECT_TIMEOUT);\n };\n\n return {\n // Using a capturing listener to catch the keydown event before\n // other hooks in order to handle the Spacebar event.\n onKeyDownCapture,\n };\n}\n\nfunction getStringForKey(key) {\n // If the key is of length 1, it is an ASCII value.\n // Otherwise, if there are no ASCII characters in the key name,\n // it is a Unicode character.\n // See https://www.w3.org/TR/uievents-key/\n if (key.length === 1 \|\| !/^[A-Z]/i.test(key)) {\n return key;\n }\n\n return \"\";\n}\n"],"names":["itemToString","defaultItemToString","useCallback","escapeRegExp","useRef"],"mappings":"~~;;;;;;;;;~~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"}
1	+ {"version":3,"file":"useTypeSelect.js","sources":["../src/list-deprecated/useTypeSelect.js"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport { itemToString as defaultItemToString } from \"./itemToString\";\n\nconst TYPE_SELECT_TIMEOUT = 1500;\n\nexport function useTypeSelect(options) {\n const {\n getItemAtIndex,\n highlightedIndex,\n itemCount,\n itemToString = defaultItemToString,\n onTypeSelect,\n setFocusVisible,\n setHighlightedIndex,\n } = options;\n\n const getItemIndexForSearch = useCallback(\n (searchTerm, fromIndex) => {\n if (itemCount === 0) {\n return null;\n }\n\n let index = fromIndex \|\| 0;\n while (index < itemCount) {\n const item = getItemAtIndex(index);\n const textValue = itemToString ? itemToString(item) : item;\n if (\n textValue &&\n textValue.match(new RegExp(`^${escapeRegExp(searchTerm)}`, \"i\"))\n ) {\n return index;\n }\n\n index = index + 1;\n }\n\n return null;\n },\n [itemCount, itemToString, getItemAtIndex]\n );\n\n const state = useRef({\n search: \"\",\n timeout: null,\n }).current;\n\n // eslint-disable-next-line complexity\n const onKeyDownCapture = (event) => {\n const character = getStringForKey(event.key);\n if (!character \|\| event.ctrlKey \|\| event.metaKey) {\n return;\n }\n\n // Do not propagate the Spacebar event if it's meant to be part of the search.\n // When we time out, the search term becomes empty, hence the check on length.\n // Trimming is to account for the case of pressing the Spacebar more than once,\n // which should cycle through the selection/deselection of the focused item.\n if (character !== \" \" \|\| state.search.trim().length > 0) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n // When typing same character sebsequently and quickly, we treat it as cyling through items\n // starting with that char instead of seaching for double character, because in most cases\n // there won't be any option having same characters at the beginning. This should be only\n // impacting beginning of the words because length of `character` would be 1.\n if (character !== state.search) {\n state.search += character;\n }\n\n // Prioritize items after the currently focused item, falling back to searching the whole list.\n // We want to cycle through choices when keep typing the same first character, hence the +1\n // condition. All subsequent characters should stay at the current item otherwise it will\n // always jumping around.\n let index = getItemIndexForSearch(\n state.search,\n state.search.length > 1 ? highlightedIndex : highlightedIndex + 1\n );\n\n // If no key found, search from the top.\n if (index == null) {\n index = getItemIndexForSearch(state.search);\n }\n\n if (index != null) {\n setFocusVisible(true);\n // TODO: Maybe we can repurpose this setHighlightedIndex so that the user controls it's meant to set\n // hightlighted index when expanded v.s. selected item when collapsed\n setHighlightedIndex(index);\n if (onTypeSelect) {\n onTypeSelect(index);\n }\n }\n\n clearTimeout(state.timeout);\n state.timeout = setTimeout(() => {\n state.search = \"\";\n }, TYPE_SELECT_TIMEOUT);\n };\n\n return {\n // Using a capturing listener to catch the keydown event before\n // other hooks in order to handle the Spacebar event.\n onKeyDownCapture,\n };\n}\n\nfunction getStringForKey(key) {\n // If the key is of length 1, it is an ASCII value.\n // Otherwise, if there are no ASCII characters in the key name,\n // it is a Unicode character.\n // See https://www.w3.org/TR/uievents-key/\n if (key.length === 1 \|\| !/^[A-Z]/i.test(key)) {\n return key;\n }\n\n return \"\";\n}\n"],"names":["itemToString","defaultItemToString","useCallback","escapeRegExp","useRef"],"mappings":"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"}

package/dist-cjs/packages/lab/src/logo/Logo.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = ".salt-density-high {\n  --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n  --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n  --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n  --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n  --logo-color: var(--saltLogo-color, var(--salt-palette-neutral-secondary-foreground));\n  --logo-divider-color: var(--saltLogo-pipe-color, var(--salt-separable-secondary-borderColor));\n  --logo-divider-height: var(--saltLogo-title-height, var(--salt-size-divider-height));\n  --logo-divider-margin: 0 calc(var(--salt-size-unit) * 2);\n  --logo-fontSize: var(--salt-text-fontSize);\n  --logo-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltLogo-compact {\n  --logo-pipe-margin: 0 calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--logo-height);\n}\n\n.saltLogo img {\n  max-height: 100%;\n}\n\n.saltLogo-wrapper {\n  display: inline-flex;\n  position: relative;\n  height: var(--logo-height);\n}\n\n.saltLogo-logo {\n  fill: var(--logo-color);\n  margin: auto;\n  stroke: none !important;\n  text-align: center;\n  font-size: var(--logo-fontSize);\n  line-height: var(--logo-lineHeight);\n}\n\n.saltLogo-appTitle {\n  align-self: center;\n  color: var(--logo-color);\n  position: relative;\n}\n\n.saltLogo-titlePipe {\n  border-right: 1px solid var(--logo-divider-color);\n  margin: var(--logo-divider-margin);\n  height: var(--logo-divider-height);\n}\n";
+var css_248z = ".salt-density-high {\n  --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n  --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n  --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n  --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n  --logo-color: var(--saltLogo-color, var(--salt-text-secondary-foreground));\n  --logo-divider-color: var(--saltLogo-pipe-color, var(--salt-separable-secondary-borderColor));\n  --logo-divider-height: var(--saltLogo-title-height, var(--salt-size-separator-height));\n  --logo-divider-margin: 0 calc(var(--salt-size-unit) * 2);\n  --logo-fontSize: var(--salt-text-fontSize);\n  --logo-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltLogo-compact {\n  --logo-pipe-margin: 0 calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--logo-height);\n}\n\n.saltLogo img {\n  max-height: 100%;\n}\n\n.saltLogo-wrapper {\n  display: inline-flex;\n  position: relative;\n  height: var(--logo-height);\n}\n\n.saltLogo-logo {\n  fill: var(--logo-color);\n  margin: auto;\n  stroke: none !important;\n  text-align: center;\n  font-size: var(--logo-fontSize);\n  line-height: var(--logo-lineHeight);\n}\n\n.saltLogo-appTitle {\n  align-self: center;\n  color: var(--logo-color);\n  position: relative;\n}\n\n.saltLogo-titlePipe {\n  border-right: 1px solid var(--logo-divider-color);\n  margin: var(--logo-divider-margin);\n  height: var(--logo-divider-height);\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/metric/MetricContent.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-differential-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-differential-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-differential-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-differential-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
+var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-status-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-status-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-status-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-status-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/overlay/Overlay.js CHANGED Viewed

@@ -7,9 +7,9 @@ var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
 var clsx = require('clsx');
 var React = require('react');
+var Portal = require('../portal/Portal.js');
 var WindowContext = require('../window/WindowContext.js');
 require('../window/ElectronWindow.js');
-var Portal = require('../portal/Portal.js');
 require('./Overlay.css.js');
 const withBaseName = core.makePrefixer("saltOverlay");

package/dist-cjs/packages/lab/src/overlay/Overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentProps, ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { ~~useWindow~~ } from \"../~~window~~\";\nimport { ~~UseFloatingUIProps~~ } from \"../~~popper~~\";\~~nimport { Portal } from \"../portal\";\~~n\nimport \"./Overlay.css\";\n\ninterface ADAExceptions {\n showClose?: boolean;\n}\n\nexport interface OverlayProps\n extends ComponentPropsWithoutRef<\"div\">,\n Partial<Pick<UseFloatingUIProps, \"onOpenChange\" \| \"open\">> {\n /*\n object that houses ada related props.\n * adaExceptions.showClose defaults to true. It can be removed at the risk of ADA compliance\n */\n adaExceptions?: ADAExceptions;\n arrowProps?: ComponentProps<\"div\">;\n variant?: \"primary\" \| \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltOverlay\");\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n (\n {\n adaExceptions: { showClose } = {\n showClose: true,\n },\n arrowProps,\n children,\n className,\n open,\n onOpenChange,\n variant = \"primary\",\n ...rest\n },\n ref\n ) => {\n // Will need to figure out a better way to assign popper id's for the electron windows\n const id = useId();\n const Window = useWindow();\n\n const handleCloseButton = () => {\n onOpenChange?.(false);\n };\n\n if (!open) {\n return null;\n }\n\n return (\n <Portal>\n <Window\n className={clsx(withBaseName(), className, {\n [withBaseName(variant)]: variant === \"secondary\",\n })}\n id={id}\n ref={ref}\n {...rest}\n >\n <div\n className={clsx(withBaseName(\"content\"))}\n data-testid=\"overlay-content\"\n >\n {showClose && (\n <Button\n onClick={handleCloseButton}\n className={withBaseName(\"close\")}\n variant=\"secondary\"\n >\n <CloseIcon\n accessible-text=\"close overlay\"\n className={withBaseName(\"closeIcon\")}\n />\n </Button>\n )}\n {children}\n <div className={withBaseName(\"arrow\")} {...arrowProps} />\n </div>\n </Window>\n </Portal>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","useId","useWindow","jsx","Portal","clsx","jsxs","Button","CloseIcon"],"mappings":";;;;;;;;;;;;;;~~AA0BA~~,MAAM,YAAA,GAAeA,kBAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,CACE;AAAA,IACE,aAAA,EAAe,EAAE,SAAA,EAAc,GAAA;AAAA,MAC7B,SAAW,EAAA,IAAA;AAAA,KACb;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AAEH,IAAA,MAAM,KAAKC,UAAM,EAAA,CAAA;AACjB,IAAA,MAAM,SAASC,uBAAU,EAAA,CAAA;AAEzB,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,QAAC,kBAAAD,cAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAAE,SAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,UACzC,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,OAAY,KAAA,WAAA;AAAA,SACtC,CAAA;AAAA,QACD,EAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,UACvC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA;AAAA,YAAA,SAAA,oBACEF,cAAA,CAAAI,WAAA,EAAA;AAAA,cACC,OAAS,EAAA,iBAAA;AAAA,cACT,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,OAAQ,EAAA,WAAA;AAAA,cAER,QAAC,kBAAAJ,cAAA,CAAAK,eAAA,EAAA;AAAA,gBACC,iBAAgB,EAAA,eAAA;AAAA,gBAChB,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,eACrC,CAAA;AAAA,aACF,CAAA;AAAA,YAED,QAAA;AAAA,4BACAL,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SACzD,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import { Button, makePrefixer, UseFloatingUIProps, useId } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentProps, ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { Portal } from \"../portal\";\nimport { useWindow } from \"../window\";\n\nimport \"./Overlay.css\";\n\ninterface ADAExceptions {\n showClose?: boolean;\n}\n\nexport interface OverlayProps\n extends ComponentPropsWithoutRef<\"div\">,\n Partial<Pick<UseFloatingUIProps, \"onOpenChange\" \| \"open\">> {\n /*\n object that houses ada related props.\n * adaExceptions.showClose defaults to true. It can be removed at the risk of ADA compliance\n */\n adaExceptions?: ADAExceptions;\n arrowProps?: ComponentProps<\"div\">;\n variant?: \"primary\" \| \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltOverlay\");\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n (\n {\n adaExceptions: { showClose } = {\n showClose: true,\n },\n arrowProps,\n children,\n className,\n open,\n onOpenChange,\n variant = \"primary\",\n ...rest\n },\n ref\n ) => {\n // Will need to figure out a better way to assign popper id's for the electron windows\n const id = useId();\n const Window = useWindow();\n\n const handleCloseButton = () => {\n onOpenChange?.(false);\n };\n\n if (!open) {\n return null;\n }\n\n return (\n <Portal>\n <Window\n className={clsx(withBaseName(), className, {\n [withBaseName(variant)]: variant === \"secondary\",\n })}\n id={id}\n ref={ref}\n {...rest}\n >\n <div\n className={clsx(withBaseName(\"content\"))}\n data-testid=\"overlay-content\"\n >\n {showClose && (\n <Button\n onClick={handleCloseButton}\n className={withBaseName(\"close\")}\n variant=\"secondary\"\n >\n <CloseIcon\n accessible-text=\"close overlay\"\n className={withBaseName(\"closeIcon\")}\n />\n </Button>\n )}\n {children}\n <div className={withBaseName(\"arrow\")} {...arrowProps} />\n </div>\n </Window>\n </Portal>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","useId","useWindow","jsx","Portal","clsx","jsxs","Button","CloseIcon"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,kBAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,CACE;AAAA,IACE,aAAA,EAAe,EAAE,SAAA,EAAc,GAAA;AAAA,MAC7B,SAAW,EAAA,IAAA;AAAA,KACb;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AAEH,IAAA,MAAM,KAAKC,UAAM,EAAA,CAAA;AACjB,IAAA,MAAM,SAASC,uBAAU,EAAA,CAAA;AAEzB,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,QAAC,kBAAAD,cAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAAE,SAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,UACzC,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,OAAY,KAAA,WAAA;AAAA,SACtC,CAAA;AAAA,QACD,EAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAC,eAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,UACvC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA;AAAA,YAAA,SAAA,oBACEF,cAAA,CAAAI,WAAA,EAAA;AAAA,cACC,OAAS,EAAA,iBAAA;AAAA,cACT,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,OAAQ,EAAA,WAAA;AAAA,cAER,QAAC,kBAAAJ,cAAA,CAAAK,eAAA,EAAA;AAAA,gBACC,iBAAgB,EAAA,eAAA;AAAA,gBAChB,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,eACrC,CAAA;AAAA,aACF,CAAA;AAAA,YAED,QAAA;AAAA,4BACAL,cAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SACzD,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/overlay/useOverlay.js CHANGED Viewed

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var reactDomInteractions = require('@floating-ui/react-dom-interactions');
+var react = require('@floating-ui/react');
 var core = require('@salt-ds/core');
 var React = require('react');
-var useFloatingUI = require('../popper/useFloatingUI.js');
 var WindowContext = require('../window/WindowContext.js');
 require('../window/ElectronWindow.js');
@@ -22,11 +21,11 @@ function useOverlay(props) {
     setOpen(newOpen);
     onOpenChange == null ? void 0 : onOpenChange(newOpen);
   };
-  const middleware = WindowContext.isDesktop ? [core.margin(24), reactDomInteractions.arrow({ element: arrowRef })] : [
-    reactDomInteractions.offset(24),
-    reactDomInteractions.flip(),
-    reactDomInteractions.shift({ limiter: reactDomInteractions.limitShift() }),
-    reactDomInteractions.arrow({ element: arrowRef })
+  const middleware = WindowContext.isDesktop ? [core.margin(24), react.arrow({ element: arrowRef })] : [
+    react.offset(24),
+    react.flip(),
+    react.shift({ limiter: react.limitShift() }),
+    react.arrow({ element: arrowRef })
   ];
   const {
     reference,
@@ -37,7 +36,7 @@ function useOverlay(props) {
     context,
     middlewareData,
     update
-  } = useFloatingUI.useFloatingUI({
+  } = core.useFloatingUI({
     open,
     onOpenChange: handleOpenChange,
     placement,
@@ -50,10 +49,10 @@ function useOverlay(props) {
     },
     [update]
   );
-  const { getFloatingProps, getReferenceProps } = reactDomInteractions.useInteractions([
-    reactDomInteractions.useDismiss(context),
-    reactDomInteractions.useRole(context, { role: "dialog" }),
-    reactDomInteractions.useClick(context)
+  const { getFloatingProps, getReferenceProps } = react.useInteractions([
+    react.useDismiss(context),
+    react.useRole(context, { role: "dialog" }),
+    react.useClick(context)
   ]);
   const getTriggerProps = (userProps) => {
     return getReferenceProps({

package/dist-cjs/packages/lab/src/overlay/useOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverlay.js","sources":["../src/overlay/useOverlay.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react~~-dom-interactions~~\";\nimport { margin, useControlled } from \"@salt-ds/core\";\nimport {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n JSXElementConstructor,\n useCallback,\n useRef,\n} from \"react\";\nimport { OverlayProps } from \"./Overlay\";\nimport { ~~useFloatingUI, UseFloatingUIProps } from \"../popper\";\nimport {~~ isDesktop } from \"../window\";\n\nexport type UseOverlayProps = Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" \| \"open\" \| \"placement\">\n>;\n\nexport function useOverlay(props: UseOverlayProps) {\n const { open: openProp, placement = \"right\", onOpenChange } = props;\n\n const arrowRef = useRef<HTMLDivElement \| null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n const handleOpenChange = (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n };\n const middleware = isDesktop\n ? [margin(24), arrow({ element: arrowRef })]\n : [\n offset(24),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ];\n const {\n reference,\n floating,\n x,\n y,\n strategy,\n context,\n middlewareData,\n update,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement,\n middleware,\n });\n\n const handleArrowRef = useCallback(\n (node: HTMLDivElement) => {\n arrowRef.current = node;\n update();\n },\n [update]\n );\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n useDismiss(context),\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n ]);\n\n const getTriggerProps = <\n Element extends\n \| keyof JSX.IntrinsicElements\n \| JSXElementConstructor<any> = \"div\"\n >(\n userProps?: ComponentPropsWithoutRef<Element>\n ) => {\n return getReferenceProps({\n ...userProps,\n ref: reference,\n }) as ComponentPropsWithRef<Element>;\n };\n\n const getOverlayProps = (userProps?: OverlayProps) => {\n const arrowProps = {\n ref: handleArrowRef,\n style: {\n left: middlewareData.arrow?.x ?? \"\",\n top: middlewareData.arrow?.y ?? \"\",\n },\n };\n\n return {\n arrowProps,\n open,\n onOpenChange: handleOpenChange,\n ...getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ...userProps,\n style: {\n top: y ?? \"\",\n left: x ?? \"\",\n position: strategy,\n ...(userProps?.style \|\| {}),\n },\n ref: floating,\n }),\n } as OverlayProps;\n };\n\n return {\n getTriggerProps,\n getOverlayProps,\n };\n}\n"],"names":["useRef","useControlled","isDesktop","margin","arrow","offset","flip","shift","limitShift","useFloatingUI","useCallback","useInteractions","useDismiss","useRole","useClick"],"mappings":"~~;;;;;;;;;;;AA2BO~~,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,SAAY,GAAA,OAAA,EAAS,cAAiB,GAAA,KAAA,CAAA;AAE9D,EAAM,MAAA,QAAA,GAAWA,aAA8B,IAAI,CAAA,CAAA;AAEnD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AACf,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,OAAA,CAAA,CAAA;AAAA,GACjB,CAAA;AACA,EAAA,MAAM,UAAa,GAAAC,uBAAA,GACf,CAACC,WAAA,CAAO,EAAE,CAAA,EAAGC,~~0BAAM~~,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAC,CACzC,GAAA;AAAA,IACEC,~~4BAAO~~,EAAE,CAAA;AAAA,IACTC,~~yBAAK~~,EAAA;AAAA,IACLC,~~0BAAM~~,CAAA,EAAE,OAAS,EAAAC~~,+BAAA~~,IAAc,CAAA;AAAA,IAC/BJ,~~0BAAM~~,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,GAC7B,CAAA;AACJ,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA;AAAA,IACA,MAAA;AAAA,MACEK,~~2BAAc~~,CAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAA;AAAA,IACA,UAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,cAAiB,GAAAC,iBAAA;AAAA,IACrB,CAAC,IAAyB,KAAA;AACxB,MAAA,QAAA,CAAS,OAAU,GAAA,IAAA,CAAA;AACnB,MAAO,MAAA,EAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAIC,~~oCAAgB~~,CAAA;AAAA,IAC9DC,~~gCAAW~~,OAAO,CAAA;AAAA,IAClBC,~~4BAAQ~~,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,UAAU,CAAA;AAAA,IACnCC,~~8BAAS~~,OAAO,CAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAM,MAAA,eAAA,GAAkB,CAKtB,SACG,KAAA;AACH,IAAA,OAAO,iBAAkB,CAAA;AAAA,MACvB,GAAG,SAAA;AAAA,MACH,GAAK,EAAA,SAAA;AAAA,KACN,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,SAA6B,KAAA;~~AA7FxD~~,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;~~AA8FI~~,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAK,EAAA,cAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,cAAA,CAAe,KAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsB,MAAtB,IAA2B,GAAA,EAAA,GAAA,EAAA;AAAA,QACjC,GAAK,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,cAAA,CAAe,KAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsB,MAAtB,IAA2B,GAAA,EAAA,GAAA,EAAA;AAAA,OAClC;AAAA,KACF,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,GAAG,gBAAiB,CAAA;AAAA,QAElB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAG,SAAA;AAAA,QACH,KAAO,EAAA;AAAA,UACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,UACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,UACX,QAAU,EAAA,QAAA;AAAA,UACV,GAAA,CAAI,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,KAAS,EAAC;AAAA,SAC3B;AAAA,QACA,GAAK,EAAA,QAAA;AAAA,OACN,CAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
1	+ {"version":3,"file":"useOverlay.js","sources":["../src/overlay/useOverlay.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n margin,\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n JSXElementConstructor,\n useCallback,\n useRef,\n} from \"react\";\nimport { OverlayProps } from \"./Overlay\";\nimport { isDesktop } from \"../window\";\n\nexport type UseOverlayProps = Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" \| \"open\" \| \"placement\">\n>;\n\nexport function useOverlay(props: UseOverlayProps) {\n const { open: openProp, placement = \"right\", onOpenChange } = props;\n\n const arrowRef = useRef<HTMLDivElement \| null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n const handleOpenChange = (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n };\n const middleware = isDesktop\n ? [margin(24), arrow({ element: arrowRef })]\n : [\n offset(24),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ];\n const {\n reference,\n floating,\n x,\n y,\n strategy,\n context,\n middlewareData,\n update,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement,\n middleware,\n });\n\n const handleArrowRef = useCallback(\n (node: HTMLDivElement) => {\n arrowRef.current = node;\n update();\n },\n [update]\n );\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n useDismiss(context),\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n ]);\n\n const getTriggerProps = <\n Element extends\n \| keyof JSX.IntrinsicElements\n \| JSXElementConstructor<any> = \"div\"\n >(\n userProps?: ComponentPropsWithoutRef<Element>\n ) => {\n return getReferenceProps({\n ...userProps,\n ref: reference,\n }) as ComponentPropsWithRef<Element>;\n };\n\n const getOverlayProps = (userProps?: OverlayProps) => {\n const arrowProps = {\n ref: handleArrowRef,\n style: {\n left: middlewareData.arrow?.x ?? \"\",\n top: middlewareData.arrow?.y ?? \"\",\n },\n };\n\n return {\n arrowProps,\n open,\n onOpenChange: handleOpenChange,\n ...getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ...userProps,\n style: {\n top: y ?? \"\",\n left: x ?? \"\",\n position: strategy,\n ...(userProps?.style \|\| {}),\n },\n ref: floating,\n }),\n } as OverlayProps;\n };\n\n return {\n getTriggerProps,\n getOverlayProps,\n };\n}\n"],"names":["useRef","useControlled","isDesktop","margin","arrow","offset","flip","shift","limitShift","useFloatingUI","useCallback","useInteractions","useDismiss","useRole","useClick"],"mappings":"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"}

package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js CHANGED Viewed

@@ -19,12 +19,16 @@ const ParentChildItem = React.forwardRef(
     ...rest
   }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
-      className: clsx.clsx(className, withBaseName(), {
-        ...direction && {
-          [withBaseName(`slide-${direction}`)]: !disableAnimations
+      className: clsx.clsx(
+        withBaseName(),
+        {
+          ...direction && {
+            [withBaseName(`slide-${direction}`)]: !disableAnimations
+          },
+          "saltFlexItem-stacked": isStacked
         },
-        "saltFlexItem-stacked": isStacked
-      }),
+        className
+      ),
       ref,
       ...rest,
       children

package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FlexItem,\n flexItemAlignment,\n makePrefixer,\n ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" \| \"bottom\" \| \"left\" \| \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n /\n align?: flexItemAlignment;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Direction for slide animations.\n /\n direction?: SlideDirection;\n /\n Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n /\n grow?: ResponsiveProp<number>;\n /\n Determines whether the component is stacked\n /\n isStacked?: boolean;\n /\n Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n */\n shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n function ParentChildItem(\n {\n disableAnimations = false,\n direction,\n isStacked,\n children,\n className,\n ...rest\n },\n ref\n ) {\n return (\n <FlexItem\n className={clsx(~~className,~~ withBaseName(), {\n ...(direction && {\n [withBaseName(`slide-${direction}`)]: !disableAnimations,\n }),\n \"saltFlexItem-stacked\": isStacked,\n })}\n ref={ref}\n {...rest}\n >\n {children}\n </FlexItem>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","ParentChildItem","jsx","FlexItem","clsx"],"mappings":";;;;;;;;;;AAwCA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,~~CAAK~~,~~SAAW~~,EAAA,~~YAAA,EAAgB,EAAA~~;AAAA,~~QACzC~~,GAAI,SAAa,IAAA;AAAA,~~UACf~~,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,~~SACzC~~;AAAA,~~QACA~~,sBAAwB,EAAA,SAAA;AAAA,~~OACzB~~,~~CAAA~~;AAAA,~~MACD~~,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FlexItem,\n flexItemAlignment,\n makePrefixer,\n ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" \| \"bottom\" \| \"left\" \| \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n /\n align?: flexItemAlignment;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Direction for slide animations.\n /\n direction?: SlideDirection;\n /\n Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n /\n grow?: ResponsiveProp<number>;\n /\n Determines whether the component is stacked\n /\n isStacked?: boolean;\n /\n Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n */\n shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n function ParentChildItem(\n {\n disableAnimations = false,\n direction,\n isStacked,\n children,\n className,\n ...rest\n },\n ref\n ) {\n return (\n <FlexItem\n className={clsx(\n withBaseName(),\n {\n ...(direction && {\n [withBaseName(`slide-${direction}`)]: !disableAnimations,\n }),\n \"saltFlexItem-stacked\": isStacked,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </FlexItem>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","ParentChildItem","jsx","FlexItem","clsx"],"mappings":";;;;;;;;;;AAwCA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,GAAI,SAAa,IAAA;AAAA,YACf,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,WACzC;AAAA,UACA,sBAAwB,EAAA,SAAA;AAAA,SAC1B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js CHANGED Viewed

@@ -7,6 +7,7 @@ var core = require('@salt-ds/core');
 var clsx = require('clsx');
 var React = require('react');
 var ParentChildItem = require('../parent-child-item/ParentChildItem.js');
+require('../utils/useFloatingUI.js');
 var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
 require('./ParentChildLayout.css.js');
@@ -55,7 +56,7 @@ const ParentChildLayout = React.forwardRef(function ParentChildLayout2({
     })
   };
   return /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, {
-    className: clsx.clsx(className, withBaseName()),
+    className: clsx.clsx(withBaseName(), className),
     ref,
     ...rest,
     children: stackedView ? stackedViewChildren[stackedViewElement] : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {

package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n Breakpoints,\n ~~makePrefixer~~,\n ~~FlexLayout~~,\n ~~FlexLayoutProps~~,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" \| \"child\";\n\ntype Orientation = \"horizontal\" \| \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Breakpoint at which the parent and child will stack.\n /\n stackedAtBreakpoint?: keyof Breakpoints;\n /\n Change element that is displayed when in staked view.\n /\n stackedViewElement?: StackedViewElement;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Orientation for slide animations.\n /\n orientation?: Orientation;\n /\n Controls the space between columns.\n /\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /\n Parent component to be rendered\n /\n parent: ReactNode;\n /\n Child component to be rendered\n */\n child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n orientation: Orientation,\n stackedViewElement: StackedViewElement\n) => {\n let direction: SlideDirection = \"right\";\n\n if (orientation === \"horizontal\") {\n if (stackedViewElement === \"parent\") {\n direction = \"left\";\n } else {\n direction = \"right\";\n }\n } else {\n if (stackedViewElement === \"parent\") {\n direction = \"bottom\";\n } else {\n direction = \"top\";\n }\n }\n\n return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n stackedAtBreakpoint = \"sm\",\n stackedViewElement = \"parent\",\n disableAnimations = false,\n parent,\n child,\n className,\n orientation = \"horizontal\",\n ...rest\n },\n ref\n) {\n const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n const stackedViewChildren = {\n parent: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {parent}\n </ParentChildItem>\n ),\n child: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {child}\n </ParentChildItem>\n ),\n };\n\n return (\n <FlexLayout className={clsx(~~className,~~ withBaseName())} ref={ref} {...rest}>\n {stackedView ? (\n stackedViewChildren[stackedViewElement]\n ) : (\n <>\n <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n {parent}\n </ParentChildItem>\n <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n {child}\n </ParentChildItem>\n </>\n )}\n </FlexLayout>\n );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","clsx","jsxs","Fragment"],"mappings":"~~;;;;;;;;;;;;~~AAiDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,~~SAAW~~,EAAA,~~YAAA~~,~~EAAc~~,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n Breakpoints,\n FlexLayout,\n FlexLayoutProps,\n makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" \| \"child\";\n\ntype Orientation = \"horizontal\" \| \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Breakpoint at which the parent and child will stack.\n /\n stackedAtBreakpoint?: keyof Breakpoints;\n /\n Change element that is displayed when in staked view.\n /\n stackedViewElement?: StackedViewElement;\n /\n Disable all animations.\n /\n disableAnimations?: boolean;\n /\n Orientation for slide animations.\n /\n orientation?: Orientation;\n /\n Controls the space between columns.\n /\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /\n Parent component to be rendered\n /\n parent: ReactNode;\n /\n Child component to be rendered\n */\n child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n orientation: Orientation,\n stackedViewElement: StackedViewElement\n) => {\n let direction: SlideDirection = \"right\";\n\n if (orientation === \"horizontal\") {\n if (stackedViewElement === \"parent\") {\n direction = \"left\";\n } else {\n direction = \"right\";\n }\n } else {\n if (stackedViewElement === \"parent\") {\n direction = \"bottom\";\n } else {\n direction = \"top\";\n }\n }\n\n return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n stackedAtBreakpoint = \"sm\",\n stackedViewElement = \"parent\",\n disableAnimations = false,\n parent,\n child,\n className,\n orientation = \"horizontal\",\n ...rest\n },\n ref\n) {\n const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n const stackedViewChildren = {\n parent: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {parent}\n </ParentChildItem>\n ),\n child: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {child}\n </ParentChildItem>\n ),\n };\n\n return (\n <FlexLayout className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {stackedView ? (\n stackedViewChildren[stackedViewElement]\n ) : (\n <>\n <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n {parent}\n </ParentChildItem>\n <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n {child}\n </ParentChildItem>\n </>\n )}\n </FlexLayout>\n );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/pill/Pill.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, calc(var(--salt-size-unit) * 0.75));\n  padding-right: var(--saltPill-label-paddingRight, calc(var(--salt-size-unit) * 0.75));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-foreground);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: var(--salt-size-graphic-small);\n  margin-left: calc(var(--salt-size-unit) * 0.75);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
+var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, calc(var(--salt-size-unit) * 0.75));\n  padding-right: var(--saltPill-label-paddingRight, calc(var(--salt-size-unit) * 0.75));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-foreground);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: calc(var(--salt-size-unit) * 0.75);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;