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

package/dist-es/packages/lab/src/list-deprecated/ListItemBase.js

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

package/dist-es/packages/lab/src/list-deprecated/ListItemBase.js.map

@@ -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":["ListItemBase"],"mappings":"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"}
+{"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":["ListItemBase"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAInD,MAAM,YAAe,GAAA,IAAA;AAAA,EAC1B,UAAW,CAAA,SAASA,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,KAAqB,MAAO,CAAA,OAAO,aAAa,QAAQ,CAAA,CAAA;AAEzE,IAAA,MAAM,CAAC,WAAA,EAAa,YAAY,CAAA,GAAI,oBAAqC,EAAA,CAAA;AACzE,IAAM,MAAA,UAAA,GAAa,UAAW,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AAE9C,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MAAQ,UAAU,CAAC,YAAA;AAAA,MAAc,OAAS,EAAA,WAAA;AAAA,MACzC,QAAC,kBAAA,GAAA,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,EAAA,IAAA;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,6CACE,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UAAG,GAAK,EAAA,WAAA;AAAA,UAChD,QAAA,EAAA,wBAAA,IAA4B,IAC3B,GAAA,QAAA,mBAEC,GAAA,CAAA,WAAA,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-es/packages/lab/src/list-deprecated/internal/Highlighter.js

@@ -2,6 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import 'react';
 import { escapeRegExp } from '../../utils/escapeRegExp.js';
 import '@salt-ds/core';
+import '../../utils/useFloatingUI.js';
 import './Highlighter.css.js';
 
 const baseName = "saltHighlighter";

package/dist-es/packages/lab/src/list-deprecated/internal/Highlighter.js.map

@@ -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":[],"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,EAAI,YAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AACN,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IACG,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAE,CAAA,GAAA;AAAA,MAAI,CAAC,IAAM,EAAA,KAAA,KACjC,KAAK,KAAM,CAAA,UAAU,oBAClB,GAAA,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;;;;"}
+{"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":[],"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,EAAI,YAAa,CAAA,YAAY,CAAM,CAAA,CAAA,CAAA,EAAA,IAAI,CAClD,GAAA,YAAA,CAAA;AACN,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IACG,QAAA,EAAA,IAAA,CAAK,KAAM,CAAA,UAAU,CAAE,CAAA,GAAA;AAAA,MAAI,CAAC,IAAM,EAAA,KAAA,KACjC,KAAK,KAAM,CAAA,UAAU,oBAClB,GAAA,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-es/packages/lab/src/list-deprecated/useTypeSelect.js

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from 'react';
 import { escapeRegExp } from '../utils/escapeRegExp.js';
 import '@salt-ds/core';
+import '../utils/useFloatingUI.js';
 import { itemToString } from './itemToString.js';
 
 const TYPE_SELECT_TIMEOUT = 1500;

package/dist-es/packages/lab/src/list-deprecated/useTypeSelect.js.map

@@ -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"],"mappings":"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"}
+{"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"],"mappings":"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"}

package/dist-es/packages/lab/src/overlay/Overlay.js

@@ -3,9 +3,9 @@ import { makePrefixer, useId, Button } from '@salt-ds/core';
 import { CloseIcon } from '@salt-ds/icons';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
+import { Portal } from '../portal/Portal.js';
 import { useWindow } from '../window/WindowContext.js';
 import '../window/ElectronWindow.js';
-import { Portal } from '../portal/Portal.js';
 import './Overlay.css.js';
 
 const withBaseName = makePrefixer("saltOverlay");

package/dist-es/packages/lab/src/overlay/Overlay.js.map

@@ -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":[],"mappings":";;;;;;;;;;AA0BA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAA,UAAA;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,KAAK,KAAM,EAAA,CAAA;AACjB,IAAA,MAAM,SAAS,SAAU,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,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,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,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,UACvC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA;AAAA,YAAA,SAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,OAAS,EAAA,iBAAA;AAAA,cACT,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,OAAQ,EAAA,WAAA;AAAA,cAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,iBAAgB,EAAA,eAAA;AAAA,gBAChB,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,eACrC,CAAA;AAAA,aACF,CAAA;AAAA,YAED,QAAA;AAAA,4BACA,GAAA,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;;;;"}
+{"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":[],"mappings":";;;;;;;;;;AAyBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAA,UAAA;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,KAAK,KAAM,EAAA,CAAA;AACjB,IAAA,MAAM,SAAS,SAAU,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,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,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,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,UACvC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA;AAAA,YAAA,SAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,OAAS,EAAA,iBAAA;AAAA,cACT,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,OAAQ,EAAA,WAAA;AAAA,cAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,iBAAgB,EAAA,eAAA;AAAA,gBAChB,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,eACrC,CAAA;AAAA,aACF,CAAA;AAAA,YAED,QAAA;AAAA,4BACA,GAAA,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-es/packages/lab/src/overlay/useOverlay.js

@@ -1,7 +1,6 @@
-import { arrow, offset, flip, shift, limitShift, useInteractions, useDismiss, useRole, useClick } from '@floating-ui/react-dom-interactions';
-import { useControlled, margin } from '@salt-ds/core';
+import { arrow, offset, flip, shift, limitShift, useInteractions, useDismiss, useRole, useClick } from '@floating-ui/react';
+import { useControlled, margin, useFloatingUI } from '@salt-ds/core';
 import { useRef, useCallback } from 'react';
-import { useFloatingUI } from '../popper/useFloatingUI.js';
 import { isDesktop } from '../window/WindowContext.js';
 import '../window/ElectronWindow.js';
 

package/dist-es/packages/lab/src/overlay/useOverlay.js.map

@@ -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":[],"mappings":"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"}
+{"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":[],"mappings":"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"}

package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.js

@@ -3,6 +3,7 @@ import { makePrefixer, FlexLayout } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { ParentChildItem } from '../parent-child-item/ParentChildItem.js';
+import '../utils/useFloatingUI.js';
 import { useIsViewportLargerThanBreakpoint } from '../utils/useIsViewportLargerThanBreakpoint.js';
 import './ParentChildLayout.css.js';
 

package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.js.map

@@ -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":["ParentChildLayout"],"mappings":";;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,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,GAAoB,UAG/B,CAAA,SAASA,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,GAAc,kCAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACG,GAAA,CAAA,eAAA,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,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,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;;;;"}
+{"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(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":["ParentChildLayout"],"mappings":";;;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,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,GAAoB,UAG/B,CAAA,SAASA,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,GAAc,kCAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACG,GAAA,CAAA,eAAA,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,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,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-es/packages/lab/src/pill/PillBase.js

@@ -1,14 +1,11 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, useState, isValidElement, cloneElement, useRef } from 'react';
-import { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
-import '../tooltip/Tooltip.js';
-import { useTooltipContext } from '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
-import { pillBaseName } from './constants.js';
+import { makePrefixer, Tooltip, useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { DeleteButton } from './internal/DeleteButton.js';
-import './Pill.css.js';
 import { DivButton } from './internal/DivButton.js';
+import { pillBaseName } from './constants.js';
+import './Pill.css.js';
 
 const useEllipsisIsActive = () => {
   const labelRef = useRef(null);
@@ -41,7 +38,6 @@ const PillBase = forwardRef(function PillBase2({
   onKeyUp = noop,
   ...rest
 }, ref) {
-  const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();
   const [active, setActive] = useState(false);
   const [labelRef, ellipsis] = useEllipsisIsActive();
   const clickKeys = ["Enter", " "];
@@ -80,56 +76,44 @@ const PillBase = forwardRef(function PillBase2({
       });
     }
   };
-  const { getTriggerProps, getTooltipProps } = useTooltip({
+  return /* @__PURE__ */ jsx(Tooltip, {
+    content: label,
     disabled: !ellipsis && disabled,
-    enterDelay,
-    placement,
-    leaveDelay
-  });
-  const { ref: triggerRef, ...triggerProps } = getTriggerProps({
-    "aria-disabled": disabled || void 0,
-    "aria-roledescription": ariaRoledescription,
-    className: clsx(
-      withBaseName(),
-      {
-        [withBaseName("clickable")]: clickable,
-        [withBaseName("deletable")]: deletable && !disabled,
-        [withBaseName("disabled")]: disabled,
-        [withBaseName("active")]: active
-      },
-      className
-    ),
-    "data-testid": "pill",
-    onKeyDown: disabled ? void 0 : handleKeyDown,
-    onKeyUp: disabled ? void 0 : handleKeyUp,
-    onClick: disabled ? void 0 : handleClick,
-    role: "button",
-    tabIndex: disabled ? -1 : 0,
-    ...rest
-  });
-  const handleRef = useForkRef(triggerRef, ref);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(Tooltip, {
-        ...getTooltipProps({ title: label, ...TooltipProps2 })
-      }),
-      /* @__PURE__ */ jsxs(Component, {
-        ref: handleRef,
-        ...triggerProps,
-        children: [
-          pillIcon || null,
-          /* @__PURE__ */ jsx("div", {
-            className: withBaseName("label"),
-            ref: labelRef,
-            children: /* @__PURE__ */ jsx("span", {
-              className: withBaseName("innerLabel"),
-              children: label
-            })
-          }),
-          deletable ? renderDeleteIcon() : null
-        ]
-      })
-    ]
+    ...TooltipProps2,
+    children: /* @__PURE__ */ jsxs(Component, {
+      "aria-disabled": disabled || void 0,
+      "aria-roledescription": ariaRoledescription,
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("clickable")]: clickable,
+          [withBaseName("deletable")]: deletable && !disabled,
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("active")]: active
+        },
+        className
+      ),
+      "data-testid": "pill",
+      onKeyDown: disabled ? void 0 : handleKeyDown,
+      onKeyUp: disabled ? void 0 : handleKeyUp,
+      onClick: disabled ? void 0 : handleClick,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      ref,
+      ...rest,
+      children: [
+        pillIcon || null,
+        /* @__PURE__ */ jsx("div", {
+          className: withBaseName("label"),
+          ref: labelRef,
+          children: /* @__PURE__ */ jsx("span", {
+            className: withBaseName("innerLabel"),
+            children: label
+          })
+        }),
+        deletable ? renderDeleteIcon() : null
+      ]
+    })
   });
 });
 

