@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/query-input/internal/ValueList.js

@@ -0,0 +1,68 @@
+'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');
+require('react');
+require('../../common-hooks/collectionProvider.js');
+require('../../common-hooks/keyUtils.js');
+require('../../responsive/useResizeObserver.js');
+require('../../list/VirtualizedList.js');
+
+const withBaseName = core.makePrefixer("saltQueryInputValueList");
+function ValueList(props) {
+  const {
+    category,
+    rootWidth,
+    onBack,
+    selectedValues,
+    onValueToggle,
+    highlightedValueIndex,
+    setHighlightedValueIndex
+  } = props;
+  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, {
+      borderless: true,
+      checkable: false,
+      highlightedIndex: highlightedValueIndex,
+      onHighlight: setHighlightedValueIndex,
+      onSelect: handleSelect,
+      selectionStrategy: "multiple",
+      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 : ""
+            })
+          ]
+        }),
+        items
+      ]
+    })
+  });
+}
+
+exports.ValueList = ValueList;
+//# sourceMappingURL=ValueList.js.map

package/dist-cjs/packages/lab/src/query-input/internal/ValueList.js.map

@@ -0,0 +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;;;;"}

package/dist-cjs/packages/lab/src/query-input/internal/ValueSelector.js

@@ -0,0 +1,108 @@
+'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 CategoryList = require('./CategoryList.js');
+var SearchList = require('./SearchList.js');
+var ValueList = require('./ValueList.js');
+var WindowContext = require('../../window/WindowContext.js');
+require('../../window/ElectronWindow.js');
+var useFloatingUI = require('../../popper/useFloatingUI.js');
+var Portal = require('../../portal/Portal.js');
+
+const withBaseName = core.makePrefixer("saltQueryInputValueSelector");
+function ValueSelector(props) {
+  const {
+    isOpen,
+    inputValue,
+    anchorElement,
+    popperRef,
+    categories,
+    selectedCategory,
+    onSelectedCategoryChange,
+    width,
+    selectedItems,
+    onValueToggle,
+    highlightedIndex,
+    visibleCategories,
+    highlightedCategoryIndex,
+    highlightedValueIndex,
+    onSearchListChange,
+    setHighlightedValueIndex,
+    setHighlightedCategoryIndex,
+    setHighlightedIndex
+  } = props;
+  const selectedCategoryValues = React.useMemo(() => {
+    if (!selectedCategory) {
+      return [];
+    }
+    return selectedItems.filter((item) => item.category === selectedCategory.name).map(({ value }) => value);
+  }, [selectedCategory, selectedItems]);
+  const onBackToCategories = () => {
+    onSelectedCategoryChange(null);
+  };
+  const renderContent = () => {
+    if (inputValue) {
+      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(ValueList.ValueList, {
+      category: selectedCategory,
+      rootWidth: width,
+      onBack: onBackToCategories,
+      selectedValues: selectedCategoryValues,
+      onValueToggle,
+      highlightedValueIndex,
+      setHighlightedValueIndex
+    });
+  };
+  const Window = WindowContext.useWindow();
+  const { reference, floating, x, y, strategy } = useFloatingUI.useFloatingUI({
+    placement: "bottom"
+  });
+  const handleRef = core.useForkRef(floating, popperRef);
+  core.useIsomorphicLayoutEffect(() => {
+    if (anchorElement) {
+      reference(anchorElement);
+    }
+  }, [reference, anchorElement]);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, {
+    children: /* @__PURE__ */ jsxRuntime.jsx(Window, {
+      style: {
+        top: y != null ? y : "",
+        left: x != null ? x : "",
+        position: strategy
+      },
+      ref: handleRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName("content"),
+        children: renderContent()
+      })
+    })
+  });
+}
+
+exports.ValueSelector = ValueSelector;
+//# sourceMappingURL=ValueSelector.js.map

