@vuu-ui/vuu-ui-controls 0.8.83 → 0.8.84
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.
- package/cjs/column-picker/ColumnPicker.css.js +6 -0
- package/cjs/column-picker/ColumnPicker.css.js.map +1 -0
- package/cjs/column-picker/ColumnPicker.js +9 -2
- package/cjs/column-picker/ColumnPicker.js.map +1 -1
- package/cjs/vuu-typeahead-input/useVuuTypeahead.js +2 -0
- package/cjs/vuu-typeahead-input/useVuuTypeahead.js.map +1 -1
- package/esm/column-picker/ColumnPicker.css.js +4 -0
- package/esm/column-picker/ColumnPicker.css.js.map +1 -0
- package/esm/column-picker/ColumnPicker.js +9 -2
- package/esm/column-picker/ColumnPicker.js.map +1 -1
- package/esm/vuu-typeahead-input/useVuuTypeahead.js +2 -0
- package/esm/vuu-typeahead-input/useVuuTypeahead.js.map +1 -1
- package/package.json +7 -7
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColumnPicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var react = require('@floating-ui/react');
|
|
5
5
|
var core = require('@salt-ds/core');
|
|
6
|
+
var styles = require('@salt-ds/styles');
|
|
7
|
+
var window = require('@salt-ds/window');
|
|
6
8
|
var cx = require('clsx');
|
|
7
9
|
var React = require('react');
|
|
8
|
-
require('@salt-ds/styles');
|
|
9
|
-
require('@salt-ds/window');
|
|
10
10
|
var IconButton = require('../icon-button/IconButton.js');
|
|
11
11
|
var ColumnSearch = require('./ColumnSearch.js');
|
|
12
|
+
var ColumnPicker$1 = require('./ColumnPicker.css.js');
|
|
12
13
|
|
|
13
14
|
const classBase = "vuuColumnPicker";
|
|
14
15
|
const FloatingColumnSearch = React.forwardRef(function FloatingColumnSearch2(props, ref) {
|
|
@@ -41,6 +42,12 @@ const ColumnPicker = React.forwardRef(
|
|
|
41
42
|
selected,
|
|
42
43
|
...htmlAttributes
|
|
43
44
|
}, forwardedRef) {
|
|
45
|
+
const targetWindow = window.useWindow();
|
|
46
|
+
styles.useComponentCssInjection({
|
|
47
|
+
testId: "vuu-column-picker",
|
|
48
|
+
css: ColumnPicker$1,
|
|
49
|
+
window: targetWindow
|
|
50
|
+
});
|
|
44
51
|
const [open, setOpen] = React.useState(false);
|
|
45
52
|
const listId = core.useIdMemo();
|
|
46
53
|
const { context, x, y, strategy, elements, floating, reference } = core.useFloatingUI({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n flip,\n size,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n FloatingComponentProps,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useIdMemo,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n HTMLDivElement,\n FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n const { children, className, collapsed, open, ...rest } = props;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n return (\n <FloatingComponent\n className={cx(\n classBase,\n {\n [`${classBase}-collapsed`]: collapsed,\n },\n className
|
|
1
|
+
{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n flip,\n size,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n FloatingComponentProps,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n HTMLDivElement,\n FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n const { children, className, collapsed, open, ...rest } = props;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n return (\n <FloatingComponent\n className={cx(\n classBase,\n {\n [`${classBase}-collapsed`]: collapsed,\n },\n className,\n )}\n role=\"listbox\"\n open={open}\n {...rest}\n ref={ref}\n >\n {children}\n </FloatingComponent>\n );\n});\n\nexport interface ColumnPickerProps\n extends Omit<IconButtonProps, \"icon\">,\n Pick<ColumnSearchProps, \"columns\" | \"onSelectionChange\" | \"selected\"> {\n icon?: string;\n iconSize?: number;\n}\n\nexport const ColumnPicker = forwardRef<HTMLButtonElement, ColumnPickerProps>(\n function ColumnPicker(\n {\n columns,\n icon = \"add\",\n iconSize,\n onSelectionChange,\n selected,\n ...htmlAttributes\n },\n forwardedRef,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-picker\",\n css: columnPickerCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n\n const listId = useIdMemo();\n const { context, x, y, strategy, elements, floating, reference } =\n useFloatingUI({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n strategy: \"fixed\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleButtonClick = () => {\n setOpen((isOpen) => !isOpen);\n };\n\n const forkedRef = useForkRef<HTMLButtonElement>(reference, forwardedRef);\n\n const handleChange = () => {\n console.log(\"handleChange\");\n };\n const handleMoveListItem = () => {\n console.log(\"handleMoveListItem\");\n };\n\n return (\n <>\n <IconButton\n {...htmlAttributes}\n {...getReferenceProps()}\n icon={icon}\n size={iconSize}\n onClick={handleButtonClick}\n ref={forkedRef}\n variant=\"secondary\"\n />\n <FloatingColumnSearch\n {...getFloatingProps()}\n open={open}\n collapsed={!open}\n id={listId}\n left={x}\n position={strategy}\n ref={floating}\n top={y}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n <ColumnSearch\n columns={columns}\n onChange={handleChange}\n onMoveListItem={handleMoveListItem}\n onSelectionChange={onSelectionChange}\n selected={selected}\n style={{ width: 220, height: 300 }}\n />\n </FloatingColumnSearch>\n </>\n );\n },\n);\n"],"names":["forwardRef","FloatingColumnSearch","useFloatingComponent","jsx","ColumnPicker","useWindow","useComponentCssInjection","columnPickerCss","useState","useIdMemo","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","useForkRef","jsxs","Fragment","IconButton","ColumnSearch"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVuuTypeahead.js","sources":["../../src/vuu-typeahead-input/useVuuTypeahead.ts"],"sourcesContent":["import { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { dispatchKeyboardEvent, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n RefCallback,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuTypeaheadInputProps } from \"./VuuTypeaheadInput\";\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport type VuuTypeaheadInputHookProps = Pick<\n VuuTypeaheadInputProps,\n \"column\" | \"onCommit\" | \"suggestionProvider\" | \"table\"\n>;\n\nexport const useVuuTypeaheadInput = ({\n column,\n onCommit,\n suggestionProvider,\n table,\n}: VuuTypeaheadInputHookProps) => {\n const [value, setValue] = useState(\"\");\n const [open, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n const getSuggestions = suggestionProvider();\n\n const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n rootRef.current = el;\n }, []);\n\n useEffect(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n if (value) {\n const params: TypeaheadParams = value\n ? [vuuTable, column, value]\n : [vuuTable, column];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions.length === 0 && value) {\n setTypeaheadValues(NO_DATA_MATCH);\n } else {\n setTypeaheadValues(suggestions);\n }\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n } else {\n setTypeaheadValues([]);\n }\n }\n }, [table, column, getSuggestions, value]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {\n const { value: newValue } = evt.target;\n\n if (value === \"\" && newValue) {\n setOpen(true);\n const input = rootRef.current?.querySelector(\"input\");\n if (input) {\n // This is a workaround for the fact that ComboBox does not automatically\n // highlight first list itemn when items have been populated dynamically.\n // This has been raised as a bug.\n setTimeout(() => {\n dispatchKeyboardEvent(input, \"keydown\", \"ArrowUp\");\n }, 150);\n }\n }\n\n setValue(newValue);\n };\n\n const handleSelectionChange = (\n evt: SyntheticEvent,\n [newSelected]: string[],\n ) => {\n console.log(`useVuuTypeahead handleSelectionChange ${newSelected}`);\n setValue(newSelected);\n onCommit(evt as SyntheticEvent<HTMLInputElement>, newSelected);\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n if (newOpen && value === \"\") {\n // ignore this, don't open dropdown unless user has typed at least one character\n } else {\n setOpen(newOpen);\n }\n };\n\n const inputProps: ComponentPropsWithoutRef<\"input\"> = {\n autoComplete: \"off\",\n };\n\n return {\n inputProps,\n onChange: handleChange,\n onOpenChange: handleOpenChange,\n onSelectionChange: handleSelectionChange,\n open,\n ref: callbackRef,\n typeaheadValues,\n value,\n };\n};\n"],"names":["useState","useRef","useCallback","useEffect","getVuuTable","dispatchKeyboardEvent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useVuuTypeahead.js","sources":["../../src/vuu-typeahead-input/useVuuTypeahead.ts"],"sourcesContent":["import { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { dispatchKeyboardEvent, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n RefCallback,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuTypeaheadInputProps } from \"./VuuTypeaheadInput\";\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport type VuuTypeaheadInputHookProps = Pick<\n VuuTypeaheadInputProps,\n \"column\" | \"onCommit\" | \"suggestionProvider\" | \"table\"\n>;\n\nexport const useVuuTypeaheadInput = ({\n column,\n onCommit,\n suggestionProvider,\n table,\n}: VuuTypeaheadInputHookProps) => {\n const [value, setValue] = useState(\"\");\n const [open, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n const getSuggestions = suggestionProvider();\n\n const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n rootRef.current = el;\n }, []);\n\n useEffect(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n if (value) {\n const params: TypeaheadParams = value\n ? [vuuTable, column, value]\n : [vuuTable, column];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions.length === 0 && value) {\n setTypeaheadValues(NO_DATA_MATCH);\n } else {\n setTypeaheadValues(suggestions);\n }\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n } else {\n setTypeaheadValues([]);\n }\n }\n }, [table, column, getSuggestions, value]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {\n const { value: newValue } = evt.target;\n\n if (value === \"\" && newValue) {\n setOpen(true);\n const input = rootRef.current?.querySelector(\"input\");\n if (input) {\n // This is a workaround for the fact that ComboBox does not automatically\n // highlight first list itemn when items have been populated dynamically.\n // This has been raised as a bug.\n setTimeout(() => {\n dispatchKeyboardEvent(input, \"keydown\", \"ArrowUp\");\n }, 150);\n }\n } else if (newValue === \"\" && value) {\n // treat clear value as a commit event\n onCommit(evt, \"\");\n }\n\n setValue(newValue);\n };\n\n const handleSelectionChange = (\n evt: SyntheticEvent,\n [newSelected]: string[],\n ) => {\n console.log(`useVuuTypeahead handleSelectionChange ${newSelected}`);\n setValue(newSelected);\n onCommit(evt as SyntheticEvent<HTMLInputElement>, newSelected);\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n if (newOpen && value === \"\") {\n // ignore this, don't open dropdown unless user has typed at least one character\n } else {\n setOpen(newOpen);\n }\n };\n\n const inputProps: ComponentPropsWithoutRef<\"input\"> = {\n autoComplete: \"off\",\n };\n\n return {\n inputProps,\n onChange: handleChange,\n onOpenChange: handleOpenChange,\n onSelectionChange: handleSelectionChange,\n open,\n ref: callbackRef,\n typeaheadValues,\n value,\n };\n};\n"],"names":["useState","useRef","useCallback","useEffect","getVuuTable","dispatchKeyboardEvent"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColumnPicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { size, flip, useInteractions, useDismiss, useClick } from '@floating-ui/react';
|
|
3
3
|
import { useFloatingComponent, useIdMemo, useFloatingUI, useForkRef } from '@salt-ds/core';
|
|
4
|
+
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
|
+
import { useWindow } from '@salt-ds/window';
|
|
4
6
|
import cx from 'clsx';
|
|
5
7
|
import { forwardRef, useState } from 'react';
|
|
6
|
-
import '@salt-ds/styles';
|
|
7
|
-
import '@salt-ds/window';
|
|
8
8
|
import { IconButton } from '../icon-button/IconButton.js';
|
|
9
9
|
import { ColumnSearch } from './ColumnSearch.js';
|
|
10
|
+
import columnPickerCss from './ColumnPicker.css.js';
|
|
10
11
|
|
|
11
12
|
const classBase = "vuuColumnPicker";
|
|
12
13
|
const FloatingColumnSearch = forwardRef(function FloatingColumnSearch2(props, ref) {
|
|
@@ -39,6 +40,12 @@ const ColumnPicker = forwardRef(
|
|
|
39
40
|
selected,
|
|
40
41
|
...htmlAttributes
|
|
41
42
|
}, forwardedRef) {
|
|
43
|
+
const targetWindow = useWindow();
|
|
44
|
+
useComponentCssInjection({
|
|
45
|
+
testId: "vuu-column-picker",
|
|
46
|
+
css: columnPickerCss,
|
|
47
|
+
window: targetWindow
|
|
48
|
+
});
|
|
42
49
|
const [open, setOpen] = useState(false);
|
|
43
50
|
const listId = useIdMemo();
|
|
44
51
|
const { context, x, y, strategy, elements, floating, reference } = useFloatingUI({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n flip,\n size,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n FloatingComponentProps,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useIdMemo,\n} from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n HTMLDivElement,\n FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n const { children, className, collapsed, open, ...rest } = props;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n return (\n <FloatingComponent\n className={cx(\n classBase,\n {\n [`${classBase}-collapsed`]: collapsed,\n },\n className
|
|
1
|
+
{"version":3,"file":"ColumnPicker.js","sources":["../../src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import {\n flip,\n size,\n useClick,\n useDismiss,\n useInteractions,\n} from \"@floating-ui/react\";\nimport {\n FloatingComponentProps,\n useFloatingComponent,\n useFloatingUI,\n useForkRef,\n useIdMemo,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cx from \"clsx\";\nimport { forwardRef, useState } from \"react\";\nimport { IconButton, IconButtonProps } from \"../icon-button\";\nimport { ColumnSearch, ColumnSearchProps } from \"./ColumnSearch\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\n\ninterface FloatingColumnSearchProps extends FloatingComponentProps {\n collapsed?: boolean;\n}\n\nconst FloatingColumnSearch = forwardRef<\n HTMLDivElement,\n FloatingColumnSearchProps\n>(function FloatingColumnSearch(props, ref) {\n const { children, className, collapsed, open, ...rest } = props;\n\n const { Component: FloatingComponent } = useFloatingComponent();\n return (\n <FloatingComponent\n className={cx(\n classBase,\n {\n [`${classBase}-collapsed`]: collapsed,\n },\n className,\n )}\n role=\"listbox\"\n open={open}\n {...rest}\n ref={ref}\n >\n {children}\n </FloatingComponent>\n );\n});\n\nexport interface ColumnPickerProps\n extends Omit<IconButtonProps, \"icon\">,\n Pick<ColumnSearchProps, \"columns\" | \"onSelectionChange\" | \"selected\"> {\n icon?: string;\n iconSize?: number;\n}\n\nexport const ColumnPicker = forwardRef<HTMLButtonElement, ColumnPickerProps>(\n function ColumnPicker(\n {\n columns,\n icon = \"add\",\n iconSize,\n onSelectionChange,\n selected,\n ...htmlAttributes\n },\n forwardedRef,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-picker\",\n css: columnPickerCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n\n const listId = useIdMemo();\n const { context, x, y, strategy, elements, floating, reference } =\n useFloatingUI({\n open,\n onOpenChange: setOpen,\n placement: \"bottom-start\",\n strategy: \"fixed\",\n middleware: [\n size({\n apply({ rects, elements, availableHeight }) {\n Object.assign(elements.floating.style, {\n minWidth: `${rects.reference.width}px`,\n maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n });\n },\n }),\n flip({ fallbackStrategy: \"initialPlacement\" }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useDismiss(context),\n useClick(context, { keyboardHandlers: false, toggle: false }),\n ]);\n\n const handleButtonClick = () => {\n setOpen((isOpen) => !isOpen);\n };\n\n const forkedRef = useForkRef<HTMLButtonElement>(reference, forwardedRef);\n\n const handleChange = () => {\n console.log(\"handleChange\");\n };\n const handleMoveListItem = () => {\n console.log(\"handleMoveListItem\");\n };\n\n return (\n <>\n <IconButton\n {...htmlAttributes}\n {...getReferenceProps()}\n icon={icon}\n size={iconSize}\n onClick={handleButtonClick}\n ref={forkedRef}\n variant=\"secondary\"\n />\n <FloatingColumnSearch\n {...getFloatingProps()}\n open={open}\n collapsed={!open}\n id={listId}\n left={x}\n position={strategy}\n ref={floating}\n top={y}\n width={elements.floating?.offsetWidth}\n height={elements.floating?.offsetHeight}\n >\n <ColumnSearch\n columns={columns}\n onChange={handleChange}\n onMoveListItem={handleMoveListItem}\n onSelectionChange={onSelectionChange}\n selected={selected}\n style={{ width: 220, height: 300 }}\n />\n </FloatingColumnSearch>\n </>\n );\n },\n);\n"],"names":["FloatingColumnSearch","ColumnPicker","elements"],"mappings":";;;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAMlB,MAAM,oBAAuB,GAAA,UAAA,CAG3B,SAASA,qBAAAA,CAAqB,OAAO,GAAK,EAAA;AAC1C,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,WAAW,IAAM,EAAA,GAAG,MAAS,GAAA,KAAA,CAAA;AAE1D,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAC9D,EACE,uBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA;AAAA,QACT,SAAA;AAAA,QACA;AAAA,UACE,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,SAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAK,EAAA,SAAA;AAAA,MACL,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,CAAA,CAAA;AASM,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASC,aACP,CAAA;AAAA,IACE,OAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,cAAA;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAA,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEtC,IAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,IAAM,MAAA,EAAE,SAAS,CAAG,EAAA,CAAA,EAAG,UAAU,QAAU,EAAA,QAAA,EAAU,SAAU,EAAA,GAC7D,aAAc,CAAA;AAAA,MACZ,IAAA;AAAA,MACA,YAAc,EAAA,OAAA;AAAA,MACd,SAAW,EAAA,cAAA;AAAA,MACX,QAAU,EAAA,OAAA;AAAA,MACV,UAAY,EAAA;AAAA,QACV,IAAK,CAAA;AAAA,UACH,MAAM,EAAE,KAAA,EAAO,QAAAC,EAAAA,SAAAA,EAAU,iBAAmB,EAAA;AAC1C,YAAO,MAAA,CAAA,MAAA,CAAOA,SAAS,CAAA,QAAA,CAAS,KAAO,EAAA;AAAA,cACrC,QAAU,EAAA,CAAA,EAAG,KAAM,CAAA,SAAA,CAAU,KAAK,CAAA,EAAA,CAAA;AAAA,cAClC,SAAA,EAAW,YAAY,eAAe,CAAA,2FAAA,CAAA;AAAA,aACvC,CAAA,CAAA;AAAA,WACH;AAAA,SACD,CAAA;AAAA,QACD,IAAK,CAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAoB,CAAA;AAAA,OAC/C;AAAA,KACD,CAAA,CAAA;AAEH,IAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,MAC9D,WAAW,OAAO,CAAA;AAAA,MAClB,SAAS,OAAS,EAAA,EAAE,kBAAkB,KAAO,EAAA,MAAA,EAAQ,OAAO,CAAA;AAAA,KAC7D,CAAA,CAAA;AAED,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MAAQ,OAAA,CAAA,CAAC,MAAW,KAAA,CAAC,MAAM,CAAA,CAAA;AAAA,KAC7B,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,UAA8B,CAAA,SAAA,EAAW,YAAY,CAAA,CAAA;AAEvE,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,OAAA,CAAQ,IAAI,cAAc,CAAA,CAAA;AAAA,KAC5B,CAAA;AACA,IAAA,MAAM,qBAAqB,MAAM;AAC/B,MAAA,OAAA,CAAQ,IAAI,oBAAoB,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACE,GAAG,cAAA;AAAA,UACH,GAAG,iBAAkB,EAAA;AAAA,UACtB,IAAA;AAAA,UACA,IAAM,EAAA,QAAA;AAAA,UACN,OAAS,EAAA,iBAAA;AAAA,UACT,GAAK,EAAA,SAAA;AAAA,UACL,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,sBACA,GAAA;AAAA,QAAC,oBAAA;AAAA,QAAA;AAAA,UACE,GAAG,gBAAiB,EAAA;AAAA,UACrB,IAAA;AAAA,UACA,WAAW,CAAC,IAAA;AAAA,UACZ,EAAI,EAAA,MAAA;AAAA,UACJ,IAAM,EAAA,CAAA;AAAA,UACN,QAAU,EAAA,QAAA;AAAA,UACV,GAAK,EAAA,QAAA;AAAA,UACL,GAAK,EAAA,CAAA;AAAA,UACL,KAAA,EAAO,SAAS,QAAU,EAAA,WAAA;AAAA,UAC1B,MAAA,EAAQ,SAAS,QAAU,EAAA,YAAA;AAAA,UAE3B,QAAA,kBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,QAAU,EAAA,YAAA;AAAA,cACV,cAAgB,EAAA,kBAAA;AAAA,cAChB,iBAAA;AAAA,cACA,QAAA;AAAA,cACA,KAAO,EAAA,EAAE,KAAO,EAAA,GAAA,EAAK,QAAQ,GAAI,EAAA;AAAA,aAAA;AAAA,WACnC;AAAA,SAAA;AAAA,OACF;AAAA,KACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVuuTypeahead.js","sources":["../../src/vuu-typeahead-input/useVuuTypeahead.ts"],"sourcesContent":["import { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { dispatchKeyboardEvent, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n RefCallback,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuTypeaheadInputProps } from \"./VuuTypeaheadInput\";\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport type VuuTypeaheadInputHookProps = Pick<\n VuuTypeaheadInputProps,\n \"column\" | \"onCommit\" | \"suggestionProvider\" | \"table\"\n>;\n\nexport const useVuuTypeaheadInput = ({\n column,\n onCommit,\n suggestionProvider,\n table,\n}: VuuTypeaheadInputHookProps) => {\n const [value, setValue] = useState(\"\");\n const [open, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n const getSuggestions = suggestionProvider();\n\n const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n rootRef.current = el;\n }, []);\n\n useEffect(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n if (value) {\n const params: TypeaheadParams = value\n ? [vuuTable, column, value]\n : [vuuTable, column];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions.length === 0 && value) {\n setTypeaheadValues(NO_DATA_MATCH);\n } else {\n setTypeaheadValues(suggestions);\n }\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n } else {\n setTypeaheadValues([]);\n }\n }\n }, [table, column, getSuggestions, value]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {\n const { value: newValue } = evt.target;\n\n if (value === \"\" && newValue) {\n setOpen(true);\n const input = rootRef.current?.querySelector(\"input\");\n if (input) {\n // This is a workaround for the fact that ComboBox does not automatically\n // highlight first list itemn when items have been populated dynamically.\n // This has been raised as a bug.\n setTimeout(() => {\n dispatchKeyboardEvent(input, \"keydown\", \"ArrowUp\");\n }, 150);\n }\n }\n\n setValue(newValue);\n };\n\n const handleSelectionChange = (\n evt: SyntheticEvent,\n [newSelected]: string[],\n ) => {\n console.log(`useVuuTypeahead handleSelectionChange ${newSelected}`);\n setValue(newSelected);\n onCommit(evt as SyntheticEvent<HTMLInputElement>, newSelected);\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n if (newOpen && value === \"\") {\n // ignore this, don't open dropdown unless user has typed at least one character\n } else {\n setOpen(newOpen);\n }\n };\n\n const inputProps: ComponentPropsWithoutRef<\"input\"> = {\n autoComplete: \"off\",\n };\n\n return {\n inputProps,\n onChange: handleChange,\n onOpenChange: handleOpenChange,\n onSelectionChange: handleSelectionChange,\n open,\n ref: callbackRef,\n typeaheadValues,\n value,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useVuuTypeahead.js","sources":["../../src/vuu-typeahead-input/useVuuTypeahead.ts"],"sourcesContent":["import { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { dispatchKeyboardEvent, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport {\n ChangeEventHandler,\n ComponentPropsWithoutRef,\n RefCallback,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuTypeaheadInputProps } from \"./VuuTypeaheadInput\";\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport type VuuTypeaheadInputHookProps = Pick<\n VuuTypeaheadInputProps,\n \"column\" | \"onCommit\" | \"suggestionProvider\" | \"table\"\n>;\n\nexport const useVuuTypeaheadInput = ({\n column,\n onCommit,\n suggestionProvider,\n table,\n}: VuuTypeaheadInputHookProps) => {\n const [value, setValue] = useState(\"\");\n const [open, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n const getSuggestions = suggestionProvider();\n\n const callbackRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n rootRef.current = el;\n }, []);\n\n useEffect(() => {\n if (table) {\n const vuuTable = getVuuTable(table);\n if (value) {\n const params: TypeaheadParams = value\n ? [vuuTable, column, value]\n : [vuuTable, column];\n getSuggestions(params)\n .then((suggestions) => {\n if (suggestions.length === 0 && value) {\n setTypeaheadValues(NO_DATA_MATCH);\n } else {\n setTypeaheadValues(suggestions);\n }\n })\n .catch((err) => {\n console.error(\"Error getting suggestions\", err);\n });\n } else {\n setTypeaheadValues([]);\n }\n }\n }, [table, column, getSuggestions, value]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {\n const { value: newValue } = evt.target;\n\n if (value === \"\" && newValue) {\n setOpen(true);\n const input = rootRef.current?.querySelector(\"input\");\n if (input) {\n // This is a workaround for the fact that ComboBox does not automatically\n // highlight first list itemn when items have been populated dynamically.\n // This has been raised as a bug.\n setTimeout(() => {\n dispatchKeyboardEvent(input, \"keydown\", \"ArrowUp\");\n }, 150);\n }\n } else if (newValue === \"\" && value) {\n // treat clear value as a commit event\n onCommit(evt, \"\");\n }\n\n setValue(newValue);\n };\n\n const handleSelectionChange = (\n evt: SyntheticEvent,\n [newSelected]: string[],\n ) => {\n console.log(`useVuuTypeahead handleSelectionChange ${newSelected}`);\n setValue(newSelected);\n onCommit(evt as SyntheticEvent<HTMLInputElement>, newSelected);\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n if (newOpen && value === \"\") {\n // ignore this, don't open dropdown unless user has typed at least one character\n } else {\n setOpen(newOpen);\n }\n };\n\n const inputProps: ComponentPropsWithoutRef<\"input\"> = {\n autoComplete: \"off\",\n };\n\n return {\n inputProps,\n onChange: handleChange,\n onOpenChange: handleOpenChange,\n onSelectionChange: handleSelectionChange,\n open,\n ref: callbackRef,\n typeaheadValues,\n value,\n };\n};\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.84",
|
|
3
3
|
"description": "VUU UI Controls",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
8
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.8.84",
|
|
8
|
+
"@vuu-ui/vuu-table-types": "0.8.84"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
12
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
13
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
14
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
11
|
+
"@vuu-ui/vuu-layout": "0.8.84",
|
|
12
|
+
"@vuu-ui/vuu-popups": "0.8.84",
|
|
13
|
+
"@vuu-ui/vuu-table": "0.8.84",
|
|
14
|
+
"@vuu-ui/vuu-utils": "0.8.84",
|
|
15
15
|
"@floating-ui/react": "^0.26.5",
|
|
16
16
|
"@salt-ds/core": "1.34.0",
|
|
17
17
|
"@salt-ds/icons": "1.12.1",
|