npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.1 → 1.0.0-alpha.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (380) hide show

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

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

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

	@@ -1 +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\";\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;;;;"}
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\";\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 CHANGED Viewed

@@ -7,6 +7,7 @@ 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';

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

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

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

@@ -1,13 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
+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';
-import { useFloatingUI } from '../../popper/useFloatingUI.js';
-import { Portal } from '../../portal/Portal.js';
 const withBaseName = makePrefixer("saltQueryInputValueSelector");
 function ValueSelector(props) {

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

	@@ -1 +1 @@
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":[],"mappings":"~~;;;;;;;;;;;~~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"}
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 ?? \"\",\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/useQueryInput.js CHANGED Viewed

@@ -3,6 +3,7 @@ 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) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useQueryInput.js","sources":["../src/query-input/useQueryInput.ts"],"sourcesContent":["import { useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n Ref,\n RefObject,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { QueryInputBodyProps } from \"./internal/QueryInputBody\";\nimport { usePopperStatus } from \"./internal/usePopperStatus\";\nimport { ValueSelectorProps } from \"./internal/ValueSelector\";\nimport { QueryInputProps } from \"./QueryInput\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { useWidth } from \"../responsive\";\n\nexport type BooleanOperator = \"or\" \| \"and\";\n\nexport interface UseQueryInputResult {\n queryInputProps: {\n onFocus: FocusEventHandler<HTMLDivElement>;\n onBlur: FocusEventHandler<HTMLDivElement>;\n };\n queryInputBodyRef: Ref<HTMLDivElement>;\n queryInputBodyProps: QueryInputBodyProps;\n valueSelectorProps: ValueSelectorProps;\n}\n\nexport function useQueryInput(\n props: QueryInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): UseQueryInputResult {\n const bodyRef = useRef<HTMLDivElement>(null);\n const popperRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [widthBodyRef, bodyWidth] = useWidth<HTMLDivElement>(true);\n\n const forkedRef1 = useForkRef<HTMLDivElement>(\n forwardedRef,\n bodyRef\n ) as RefObject<HTMLDivElement>;\n const queryInputBodyRef = useForkRef<HTMLDivElement>(\n forkedRef1,\n widthBodyRef\n );\n\n const [selectedItems, setSelectedItems] = useControlled({\n controlled: props.selectedItems,\n default: props.defaultSelectedItems \|\| [],\n name: \"QueryInput\",\n state: \"selectedItems\",\n });\n\n const [booleanOperator, setBooleanOperator] = useControlled({\n controlled: props.booleanOperator,\n default: props.defaultBooleanOperator \|\| \"and\",\n name: \"QueryInput\",\n state: \"booleanOperator\",\n });\n\n const popperStatus = usePopperStatus({\n initialOpen: false,\n autoClose: props.autoClose,\n });\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const [highlightedCategoryIndex, setHighlightedCategoryIndex] = useState(0);\n const [highlightedValueIndex, setHighlightedValueIndex] = useState(0);\n const [selectedCategory, setSelectedCategory] =\n useState<QueryInputCategory \| null>(null);\n const searchListIndexPositions = useRef<Array<QueryInputCategory \| string>>(\n []\n );\n\n const onInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onFocus(event);\n setIsFocused(true);\n };\n\n const onInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n if (!inputRef.current) {\n return;\n }\n const relatedTarget = event.relatedTarget as Node \| null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n inputRef.current.focus();\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n inputRef.current.focus();\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setIsFocused(true);\n popperStatus.onFocus(event);\n };\n\n const onBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n let relatedTarget = event.relatedTarget as Node \| null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onSelectedItemsChange = (newItems: QueryInputItem[] \| undefined) => {\n const newItem =\n newItems &&\n newItems.find(\n (item) => item.category == null && item.value === inputValue\n );\n if (newItem) {\n setInputValue(\"\");\n }\n setSelectedItems(newItems \|\| []);\n if (props.onChange) {\n props.onChange(newItems \|\| []);\n }\n popperStatus.onChange();\n };\n\n const onBooleanOperatorChange = (operator: BooleanOperator) => {\n setBooleanOperator(operator);\n if (props.onBooleanOperatorChange) {\n props.onBooleanOperatorChange(operator);\n }\n };\n\n const onSelectedCategoryChange = (category: QueryInputCategory \| null) => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n setSelectedCategory(category);\n };\n\n const [inputValue, setInputValue] = useState<string>(\"\");\n\n const searchListItems = useMemo(() => {\n const [searchListItems, indexPositions] = filterCategories(\n props.categories,\n inputValue\n );\n searchListIndexPositions.current = indexPositions;\n return searchListItems;\n }, [props.categories, inputValue]);\n\n const onInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newInputValue = event.target.value;\n setInputValue(newInputValue);\n // If we have search results, the first index position will be a header\n setHighlightedIndex(searchListIndexPositions.current.length === 0 ? 0 : 1);\n };\n\n const searchListItemCount = useMemo(() => {\n return searchListItems.reduce(\n (acc, category) => acc + category.values.length,\n 0\n );\n }, [searchListItems]);\n\n const onInputClear = () => {\n onSelectedItemsChange([]);\n };\n\n const onInputClick = () => {\n popperStatus.onClick();\n };\n\n const newItemFromSelected = (): QueryInputItem \| undefined => {\n const i = highlightedIndex;\n for (const category of searchListItems) {\n if (i < category.values.length) {\n const value = category.values[i];\n return {\n category: category.name,\n value,\n };\n }\n }\n };\n\n const { displayedItemCount = 10 } = props;\n\n const onSearchListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedIndex(0);\n return;\n case \"End\":\n setHighlightedIndex(searchListItemCount);\n return;\n case \"ArrowUp\":\n setHighlightedIndex((i) =>\n prevSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"ArrowDown\":\n // setHighlightedIndex((i) => Math.min(searchListItemCount, i + 1));\n setHighlightedIndex((i) =>\n nextSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"PageDown\":\n setHighlightedIndex((i) =>\n Math.min(searchListItemCount, i + displayedItemCount)\n );\n return;\n case \"PageUp\":\n setHighlightedIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"Enter\":\n if (highlightedIndex === searchListItemCount) {\n const newItems = [\n ...selectedItems,\n { category: null, value: inputValue },\n ];\n onSelectedItemsChange(newItems);\n } else {\n if (highlightedIndex >= 0 && highlightedIndex < searchListItemCount) {\n const newItem = newItemFromSelected();\n if (newItem) {\n const newItems = [...selectedItems, newItem];\n onSelectedItemsChange(newItems);\n }\n }\n setInputValue(\"\");\n }\n return;\n default:\n return;\n }\n };\n\n const onCategoryListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedCategoryIndex(0);\n return;\n case \"End\":\n setHighlightedCategoryIndex(props.categories.length - 1);\n return;\n case \"ArrowUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n case \"ArrowRight\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n default:\n return;\n }\n };\n\n const onValueListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedValueIndex(0);\n return;\n case \"End\":\n setHighlightedValueIndex(selectedCategory!.values.length);\n return;\n case \"ArrowUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (highlightedValueIndex === 0) {\n setSelectedCategory(null);\n } else {\n const value = selectedCategory!.values[highlightedValueIndex - 1];\n const newItems = selectedItems.filter(\n (item) =>\n !(\n item.category === selectedCategory!.name && item.value === value\n )\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: selectedCategory!.name, value });\n }\n onSelectedItemsChange(newItems);\n }\n return;\n case \"ArrowLeft\":\n setSelectedCategory(null);\n return;\n default:\n return;\n }\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onKeyDown(event);\n let key = event.key;\n if (event.key === \" \" && event.ctrlKey) {\n key = \"Enter\";\n }\n const isSearchListActive = inputValue !== \"\";\n const isCategoryListActive = !isSearchListActive && !selectedCategory;\n const isValueListActive = !isSearchListActive && !isCategoryListActive;\n if (isSearchListActive) {\n onSearchListKeyDown(key);\n } else if (isCategoryListActive) {\n onCategoryListKeyDown(key);\n } else {\n onValueListKeyDown(key);\n }\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowDown\":\n case \"Enter\":\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (isValueListActive) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (isCategoryListActive) {\n event.preventDefault();\n }\n break;\n case \"Escape\":\n setInputValue(\"\");\n }\n };\n\n const onValueToggle = (category: QueryInputCategory, value: string) => {\n const newItems = selectedItems.filter(\n (item) => !(item.category === category.name && item.value === value)\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: category.name, value });\n }\n onSelectedItemsChange(newItems);\n };\n\n return {\n queryInputBodyRef,\n queryInputProps: {\n onFocus,\n onBlur,\n },\n queryInputBodyProps: {\n inputRef: inputRef,\n disabled: props.disabled,\n selectedItems,\n onFocus,\n onBlur,\n onInputClick,\n onInputFocus,\n onInputBlur,\n onInputClear,\n inputValue,\n onInputChange,\n onSelectedItemsChange,\n onKeyDown,\n isFocused,\n booleanOperator,\n onBooleanOperatorChange,\n },\n valueSelectorProps: {\n isOpen: popperStatus.isOpen,\n categories: props.categories,\n selectedCategory,\n selectedItems,\n onValueToggle,\n onSearchListChange: onSelectedItemsChange,\n anchorElement: bodyRef.current,\n width: bodyWidth,\n onSelectedCategoryChange,\n popperRef,\n inputValue,\n highlightedIndex,\n visibleCategories: searchListItems,\n highlightedCategoryIndex,\n highlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedValueIndex,\n setHighlightedIndex,\n },\n };\n}\n\nfunction filterCategories(\n categories: QueryInputCategory[],\n inputValue?: string\n): [QueryInputCategory[], Array<QueryInputCategory \| string>] {\n // Note: if there is no input value, this List would not be display\n if (!inputValue) {\n return [categories, []];\n }\n const query = inputValue.toUpperCase();\n const visibleCategories: QueryInputCategory[] = [];\n const indexPositions: Array<QueryInputCategory \| string> = [];\n for (const c of categories) {\n const values = c.values.filter((v) => v.toUpperCase().includes(query));\n if (values.length > 0) {\n const queryInputCategory = {\n name: c.name,\n values,\n };\n visibleCategories.push(queryInputCategory);\n indexPositions.push(queryInputCategory, ...values);\n }\n }\n return [visibleCategories, indexPositions];\n}\n\nfunction nextSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory \| string>\n) {\n const nextIndex = index + 1;\n // Note: allow 1 for the extra ListItem we append to end of List\n if (nextIndex === indexPositions.length + 1) {\n return index;\n } else if (nextIndex === indexPositions.length) {\n return nextIndex;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex + 1;\n }\n}\n\nfunction prevSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory \| string>\n) {\n const nextIndex = index - 1;\n if (nextIndex === 0) {\n return index;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex - 1;\n }\n}\n"],"names":["searchListItems"],"mappings":"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"}
1	+ {"version":3,"file":"useQueryInput.js","sources":["../src/query-input/useQueryInput.ts"],"sourcesContent":["import { useControlled, useForkRef } from \"@salt-ds/core\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n ForwardedRef,\n KeyboardEventHandler,\n Ref,\n RefObject,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { QueryInputBodyProps } from \"./internal/QueryInputBody\";\nimport { usePopperStatus } from \"./internal/usePopperStatus\";\nimport { ValueSelectorProps } from \"./internal/ValueSelector\";\nimport { QueryInputProps } from \"./QueryInput\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { useWidth } from \"../responsive\";\n\nexport type BooleanOperator = \"or\" \| \"and\";\n\nexport interface UseQueryInputResult {\n queryInputProps: {\n onFocus: FocusEventHandler<HTMLDivElement>;\n onBlur: FocusEventHandler<HTMLDivElement>;\n };\n queryInputBodyRef: Ref<HTMLDivElement>;\n queryInputBodyProps: QueryInputBodyProps;\n valueSelectorProps: ValueSelectorProps;\n}\n\nexport function useQueryInput(\n props: QueryInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): UseQueryInputResult {\n const bodyRef = useRef<HTMLDivElement>(null);\n const popperRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const [widthBodyRef, bodyWidth] = useWidth<HTMLDivElement>(true);\n\n const forkedRef1 = useForkRef<HTMLDivElement>(\n forwardedRef,\n bodyRef\n ) as RefObject<HTMLDivElement>;\n const queryInputBodyRef = useForkRef<HTMLDivElement>(\n forkedRef1,\n widthBodyRef\n );\n\n const [selectedItems, setSelectedItems] = useControlled({\n controlled: props.selectedItems,\n default: props.defaultSelectedItems \|\| [],\n name: \"QueryInput\",\n state: \"selectedItems\",\n });\n\n const [booleanOperator, setBooleanOperator] = useControlled({\n controlled: props.booleanOperator,\n default: props.defaultBooleanOperator \|\| \"and\",\n name: \"QueryInput\",\n state: \"booleanOperator\",\n });\n\n const popperStatus = usePopperStatus({\n initialOpen: false,\n autoClose: props.autoClose,\n });\n\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const [highlightedIndex, setHighlightedIndex] = useState(0);\n const [highlightedCategoryIndex, setHighlightedCategoryIndex] = useState(0);\n const [highlightedValueIndex, setHighlightedValueIndex] = useState(0);\n const [selectedCategory, setSelectedCategory] =\n useState<QueryInputCategory \| null>(null);\n const searchListIndexPositions = useRef<Array<QueryInputCategory \| string>>(\n []\n );\n\n const onInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onFocus(event);\n setIsFocused(true);\n };\n\n const onInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n if (!inputRef.current) {\n return;\n }\n const relatedTarget = event.relatedTarget as Node \| null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n inputRef.current.focus();\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n inputRef.current.focus();\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setIsFocused(true);\n popperStatus.onFocus(event);\n };\n\n const onBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n let relatedTarget = event.relatedTarget as Node \| null;\n const isBodyFocused = bodyRef.current === relatedTarget;\n if (isBodyFocused) {\n return;\n }\n const isFocusWithinBody =\n bodyRef.current && bodyRef.current.contains(relatedTarget);\n if (isFocusWithinBody) {\n return;\n }\n const isFocusWithinPopper =\n popperRef.current && popperRef.current.contains(relatedTarget);\n if (isFocusWithinPopper) {\n return;\n }\n setIsFocused(false);\n popperStatus.onBlur(event);\n };\n\n const onSelectedItemsChange = (newItems: QueryInputItem[] \| undefined) => {\n const newItem =\n newItems &&\n newItems.find(\n (item) => item.category == null && item.value === inputValue\n );\n if (newItem) {\n setInputValue(\"\");\n }\n setSelectedItems(newItems \|\| []);\n if (props.onChange) {\n props.onChange(newItems \|\| []);\n }\n popperStatus.onChange();\n };\n\n const onBooleanOperatorChange = (operator: BooleanOperator) => {\n setBooleanOperator(operator);\n if (props.onBooleanOperatorChange) {\n props.onBooleanOperatorChange(operator);\n }\n };\n\n const onSelectedCategoryChange = (category: QueryInputCategory \| null) => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n setSelectedCategory(category);\n };\n\n const [inputValue, setInputValue] = useState<string>(\"\");\n\n const searchListItems = useMemo(() => {\n const [searchListItems, indexPositions] = filterCategories(\n props.categories,\n inputValue\n );\n searchListIndexPositions.current = indexPositions;\n return searchListItems;\n }, [props.categories, inputValue]);\n\n const onInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newInputValue = event.target.value;\n setInputValue(newInputValue);\n // If we have search results, the first index position will be a header\n setHighlightedIndex(searchListIndexPositions.current.length === 0 ? 0 : 1);\n };\n\n const searchListItemCount = useMemo(() => {\n return searchListItems.reduce(\n (acc, category) => acc + category.values.length,\n 0\n );\n }, [searchListItems]);\n\n const onInputClear = () => {\n onSelectedItemsChange([]);\n };\n\n const onInputClick = () => {\n popperStatus.onClick();\n };\n\n const newItemFromSelected = (): QueryInputItem \| undefined => {\n const i = highlightedIndex;\n for (const category of searchListItems) {\n if (i < category.values.length) {\n const value = category.values[i];\n return {\n category: category.name,\n value,\n };\n }\n }\n };\n\n const { displayedItemCount = 10 } = props;\n\n const onSearchListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedIndex(0);\n return;\n case \"End\":\n setHighlightedIndex(searchListItemCount);\n return;\n case \"ArrowUp\":\n setHighlightedIndex((i) =>\n prevSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"ArrowDown\":\n // setHighlightedIndex((i) => Math.min(searchListItemCount, i + 1));\n setHighlightedIndex((i) =>\n nextSearchItemIndex(i, searchListIndexPositions.current)\n );\n return;\n case \"PageDown\":\n setHighlightedIndex((i) =>\n Math.min(searchListItemCount, i + displayedItemCount)\n );\n return;\n case \"PageUp\":\n setHighlightedIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"Enter\":\n if (highlightedIndex === searchListItemCount) {\n const newItems = [\n ...selectedItems,\n { category: null, value: inputValue },\n ];\n onSelectedItemsChange(newItems);\n } else {\n if (highlightedIndex >= 0 && highlightedIndex < searchListItemCount) {\n const newItem = newItemFromSelected();\n if (newItem) {\n const newItems = [...selectedItems, newItem];\n onSelectedItemsChange(newItems);\n }\n }\n setInputValue(\"\");\n }\n return;\n default:\n return;\n }\n };\n\n const onCategoryListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedCategoryIndex(0);\n return;\n case \"End\":\n setHighlightedCategoryIndex(props.categories.length - 1);\n return;\n case \"ArrowUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedCategoryIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedCategoryIndex((i) =>\n Math.min(props.categories.length - 1, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n case \"ArrowRight\":\n if (\n highlightedCategoryIndex >= 0 &&\n highlightedCategoryIndex < props.categories.length\n ) {\n const category = props.categories[highlightedCategoryIndex];\n setSelectedCategory(category);\n }\n return;\n default:\n return;\n }\n };\n\n const onValueListKeyDown = (key: string) => {\n switch (key) {\n case \"Home\":\n setHighlightedValueIndex(0);\n return;\n case \"End\":\n setHighlightedValueIndex(selectedCategory!.values.length);\n return;\n case \"ArrowUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - 1));\n return;\n case \"ArrowDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + 1)\n );\n return;\n case \"PageUp\":\n setHighlightedValueIndex((i) => Math.max(0, i - displayedItemCount));\n return;\n case \"PageDown\":\n setHighlightedValueIndex((i) =>\n Math.min(selectedCategory!.values.length, i + displayedItemCount)\n );\n return;\n case \"Enter\":\n if (highlightedValueIndex === 0) {\n setSelectedCategory(null);\n } else {\n const value = selectedCategory!.values[highlightedValueIndex - 1];\n const newItems = selectedItems.filter(\n (item) =>\n !(\n item.category === selectedCategory!.name && item.value === value\n )\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: selectedCategory!.name, value });\n }\n onSelectedItemsChange(newItems);\n }\n return;\n case \"ArrowLeft\":\n setSelectedCategory(null);\n return;\n default:\n return;\n }\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n popperStatus.onKeyDown(event);\n let key = event.key;\n if (event.key === \" \" && event.ctrlKey) {\n key = \"Enter\";\n }\n const isSearchListActive = inputValue !== \"\";\n const isCategoryListActive = !isSearchListActive && !selectedCategory;\n const isValueListActive = !isSearchListActive && !isCategoryListActive;\n if (isSearchListActive) {\n onSearchListKeyDown(key);\n } else if (isCategoryListActive) {\n onCategoryListKeyDown(key);\n } else {\n onValueListKeyDown(key);\n }\n switch (event.key) {\n case \"ArrowUp\":\n case \"ArrowDown\":\n case \"Enter\":\n event.preventDefault();\n break;\n case \"ArrowLeft\":\n if (isValueListActive) {\n event.preventDefault();\n }\n break;\n case \"ArrowRight\":\n if (isCategoryListActive) {\n event.preventDefault();\n }\n break;\n case \"Escape\":\n setInputValue(\"\");\n }\n };\n\n const onValueToggle = (category: QueryInputCategory, value: string) => {\n const newItems = selectedItems.filter(\n (item) => !(item.category === category.name && item.value === value)\n );\n if (newItems.length === selectedItems.length) {\n newItems.push({ category: category.name, value });\n }\n onSelectedItemsChange(newItems);\n };\n\n return {\n queryInputBodyRef,\n queryInputProps: {\n onFocus,\n onBlur,\n },\n queryInputBodyProps: {\n inputRef: inputRef,\n disabled: props.disabled,\n selectedItems,\n onFocus,\n onBlur,\n onInputClick,\n onInputFocus,\n onInputBlur,\n onInputClear,\n inputValue,\n onInputChange,\n onSelectedItemsChange,\n onKeyDown,\n isFocused,\n booleanOperator,\n onBooleanOperatorChange,\n },\n valueSelectorProps: {\n isOpen: popperStatus.isOpen,\n categories: props.categories,\n selectedCategory,\n selectedItems,\n onValueToggle,\n onSearchListChange: onSelectedItemsChange,\n anchorElement: bodyRef.current,\n width: bodyWidth,\n onSelectedCategoryChange,\n popperRef,\n inputValue,\n highlightedIndex,\n visibleCategories: searchListItems,\n highlightedCategoryIndex,\n highlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedValueIndex,\n setHighlightedIndex,\n },\n };\n}\n\nfunction filterCategories(\n categories: QueryInputCategory[],\n inputValue?: string\n): [QueryInputCategory[], Array<QueryInputCategory \| string>] {\n // Note: if there is no input value, this List would not be display\n if (!inputValue) {\n return [categories, []];\n }\n const query = inputValue.toUpperCase();\n const visibleCategories: QueryInputCategory[] = [];\n const indexPositions: Array<QueryInputCategory \| string> = [];\n for (const c of categories) {\n const values = c.values.filter((v) => v.toUpperCase().includes(query));\n if (values.length > 0) {\n const queryInputCategory = {\n name: c.name,\n values,\n };\n visibleCategories.push(queryInputCategory);\n indexPositions.push(queryInputCategory, ...values);\n }\n }\n return [visibleCategories, indexPositions];\n}\n\nfunction nextSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory \| string>\n) {\n const nextIndex = index + 1;\n // Note: allow 1 for the extra ListItem we append to end of List\n if (nextIndex === indexPositions.length + 1) {\n return index;\n } else if (nextIndex === indexPositions.length) {\n return nextIndex;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex + 1;\n }\n}\n\nfunction prevSearchItemIndex(\n index: number,\n indexPositions: Array<QueryInputCategory \| string>\n) {\n const nextIndex = index - 1;\n if (nextIndex === 0) {\n return index;\n } else if (typeof indexPositions[nextIndex] === \"string\") {\n return nextIndex;\n } else {\n return nextIndex - 1;\n }\n}\n"],"names":["searchListItems"],"mappings":"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"}

