@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.101

package/dist-es/query-input/internal/QueryInputBody.js

@@ -1,13 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
+import { makePrefixer, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
 import { FilterIcon } from '@salt-ds/icons';
 import { forwardRef, useMemo } from 'react';
-import { ToggleButton } from '../../toggle-button/ToggleButton.js';
-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-legacy/FormFieldLegacyContext.js';
 
 const withBaseName = makePrefixer("saltQueryInputBody");
@@ -36,22 +33,21 @@ const QueryInputBody = forwardRef(
       }
       return (item) => item.value;
     }, [showCategory]);
-    const stringToItem = (selectedItems2, value) => {
+    const stringToItem = (_selectedItems, value) => {
       return {
         category: null,
         value
       };
     };
-    const onChange = (event, index) => {
-      const newBooleanOperator = index === 0 ? "and" : "or";
+    const onChange = (event) => {
+      const newBooleanOperator = event.currentTarget.value;
       onBooleanOperatorChange(newBooleanOperator);
     };
-    return /* @__PURE__ */ jsxs("div", {
-      ref,
-      className: withBaseName(),
-      children: [
-        /* @__PURE__ */ jsx(FilterIcon, {}),
-        /* @__PURE__ */ jsx(TokenizedInput, {
+    return /* @__PURE__ */ jsxs("div", { ref, className: withBaseName(), children: [
+      /* @__PURE__ */ jsx(FilterIcon, {}),
+      /* @__PURE__ */ jsx(
+        TokenizedInput,
+        {
           inputRef,
           disabled,
           className: withBaseName("input"),
@@ -67,29 +63,23 @@ const QueryInputBody = forwardRef(
           onClear: onInputClear,
           onChange: onSelectedItemsChange,
           onKeyDown
-        }),
-        /* @__PURE__ */ jsx("div", {
-          className: withBaseName("separator")
-        }),
-        /* @__PURE__ */ jsxs(ToggleButtonGroup, {
-          variant: "secondary",
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: withBaseName("separator") }),
+      /* @__PURE__ */ jsxs(
+        ToggleButtonGroup,
+        {
           className: withBaseName("buttonGroup"),
           "data-testid": "boolean-selector",
-          selectedIndex: booleanOperator === "and" ? 0 : 1,
+          value: booleanOperator,
           onChange,
           children: [
-            /* @__PURE__ */ jsx(ToggleButton, {
-              value: "and",
-              children: "And"
-            }),
-            /* @__PURE__ */ jsx(ToggleButton, {
-              value: "or",
-              children: "Or"
-            })
+            /* @__PURE__ */ jsx(ToggleButton, { value: "and", children: "And" }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "or", children: "Or" })
           ]
-        })
-      ]
-    });
+        }
+      )
+    ] });
   }
 );
 

package/dist-es/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, ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  forwardRef,\n  type KeyboardEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  useMemo,\n} from \"react\";\n\nimport {\n  type ChangeHandler,\n  type StringToItem,\n  TokenizedInput,\n} from \"../../tokenized-input\";\nimport type { QueryInputItem } from \"../queryInputTypes\";\nimport type { 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 = (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newBooleanOperator = event.currentTarget.value as BooleanOperator;\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          // @ts-expect-error\n          itemToString={itemToString}\n          // @ts-expect-error\n          stringToItem={stringToItem}\n          onInputFocus={onInputFocus}\n          onInputBlur={onInputBlur}\n          value={inputValue}\n          onClick={onInputClick}\n          onInputChange={onInputChange}\n          expanded={isFocused}\n          onClear={onInputClear}\n          // @ts-expect-error\n          onChange={onSelectedItemsChange}\n          onKeyDown={onKeyDown}\n        />\n        <div className={withBaseName(\"separator\")} />\n        <ToggleButtonGroup\n          className={withBaseName(\"buttonGroup\")}\n          data-testid=\"boolean-selector\"\n          value={booleanOperator}\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"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAsB/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,qBAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,MAAA,IAAI,YAAA,EAAc;AAChB,QAAA,OAAO,CAAC,SAAyB,CAAC,IAAA,CAAK,UAAU,IAAA,CAAK,KAAK,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AAAA,MACxE;AACA,MAAA,OAAO,CAAC,SAAyB,IAAA,CAAK,KAAA;AAAA,IACxC,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,IAAA,MAAM,YAAA,GAA6C,CACjD,cAAA,EACA,KAAA,KACG;AACH,MAAA,OAAO;AAAA,QACL,QAAA,EAAU,IAAA;AAAA,QACV;AAAA,OACF;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,QAAA,GAAW,CAAC,KAAA,KAA6C;AAC7D,MAAA,MAAM,kBAAA,GAAqB,MAAM,aAAA,CAAc,KAAA;AAC/C,MAAA,uBAAA,CAAwB,kBAAkB,CAAA;AAAA,IAC5C,CAAA;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,cAAa,EACrC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA;AAAA,sBACZ,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAA;AAAA,UAEA,YAAA;AAAA,UAEA,YAAA;AAAA,UACA,YAAA;AAAA,UACA,WAAA;AAAA,UACA,KAAA,EAAO,UAAA;AAAA,UACP,OAAA,EAAS,YAAA;AAAA,UACT,aAAA;AAAA,UACA,QAAA,EAAU,SAAA;AAAA,UACV,OAAA,EAAS,YAAA;AAAA,UAET,QAAA,EAAU,qBAAA;AAAA,UACV;AAAA;AAAA,OACF;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EAAG,CAAA;AAAA,sBAC3C,IAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,aAAA,EAAY,kBAAA;AAAA,UACZ,KAAA,EAAO,eAAA;AAAA,UACP,QAAA;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,KAAA,EAAM,KAAA,EAAM,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,4BAC7B,GAAA,CAAC,YAAA,EAAA,EAAa,KAAA,EAAM,IAAA,EAAK,QAAA,EAAA,IAAA,EAAE;AAAA;AAAA;AAAA;AAC7B,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/query-input/internal/SearchList.js

