@vuu-ui/vuu-table-extras 2.1.15 → 2.1.17

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 (11) hide show
  1. package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js +1 -1
  2. package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +81 -70
  3. package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -1
  4. package/cjs/column-picker/ColumnPicker.js +2 -2
  5. package/cjs/column-picker/ColumnPicker.js.map +1 -1
  6. package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js +1 -1
  7. package/esm/cell-renderers/dropdown-cell/DropdownCell.js +81 -70
  8. package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -1
  9. package/esm/column-picker/ColumnPicker.js +3 -3
  10. package/esm/column-picker/ColumnPicker.js.map +1 -1
  11. package/package.json +11 -11
package/cjs/cell-renderers/dropdown-cell/DropdownCell.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - 20px);\n --vuu-icon-size: 8px;\n --vuu-icon-top: -2px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 2px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 2px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n &.saltDropdown:focus {\n outline: none;\n }\n }\n\n .vuuTableDropdownCell:focus {\n border: solid 2px var(--salt-focused-outlineColor);\n }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n} */\n";
3
+ var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - var(--salt-spacing-300));\n --vuu-icon-size: 8px;\n --vuu-icon-top: -3px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 2px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 2px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n &.saltDropdown:focus {\n outline: none;\n }\n }\n\n .vuuTableDropdownCell:focus {\n border: solid 2px var(--salt-focused-outlineColor);\n }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n} */\n";
4
4
 
5
5
  module.exports = dropdownCellCss;
6
6
  //# sourceMappingURL=DropdownCell.css.js.map
package/cjs/cell-renderers/dropdown-cell/DropdownCell.js CHANGED
@@ -3,6 +3,7 @@
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
4
  var vuuDataReact = require('@vuu-ui/vuu-data-react');
5
5
  var vuuUtils = require('@vuu-ui/vuu-utils');
6
+ var cx = require('clsx');
6
7
  var core = require('@salt-ds/core');
7
8
  var styles = require('@salt-ds/styles');
8
9
  var window = require('@salt-ds/window');
@@ -10,80 +11,90 @@ var react = require('react');
10
11
  var DropdownCell$1 = require('./DropdownCell.css.js');
11
12
 
12
13
  const classBase = "vuuTableDropdownCell";
13
- const DropdownCell = react.memo(function DropdownCell2({
14
- column,
15
- dataRow,
16
- onEdit
17
- }) {
18
- const targetWindow = window.useWindow();
19
- styles.useComponentCssInjection({
20
- testId: "vuu-dropdown-cell",
21
- css: DropdownCell$1,
22
- window: targetWindow
23
- });
24
- const [open, setOpen] = react.useState(false);
25
- const dataValue = dataRow[column.name];
26
- const { values } = vuuDataReact.useLookupValues(column, dataValue);
27
- const valueRef = react.useRef(void 0);
28
- react.useMemo(() => {
29
- valueRef.current = vuuUtils.getSelectedOption(values, dataValue);
30
- }, [dataValue, values]);
31
- const handleOpenChange = react.useCallback((isOpen) => {
32
- console.log(`handleOpenChange ${isOpen}`);
33
- if (isOpen === false) {
34
- setOpen(false);
14
+ const DropdownCell = react.memo(
15
+ function DropdownCell2({
16
+ column,
17
+ dataRow,
18
+ editedDuringCurrentSession,
19
+ onEdit
20
+ }) {
21
+ const targetWindow = window.useWindow();
22
+ styles.useComponentCssInjection({
23
+ testId: "vuu-dropdown-cell",
24
+ css: DropdownCell$1,
25
+ window: targetWindow
26
+ });
27
+ if (editedDuringCurrentSession) {
28
+ console.log(`${column.name} edited ${editedDuringCurrentSession}`);
35
29
  }
36
- }, []);
37
- const handleSelectionChange = react.useCallback(
38
- async (evt, [selectedOption2]) => {
39
- if (selectedOption2) {
40
- const response = await onEdit?.(
41
- {
42
- editType: "commit",
43
- previousValue: valueRef.current?.value,
44
- value: selectedOption2.value
45
- },
46
- "commit"
47
- );
48
- if (vuuUtils.isRpcSuccess(response)) {
49
- vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
50
- }
30
+ const [open, setOpen] = react.useState(false);
31
+ const dataValue = dataRow[column.name];
32
+ const { values } = vuuDataReact.useLookupValues(column, dataValue);
33
+ const valueRef = react.useRef(void 0);
34
+ react.useMemo(() => {
35
+ valueRef.current = vuuUtils.getSelectedOption(values, dataValue);
36
+ }, [dataValue, values]);
37
+ const handleOpenChange = react.useCallback((isOpen) => {
38
+ console.log(`handleOpenChange ${isOpen}`);
39
+ if (isOpen === false) {
40
+ setOpen(false);
51
41
  }
52
- },
53
- [onEdit]
54
- );
55
- const handleClick = react.useCallback(() => {
56
- if (!open) {
57
- setOpen(true);
58
- }
59
- }, [open]);
60
- const handleKeyDown = react.useCallback(
61
- (e) => {
62
- if (e.key === "Enter" && !open) {
63
- e.preventDefault();
64
- e.stopPropagation();
42
+ }, []);
43
+ const handleSelectionChange = react.useCallback(
44
+ async (evt, [selectedOption2]) => {
45
+ if (selectedOption2) {
46
+ const response = await onEdit?.(
47
+ {
48
+ editType: "commit",
49
+ isValid: true,
50
+ previousValue: valueRef.current?.value,
51
+ value: selectedOption2.value
52
+ },
53
+ "commit"
54
+ );
55
+ if (vuuUtils.isRpcSuccess(response)) {
56
+ vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
57
+ }
58
+ }
59
+ },
60
+ [onEdit]
61
+ );
62
+ const handleClick = react.useCallback(() => {
63
+ if (!open) {
65
64
  setOpen(true);
66
65
  }
67
- },
68
- [open]
69
- );
70
- const { current: selectedOption } = valueRef;
71
- return /* @__PURE__ */ jsxRuntime.jsx(
72
- core.Dropdown,
73
- {
74
- className: classBase,
75
- "data-icon": "triangle-down",
76
- onClick: handleClick,
77
- onKeyDownCapture: handleKeyDown,
78
- onOpenChange: handleOpenChange,
79
- onSelectionChange: handleSelectionChange,
80
- open,
81
- selected: selectedOption ? [selectedOption] : [],
82
- value: selectedOption?.label,
83
- children: values.map((listOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: listOption, children: listOption.label }, i))
84
- }
85
- );
86
- }, vuuUtils.dataColumnAndKeyUnchanged);
66
+ }, [open]);
67
+ const handleKeyDown = react.useCallback(
68
+ (e) => {
69
+ if (e.key === "Enter" && !open) {
70
+ e.preventDefault();
71
+ e.stopPropagation();
72
+ setOpen(true);
73
+ }
74
+ },
75
+ [open]
76
+ );
77
+ const { current: selectedOption } = valueRef;
78
+ return /* @__PURE__ */ jsxRuntime.jsx(
79
+ core.Dropdown,
80
+ {
81
+ className: cx(classBase, {
82
+ [`${classBase}-edited`]: editedDuringCurrentSession === true
83
+ }),
84
+ "data-icon": "triangle-down",
85
+ onClick: handleClick,
86
+ onKeyDownCapture: handleKeyDown,
87
+ onOpenChange: handleOpenChange,
88
+ onSelectionChange: handleSelectionChange,
89
+ open,
90
+ selected: selectedOption ? [selectedOption] : [],
91
+ value: selectedOption?.label,
92
+ children: values.map((listOption, i) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: listOption, children: listOption.label }, i))
93
+ }
94
+ );
95
+ },
96
+ (p, p1) => p.editedDuringCurrentSession !== p1.editedDuringCurrentSession && vuuUtils.dataColumnAndKeyUnchanged(p, p1)
97
+ );
87
98
  vuuUtils.registerComponent("dropdown-cell", DropdownCell, "cell-renderer", {
88
99
  userCanAssign: false
89
100
  });
