@vuu-ui/vuu-table-extras 2.1.10 → 2.1.12
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/cell-renderers/dropdown-cell/DropdownCell.css.js +1 -1
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js +1 -0
- package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.css.js +1 -1
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js +1 -0
- package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map +1 -1
- package/package.json +11 -11
|
@@ -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% -
|
|
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
|
|
@@ -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":";;;;;;;;;;;AA0BA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,YAAA,GAAeA,UAAK,CAAA,SAASC,aAAa,CAAA;AAAA,EACrD,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,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,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAA,MAAM,EAAE,MAAA,EAAW,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA;AACpD,EAAM,MAAA,QAAA,GAAWC,aAAmB,KAAS,CAAA,CAAA;AAE7C,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAS,QAAA,CAAA,OAAA,GAAUC,0BAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA;AAAA,GACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA;AAEtB,EAAM,MAAA,gBAAA,GAAmBC,iBAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAoB,iBAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AACxC,IAAA,IAAI,WAAW,KAAO,EAAA;AACpB,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA;AACf,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,qBAAwB,GAAAA,iBAAA;AAAA,IAC5B,OAAO,GAAA,EAAqB,CAACC,eAAc,CAAoB,KAAA;AAC7D,MAAA,IAAIA,eAAgB,EAAA;AAKlB,QAAA,MAAM,WAAW,MAAM,MAAA;AAAA,UACrB;AAAA,YACE,QAAU,EAAA,QAAA;AAAA,YACV,aAAA,EAAe,SAAS,OAAS,EAAA,KAAA;AAAA,YACjC,OAAOA,eAAe,CAAA;AAAA,WACxB;AAAA,UACA;AAAA,SACF;AACA,QAAI,IAAAC,qBAAA,CAAa,QAAQ,CAAG,EAAA;
|
|
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 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<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,4 +1,4 @@
|
|
|
1
|
-
var dropdownCellCss = ".vuuTableCell {\n .vuuTableDropdownCell {\n --vuu-icon-height: 15px;\n --vuu-icon-left: calc(100% -
|
|
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
|
|
@@ -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":";;;;;;;;;AA0BA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,YAAA,GAAe,IAAK,CAAA,SAASA,aAAa,CAAA;AAAA,EACrD,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAM,MAAA,SAAA,GAAY,OAAQ,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAA,MAAM,EAAE,MAAA,EAAW,GAAA,eAAA,CAAgB,QAAQ,SAAS,CAAA;AACpD,EAAM,MAAA,QAAA,GAAW,OAAmB,KAAS,CAAA,CAAA;AAE7C,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAS,QAAA,CAAA,OAAA,GAAU,iBAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA;AAAA,GACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA;AAEtB,EAAM,MAAA,gBAAA,GAAmB,WAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAoB,iBAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AACxC,IAAA,IAAI,WAAW,KAAO,EAAA;AACpB,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA;AACf,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,OAAO,GAAA,EAAqB,CAACC,eAAc,CAAoB,KAAA;AAC7D,MAAA,IAAIA,eAAgB,EAAA;AAKlB,QAAA,MAAM,WAAW,MAAM,MAAA;AAAA,UACrB;AAAA,YACE,QAAU,EAAA,QAAA;AAAA,YACV,aAAA,EAAe,SAAS,OAAS,EAAA,KAAA;AAAA,YACjC,OAAOA,eAAe,CAAA;AAAA,WACxB;AAAA,UACA;AAAA,SACF;AACA,QAAI,IAAA,YAAA,CAAa,QAAQ,CAAG,EAAA;
|
|
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 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<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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"}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.1.
|
|
2
|
+
"version": "2.1.12",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-filter-types": "2.1.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "2.1.
|
|
6
|
+
"@vuu-ui/vuu-filter-types": "2.1.12",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "2.1.12"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@vuu-ui/vuu-codemirror": "2.1.
|
|
11
|
-
"@vuu-ui/vuu-data-react": "2.1.
|
|
12
|
-
"@vuu-ui/vuu-data-types": "2.1.
|
|
13
|
-
"@vuu-ui/vuu-table-types": "2.1.
|
|
14
|
-
"@vuu-ui/vuu-popups": "2.1.
|
|
15
|
-
"@vuu-ui/vuu-table": "2.1.
|
|
16
|
-
"@vuu-ui/vuu-utils": "2.1.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "2.1.
|
|
10
|
+
"@vuu-ui/vuu-codemirror": "2.1.12",
|
|
11
|
+
"@vuu-ui/vuu-data-react": "2.1.12",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "2.1.12",
|
|
13
|
+
"@vuu-ui/vuu-table-types": "2.1.12",
|
|
14
|
+
"@vuu-ui/vuu-popups": "2.1.12",
|
|
15
|
+
"@vuu-ui/vuu-table": "2.1.12",
|
|
16
|
+
"@vuu-ui/vuu-utils": "2.1.12",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "2.1.12",
|
|
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",
|