package/dist-es/packages/lab/src/pill/PillBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillBase.js","sources":["../src/pill/PillBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MutableRefObject,\n  ReactElement,\n  ReactEventHandler,\n  SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { TooltipProps, useTooltip, useTooltipContext } from \"../tooltip\";\nimport { pillBaseName } from \"./constants\";\nimport { DeleteButton } from \"./internal/DeleteButton\";\n\nimport \"./Pill.css\";\nimport { DivButton } from \"./internal/DivButton\";\n\nconst useEllipsisIsActive = (): [\n  MutableRefObject<HTMLDivElement | null>,\n  boolean\n] => {\n  const labelRef = useRef<HTMLDivElement | null>(null);\n  const [showEllipsis, setShowEllipsis] = useState(false);\n\n  useIsomorphicLayoutEffect(() => {\n    if (labelRef.current) {\n      setShowEllipsis(\n        labelRef.current.offsetWidth < labelRef.current.scrollWidth\n      );\n    }\n  }, []);\n  return [labelRef, showEllipsis];\n};\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport interface PillBaseProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Props passed to the tooltip\n   */\n  TooltipProps?: Partial<TooltipProps>;\n  /**\n   * Defines a human-readable, author-localized description for the role of an element.\n   *\n   * This should be in favour of aria-label for `Pill`\n   **/\n  \"aria-roledescription\"?: string;\n  /**\n   * Clickable variation. Use 'onClick' for callback.\n   */\n  clickable?: boolean;\n  /**\n   * Shows delete icon. Use `onDelete` for callback.\n   */\n  deletable?: boolean;\n  /**\n   * Override the default delete icon element. Shown only if `deletable` is set.\n   */\n  // TODO: Should this be DeleteIcon (caps)?\n  deleteIcon?: ReactElement;\n  /**\n   * If `true`, the pill will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the pill is been highlighted.\n   * If `true`, the pill will display Tooltip when text within is truncated.\n   */\n  highlighted?: boolean;\n  /**\n   * Icon element.\n   */\n  // TODO: Should this be Icon (caps)?\n  icon?: ReactElement;\n  /**\n   * The content of the label.\n   */\n  label?: string;\n  /**\n   * Callback function fired when pill is clicked.\n   */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Callback function fired when the delete icon is clicked. Used when `deletable` is true.\n   */\n  onDelete?: ReactEventHandler<HTMLElement>;\n}\n\nexport const PillBase = forwardRef(function PillBase(\n  {\n    TooltipProps = {},\n    \"aria-roledescription\": ariaRoledescription = \"Pill\",\n    label,\n    className,\n    // New API\n    clickable,\n    disabled,\n    // TODO: Should this be a prop as we have variant: 'closable'\n    // New API.\n    deletable,\n    deleteIcon: deleteIconProp,\n    // TODO: Not implemented. Consider to add `useImperativeHandle` like API to Tooltip?\n    highlighted,\n    icon,\n    onClick = noop,\n    onDelete,\n    onKeyDown = noop,\n    onKeyUp = noop,\n    ...rest\n  }: PillBaseProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();\n\n  const [active, setActive] = useState(false);\n  const [labelRef, ellipsis] = useEllipsisIsActive();\n  const clickKeys = [\"Enter\", \" \"];\n\n  const pillIcon =\n    // FIXME: icon type\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    icon && isValidElement<any>(icon)\n      ? cloneElement(icon, {\n          ...icon.props,\n          // FIXME: icon.props is any\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n          className: clsx(withBaseName(\"icon\"), icon.props.className),\n        })\n      : icon;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown(event);\n    if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {\n      setActive(true);\n    }\n  };\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyUp(event);\n    setActive(false);\n  };\n\n  const handleClick = (event: SyntheticEvent<HTMLDivElement, Event>) => {\n    onClick(event);\n  };\n\n  // FIXME: use polymorphic button as div for deletable and clickable cases.\n  const Component = deletable || clickable ? DivButton : \"div\";\n\n  const renderDeleteIcon = () => {\n    // FIXME: deleteIconProp type\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    if (deleteIconProp && isValidElement<any>(deleteIconProp)) {\n      return cloneElement(deleteIconProp, {\n        className: clsx(\n          withBaseName(`deleteButton`),\n          // FIXME: deleteIconProp.props is any\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n          deleteIconProp.props.className\n        ),\n        disabled,\n        onClick: onDelete,\n      });\n    } else {\n      return <DeleteButton disabled={disabled} onClick={onDelete} />;\n    }\n  };\n\n  const { getTriggerProps, getTooltipProps } = useTooltip({\n    disabled: !ellipsis && disabled,\n    enterDelay,\n    placement,\n    leaveDelay,\n  });\n\n  const { ref: triggerRef, ...triggerProps } = getTriggerProps<\n    typeof Component\n  >({\n    \"aria-disabled\": disabled || undefined,\n    \"aria-roledescription\": ariaRoledescription,\n    className: clsx(\n      withBaseName(),\n      {\n        [withBaseName(\"clickable\")]: clickable,\n        [withBaseName(\"deletable\")]: deletable && !disabled,\n        [withBaseName(\"disabled\")]: disabled,\n        [withBaseName(\"active\")]: active,\n      },\n      className\n    ),\n    // @ts-ignore\n    \"data-testid\": \"pill\",\n    onKeyDown: disabled ? undefined : handleKeyDown,\n    onKeyUp: disabled ? undefined : handleKeyUp,\n    onClick: disabled ? undefined : handleClick,\n    role: \"button\",\n    tabIndex: disabled ? -1 : 0,\n    ...rest,\n  });\n\n  const handleRef = useForkRef(triggerRef, ref);\n\n  return (\n    <>\n      <Tooltip {...getTooltipProps({ title: label, ...TooltipProps })} />\n      <Component ref={handleRef} {...triggerProps}>\n        {pillIcon || null}\n        <div className={withBaseName(\"label\")} ref={labelRef}>\n          <span className={withBaseName(\"innerLabel\")}>{label}</span>\n        </div>\n        {deletable ? renderDeleteIcon() : null}\n      </Component>\n    </>\n  );\n});\n"],"names":["PillBase","TooltipProps"],"mappings":"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"}
+{"version":3,"file":"PillBase.js","sources":["../src/pill/PillBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  KeyboardEvent,\n  MutableRefObject,\n  ReactElement,\n  ReactEventHandler,\n  SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  Tooltip,\n  TooltipProps,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\n\nimport { DeleteButton } from \"./internal/DeleteButton\";\nimport { DivButton } from \"./internal/DivButton\";\nimport { pillBaseName } from \"./constants\";\n\nimport \"./Pill.css\";\n\nconst useEllipsisIsActive = (): [\n  MutableRefObject<HTMLDivElement | null>,\n  boolean\n] => {\n  const labelRef = useRef<HTMLDivElement | null>(null);\n  const [showEllipsis, setShowEllipsis] = useState(false);\n\n  useIsomorphicLayoutEffect(() => {\n    if (labelRef.current) {\n      setShowEllipsis(\n        labelRef.current.offsetWidth < labelRef.current.scrollWidth\n      );\n    }\n  }, []);\n  return [labelRef, showEllipsis];\n};\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(pillBaseName);\n\nexport interface PillBaseProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Props passed to the tooltip\n   */\n  TooltipProps?: Partial<TooltipProps>;\n  /**\n   * Defines a human-readable, author-localized description for the role of an element.\n   *\n   * This should be in favour of aria-label for `Pill`\n   **/\n  \"aria-roledescription\"?: string;\n  /**\n   * Clickable variation. Use 'onClick' for callback.\n   */\n  clickable?: boolean;\n  /**\n   * Shows delete icon. Use `onDelete` for callback.\n   */\n  deletable?: boolean;\n  /**\n   * Override the default delete icon element. Shown only if `deletable` is set.\n   */\n  // TODO: Should this be DeleteIcon (caps)?\n  deleteIcon?: ReactElement;\n  /**\n   * If `true`, the pill will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Whether the pill is been highlighted.\n   * If `true`, the pill will display Tooltip when text within is truncated.\n   */\n  highlighted?: boolean;\n  /**\n   * Icon element.\n   */\n  // TODO: Should this be Icon (caps)?\n  icon?: ReactElement;\n  /**\n   * The content of the label.\n   */\n  label?: string;\n  /**\n   * Callback function fired when pill is clicked.\n   */\n  onClick?: (event: SyntheticEvent<HTMLDivElement>) => void;\n  /**\n   * Callback function fired when the delete icon is clicked. Used when `deletable` is true.\n   */\n  onDelete?: ReactEventHandler<HTMLElement>;\n}\n\nexport const PillBase = forwardRef(function PillBase(\n  {\n    TooltipProps = {},\n    \"aria-roledescription\": ariaRoledescription = \"Pill\",\n    label,\n    className,\n    // New API\n    clickable,\n    disabled,\n    // TODO: Should this be a prop as we have variant: 'closable'\n    // New API.\n    deletable,\n    deleteIcon: deleteIconProp,\n    // TODO: Not implemented. Consider to add `useImperativeHandle` like API to Tooltip?\n    highlighted,\n    icon,\n    onClick = noop,\n    onDelete,\n    onKeyDown = noop,\n    onKeyUp = noop,\n    ...rest\n  }: PillBaseProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const [active, setActive] = useState(false);\n  const [labelRef, ellipsis] = useEllipsisIsActive();\n  const clickKeys = [\"Enter\", \" \"];\n\n  const pillIcon =\n    // FIXME: icon type\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    icon && isValidElement<any>(icon)\n      ? cloneElement(icon, {\n          ...icon.props,\n          // FIXME: icon.props is any\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n          className: clsx(withBaseName(\"icon\"), icon.props.className),\n        })\n      : icon;\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown(event);\n    if (!disabled && !deletable && clickKeys.indexOf(event.key) !== -1) {\n      setActive(true);\n    }\n  };\n\n  const handleKeyUp = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyUp(event);\n    setActive(false);\n  };\n\n  const handleClick = (event: SyntheticEvent<HTMLDivElement, Event>) => {\n    onClick(event);\n  };\n\n  // FIXME: use polymorphic button as div for deletable and clickable cases.\n  const Component = deletable || clickable ? DivButton : \"div\";\n\n  const renderDeleteIcon = () => {\n    // FIXME: deleteIconProp type\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    if (deleteIconProp && isValidElement<any>(deleteIconProp)) {\n      return cloneElement(deleteIconProp, {\n        className: clsx(\n          withBaseName(`deleteButton`),\n          // FIXME: deleteIconProp.props is any\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n          deleteIconProp.props.className\n        ),\n        disabled,\n        onClick: onDelete,\n      });\n    } else {\n      return <DeleteButton disabled={disabled} onClick={onDelete} />;\n    }\n  };\n\n  return (\n    <Tooltip content={label} disabled={!ellipsis && disabled} {...TooltipProps}>\n      <Component\n        aria-disabled={disabled || undefined}\n        aria-roledescription={ariaRoledescription}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"clickable\")]: clickable,\n            [withBaseName(\"deletable\")]: deletable && !disabled,\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"active\")]: active,\n          },\n          className\n        )}\n        data-testid=\"pill\"\n        onKeyDown={disabled ? undefined : handleKeyDown}\n        onKeyUp={disabled ? undefined : handleKeyUp}\n        onClick={disabled ? undefined : handleClick}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        ref={ref}\n        {...rest}\n      >\n        {pillIcon || null}\n        <div className={withBaseName(\"label\")} ref={labelRef}>\n          <span className={withBaseName(\"innerLabel\")}>{label}</span>\n        </div>\n        {deletable ? renderDeleteIcon() : null}\n      </Component>\n    </Tooltip>\n  );\n});\n"],"names":["PillBase","TooltipProps"],"mappings":"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"}