package/dist-es/packages/lab/src/responsive/useOverflow.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { useRef, useCallback } from 'react';
 import { popNextItemByPriority, notOverflowed, isOverflowed, allExceptOverflowIndicator, getOverflowIndicator, measureContainerOverflow, addAll } from './overflowUtils.js';
 import { partition } from '../utils/partition.js';
 import { useIdMemo } from '@salt-ds/core';
+import '../utils/useFloatingUI.js';
 const NO_OVERFLOW_INDICATOR = { size: 0 };
 const getPriority = (item) => item.priority;

package/dist-es/packages/lab/src/responsive/useOverflow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverflow.js","sources":["../src/responsive/useOverflow.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport {\n addAll,\n allExceptOverflowIndicator,\n getOverflowIndicator,\n isOverflowed,\n measureContainerOverflow,\n notOverflowed,\n popNextItemByPriority,\n} from \"./overflowUtils\";\nimport {\n OverflowItem,\n OverflowHookProps,\n OverflowHookResult,\n} from \"./overflowTypes\";\nimport { partition } from \"../utils\";\nimport { useIdMemo } from \"@salt-ds/core\";\n\nconst NO_OVERFLOW_INDICATOR = { size: 0 };\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst popNextOverflowedItem = (items: OverflowItem[]) => {\n const minPriority = Math.min(...items.map(getPriority));\n for (let i = 0; i < items.length; i++) {\n if (!items[i].isOverflowIndicator && items[i].priority === minPriority) {\n return items.splice(i, 1)[0];\n }\n }\n return null;\n};\n\nexport const useOverflow = ({\n collectionHook: { dispatch },\n id: idProp,\n label = \"Toolbar\",\n overflowItemsRef,\n overflowContainerRef,\n orientation,\n}: OverflowHookProps): OverflowHookResult => {\n // We need to detect when we enter/exit the overflowed state\n const innerContainerSizeRef = useRef(0);\n const overflowIndicatorSize = useRef(0);\n const id = useIdMemo(idProp);\n\n const setContainerMinSize = useCallback(\n (size?: number) => {\n if (overflowContainerRef.current) {\n const isHorizontal = orientation === \"horizontal\";\n if (size === undefined) {\n const dimension = isHorizontal ? \"width\" : \"height\";\n ({ [dimension]: size } =\n overflowContainerRef.current.getBoundingClientRect());\n }\n if (typeof size === \"number\") {\n const styleDimension = isHorizontal ? \"minWidth\" : \"minHeight\";\n overflowContainerRef.current.style[styleDimension] = `${size}px`;\n }\n }\n },\n [orientation, overflowContainerRef]\n );\n\n const getAllOverflowedItems = useCallback(\n (renderedSize: number, availableSpace: number) => {\n const { current: allItems } = overflowItemsRef;\n const overflowedItems: OverflowItem[] = [];\n const items = allItems.slice();\n while (renderedSize > availableSpace) {\n const overflowedItem = popNextItemByPriority(items);\n if (overflowedItem === null) {\n break;\n }\n // eslint-disable-next-line no-param-reassign\n renderedSize -= overflowedItem.size;\n overflowedItems.push({\n ...overflowedItem,\n overflowed: true,\n });\n }\n return overflowedItems;\n },\n [overflowItemsRef]\n );\n\n const getOverflowedItems = useCallback(\n (visibleContentSize: number, containerSize: number) => {\n const newlyOverflowedItems = [];\n const { current: managedItems } = overflowItemsRef;\n const visibleItems = managedItems.filter(notOverflowed);\n while (visibleContentSize > containerSize) {\n const overflowedItem = popNextItemByPriority(visibleItems);\n if (overflowedItem === null) {\n // unable to overflow, all items are collapsed, this is our minimum width,\n // enforce it ...\n // TODO what if density changes\n // TODO probably not right, now we overflow even collapsed items, min width should be\n // overflow indicator width plus width of any non-overflowable items\n // setContainerMinSize(visibleContentSize);\n break;\n }\n visibleContentSize -= overflowedItem.size;\n newlyOverflowedItems.push({\n ...overflowedItem,\n overflowed: true,\n });\n }\n return newlyOverflowedItems;\n },\n [overflowItemsRef]\n );\n\n const getReinstatedItems = useCallback(\n (containerSize: number): [number, OverflowItem[]] => {\n const reinstatedItems: OverflowItem[] = [];\n const { current: managedItems } = overflowItemsRef;\n\n const [overflowedItems, visibleItems] = partition(\n managedItems,\n isOverflowed\n );\n const overflowCount = overflowedItems.length;\n // TODO calculate this without using fullWidth if we have OVERFLOW\n // Need a loop here where we first remove OVERFLOW, then potentially remove\n // COLLAPSE too\n // We want to re-introduce overflowed items before we start to restore collapsed items\n // When we are dealing with overflowed items, we just use the current width of collapsed items.\n let visibleContentSize = visibleItems.reduce(\n allExceptOverflowIndicator,\n 0\n );\n let diff = containerSize - visibleContentSize;\n const { size: overflowSize = 0 } =\n getOverflowIndicator(managedItems) \|\| NO_OVERFLOW_INDICATOR;\n const totalOverflowedSize = overflowedItems.reduce(\n (sum, item) => sum + item.size,\n 0\n );\n // It is important to make this check first, because the overflow indicator may have larger size than\n // individual overflowed item(s).\n if (totalOverflowedSize <= diff) {\n reinstatedItems.push(\n ...overflowedItems.map((item) => ({ ...item, overflowed: false }))\n );\n } else {\n while (overflowedItems.length > 0) {\n const nextItem = popNextOverflowedItem(overflowedItems);\n if (nextItem && diff >= nextItem.size) {\n // we have enough free space to reinstate this overflowed item\n // we can only ignore the width of overflow Indicator if either there is only one remaining\n // overflow item (so overflowIndicator will be removed) or diff is big enough to accommodate\n // the overflow Ind.\n if (\n overflowedItems.length === 0 \|\|\n diff >= nextItem.size + overflowSize\n ) {\n visibleContentSize += nextItem.size;\n diff = diff - nextItem.size;\n reinstatedItems.push({\n ...nextItem,\n overflowed: false,\n });\n } else {\n break;\n }\n } else {\n break;\n }\n }\n }\n return [overflowCount, reinstatedItems];\n },\n []\n );\n\n const resetMeasurements = useCallback(\n (isOverflowing: boolean, innerContainerSize: number) => {\n if (isOverflowing) {\n const { current: managedItems } = overflowItemsRef;\n const renderedSize = managedItems.reduce(allExceptOverflowIndicator, 0);\n const overflowIndicator = managedItems.find(\n (i) => i.isOverflowIndicator\n );\n if (\n overflowIndicator &&\n overflowIndicator.size !== overflowIndicatorSize.current\n ) {\n overflowIndicatorSize.current = overflowIndicator.size;\n setContainerMinSize(overflowIndicator.size);\n }\n const existingOverflow = managedItems.filter(isOverflowed);\n const updates = getAllOverflowedItems(\n renderedSize,\n innerContainerSize - overflowIndicatorSize.current\n );\n\n existingOverflow.forEach((item) => {\n if (!updates.some((i) => i.index === item.index)) {\n updates.push({\n ...item,\n overflowed: false,\n });\n }\n });\n\n const overflowAdded = !existingOverflow.length && updates.length;\n\n if (updates.length > 0) {\n if (overflowAdded) {\n dispatch({\n type: \"update-items-add-overflow-indicator\",\n overflowItems: updates,\n overflowItem: {\n fullSize: null,\n id: `${id}-overflow-indicator`,\n index: managedItems.length,\n isOverflowIndicator: true,\n label: \"Overflow Menu\",\n priority: 1,\n source: {},\n } as OverflowItem<\"source\">,\n });\n } else {\n dispatch({\n type: \"update-items\",\n overflowItems: updates,\n });\n }\n return true;\n } else {\n return false;\n }\n }\n },\n [dispatch, getAllOverflowedItems, id, overflowItemsRef, setContainerMinSize]\n );\n\n const updateOverflow = useCallback(\n (containerSize: number, renderedSize: number) => {\n if (containerSize < renderedSize) {\n const overflowItems = getOverflowedItems(renderedSize, containerSize);\n if (overflowItems.length) {\n dispatch({\n type: \"update-items\",\n overflowItems,\n });\n }\n }\n },\n [dispatch, getOverflowedItems]\n );\n\n const removeOverflow = useCallback(\n (containerSize: number) => {\n const [overflowCount, reinstated] = getReinstatedItems(containerSize);\n if (reinstated.length) {\n if (overflowCount === reinstated.length) {\n dispatch({\n type: \"update-items-remove-overflow-indicator\",\n overflowItems: reinstated,\n });\n } else {\n dispatch({\n type: \"update-items\",\n overflowItems: reinstated,\n });\n }\n }\n },\n [dispatch, getReinstatedItems]\n );\n\n const handleResize = useCallback(\n (size: number, containerHasGrown?: boolean) => {\n const { current: managedItems } = overflowItemsRef;\n const wasOverflowing = managedItems.some(\n (item) => item.isOverflowIndicator\n );\n const { isOverflowing } = measureContainerOverflow(\n overflowContainerRef,\n orientation\n );\n\n innerContainerSizeRef.current = size;\n\n if (!wasOverflowing && isOverflowing) {\n // entering overflow\n // TODO if client is not using an overflow indicator, there is nothing to do here,\n // just let nature take its course. How do we know this ?\n // This is when we need to add width to measurements we are tracking\n resetMeasurements(true, size);\n } else if (wasOverflowing && containerHasGrown) {\n // check to see if we can reinstate one or more items, possibly all\n removeOverflow(size);\n } else if (wasOverflowing && isOverflowing) {\n // Note: container must have shrunk\n // still overflowing, possibly more overflowing than before\n const renderedSize = managedItems\n .filter(notOverflowed)\n .reduce(addAll, 0);\n updateOverflow(size, renderedSize);\n }\n },\n [\n orientation,\n overflowContainerRef,\n overflowItemsRef,\n removeOverflow,\n resetMeasurements,\n updateOverflow,\n ]\n );\n\n return {\n onResize: handleResize,\n resetMeasurements,\n };\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"useOverflow.js","sources":["../src/responsive/useOverflow.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\nimport {\n addAll,\n allExceptOverflowIndicator,\n getOverflowIndicator,\n isOverflowed,\n measureContainerOverflow,\n notOverflowed,\n popNextItemByPriority,\n} from \"./overflowUtils\";\nimport {\n OverflowItem,\n OverflowHookProps,\n OverflowHookResult,\n} from \"./overflowTypes\";\nimport { partition } from \"../utils\";\nimport { useIdMemo } from \"@salt-ds/core\";\n\nconst NO_OVERFLOW_INDICATOR = { size: 0 };\n\nconst getPriority = (item: OverflowItem) => item.priority;\n\nconst popNextOverflowedItem = (items: OverflowItem[]) => {\n const minPriority = Math.min(...items.map(getPriority));\n for (let i = 0; i < items.length; i++) {\n if (!items[i].isOverflowIndicator && items[i].priority === minPriority) {\n return items.splice(i, 1)[0];\n }\n }\n return null;\n};\n\nexport const useOverflow = ({\n collectionHook: { dispatch },\n id: idProp,\n label = \"Toolbar\",\n overflowItemsRef,\n overflowContainerRef,\n orientation,\n}: OverflowHookProps): OverflowHookResult => {\n // We need to detect when we enter/exit the overflowed state\n const innerContainerSizeRef = useRef(0);\n const overflowIndicatorSize = useRef(0);\n const id = useIdMemo(idProp);\n\n const setContainerMinSize = useCallback(\n (size?: number) => {\n if (overflowContainerRef.current) {\n const isHorizontal = orientation === \"horizontal\";\n if (size === undefined) {\n const dimension = isHorizontal ? \"width\" : \"height\";\n ({ [dimension]: size } =\n overflowContainerRef.current.getBoundingClientRect());\n }\n if (typeof size === \"number\") {\n const styleDimension = isHorizontal ? \"minWidth\" : \"minHeight\";\n overflowContainerRef.current.style[styleDimension] = `${size}px`;\n }\n }\n },\n [orientation, overflowContainerRef]\n );\n\n const getAllOverflowedItems = useCallback(\n (renderedSize: number, availableSpace: number) => {\n const { current: allItems } = overflowItemsRef;\n const overflowedItems: OverflowItem[] = [];\n const items = allItems.slice();\n while (renderedSize > availableSpace) {\n const overflowedItem = popNextItemByPriority(items);\n if (overflowedItem === null) {\n break;\n }\n // eslint-disable-next-line no-param-reassign\n renderedSize -= overflowedItem.size;\n overflowedItems.push({\n ...overflowedItem,\n overflowed: true,\n });\n }\n return overflowedItems;\n },\n [overflowItemsRef]\n );\n\n const getOverflowedItems = useCallback(\n (visibleContentSize: number, containerSize: number) => {\n const newlyOverflowedItems = [];\n const { current: managedItems } = overflowItemsRef;\n const visibleItems = managedItems.filter(notOverflowed);\n while (visibleContentSize > containerSize) {\n const overflowedItem = popNextItemByPriority(visibleItems);\n if (overflowedItem === null) {\n // unable to overflow, all items are collapsed, this is our minimum width,\n // enforce it ...\n // TODO what if density changes\n // TODO probably not right, now we overflow even collapsed items, min width should be\n // overflow indicator width plus width of any non-overflowable items\n // setContainerMinSize(visibleContentSize);\n break;\n }\n visibleContentSize -= overflowedItem.size;\n newlyOverflowedItems.push({\n ...overflowedItem,\n overflowed: true,\n });\n }\n return newlyOverflowedItems;\n },\n [overflowItemsRef]\n );\n\n const getReinstatedItems = useCallback(\n (containerSize: number): [number, OverflowItem[]] => {\n const reinstatedItems: OverflowItem[] = [];\n const { current: managedItems } = overflowItemsRef;\n\n const [overflowedItems, visibleItems] = partition(\n managedItems,\n isOverflowed\n );\n const overflowCount = overflowedItems.length;\n // TODO calculate this without using fullWidth if we have OVERFLOW\n // Need a loop here where we first remove OVERFLOW, then potentially remove\n // COLLAPSE too\n // We want to re-introduce overflowed items before we start to restore collapsed items\n // When we are dealing with overflowed items, we just use the current width of collapsed items.\n let visibleContentSize = visibleItems.reduce(\n allExceptOverflowIndicator,\n 0\n );\n let diff = containerSize - visibleContentSize;\n const { size: overflowSize = 0 } =\n getOverflowIndicator(managedItems) \|\| NO_OVERFLOW_INDICATOR;\n const totalOverflowedSize = overflowedItems.reduce(\n (sum, item) => sum + item.size,\n 0\n );\n // It is important to make this check first, because the overflow indicator may have larger size than\n // individual overflowed item(s).\n if (totalOverflowedSize <= diff) {\n reinstatedItems.push(\n ...overflowedItems.map((item) => ({ ...item, overflowed: false }))\n );\n } else {\n while (overflowedItems.length > 0) {\n const nextItem = popNextOverflowedItem(overflowedItems);\n if (nextItem && diff >= nextItem.size) {\n // we have enough free space to reinstate this overflowed item\n // we can only ignore the width of overflow Indicator if either there is only one remaining\n // overflow item (so overflowIndicator will be removed) or diff is big enough to accommodate\n // the overflow Ind.\n if (\n overflowedItems.length === 0 \|\|\n diff >= nextItem.size + overflowSize\n ) {\n visibleContentSize += nextItem.size;\n diff = diff - nextItem.size;\n reinstatedItems.push({\n ...nextItem,\n overflowed: false,\n });\n } else {\n break;\n }\n } else {\n break;\n }\n }\n }\n return [overflowCount, reinstatedItems];\n },\n []\n );\n\n const resetMeasurements = useCallback(\n (isOverflowing: boolean, innerContainerSize: number) => {\n if (isOverflowing) {\n const { current: managedItems } = overflowItemsRef;\n const renderedSize = managedItems.reduce(allExceptOverflowIndicator, 0);\n const overflowIndicator = managedItems.find(\n (i) => i.isOverflowIndicator\n );\n if (\n overflowIndicator &&\n overflowIndicator.size !== overflowIndicatorSize.current\n ) {\n overflowIndicatorSize.current = overflowIndicator.size;\n setContainerMinSize(overflowIndicator.size);\n }\n const existingOverflow = managedItems.filter(isOverflowed);\n const updates = getAllOverflowedItems(\n renderedSize,\n innerContainerSize - overflowIndicatorSize.current\n );\n\n existingOverflow.forEach((item) => {\n if (!updates.some((i) => i.index === item.index)) {\n updates.push({\n ...item,\n overflowed: false,\n });\n }\n });\n\n const overflowAdded = !existingOverflow.length && updates.length;\n\n if (updates.length > 0) {\n if (overflowAdded) {\n dispatch({\n type: \"update-items-add-overflow-indicator\",\n overflowItems: updates,\n overflowItem: {\n fullSize: null,\n id: `${id}-overflow-indicator`,\n index: managedItems.length,\n isOverflowIndicator: true,\n label: \"Overflow Menu\",\n priority: 1,\n source: {},\n } as OverflowItem<\"source\">,\n });\n } else {\n dispatch({\n type: \"update-items\",\n overflowItems: updates,\n });\n }\n return true;\n } else {\n return false;\n }\n }\n },\n [dispatch, getAllOverflowedItems, id, overflowItemsRef, setContainerMinSize]\n );\n\n const updateOverflow = useCallback(\n (containerSize: number, renderedSize: number) => {\n if (containerSize < renderedSize) {\n const overflowItems = getOverflowedItems(renderedSize, containerSize);\n if (overflowItems.length) {\n dispatch({\n type: \"update-items\",\n overflowItems,\n });\n }\n }\n },\n [dispatch, getOverflowedItems]\n );\n\n const removeOverflow = useCallback(\n (containerSize: number) => {\n const [overflowCount, reinstated] = getReinstatedItems(containerSize);\n if (reinstated.length) {\n if (overflowCount === reinstated.length) {\n dispatch({\n type: \"update-items-remove-overflow-indicator\",\n overflowItems: reinstated,\n });\n } else {\n dispatch({\n type: \"update-items\",\n overflowItems: reinstated,\n });\n }\n }\n },\n [dispatch, getReinstatedItems]\n );\n\n const handleResize = useCallback(\n (size: number, containerHasGrown?: boolean) => {\n const { current: managedItems } = overflowItemsRef;\n const wasOverflowing = managedItems.some(\n (item) => item.isOverflowIndicator\n );\n const { isOverflowing } = measureContainerOverflow(\n overflowContainerRef,\n orientation\n );\n\n innerContainerSizeRef.current = size;\n\n if (!wasOverflowing && isOverflowing) {\n // entering overflow\n // TODO if client is not using an overflow indicator, there is nothing to do here,\n // just let nature take its course. How do we know this ?\n // This is when we need to add width to measurements we are tracking\n resetMeasurements(true, size);\n } else if (wasOverflowing && containerHasGrown) {\n // check to see if we can reinstate one or more items, possibly all\n removeOverflow(size);\n } else if (wasOverflowing && isOverflowing) {\n // Note: container must have shrunk\n // still overflowing, possibly more overflowing than before\n const renderedSize = managedItems\n .filter(notOverflowed)\n .reduce(addAll, 0);\n updateOverflow(size, renderedSize);\n }\n },\n [\n orientation,\n overflowContainerRef,\n overflowItemsRef,\n removeOverflow,\n resetMeasurements,\n updateOverflow,\n ]\n );\n\n return {\n onResize: handleResize,\n resetMeasurements,\n };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/slider/internal/SliderHandle.js CHANGED Viewed