@@ -1,17 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCallback } from 'react';
 import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useCallback } from 'react';
 import '../../list/Highlighter.js';
-import { ListItem } from '../../list/ListItem.js';
 import { List } from '../../list/List.js';
+import { ListItem } from '../../list/ListItem.js';
 import { ListItemGroup } from '../../list/ListItemGroup.js';
 import '../../common-hooks/collectionProvider.js';
 import '../../common-hooks/keyUtils.js';
-import '../../utils/useFloatingUI.js';
 import '../../responsive/useResizeObserver.js';
 import '../../list/VirtualizedList.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from '../QueryInput.css.js';
 
 const withBaseName = makePrefixer("saltQueryInputSearchList");
@@ -35,37 +34,32 @@ function SearchList(props) {
     window: targetWindow
   });
   const onChange = useCallback(
-    (event, items) => {
+    (_event, items) => {
       onChangeProp(items || []);
     },
     [onChangeProp]
   );
-  return /* @__PURE__ */ jsxs(List, {
-    checkable: false,
-    "data-testid": "search-list",
-    highlightedIndex,
-    itemTextHighlightPattern: inputValue,
-    itemToString,
-    onHighlight: setHighlightedIndex,
-    onSelectionChange: onChange,
-    selectionStrategy: "multiple",
-    selected: selectedItems,
-    width: rootWidth,
-    children: [
-      visibleCategories.map((inputCategory) => {
-        return /* @__PURE__ */ jsx(ListItemGroup, {
-          label: inputCategory.name,
-          children: inputCategory.values.map((label) => /* @__PURE__ */ jsx(ListItem, {
-            label
-          }, label))
-        }, inputCategory.name);
-      }),
-      /* @__PURE__ */ jsx(ListItem, {
-        className: withBaseName("addKeyword"),
-        children: `Add keyword: "${inputValue}"`
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs(
+    List,
+    {
+      checkable: false,
+      "data-testid": "search-list",
+      highlightedIndex,
+      itemTextHighlightPattern: inputValue,
+      itemToString,
+      onHighlight: setHighlightedIndex,
+      onSelectionChange: onChange,
+      selectionStrategy: "multiple",
+      selected: selectedItems,
+      width: rootWidth,
+      children: [
+        visibleCategories.map((inputCategory) => {
+          return /* @__PURE__ */ jsx(ListItemGroup, { label: inputCategory.name, children: inputCategory.values.map((label) => /* @__PURE__ */ jsx(ListItem, { label }, label)) }, inputCategory.name);
+        }),
+        /* @__PURE__ */ jsx(ListItem, { className: withBaseName("addKeyword"), children: `Add keyword: "${inputValue}"` })
+      ]
+    }
+  );
 }
 
 export { SearchList };

package/dist-es/query-input/internal/SearchList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchList.js","sources":["../src/query-input/internal/SearchList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { List, ListItem, ListItemGroup } from \"../../list\";\n\nimport { SelectionChangeHandler } from \"../../common-hooks\";\n\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport queryInputCss from \"../QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputSearchList\");\n\nexport interface SearchListProps {\n  inputValue?: string;\n  selectedItems?: QueryInputItem[];\n  onChange: (items: QueryInputItem[]) => void;\n  rootWidth: number;\n  highlightedIndex?: number;\n  visibleCategories: QueryInputCategory[];\n  setHighlightedIndex: Dispatch<SetStateAction<number>>;\n}\n\nfunction itemToString(item: QueryInputItem) {\n  return [item.category, item.value].join(\": \");\n}\n\nexport function SearchList(props: SearchListProps) {\n  const {\n    inputValue,\n    selectedItems,\n    onChange: onChangeProp,\n    rootWidth,\n    highlightedIndex,\n    setHighlightedIndex,\n    visibleCategories,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-query-input\",\n    css: queryInputCss,\n    window: targetWindow,\n  });\n\n  const onChange: SelectionChangeHandler<QueryInputItem, \"multiple\"> =\n    useCallback(\n      (event, items) => {\n        onChangeProp(items || []);\n      },\n      [onChangeProp]\n    );\n\n  return (\n    <List\n      checkable={false}\n      data-testid=\"search-list\"\n      highlightedIndex={highlightedIndex}\n      itemTextHighlightPattern={inputValue}\n      itemToString={itemToString}\n      onHighlight={setHighlightedIndex}\n      onSelectionChange={onChange}\n      selectionStrategy=\"multiple\"\n      selected={selectedItems}\n      width={rootWidth}\n    >\n      {visibleCategories.map((inputCategory: QueryInputCategory) => {\n        return (\n          <ListItemGroup key={inputCategory.name} label={inputCategory.name}>\n            {inputCategory.values.map((label) => (\n              <ListItem key={label} label={label} />\n            ))}\n          </ListItemGroup>\n        );\n      })}\n      <ListItem className={withBaseName(\"addKeyword\")}>\n        {`Add keyword: \"${inputValue}\"`}\n      </ListItem>\n    </List>\n  );\n}\n"],"names":["queryInputCss"],"mappings":";;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAY5D,SAAS,aAAa,IAAsB,EAAA;AAC1C,EAAA,OAAO,CAAC,IAAK,CAAA,QAAA,EAAU,KAAK,KAAK,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAC9C,CAAA;AAEO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,iBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,QACJ,GAAA,WAAA;AAAA,IACE,CAAC,OAAO,KAAU,KAAA;AAChB,MAAa,YAAA,CAAA,KAAA,IAAS,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEF,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,aAAA;AAAA,IACZ,gBAAA;AAAA,IACA,wBAA0B,EAAA,UAAA;AAAA,IAC1B,YAAA;AAAA,IACA,WAAa,EAAA,mBAAA;AAAA,IACb,iBAAmB,EAAA,QAAA;AAAA,IACnB,iBAAkB,EAAA,UAAA;AAAA,IAClB,QAAU,EAAA,aAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IAEN,QAAA,EAAA;AAAA,MAAkB,iBAAA,CAAA,GAAA,CAAI,CAAC,aAAsC,KAAA;AAC5D,QAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,UAAuC,OAAO,aAAc,CAAA,IAAA;AAAA,UAC1D,QAAc,EAAA,aAAA,CAAA,MAAA,CAAO,GAAI,CAAA,CAAC,0BACxB,GAAA,CAAA,QAAA,EAAA;AAAA,YAAqB,KAAA;AAAA,WAAA,EAAP,KAAqB,CACrC,CAAA;AAAA,SAAA,EAHiB,cAAc,IAIlC,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,sBACA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAS,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,QAC3C,QAAiB,EAAA,CAAA,cAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SearchList.js","sources":["../src/query-input/internal/SearchList.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type Dispatch, type SetStateAction, useCallback } from \"react\";\nimport type { SelectionChangeHandler } from \"../../common-hooks\";\nimport { List, ListItem, ListItemGroup } from \"../../list\";\nimport queryInputCss from \"../QueryInput.css\";\nimport type { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputSearchList\");\n\nexport interface SearchListProps {\n  inputValue?: string;\n  selectedItems?: QueryInputItem[];\n  onChange: (items: QueryInputItem[]) => void;\n  rootWidth: number;\n  highlightedIndex?: number;\n  visibleCategories: QueryInputCategory[];\n  setHighlightedIndex: Dispatch<SetStateAction<number>>;\n}\n\nfunction itemToString(item: QueryInputItem) {\n  return [item.category, item.value].join(\": \");\n}\n\nexport function SearchList(props: SearchListProps) {\n  const {\n    inputValue,\n    selectedItems,\n    onChange: onChangeProp,\n    rootWidth,\n    highlightedIndex,\n    setHighlightedIndex,\n    visibleCategories,\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-query-input\",\n    css: queryInputCss,\n    window: targetWindow,\n  });\n\n  const onChange: SelectionChangeHandler<QueryInputItem, \"multiple\"> =\n    useCallback(\n      (_event, items) => {\n        onChangeProp(items || []);\n      },\n      [onChangeProp],\n    );\n\n  return (\n    <List\n      checkable={false}\n      data-testid=\"search-list\"\n      highlightedIndex={highlightedIndex}\n      itemTextHighlightPattern={inputValue}\n      itemToString={itemToString}\n      onHighlight={setHighlightedIndex}\n      onSelectionChange={onChange}\n      selectionStrategy=\"multiple\"\n      selected={selectedItems}\n      width={rootWidth}\n    >\n      {visibleCategories.map((inputCategory: QueryInputCategory) => {\n        return (\n          <ListItemGroup key={inputCategory.name} label={inputCategory.name}>\n            {inputCategory.values.map((label) => (\n              <ListItem key={label} label={label} />\n            ))}\n          </ListItemGroup>\n        );\n      })}\n      <ListItem className={withBaseName(\"addKeyword\")}>\n        {`Add keyword: \"${inputValue}\"`}\n      </ListItem>\n    </List>\n  );\n}\n"],"names":["queryInputCss"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAY5D,SAAS,aAAa,IAAA,EAAsB;AAC1C,EAAA,OAAO,CAAC,IAAA,CAAK,QAAA,EAAU,KAAK,KAAK,CAAA,CAAE,KAAK,IAAI,CAAA;AAC9C;AAEO,SAAS,WAAW,KAAA,EAAwB;AACjD,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA,EAAU,YAAA;AAAA,IACV,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,kBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,QAAA,GACJ,WAAA;AAAA,IACE,CAAC,QAAQ,KAAA,KAAU;AACjB,MAAA,YAAA,CAAa,KAAA,IAAS,EAAE,CAAA;AAAA,IAC1B,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAA;AAAA,MACX,aAAA,EAAY,aAAA;AAAA,MACZ,gBAAA;AAAA,MACA,wBAAA,EAA0B,UAAA;AAAA,MAC1B,YAAA;AAAA,MACA,WAAA,EAAa,mBAAA;AAAA,MACb,iBAAA,EAAmB,QAAA;AAAA,MACnB,iBAAA,EAAkB,UAAA;AAAA,MAClB,QAAA,EAAU,aAAA;AAAA,MACV,KAAA,EAAO,SAAA;AAAA,MAEN,QAAA,EAAA;AAAA,QAAA,iBAAA,CAAkB,GAAA,CAAI,CAAC,aAAA,KAAsC;AAC5D,UAAA,2BACG,aAAA,EAAA,EAAuC,KAAA,EAAO,aAAA,CAAc,IAAA,EAC1D,wBAAc,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,yBACxB,QAAA,EAAA,EAAqB,KAAA,EAAA,EAAP,KAAqB,CACrC,CAAA,EAAA,EAHiB,cAAc,IAIlC,CAAA;AAAA,QAEJ,CAAC,CAAA;AAAA,wBACD,GAAA,CAAC,YAAS,SAAA,EAAW,YAAA,CAAa,YAAY,CAAA,EAC3C,QAAA,EAAA,CAAA,cAAA,EAAiB,UAAU,CAAA,CAAA,CAAA,EAC9B;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist-es/query-input/internal/ValueList.js

@@ -1,13 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { ChevronLeftIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon } from '@salt-ds/core';
 import '../../list/Highlighter.js';
-import { ListItem } from '../../list/ListItem.js';
 import { List } from '../../list/List.js';
+import { ListItem } from '../../list/ListItem.js';
 import 'react';
 import '../../common-hooks/collectionProvider.js';
 import '../../common-hooks/keyUtils.js';
-import '../../utils/useFloatingUI.js';
 import '../../responsive/useResizeObserver.js';
 import '../../list/VirtualizedList.js';
 
@@ -22,18 +20,14 @@ function ValueList(props) {
     highlightedValueIndex,
     setHighlightedValueIndex
   } = props;
+  const { PreviousIcon } = useIcon();
   const handleSelect = (_, value) => {
     onValueToggle(category, value);
   };
-  const items = category ? category.values.map((value) => /* @__PURE__ */ jsx(ListItem, {
-    item: value,
-    children: value
-  }, value)) : [];
-  return /* @__PURE__ */ jsx("div", {
-    className: withBaseName(),
-    tabIndex: 0,
-    "data-testid": "value-list",
-    children: /* @__PURE__ */ jsxs(List, {
+  const items = category ? category.values.map((value) => /* @__PURE__ */ jsx(ListItem, { item: value, children: value }, value)) : [];
+  return /* @__PURE__ */ jsx("div", { className: withBaseName(), tabIndex: 0, "data-testid": "value-list", children: /* @__PURE__ */ jsxs(
+    List,
+    {
       borderless: true,
       checkable: false,
       highlightedIndex: highlightedValueIndex,
@@ -43,22 +37,22 @@ function ValueList(props) {
       selected: selectedValues,
       width: rootWidth,
       children: [
-        /* @__PURE__ */ jsxs(ListItem, {
-          className: withBaseName("back"),
-          onClick: onBack,
-          selectable: false,
-          children: [
-            /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
-            /* @__PURE__ */ jsx("div", {
-              className: withBaseName("category"),
-              children: category ? category.name : ""
-            })
-          ]
-        }),
+        /* @__PURE__ */ jsxs(
+          ListItem,
+          {
+            className: withBaseName("back"),
+            onClick: onBack,
+            selectable: false,
+            children: [
+              /* @__PURE__ */ jsx(PreviousIcon, {}),
+              /* @__PURE__ */ jsx("div", { className: withBaseName("category"), children: category ? category.name : "" })
+            ]
+          }
+        ),
         items
       ]
-    })
-  });
+    }
+  ) });
 }
 
 export { ValueList };

package/dist-es/query-input/internal/ValueList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { QueryInputCategory } from \"../queryInputTypes\";\nimport { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon } from \"@salt-ds/icons\";\nimport { List, ListItem } from \"../../list\";\nimport { SelectHandler } from \"../../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n  category: QueryInputCategory | null;\n  rootWidth: number;\n  onBack: () => void;\n  selectedValues: string[];\n  onValueToggle: (category: QueryInputCategory, value: string) => void;\n  highlightedValueIndex?: number;\n  setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n  const {\n    category,\n    rootWidth,\n    onBack,\n    selectedValues,\n    onValueToggle,\n    highlightedValueIndex,\n    setHighlightedValueIndex,\n  } = props;\n\n  const handleSelect: SelectHandler = (_, value: string) => {\n    onValueToggle(category!, value);\n  };\n\n  const items: ReactElement[] = category\n    ? category.values.map((value) => (\n        <ListItem key={value} item={value}>\n          {value}\n        </ListItem>\n      ))\n    : [];\n\n  return (\n    <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n      <List\n        borderless={true}\n        checkable={false}\n        highlightedIndex={highlightedValueIndex}\n        onHighlight={setHighlightedValueIndex}\n        onSelect={handleSelect}\n        selectionStrategy=\"multiple\"\n        selected={selectedValues}\n        width={rootWidth}\n      >\n        <ListItem\n          className={withBaseName(\"back\")}\n          onClick={onBack}\n          selectable={false}\n        >\n          <ChevronLeftIcon />\n          <div className={withBaseName(\"category\")}>\n            {category ? category.name : \"\"}\n          </div>\n        </ListItem>\n        {items}\n      </List>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAYpD,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA,wBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,YAAA,GAA8B,CAAC,CAAA,EAAG,KAAkB,KAAA;AACxD,IAAA,aAAA,CAAc,UAAW,KAAK,CAAA,CAAA;AAAA,GAChC,CAAA;AAEA,EAAA,MAAM,QAAwB,QAC1B,GAAA,QAAA,CAAS,OAAO,GAAI,CAAA,CAAC,0BAClB,GAAA,CAAA,QAAA,EAAA;AAAA,IAAqB,IAAM,EAAA,KAAA;AAAA,IACzB,QAAA,EAAA,KAAA;AAAA,GADY,EAAA,KAEf,CACD,CAAA,GACD,EAAC,CAAA;AAEL,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,QAAU,EAAA,CAAA;AAAA,IAAG,aAAY,EAAA,YAAA;AAAA,IACvD,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA;AAAA,MACC,UAAY,EAAA,IAAA;AAAA,MACZ,SAAW,EAAA,KAAA;AAAA,MACX,gBAAkB,EAAA,qBAAA;AAAA,MAClB,WAAa,EAAA,wBAAA;AAAA,MACb,QAAU,EAAA,YAAA;AAAA,MACV,iBAAkB,EAAA,UAAA;AAAA,MAClB,QAAU,EAAA,cAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,QAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,CAAA;AAAA,4BAChB,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cACpC,QAAA,EAAA,QAAA,GAAW,SAAS,IAAO,GAAA,EAAA;AAAA,aAC9B,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,QACC,KAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ValueList.js","sources":["../src/query-input/internal/ValueList.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport type { Dispatch, ReactElement, SetStateAction } from \"react\";\nimport type { SelectHandler } from \"../../common-hooks\";\nimport { List, ListItem } from \"../../list\";\nimport type { QueryInputCategory } from \"../queryInputTypes\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueList\");\n\nexport interface ValueListProps {\n  category: QueryInputCategory | null;\n  rootWidth: number;\n  onBack: () => void;\n  selectedValues: string[];\n  onValueToggle: (category: QueryInputCategory, value: string) => void;\n  highlightedValueIndex?: number;\n  setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueList(props: ValueListProps) {\n  const {\n    category,\n    rootWidth,\n    onBack,\n    selectedValues,\n    onValueToggle,\n    highlightedValueIndex,\n    setHighlightedValueIndex,\n  } = props;\n  const { PreviousIcon } = useIcon();\n\n  const handleSelect: SelectHandler = (_, value: string) => {\n    onValueToggle(category!, value);\n  };\n\n  const items: ReactElement[] = category\n    ? category.values.map((value) => (\n        <ListItem key={value} item={value}>\n          {value}\n        </ListItem>\n      ))\n    : [];\n\n  return (\n    <div className={withBaseName()} tabIndex={0} data-testid=\"value-list\">\n      <List\n        borderless={true}\n        checkable={false}\n        highlightedIndex={highlightedValueIndex}\n        onHighlight={setHighlightedValueIndex}\n        onSelect={handleSelect}\n        selectionStrategy=\"multiple\"\n        selected={selectedValues}\n        width={rootWidth}\n      >\n        <ListItem\n          className={withBaseName(\"back\")}\n          onClick={onBack}\n          selectable={false}\n        >\n          <PreviousIcon />\n          <div className={withBaseName(\"category\")}>\n            {category ? category.name : \"\"}\n          </div>\n        </ListItem>\n        {items}\n      </List>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAYpD,SAAS,UAAU,KAAA,EAAuB;AAC/C,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,qBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AACJ,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,EAAA,MAAM,YAAA,GAA8B,CAAC,CAAA,EAAG,KAAA,KAAkB;AACxD,IAAA,aAAA,CAAc,UAAW,KAAK,CAAA;AAAA,EAChC,CAAA;AAEA,EAAA,MAAM,KAAA,GAAwB,QAAA,GAC1B,QAAA,CAAS,MAAA,CAAO,IAAI,CAAC,KAAA,qBACnB,GAAA,CAAC,QAAA,EAAA,EAAqB,MAAM,KAAA,EACzB,QAAA,EAAA,KAAA,EAAA,EADY,KAEf,CACD,IACD,EAAC;AAEL,EAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,YAAA,IAAgB,QAAA,EAAU,CAAA,EAAG,eAAY,YAAA,EACvD,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAY,IAAA;AAAA,MACZ,SAAA,EAAW,KAAA;AAAA,MACX,gBAAA,EAAkB,qBAAA;AAAA,MAClB,WAAA,EAAa,wBAAA;AAAA,MACb,QAAA,EAAU,YAAA;AAAA,MACV,iBAAA,EAAkB,UAAA;AAAA,MAClB,QAAA,EAAU,cAAA;AAAA,MACV,KAAA,EAAO,SAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,OAAA,EAAS,MAAA;AAAA,YACT,UAAA,EAAY,KAAA;AAAA,YAEZ,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,8BACd,GAAA,CAAC,SAAI,SAAA,EAAW,YAAA,CAAa,UAAU,CAAA,EACpC,QAAA,EAAA,QAAA,GAAW,QAAA,CAAS,IAAA,GAAO,EAAA,EAC9B;AAAA;AAAA;AAAA,SACF;AAAA,QACC;AAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}

package/dist-es/query-input/internal/ValueSelector.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useFloatingUI, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { useMemo } from 'react';
+import { Portal } from '../../portal/Portal.js';
+import '../../window/ElectronWindow.js';
+import { useWindow } from '../../window/WindowContext.js';
 import { CategoryList } from './CategoryList.js';
 import { SearchList } from './SearchList.js';
 import { ValueList } from './ValueList.js';
-import { Portal } from '../../portal/Portal.js';
-import { useWindow } from '../../window/WindowContext.js';
-import '../../window/ElectronWindow.js';
 
 const withBaseName = makePrefixer("saltQueryInputValueSelector");
 function ValueSelector(props) {
@@ -41,34 +41,43 @@ function ValueSelector(props) {
   };
   const renderContent = () => {
     if (inputValue) {
-      return /* @__PURE__ */ jsx(SearchList, {
-        inputValue,
-        selectedItems,
-        onChange: onSearchListChange,
-        rootWidth: width,
-        highlightedIndex,
-        visibleCategories,
-        setHighlightedIndex
-      });
+      return /* @__PURE__ */ jsx(
+        SearchList,
+        {
+          inputValue,
+          selectedItems,
+          onChange: onSearchListChange,
+          rootWidth: width,
+          highlightedIndex,
+          visibleCategories,
+          setHighlightedIndex
+        }
+      );
     }
     if (!selectedCategory) {
-      return /* @__PURE__ */ jsx(CategoryList, {
-        categories,
-        rootWidth: width,
-        onCategorySelect: onSelectedCategoryChange,
-        highlightedCategoryIndex,
-        setHighlightedCategoryIndex
-      });
+      return /* @__PURE__ */ jsx(
+        CategoryList,
+        {
+          categories,
+          rootWidth: width,
+          onCategorySelect: onSelectedCategoryChange,
+          highlightedCategoryIndex,
+          setHighlightedCategoryIndex
+        }
+      );
     }
-    return /* @__PURE__ */ jsx(ValueList, {
-      category: selectedCategory,
-      rootWidth: width,
-      onBack: onBackToCategories,
-      selectedValues: selectedCategoryValues,
-      onValueToggle,
-      highlightedValueIndex,
-      setHighlightedValueIndex
-    });
+    return /* @__PURE__ */ jsx(
+      ValueList,
+      {
+        category: selectedCategory,
+        rootWidth: width,
+        onBack: onBackToCategories,
+        selectedValues: selectedCategoryValues,
+        onValueToggle,
+        highlightedValueIndex,
+        setHighlightedValueIndex
+      }
+    );
   };
   const Window = useWindow();
   const { reference, floating, x, y, strategy } = useFloatingUI({
@@ -83,20 +92,18 @@ function ValueSelector(props) {
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Portal, {
-    children: /* @__PURE__ */ jsx(Window, {
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    Window,
+    {
       style: {
-        top: y != null ? y : 0,
-        left: x != null ? x : 0,
+        top: y ?? 0,
+        left: x ?? 0,
         position: strategy
       },
       ref: handleRef,
-      children: /* @__PURE__ */ jsx("div", {
-        className: withBaseName("content"),
-        children: renderContent()
-      })
-    })
-  });
+      children: /* @__PURE__ */ jsx("div", { className: withBaseName("content"), children: renderContent() })
+    }
+  ) });
 }
 
 export { ValueSelector };

package/dist-es/query-input/internal/ValueSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValueSelector.js","sources":["../src/query-input/internal/ValueSelector.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { Dispatch, Ref, SetStateAction, useMemo } from \"react\";\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport { CategoryList } from \"./CategoryList\";\nimport { SearchList } from \"./SearchList\";\nimport { ValueList } from \"./ValueList\";\nimport { Portal } from \"../../portal\";\nimport { useWindow } from \"../../window\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueSelector\");\n\nexport interface ValueSelectorProps {\n  isOpen: boolean;\n  anchorElement: HTMLElement | null;\n  popperRef: Ref<HTMLDivElement>;\n\n  inputValue?: string;\n  categories: QueryInputCategory[];\n  selectedCategory: QueryInputCategory | null;\n  onSelectedCategoryChange: (category: QueryInputCategory | null) => void;\n\n  width: number;\n  selectedItems: QueryInputItem[];\n  onValueToggle: (category: QueryInputCategory, value: string) => void;\n  onSearchListChange: (items: QueryInputItem[]) => void;\n\n  highlightedIndex?: number;\n  visibleCategories: QueryInputCategory[];\n\n  highlightedCategoryIndex?: number;\n  highlightedValueIndex?: number;\n  setHighlightedIndex: Dispatch<SetStateAction<number>>;\n  setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n  setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueSelector(props: ValueSelectorProps) {\n  const {\n    isOpen,\n    inputValue,\n    anchorElement,\n    popperRef,\n    categories,\n    selectedCategory,\n    onSelectedCategoryChange,\n    width,\n    selectedItems,\n    onValueToggle,\n    highlightedIndex,\n    visibleCategories,\n    highlightedCategoryIndex,\n    highlightedValueIndex,\n    onSearchListChange,\n    setHighlightedValueIndex,\n    setHighlightedCategoryIndex,\n    setHighlightedIndex,\n  } = props;\n\n  const selectedCategoryValues = useMemo(() => {\n    if (!selectedCategory) {\n      return [];\n    }\n    return selectedItems\n      .filter((item) => item.category === selectedCategory.name)\n      .map(({ value }) => value);\n  }, [selectedCategory, selectedItems]);\n\n  const onBackToCategories = () => {\n    onSelectedCategoryChange(null);\n  };\n\n  const renderContent = () => {\n    if (inputValue) {\n      return (\n        <SearchList\n          inputValue={inputValue}\n          selectedItems={selectedItems}\n          onChange={onSearchListChange}\n          rootWidth={width}\n          highlightedIndex={highlightedIndex}\n          visibleCategories={visibleCategories}\n          setHighlightedIndex={setHighlightedIndex}\n        />\n      );\n    }\n\n    if (!selectedCategory) {\n      return (\n        <CategoryList\n          categories={categories}\n          rootWidth={width}\n          onCategorySelect={onSelectedCategoryChange}\n          highlightedCategoryIndex={highlightedCategoryIndex}\n          setHighlightedCategoryIndex={setHighlightedCategoryIndex}\n        />\n      );\n    }\n\n    return (\n      <ValueList\n        category={selectedCategory}\n        rootWidth={width}\n        onBack={onBackToCategories}\n        selectedValues={selectedCategoryValues}\n        onValueToggle={onValueToggle}\n        highlightedValueIndex={highlightedValueIndex}\n        setHighlightedValueIndex={setHighlightedValueIndex}\n      />\n    );\n  };\n\n  const Window = useWindow();\n  const { reference, floating, x, y, strategy } = useFloatingUI({\n    placement: \"bottom\",\n  });\n  const handleRef = useForkRef<HTMLDivElement>(floating, popperRef);\n  useIsomorphicLayoutEffect(() => {\n    if (anchorElement) {\n      reference(anchorElement);\n    }\n  }, [reference, anchorElement]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <Window\n        style={{\n          top: y ?? 0,\n          left: x ?? 0,\n          position: strategy,\n        }}\n        ref={handleRef}\n      >\n        <div className={withBaseName(\"content\")}>{renderContent()}</div>\n      </Window>\n    </Portal>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ValueSelector.js","sources":["../src/query-input/internal/ValueSelector.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { type Dispatch, type Ref, type SetStateAction, useMemo } from \"react\";\nimport { Portal } from \"../../portal\";\nimport { useWindow } from \"../../window\";\nimport type { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport { CategoryList } from \"./CategoryList\";\nimport { SearchList } from \"./SearchList\";\nimport { ValueList } from \"./ValueList\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueSelector\");\n\nexport interface ValueSelectorProps {\n  isOpen: boolean;\n  anchorElement: HTMLElement | null;\n  popperRef: Ref<HTMLDivElement>;\n\n  inputValue?: string;\n  categories: QueryInputCategory[];\n  selectedCategory: QueryInputCategory | null;\n  onSelectedCategoryChange: (category: QueryInputCategory | null) => void;\n\n  width: number;\n  selectedItems: QueryInputItem[];\n  onValueToggle: (category: QueryInputCategory, value: string) => void;\n  onSearchListChange: (items: QueryInputItem[]) => void;\n\n  highlightedIndex?: number;\n  visibleCategories: QueryInputCategory[];\n\n  highlightedCategoryIndex?: number;\n  highlightedValueIndex?: number;\n  setHighlightedIndex: Dispatch<SetStateAction<number>>;\n  setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n  setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueSelector(props: ValueSelectorProps) {\n  const {\n    isOpen,\n    inputValue,\n    anchorElement,\n    popperRef,\n    categories,\n    selectedCategory,\n    onSelectedCategoryChange,\n    width,\n    selectedItems,\n    onValueToggle,\n    highlightedIndex,\n    visibleCategories,\n    highlightedCategoryIndex,\n    highlightedValueIndex,\n    onSearchListChange,\n    setHighlightedValueIndex,\n    setHighlightedCategoryIndex,\n    setHighlightedIndex,\n  } = props;\n\n  const selectedCategoryValues = useMemo(() => {\n    if (!selectedCategory) {\n      return [];\n    }\n    return selectedItems\n      .filter((item) => item.category === selectedCategory.name)\n      .map(({ value }) => value);\n  }, [selectedCategory, selectedItems]);\n\n  const onBackToCategories = () => {\n    onSelectedCategoryChange(null);\n  };\n\n  const renderContent = () => {\n    if (inputValue) {\n      return (\n        <SearchList\n          inputValue={inputValue}\n          selectedItems={selectedItems}\n          onChange={onSearchListChange}\n          rootWidth={width}\n          highlightedIndex={highlightedIndex}\n          visibleCategories={visibleCategories}\n          setHighlightedIndex={setHighlightedIndex}\n        />\n      );\n    }\n\n    if (!selectedCategory) {\n      return (\n        <CategoryList\n          categories={categories}\n          rootWidth={width}\n          onCategorySelect={onSelectedCategoryChange}\n          highlightedCategoryIndex={highlightedCategoryIndex}\n          setHighlightedCategoryIndex={setHighlightedCategoryIndex}\n        />\n      );\n    }\n\n    return (\n      <ValueList\n        category={selectedCategory}\n        rootWidth={width}\n        onBack={onBackToCategories}\n        selectedValues={selectedCategoryValues}\n        onValueToggle={onValueToggle}\n        highlightedValueIndex={highlightedValueIndex}\n        setHighlightedValueIndex={setHighlightedValueIndex}\n      />\n    );\n  };\n\n  const Window = useWindow();\n  const { reference, floating, x, y, strategy } = useFloatingUI({\n    placement: \"bottom\",\n  });\n  const handleRef = useForkRef<HTMLDivElement>(floating, popperRef);\n  useIsomorphicLayoutEffect(() => {\n    if (anchorElement) {\n      reference(anchorElement);\n    }\n  }, [reference, anchorElement]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <Window\n        style={{\n          top: y ?? 0,\n          left: x ?? 0,\n          position: strategy,\n        }}\n        ref={handleRef}\n      >\n        <div className={withBaseName(\"content\")}>{renderContent()}</div>\n      </Window>\n    </Portal>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist-es/query-input/internal/usePopperStatus.js

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 
 function usePopperStatus(props) {
-  const { initialOpen, autoClose } = props;
-  const [isOpen, setIsOpen] = useState(!!initialOpen);
+  const { autoClose } = props;
+  const [isOpen, setIsOpen] = useState(false);
   const onKeyDown = (event) => {
     if (event.altKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
       setIsOpen((x) => !x);
@@ -14,10 +14,10 @@ function usePopperStatus(props) {
       setIsOpen(false);
     }
   };
-  const onFocus = (event) => {
+  const onFocus = () => {
     setIsOpen(true);
   };
-  const onBlur = (event) => {
+  const onBlur = () => {
     setIsOpen(false);
   };
   const onChange = () => {

package/dist-es/query-input/internal/usePopperStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopperStatus.js","sources":["../src/query-input/internal/usePopperStatus.ts"],"sourcesContent":["import { FocusEvent, KeyboardEvent, useState } from \"react\";\n\nexport interface UsePopperStatusProps {\n  initialOpen?: boolean;\n  autoClose?: boolean;\n}\n\nexport function usePopperStatus(props: UsePopperStatusProps) {\n  const { initialOpen, autoClose } = props;\n  const [isOpen, setIsOpen] = useState<boolean>(!!initialOpen);\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.altKey && [\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n      setIsOpen((x) => !x);\n    } else if (\n      !isOpen &&\n      [\"Alt\", \"Tab\", \"Escape\", \"Control\", \"Shift\", \"Meta\"].includes(event.key)\n    ) {\n      setIsOpen(true);\n    } else if (isOpen && event.key === \"Escape\") {\n      setIsOpen(false);\n    } else if (isOpen && autoClose && event.key === \"Enter\") {\n      setIsOpen(false);\n    }\n  };\n\n  const onFocus = (event: FocusEvent) => {\n    setIsOpen(true);\n  };\n\n  const onBlur = (event: FocusEvent) => {\n    setIsOpen(false);\n  };\n\n  const onChange = () => {\n    if (autoClose) {\n      setIsOpen(false);\n    }\n  };\n\n  const onClick = () => {\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n  };\n\n  return {\n    isOpen,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    onChange,\n    onClick,\n  };\n}\n"],"names":[],"mappings":";;AAOO,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAM,MAAA,EAAE,WAAa,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACnC,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,IAAI,QAAkB,CAAA,CAAC,CAAC,WAAW,CAAA,CAAA;AAE3D,EAAM,MAAA,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,IAAI,IAAA,KAAA,CAAM,UAAU,CAAC,SAAA,EAAW,WAAW,CAAE,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAChE,MAAU,SAAA,CAAA,CAAC,CAAM,KAAA,CAAC,CAAC,CAAA,CAAA;AAAA,KAEnB,MAAA,IAAA,CAAC,MACD,IAAA,CAAC,OAAO,KAAO,EAAA,QAAA,EAAU,SAAW,EAAA,OAAA,EAAS,MAAM,CAAA,CAAE,QAAS,CAAA,KAAA,CAAM,GAAG,CACvE,EAAA;AACA,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KACL,MAAA,IAAA,MAAA,IAAU,KAAM,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC3C,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,KACN,MAAA,IAAA,MAAA,IAAU,SAAa,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACvD,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,OAAA,GAAU,CAAC,KAAsB,KAAA;AACrC,IAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,GAChB,CAAA;AAEA,EAAM,MAAA,MAAA,GAAS,CAAC,KAAsB,KAAA;AACpC,IAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KAChB;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"usePopperStatus.js","sources":["../src/query-input/internal/usePopperStatus.ts"],"sourcesContent":["import { type KeyboardEvent, useState } from \"react\";\n\nexport interface UsePopperStatusProps {\n  initialOpen?: boolean;\n  autoClose?: boolean;\n}\n\nexport function usePopperStatus(props: UsePopperStatusProps) {\n  const { initialOpen, autoClose } = props;\n  const [isOpen, setIsOpen] = useState<boolean>(!!initialOpen);\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (event.altKey && [\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n      setIsOpen((x) => !x);\n    } else if (\n      !isOpen &&\n      [\"Alt\", \"Tab\", \"Escape\", \"Control\", \"Shift\", \"Meta\"].includes(event.key)\n    ) {\n      setIsOpen(true);\n    } else if (isOpen && event.key === \"Escape\") {\n      setIsOpen(false);\n    } else if (isOpen && autoClose && event.key === \"Enter\") {\n      setIsOpen(false);\n    }\n  };\n\n  const onFocus = () => {\n    setIsOpen(true);\n  };\n\n  const onBlur = () => {\n    setIsOpen(false);\n  };\n\n  const onChange = () => {\n    if (autoClose) {\n      setIsOpen(false);\n    }\n  };\n\n  const onClick = () => {\n    if (!isOpen) {\n      setIsOpen(true);\n    }\n  };\n\n  return {\n    isOpen,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    onChange,\n    onClick,\n  };\n}\n"],"names":[],"mappings":";;AAOO,SAAS,gBAAgB,KAAA,EAA6B;AAC3D,EAAA,MAAM,EAAe,SAAA,EAAU,GAAI,KAAA;AACnC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,IAAI,QAAA,CAAkB,KAAa,CAAA;AAE3D,EAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,IAAA,IAAI,KAAA,CAAM,UAAU,CAAC,SAAA,EAAW,WAAW,CAAA,CAAE,QAAA,CAAS,KAAA,CAAM,GAAG,CAAA,EAAG;AAChE,MAAA,SAAA,CAAU,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAAA,IACrB,CAAA,MAAA,IACE,CAAC,MAAA,IACD,CAAC,OAAO,KAAA,EAAO,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,MAAM,CAAA,CAAE,QAAA,CAAS,KAAA,CAAM,GAAG,CAAA,EACvE;AACA,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA,IAChB,CAAA,MAAA,IAAW,MAAA,IAAU,KAAA,CAAM,GAAA,KAAQ,QAAA,EAAU;AAC3C,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,IACjB,CAAA,MAAA,IAAW,MAAA,IAAU,SAAA,IAAa,KAAA,CAAM,QAAQ,OAAA,EAAS;AACvD,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,IACjB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,SAAA,CAAU,IAAI,CAAA;AAAA,EAChB,CAAA;AAEA,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,SAAA,CAAU,KAAK,CAAA;AAAA,EACjB,CAAA;AAEA,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,SAAA,EAAW;AACb,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,IACjB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA,IAChB;AAAA,EACF,CAAA;AAEA,EAAA,OAAO;AAAA,IACL,MAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}