package/dist-es/packages/lab/src/query-input/internal/CategoryList.js

@@ -6,6 +6,7 @@ import '../../list/ListItem.js';
 import { List } from '../../list/List.js';
 import '../../common-hooks/collectionProvider.js';
 import '../../common-hooks/keyUtils.js';
+import '../../utils/useFloatingUI.js';
 import '../../responsive/useResizeObserver.js';
 import '../../list/VirtualizedList.js';
 import { CategoryListItem } from './CategoryListItem.js';

package/dist-es/packages/lab/src/query-input/internal/CategoryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryList.js","sources":["../src/query-input/internal/CategoryList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useRef, useState } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { SelectHandler } from \"../../common-hooks\";\nimport { List } from \"../../list\";\nimport { CategoryListItem } from \"./CategoryListItem\";\nimport { CategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryList\");\n\nexport interface CategoryListProps {\n  categories: QueryInputCategory[];\n  rootWidth: number;\n  onCategorySelect: (category: QueryInputCategory | null) => void;\n  highlightedCategoryIndex?: number;\n  setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n}\n\nconst getCategoryLabel = (category: QueryInputCategory) => category.name;\n\nexport function CategoryList(props: CategoryListProps) {\n  const {\n    categories,\n    rootWidth,\n    onCategorySelect,\n    highlightedCategoryIndex,\n    setHighlightedCategoryIndex,\n  } = props;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [measuredCategories, setMeasuredCategories] = useState<\n    QueryInputCategory[]\n  >([]);\n  const [contextValue, setContextValue] = useState<CategoryListContext>({\n    width: 0,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    setTimeout(() => {\n      if (measureRef.current) {\n        const width = measureRef.current.offsetWidth;\n        setMeasuredCategories(categories);\n        setContextValue({\n          width,\n        });\n      }\n    }, 0);\n  }, [categories, setMeasuredCategories, setContextValue]);\n\n  const onSelect: SelectHandler<QueryInputCategory> = useCallback(\n    (_, item) => {\n      onCategorySelect(item);\n    },\n    [onCategorySelect]\n  );\n\n  const isMeasuring = measuredCategories !== categories;\n\n  if (isMeasuring) {\n    return (\n      <div ref={measureRef} className={withBaseName(\"categoryWidthMeasure\")}>\n        {categories.map((c, i) => {\n          return (\n            <div key={i} className={withBaseName(\"category\")}>\n              {c.name}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <CategoryListContext.Provider value={contextValue}>\n      <List<QueryInputCategory>\n        ListItem={CategoryListItem}\n        data-testid=\"category-list\"\n        highlightedIndex={highlightedCategoryIndex}\n        itemToString={getCategoryLabel}\n        onHighlight={setHighlightedCategoryIndex}\n        onSelect={onSelect}\n        source={categories}\n        width={rootWidth}\n      />\n    </CategoryListContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAUpD,MAAM,gBAAA,GAAmB,CAAC,QAAA,KAAiC,QAAS,CAAA,IAAA,CAAA;AAE7D,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAA,QAAA,CAElD,EAAE,CAAA,CAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAA8B,CAAA;AAAA,IACpE,KAAO,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,KAAA,GAAQ,WAAW,OAAQ,CAAA,WAAA,CAAA;AACjC,QAAA,qBAAA,CAAsB,UAAU,CAAA,CAAA;AAChC,QAAgB,eAAA,CAAA;AAAA,UACd,KAAA;AAAA,SACD,CAAA,CAAA;AAAA,OACH;AAAA,OACC,CAAC,CAAA,CAAA;AAAA,GACH,EAAA,CAAC,UAAY,EAAA,qBAAA,EAAuB,eAAe,CAAC,CAAA,CAAA;AAEvD,EAAA,MAAM,QAA8C,GAAA,WAAA;AAAA,IAClD,CAAC,GAAG,IAAS,KAAA;AACX,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAuB,KAAA,UAAA,CAAA;AAE3C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,UAAA;AAAA,MAAY,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,MACjE,QAAW,EAAA,UAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACxB,QAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,UAAY,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAC5C,QAAE,EAAA,CAAA,CAAA,IAAA;AAAA,SAAA,EADK,CAEV,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAoB,QAApB,EAAA;AAAA,IAA6B,KAAO,EAAA,YAAA;AAAA,IACnC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAU,EAAA,gBAAA;AAAA,MACV,aAAY,EAAA,eAAA;AAAA,MACZ,gBAAkB,EAAA,wBAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,WAAa,EAAA,2BAAA;AAAA,MACb,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,KAAO,EAAA,SAAA;AAAA,KACT,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CategoryList.js","sources":["../src/query-input/internal/CategoryList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useRef, useState } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { SelectHandler } from \"../../common-hooks\";\nimport { List } from \"../../list\";\nimport { CategoryListItem } from \"./CategoryListItem\";\nimport { CategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryList\");\n\nexport interface CategoryListProps {\n  categories: QueryInputCategory[];\n  rootWidth: number;\n  onCategorySelect: (category: QueryInputCategory | null) => void;\n  highlightedCategoryIndex?: number;\n  setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n}\n\nconst getCategoryLabel = (category: QueryInputCategory) => category.name;\n\nexport function CategoryList(props: CategoryListProps) {\n  const {\n    categories,\n    rootWidth,\n    onCategorySelect,\n    highlightedCategoryIndex,\n    setHighlightedCategoryIndex,\n  } = props;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [measuredCategories, setMeasuredCategories] = useState<\n    QueryInputCategory[]\n  >([]);\n  const [contextValue, setContextValue] = useState<CategoryListContext>({\n    width: 0,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    setTimeout(() => {\n      if (measureRef.current) {\n        const width = measureRef.current.offsetWidth;\n        setMeasuredCategories(categories);\n        setContextValue({\n          width,\n        });\n      }\n    }, 0);\n  }, [categories, setMeasuredCategories, setContextValue]);\n\n  const onSelect: SelectHandler<QueryInputCategory> = useCallback(\n    (_, item) => {\n      onCategorySelect(item);\n    },\n    [onCategorySelect]\n  );\n\n  const isMeasuring = measuredCategories !== categories;\n\n  if (isMeasuring) {\n    return (\n      <div ref={measureRef} className={withBaseName(\"categoryWidthMeasure\")}>\n        {categories.map((c, i) => {\n          return (\n            <div key={i} className={withBaseName(\"category\")}>\n              {c.name}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <CategoryListContext.Provider value={contextValue}>\n      <List<QueryInputCategory>\n        ListItem={CategoryListItem}\n        data-testid=\"category-list\"\n        highlightedIndex={highlightedCategoryIndex}\n        itemToString={getCategoryLabel}\n        onHighlight={setHighlightedCategoryIndex}\n        onSelect={onSelect}\n        source={categories}\n        width={rootWidth}\n      />\n    </CategoryListContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAUpD,MAAM,gBAAA,GAAmB,CAAC,QAAA,KAAiC,QAAS,CAAA,IAAA,CAAA;AAE7D,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAA,QAAA,CAElD,EAAE,CAAA,CAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAA8B,CAAA;AAAA,IACpE,KAAO,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,KAAA,GAAQ,WAAW,OAAQ,CAAA,WAAA,CAAA;AACjC,QAAA,qBAAA,CAAsB,UAAU,CAAA,CAAA;AAChC,QAAgB,eAAA,CAAA;AAAA,UACd,KAAA;AAAA,SACD,CAAA,CAAA;AAAA,OACH;AAAA,OACC,CAAC,CAAA,CAAA;AAAA,GACH,EAAA,CAAC,UAAY,EAAA,qBAAA,EAAuB,eAAe,CAAC,CAAA,CAAA;AAEvD,EAAA,MAAM,QAA8C,GAAA,WAAA;AAAA,IAClD,CAAC,GAAG,IAAS,KAAA;AACX,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAuB,KAAA,UAAA,CAAA;AAE3C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,UAAA;AAAA,MAAY,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,MACjE,QAAW,EAAA,UAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACxB,QAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,UAAY,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAC5C,QAAE,EAAA,CAAA,CAAA,IAAA;AAAA,SAAA,EADK,CAEV,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,GAAA,CAAC,oBAAoB,QAApB,EAAA;AAAA,IAA6B,KAAO,EAAA,YAAA;AAAA,IACnC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAU,EAAA,gBAAA;AAAA,MACV,aAAY,EAAA,eAAA;AAAA,MACZ,gBAAkB,EAAA,wBAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,WAAa,EAAA,2BAAA;AAAA,MACb,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,KAAO,EAAA,SAAA;AAAA,KACT,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/query-input/internal/CategoryListItem.js

@@ -7,6 +7,7 @@ import { ListItem } from '../../list/ListItem.js';
 import '../../list/List.js';
 import '../../common-hooks/collectionProvider.js';
 import '../../common-hooks/keyUtils.js';
+import '../../utils/useFloatingUI.js';
 import '../../responsive/useResizeObserver.js';
 import '../../list/VirtualizedList.js';
 import { useCategoryListContext } from './CategoryListContext.js';

package/dist-es/packages/lab/src/query-input/internal/CategoryListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryListItem.js","sources":["../src/query-input/internal/CategoryListItem.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { CSSProperties, useMemo, useRef } from \"react\";\nimport { ListItem, ListItemProps, ListItemType } from \"../../list\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { useCategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryListItem\");\n\nexport interface CategoryListItemProps\n  extends ListItemProps<QueryInputCategory> {\n  category: QueryInputCategory;\n}\n\nexport const CategoryListItem: ListItemType<QueryInputCategory> =\n  function CategoryListItem({ item: category, ...props }) {\n    const textRef = useRef<HTMLDivElement>(null);\n    const context = useCategoryListContext();\n\n    const textStyle: CSSProperties = useMemo(\n      () => ({\n        minWidth: context.width,\n      }),\n      [context.width]\n    );\n\n    return (\n      <ListItem {...props} label={category?.name}>\n        <div ref={textRef} className={withBaseName(\"text\")} style={textStyle}>\n          {category?.name}\n        </div>\n        <div className={withBaseName(\"valuesContainer\")}>\n          <span>(</span>\n          <span className={withBaseName(\"values\")}>\n            {category?.values.join(\", \")}\n          </span>\n          <span>)</span>\n        </div>\n        <ChevronRightIcon className={withBaseName(\"chevron\")} />\n      </ListItem>\n    );\n  };\n"],"names":["CategoryListItem"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAOjD,MAAM,mBACX,SAASA,iBAAAA,CAAiB,EAAE,IAAM,EAAA,QAAA,EAAA,GAAa,OAAS,EAAA;AACtD,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAU,sBAAuB,EAAA,CAAA;AAEvC,EAAA,MAAM,SAA2B,GAAA,OAAA;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU,OAAQ,CAAA,KAAA;AAAA,KACpB,CAAA;AAAA,IACA,CAAC,QAAQ,KAAK,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA;AAAA,IAAU,GAAG,KAAA;AAAA,IAAO,OAAO,QAAU,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,IACpC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAK,EAAA,OAAA;AAAA,QAAS,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAG,KAAO,EAAA,SAAA;AAAA,QACxD,QAAU,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,OACb,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QAC5C,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BACN,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,YACnC,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,OAAO,IAAK,CAAA,IAAA,CAAA;AAAA,WACzB,CAAA;AAAA,0BACC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,SAAA;AAAA,OACT,CAAA;AAAA,sBACC,GAAA,CAAA,gBAAA,EAAA;AAAA,QAAiB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GACxD,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"CategoryListItem.js","sources":["../src/query-input/internal/CategoryListItem.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { CSSProperties, useMemo, useRef } from \"react\";\nimport { ListItem, ListItemProps, ListItemType } from \"../../list\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { useCategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryListItem\");\n\nexport interface CategoryListItemProps\n  extends ListItemProps<QueryInputCategory> {\n  category: QueryInputCategory;\n}\n\nexport const CategoryListItem: ListItemType<QueryInputCategory> =\n  function CategoryListItem({ item: category, ...props }) {\n    const textRef = useRef<HTMLDivElement>(null);\n    const context = useCategoryListContext();\n\n    const textStyle: CSSProperties = useMemo(\n      () => ({\n        minWidth: context.width,\n      }),\n      [context.width]\n    );\n\n    return (\n      <ListItem {...props} label={category?.name}>\n        <div ref={textRef} className={withBaseName(\"text\")} style={textStyle}>\n          {category?.name}\n        </div>\n        <div className={withBaseName(\"valuesContainer\")}>\n          <span>(</span>\n          <span className={withBaseName(\"values\")}>\n            {category?.values.join(\", \")}\n          </span>\n          <span>)</span>\n        </div>\n        <ChevronRightIcon className={withBaseName(\"chevron\")} />\n      </ListItem>\n    );\n  };\n"],"names":["CategoryListItem"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAOjD,MAAM,mBACX,SAASA,iBAAAA,CAAiB,EAAE,IAAM,EAAA,QAAA,EAAA,GAAa,OAAS,EAAA;AACtD,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAU,sBAAuB,EAAA,CAAA;AAEvC,EAAA,MAAM,SAA2B,GAAA,OAAA;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU,OAAQ,CAAA,KAAA;AAAA,KACpB,CAAA;AAAA,IACA,CAAC,QAAQ,KAAK,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA;AAAA,IAAU,GAAG,KAAA;AAAA,IAAO,OAAO,QAAU,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,IACpC,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,GAAK,EAAA,OAAA;AAAA,QAAS,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAG,KAAO,EAAA,SAAA;AAAA,QACxD,QAAU,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,OACb,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QAC5C,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BACN,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,YACnC,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,OAAO,IAAK,CAAA,IAAA,CAAA;AAAA,WACzB,CAAA;AAAA,0BACC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,SAAA;AAAA,OACT,CAAA;AAAA,sBACC,GAAA,CAAA,gBAAA,EAAA;AAAA,QAAiB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GACxD,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/query-input/internal/QueryInputBody.js

@@ -7,6 +7,7 @@ import { ToggleButtonGroup } from '../../toggle-button/ToggleButtonGroup.js';
 import { TokenizedInput } from '../../tokenized-input/TokenizedInput.js';
 import '../../tokenized-input/TokenizedInputBase.js';
 import 'clipboard-copy';
+import '../../utils/useFloatingUI.js';
 import '../../form-field-context/FormFieldContext.js';
 
 const withBaseName = makePrefixer("saltQueryInputBody");

package/dist-es/packages/lab/src/query-input/internal/QueryInputBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryInputBody.js","sources":["../src/query-input/internal/QueryInputBody.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  KeyboardEventHandler,\n  Ref,\n  SyntheticEvent,\n  useMemo,\n} from \"react\";\n\nimport {\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupChangeEventHandler,\n} from \"../../toggle-button\";\nimport {\n  ChangeHandler,\n  StringToItem,\n  TokenizedInput,\n} from \"../../tokenized-input\";\nimport { QueryInputItem } from \"../queryInputTypes\";\nimport { BooleanOperator } from \"../useQueryInput\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputBody\");\n\nexport interface QueryInputBodyProps {\n  inputRef: Ref<HTMLInputElement>;\n  disabled?: boolean;\n  showCategory?: boolean;\n  selectedItems: QueryInputItem[];\n  onBlur: FocusEventHandler<HTMLInputElement>;\n  onFocus: FocusEventHandler<HTMLInputElement>;\n  onInputFocus: FocusEventHandler<HTMLInputElement>;\n  onInputBlur: FocusEventHandler<HTMLInputElement>;\n  onInputClick: (event: SyntheticEvent) => void;\n  onInputClear: () => void;\n  inputValue?: string;\n  onInputChange: ChangeEventHandler<HTMLInputElement>;\n  isFocused?: boolean;\n  onSelectedItemsChange: ChangeHandler<QueryInputItem>;\n  onKeyDown: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  booleanOperator: BooleanOperator;\n  onBooleanOperatorChange: (newBooleanOperator: BooleanOperator) => void;\n}\n\nexport const QueryInputBody = forwardRef<HTMLDivElement, QueryInputBodyProps>(\n  function QueryInputBody(props, ref) {\n    const {\n      inputRef,\n      disabled,\n      selectedItems,\n      onInputFocus,\n      onInputBlur,\n      showCategory,\n      inputValue,\n      onInputChange,\n      isFocused,\n      onInputClear,\n      onSelectedItemsChange,\n      onKeyDown,\n      onInputClick,\n      booleanOperator,\n      onBooleanOperatorChange,\n    } = props;\n\n    const itemToString = useMemo(() => {\n      if (showCategory) {\n        return (item: QueryInputItem) => [item.category, item.value].join(\": \");\n      }\n      return (item: QueryInputItem) => item.value;\n    }, [showCategory]);\n\n    const stringToItem: StringToItem<QueryInputItem> = (\n      selectedItems,\n      value\n    ) => {\n      return {\n        category: null,\n        value,\n      };\n    };\n\n    const onChange: ToggleButtonGroupChangeEventHandler = (event, index) => {\n      const newBooleanOperator = index === 0 ? \"and\" : \"or\";\n      onBooleanOperatorChange(newBooleanOperator);\n    };\n\n    return (\n      <div ref={ref} className={withBaseName()}>\n        <FilterIcon />\n        <TokenizedInput\n          inputRef={inputRef}\n          disabled={disabled}\n          className={withBaseName(\"input\")}\n          selectedItems={selectedItems}\n          itemToString={itemToString as any}\n          stringToItem={stringToItem as any}\n          onInputFocus={onInputFocus}\n          onInputBlur={onInputBlur}\n          value={inputValue}\n          onClick={onInputClick}\n          onInputChange={onInputChange}\n          expanded={isFocused}\n          onClear={onInputClear}\n          onChange={onSelectedItemsChange as any}\n          onKeyDown={onKeyDown}\n        />\n        <div className={withBaseName(\"separator\")} />\n        <ToggleButtonGroup\n          variant=\"secondary\"\n          className={withBaseName(\"buttonGroup\")}\n          data-testid=\"boolean-selector\"\n          selectedIndex={booleanOperator === \"and\" ? 0 : 1}\n          onChange={onChange}\n        >\n          <ToggleButton value=\"and\">And</ToggleButton>\n          <ToggleButton value=\"or\">Or</ToggleButton>\n        </ToggleButtonGroup>\n      </div>\n    );\n  }\n);\n"],"names":["QueryInputBody","selectedItems"],"mappings":"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"}
+{"version":3,"file":"QueryInputBody.js","sources":["../src/query-input/internal/QueryInputBody.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  KeyboardEventHandler,\n  Ref,\n  SyntheticEvent,\n  useMemo,\n} from \"react\";\n\nimport {\n  ToggleButton,\n  ToggleButtonGroup,\n  ToggleButtonGroupChangeEventHandler,\n} from \"../../toggle-button\";\nimport {\n  ChangeHandler,\n  StringToItem,\n  TokenizedInput,\n} from \"../../tokenized-input\";\nimport { QueryInputItem } from \"../queryInputTypes\";\nimport { BooleanOperator } from \"../useQueryInput\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputBody\");\n\nexport interface QueryInputBodyProps {\n  inputRef: Ref<HTMLInputElement>;\n  disabled?: boolean;\n  showCategory?: boolean;\n  selectedItems: QueryInputItem[];\n  onBlur: FocusEventHandler<HTMLInputElement>;\n  onFocus: FocusEventHandler<HTMLInputElement>;\n  onInputFocus: FocusEventHandler<HTMLInputElement>;\n  onInputBlur: FocusEventHandler<HTMLInputElement>;\n  onInputClick: (event: SyntheticEvent) => void;\n  onInputClear: () => void;\n  inputValue?: string;\n  onInputChange: ChangeEventHandler<HTMLInputElement>;\n  isFocused?: boolean;\n  onSelectedItemsChange: ChangeHandler<QueryInputItem>;\n  onKeyDown: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  booleanOperator: BooleanOperator;\n  onBooleanOperatorChange: (newBooleanOperator: BooleanOperator) => void;\n}\n\nexport const QueryInputBody = forwardRef<HTMLDivElement, QueryInputBodyProps>(\n  function QueryInputBody(props, ref) {\n    const {\n      inputRef,\n      disabled,\n      selectedItems,\n      onInputFocus,\n      onInputBlur,\n      showCategory,\n      inputValue,\n      onInputChange,\n      isFocused,\n      onInputClear,\n      onSelectedItemsChange,\n      onKeyDown,\n      onInputClick,\n      booleanOperator,\n      onBooleanOperatorChange,\n    } = props;\n\n    const itemToString = useMemo(() => {\n      if (showCategory) {\n        return (item: QueryInputItem) => [item.category, item.value].join(\": \");\n      }\n      return (item: QueryInputItem) => item.value;\n    }, [showCategory]);\n\n    const stringToItem: StringToItem<QueryInputItem> = (\n      selectedItems,\n      value\n    ) => {\n      return {\n        category: null,\n        value,\n      };\n    };\n\n    const onChange: ToggleButtonGroupChangeEventHandler = (event, index) => {\n      const newBooleanOperator = index === 0 ? \"and\" : \"or\";\n      onBooleanOperatorChange(newBooleanOperator);\n    };\n\n    return (\n      <div ref={ref} className={withBaseName()}>\n        <FilterIcon />\n        <TokenizedInput\n          inputRef={inputRef}\n          disabled={disabled}\n          className={withBaseName(\"input\")}\n          selectedItems={selectedItems}\n          itemToString={itemToString as any}\n          stringToItem={stringToItem as any}\n          onInputFocus={onInputFocus}\n          onInputBlur={onInputBlur}\n          value={inputValue}\n          onClick={onInputClick}\n          onInputChange={onInputChange}\n          expanded={isFocused}\n          onClear={onInputClear}\n          onChange={onSelectedItemsChange as any}\n          onKeyDown={onKeyDown}\n        />\n        <div className={withBaseName(\"separator\")} />\n        <ToggleButtonGroup\n          variant=\"secondary\"\n          className={withBaseName(\"buttonGroup\")}\n          data-testid=\"boolean-selector\"\n          selectedIndex={booleanOperator === \"and\" ? 0 : 1}\n          onChange={onChange}\n        >\n          <ToggleButton value=\"and\">And</ToggleButton>\n          <ToggleButton value=\"or\">Or</ToggleButton>\n        </ToggleButtonGroup>\n      </div>\n    );\n  }\n);\n"],"names":["QueryInputBody","selectedItems"],"mappings":"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"}