package/dist-cjs/packages/lab/src/query-input/internal/ValueSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueSelector.js","sources":["../src/query-input/internal/ValueSelector.tsx"],"sourcesContent":["import {\n  makePrefixer,\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 { useWindow } from \"../../window\";\nimport { useFloatingUI } from \"../../popper\";\nimport { Portal } from \"../../portal\";\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 ?? \"\",\n          left: x ?? \"\",\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":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,6BAA6B,CAAA,CAAA;AA2BxD,SAAS,cAAc,KAA2B,EAAA;AACvD,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,wBAAA;AAAA,IACA,qBAAA;AAAA,IACA,kBAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,IACA,mBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,sBAAA,GAAyBC,cAAQ,MAAM;AAC3C,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AACA,IAAA,OAAO,aACJ,CAAA,MAAA,CAAO,CAAC,IAAA,KAAS,KAAK,QAAa,KAAA,gBAAA,CAAiB,IAAI,CAAA,CACxD,GAAI,CAAA,CAAC,EAAE,KAAA,OAAY,KAAK,CAAA,CAAA;AAAA,GAC1B,EAAA,CAAC,gBAAkB,EAAA,aAAa,CAAC,CAAA,CAAA;AAEpC,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAA,wBAAA,CAAyB,IAAI,CAAA,CAAA;AAAA,GAC/B,CAAA;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,uBACGC,cAAA,CAAAC,qBAAA,EAAA;AAAA,QACC,UAAA;AAAA,QACA,aAAA;AAAA,QACA,QAAU,EAAA,kBAAA;AAAA,QACV,SAAW,EAAA,KAAA;AAAA,QACX,gBAAA;AAAA,QACA,iBAAA;AAAA,QACA,mBAAA;AAAA,OACF,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,IAAI,CAAC,gBAAkB,EAAA;AACrB,MAAA,uBACGD,cAAA,CAAAE,yBAAA,EAAA;AAAA,QACC,UAAA;AAAA,QACA,SAAW,EAAA,KAAA;AAAA,QACX,gBAAkB,EAAA,wBAAA;AAAA,QAClB,wBAAA;AAAA,QACA,2BAAA;AAAA,OACF,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACGF,cAAA,CAAAG,mBAAA,EAAA;AAAA,MACC,QAAU,EAAA,gBAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,MAAQ,EAAA,kBAAA;AAAA,MACR,cAAgB,EAAA,sBAAA;AAAA,MAChB,aAAA;AAAA,MACA,qBAAA;AAAA,MACA,wBAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,MAAM,SAASC,uBAAU,EAAA,CAAA;AACzB,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,GAAG,CAAG,EAAA,QAAA,KAAaC,2BAAc,CAAA;AAAA,IAC5D,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA,CAAA;AACD,EAAM,MAAA,SAAA,GAAYC,eAA2B,CAAA,QAAA,EAAU,SAAS,CAAA,CAAA;AAChE,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,SAAA,CAAU,aAAa,CAAA,CAAA;AAAA,KACzB;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,aAAa,CAAC,CAAA,CAAA;AAE7B,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACGP,cAAA,CAAAQ,aAAA,EAAA;AAAA,IACC,QAAC,kBAAAR,cAAA,CAAA,MAAA,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,QACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,EAAA;AAAA,QACX,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MAEL,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAI,QAAc,EAAA,aAAA,EAAA;AAAA,OAAE,CAAA;AAAA,KAC5D,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/query-input/internal/usePopperStatus.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function usePopperStatus(props) {
+  const { initialOpen, autoClose } = props;
+  const [isOpen, setIsOpen] = React.useState(!!initialOpen);
+  const onKeyDown = (event) => {
+    if (event.altKey && ["ArrowUp", "ArrowDown"].includes(event.key)) {
+      setIsOpen((x) => !x);
+    } else if (!isOpen && ["Alt", "Tab", "Escape", "Control", "Shift", "Meta"].includes(event.key)) {
+      setIsOpen(true);
+    } else if (isOpen && event.key === "Escape") {
+      setIsOpen(false);
+    } else if (isOpen && autoClose && event.key === "Enter") {
+      setIsOpen(false);
+    }
+  };
+  const onFocus = (event) => {
+    setIsOpen(true);
+  };
+  const onBlur = (event) => {
+    setIsOpen(false);
+  };
+  const onChange = () => {
+    if (autoClose) {
+      setIsOpen(false);
+    }
+  };
+  const onClick = () => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  };
+  return {
+    isOpen,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onChange,
+    onClick
+  };
+}
+
+exports.usePopperStatus = usePopperStatus;
+//# sourceMappingURL=usePopperStatus.js.map

package/dist-cjs/packages/lab/src/query-input/internal/usePopperStatus.js.map

@@ -0,0 +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;;;;"}

package/dist-cjs/packages/lab/src/query-input/useQueryInput.js

