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

package/dist-cjs/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":["makePrefixer","CategoryListItem","useRef","useCategoryListContext","useMemo","jsxs","ListItem","jsx","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAOjD,MAAM,mBACX,SAASC,iBAAAA,CAAiB,EAAE,IAAM,EAAA,QAAA,EAAA,GAAa,OAAS,EAAA;AACtD,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,UAAUC,0CAAuB,EAAA,CAAA;AAEvC,EAAA,MAAM,SAA2B,GAAAC,aAAA;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU,OAAQ,CAAA,KAAA;AAAA,KACpB,CAAA;AAAA,IACA,CAAC,QAAQ,KAAK,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAAC,iBAAA,EAAA;AAAA,IAAU,GAAG,KAAA;AAAA,IAAO,OAAO,QAAU,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,IAAA;AAAA,IACpC,QAAA,EAAA;AAAA,sBAACC,cAAA,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,sBACCF,eAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,QAC5C,QAAA,EAAA;AAAA,0BAACE,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,0BACNA,cAAA,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,0BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,YAAK,QAAA,EAAA,GAAA;AAAA,WAAC,CAAA;AAAA,SAAA;AAAA,OACT,CAAA;AAAA,sBACCA,cAAA,CAAAC,sBAAA,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, useIcon } from \"@salt-ds/core\";\nimport { type CSSProperties, useMemo, useRef } from \"react\";\nimport { ListItem, type ListItemProps, type ListItemType } from \"../../list\";\nimport type { 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    const { ExpandGroupIcon } = useIcon();\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        <ExpandGroupIcon className={withBaseName(\"chevron\")} />\n      </ListItem>\n    );\n  };\n"],"names":["makePrefixer","CategoryListItem","useRef","useCategoryListContext","useIcon","useMemo","ListItem","jsx","jsxs"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA;AAOjD,MAAM,gBAAA,GACX,SAASC,iBAAAA,CAAiB,EAAE,MAAM,QAAA,EAAU,GAAG,OAAM,EAAG;AACtD,EAAA,MAAM,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,UAAUC,0CAAA,EAAuB;AACvC,EAAA,MAAM,EAAE,eAAA,EAAgB,GAAIC,YAAA,EAAQ;AACpC,EAAA,MAAM,SAAA,GAA2BC,aAAA;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU,OAAA,CAAQ;AAAA,KACpB,CAAA;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EAAA,uCACGC,iBAAA,EAAA,EAAU,GAAG,KAAA,EAAO,KAAA,EAAO,qCAAU,IAAA,EACpC,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,OAAA,EAAS,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,KAAA,EAAO,SAAA,EACxD,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,IAAA,EACb,CAAA;AAAA,oBACAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,iBAAiB,CAAA,EAC5C,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC,CAAA;AAAA,sBACPA,cAAA,CAAC,UAAK,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EACnC,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,MAAA,CAAO,IAAA,CAAK,IAAA,CAAA,EACzB,CAAA;AAAA,sBACAA,cAAA,CAAC,UAAK,QAAA,EAAA,GAAA,EAAC;AAAA,KAAA,EACT,CAAA;AAAA,oBACAA,cAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAW,YAAA,CAAa,SAAS,CAAA,EAAG;AAAA,GAAA,EACvD,CAAA;AAEJ;;;;"}

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

@@ -1,21 +1,16 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
-var React = require('react');
-var ToggleButton = require('../../toggle-button/ToggleButton.js');
-var ToggleButtonGroup = require('../../toggle-button/ToggleButtonGroup.js');
+var react = require('react');
 var TokenizedInput = require('../../tokenized-input/TokenizedInput.js');
 require('../../tokenized-input/TokenizedInputBase.js');
 require('clipboard-copy');
-require('../../utils/useFloatingUI.js');
 require('../../form-field-context-legacy/FormFieldLegacyContext.js');
 
 const withBaseName = core.makePrefixer("saltQueryInputBody");
-const QueryInputBody = React.forwardRef(
+const QueryInputBody = react.forwardRef(
   function QueryInputBody2(props, ref) {
     const {
       inputRef,
@@ -34,28 +29,27 @@ const QueryInputBody = React.forwardRef(
       booleanOperator,
       onBooleanOperatorChange
     } = props;
-    const itemToString = React.useMemo(() => {
+    const itemToString = react.useMemo(() => {
       if (showCategory) {
         return (item) => [item.category, item.value].join(": ");
       }
       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__ */ jsxRuntime.jsxs("div", {
-      ref,
-      className: withBaseName(),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(icons.FilterIcon, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(TokenizedInput.TokenizedInput, {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: withBaseName(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.FilterIcon, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TokenizedInput.TokenizedInput,
+        {
           inputRef,
           disabled,
           className: withBaseName("input"),
@@ -71,29 +65,23 @@ const QueryInputBody = React.forwardRef(
           onClear: onInputClear,
           onChange: onSelectedItemsChange,
           onKeyDown
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: withBaseName("separator")
-        }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ToggleButtonGroup.ToggleButtonGroup, {
-          variant: "secondary",
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("separator") }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        core.ToggleButtonGroup,
+        {
           className: withBaseName("buttonGroup"),
           "data-testid": "boolean-selector",
-          selectedIndex: booleanOperator === "and" ? 0 : 1,
+          value: booleanOperator,
           onChange,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.ToggleButton, {
-              value: "and",
-              children: "And"
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToggleButton.ToggleButton, {
-              value: "or",
-              children: "Or"
-            })
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "and", children: "And" }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "or", children: "Or" })
           ]
-        })
-      ]
-    });
+        }
+      )
+    ] });
   }
 );
 

package/dist-cjs/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":["makePrefixer","forwardRef","QueryInputBody","useMemo","selectedItems","jsxs","jsx","FilterIcon","TokenizedInput","ToggleButtonGroup","ToggleButton"],"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":["makePrefixer","forwardRef","QueryInputBody","useMemo","jsxs","jsx","FilterIcon","TokenizedInput","ToggleButtonGroup","ToggleButton"],"mappings":";;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAsB/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,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,GAAeC,cAAQ,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,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,cAAa,EACrC,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,gBAAA,EAAA,EAAW,CAAA;AAAA,sBACZD,cAAA;AAAA,QAACE,6BAAA;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,sBACAF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EAAG,CAAA;AAAA,sBAC3CD,eAAA;AAAA,QAACI,sBAAA;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,4BAAAH,cAAA,CAACI,iBAAA,EAAA,EAAa,KAAA,EAAM,KAAA,EAAM,QAAA,EAAA,KAAA,EAAG,CAAA;AAAA,4BAC7BJ,cAAA,CAACI,iBAAA,EAAA,EAAa,KAAA,EAAM,IAAA,EAAK,QAAA,EAAA,IAAA,EAAE;AAAA;AAAA;AAAA;AAC7B,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

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

@@ -1,21 +1,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var react = require('react');
 require('../../list/Highlighter.js');
-var ListItem = require('../../list/ListItem.js');
 var List = require('../../list/List.js');
+var ListItem = require('../../list/ListItem.js');
 var ListItemGroup = require('../../list/ListItemGroup.js');
 require('../../common-hooks/collectionProvider.js');
 require('../../common-hooks/keyUtils.js');
-require('../../utils/useFloatingUI.js');
 require('../../responsive/useResizeObserver.js');
 require('../../list/VirtualizedList.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var QueryInput = require('../QueryInput.css.js');
 
 const withBaseName = core.makePrefixer("saltQueryInputSearchList");
@@ -38,38 +35,33 @@ function SearchList(props) {
     css: QueryInput,
     window: targetWindow
   });
-  const onChange = React.useCallback(
-    (event, items) => {
+  const onChange = react.useCallback(
+    (_event, items) => {
       onChangeProp(items || []);
     },
     [onChangeProp]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(List.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__ */ jsxRuntime.jsx(ListItemGroup.ListItemGroup, {
-          label: inputCategory.name,
-          children: inputCategory.values.map((label) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItem, {
-            label
-          }, label))
-        }, inputCategory.name);
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItem, {
-        className: withBaseName("addKeyword"),
-        children: `Add keyword: "${inputValue}"`
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    List.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__ */ jsxRuntime.jsx(ListItemGroup.ListItemGroup, { label: inputCategory.name, children: inputCategory.values.map((label) => /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItem, { label }, label)) }, inputCategory.name);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItem, { className: withBaseName("addKeyword"), children: `Add keyword: "${inputValue}"` })
+      ]
+    }
+  );
 }
 
 exports.SearchList = SearchList;