@@ -1,39 +1,30 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { makePrefixer } from '@salt-ds/core';
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Tooltip } from '@salt-ds/core';
 import { clsx } from 'clsx';
 import { getSliderAriaLabel } from './utils.js';
-import { Tooltip } from '../../tooltip/Tooltip.js';
-import '../../tooltip/TooltipContext.js';
-import { useTooltip } from '../../tooltip/useTooltip.js';
 import '../Slider.css.js';
 const withBaseName = makePrefixer("saltSliderHandle");
 function SliderHandle(props) {
   const { min, max, value, disabled, valueLength, index, style } = props;
-  const { getTriggerProps, getTooltipProps } = useTooltip({ placement: "top" });
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        ...getTriggerProps({
-          className: clsx(withBaseName(), {
-            [withBaseName("min")]: value === min,
-            [withBaseName("max")]: value === max
-          }),
-          style,
-          role: "slider",
-          "aria-valuemin": min,
-          "aria-valuemax": max,
-          "aria-valuenow": value,
-          "aria-disabled": disabled,
-          "aria-label": getSliderAriaLabel(valueLength, index),
-          tabIndex: 0
-        }),
-        "data-handle-index": index
+  return /* @__PURE__ */ jsx(Tooltip, {
+    content: value,
+    placement: "top",
+    children: /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), {
+        [withBaseName("min")]: value === min,
+        [withBaseName("max")]: value === max
       }),
-      /* @__PURE__ */ jsx(Tooltip, {
-        ...getTooltipProps({ title: `${value}`, disablePortal: true })
-      })
-    ]
+      style,
+      role: "slider",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-disabled": disabled,
+      "aria-label": getSliderAriaLabel(valueLength, index),
+      tabIndex: 0,
+      "data-handle-index": index
+    })
   });
 }