@@ -0,0 +1,428 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+var React = require('react');
+var usePopperStatus = require('./internal/usePopperStatus.js');
+require('react/jsx-runtime');
+require('../responsive/useResizeObserver.js');
+var useWidth = require('../responsive/useWidth.js');
+
+function useQueryInput(props, forwardedRef) {
+  const bodyRef = React.useRef(null);
+  const popperRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const [widthBodyRef, bodyWidth] = useWidth.useWidth(true);
+  const forkedRef1 = core.useForkRef(
+    forwardedRef,
+    bodyRef
+  );
+  const queryInputBodyRef = core.useForkRef(
+    forkedRef1,
+    widthBodyRef
+  );
+  const [selectedItems, setSelectedItems] = core.useControlled({
+    controlled: props.selectedItems,
+    default: props.defaultSelectedItems || [],
+    name: "QueryInput",
+    state: "selectedItems"
+  });
+  const [booleanOperator, setBooleanOperator] = core.useControlled({
+    controlled: props.booleanOperator,
+    default: props.defaultBooleanOperator || "and",
+    name: "QueryInput",
+    state: "booleanOperator"
+  });
+  const popperStatus = usePopperStatus.usePopperStatus({
+    initialOpen: false,
+    autoClose: props.autoClose
+  });
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  const [highlightedCategoryIndex, setHighlightedCategoryIndex] = React.useState(0);
+  const [highlightedValueIndex, setHighlightedValueIndex] = React.useState(0);
+  const [selectedCategory, setSelectedCategory] = React.useState(null);
+  const searchListIndexPositions = React.useRef(
+    []
+  );
+  const onInputFocus = (event) => {
+    popperStatus.onFocus(event);
+    setIsFocused(true);
+  };
+  const onInputBlur = (event) => {
+    if (!inputRef.current) {
+      return;
+    }
+    const relatedTarget = event.relatedTarget;
+    const isBodyFocused = bodyRef.current === relatedTarget;
+    if (isBodyFocused) {
+      inputRef.current.focus();
+      return;
+    }
+    const isFocusWithinBody = bodyRef.current && bodyRef.current.contains(relatedTarget);
+    if (isFocusWithinBody) {
+      return;
+    }
+    const isFocusWithinPopper = popperRef.current && popperRef.current.contains(relatedTarget);
+    if (isFocusWithinPopper) {
+      inputRef.current.focus();
+      return;
+    }
+    setIsFocused(false);
+    popperStatus.onBlur(event);
+  };
+  const onFocus = (event) => {
+    setIsFocused(true);
+    popperStatus.onFocus(event);
+  };
+  const onBlur = (event) => {
+    let relatedTarget = event.relatedTarget;
+    const isBodyFocused = bodyRef.current === relatedTarget;
+    if (isBodyFocused) {
+      return;
+    }
+    const isFocusWithinBody = bodyRef.current && bodyRef.current.contains(relatedTarget);
+    if (isFocusWithinBody) {
+      return;
+    }
+    const isFocusWithinPopper = popperRef.current && popperRef.current.contains(relatedTarget);
+    if (isFocusWithinPopper) {
+      return;
+    }
+    setIsFocused(false);
+    popperStatus.onBlur(event);
+  };
+  const onSelectedItemsChange = (newItems) => {
+    const newItem = newItems && newItems.find(
+      (item) => item.category == null && item.value === inputValue
+    );
+    if (newItem) {
+      setInputValue("");
+    }
+    setSelectedItems(newItems || []);
+    if (props.onChange) {
+      props.onChange(newItems || []);
+    }
+    popperStatus.onChange();
+  };
+  const onBooleanOperatorChange = (operator) => {
+    setBooleanOperator(operator);
+    if (props.onBooleanOperatorChange) {
+      props.onBooleanOperatorChange(operator);
+    }
+  };
+  const onSelectedCategoryChange = (category) => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+    setSelectedCategory(category);
+  };
+  const [inputValue, setInputValue] = React.useState("");
+  const searchListItems = React.useMemo(() => {
+    const [searchListItems2, indexPositions] = filterCategories(
+      props.categories,
+      inputValue
+    );
+    searchListIndexPositions.current = indexPositions;
+    return searchListItems2;
+  }, [props.categories, inputValue]);
+  const onInputChange = (event) => {
+    const newInputValue = event.target.value;
+    setInputValue(newInputValue);
+    setHighlightedIndex(searchListIndexPositions.current.length === 0 ? 0 : 1);
+  };
+  const searchListItemCount = React.useMemo(() => {
+    return searchListItems.reduce(
+      (acc, category) => acc + category.values.length,
+      0
+    );
+  }, [searchListItems]);
+  const onInputClear = () => {
+    onSelectedItemsChange([]);
+  };
+  const onInputClick = () => {
+    popperStatus.onClick();
+  };
+  const newItemFromSelected = () => {
+    const i = highlightedIndex;
+    for (const category of searchListItems) {
+      if (i < category.values.length) {
+        const value = category.values[i];
+        return {
+          category: category.name,
+          value
+        };
+      }
+    }
+  };
+  const { displayedItemCount = 10 } = props;
+  const onSearchListKeyDown = (key) => {
+    switch (key) {
+      case "Home":
+        setHighlightedIndex(0);
+        return;
+      case "End":
+        setHighlightedIndex(searchListItemCount);
+        return;
+      case "ArrowUp":
+        setHighlightedIndex(
+          (i) => prevSearchItemIndex(i, searchListIndexPositions.current)
+        );
+        return;
+      case "ArrowDown":
+        setHighlightedIndex(
+          (i) => nextSearchItemIndex(i, searchListIndexPositions.current)
+        );
+        return;
+      case "PageDown":
+        setHighlightedIndex(
+          (i) => Math.min(searchListItemCount, i + displayedItemCount)
+        );
+        return;
+      case "PageUp":
+        setHighlightedIndex((i) => Math.max(0, i - displayedItemCount));
+        return;
+      case "Enter":
+        if (highlightedIndex === searchListItemCount) {
+          const newItems = [
+            ...selectedItems,
+            { category: null, value: inputValue }
+          ];
+          onSelectedItemsChange(newItems);
+        } else {
+          if (highlightedIndex >= 0 && highlightedIndex < searchListItemCount) {
+            const newItem = newItemFromSelected();
+            if (newItem) {
+              const newItems = [...selectedItems, newItem];
+              onSelectedItemsChange(newItems);
+            }
+          }
+          setInputValue("");
+        }
+        return;
+      default:
+        return;
+    }
+  };
+  const onCategoryListKeyDown = (key) => {
+    switch (key) {
+      case "Home":
+        setHighlightedCategoryIndex(0);
+        return;
+      case "End":
+        setHighlightedCategoryIndex(props.categories.length - 1);
+        return;
+      case "ArrowUp":
+        setHighlightedCategoryIndex((i) => Math.max(0, i - 1));
+        return;
+      case "ArrowDown":
+        setHighlightedCategoryIndex(
+          (i) => Math.min(props.categories.length - 1, i + 1)
+        );
+        return;
+      case "PageUp":
+        setHighlightedCategoryIndex((i) => Math.max(0, i - displayedItemCount));
+        return;
+      case "PageDown":
+        setHighlightedCategoryIndex(
+          (i) => Math.min(props.categories.length - 1, i + displayedItemCount)
+        );
+        return;
+      case "Enter":
+        if (highlightedCategoryIndex >= 0 && highlightedCategoryIndex < props.categories.length) {
+          const category = props.categories[highlightedCategoryIndex];
+          setSelectedCategory(category);
+        }
+        return;
+      case "ArrowRight":
+        if (highlightedCategoryIndex >= 0 && highlightedCategoryIndex < props.categories.length) {
+          const category = props.categories[highlightedCategoryIndex];
+          setSelectedCategory(category);
+        }
+        return;
+      default:
+        return;
+    }
+  };
+  const onValueListKeyDown = (key) => {
+    switch (key) {
+      case "Home":
+        setHighlightedValueIndex(0);
+        return;
+      case "End":
+        setHighlightedValueIndex(selectedCategory.values.length);
+        return;
+      case "ArrowUp":
+        setHighlightedValueIndex((i) => Math.max(0, i - 1));
+        return;
+      case "ArrowDown":
+        setHighlightedValueIndex(
+          (i) => Math.min(selectedCategory.values.length, i + 1)
+        );
+        return;
+      case "PageUp":
+        setHighlightedValueIndex((i) => Math.max(0, i - displayedItemCount));
+        return;
+      case "PageDown":
+        setHighlightedValueIndex(
+          (i) => Math.min(selectedCategory.values.length, i + displayedItemCount)
+        );
+        return;
+      case "Enter":
+        if (highlightedValueIndex === 0) {
+          setSelectedCategory(null);
+        } else {
+          const value = selectedCategory.values[highlightedValueIndex - 1];
+          const newItems = selectedItems.filter(
+            (item) => !(item.category === selectedCategory.name && item.value === value)
+          );
+          if (newItems.length === selectedItems.length) {
+            newItems.push({ category: selectedCategory.name, value });
+          }
+          onSelectedItemsChange(newItems);
+        }
+        return;
+      case "ArrowLeft":
+        setSelectedCategory(null);
+        return;
+      default:
+        return;
+    }
+  };
+  const onKeyDown = (event) => {
+    popperStatus.onKeyDown(event);
+    let key = event.key;
+    if (event.key === " " && event.ctrlKey) {
+      key = "Enter";
+    }
+    const isSearchListActive = inputValue !== "";
+    const isCategoryListActive = !isSearchListActive && !selectedCategory;
+    const isValueListActive = !isSearchListActive && !isCategoryListActive;
+    if (isSearchListActive) {
+      onSearchListKeyDown(key);
+    } else if (isCategoryListActive) {
+      onCategoryListKeyDown(key);
+    } else {
+      onValueListKeyDown(key);
+    }
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowDown":
+      case "Enter":
+        event.preventDefault();
+        break;
+      case "ArrowLeft":
+        if (isValueListActive) {
+          event.preventDefault();
+        }
+        break;
+      case "ArrowRight":
+        if (isCategoryListActive) {
+          event.preventDefault();
+        }
+        break;
+      case "Escape":
+        setInputValue("");
+    }
+  };
+  const onValueToggle = (category, value) => {
+    const newItems = selectedItems.filter(
+      (item) => !(item.category === category.name && item.value === value)
+    );
+    if (newItems.length === selectedItems.length) {
+      newItems.push({ category: category.name, value });
+    }
+    onSelectedItemsChange(newItems);
+  };
+  return {
+    queryInputBodyRef,
+    queryInputProps: {
+      onFocus,
+      onBlur
+    },
+    queryInputBodyProps: {
+      inputRef,
+      disabled: props.disabled,
+      selectedItems,
+      onFocus,
+      onBlur,
+      onInputClick,
+      onInputFocus,
+      onInputBlur,
+      onInputClear,
+      inputValue,
+      onInputChange,
+      onSelectedItemsChange,
+      onKeyDown,
+      isFocused,
+      booleanOperator,
+      onBooleanOperatorChange
+    },
+    valueSelectorProps: {
+      isOpen: popperStatus.isOpen,
+      categories: props.categories,
+      selectedCategory,
+      selectedItems,
+      onValueToggle,
+      onSearchListChange: onSelectedItemsChange,
+      anchorElement: bodyRef.current,
+      width: bodyWidth,
+      onSelectedCategoryChange,
+      popperRef,
+      inputValue,
+      highlightedIndex,
+      visibleCategories: searchListItems,
+      highlightedCategoryIndex,
+      highlightedValueIndex,
+      setHighlightedCategoryIndex,
+      setHighlightedValueIndex,
+      setHighlightedIndex
+    }
+  };
+}
+function filterCategories(categories, inputValue) {
+  if (!inputValue) {
+    return [categories, []];
+  }
+  const query = inputValue.toUpperCase();
+  const visibleCategories = [];
+  const indexPositions = [];
+  for (const c of categories) {
+    const values = c.values.filter((v) => v.toUpperCase().includes(query));
+    if (values.length > 0) {
+      const queryInputCategory = {
+        name: c.name,
+        values
+      };
+      visibleCategories.push(queryInputCategory);
+      indexPositions.push(queryInputCategory, ...values);
+    }
+  }
+  return [visibleCategories, indexPositions];
+}
+function nextSearchItemIndex(index, indexPositions) {
+  const nextIndex = index + 1;
+  if (nextIndex === indexPositions.length + 1) {
+    return index;
+  } else if (nextIndex === indexPositions.length) {
+    return nextIndex;
+  } else if (typeof indexPositions[nextIndex] === "string") {
+    return nextIndex;
+  } else {
+    return nextIndex + 1;
+  }
+}
+function prevSearchItemIndex(index, indexPositions) {
+  const nextIndex = index - 1;
+  if (nextIndex === 0) {
+    return index;
+  } else if (typeof indexPositions[nextIndex] === "string") {
+    return nextIndex;
+  } else {
+    return nextIndex - 1;
+  }
+}
+
+exports.useQueryInput = useQueryInput;
+//# sourceMappingURL=useQueryInput.js.map