package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n isRpcSuccess,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n dataRow,\n onEdit,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataValue = dataRow[column.name] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>(undefined);\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (isRpcSuccess(response)) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","isRpcSuccess","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":"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"}
1
+ {"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n isRpcSuccess,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(\n function DropdownCell({\n column,\n dataRow,\n editedDuringCurrentSession,\n onEdit,\n }: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n if (editedDuringCurrentSession) {\n console.log(`${column.name} edited ${editedDuringCurrentSession}`);\n }\n\n const [open, setOpen] = useState(false);\n const dataValue = dataRow[column.name] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>(undefined);\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n isValid: true,\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (isRpcSuccess(response)) {\n // TODO this should be done in TableCell\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={cx(classBase, {\n [`${classBase}-edited`]: editedDuringCurrentSession === true,\n })}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n },\n (p: TableCellRendererProps, p1: TableCellRendererProps) =>\n p.editedDuringCurrentSession !== p1.editedDuringCurrentSession &&\n dataColumnAndKeyUnchanged(p, p1),\n);\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","isRpcSuccess","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,SAAY,GAAA,sBAAA;AAEX,MAAM,YAAe,GAAAA,UAAA;AAAA,EAC1B,SAASC,aAAa,CAAA;AAAA,IACpB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,0BAAA;AAAA,IACA;AAAA,GACyB,EAAA;AACzB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,IAAI,0BAA4B,EAAA;AAC9B,MAAA,OAAA,CAAQ,IAAI,CAAG,EAAA,MAAA,CAAO,IAAI,CAAA,QAAA,EAAW,0BAA0B,CAAE,CAAA,CAAA;AAAA;AAGnE,IAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,IAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,IAAA,MAAM,EAAE,MAAA,EAAW,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA;AACpD,IAAM,MAAA,QAAA,GAAWC,aAAmB,KAAS,CAAA,CAAA;AAE7C,IAAAC,aAAA,CAAQ,MAAM;AACZ,MAAS,QAAA,CAAA,OAAA,GAAUC,0BAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA;AAAA,KACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA;AAEtB,IAAM,MAAA,gBAAA,GAAmBC,iBAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAoB,iBAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AACxC,MAAA,IAAI,WAAW,KAAO,EAAA;AACpB,QAAA,OAAA,CAAQ,KAAK,CAAA;AAAA;AACf,KACF,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,qBAAwB,GAAAA,iBAAA;AAAA,MAC5B,OAAO,GAAA,EAAqB,CAACC,eAAc,CAAoB,KAAA;AAC7D,QAAA,IAAIA,eAAgB,EAAA;AAKlB,UAAA,MAAM,WAAW,MAAM,MAAA;AAAA,YACrB;AAAA,cACE,QAAU,EAAA,QAAA;AAAA,cACV,OAAS,EAAA,IAAA;AAAA,cACT,aAAA,EAAe,SAAS,OAAS,EAAA,KAAA;AAAA,cACjC,OAAOA,eAAe,CAAA;AAAA,aACxB;AAAA,YACA;AAAA,WACF;AACA,UAAI,IAAAC,qBAAA,CAAa,QAAQ,CAAG,EAAA;AAE1B,YAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAC7D;AACF,OACF;AAAA,MACA,CAAC,MAAM;AAAA,KACT;AAEA,IAAM,MAAA,WAAA,GAAcH,kBAElB,MAAM;AACN,MAAA,IAAI,CAAC,IAAM,EAAA;AACT,QAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,KACF,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,IAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,MACpB,CAAC,CAAM,KAAA;AACL,QAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAC,IAAM,EAAA;AAC9B,UAAA,CAAA,CAAE,cAAe,EAAA;AACjB,UAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,UAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,OACF;AAAA,MACA,CAAC,IAAI;AAAA,KACP;AAEA,IAAM,MAAA,EAAE,OAAS,EAAA,cAAA,EAAmB,GAAA,QAAA;AACpC,IACE,uBAAAI,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,UACvB,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,0BAA+B,KAAA;AAAA,SACzD,CAAA;AAAA,QACD,WAAU,EAAA,eAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,gBAAkB,EAAA,aAAA;AAAA,QAClB,YAAc,EAAA,gBAAA;AAAA,QACd,iBAAmB,EAAA,qBAAA;AAAA,QACnB,IAAA;AAAA,QACA,QAAU,EAAA,cAAA,GAAiB,CAAC,cAAc,IAAI,EAAC;AAAA,QAC/C,OAAO,cAAgB,EAAA,KAAA;AAAA,QAEtB,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,CACvB,qBAAAD,cAAA,CAACE,WAAe,EAAA,EAAA,KAAA,EAAO,UACpB,EAAA,QAAA,EAAA,UAAA,CAAW,KADD,EAAA,EAAA,CAEb,CACD;AAAA;AAAA,KACH;AAAA,GAEJ;AAAA,EACA,CAAC,GAA2B,EAC1B,KAAA,CAAA,CAAE,+BAA+B,EAAG,CAAA,0BAAA,IACpCC,kCAA0B,CAAA,CAAA,EAAG,EAAE;AACnC;AACAC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
package/cjs/column-picker/ColumnPicker.js CHANGED
@@ -40,7 +40,7 @@ const SelectedColumnListItem = ({
40
40
  }) => {
41
41
  const { handleRef, ref } = useSorting(column.name, index);
42
42
  const value = vuuUtils.getColumnLabel(column);
43
- const valueWithHighlighting = vuuTable.useHighlighting(value, searchPattern);
43
+ const valueWithHighlighting = vuuTable.applyHighlighting(value, searchPattern);
44
44
  const handleRemoveButtonClick = react.useCallback(
45
45
  (e) => {
46
46
  e.stopPropagation();
@@ -92,7 +92,7 @@ const AvailableColumnListItem = ({
92
92
  ...optionProps
93
93
  }) => {
94
94
  const value = vuuUtils.getColumnLabel(item);
95
- const valueWithHighlighting = vuuTable.useHighlighting(value, searchPattern);
95
+ const valueWithHighlighting = vuuTable.applyHighlighting(value, searchPattern);
96
96
  return /* @__PURE__ */ jsxRuntime.jsxs(
97
97
  core.Option,
98
98
  {
package/cjs/column-picker/ColumnPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n DragDropProvider,\n getColumnLabel,\n isCalculatedColumn,\n useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n MouseEventHandler,\n RefCallback,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\n\nimport {\n Button,\n Input,\n ListBox,\n ListBoxProps,\n Option,\n OptionProps,\n} from \"@salt-ds/core\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnChangeSource } from \"./ColumnModel\";\nimport { ColumnPickerHookProps, useColumnPicker } from \"./useColumnPicker\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n extends ColumnPickerHookProps,\n Pick<ListBoxProps<ColumnDescriptor>, \"selected\" | \"onSelectionChange\">,\n HTMLAttributes<HTMLDivElement> {\n allowCreateCalculatedColumn?: boolean;\n onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: ColumnDescriptor[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n id,\n index,\n });\n\n const [handleRef, ref] = useMemo(() => {\n return [sortableHandleRef, sortableRef];\n }, [sortableHandleRef, sortableRef]);\n\n return {\n handleRef,\n ref,\n };\n};\n\nconst SelectedColumnListItem = ({\n className: classNameProp,\n index,\n column,\n onRemove,\n searchPattern = \"\",\n ...optionProps\n}: OptionProps & {\n index: number;\n column: ColumnDescriptor;\n onRemove: MouseEventHandler<HTMLButtonElement>;\n searchPattern?: Lowercase<string>;\n}) => {\n const { handleRef, ref } = useSorting(column.name, index);\n const value = getColumnLabel(column as ColumnDescriptor);\n const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n const handleRemoveButtonClick = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n (e) => {\n e.stopPropagation();\n onRemove?.(e);\n },\n [onRemove],\n );\n\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={column.name}\n ref={ref}\n >\n <IconButton\n data-embedded\n appearance=\"transparent\"\n icon=\"draggable\"\n ref={handleRef}\n size={16}\n />\n {isCalculatedColumn(column.name) ? (\n <Icon className=\"vuuCalculatedColumnIcon\" name=\"function\" />\n ) : null}\n <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n <IconButton\n className={`${classBaseListItem}-action`}\n data-embedded\n appearance=\"transparent\"\n icon=\"cross\"\n onClick={handleRemoveButtonClick}\n size={16}\n />\n </Option>\n );\n};\n\nconst AvailableColumnListItem = ({\n className: classNameProp,\n index,\n column: item,\n onAdd,\n searchPattern = \"\",\n ...optionProps\n}: OptionProps & {\n index: number;\n column: ColumnDescriptor;\n onAdd: MouseEventHandler<HTMLButtonElement>;\n searchPattern?: Lowercase<string>;\n}) => {\n const value = getColumnLabel(item as ColumnDescriptor);\n const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item.name}\n >\n <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n <IconButton\n className={`${classBaseListItem}-action`}\n data-embedded\n appearance=\"transparent\"\n icon=\"plus\"\n onClick={onAdd}\n size={16}\n />\n </Option>\n );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n {\n allowCreateCalculatedColumn,\n columnModel,\n className,\n onClickCreateCalculatedColumn,\n onSelectionChange,\n selected = NO_SELECTION,\n ...htmlAttributes\n }: ColumnPickerProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-picker\",\n css: columnPickerCss,\n window: targetWindow,\n });\n\n const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n setTimeout(() => {\n el?.querySelector(\"input\")?.focus();\n }, 100);\n }, []);\n\n const {\n availableColumns,\n onAddItemToSelectedList,\n onChangeSearchInput,\n onRemoveItemFromSelectedList,\n searchText,\n selectedColumns,\n } = useColumnPicker({\n columnModel: columnModel,\n });\n const listRef = useRef<HTMLDivElement>(null);\n\n const getOptionName = (option?: HTMLElement) => {\n if (option) {\n const { name } = option.dataset;\n if (name) {\n return name;\n }\n }\n throw Error(\"[ColumnPicker] list option has no data-name\");\n };\n\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems =\n listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n if (listItems) {\n const orderedColumnNames = Array.from(listItems).map(getOptionName);\n columnModel.reorderSelectedColumns(\n orderedColumnNames,\n ColumnChangeSource.ColumnPicker,\n );\n }\n }, 300);\n }, [columnModel]);\n\n const oneOrMoreColumnsIsCalculated = selectedColumns.some((column) =>\n isCalculatedColumn(column.name),\n );\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withCalculated`]: oneOrMoreColumnsIsCalculated,\n })}\n ref={forwardedRef}\n >\n <form className={`${classBase}-search`} role=\"search\">\n <Input\n startAdornment={searchIcon}\n placeholder=\"Find column\"\n ref={searchCallbackRef}\n value={searchText}\n onChange={onChangeSearchInput}\n />\n </form>\n\n <div className={`${classBase}-scrollContainer vuuScrollable`}>\n <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n <DragDropProvider onDragEnd={handleDragEnd}>\n <ListBox\n className={`${classBase}-selectedList`}\n onSelectionChange={onSelectionChange}\n ref={listRef}\n selected={selected}\n >\n {selectedColumns.map((column, index) => (\n <SelectedColumnListItem\n column={column}\n index={index}\n key={column.name}\n onRemove={onRemoveItemFromSelectedList}\n searchPattern={searchText.toLowerCase() as Lowercase<string>}\n value={column}\n />\n ))}\n </ListBox>\n </DragDropProvider>\n\n <div\n className={cx(\n `${classBase}-sectionHeader`,\n `${classBase}-availableHeader`,\n )}\n >\n Available columns\n </div>\n <ListBox\n className={`${classBase}-availableList`}\n selected={NO_SELECTION}\n >\n {availableColumns.map((column, index) => (\n <AvailableColumnListItem\n column={column}\n index={index}\n key={column.name}\n onAdd={onAddItemToSelectedList}\n searchPattern={searchText.toLowerCase() as Lowercase<string>}\n value={column}\n />\n ))}\n </ListBox>\n </div>\n {allowCreateCalculatedColumn ? (\n <div className={`${classBase}-column-buttons`}>\n <Button onClick={onClickCreateCalculatedColumn}>\n Create calculated column\n </Button>\n </div>\n ) : null}\n </div>\n );\n});\n"],"names":["jsx","useSortable","useMemo","getColumnLabel","useHighlighting","useCallback","jsxs","Option","IconButton","isCalculatedColumn","Icon","forwardRef","ColumnPicker","useWindow","useComponentCssInjection","columnPickerCss","useColumnPicker","useRef","ColumnChangeSource","Input","DragDropProvider","ListBox","Button"],"mappings":"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"}
1
+ {"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n DragDropProvider,\n getColumnLabel,\n isCalculatedColumn,\n useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n MouseEventHandler,\n RefCallback,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\n\nimport {\n Button,\n Input,\n ListBox,\n ListBoxProps,\n Option,\n OptionProps,\n} from \"@salt-ds/core\";\nimport { applyHighlighting } from \"@vuu-ui/vuu-table\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnChangeSource } from \"./ColumnModel\";\nimport { ColumnPickerHookProps, useColumnPicker } from \"./useColumnPicker\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n extends ColumnPickerHookProps,\n Pick<ListBoxProps<ColumnDescriptor>, \"selected\" | \"onSelectionChange\">,\n HTMLAttributes<HTMLDivElement> {\n allowCreateCalculatedColumn?: boolean;\n onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: ColumnDescriptor[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n id,\n index,\n });\n\n const [handleRef, ref] = useMemo(() => {\n return [sortableHandleRef, sortableRef];\n }, [sortableHandleRef, sortableRef]);\n\n return {\n handleRef,\n ref,\n };\n};\n\nconst SelectedColumnListItem = ({\n className: classNameProp,\n index,\n column,\n onRemove,\n searchPattern = \"\",\n ...optionProps\n}: OptionProps & {\n index: number;\n column: ColumnDescriptor;\n onRemove: MouseEventHandler<HTMLButtonElement>;\n searchPattern?: Lowercase<string>;\n}) => {\n const { handleRef, ref } = useSorting(column.name, index);\n const value = getColumnLabel(column as ColumnDescriptor);\n const valueWithHighlighting = applyHighlighting(value, searchPattern);\n\n const handleRemoveButtonClick = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n (e) => {\n e.stopPropagation();\n onRemove?.(e);\n },\n [onRemove],\n );\n\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={column.name}\n ref={ref}\n >\n <IconButton\n data-embedded\n appearance=\"transparent\"\n icon=\"draggable\"\n ref={handleRef}\n size={16}\n />\n {isCalculatedColumn(column.name) ? (\n <Icon className=\"vuuCalculatedColumnIcon\" name=\"function\" />\n ) : null}\n <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n <IconButton\n className={`${classBaseListItem}-action`}\n data-embedded\n appearance=\"transparent\"\n icon=\"cross\"\n onClick={handleRemoveButtonClick}\n size={16}\n />\n </Option>\n );\n};\n\nconst AvailableColumnListItem = ({\n className: classNameProp,\n index,\n column: item,\n onAdd,\n searchPattern = \"\",\n ...optionProps\n}: OptionProps & {\n index: number;\n column: ColumnDescriptor;\n onAdd: MouseEventHandler<HTMLButtonElement>;\n searchPattern?: Lowercase<string>;\n}) => {\n const value = getColumnLabel(item as ColumnDescriptor);\n const valueWithHighlighting = applyHighlighting(value, searchPattern);\n\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item.name}\n >\n <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n <IconButton\n className={`${classBaseListItem}-action`}\n data-embedded\n appearance=\"transparent\"\n icon=\"plus\"\n onClick={onAdd}\n size={16}\n />\n </Option>\n );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n {\n allowCreateCalculatedColumn,\n columnModel,\n className,\n onClickCreateCalculatedColumn,\n onSelectionChange,\n selected = NO_SELECTION,\n ...htmlAttributes\n }: ColumnPickerProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-picker\",\n css: columnPickerCss,\n window: targetWindow,\n });\n\n const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n setTimeout(() => {\n el?.querySelector(\"input\")?.focus();\n }, 100);\n }, []);\n\n const {\n availableColumns,\n onAddItemToSelectedList,\n onChangeSearchInput,\n onRemoveItemFromSelectedList,\n searchText,\n selectedColumns,\n } = useColumnPicker({\n columnModel: columnModel,\n });\n const listRef = useRef<HTMLDivElement>(null);\n\n const getOptionName = (option?: HTMLElement) => {\n if (option) {\n const { name } = option.dataset;\n if (name) {\n return name;\n }\n }\n throw Error(\"[ColumnPicker] list option has no data-name\");\n };\n\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems =\n listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n if (listItems) {\n const orderedColumnNames = Array.from(listItems).map(getOptionName);\n columnModel.reorderSelectedColumns(\n orderedColumnNames,\n ColumnChangeSource.ColumnPicker,\n );\n }\n }, 300);\n }, [columnModel]);\n\n const oneOrMoreColumnsIsCalculated = selectedColumns.some((column) =>\n isCalculatedColumn(column.name),\n );\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withCalculated`]: oneOrMoreColumnsIsCalculated,\n })}\n ref={forwardedRef}\n >\n <form className={`${classBase}-search`} role=\"search\">\n <Input\n startAdornment={searchIcon}\n placeholder=\"Find column\"\n ref={searchCallbackRef}\n value={searchText}\n onChange={onChangeSearchInput}\n />\n </form>\n\n <div className={`${classBase}-scrollContainer vuuScrollable`}>\n <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n <DragDropProvider onDragEnd={handleDragEnd}>\n <ListBox\n className={`${classBase}-selectedList`}\n onSelectionChange={onSelectionChange}\n ref={listRef}\n selected={selected}\n >\n {selectedColumns.map((column, index) => (\n <SelectedColumnListItem\n column={column}\n index={index}\n key={column.name}\n onRemove={onRemoveItemFromSelectedList}\n searchPattern={searchText.toLowerCase() as Lowercase<string>}\n value={column}\n />\n ))}\n </ListBox>\n </DragDropProvider>\n\n <div\n className={cx(\n `${classBase}-sectionHeader`,\n `${classBase}-availableHeader`,\n )}\n >\n Available columns\n </div>\n <ListBox\n className={`${classBase}-availableList`}\n selected={NO_SELECTION}\n >\n {availableColumns.map((column, index) => (\n <AvailableColumnListItem\n column={column}\n index={index}\n key={column.name}\n onAdd={onAddItemToSelectedList}\n searchPattern={searchText.toLowerCase() as Lowercase<string>}\n value={column}\n />\n ))}\n </ListBox>\n </div>\n {allowCreateCalculatedColumn ? (\n <div className={`${classBase}-column-buttons`}>\n <Button onClick={onClickCreateCalculatedColumn}>\n Create calculated column\n </Button>\n </div>\n ) : null}\n </div>\n );\n});\n"],"names":["jsx","useSortable","useMemo","getColumnLabel","applyHighlighting","useCallback","jsxs","Option","IconButton","isCalculatedColumn","Icon","forwardRef","ColumnPicker","useWindow","useComponentCssInjection","columnPickerCss","useColumnPicker","useRef","ColumnChangeSource","Input","DragDropProvider","ListBox","Button"],"mappings":";;;;;;;;;;;;;;;AAoCA,MAAM,SAAY,GAAA,iBAAA;AACX,MAAM,iBAAoB,GAAA;AAUjC,MAAM,UAAa,mBAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,QAAS,EAAA,CAAA;AAC5C,MAAM,eAAmC,EAAC;AAE1C,MAAM,UAAA,GAAa,CAAC,EAAA,EAAY,KAAkB,KAAA;AAChD,EAAA,MAAM,EAAE,SAAW,EAAA,iBAAA,EAAmB,GAAK,EAAA,WAAA,KAAgBC,oBAAY,CAAA;AAAA,IACrE,EAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,CAAC,SAAA,EAAW,GAAG,CAAA,GAAIC,cAAQ,MAAM;AACrC,IAAO,OAAA,CAAC,mBAAmB,WAAW,CAAA;AAAA,GACrC,EAAA,CAAC,iBAAmB,EAAA,WAAW,CAAC,CAAA;AAEnC,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AAEA,MAAM,yBAAyB,CAAC;AAAA,EAC9B,SAAW,EAAA,aAAA;AAAA,EACX,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAgB,GAAA,EAAA;AAAA,EAChB,GAAG;AACL,CAKM,KAAA;AACJ,EAAA,MAAM,EAAE,SAAW,EAAA,GAAA,KAAQ,UAAW,CAAA,MAAA,CAAO,MAAM,KAAK,CAAA;AACxD,EAAM,MAAA,KAAA,GAAQC,wBAAe,MAA0B,CAAA;AACvD,EAAM,MAAA,qBAAA,GAAwBC,0BAAkB,CAAA,KAAA,EAAO,aAAa,CAAA;AAEpE,EAAA,MAAM,uBAA0B,GAAAC,iBAAA;AAAA,IAG9B,CAAC,CAAM,KAAA;AACL,MAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,MAAA,QAAA,GAAW,CAAC,CAAA;AAAA,KACd;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAAC,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,aAAA,EAAe,iBAAiB,CAAA;AAAA,MAC9C,aAAW,MAAO,CAAA,IAAA;AAAA,MAClB,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAP,cAAA;AAAA,UAACQ,wBAAA;AAAA,UAAA;AAAA,YACC,eAAa,EAAA,IAAA;AAAA,YACb,UAAW,EAAA,aAAA;AAAA,YACX,IAAK,EAAA,WAAA;AAAA,YACL,GAAK,EAAA,SAAA;AAAA,YACL,IAAM,EAAA;AAAA;AAAA,SACR;AAAA,QACCC,2BAAA,CAAmB,MAAO,CAAA,IAAI,CAC7B,mBAAAT,cAAA,CAACU,sBAAK,SAAU,EAAA,yBAAA,EAA0B,IAAK,EAAA,UAAA,EAAW,CACxD,GAAA,IAAA;AAAA,uCACH,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAsB,EAAA,qBAAA,EAAA,CAAA;AAAA,wBAC7DV,cAAA;AAAA,UAACQ,wBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,iBAAiB,CAAA,OAAA,CAAA;AAAA,YAC/B,eAAa,EAAA,IAAA;AAAA,YACb,UAAW,EAAA,aAAA;AAAA,YACX,IAAK,EAAA,OAAA;AAAA,YACL,OAAS,EAAA,uBAAA;AAAA,YACT,IAAM,EAAA;AAAA;AAAA;AACR;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,SAAW,EAAA,aAAA;AAAA,EACX,KAAA;AAAA,EACA,MAAQ,EAAA,IAAA;AAAA,EACR,KAAA;AAAA,EACA,aAAgB,GAAA,EAAA;AAAA,EAChB,GAAG;AACL,CAKM,KAAA;AACJ,EAAM,MAAA,KAAA,GAAQL,wBAAe,IAAwB,CAAA;AACrD,EAAM,MAAA,qBAAA,GAAwBC,0BAAkB,CAAA,KAAA,EAAO,aAAa,CAAA;AAEpE,EACE,uBAAAE,eAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,aAAA,EAAe,iBAAiB,CAAA;AAAA,MAC9C,aAAW,IAAK,CAAA,IAAA;AAAA,MAEhB,QAAA,EAAA;AAAA,wBAAAP,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAU,QAAsB,EAAA,qBAAA,EAAA,CAAA;AAAA,wBAC7DA,cAAA;AAAA,UAACQ,wBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,iBAAiB,CAAA,OAAA,CAAA;AAAA,YAC/B,eAAa,EAAA,IAAA;AAAA,YACb,UAAW,EAAA,aAAA;AAAA,YACX,IAAK,EAAA,MAAA;AAAA,YACL,OAAS,EAAA,KAAA;AAAA,YACT,IAAM,EAAA;AAAA;AAAA;AACR;AAAA;AAAA,GACF;AAEJ,CAAA;AAEa,MAAA,YAAA,GAAeG,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,2BAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,6BAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAW,GAAA,YAAA;AAAA,EACX,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,iBAAA,GAAoBV,iBAAsC,CAAA,CAAC,EAAO,KAAA;AACtE,IAAA,UAAA,CAAW,MAAM;AACf,MAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA;AAAA,OACjC,GAAG,CAAA;AAAA,GACR,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA;AAAA,IACJ,gBAAA;AAAA,IACA,uBAAA;AAAA,IACA,mBAAA;AAAA,IACA,4BAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,MACEW,+BAAgB,CAAA;AAAA,IAClB;AAAA,GACD,CAAA;AACD,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAE3C,EAAM,MAAA,aAAA,GAAgB,CAAC,MAAyB,KAAA;AAC9C,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA,EAAE,IAAK,EAAA,GAAI,MAAO,CAAA,OAAA;AACxB,MAAA,IAAI,IAAM,EAAA;AACR,QAAO,OAAA,IAAA;AAAA;AACT;AAEF,IAAA,MAAM,MAAM,6CAA6C,CAAA;AAAA,GAC3D;AAEA,EAAM,MAAA,aAAA,GAAgBZ,kBAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SACJ,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiC,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,MAAM,qBAAqB,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,aAAa,CAAA;AAClE,QAAY,WAAA,CAAA,sBAAA;AAAA,UACV,kBAAA;AAAA,UACAa,8BAAmB,CAAA;AAAA,SACrB;AAAA;AACF,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,MAAM,+BAA+B,eAAgB,CAAA,IAAA;AAAA,IAAK,CAAC,MAAA,KACzDT,2BAAmB,CAAA,MAAA,CAAO,IAAI;AAAA,GAChC;AACA,EACE,uBAAAH,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAClC,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG;AAAA,OAClC,CAAA;AAAA,MACD,GAAK,EAAA,YAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAAN,cAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,OAAA,CAAA,EAAW,MAAK,QAC3C,EAAA,QAAA,kBAAAA,cAAA;AAAA,UAACmB,UAAA;AAAA,UAAA;AAAA,YACC,cAAgB,EAAA,UAAA;AAAA,YAChB,WAAY,EAAA,aAAA;AAAA,YACZ,GAAK,EAAA,iBAAA;AAAA,YACL,KAAO,EAAA,UAAA;AAAA,YACP,QAAU,EAAA;AAAA;AAAA,SAEd,EAAA,CAAA;AAAA,wBAECb,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,8BAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAAN,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,kBAAkB,QAAe,EAAA,iBAAA,EAAA,CAAA;AAAA,0BAC7DA,cAAA,CAACoB,yBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAApB,cAAA;AAAA,YAACqB,YAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,aAAA,CAAA;AAAA,cACvB,iBAAA;AAAA,cACA,GAAK,EAAA,OAAA;AAAA,cACL,QAAA;AAAA,cAEC,QAAgB,EAAA,eAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,KAC5B,qBAAArB,cAAA;AAAA,gBAAC,sBAAA;AAAA,gBAAA;AAAA,kBACC,MAAA;AAAA,kBACA,KAAA;AAAA,kBAEA,QAAU,EAAA,4BAAA;AAAA,kBACV,aAAA,EAAe,WAAW,WAAY,EAAA;AAAA,kBACtC,KAAO,EAAA;AAAA,iBAAA;AAAA,gBAHF,MAAO,CAAA;AAAA,eAKf;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,0BAEAA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,EAAA;AAAA,gBACT,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,gBACZ,GAAG,SAAS,CAAA,gBAAA;AAAA,eACd;AAAA,cACD,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACAA,cAAA;AAAA,YAACqB,YAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,cACvB,QAAU,EAAA,YAAA;AAAA,cAET,QAAiB,EAAA,gBAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,KAC7B,qBAAArB,cAAA;AAAA,gBAAC,uBAAA;AAAA,gBAAA;AAAA,kBACC,MAAA;AAAA,kBACA,KAAA;AAAA,kBAEA,KAAO,EAAA,uBAAA;AAAA,kBACP,aAAA,EAAe,WAAW,WAAY,EAAA;AAAA,kBACtC,KAAO,EAAA;AAAA,iBAAA;AAAA,gBAHF,MAAO,CAAA;AAAA,eAKf;AAAA;AAAA;AACH,SACF,EAAA,CAAA;AAAA,QACC,2BACC,mBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,eAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA,CAACsB,WAAO,EAAA,EAAA,OAAA,EAAS,6BAA+B,EAAA,QAAA,EAAA,0BAAA,EAEhD,GACF,CACE,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAC;;;;;"}
package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - 20px);\n --vuu-icon-size: 8px;\n --vuu-icon-top: -2px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 2px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 2px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n &.saltDropdown:focus {\n outline: none;\n }\n }\n\n .vuuTableDropdownCell:focus {\n border: solid 2px var(--salt-focused-outlineColor);\n }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n} */\n";
1
+ var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% - var(--salt-spacing-300));\n --vuu-icon-size: 8px;\n --vuu-icon-top: -3px;\n --salt-focused-outlineStyle: none;\n --saltButton-borderRadius: 2px;\n\n border: solid 1px var(--salt-editable-borderColor);\n border-radius: 2px;\n position: relative;\n font-weight: 500;\n height: var(--vuu-table-embedded-control-height);\n min-height: var(--vuu-table-embedded-control-height);\n text-align: left;\n\n button:focus-visible {\n --saltButton-borderColor: var(--salt-focused-outlineColor);\n --saltButton-borderWidth: 2px;\n padding-left: 7px;\n }\n &.saltDropdown:focus {\n outline: none;\n }\n }\n\n .vuuTableDropdownCell:focus {\n border: solid 2px var(--salt-focused-outlineColor);\n }\n}\n\n/* .vuuTableCell:focus .vuuTableInputCell.saltInput-primary,\n.vuuTableInputCell.saltInput-primary.saltInput-focused {\n border: solid 2px var(--salt-focused-outlineColor);\n padding: 0 3px;\n} */\n";
2
2
 
