@salt-ds/lab 1.0.0-alpha.5 → 1.0.0-alpha.50

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

@@ -1 +0,0 @@
-{"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\";\nimport \"../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 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":[],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AAY5D,SAAS,aAAa,IAAsB,EAAA;AAC1C,EAAA,OAAO,CAAC,IAAK,CAAA,QAAA,EAAU,KAAK,KAAK,CAAA,CAAE,KAAK,IAAI,CAAA,CAAA;AAC9C,CAAA;AAEO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,mBAAA;AAAA,IACA,iBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,QACJ,GAAA,WAAA;AAAA,IACE,CAAC,OAAO,KAAU,KAAA;AAChB,MAAa,YAAA,CAAA,KAAA,IAAS,EAAE,CAAA,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,YAAY,CAAA;AAAA,GACf,CAAA;AAEF,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,aAAA;AAAA,IACZ,gBAAA;AAAA,IACA,wBAA0B,EAAA,UAAA;AAAA,IAC1B,YAAA;AAAA,IACA,WAAa,EAAA,mBAAA;AAAA,IACb,iBAAmB,EAAA,QAAA;AAAA,IACnB,iBAAkB,EAAA,UAAA;AAAA,IAClB,QAAU,EAAA,aAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IAEN,QAAA,EAAA;AAAA,MAAkB,iBAAA,CAAA,GAAA,CAAI,CAAC,aAAsC,KAAA;AAC5D,QAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,UAAuC,OAAO,aAAc,CAAA,IAAA;AAAA,UAC1D,QAAc,EAAA,aAAA,CAAA,MAAA,CAAO,GAAI,CAAA,CAAC,0BACxB,GAAA,CAAA,QAAA,EAAA;AAAA,YAAqB,KAAA;AAAA,WAAA,EAAP,KAAqB,CACrC,CAAA;AAAA,SAAA,EAHiB,cAAc,IAIlC,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,sBACA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAS,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,QAC3C,QAAiB,EAAA,CAAA,cAAA,EAAA,UAAA,CAAA,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,65 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
-import { ChevronLeftIcon } from '@salt-ds/icons';
-import '../../list/Highlighter.js';
-import { ListItem } from '../../list/ListItem.js';
-import { List } from '../../list/List.js';
-import 'react';
-import '../../common-hooks/collectionProvider.js';
-import '../../common-hooks/keyUtils.js';
-import '../../utils/useFloatingUI.js';
-import '../../responsive/useResizeObserver.js';
-import '../../list/VirtualizedList.js';
-
-const withBaseName = 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__ */ jsx(ListItem, {
-    item: value,
-    children: value
-  }, value)) : [];
-  return /* @__PURE__ */ jsx("div", {
-    className: withBaseName(),
-    tabIndex: 0,
-    "data-testid": "value-list",
-    children: /* @__PURE__ */ jsxs(List, {
-      borderless: true,
-      checkable: false,
-      highlightedIndex: highlightedValueIndex,
-      onHighlight: setHighlightedValueIndex,
-      onSelect: handleSelect,
-      selectionStrategy: "multiple",
-      selected: selectedValues,
-      width: rootWidth,
-      children: [
-        /* @__PURE__ */ jsxs(ListItem, {
-          className: withBaseName("back"),
-          onClick: onBack,
-          selectable: false,
-          children: [
-            /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
-            /* @__PURE__ */ jsx("div", {
-              className: withBaseName("category"),
-              children: category ? category.name : ""
-            })
-          ]
-        }),
-        items
-      ]
-    })
-  });
-}
-
-export { ValueList };
-//# sourceMappingURL=ValueList.js.map

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

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

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

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

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

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

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

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

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

@@ -1,425 +0,0 @@
-import { useForkRef, useControlled } from '@salt-ds/core';
-import { useRef, useState, useMemo } from 'react';
-import { usePopperStatus } from './internal/usePopperStatus.js';
-import 'react/jsx-runtime';
-import '../responsive/useResizeObserver.js';
-import '../utils/useFloatingUI.js';
-import { useWidth } from '../responsive/useWidth.js';
-
-function useQueryInput(props, forwardedRef) {
-  const bodyRef = useRef(null);
-  const popperRef = useRef(null);
-  const inputRef = useRef(null);
-  const [widthBodyRef, bodyWidth] = useWidth(true);
-  const forkedRef1 = useForkRef(
-    forwardedRef,
-    bodyRef
-  );
-  const queryInputBodyRef = useForkRef(
-    forkedRef1,
-    widthBodyRef
-  );
-  const [selectedItems, setSelectedItems] = useControlled({
-    controlled: props.selectedItems,
-    default: props.defaultSelectedItems || [],
-    name: "QueryInput",
-    state: "selectedItems"
-  });
-  const [booleanOperator, setBooleanOperator] = useControlled({
-    controlled: props.booleanOperator,
-    default: props.defaultBooleanOperator || "and",
-    name: "QueryInput",
-    state: "booleanOperator"
-  });
-  const popperStatus = usePopperStatus({
-    initialOpen: false,
-    autoClose: props.autoClose
-  });
-  const [isFocused, setIsFocused] = useState(false);
-  const [highlightedIndex, setHighlightedIndex] = useState(0);
-  const [highlightedCategoryIndex, setHighlightedCategoryIndex] = useState(0);
-  const [highlightedValueIndex, setHighlightedValueIndex] = useState(0);
-  const [selectedCategory, setSelectedCategory] = useState(null);
-  const searchListIndexPositions = 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] = useState("");
-  const searchListItems = 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 = 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;
-  }
-}
-
-export { useQueryInput };
-//# sourceMappingURL=useQueryInput.js.map