@vuu-ui/vuu-ui-controls 0.13.5 → 0.13.7
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/context-panel-provider/ContextPanelProvider.js +20 -2
- package/cjs/context-panel-provider/ContextPanelProvider.js.map +1 -1
- package/cjs/editable/useEditableText.js +0 -3
- package/cjs/editable/useEditableText.js.map +1 -1
- package/cjs/sortable-list/SortableList.js +3 -4
- package/cjs/sortable-list/SortableList.js.map +1 -1
- package/esm/context-panel-provider/ContextPanelProvider.js +22 -4
- package/esm/context-panel-provider/ContextPanelProvider.js.map +1 -1
- package/esm/editable/useEditableText.js +0 -3
- package/esm/editable/useEditableText.js.map +1 -1
- package/esm/sortable-list/SortableList.js +1 -2
- package/esm/sortable-list/SortableList.js.map +1 -1
- package/package.json +10 -11
|
@@ -18,6 +18,11 @@ const ContextPanelProvider = ({
|
|
|
18
18
|
}) => {
|
|
19
19
|
const { showComponentInContextPanel } = vuuLayout.useLayoutOperation();
|
|
20
20
|
const [dialog, setDialog] = React.useState(null);
|
|
21
|
+
const handleOpenChange = React.useCallback((isOpen) => {
|
|
22
|
+
if (!isOpen) {
|
|
23
|
+
setDialog(null);
|
|
24
|
+
}
|
|
25
|
+
}, []);
|
|
21
26
|
const showContextPanel = React.useCallback(
|
|
22
27
|
(componentType, title, props) => {
|
|
23
28
|
if (showContextPanelProp) {
|
|
@@ -33,11 +38,24 @@ const ContextPanelProvider = ({
|
|
|
33
38
|
""
|
|
34
39
|
);
|
|
35
40
|
setDialog(
|
|
36
|
-
/* @__PURE__ */ jsxRuntime.
|
|
41
|
+
/* @__PURE__ */ jsxRuntime.jsxs(core.Dialog, { open: true, onOpenChange: handleOpenChange, children: [
|
|
42
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
43
|
+
core.DialogCloseButton,
|
|
44
|
+
{
|
|
45
|
+
appearance: "transparent",
|
|
46
|
+
"data-embedded": true,
|
|
47
|
+
"data-icon": "close",
|
|
48
|
+
onClick: () => setDialog(null),
|
|
49
|
+
sentiment: "neutral"
|
|
50
|
+
}
|
|
51
|
+
),
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.DialogHeader, { header: title }),
|
|
53
|
+
/* @__PURE__ */ jsxRuntime.jsx(core.DialogContent, { children: component })
|
|
54
|
+
] })
|
|
37
55
|
);
|
|
38
56
|
}
|
|
39
57
|
},
|
|
40
|
-
[showComponentInContextPanel, showContextPanelProp]
|
|
58
|
+
[handleOpenChange, showComponentInContextPanel, showContextPanelProp]
|
|
41
59
|
);
|
|
42
60
|
return /* @__PURE__ */ jsxRuntime.jsxs(ContextPanelContext.Provider, { value: { showContextPanel }, children: [
|
|
43
61
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextPanelProvider.js","sources":["../../src/context-panel-provider/ContextPanelProvider.tsx"],"sourcesContent":["import {\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useState,\n} from \"react\";\nimport {\n isUnconfiguredProperty,\n layoutFromJson,\n useLayoutOperation,\n} from \"@vuu-ui/vuu-layout\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-utils\";\nimport {
|
|
1
|
+
{"version":3,"file":"ContextPanelProvider.js","sources":["../../src/context-panel-provider/ContextPanelProvider.tsx"],"sourcesContent":["import {\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useState,\n} from \"react\";\nimport {\n isUnconfiguredProperty,\n layoutFromJson,\n useLayoutOperation,\n} from \"@vuu-ui/vuu-layout\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-utils\";\nimport {\n Dialog,\n DialogCloseButton,\n DialogContent,\n DialogHeader,\n} from \"@salt-ds/core\";\n\nexport type ShowContextPanel = (\n componentType: string,\n title: string,\n componentProps: unknown,\n) => void;\n\nexport interface ContextPanelProps {\n showContextPanel: ShowContextPanel;\n}\n\nexport const ContextPanelContext = createContext<ContextPanelProps>({\n showContextPanel: () => {\n console.warn(\n \"[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider\",\n );\n },\n});\n\nexport const ContextPanelProvider = ({\n children,\n showContextPanel: showContextPanelProp,\n}: Partial<ContextPanelProps> & {\n children: ReactNode;\n}) => {\n const { showComponentInContextPanel } = useLayoutOperation();\n const [dialog, setDialog] = useState<ReactElement | null>(null);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n if (!isOpen) {\n setDialog(null);\n }\n }, []);\n\n const showContextPanel = useCallback<ShowContextPanel>(\n (componentType, title, props) => {\n if (showContextPanelProp) {\n console.log(`show context panel will use method from prop`);\n } else if (!isUnconfiguredProperty(showComponentInContextPanel)) {\n showComponentInContextPanel(\n { type: componentType, props } as LayoutJSON,\n title,\n );\n } else {\n const component = layoutFromJson(\n { type: componentType, props } as LayoutJSON,\n \"\",\n );\n setDialog(\n <Dialog open={true} onOpenChange={handleOpenChange}>\n <DialogCloseButton\n appearance=\"transparent\"\n data-embedded\n data-icon=\"close\"\n onClick={() => setDialog(null)}\n sentiment=\"neutral\"\n />\n <DialogHeader header={title} />\n <DialogContent>{component}</DialogContent>\n </Dialog>,\n );\n }\n },\n [handleOpenChange, showComponentInContextPanel, showContextPanelProp],\n );\n\n return (\n <ContextPanelContext.Provider value={{ showContextPanel }}>\n {children}\n {dialog}\n </ContextPanelContext.Provider>\n );\n};\n\nexport function useContextPanel() {\n const { showContextPanel } = useContext(ContextPanelContext);\n return showContextPanel;\n}\n"],"names":["createContext","useLayoutOperation","useState","useCallback","isUnconfiguredProperty","layoutFromJson","jsxs","Dialog","jsx","DialogCloseButton","DialogHeader","DialogContent","useContext"],"mappings":";;;;;;;AA+BO,MAAM,sBAAsBA,mBAAiC,CAAA;AAAA,EAClE,kBAAkB,MAAM;AACtB,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,KACF;AAAA;AAEJ,CAAC;AAEM,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,gBAAkB,EAAA;AACpB,CAEM,KAAA;AACJ,EAAM,MAAA,EAAE,2BAA4B,EAAA,GAAIC,4BAAmB,EAAA;AAC3D,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIC,eAA8B,IAAI,CAAA;AAE9D,EAAM,MAAA,gBAAA,GAAmBC,iBAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA;AAChB,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAAA,iBAAA;AAAA,IACvB,CAAC,aAAe,EAAA,KAAA,EAAO,KAAU,KAAA;AAC/B,MAAA,IAAI,oBAAsB,EAAA;AACxB,QAAA,OAAA,CAAQ,IAAI,CAA8C,4CAAA,CAAA,CAAA;AAAA,OACjD,MAAA,IAAA,CAACC,gCAAuB,CAAA,2BAA2B,CAAG,EAAA;AAC/D,QAAA,2BAAA;AAAA,UACE,EAAE,IAAM,EAAA,aAAA,EAAe,KAAM,EAAA;AAAA,UAC7B;AAAA,SACF;AAAA,OACK,MAAA;AACL,QAAA,MAAM,SAAY,GAAAC,wBAAA;AAAA,UAChB,EAAE,IAAM,EAAA,aAAA,EAAe,KAAM,EAAA;AAAA,UAC7B;AAAA,SACF;AACA,QAAA,SAAA;AAAA,0BACGC,eAAA,CAAAC,WAAA,EAAA,EAAO,IAAM,EAAA,IAAA,EAAM,cAAc,gBAChC,EAAA,QAAA,EAAA;AAAA,4BAAAC,cAAA;AAAA,cAACC,sBAAA;AAAA,cAAA;AAAA,gBACC,UAAW,EAAA,aAAA;AAAA,gBACX,eAAa,EAAA,IAAA;AAAA,gBACb,WAAU,EAAA,OAAA;AAAA,gBACV,OAAA,EAAS,MAAM,SAAA,CAAU,IAAI,CAAA;AAAA,gBAC7B,SAAU,EAAA;AAAA;AAAA,aACZ;AAAA,4BACAD,cAAA,CAACE,iBAAa,EAAA,EAAA,MAAA,EAAQ,KAAO,EAAA,CAAA;AAAA,4BAC7BF,cAAA,CAACG,sBAAe,QAAU,EAAA,SAAA,EAAA;AAAA,WAC5B,EAAA;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,gBAAkB,EAAA,2BAAA,EAA6B,oBAAoB;AAAA,GACtE;AAEA,EAAA,uCACG,mBAAoB,CAAA,QAAA,EAApB,EAA6B,KAAO,EAAA,EAAE,kBACpC,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA;AAAA,GACH,EAAA,CAAA;AAEJ;AAEO,SAAS,eAAkB,GAAA;AAChC,EAAA,MAAM,EAAE,gBAAA,EAAqB,GAAAC,gBAAA,CAAW,mBAAmB,CAAA;AAC3D,EAAO,OAAA,gBAAA;AACT;;;;;;"}
|
|
@@ -19,7 +19,6 @@ const useEditableText = ({
|
|
|
19
19
|
if (initialValueRef.current !== value?.toString()) {
|
|
20
20
|
initialValueRef.current = stringValueOf(value);
|
|
21
21
|
setEditState({ message: "", value: stringValueOf(value) });
|
|
22
|
-
console.log("initial value changed to: ", value);
|
|
23
22
|
}
|
|
24
23
|
}, [value]);
|
|
25
24
|
const commit = React.useCallback(
|
|
@@ -96,14 +95,12 @@ const useEditableText = ({
|
|
|
96
95
|
);
|
|
97
96
|
isDirtyRef.current = value2 !== initialValueRef.current;
|
|
98
97
|
const result = clientSideEditValidationCheck?.(value2, "change");
|
|
99
|
-
console.log({ result, value: value2 });
|
|
100
98
|
setEditState({ value: value2 });
|
|
101
99
|
onEdit?.(
|
|
102
100
|
{ editType: "change", isValid: result?.ok !== false, value: value2 },
|
|
103
101
|
"change"
|
|
104
102
|
);
|
|
105
103
|
if (result?.ok === false) {
|
|
106
|
-
console.log("cell fails validation");
|
|
107
104
|
setEditState({ value: value2, message: result.messages?.join(",") });
|
|
108
105
|
}
|
|
109
106
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditableText.js","sources":["../../src/editable/useEditableText.ts"],"sourcesContent":["import type { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { DataItemEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport { dispatchCustomEvent, getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n FormEventHandler,\n KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n clientSideEditValidationCheck?: DataValueValidationChecker;\n value?: T;\n onEdit?: DataItemEditHandler;\n type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n message?: string;\n value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n clientSideEditValidationCheck,\n value,\n onEdit,\n type = \"string\",\n}: EditableTextHookProps<T>) => {\n
|
|
1
|
+
{"version":3,"file":"useEditableText.js","sources":["../../src/editable/useEditableText.ts"],"sourcesContent":["import type { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { DataItemEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport { dispatchCustomEvent, getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n FormEventHandler,\n KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n clientSideEditValidationCheck?: DataValueValidationChecker;\n value?: T;\n onEdit?: DataItemEditHandler;\n type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n message?: string;\n value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n clientSideEditValidationCheck,\n value,\n onEdit,\n type = \"string\",\n}: EditableTextHookProps<T>) => {\n const [editState, setEditState] = useState<EditState>({\n value: stringValueOf(value),\n });\n const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n const isDirtyRef = useRef(false);\n\n useMemo(() => {\n if (initialValueRef.current !== value?.toString()) {\n initialValueRef.current = stringValueOf(value);\n setEditState({ message: \"\", value: stringValueOf(value) });\n }\n }, [value]);\n\n const commit = useCallback(\n async (target: HTMLElement) => {\n const { value } = editState;\n if (isDirtyRef.current) {\n const result = clientSideEditValidationCheck?.(value, \"*\");\n if (result?.ok === false) {\n setEditState((state) => ({\n ...state,\n message: result?.messages?.join(\",\"),\n }));\n } else {\n setEditState((state) => ({ ...state, message: undefined }));\n const response = await onEdit?.(\n { editType: \"commit\", value, isValid: true },\n \"commit\",\n );\n if (response === true) {\n isDirtyRef.current = false;\n initialValueRef.current = value;\n dispatchCustomEvent(target, \"vuu-commit\");\n } else if (typeof response === \"string\") {\n setEditState((state) => ({ ...state, message: response }));\n }\n }\n } else {\n // why, if not dirty ?\n dispatchCustomEvent(target, \"vuu-commit\");\n }\n },\n [clientSideEditValidationCheck, editState, onEdit],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if (evt.key === \"Enter\") {\n commit(evt.target as HTMLElement);\n } else if (\n evt.key === \"ArrowRight\" ||\n evt.key === \"ArrowLeft\" ||\n evt.key === \"ArrowUp\" ||\n evt.key === \"ArrowDown\"\n ) {\n evt.stopPropagation();\n } else if (evt.key === \"Escape\") {\n if (isDirtyRef.current) {\n const { value: previousValue } = editState;\n isDirtyRef.current = false;\n setEditState({ value: initialValueRef.current, message: undefined });\n // this assumes the original value was valid, is that safe ?\n onEdit?.(\n {\n editType: \"cancel\",\n isValid: true,\n previousValue,\n value: initialValueRef.current,\n },\n \"cancel\",\n );\n }\n }\n },\n [commit, editState, onEdit],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n (evt) => {\n if (isDirtyRef.current) {\n commit(evt.target as HTMLElement);\n }\n },\n [commit],\n );\n\n const handleChange = useCallback<FormEventHandler>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n const typedValue = getTypedValue(value, type);\n console.log(\n `[useEditableText] handleChange '${value}' typedValue ${typedValue}\n initial value ${initialValueRef.current}\n `,\n );\n isDirtyRef.current = value !== initialValueRef.current;\n const result = clientSideEditValidationCheck?.(value, \"change\");\n setEditState({ value });\n\n onEdit?.(\n { editType: \"change\", isValid: result?.ok !== false, value },\n \"change\",\n );\n if (result?.ok === false) {\n setEditState({ value, message: result.messages?.join(\",\") });\n }\n },\n [clientSideEditValidationCheck, onEdit, type],\n );\n\n return {\n //TODO why are we detecting commit here, why not use VuuInput ?\n inputProps: {\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n },\n onChange: handleChange,\n value: editState.value,\n warningMessage: editState.message,\n };\n};\n"],"names":["useState","useRef","useMemo","useCallback","value","dispatchCustomEvent","getTypedValue"],"mappings":";;;;;AA4BA,MAAM,aAAgB,GAAA,CAAC,KAA+B,KAAA,KAAA,EAAO,UAAc,IAAA,EAAA;AAEpE,MAAM,kBAAkB,CAA+C;AAAA,EAC5E,6BAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAO,GAAA;AACT,CAAgC,KAAA;AAC9B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,cAAoB,CAAA;AAAA,IACpD,KAAA,EAAO,cAAc,KAAK;AAAA,GAC3B,CAAA;AACD,EAAA,MAAM,eAAkB,GAAAC,YAAA,CAAe,KAAO,EAAA,QAAA,MAAc,EAAE,CAAA;AAC9D,EAAM,MAAA,UAAA,GAAaA,aAAO,KAAK,CAAA;AAE/B,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,eAAgB,CAAA,OAAA,KAAY,KAAO,EAAA,QAAA,EAAY,EAAA;AACjD,MAAgB,eAAA,CAAA,OAAA,GAAU,cAAc,KAAK,CAAA;AAC7C,MAAA,YAAA,CAAa,EAAE,OAAS,EAAA,EAAA,EAAI,OAAO,aAAc,CAAA,KAAK,GAAG,CAAA;AAAA;AAC3D,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,MAAS,GAAAC,iBAAA;AAAA,IACb,OAAO,MAAwB,KAAA;AAC7B,MAAM,MAAA,EAAE,KAAAC,EAAAA,MAAAA,EAAU,GAAA,SAAA;AAClB,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,MAAA,GAAS,6BAAgCA,GAAAA,MAAAA,EAAO,GAAG,CAAA;AACzD,QAAI,IAAA,MAAA,EAAQ,OAAO,KAAO,EAAA;AACxB,UAAA,YAAA,CAAa,CAAC,KAAW,MAAA;AAAA,YACvB,GAAG,KAAA;AAAA,YACH,OAAS,EAAA,MAAA,EAAQ,QAAU,EAAA,IAAA,CAAK,GAAG;AAAA,WACnC,CAAA,CAAA;AAAA,SACG,MAAA;AACL,UAAA,YAAA,CAAa,CAAC,KAAW,MAAA,EAAE,GAAG,KAAO,EAAA,OAAA,EAAS,QAAY,CAAA,CAAA;AAC1D,UAAA,MAAM,WAAW,MAAM,MAAA;AAAA,YACrB,EAAE,QAAU,EAAA,QAAA,EAAU,KAAAA,EAAAA,MAAAA,EAAO,SAAS,IAAK,EAAA;AAAA,YAC3C;AAAA,WACF;AACA,UAAA,IAAI,aAAa,IAAM,EAAA;AACrB,YAAA,UAAA,CAAW,OAAU,GAAA,KAAA;AACrB,YAAA,eAAA,CAAgB,OAAUA,GAAAA,MAAAA;AAC1B,YAAAC,4BAAA,CAAoB,QAAQ,YAAY,CAAA;AAAA,WAC1C,MAAA,IAAW,OAAO,QAAA,KAAa,QAAU,EAAA;AACvC,YAAA,YAAA,CAAa,CAAC,KAAW,MAAA,EAAE,GAAG,KAAO,EAAA,OAAA,EAAS,UAAW,CAAA,CAAA;AAAA;AAC3D;AACF,OACK,MAAA;AAEL,QAAAA,4BAAA,CAAoB,QAAQ,YAAY,CAAA;AAAA;AAC1C,KACF;AAAA,IACA,CAAC,6BAA+B,EAAA,SAAA,EAAW,MAAM;AAAA,GACnD;AAEA,EAAA,MAAM,aAAgB,GAAAF,iBAAA;AAAA,IACpB,CAAC,GAAoC,KAAA;AACnC,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,MAAA,CAAO,IAAI,MAAqB,CAAA;AAAA,OAEhC,MAAA,IAAA,GAAA,CAAI,GAAQ,KAAA,YAAA,IACZ,GAAI,CAAA,GAAA,KAAQ,WACZ,IAAA,GAAA,CAAI,GAAQ,KAAA,SAAA,IACZ,GAAI,CAAA,GAAA,KAAQ,WACZ,EAAA;AACA,QAAA,GAAA,CAAI,eAAgB,EAAA;AAAA,OACtB,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC/B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAM,MAAA,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,SAAA;AACjC,UAAA,UAAA,CAAW,OAAU,GAAA,KAAA;AACrB,UAAA,YAAA,CAAa,EAAE,KAAO,EAAA,eAAA,CAAgB,OAAS,EAAA,OAAA,EAAS,QAAW,CAAA;AAEnE,UAAA,MAAA;AAAA,YACE;AAAA,cACE,QAAU,EAAA,QAAA;AAAA,cACV,OAAS,EAAA,IAAA;AAAA,cACT,aAAA;AAAA,cACA,OAAO,eAAgB,CAAA;AAAA,aACzB;AAAA,YACA;AAAA,WACF;AAAA;AACF;AACF,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,SAAA,EAAW,MAAM;AAAA,GAC5B;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,GAAQ,KAAA;AACP,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,MAAA,CAAO,IAAI,MAAqB,CAAA;AAAA;AAClC,KACF;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAA,MAAM,EAAE,KAAA,EAAAC,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAM,MAAA,UAAA,GAAaE,sBAAcF,CAAAA,MAAAA,EAAO,IAAI,CAAA;AAC5C,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,CAAA,gCAAA,EAAmCA,MAAK,CAAA,aAAA,EAAgB,UAAU;AAAA,wBAAA,EAChD,gBAAgB,OAAO;AAAA,QAAA;AAAA,OAE3C;AACA,MAAW,UAAA,CAAA,OAAA,GAAUA,WAAU,eAAgB,CAAA,OAAA;AAC/C,MAAM,MAAA,MAAA,GAAS,6BAAgCA,GAAAA,MAAAA,EAAO,QAAQ,CAAA;AAC9D,MAAa,YAAA,CAAA,EAAE,KAAAA,EAAAA,MAAAA,EAAO,CAAA;AAEtB,MAAA,MAAA;AAAA,QACE,EAAE,UAAU,QAAU,EAAA,OAAA,EAAS,QAAQ,EAAO,KAAA,KAAA,EAAO,OAAAA,MAAM,EAAA;AAAA,QAC3D;AAAA,OACF;AACA,MAAI,IAAA,MAAA,EAAQ,OAAO,KAAO,EAAA;AACxB,QAAa,YAAA,CAAA,EAAE,OAAAA,MAAO,EAAA,OAAA,EAAS,OAAO,QAAU,EAAA,IAAA,CAAK,GAAG,CAAA,EAAG,CAAA;AAAA;AAC7D,KACF;AAAA,IACA,CAAC,6BAA+B,EAAA,MAAA,EAAQ,IAAI;AAAA,GAC9C;AAEA,EAAO,OAAA;AAAA;AAAA,IAEL,UAAY,EAAA;AAAA,MACV,MAAQ,EAAA,UAAA;AAAA,MACR,SAAW,EAAA;AAAA,KACb;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAO,SAAU,CAAA,KAAA;AAAA,IACjB,gBAAgB,SAAU,CAAA;AAAA,GAC5B;AACF;;;;"}
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var core = require('@salt-ds/core');
|
|
5
|
-
var
|
|
6
|
-
var react = require('@dnd-kit/react');
|
|
5
|
+
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
6
|
var React = require('react');
|
|
8
7
|
|
|
9
8
|
const SortableOption = ({
|
|
@@ -12,7 +11,7 @@ const SortableOption = ({
|
|
|
12
11
|
value,
|
|
13
12
|
...optionProps
|
|
14
13
|
}) => {
|
|
15
|
-
const { ref } =
|
|
14
|
+
const { ref } = vuuUtils.useSortable({ id, index });
|
|
16
15
|
return /* @__PURE__ */ jsxRuntime.jsx(core.Option, { ...optionProps, id, ref, value });
|
|
17
16
|
};
|
|
18
17
|
const SortableList = ({
|
|
@@ -30,7 +29,7 @@ const SortableList = ({
|
|
|
30
29
|
}
|
|
31
30
|
}, 300);
|
|
32
31
|
}, [onReorderListItems]);
|
|
33
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
|
+
return /* @__PURE__ */ jsxRuntime.jsx(vuuUtils.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { ...listBoxProps, ref: listRef, children }) });
|
|
34
33
|
};
|
|
35
34
|
|
|
36
35
|
exports.SortableList = SortableList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableList.js","sources":["../../src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { useSortable } from \"@
|
|
1
|
+
{"version":3,"file":"SortableList.js","sources":["../../src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n id,\n index,\n value,\n ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n const { ref } = useSortable({ id, index });\n return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n children,\n onReorderListItems,\n ...listBoxProps\n}: ListBoxProps & {\n onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n const listRef = useRef<HTMLDivElement>(null);\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n if (listItems) {\n const items = Array.from(listItems).map(({ id }) => id);\n onReorderListItems?.(items);\n }\n }, 300);\n }, [onReorderListItems]);\n\n return (\n <DragDropProvider onDragEnd={handleDragEnd}>\n <ListBox {...listBoxProps} ref={listRef}>\n {children}\n </ListBox>\n </DragDropProvider>\n );\n};\n"],"names":["useSortable","Option","useRef","useCallback","jsx","DragDropProvider","ListBox"],"mappings":";;;;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAIA,qBAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,sCAAQC,WAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgBC,kBAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAACC,yBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAAD,cAAA,CAACE,YAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createContext, useState, useCallback, useContext } from 'react';
|
|
3
3
|
import { useLayoutOperation, isUnconfiguredProperty, layoutFromJson } from '@vuu-ui/vuu-layout';
|
|
4
|
-
import { Dialog, DialogContent } from '@salt-ds/core';
|
|
4
|
+
import { Dialog, DialogCloseButton, DialogHeader, DialogContent } from '@salt-ds/core';
|
|
5
5
|
|
|
6
6
|
const ContextPanelContext = createContext({
|
|
7
7
|
showContextPanel: () => {
|
|
@@ -16,6 +16,11 @@ const ContextPanelProvider = ({
|
|
|
16
16
|
}) => {
|
|
17
17
|
const { showComponentInContextPanel } = useLayoutOperation();
|
|
18
18
|
const [dialog, setDialog] = useState(null);
|
|
19
|
+
const handleOpenChange = useCallback((isOpen) => {
|
|
20
|
+
if (!isOpen) {
|
|
21
|
+
setDialog(null);
|
|
22
|
+
}
|
|
23
|
+
}, []);
|
|
19
24
|
const showContextPanel = useCallback(
|
|
20
25
|
(componentType, title, props) => {
|
|
21
26
|
if (showContextPanelProp) {
|
|
@@ -31,11 +36,24 @@ const ContextPanelProvider = ({
|
|
|
31
36
|
""
|
|
32
37
|
);
|
|
33
38
|
setDialog(
|
|
34
|
-
/* @__PURE__ */
|
|
39
|
+
/* @__PURE__ */ jsxs(Dialog, { open: true, onOpenChange: handleOpenChange, children: [
|
|
40
|
+
/* @__PURE__ */ jsx(
|
|
41
|
+
DialogCloseButton,
|
|
42
|
+
{
|
|
43
|
+
appearance: "transparent",
|
|
44
|
+
"data-embedded": true,
|
|
45
|
+
"data-icon": "close",
|
|
46
|
+
onClick: () => setDialog(null),
|
|
47
|
+
sentiment: "neutral"
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
/* @__PURE__ */ jsx(DialogHeader, { header: title }),
|
|
51
|
+
/* @__PURE__ */ jsx(DialogContent, { children: component })
|
|
52
|
+
] })
|
|
35
53
|
);
|
|
36
54
|
}
|
|
37
55
|
},
|
|
38
|
-
[showComponentInContextPanel, showContextPanelProp]
|
|
56
|
+
[handleOpenChange, showComponentInContextPanel, showContextPanelProp]
|
|
39
57
|
);
|
|
40
58
|
return /* @__PURE__ */ jsxs(ContextPanelContext.Provider, { value: { showContextPanel }, children: [
|
|
41
59
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextPanelProvider.js","sources":["../../src/context-panel-provider/ContextPanelProvider.tsx"],"sourcesContent":["import {\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useState,\n} from \"react\";\nimport {\n isUnconfiguredProperty,\n layoutFromJson,\n useLayoutOperation,\n} from \"@vuu-ui/vuu-layout\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-utils\";\nimport {
|
|
1
|
+
{"version":3,"file":"ContextPanelProvider.js","sources":["../../src/context-panel-provider/ContextPanelProvider.tsx"],"sourcesContent":["import {\n createContext,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useState,\n} from \"react\";\nimport {\n isUnconfiguredProperty,\n layoutFromJson,\n useLayoutOperation,\n} from \"@vuu-ui/vuu-layout\";\nimport { LayoutJSON } from \"@vuu-ui/vuu-utils\";\nimport {\n Dialog,\n DialogCloseButton,\n DialogContent,\n DialogHeader,\n} from \"@salt-ds/core\";\n\nexport type ShowContextPanel = (\n componentType: string,\n title: string,\n componentProps: unknown,\n) => void;\n\nexport interface ContextPanelProps {\n showContextPanel: ShowContextPanel;\n}\n\nexport const ContextPanelContext = createContext<ContextPanelProps>({\n showContextPanel: () => {\n console.warn(\n \"[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider\",\n );\n },\n});\n\nexport const ContextPanelProvider = ({\n children,\n showContextPanel: showContextPanelProp,\n}: Partial<ContextPanelProps> & {\n children: ReactNode;\n}) => {\n const { showComponentInContextPanel } = useLayoutOperation();\n const [dialog, setDialog] = useState<ReactElement | null>(null);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n if (!isOpen) {\n setDialog(null);\n }\n }, []);\n\n const showContextPanel = useCallback<ShowContextPanel>(\n (componentType, title, props) => {\n if (showContextPanelProp) {\n console.log(`show context panel will use method from prop`);\n } else if (!isUnconfiguredProperty(showComponentInContextPanel)) {\n showComponentInContextPanel(\n { type: componentType, props } as LayoutJSON,\n title,\n );\n } else {\n const component = layoutFromJson(\n { type: componentType, props } as LayoutJSON,\n \"\",\n );\n setDialog(\n <Dialog open={true} onOpenChange={handleOpenChange}>\n <DialogCloseButton\n appearance=\"transparent\"\n data-embedded\n data-icon=\"close\"\n onClick={() => setDialog(null)}\n sentiment=\"neutral\"\n />\n <DialogHeader header={title} />\n <DialogContent>{component}</DialogContent>\n </Dialog>,\n );\n }\n },\n [handleOpenChange, showComponentInContextPanel, showContextPanelProp],\n );\n\n return (\n <ContextPanelContext.Provider value={{ showContextPanel }}>\n {children}\n {dialog}\n </ContextPanelContext.Provider>\n );\n};\n\nexport function useContextPanel() {\n const { showContextPanel } = useContext(ContextPanelContext);\n return showContextPanel;\n}\n"],"names":[],"mappings":";;;;;AA+BO,MAAM,sBAAsB,aAAiC,CAAA;AAAA,EAClE,kBAAkB,MAAM;AACtB,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,KACF;AAAA;AAEJ,CAAC;AAEM,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,gBAAkB,EAAA;AACpB,CAEM,KAAA;AACJ,EAAM,MAAA,EAAE,2BAA4B,EAAA,GAAI,kBAAmB,EAAA;AAC3D,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAA8B,IAAI,CAAA;AAE9D,EAAM,MAAA,gBAAA,GAAmB,WAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,SAAA,CAAU,IAAI,CAAA;AAAA;AAChB,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,aAAe,EAAA,KAAA,EAAO,KAAU,KAAA;AAC/B,MAAA,IAAI,oBAAsB,EAAA;AACxB,QAAA,OAAA,CAAQ,IAAI,CAA8C,4CAAA,CAAA,CAAA;AAAA,OACjD,MAAA,IAAA,CAAC,sBAAuB,CAAA,2BAA2B,CAAG,EAAA;AAC/D,QAAA,2BAAA;AAAA,UACE,EAAE,IAAM,EAAA,aAAA,EAAe,KAAM,EAAA;AAAA,UAC7B;AAAA,SACF;AAAA,OACK,MAAA;AACL,QAAA,MAAM,SAAY,GAAA,cAAA;AAAA,UAChB,EAAE,IAAM,EAAA,aAAA,EAAe,KAAM,EAAA;AAAA,UAC7B;AAAA,SACF;AACA,QAAA,SAAA;AAAA,0BACG,IAAA,CAAA,MAAA,EAAA,EAAO,IAAM,EAAA,IAAA,EAAM,cAAc,gBAChC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,iBAAA;AAAA,cAAA;AAAA,gBACC,UAAW,EAAA,aAAA;AAAA,gBACX,eAAa,EAAA,IAAA;AAAA,gBACb,WAAU,EAAA,OAAA;AAAA,gBACV,OAAA,EAAS,MAAM,SAAA,CAAU,IAAI,CAAA;AAAA,gBAC7B,SAAU,EAAA;AAAA;AAAA,aACZ;AAAA,4BACA,GAAA,CAAC,YAAa,EAAA,EAAA,MAAA,EAAQ,KAAO,EAAA,CAAA;AAAA,4BAC7B,GAAA,CAAC,iBAAe,QAAU,EAAA,SAAA,EAAA;AAAA,WAC5B,EAAA;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,gBAAkB,EAAA,2BAAA,EAA6B,oBAAoB;AAAA,GACtE;AAEA,EAAA,4BACG,mBAAoB,CAAA,QAAA,EAApB,EAA6B,KAAO,EAAA,EAAE,kBACpC,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA;AAAA,GACH,EAAA,CAAA;AAEJ;AAEO,SAAS,eAAkB,GAAA;AAChC,EAAA,MAAM,EAAE,gBAAA,EAAqB,GAAA,UAAA,CAAW,mBAAmB,CAAA;AAC3D,EAAO,OAAA,gBAAA;AACT;;;;"}
|
|
@@ -17,7 +17,6 @@ const useEditableText = ({
|
|
|
17
17
|
if (initialValueRef.current !== value?.toString()) {
|
|
18
18
|
initialValueRef.current = stringValueOf(value);
|
|
19
19
|
setEditState({ message: "", value: stringValueOf(value) });
|
|
20
|
-
console.log("initial value changed to: ", value);
|
|
21
20
|
}
|
|
22
21
|
}, [value]);
|
|
23
22
|
const commit = useCallback(
|
|
@@ -94,14 +93,12 @@ const useEditableText = ({
|
|
|
94
93
|
);
|
|
95
94
|
isDirtyRef.current = value2 !== initialValueRef.current;
|
|
96
95
|
const result = clientSideEditValidationCheck?.(value2, "change");
|
|
97
|
-
console.log({ result, value: value2 });
|
|
98
96
|
setEditState({ value: value2 });
|
|
99
97
|
onEdit?.(
|
|
100
98
|
{ editType: "change", isValid: result?.ok !== false, value: value2 },
|
|
101
99
|
"change"
|
|
102
100
|
);
|
|
103
101
|
if (result?.ok === false) {
|
|
104
|
-
console.log("cell fails validation");
|
|
105
102
|
setEditState({ value: value2, message: result.messages?.join(",") });
|
|
106
103
|
}
|
|
107
104
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEditableText.js","sources":["../../src/editable/useEditableText.ts"],"sourcesContent":["import type { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { DataItemEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport { dispatchCustomEvent, getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n FormEventHandler,\n KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n clientSideEditValidationCheck?: DataValueValidationChecker;\n value?: T;\n onEdit?: DataItemEditHandler;\n type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n message?: string;\n value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n clientSideEditValidationCheck,\n value,\n onEdit,\n type = \"string\",\n}: EditableTextHookProps<T>) => {\n
|
|
1
|
+
{"version":3,"file":"useEditableText.js","sources":["../../src/editable/useEditableText.ts"],"sourcesContent":["import type { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { DataItemEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport { dispatchCustomEvent, getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport {\n FocusEventHandler,\n FormEventHandler,\n KeyboardEvent,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n clientSideEditValidationCheck?: DataValueValidationChecker;\n value?: T;\n onEdit?: DataItemEditHandler;\n type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n message?: string;\n value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n clientSideEditValidationCheck,\n value,\n onEdit,\n type = \"string\",\n}: EditableTextHookProps<T>) => {\n const [editState, setEditState] = useState<EditState>({\n value: stringValueOf(value),\n });\n const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n const isDirtyRef = useRef(false);\n\n useMemo(() => {\n if (initialValueRef.current !== value?.toString()) {\n initialValueRef.current = stringValueOf(value);\n setEditState({ message: \"\", value: stringValueOf(value) });\n }\n }, [value]);\n\n const commit = useCallback(\n async (target: HTMLElement) => {\n const { value } = editState;\n if (isDirtyRef.current) {\n const result = clientSideEditValidationCheck?.(value, \"*\");\n if (result?.ok === false) {\n setEditState((state) => ({\n ...state,\n message: result?.messages?.join(\",\"),\n }));\n } else {\n setEditState((state) => ({ ...state, message: undefined }));\n const response = await onEdit?.(\n { editType: \"commit\", value, isValid: true },\n \"commit\",\n );\n if (response === true) {\n isDirtyRef.current = false;\n initialValueRef.current = value;\n dispatchCustomEvent(target, \"vuu-commit\");\n } else if (typeof response === \"string\") {\n setEditState((state) => ({ ...state, message: response }));\n }\n }\n } else {\n // why, if not dirty ?\n dispatchCustomEvent(target, \"vuu-commit\");\n }\n },\n [clientSideEditValidationCheck, editState, onEdit],\n );\n\n const handleKeyDown = useCallback(\n (evt: KeyboardEvent<HTMLElement>) => {\n if (evt.key === \"Enter\") {\n commit(evt.target as HTMLElement);\n } else if (\n evt.key === \"ArrowRight\" ||\n evt.key === \"ArrowLeft\" ||\n evt.key === \"ArrowUp\" ||\n evt.key === \"ArrowDown\"\n ) {\n evt.stopPropagation();\n } else if (evt.key === \"Escape\") {\n if (isDirtyRef.current) {\n const { value: previousValue } = editState;\n isDirtyRef.current = false;\n setEditState({ value: initialValueRef.current, message: undefined });\n // this assumes the original value was valid, is that safe ?\n onEdit?.(\n {\n editType: \"cancel\",\n isValid: true,\n previousValue,\n value: initialValueRef.current,\n },\n \"cancel\",\n );\n }\n }\n },\n [commit, editState, onEdit],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n (evt) => {\n if (isDirtyRef.current) {\n commit(evt.target as HTMLElement);\n }\n },\n [commit],\n );\n\n const handleChange = useCallback<FormEventHandler>(\n (evt) => {\n const { value } = evt.target as HTMLInputElement;\n const typedValue = getTypedValue(value, type);\n console.log(\n `[useEditableText] handleChange '${value}' typedValue ${typedValue}\n initial value ${initialValueRef.current}\n `,\n );\n isDirtyRef.current = value !== initialValueRef.current;\n const result = clientSideEditValidationCheck?.(value, \"change\");\n setEditState({ value });\n\n onEdit?.(\n { editType: \"change\", isValid: result?.ok !== false, value },\n \"change\",\n );\n if (result?.ok === false) {\n setEditState({ value, message: result.messages?.join(\",\") });\n }\n },\n [clientSideEditValidationCheck, onEdit, type],\n );\n\n return {\n //TODO why are we detecting commit here, why not use VuuInput ?\n inputProps: {\n onBlur: handleBlur,\n onKeyDown: handleKeyDown,\n },\n onChange: handleChange,\n value: editState.value,\n warningMessage: editState.message,\n };\n};\n"],"names":["value"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { Option, ListBox } from '@salt-ds/core';
|
|
3
|
-
import { useSortable } from '@
|
|
4
|
-
import { DragDropProvider } from '@dnd-kit/react';
|
|
3
|
+
import { useSortable, DragDropProvider } from '@vuu-ui/vuu-utils';
|
|
5
4
|
import { useRef, useCallback } from 'react';
|
|
6
5
|
|
|
7
6
|
const SortableOption = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableList.js","sources":["../../src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { useSortable } from \"@
|
|
1
|
+
{"version":3,"file":"SortableList.js","sources":["../../src/sortable-list/SortableList.tsx"],"sourcesContent":["import { ListBox, ListBoxProps, Option, OptionProps } from \"@salt-ds/core\";\nimport { DragDropProvider, useSortable } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\n\nexport const SortableOption = ({\n id,\n index,\n value,\n ...optionProps\n}: OptionProps & { id: string; index: number }) => {\n const { ref } = useSortable({ id, index });\n return <Option {...optionProps} id={id} ref={ref} value={value} />;\n};\n\nexport const SortableList = ({\n children,\n onReorderListItems,\n ...listBoxProps\n}: ListBoxProps & {\n onReorderListItems?: (listItems: unknown[]) => void;\n}) => {\n const listRef = useRef<HTMLDivElement>(null);\n const handleDragEnd = useCallback(() => {\n setTimeout(() => {\n const listItems = listRef.current?.querySelectorAll(\".saltOption\");\n if (listItems) {\n const items = Array.from(listItems).map(({ id }) => id);\n onReorderListItems?.(items);\n }\n }, 300);\n }, [onReorderListItems]);\n\n return (\n <DragDropProvider onDragEnd={handleDragEnd}>\n <ListBox {...listBoxProps} ref={listRef}>\n {children}\n </ListBox>\n </DragDropProvider>\n );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAmD,KAAA;AACjD,EAAA,MAAM,EAAE,GAAI,EAAA,GAAI,YAAY,EAAE,EAAA,EAAI,OAAO,CAAA;AACzC,EAAA,2BAAQ,MAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,EAAA,EAAQ,KAAU,KAAc,EAAA,CAAA;AAClE;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,GAAG;AACL,CAEM,KAAA;AACJ,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,OAAS,EAAA,gBAAA,CAAiB,aAAa,CAAA;AACjE,MAAA,IAAI,SAAW,EAAA;AACb,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,IAAA,CAAK,SAAS,CAAA,CAAE,IAAI,CAAC,EAAE,EAAG,EAAA,KAAM,EAAE,CAAA;AACtD,QAAA,kBAAA,GAAqB,KAAK,CAAA;AAAA;AAC5B,OACC,GAAG,CAAA;AAAA,GACR,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAW,aAC3B,EAAA,QAAA,kBAAA,GAAA,CAAC,OAAS,EAAA,EAAA,GAAG,YAAc,EAAA,GAAA,EAAK,OAC7B,EAAA,QAAA,EACH,CACF,EAAA,CAAA;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.
|
|
2
|
+
"version": "0.13.7",
|
|
3
3
|
"description": "VUU UI Controls",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.13.
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "0.13.
|
|
9
|
-
"@vuu-ui/vuu-table-types": "0.13.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.13.7",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "0.13.7",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "0.13.7"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@vuu-ui/vuu-context-menu": "0.13.
|
|
13
|
-
"@vuu-ui/vuu-data-react": "0.13.
|
|
14
|
-
"@vuu-ui/vuu-layout": "0.13.
|
|
15
|
-
"@vuu-ui/vuu-popups": "0.13.
|
|
16
|
-
"@vuu-ui/vuu-table": "0.13.
|
|
17
|
-
"@vuu-ui/vuu-utils": "0.13.
|
|
12
|
+
"@vuu-ui/vuu-context-menu": "0.13.7",
|
|
13
|
+
"@vuu-ui/vuu-data-react": "0.13.7",
|
|
14
|
+
"@vuu-ui/vuu-layout": "0.13.7",
|
|
15
|
+
"@vuu-ui/vuu-popups": "0.13.7",
|
|
16
|
+
"@vuu-ui/vuu-table": "0.13.7",
|
|
17
|
+
"@vuu-ui/vuu-utils": "0.13.7",
|
|
18
18
|
"@salt-ds/core": "1.43.0",
|
|
19
19
|
"@salt-ds/icons": "1.13.2",
|
|
20
20
|
"@salt-ds/styles": "0.2.1",
|
|
@@ -23,7 +23,6 @@
|
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@internationalized/date": "^3.0.0",
|
|
26
|
-
"@dnd-kit/react": "^0.1.19",
|
|
27
26
|
"@floating-ui/react": "^0.26.28",
|
|
28
27
|
"clsx": "^2.0.0",
|
|
29
28
|
"react": "^19.1.0",
|