package/dist-cjs/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":["makePrefixer","useWindow","useComponentCssInjection","queryInputCss","useCallback","jsxs","List","jsx","ListItemGroup","ListItem"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,QACJ,GAAAC,iBAAA;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,uBACGC,eAAA,CAAAC,SAAA,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,uBACGC,cAAA,CAAAC,2BAAA,EAAA;AAAA,UAAuC,OAAO,aAAc,CAAA,IAAA;AAAA,UAC1D,QAAc,EAAA,aAAA,CAAA,MAAA,CAAO,GAAI,CAAA,CAAC,0BACxBD,cAAA,CAAAE,iBAAA,EAAA;AAAA,YAAqB,KAAA;AAAA,WAAA,EAAP,KAAqB,CACrC,CAAA;AAAA,SAAA,EAHiB,cAAc,IAIlC,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,sBACAF,cAAA,CAAAE,iBAAA,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":["makePrefixer","useWindow","useComponentCssInjection","queryInputCss","useCallback","jsxs","List","ListItemGroup","ListItem","jsx"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,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,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,kBAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,QAAA,GACJC,iBAAA;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,uBACEC,eAAA;AAAA,IAACC,SAAA;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,sCACGC,2BAAA,EAAA,EAAuC,KAAA,EAAO,aAAA,CAAc,IAAA,EAC1D,wBAAc,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,oCACxBC,iBAAA,EAAA,EAAqB,KAAA,EAAA,EAAP,KAAqB,CACrC,CAAA,EAAA,EAHiB,cAAc,IAIlC,CAAA;AAAA,QAEJ,CAAC,CAAA;AAAA,wBACDC,cAAA,CAACD,qBAAS,SAAA,EAAW,YAAA,CAAa,YAAY,CAAA,EAC3C,QAAA,EAAA,CAAA,cAAA,EAAiB,UAAU,CAAA,CAAA,CAAA,EAC9B;AAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

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

package/dist-cjs/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":["makePrefixer","jsx","ListItem","jsxs","List","ChevronLeftIcon"],"mappings":";;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,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,0BAClBC,cAAA,CAAAC,iBAAA,EAAA;AAAA,IAAqB,IAAM,EAAA,KAAA;AAAA,IACzB,QAAA,EAAA,KAAA;AAAA,GADY,EAAA,KAEf,CACD,CAAA,GACD,EAAC,CAAA;AAEL,EAAA,uBACGD,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,QAAU,EAAA,CAAA;AAAA,IAAG,aAAY,EAAA,YAAA;AAAA,IACvD,QAAC,kBAAAE,eAAA,CAAAC,SAAA,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,wBAACD,eAAA,CAAAD,iBAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAC9B,OAAS,EAAA,MAAA;AAAA,UACT,UAAY,EAAA,KAAA;AAAA,UAEZ,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAACI,qBAAgB,EAAA,EAAA,CAAA;AAAA,4BAChBJ,cAAA,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":["makePrefixer","useIcon","jsx","ListItem","jsxs","List"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,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,GAAIC,YAAA,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,qBACnBC,cAAA,CAACC,iBAAA,EAAA,EAAqB,MAAM,KAAA,EACzB,QAAA,EAAA,KAAA,EAAA,EADY,KAEf,CACD,IACD,EAAC;AAEL,EAAA,uBACED,cAAA,CAAC,SAAI,SAAA,EAAW,YAAA,IAAgB,QAAA,EAAU,CAAA,EAAG,eAAY,YAAA,EACvD,QAAA,kBAAAE,eAAA;AAAA,IAACC,SAAA;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,wBAAAD,eAAA;AAAA,UAACD,iBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,OAAA,EAAS,MAAA;AAAA,YACT,UAAA,EAAY,KAAA;AAAA,YAEZ,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,8BACdA,cAAA,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-cjs/query-input/internal/ValueSelector.js

@@ -1,16 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var React = require('react');
+var react = require('react');
+var Portal = require('../../portal/Portal.js');
+require('../../window/ElectronWindow.js');
+var WindowContext = require('../../window/WindowContext.js');
 var CategoryList = require('./CategoryList.js');
 var SearchList = require('./SearchList.js');
 var ValueList = require('./ValueList.js');
-var Portal = require('../../portal/Portal.js');
-var WindowContext = require('../../window/WindowContext.js');
-require('../../window/ElectronWindow.js');
 
 const withBaseName = core.makePrefixer("saltQueryInputValueSelector");
 function ValueSelector(props) {
@@ -34,7 +32,7 @@ function ValueSelector(props) {
     setHighlightedCategoryIndex,
     setHighlightedIndex
   } = props;
-  const selectedCategoryValues = React.useMemo(() => {
+  const selectedCategoryValues = react.useMemo(() => {
     if (!selectedCategory) {
       return [];
     }
@@ -45,34 +43,43 @@ function ValueSelector(props) {
   };
   const renderContent = () => {
     if (inputValue) {
-      return /* @__PURE__ */ jsxRuntime.jsx(SearchList.SearchList, {
-        inputValue,
-        selectedItems,
-        onChange: onSearchListChange,
-        rootWidth: width,
-        highlightedIndex,
-        visibleCategories,
-        setHighlightedIndex
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SearchList.SearchList,
+        {
+          inputValue,
+          selectedItems,
+          onChange: onSearchListChange,
+          rootWidth: width,
+          highlightedIndex,
+          visibleCategories,
+          setHighlightedIndex
+        }
+      );
     }
     if (!selectedCategory) {
-      return /* @__PURE__ */ jsxRuntime.jsx(CategoryList.CategoryList, {
-        categories,
-        rootWidth: width,
-        onCategorySelect: onSelectedCategoryChange,
-        highlightedCategoryIndex,
-        setHighlightedCategoryIndex
-      });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        CategoryList.CategoryList,
+        {
+          categories,
+          rootWidth: width,
+          onCategorySelect: onSelectedCategoryChange,
+          highlightedCategoryIndex,
+          setHighlightedCategoryIndex
+        }
+      );
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(ValueList.ValueList, {
-      category: selectedCategory,
-      rootWidth: width,
-      onBack: onBackToCategories,
-      selectedValues: selectedCategoryValues,
-      onValueToggle,
-      highlightedValueIndex,
-      setHighlightedValueIndex
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ValueList.ValueList,
+      {
+        category: selectedCategory,
+        rootWidth: width,
+        onBack: onBackToCategories,
+        selectedValues: selectedCategoryValues,
+        onValueToggle,
+        highlightedValueIndex,
+        setHighlightedValueIndex
+      }
+    );
   };
   const Window = WindowContext.useWindow();
   const { reference, floating, x, y, strategy } = core.useFloatingUI({
@@ -87,20 +94,18 @@ function ValueSelector(props) {
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, {
-    children: /* @__PURE__ */ jsxRuntime.jsx(Window, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", {
-        className: withBaseName("content"),
-        children: renderContent()
-      })
-    })
-  });
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("content"), children: renderContent() })
+    }
+  ) });
 }
 
 exports.ValueSelector = ValueSelector;