package/dist-es/packages/lab/src/slider/internal/SliderHandle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderHandle.js","sources":["../src/slider/internal/SliderHandle.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { CSSProperties } from \"react\";\nimport { getSliderAriaLabel } from \"./utils\";\~~nimport { Tooltip, useTooltip } from \"../../tooltip\";\~~n\nimport \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderHandle\");\n\nexport interface SliderHandleProps {\n min: number;\n max: number;\n value: number;\n index: number;\n disabled: boolean;\n valueLength: number;\n style: CSSProperties;\n}\n\nexport function SliderHandle(props: SliderHandleProps): JSX.Element {\n const { min, max, value, disabled, valueLength, index, style } = props;\n\n ~~const~~ { ~~getTriggerProps, getTooltipProps }~~ = ~~useTooltip(~~{ placement~~: \~~"top\" ~~});\~~n~~\n return (\n <>\n~~ <div\n {~~...getTriggerProps<\"div\">({\n className:~~ clsx(withBaseName(), {\n [withBaseName(\"min\")]: value === min,\n [withBaseName(\"max\")]: value === max,\n }),\n style,\n role~~: \~~"slider\",\n \"aria-valuemin\~~": min,\~~n \"aria-valuemax\~~": max,\~~n \"aria-valuenow\~~": value,\~~n \"aria-disabled\~~": disabled,\~~n \"aria-label~~\":~~ getSliderAriaLabel(valueLength, index),\n tabIndex: 0~~,\n~~ })}\n data-handle-index={index}\n />\n <Tooltip\n ~~{...getTooltipProps({ title: `${value}`, disablePortal: true })}\n />\n </>\n~~ );\n}\n"],"names":[],"mappings":"~~;;;;;;;;;AAQA~~,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAY7C,SAAS,aAAa,KAAuC,EAAA;AAClE,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,KAAA,CAAA;AAEjE,~~EAAM~~,~~MAAA~~,~~EAAE~~,~~iBAAiB~~,~~eAAgB~~,EAAA,~~GAAI~~,~~WAAW~~,~~EAAE~~,~~SAAA,EAAW,OAAO,CAAA,CAAA~~;~~AAE5E~~,~~EACE~~,~~uBAAA~~,~~IAAA~~,~~CAAA,QAAA,EAAA~~;AAAA,~~IACE~~,~~QAAA~~,~~EAAA;AAAA~~,~~sBAAC,~~GAAA,CAAA,KAAA,EAAA;AAAA,~~QACE~~,~~GAAG,eAAuB,CAAA;AAAA,UACzB,~~SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,~~YAC9B~~,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,~~YACjC~~,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,~~WAClC~~,CAAA;AAAA,~~UACD~~,KAAA;AAAA,~~UACA~~,~~IAAM~~,EAAA,QAAA;AAAA,~~UACN~~,~~eAAiB~~,EAAA,GAAA;AAAA,~~UACjB~~,~~eAAiB~~,EAAA,GAAA;AAAA,~~UACjB~~,~~eAAiB~~,EAAA,KAAA;AAAA,~~UACjB~~,~~eAAiB~~,EAAA,QAAA;AAAA,~~UACjB~~,YAAA,~~EAAc~~,kBAAmB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,~~UACnD~~,QAAU,EAAA,CAAA;AAAA,~~SACX~~,~~CAAA;AAAA,QACD,~~mBAAmB,EAAA,KAAA;AAAA,~~OACrB~~,CAAA;AAAA,~~sBACC,GAAA,CAAA,OAAA,EAAA;AAAA,QACE,GAAG,gBAAgB,EAAE,KAAA,EAAO,GAAG,KAAS,CAAA,CAAA,EAAA,aAAA,EAAe,MAAM,CAAA;AAAA,OAChE,CAAA;AAAA,KAAA;AAAA,~~GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"SliderHandle.js","sources":["../src/slider/internal/SliderHandle.tsx"],"sourcesContent":["import { makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { CSSProperties } from \"react\";\nimport { getSliderAriaLabel } from \"./utils\";\n\nimport \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderHandle\");\n\nexport interface SliderHandleProps {\n min: number;\n max: number;\n value: number;\n index: number;\n disabled: boolean;\n valueLength: number;\n style: CSSProperties;\n}\n\nexport function SliderHandle(props: SliderHandleProps): JSX.Element {\n const { min, max, value, disabled, valueLength, index, style } = props;\n\n return (\n <Tooltip content={value} placement=\"top\">\n <div\n className={clsx(withBaseName(), {\n [withBaseName(\"min\")]: value === min,\n [withBaseName(\"max\")]: value === max,\n })}\n style={style}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n aria-disabled={disabled}\n aria-label={getSliderAriaLabel(valueLength, index)}\n tabIndex={0}\n data-handle-index={index}\n />\n </Tooltip>\n );\n}\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAY7C,SAAS,aAAa,KAAuC,EAAA;AAClE,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,KAAA,CAAA;AAEjE,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,OAAS,EAAA,KAAA;AAAA,IAAO,SAAU,EAAA,KAAA;AAAA,IACjC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,QACjC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,OAClC,CAAA;AAAA,MACD,KAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,KAAA;AAAA,MACf,eAAe,EAAA,QAAA;AAAA,MACf,YAAA,EAAY,kBAAmB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,MACjD,QAAU,EAAA,CAAA;AAAA,MACV,mBAAmB,EAAA,KAAA;AAAA,KACrB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/tabs/Tabstrip.js CHANGED Viewed

@@ -1,21 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { forwardRef, useRef, useState, useCallback, useImperativeHandle, createElement } from 'react';
-import { makePrefixer, useIdMemo, useIsomorphicLayoutEffect, Button } from '@salt-ds/core';
+import { makePrefixer, useIdMemo, useIsomorphicLayoutEffect, Tooltip, Button } from '@salt-ds/core';
 import { OverflowMenuIcon, AddIcon } from '@salt-ds/icons';
 import { clsx } from 'clsx';
 import '../dropdown/DropdownBase.js';
 import '../dropdown/DropdownButton.js';
 import { Dropdown } from '../dropdown/Dropdown.js';
 import '../responsive/useResizeObserver.js';
+import '../utils/useFloatingUI.js';
 import { useOverflowCollectionItems } from '../responsive/useOverflowCollectionItems.js';
 import { useOverflowLayout } from '../responsive/useOverflowLayout.js';
 import '../form-field-context/FormFieldContext.js';
 import { Tab } from './Tab.js';
 import { TabActivationIndicator } from './TabActivationIndicator.js';
 import { useTabstrip } from './useTabstrip.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
 import './Tabstrip.css.js';
 import './ThemeTabstrip.css.js';
@@ -134,7 +132,6 @@ const Tabstrip = forwardRef(function Tabstrip2({
       switchOverflowPriorities
     ]
   );
-  const { getTriggerProps, getTooltipProps } = useTooltip({});
   const {
     activeTabIndex,
     activateTab,
@@ -286,49 +283,42 @@ const Tabstrip = forwardRef(function Tabstrip2({
     );
     const [injectedItem] = collectionHook.data.filter((i) => i.isInjectedItem);
     if (overflowIndicator) {
-      const triggerProps = getTriggerProps();
       content.push(
-        /* @__PURE__ */ jsx(Dropdown, {
-          className: clsx(withBaseName("overflowMenu"), {
-            [withBaseName("overflowMenu-open")]: showOverflow
-          }),
-          ListProps: {
-            className: clsx({
-              [withBaseName("overflowMenu-dropTarget")]: tabstripHook.revealOverflowedItems
-            })
-          },
-          "data-overflow-indicator": true,
-          "data-priority": 0,
-          id: overflowIndicator.id,
-          isOpen: showOverflow,
-          onOpenChange: handleOverflowMenuOpen,
-          onKeyDown: handleKeydownOverflowMenu,
-          onSelectionChange: handleOverflowSelectionChange,
-          placement: "bottom-end",
-          source: overflowedItems,
-          selected: null,
-          triggerComponent: /* @__PURE__ */ jsx(Button, {
-            ...triggerProps,
-            "aria-label": `Tabs overflow menu ${overflowCount} item${overflowCount === 1 ? "" : "s"}`,
-            variant: "secondary",
-            tabIndex: -1,
-            children: /* @__PURE__ */ jsx(OverflowMenuIcon, {})
-          }),
-          width: "auto"
-        }, "overflow")
-      );
-      if (showTooltip) {
-        content.push(
-          /* @__PURE__ */ createElement(Tooltip, {
-            ...getTooltipProps({
-              title: "Active Tab cannot be moved into overflow list",
-              open: true,
-              status: "warning"
+        /* @__PURE__ */ jsx(Tooltip, {
+          content: "Active Tab cannot be moved into overflow list",
+          open: true,
+          disabled: !showTooltip,
+          status: "warning",
+          hideArrow: true,
+          children: /* @__PURE__ */ jsx(Dropdown, {
+            className: clsx(withBaseName("overflowMenu"), {
+              [withBaseName("overflowMenu-open")]: showOverflow
             }),
-            key: "tooltip"
-          })
-        );
-      }
+            ListProps: {
+              className: clsx({
+                [withBaseName("overflowMenu-dropTarget")]: tabstripHook.revealOverflowedItems
+              })
+            },
+            "data-overflow-indicator": true,
+            "data-priority": 0,
+            id: overflowIndicator.id,
+            isOpen: showOverflow,
+            onOpenChange: handleOverflowMenuOpen,
+            onKeyDown: handleKeydownOverflowMenu,
+            onSelectionChange: handleOverflowSelectionChange,
+            placement: "bottom-end",
+            source: overflowedItems,
+            selected: null,
+            triggerComponent: /* @__PURE__ */ jsx(Button, {
+              "aria-label": `Tabs overflow menu ${overflowCount} item${overflowCount === 1 ? "" : "s"}`,
+              variant: "secondary",
+              tabIndex: -1,
+              children: /* @__PURE__ */ jsx(OverflowMenuIcon, {})
+            }),
+            width: "auto"
+          }, "overflow")
+        }, "tooltip")
+      );
     }
     if (injectedItem) {
       content.push(