3
3
  export { dropdownCellCss as default };
4
4
  //# sourceMappingURL=DropdownCell.css.js.map
package/esm/cell-renderers/dropdown-cell/DropdownCell.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { useLookupValues } from '@vuu-ui/vuu-data-react';
3
3
  import { getSelectedOption, isRpcSuccess, dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
4
+ import cx from 'clsx';
4
5
  import { Dropdown, Option } from '@salt-ds/core';
5
6
  import { useComponentCssInjection } from '@salt-ds/styles';
6
7
  import { useWindow } from '@salt-ds/window';
@@ -8,80 +9,90 @@ import { memo, useState, useRef, useMemo, useCallback } from 'react';
8
9
  import dropdownCellCss from './DropdownCell.css.js';
9
10
 
10
11
  const classBase = "vuuTableDropdownCell";
11
- const DropdownCell = memo(function DropdownCell2({
12
- column,
13
- dataRow,
14
- onEdit
15
- }) {
16
- const targetWindow = useWindow();
17
- useComponentCssInjection({
18
- testId: "vuu-dropdown-cell",
19
- css: dropdownCellCss,
20
- window: targetWindow
21
- });
22
- const [open, setOpen] = useState(false);
23
- const dataValue = dataRow[column.name];
24
- const { values } = useLookupValues(column, dataValue);
25
- const valueRef = useRef(void 0);
26
- useMemo(() => {
27
- valueRef.current = getSelectedOption(values, dataValue);
28
- }, [dataValue, values]);
29
- const handleOpenChange = useCallback((isOpen) => {
30
- console.log(`handleOpenChange ${isOpen}`);
31
- if (isOpen === false) {
32
- setOpen(false);
12
+ const DropdownCell = memo(
13
+ function DropdownCell2({
14
+ column,
15
+ dataRow,
16
+ editedDuringCurrentSession,
17
+ onEdit
18
+ }) {
19
+ const targetWindow = useWindow();
20
+ useComponentCssInjection({
21
+ testId: "vuu-dropdown-cell",
22
+ css: dropdownCellCss,
23
+ window: targetWindow
24
+ });
25
+ if (editedDuringCurrentSession) {
26
+ console.log(`${column.name} edited ${editedDuringCurrentSession}`);
33
27
  }
34
- }, []);
35
- const handleSelectionChange = useCallback(
36
- async (evt, [selectedOption2]) => {
37
- if (selectedOption2) {
38
- const response = await onEdit?.(
39
- {
40
- editType: "commit",
41
- previousValue: valueRef.current?.value,
42
- value: selectedOption2.value
43
- },
44
- "commit"
45
- );
46
- if (isRpcSuccess(response)) {
47
- dispatchCustomEvent(evt.target, "vuu-commit");
48
- }
28
+ const [open, setOpen] = useState(false);
29
+ const dataValue = dataRow[column.name];
30
+ const { values } = useLookupValues(column, dataValue);
31
+ const valueRef = useRef(void 0);
32
+ useMemo(() => {
33
+ valueRef.current = getSelectedOption(values, dataValue);
34
+ }, [dataValue, values]);
35
+ const handleOpenChange = useCallback((isOpen) => {
36
+ console.log(`handleOpenChange ${isOpen}`);
37
+ if (isOpen === false) {
38
+ setOpen(false);
49
39
  }
50
- },
51
- [onEdit]
52
- );
53
- const handleClick = useCallback(() => {
54
- if (!open) {
55
- setOpen(true);
56
- }
57
- }, [open]);
58
- const handleKeyDown = useCallback(
59
- (e) => {
60
- if (e.key === "Enter" && !open) {
61
- e.preventDefault();
62
- e.stopPropagation();
40
+ }, []);
41
+ const handleSelectionChange = useCallback(
42
+ async (evt, [selectedOption2]) => {
43
+ if (selectedOption2) {
44
+ const response = await onEdit?.(
45
+ {
46
+ editType: "commit",
47
+ isValid: true,
48
+ previousValue: valueRef.current?.value,
49
+ value: selectedOption2.value
50
+ },
51
+ "commit"
52
+ );
53
+ if (isRpcSuccess(response)) {
54
+ dispatchCustomEvent(evt.target, "vuu-commit");
55
+ }
56
+ }
57
+ },
58
+ [onEdit]
59
+ );
60
+ const handleClick = useCallback(() => {
61
+ if (!open) {
63
62
  setOpen(true);
64
63
  }
65
- },
66
- [open]
67
- );
68
- const { current: selectedOption } = valueRef;
69
- return /* @__PURE__ */ jsx(
70
- Dropdown,
71
- {
72
- className: classBase,
73
- "data-icon": "triangle-down",
74
- onClick: handleClick,
75
- onKeyDownCapture: handleKeyDown,
76
- onOpenChange: handleOpenChange,
77
- onSelectionChange: handleSelectionChange,
78
- open,
79
- selected: selectedOption ? [selectedOption] : [],
80
- value: selectedOption?.label,
81
- children: values.map((listOption, i) => /* @__PURE__ */ jsx(Option, { value: listOption, children: listOption.label }, i))
82
- }
83
- );
84
- }, dataColumnAndKeyUnchanged);
64
+ }, [open]);
65
+ const handleKeyDown = useCallback(
66
+ (e) => {
67
+ if (e.key === "Enter" && !open) {
68
+ e.preventDefault();
69
+ e.stopPropagation();
70
+ setOpen(true);
71
+ }
72
+ },
73
+ [open]
74
+ );
75
+ const { current: selectedOption } = valueRef;
76
+ return /* @__PURE__ */ jsx(
77
+ Dropdown,
78
+ {
79
+ className: cx(classBase, {
80
+ [`${classBase}-edited`]: editedDuringCurrentSession === true
81
+ }),
82
+ "data-icon": "triangle-down",
83
+ onClick: handleClick,
84
+ onKeyDownCapture: handleKeyDown,
85
+ onOpenChange: handleOpenChange,
86
+ onSelectionChange: handleSelectionChange,
87
+ open,
88
+ selected: selectedOption ? [selectedOption] : [],
89
+ value: selectedOption?.label,
90
+ children: values.map((listOption, i) => /* @__PURE__ */ jsx(Option, { value: listOption, children: listOption.label }, i))
91
+ }
92
+ );
93
+ },
94
+ (p, p1) => p.editedDuringCurrentSession !== p1.editedDuringCurrentSession && dataColumnAndKeyUnchanged(p, p1)
95
+ );
85
96
  registerComponent("dropdown-cell", DropdownCell, "cell-renderer", {
86
97
  userCanAssign: false
87
98
  });
package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n isRpcSuccess,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n dataRow,\n onEdit,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataValue = dataRow[column.name] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>(undefined);\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (isRpcSuccess(response)) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":"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"}
1
+ {"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n isRpcSuccess,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(\n function DropdownCell({\n column,\n dataRow,\n editedDuringCurrentSession,\n onEdit,\n }: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n if (editedDuringCurrentSession) {\n console.log(`${column.name} edited ${editedDuringCurrentSession}`);\n }\n\n const [open, setOpen] = useState(false);\n const dataValue = dataRow[column.name] as string | number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>(undefined);\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n isValid: true,\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (isRpcSuccess(response)) {\n // TODO this should be done in TableCell\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={cx(classBase, {\n [`${classBase}-edited`]: editedDuringCurrentSession === true,\n })}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n },\n (p: TableCellRendererProps, p1: TableCellRendererProps) =>\n p.editedDuringCurrentSession !== p1.editedDuringCurrentSession &&\n dataColumnAndKeyUnchanged(p, p1),\n);\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":"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"}
package/esm/column-picker/ColumnPicker.js CHANGED
@@ -5,7 +5,7 @@ import { isCalculatedColumn, DragDropProvider, getColumnLabel, useSortable } fro
5
5
  import cx from 'clsx';
6
6
  import { forwardRef, useCallback, useRef, useMemo } from 'react';
7
7
  import { Input, ListBox, Button, Option } from '@salt-ds/core';
8
- import { useHighlighting } from '@vuu-ui/vuu-table';
8
+ import { applyHighlighting } from '@vuu-ui/vuu-table';
9
9
  import { IconButton, Icon } from '@vuu-ui/vuu-ui-controls';
10
10
  import { ColumnChangeSource } from './ColumnModel.js';
11
11
  import { useColumnPicker } from './useColumnPicker.js';
@@ -38,7 +38,7 @@ const SelectedColumnListItem = ({
38
38
  }) => {
39
39
  const { handleRef, ref } = useSorting(column.name, index);
40
40
  const value = getColumnLabel(column);
41
- const valueWithHighlighting = useHighlighting(value, searchPattern);
41
+ const valueWithHighlighting = applyHighlighting(value, searchPattern);
42
42
  const handleRemoveButtonClick = useCallback(
43
43
  (e) => {
44
44
  e.stopPropagation();
@@ -90,7 +90,7 @@ const AvailableColumnListItem = ({
90
90
  ...optionProps
91
91
  }) => {
92
92
  const value = getColumnLabel(item);
93
- const valueWithHighlighting = useHighlighting(value, searchPattern);
93
+ const valueWithHighlighting = applyHighlighting(value, searchPattern);
94
94
  return /* @__PURE__ */ jsxs(
95
95
  Option,
96
96
  {
package/esm/column-picker/ColumnPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n DragDropProvider,\n getColumnLabel,\n isCalculatedColumn,\n useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n MouseEventHandler,\n RefCallback,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\n\nimport {\n Button,\n Input,\n ListBox,\n ListBoxProps,\n Option,\n OptionProps,\n} from \"@salt-ds/core\";\nimport { useHighlighting } from \"@vuu-ui/vuu-table\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnChangeSource } from \"./ColumnModel\";\nimport { ColumnPickerHookProps, useColumnPicker } from \"./useColumnPicker\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n extends ColumnPickerHookProps,\n Pick<ListBoxProps<ColumnDescriptor>, \"selected\" | \"onSelectionChange\">,\n HTMLAttributes<HTMLDivElement> {\n allowCreateCalculatedColumn?: boolean;\n onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: ColumnDescriptor[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n id,\n index,\n });\n\n const [handleRef, ref] = useMemo(() => {\n return [sortableHandleRef, sortableRef];\n }, [sortableHandleRef, sortableRef]);\n\n return {\n handleRef,\n ref,\n };\n};\n\nconst SelectedColumnListItem = ({\n className: classNameProp,\n index,\n column,\n onRemove,\n searchPattern = \"\",\n ...optionProps\n}: OptionProps & {\n index: number;\n column: ColumnDescriptor;\n onRemove: MouseEventHandler<HTMLButtonElement>;\n searchPattern?: Lowercase<string>;\n}) => {\n const { handleRef, ref } = useSorting(column.name, index);\n const value = getColumnLabel(column as ColumnDescriptor);\n const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n const handleRemoveButtonClick = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n (e) => {\n e.stopPropagation();\n onRemove?.(e);\n },\n [onRemove],\n );\n\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={column.name}\n ref={ref}\n >\n <IconButton\n data-embedded\n appearance=\"transparent\"\n icon=\"draggable\"\n ref={handleRef}\n size={16}\n />\n {isCalculatedColumn(column.name) ? (\n <Icon className=\"vuuCalculatedColumnIcon\" name=\"function\" />\n ) : null}\n <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n <IconButton\n className={`${classBaseListItem}-action`}\n data-embedded\n appearance=\"transparent\"\n icon=\"cross\"\n onClick={handleRemoveButtonClick}\n size={16}\n />\n </Option>\n );\n};\n\nconst AvailableColumnListItem = ({\n className: classNameProp,\n index,\n column: item,\n onAdd,\n searchPattern = \"\",\n ...optionProps\n}: OptionProps & {\n index: number;\n column: ColumnDescriptor;\n onAdd: MouseEventHandler<HTMLButtonElement>;\n searchPattern?: Lowercase<string>;\n}) => {\n const value = getColumnLabel(item as ColumnDescriptor);\n const valueWithHighlighting = useHighlighting(value, searchPattern);\n\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item.name}\n >\n <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n <IconButton\n className={`${classBaseListItem}-action`}\n data-embedded\n appearance=\"transparent\"\n icon=\"plus\"\n onClick={onAdd}\n size={16}\n />\n </Option>\n );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n {\n allowCreateCalculatedColumn,\n columnModel,\n className,\n onClickCreateCalculatedColumn,\n onSelectionChange,\n selected = NO_SELECTION,\n ...htmlAttributes\n }: ColumnPickerProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-picker\",\n css: columnPickerCss,\n window: targetWindow,\n });\n\n const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n setTimeout(() => {\n el?.querySelector(\"input\")?.focus();\n }, 100);\n }, []);\n\n const {\n availableColumns,\n onAddItemToSelectedList,\n onChangeSearchInput,\n onRemoveItemFromSelectedList,\n searchText,\n selectedColumns,\n } = useColumnPicker({\n columnModel: columnModel,\n });\n const listRef = useRef<HTMLDivElement>(null);\n\n const getOptionName = (option?: HTMLElement) => {\n if (option) {\n const { name } = option.dataset;\n if (name) {\n return name;\n }\n }\n throw Error(\"[ColumnPicker] list option has no data-name\");\n };\n\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems =\n listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n if (listItems) {\n const orderedColumnNames = Array.from(listItems).map(getOptionName);\n columnModel.reorderSelectedColumns(\n orderedColumnNames,\n ColumnChangeSource.ColumnPicker,\n );\n }\n }, 300);\n }, [columnModel]);\n\n const oneOrMoreColumnsIsCalculated = selectedColumns.some((column) =>\n isCalculatedColumn(column.name),\n );\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withCalculated`]: oneOrMoreColumnsIsCalculated,\n })}\n ref={forwardedRef}\n >\n <form className={`${classBase}-search`} role=\"search\">\n <Input\n startAdornment={searchIcon}\n placeholder=\"Find column\"\n ref={searchCallbackRef}\n value={searchText}\n onChange={onChangeSearchInput}\n />\n </form>\n\n <div className={`${classBase}-scrollContainer vuuScrollable`}>\n <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n <DragDropProvider onDragEnd={handleDragEnd}>\n <ListBox\n className={`${classBase}-selectedList`}\n onSelectionChange={onSelectionChange}\n ref={listRef}\n selected={selected}\n >\n {selectedColumns.map((column, index) => (\n <SelectedColumnListItem\n column={column}\n index={index}\n key={column.name}\n onRemove={onRemoveItemFromSelectedList}\n searchPattern={searchText.toLowerCase() as Lowercase<string>}\n value={column}\n />\n ))}\n </ListBox>\n </DragDropProvider>\n\n <div\n className={cx(\n `${classBase}-sectionHeader`,\n `${classBase}-availableHeader`,\n )}\n >\n Available columns\n </div>\n <ListBox\n className={`${classBase}-availableList`}\n selected={NO_SELECTION}\n >\n {availableColumns.map((column, index) => (\n <AvailableColumnListItem\n column={column}\n index={index}\n key={column.name}\n onAdd={onAddItemToSelectedList}\n searchPattern={searchText.toLowerCase() as Lowercase<string>}\n value={column}\n />\n ))}\n </ListBox>\n </div>\n {allowCreateCalculatedColumn ? (\n <div className={`${classBase}-column-buttons`}>\n <Button onClick={onClickCreateCalculatedColumn}>\n Create calculated column\n </Button>\n </div>\n ) : null}\n </div>\n );\n});\n"],"names":["ColumnPicker"],"mappings":"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"}
1
+ {"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/ColumnPicker.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n DragDropProvider,\n getColumnLabel,\n isCalculatedColumn,\n useSortable,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport {\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n MouseEventHandler,\n RefCallback,\n useCallback,\n useMemo,\n useRef,\n} from \"react\";\n\nimport {\n Button,\n Input,\n ListBox,\n ListBoxProps,\n Option,\n OptionProps,\n} from \"@salt-ds/core\";\nimport { applyHighlighting } from \"@vuu-ui/vuu-table\";\nimport { Icon, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnChangeSource } from \"./ColumnModel\";\nimport { ColumnPickerHookProps, useColumnPicker } from \"./useColumnPicker\";\n\nimport columnPickerCss from \"./ColumnPicker.css\";\n\nconst classBase = \"vuuColumnPicker\";\nexport const classBaseListItem = \"vuuColumnPickerListItem\";\n\nexport interface ColumnPickerProps\n extends ColumnPickerHookProps,\n Pick<ListBoxProps<ColumnDescriptor>, \"selected\" | \"onSelectionChange\">,\n HTMLAttributes<HTMLDivElement> {\n allowCreateCalculatedColumn?: boolean;\n onClickCreateCalculatedColumn?: MouseEventHandler<HTMLButtonElement>;\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\nconst NO_SELECTION: ColumnDescriptor[] = [] as const;\n\nconst useSorting = (id: string, index: number) => {\n const { handleRef: sortableHandleRef, ref: sortableRef } = useSortable({\n id,\n index,\n });\n\n const [handleRef, ref] = useMemo(() => {\n return [sortableHandleRef, sortableRef];\n }, [sortableHandleRef, sortableRef]);\n\n return {\n handleRef,\n ref,\n };\n};\n\nconst SelectedColumnListItem = ({\n className: classNameProp,\n index,\n column,\n onRemove,\n searchPattern = \"\",\n ...optionProps\n}: OptionProps & {\n index: number;\n column: ColumnDescriptor;\n onRemove: MouseEventHandler<HTMLButtonElement>;\n searchPattern?: Lowercase<string>;\n}) => {\n const { handleRef, ref } = useSorting(column.name, index);\n const value = getColumnLabel(column as ColumnDescriptor);\n const valueWithHighlighting = applyHighlighting(value, searchPattern);\n\n const handleRemoveButtonClick = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n (e) => {\n e.stopPropagation();\n onRemove?.(e);\n },\n [onRemove],\n );\n\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={column.name}\n ref={ref}\n >\n <IconButton\n data-embedded\n appearance=\"transparent\"\n icon=\"draggable\"\n ref={handleRef}\n size={16}\n />\n {isCalculatedColumn(column.name) ? (\n <Icon className=\"vuuCalculatedColumnIcon\" name=\"function\" />\n ) : null}\n <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n <IconButton\n className={`${classBaseListItem}-action`}\n data-embedded\n appearance=\"transparent\"\n icon=\"cross\"\n onClick={handleRemoveButtonClick}\n size={16}\n />\n </Option>\n );\n};\n\nconst AvailableColumnListItem = ({\n className: classNameProp,\n index,\n column: item,\n onAdd,\n searchPattern = \"\",\n ...optionProps\n}: OptionProps & {\n index: number;\n column: ColumnDescriptor;\n onAdd: MouseEventHandler<HTMLButtonElement>;\n searchPattern?: Lowercase<string>;\n}) => {\n const value = getColumnLabel(item as ColumnDescriptor);\n const valueWithHighlighting = applyHighlighting(value, searchPattern);\n\n return (\n <Option\n {...optionProps}\n className={cx(classNameProp, classBaseListItem)}\n data-name={item.name}\n >\n <span className={`${classBase}-text`}>{valueWithHighlighting}</span>\n <IconButton\n className={`${classBaseListItem}-action`}\n data-embedded\n appearance=\"transparent\"\n icon=\"plus\"\n onClick={onAdd}\n size={16}\n />\n </Option>\n );\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n {\n allowCreateCalculatedColumn,\n columnModel,\n className,\n onClickCreateCalculatedColumn,\n onSelectionChange,\n selected = NO_SELECTION,\n ...htmlAttributes\n }: ColumnPickerProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-column-picker\",\n css: columnPickerCss,\n window: targetWindow,\n });\n\n const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n setTimeout(() => {\n el?.querySelector(\"input\")?.focus();\n }, 100);\n }, []);\n\n const {\n availableColumns,\n onAddItemToSelectedList,\n onChangeSearchInput,\n onRemoveItemFromSelectedList,\n searchText,\n selectedColumns,\n } = useColumnPicker({\n columnModel: columnModel,\n });\n const listRef = useRef<HTMLDivElement>(null);\n\n const getOptionName = (option?: HTMLElement) => {\n if (option) {\n const { name } = option.dataset;\n if (name) {\n return name;\n }\n }\n throw Error(\"[ColumnPicker] list option has no data-name\");\n };\n\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems =\n listRef.current?.querySelectorAll<HTMLDivElement>(\".saltOption\");\n if (listItems) {\n const orderedColumnNames = Array.from(listItems).map(getOptionName);\n columnModel.reorderSelectedColumns(\n orderedColumnNames,\n ColumnChangeSource.ColumnPicker,\n );\n }\n }, 300);\n }, [columnModel]);\n\n const oneOrMoreColumnsIsCalculated = selectedColumns.some((column) =>\n isCalculatedColumn(column.name),\n );\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withCalculated`]: oneOrMoreColumnsIsCalculated,\n })}\n ref={forwardedRef}\n >\n <form className={`${classBase}-search`} role=\"search\">\n <Input\n startAdornment={searchIcon}\n placeholder=\"Find column\"\n ref={searchCallbackRef}\n value={searchText}\n onChange={onChangeSearchInput}\n />\n </form>\n\n <div className={`${classBase}-scrollContainer vuuScrollable`}>\n <div className={`${classBase}-sectionHeader`}>Columns in view</div>\n <DragDropProvider onDragEnd={handleDragEnd}>\n <ListBox\n className={`${classBase}-selectedList`}\n onSelectionChange={onSelectionChange}\n ref={listRef}\n selected={selected}\n >\n {selectedColumns.map((column, index) => (\n <SelectedColumnListItem\n column={column}\n index={index}\n key={column.name}\n onRemove={onRemoveItemFromSelectedList}\n searchPattern={searchText.toLowerCase() as Lowercase<string>}\n value={column}\n />\n ))}\n </ListBox>\n </DragDropProvider>\n\n <div\n className={cx(\n `${classBase}-sectionHeader`,\n `${classBase}-availableHeader`,\n )}\n >\n Available columns\n </div>\n <ListBox\n className={`${classBase}-availableList`}\n selected={NO_SELECTION}\n >\n {availableColumns.map((column, index) => (\n <AvailableColumnListItem\n column={column}\n index={index}\n key={column.name}\n onAdd={onAddItemToSelectedList}\n searchPattern={searchText.toLowerCase() as Lowercase<string>}\n value={column}\n />\n ))}\n </ListBox>\n </div>\n {allowCreateCalculatedColumn ? (\n <div className={`${classBase}-column-buttons`}>\n <Button onClick={onClickCreateCalculatedColumn}>\n Create calculated column\n </Button>\n </div>\n ) : null}\n </div>\n );\n});\n"],"names":["ColumnPicker"],"mappings":"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"}
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
- "version": "2.1.15",
2
+ "version": "2.1.17",
3
3
  "author": "heswell",
4
4
  "license": "Apache-2.0",
5
5
  "devDependencies": {
6
- "@vuu-ui/vuu-filter-types": "2.1.15",
7
- "@vuu-ui/vuu-protocol-types": "2.1.15"
6
+ "@vuu-ui/vuu-filter-types": "2.1.17",
7
+ "@vuu-ui/vuu-protocol-types": "2.1.17"
8
8
  },
9
9
  "dependencies": {
10
- "@vuu-ui/vuu-codemirror": "2.1.15",
11
- "@vuu-ui/vuu-data-react": "2.1.15",
12
- "@vuu-ui/vuu-data-types": "2.1.15",
13
- "@vuu-ui/vuu-table-types": "2.1.15",
14
- "@vuu-ui/vuu-popups": "2.1.15",
15
- "@vuu-ui/vuu-table": "2.1.15",
16
- "@vuu-ui/vuu-utils": "2.1.15",
17
- "@vuu-ui/vuu-ui-controls": "2.1.15",
10
+ "@vuu-ui/vuu-codemirror": "2.1.17",
11
+ "@vuu-ui/vuu-data-react": "2.1.17",
12
+ "@vuu-ui/vuu-data-types": "2.1.17",
13
+ "@vuu-ui/vuu-table-types": "2.1.17",
14
+ "@vuu-ui/vuu-popups": "2.1.17",
15
+ "@vuu-ui/vuu-table": "2.1.17",
16
+ "@vuu-ui/vuu-utils": "2.1.17",
17
+ "@vuu-ui/vuu-ui-controls": "2.1.17",
18
18
  "@lezer/lr": "1.4.2",
19
19
  "@salt-ds/core": "1.54.1",
20
20
  "@salt-ds/lab": "1.0.0-alpha.83",