package/dist-cjs/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":["makePrefixer","useMemo","jsx","SearchList","CategoryList","ValueList","useWindow","useFloatingUI","useForkRef","useIsomorphicLayoutEffect","Portal"],"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":["makePrefixer","useMemo","jsx","SearchList","CategoryList","ValueList","useWindow","useFloatingUI","useForkRef","useIsomorphicLayoutEffect","Portal"],"mappings":"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"}

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

@@ -1,12 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
+var react = require('react');
 
 function usePopperStatus(props) {
-  const { initialOpen, autoClose } = props;
-  const [isOpen, setIsOpen] = React.useState(!!initialOpen);
+  const { autoClose } = props;
+  const [isOpen, setIsOpen] = react.useState(false);
   const onKeyDown = (event) => {
     if (event.altKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
       setIsOpen((x) => !x);
@@ -18,10 +16,10 @@ function usePopperStatus(props) {
       setIsOpen(false);
     }
   };
-  const onFocus = (event) => {
+  const onFocus = () => {
     setIsOpen(true);
   };
-  const onBlur = (event) => {
+  const onBlur = () => {
     setIsOpen(false);
   };
   const onChange = () => {

package/dist-cjs/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":["useState"],"mappings":";;;;;;AAOO,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAM,MAAA,EAAE,WAAa,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACnC,EAAA,MAAM,CAAC,MAAQ,EAAA,SAAS,IAAIA,cAAkB,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":["useState"],"mappings":";;;;AAOO,SAAS,gBAAgB,KAAA,EAA6B;AAC3D,EAAA,MAAM,EAAe,SAAA,EAAU,GAAI,KAAA;AACnC,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,IAAIA,cAAA,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;;;;"}