@vuu-ui/vuu-table 0.8.98 → 0.8.99
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/bulk-edit/BulkEditRow.js +0 -14
- package/cjs/bulk-edit/BulkEditRow.js.map +1 -1
- package/cjs/useControlledTableNavigation.js +1 -2
- package/cjs/useControlledTableNavigation.js.map +1 -1
- package/esm/bulk-edit/BulkEditRow.js +2 -16
- package/esm/bulk-edit/BulkEditRow.js.map +1 -1
- package/esm/useControlledTableNavigation.js +1 -2
- package/esm/useControlledTableNavigation.js.map +1 -1
- package/package.json +9 -9
|
@@ -52,19 +52,6 @@ const BulkEditRow = ({
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}, []);
|
|
55
|
-
const getSuggestions = react.useCallback(
|
|
56
|
-
([, column, pattern]) => {
|
|
57
|
-
const a = dataSource.getTypeaheadSuggestions(column, pattern);
|
|
58
|
-
console.log(a);
|
|
59
|
-
return a;
|
|
60
|
-
},
|
|
61
|
-
[dataSource]
|
|
62
|
-
);
|
|
63
|
-
const suggestionProvider = react.useMemo(() => {
|
|
64
|
-
if (vuuUtils.isTypeaheadSuggestionProvider(dataSource)) {
|
|
65
|
-
return () => getSuggestions;
|
|
66
|
-
}
|
|
67
|
-
}, [dataSource, getSuggestions]);
|
|
68
55
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, onFocus: handleFocus, children: [
|
|
69
56
|
/* @__PURE__ */ jsxRuntime.jsx(VirtualColSpan.VirtualColSpan, { width: virtualColSpan }),
|
|
70
57
|
columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -77,7 +64,6 @@ const BulkEditRow = ({
|
|
|
77
64
|
InputProps,
|
|
78
65
|
dataDescriptor: column,
|
|
79
66
|
onCommit,
|
|
80
|
-
suggestionProvider,
|
|
81
67
|
table: dataSource.table
|
|
82
68
|
})
|
|
83
69
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport {
|
|
1
|
+
{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport type { InputProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: string,\n) => void;\nexport interface BulkEditProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n dataSource: DataSource;\n onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n placeholder: \"Enter value\",\n variant: \"primary\",\n};\n\nexport const BulkEditRow = ({\n dataSource,\n onChange,\n ...htmlAttributes\n}: BulkEditProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-bulk-edit-row\",\n css: bulkEditRowCss,\n window: targetWindow,\n });\n\n const fieldRef = useRef(\"\");\n\n const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n const onCommit = useCallback<CommitHandler<HTMLElement, string | undefined>>(\n (evt, value) => {\n if (value !== undefined && String(value).trim() !== \"\") {\n const columnName = fieldRef.current;\n if (columnName) {\n const column = columns.find((c) => c.name === columnName);\n if (column) {\n onChange(column, value);\n }\n }\n }\n },\n [columns, onChange],\n );\n\n const handleFocus = useCallback((evt) => {\n const field = queryClosest(evt.target, \"[data-field]\");\n if (field) {\n const columnName = field.dataset.field;\n if (columnName) {\n fieldRef.current = columnName;\n }\n }\n }, []);\n\n return (\n <div {...htmlAttributes} className={classBase} onFocus={handleFocus}>\n <VirtualColSpan width={virtualColSpan} />\n {columns.map((column) => (\n <div\n className={`${classBase}-filter`}\n data-field={column.name}\n key={column.name}\n style={{ width: column.width }}\n >\n {getDataItemEditControl({\n InputProps,\n dataDescriptor: column,\n onCommit,\n table: dataSource.table,\n })}\n </div>\n ))}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","bulkEditRowCss","useRef","useHeaderProps","useCallback","queryClosest","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAYlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,UAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAWC,aAAO,EAAE,CAAA,CAAA;AAE1B,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAMC,6BAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAAC,iBAAA;AAAA,IACf,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,UAAU,KAAa,CAAA,IAAA,MAAA,CAAO,KAAK,CAAE,CAAA,IAAA,OAAW,EAAI,EAAA;AACtD,QAAA,MAAM,aAAa,QAAS,CAAA,OAAA,CAAA;AAC5B,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA,CAAA;AACxD,UAAA,IAAI,MAAQ,EAAA;AACV,YAAA,QAAA,CAAS,QAAQ,KAAK,CAAA,CAAA;AAAA,WACxB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAcA,iBAAY,CAAA,CAAC,GAAQ,KAAA;AACvC,IAAA,MAAM,KAAQ,GAAAC,qBAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,cAAc,CAAA,CAAA;AACrD,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,UAAA,GAAa,MAAM,OAAQ,CAAA,KAAA,CAAA;AACjC,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,QAAA,CAAS,OAAU,GAAA,UAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,uCACG,KAAK,EAAA,EAAA,GAAG,gBAAgB,SAAW,EAAA,SAAA,EAAW,SAAS,WACtD,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,6BAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QACvB,cAAY,MAAO,CAAA,IAAA;AAAA,QAEnB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAAE,mCAAA,CAAA;AAAA,UACtB,UAAA;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA,OAAO,UAAW,CAAA,KAAA;AAAA,SACnB,CAAA;AAAA,OAAA;AAAA,MARI,MAAO,CAAA,IAAA;AAAA,KAUf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
4
3
|
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
4
|
var react = require('react');
|
|
6
5
|
|
|
7
6
|
const isRowSelectionKey = (key) => key === "Enter" || key === " ";
|
|
8
7
|
const useControlledTableNavigation = (initialValue, rowCount) => {
|
|
9
8
|
const tableRef = react.useRef(null);
|
|
10
|
-
const [highlightedIndexRef, setHighlightedIndex] =
|
|
9
|
+
const [highlightedIndexRef, setHighlightedIndex] = vuuUtils.useStateRef(initialValue);
|
|
11
10
|
const handleKeyDown = react.useCallback(
|
|
12
11
|
(e) => {
|
|
13
12
|
if (e.key === "ArrowDown") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-
|
|
1
|
+
{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { dispatchMouseEvent, useStateRef } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const isRowSelectionKey = (key: string) =>\n key === \"Enter\" || key === \" \";\n\nexport const useControlledTableNavigation = (\n initialValue: number,\n rowCount: number,\n) => {\n const tableRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n number | undefined\n >(initialValue);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"ArrowDown\") {\n setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n } else if (e.key === \"ArrowUp\") {\n setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n } else if (isRowSelectionKey(e.key)) {\n const { current: rowIdx } = highlightedIndexRef;\n // induce an onSelect event by 'clicking' the row\n if (typeof rowIdx === \"number\") {\n const rowEl = tableRef.current?.querySelector(\n `[aria-rowindex=\"${rowIdx + 1}\"]`,\n ) as HTMLElement;\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n }\n },\n [highlightedIndexRef, rowCount, setHighlightedIndex],\n );\n\n const handleHighlight = useCallback(\n (idx: number) => {\n setHighlightedIndex(idx);\n },\n [setHighlightedIndex],\n );\n\n return {\n highlightedIndexRef,\n onHighlight: handleHighlight,\n onKeyDown: handleKeyDown,\n tableRef,\n };\n};\n"],"names":["useRef","useStateRef","useCallback","dispatchMouseEvent"],"mappings":";;;;;AAGO,MAAM,iBAAoB,GAAA,CAAC,GAChC,KAAA,GAAA,KAAQ,WAAW,GAAQ,KAAA,IAAA;AAEhB,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAWA,aAAuB,IAAI,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAIC,qBAEjD,YAAY,CAAA,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,OACjD,MAAA,IAAA,iBAAA,CAAkB,CAAE,CAAA,GAAG,CAAG,EAAA;AACnC,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA,CAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA,CAAA;AAAA,WAC/B,CAAA;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAAD,iBAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
|
|
3
|
-
import { queryClosest
|
|
3
|
+
import { queryClosest } from '@vuu-ui/vuu-utils';
|
|
4
4
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
5
5
|
import { useWindow } from '@salt-ds/window';
|
|
6
|
-
import { useRef, useCallback
|
|
6
|
+
import { useRef, useCallback } from 'react';
|
|
7
7
|
import { VirtualColSpan } from '../VirtualColSpan.js';
|
|
8
8
|
import { useHeaderProps } from '../table-header/HeaderProvider.js';
|
|
9
9
|
import '../table-header/TableHeader.js';
|
|
@@ -50,19 +50,6 @@ const BulkEditRow = ({
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
}, []);
|
|
53
|
-
const getSuggestions = useCallback(
|
|
54
|
-
([, column, pattern]) => {
|
|
55
|
-
const a = dataSource.getTypeaheadSuggestions(column, pattern);
|
|
56
|
-
console.log(a);
|
|
57
|
-
return a;
|
|
58
|
-
},
|
|
59
|
-
[dataSource]
|
|
60
|
-
);
|
|
61
|
-
const suggestionProvider = useMemo(() => {
|
|
62
|
-
if (isTypeaheadSuggestionProvider(dataSource)) {
|
|
63
|
-
return () => getSuggestions;
|
|
64
|
-
}
|
|
65
|
-
}, [dataSource, getSuggestions]);
|
|
66
53
|
return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, onFocus: handleFocus, children: [
|
|
67
54
|
/* @__PURE__ */ jsx(VirtualColSpan, { width: virtualColSpan }),
|
|
68
55
|
columns.map((column) => /* @__PURE__ */ jsx(
|
|
@@ -75,7 +62,6 @@ const BulkEditRow = ({
|
|
|
75
62
|
InputProps,
|
|
76
63
|
dataDescriptor: column,
|
|
77
64
|
onCommit,
|
|
78
|
-
suggestionProvider,
|
|
79
65
|
table: dataSource.table
|
|
80
66
|
})
|
|
81
67
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport {
|
|
1
|
+
{"version":3,"file":"BulkEditRow.js","sources":["../../src/bulk-edit/BulkEditRow.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { CommitHandler, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport type { InputProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { VirtualColSpan } from \"../VirtualColSpan\";\nimport { useHeaderProps } from \"../table-header\";\nimport bulkEditRowCss from \"./BulkEditRow.css\";\n\nconst classBase = \"vuuBulkEditRow\";\n\nexport type EditValueChangeHandler = (\n column: ColumnDescriptor,\n value: string,\n) => void;\nexport interface BulkEditProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n dataSource: DataSource;\n onChange: EditValueChangeHandler;\n}\n\nconst InputProps: Partial<InputProps> = {\n placeholder: \"Enter value\",\n variant: \"primary\",\n};\n\nexport const BulkEditRow = ({\n dataSource,\n onChange,\n ...htmlAttributes\n}: BulkEditProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-bulk-edit-row\",\n css: bulkEditRowCss,\n window: targetWindow,\n });\n\n const fieldRef = useRef(\"\");\n\n const { columns, virtualColSpan = 0 } = useHeaderProps();\n\n const onCommit = useCallback<CommitHandler<HTMLElement, string | undefined>>(\n (evt, value) => {\n if (value !== undefined && String(value).trim() !== \"\") {\n const columnName = fieldRef.current;\n if (columnName) {\n const column = columns.find((c) => c.name === columnName);\n if (column) {\n onChange(column, value);\n }\n }\n }\n },\n [columns, onChange],\n );\n\n const handleFocus = useCallback((evt) => {\n const field = queryClosest(evt.target, \"[data-field]\");\n if (field) {\n const columnName = field.dataset.field;\n if (columnName) {\n fieldRef.current = columnName;\n }\n }\n }, []);\n\n return (\n <div {...htmlAttributes} className={classBase} onFocus={handleFocus}>\n <VirtualColSpan width={virtualColSpan} />\n {columns.map((column) => (\n <div\n className={`${classBase}-filter`}\n data-field={column.name}\n key={column.name}\n style={{ width: column.width }}\n >\n {getDataItemEditControl({\n InputProps,\n dataDescriptor: column,\n onCommit,\n table: dataSource.table,\n })}\n </div>\n ))}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAYlB,MAAM,UAAkC,GAAA;AAAA,EACtC,WAAa,EAAA,aAAA;AAAA,EACb,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,UAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,OAAO,EAAE,CAAA,CAAA;AAE1B,EAAA,MAAM,EAAE,OAAA,EAAS,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA,CAAA;AAEvD,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,KAAK,KAAU,KAAA;AACd,MAAA,IAAI,UAAU,KAAa,CAAA,IAAA,MAAA,CAAO,KAAK,CAAE,CAAA,IAAA,OAAW,EAAI,EAAA;AACtD,QAAA,MAAM,aAAa,QAAS,CAAA,OAAA,CAAA;AAC5B,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA,CAAA;AACxD,UAAA,IAAI,MAAQ,EAAA;AACV,YAAA,QAAA,CAAS,QAAQ,KAAK,CAAA,CAAA;AAAA,WACxB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,WAAY,CAAA,CAAC,GAAQ,KAAA;AACvC,IAAA,MAAM,KAAQ,GAAA,YAAA,CAAa,GAAI,CAAA,MAAA,EAAQ,cAAc,CAAA,CAAA;AACrD,IAAA,IAAI,KAAO,EAAA;AACT,MAAM,MAAA,UAAA,GAAa,MAAM,OAAQ,CAAA,KAAA,CAAA;AACjC,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,QAAA,CAAS,OAAU,GAAA,UAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,4BACG,KAAK,EAAA,EAAA,GAAG,gBAAgB,SAAW,EAAA,SAAA,EAAW,SAAS,WACtD,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAA,CAAQ,GAAI,CAAA,CAAC,MACZ,qBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,QACvB,cAAY,MAAO,CAAA,IAAA;AAAA,QAEnB,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAA,sBAAA,CAAA;AAAA,UACtB,UAAA;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA,OAAO,UAAW,CAAA,KAAA;AAAA,SACnB,CAAA;AAAA,OAAA;AAAA,MARI,MAAO,CAAA,IAAA;AAAA,KAUf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import { useStateRef } from '@vuu-ui/vuu-
|
|
2
|
-
import { dispatchMouseEvent } from '@vuu-ui/vuu-utils';
|
|
1
|
+
import { useStateRef, dispatchMouseEvent } from '@vuu-ui/vuu-utils';
|
|
3
2
|
import { useRef, useCallback } from 'react';
|
|
4
3
|
|
|
5
4
|
const isRowSelectionKey = (key) => key === "Enter" || key === " ";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-
|
|
1
|
+
{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { dispatchMouseEvent, useStateRef } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const isRowSelectionKey = (key: string) =>\n key === \"Enter\" || key === \" \";\n\nexport const useControlledTableNavigation = (\n initialValue: number,\n rowCount: number,\n) => {\n const tableRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n number | undefined\n >(initialValue);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"ArrowDown\") {\n setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n } else if (e.key === \"ArrowUp\") {\n setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n } else if (isRowSelectionKey(e.key)) {\n const { current: rowIdx } = highlightedIndexRef;\n // induce an onSelect event by 'clicking' the row\n if (typeof rowIdx === \"number\") {\n const rowEl = tableRef.current?.querySelector(\n `[aria-rowindex=\"${rowIdx + 1}\"]`,\n ) as HTMLElement;\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n }\n },\n [highlightedIndexRef, rowCount, setHighlightedIndex],\n );\n\n const handleHighlight = useCallback(\n (idx: number) => {\n setHighlightedIndex(idx);\n },\n [setHighlightedIndex],\n );\n\n return {\n highlightedIndexRef,\n onHighlight: handleHighlight,\n onKeyDown: handleKeyDown,\n tableRef,\n };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,iBAAoB,GAAA,CAAC,GAChC,KAAA,GAAA,KAAQ,WAAW,GAAQ,KAAA,IAAA;AAEhB,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAI,YAEjD,YAAY,CAAA,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,OACjD,MAAA,IAAA,iBAAA,CAAkB,CAAE,CAAA,GAAG,CAAG,EAAA;AACnC,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA,CAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA,CAAA;AAAA,WAC/B,CAAA;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAA,kBAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.99",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
7
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "0.8.
|
|
6
|
+
"@vuu-ui/vuu-data-types": "0.8.99",
|
|
7
|
+
"@vuu-ui/vuu-table-types": "0.8.99",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "0.8.99"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@salt-ds/core": "1.34.0",
|
|
12
12
|
"@salt-ds/styles": "0.2.1",
|
|
13
13
|
"@salt-ds/window": "0.1.1",
|
|
14
|
-
"@vuu-ui/vuu-data-react": "0.8.
|
|
15
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
16
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "0.8.
|
|
18
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
14
|
+
"@vuu-ui/vuu-data-react": "0.8.99",
|
|
15
|
+
"@vuu-ui/vuu-layout": "0.8.99",
|
|
16
|
+
"@vuu-ui/vuu-popups": "0.8.99",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "0.8.99",
|
|
18
|
+
"@vuu-ui/vuu-utils": "0.8.99"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"clsx": "^2.0.0",
|