@webiny/admin-ui 6.4.3-beta.0 → 6.4.3-beta.2
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.
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface EditableTitleProps {
|
|
3
|
+
/**
|
|
4
|
+
* The current title value.
|
|
5
|
+
*/
|
|
6
|
+
value: string;
|
|
7
|
+
/**
|
|
8
|
+
* Called with the new value when editing is committed (blur or Enter).
|
|
9
|
+
*/
|
|
10
|
+
onCommit: (value: string) => void;
|
|
11
|
+
/**
|
|
12
|
+
* If true, the title is rendered as plain (non-editable) text.
|
|
13
|
+
*/
|
|
14
|
+
readOnly?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Placeholder shown in the input while editing.
|
|
17
|
+
*/
|
|
18
|
+
placeholder?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Focus the input when entering edit mode. Defaults to `true`.
|
|
21
|
+
*/
|
|
22
|
+
autoFocus?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Select the input's content when entering edit mode. Defaults to `true`.
|
|
25
|
+
*/
|
|
26
|
+
autoSelect?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Content rendered before the title (e.g. a language tag).
|
|
29
|
+
*/
|
|
30
|
+
startContent?: React.ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Tooltip content shown when hovering the resting title.
|
|
33
|
+
*/
|
|
34
|
+
tooltip?: React.ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* Controls the editing state. When provided, the component is controlled
|
|
37
|
+
* and `onEditingChange` must be used to react to state changes.
|
|
38
|
+
*/
|
|
39
|
+
isEditing?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Called whenever the editing state should change.
|
|
42
|
+
*/
|
|
43
|
+
onEditingChange?: (editing: boolean) => void;
|
|
44
|
+
className?: string;
|
|
45
|
+
"data-testid"?: string;
|
|
46
|
+
}
|
|
47
|
+
declare const EditableTitle: (({ value, onCommit, readOnly, placeholder, autoFocus, autoSelect, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId }: EditableTitleProps) => React.JSX.Element) & {
|
|
48
|
+
original: ({ value, onCommit, readOnly, placeholder, autoFocus, autoSelect, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId }: EditableTitleProps) => React.JSX.Element;
|
|
49
|
+
originalName: string;
|
|
50
|
+
displayName: string;
|
|
51
|
+
} & {
|
|
52
|
+
original: (({ value, onCommit, readOnly, placeholder, autoFocus, autoSelect, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId }: EditableTitleProps) => React.JSX.Element) & {
|
|
53
|
+
original: ({ value, onCommit, readOnly, placeholder, autoFocus, autoSelect, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId }: EditableTitleProps) => React.JSX.Element;
|
|
54
|
+
originalName: string;
|
|
55
|
+
displayName: string;
|
|
56
|
+
};
|
|
57
|
+
originalName: string;
|
|
58
|
+
displayName: string;
|
|
59
|
+
} & {
|
|
60
|
+
createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ value, onCommit, readOnly, placeholder, autoFocus, autoSelect, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId }: EditableTitleProps) => React.JSX.Element) & {
|
|
61
|
+
original: ({ value, onCommit, readOnly, placeholder, autoFocus, autoSelect, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId }: EditableTitleProps) => React.JSX.Element;
|
|
62
|
+
originalName: string;
|
|
63
|
+
displayName: string;
|
|
64
|
+
}>) => (props: unknown) => React.JSX.Element;
|
|
65
|
+
};
|
|
66
|
+
export { EditableTitle, type EditableTitleProps };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import react, { useCallback, useState } from "react";
|
|
2
|
+
import { Heading } from "../Heading/index.js";
|
|
3
|
+
import { Input } from "../Input/index.js";
|
|
4
|
+
import { Tooltip } from "../Tooltip/index.js";
|
|
5
|
+
import { cn, makeDecoratable } from "../utils.js";
|
|
6
|
+
const DecoratableEditableTitle = ({ value, onCommit, readOnly, placeholder, autoFocus = true, autoSelect = true, startContent, tooltip, isEditing: controlledEditing, onEditingChange, className, "data-testid": dataTestId })=>{
|
|
7
|
+
const isControlled = void 0 !== controlledEditing;
|
|
8
|
+
const [uncontrolledEditing, setUncontrolledEditing] = useState(false);
|
|
9
|
+
const [localValue, setLocalValue] = useState();
|
|
10
|
+
const isEditing = isControlled ? controlledEditing : uncontrolledEditing;
|
|
11
|
+
const setEditing = useCallback((editing)=>{
|
|
12
|
+
if (!isControlled) setUncontrolledEditing(editing);
|
|
13
|
+
onEditingChange?.(editing);
|
|
14
|
+
}, [
|
|
15
|
+
isControlled,
|
|
16
|
+
onEditingChange
|
|
17
|
+
]);
|
|
18
|
+
const startEditing = useCallback(()=>{
|
|
19
|
+
setLocalValue(value);
|
|
20
|
+
setEditing(true);
|
|
21
|
+
}, [
|
|
22
|
+
value,
|
|
23
|
+
setEditing
|
|
24
|
+
]);
|
|
25
|
+
const commit = useCallback((next)=>{
|
|
26
|
+
onCommit(next);
|
|
27
|
+
setLocalValue(void 0);
|
|
28
|
+
setEditing(false);
|
|
29
|
+
}, [
|
|
30
|
+
onCommit,
|
|
31
|
+
setEditing
|
|
32
|
+
]);
|
|
33
|
+
const cancel = useCallback(()=>{
|
|
34
|
+
setLocalValue(void 0);
|
|
35
|
+
setEditing(false);
|
|
36
|
+
}, [
|
|
37
|
+
setEditing
|
|
38
|
+
]);
|
|
39
|
+
const wrapper = (children)=>/*#__PURE__*/ react.createElement("div", {
|
|
40
|
+
className: cn("flex min-w-0 flex-row items-center gap-sm", className)
|
|
41
|
+
}, startContent, children);
|
|
42
|
+
if (readOnly) return wrapper(/*#__PURE__*/ react.createElement(Heading, {
|
|
43
|
+
level: 5,
|
|
44
|
+
className: "text-accent-primary truncate px-sm-extra py-xs-plus",
|
|
45
|
+
"data-testid": dataTestId
|
|
46
|
+
}, value));
|
|
47
|
+
if (isEditing) return wrapper(/*#__PURE__*/ react.createElement(Input, {
|
|
48
|
+
autoFocus: autoFocus,
|
|
49
|
+
autoSelect: autoSelect,
|
|
50
|
+
size: "md",
|
|
51
|
+
variant: "secondary",
|
|
52
|
+
placeholder: placeholder,
|
|
53
|
+
value: localValue ?? value,
|
|
54
|
+
onChange: setLocalValue,
|
|
55
|
+
onBlur: (e)=>commit(e.currentTarget.value),
|
|
56
|
+
onEnter: (e)=>commit(e.currentTarget.value),
|
|
57
|
+
onEscape: cancel
|
|
58
|
+
}));
|
|
59
|
+
const trigger = /*#__PURE__*/ react.createElement("div", {
|
|
60
|
+
onClick: startEditing,
|
|
61
|
+
"data-testid": dataTestId,
|
|
62
|
+
className: cn("font-sans text-h5 cursor-pointer truncate rounded-md", "px-[calc(var(--padding-sm-extra)-var(--border-width-sm))] py-[calc(var(--padding-xs)-var(--border-width-sm))]", "border-sm border-transparent text-accent-primary", "hover:bg-neutral-light")
|
|
63
|
+
}, value);
|
|
64
|
+
return wrapper(tooltip ? /*#__PURE__*/ react.createElement(Tooltip, {
|
|
65
|
+
side: "bottom",
|
|
66
|
+
content: tooltip,
|
|
67
|
+
trigger: trigger
|
|
68
|
+
}) : trigger);
|
|
69
|
+
};
|
|
70
|
+
const EditableTitle = makeDecoratable("EditableTitle", DecoratableEditableTitle);
|
|
71
|
+
export { EditableTitle };
|
|
72
|
+
|
|
73
|
+
//# sourceMappingURL=EditableTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditableTitle/EditableTitle.js","sources":["../../src/EditableTitle/EditableTitle.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Input } from \"~/Input/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ninterface EditableTitleProps {\n /**\n * The current title value.\n */\n value: string;\n /**\n * Called with the new value when editing is committed (blur or Enter).\n */\n onCommit: (value: string) => void;\n /**\n * If true, the title is rendered as plain (non-editable) text.\n */\n readOnly?: boolean;\n /**\n * Placeholder shown in the input while editing.\n */\n placeholder?: string;\n /**\n * Focus the input when entering edit mode. Defaults to `true`.\n */\n autoFocus?: boolean;\n /**\n * Select the input's content when entering edit mode. Defaults to `true`.\n */\n autoSelect?: boolean;\n /**\n * Content rendered before the title (e.g. a language tag).\n */\n startContent?: React.ReactNode;\n /**\n * Tooltip content shown when hovering the resting title.\n */\n tooltip?: React.ReactNode;\n /**\n * Controls the editing state. When provided, the component is controlled\n * and `onEditingChange` must be used to react to state changes.\n */\n isEditing?: boolean;\n /**\n * Called whenever the editing state should change.\n */\n onEditingChange?: (editing: boolean) => void;\n className?: string;\n \"data-testid\"?: string;\n}\n\nconst DecoratableEditableTitle = ({\n value,\n onCommit,\n readOnly,\n placeholder,\n autoFocus = true,\n autoSelect = true,\n startContent,\n tooltip,\n isEditing: controlledEditing,\n onEditingChange,\n className,\n \"data-testid\": dataTestId\n}: EditableTitleProps) => {\n const isControlled = controlledEditing !== undefined;\n const [uncontrolledEditing, setUncontrolledEditing] = useState(false);\n const [localValue, setLocalValue] = useState<string | undefined>();\n\n const isEditing = isControlled ? controlledEditing : uncontrolledEditing;\n\n const setEditing = useCallback(\n (editing: boolean) => {\n if (!isControlled) {\n setUncontrolledEditing(editing);\n }\n onEditingChange?.(editing);\n },\n [isControlled, onEditingChange]\n );\n\n const startEditing = useCallback(() => {\n setLocalValue(value);\n setEditing(true);\n }, [value, setEditing]);\n\n const commit = useCallback(\n (next: string) => {\n onCommit(next);\n setLocalValue(undefined);\n setEditing(false);\n },\n [onCommit, setEditing]\n );\n\n const cancel = useCallback(() => {\n setLocalValue(undefined);\n setEditing(false);\n }, [setEditing]);\n\n const wrapper = (children: React.ReactNode) => (\n <div className={cn(\"flex min-w-0 flex-row items-center gap-sm\", className)}>\n {startContent}\n {children}\n </div>\n );\n\n if (readOnly) {\n return wrapper(\n <Heading\n level={5}\n className={\"text-accent-primary truncate px-sm-extra py-xs-plus\"}\n data-testid={dataTestId}\n >\n {value}\n </Heading>\n );\n }\n\n if (isEditing) {\n return wrapper(\n <Input\n autoFocus={autoFocus}\n autoSelect={autoSelect}\n size={\"md\"}\n variant={\"secondary\"}\n placeholder={placeholder}\n value={localValue ?? value}\n onChange={setLocalValue}\n onBlur={e => commit(e.currentTarget.value)}\n onEnter={e => commit(e.currentTarget.value)}\n onEscape={cancel}\n />\n );\n }\n\n const trigger = (\n <div\n onClick={startEditing}\n data-testid={dataTestId}\n className={cn(\n \"font-sans text-h5 cursor-pointer truncate rounded-md\",\n \"px-[calc(var(--padding-sm-extra)-var(--border-width-sm))] py-[calc(var(--padding-xs)-var(--border-width-sm))]\",\n \"border-sm border-transparent text-accent-primary\",\n \"hover:bg-neutral-light\"\n )}\n >\n {value}\n </div>\n );\n\n return wrapper(\n tooltip ? <Tooltip side={\"bottom\"} content={tooltip} trigger={trigger} /> : trigger\n );\n};\n\nconst EditableTitle = makeDecoratable(\"EditableTitle\", DecoratableEditableTitle);\n\nexport { EditableTitle, type EditableTitleProps };\n"],"names":["DecoratableEditableTitle","value","onCommit","readOnly","placeholder","autoFocus","autoSelect","startContent","tooltip","controlledEditing","onEditingChange","className","dataTestId","isControlled","undefined","uncontrolledEditing","setUncontrolledEditing","useState","localValue","setLocalValue","isEditing","setEditing","useCallback","editing","startEditing","commit","next","cancel","wrapper","children","cn","Heading","Input","e","trigger","Tooltip","EditableTitle","makeDecoratable"],"mappings":";;;;;AAoDA,MAAMA,2BAA2B,CAAC,EAC9BC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,WAAW,EACXC,YAAY,IAAI,EAChBC,aAAa,IAAI,EACjBC,YAAY,EACZC,OAAO,EACP,WAAWC,iBAAiB,EAC5BC,eAAe,EACfC,SAAS,EACT,eAAeC,UAAU,EACR;IACjB,MAAMC,eAAeJ,AAAsBK,WAAtBL;IACrB,MAAM,CAACM,qBAAqBC,uBAAuB,GAAGC,SAAS;IAC/D,MAAM,CAACC,YAAYC,cAAc,GAAGF;IAEpC,MAAMG,YAAYP,eAAeJ,oBAAoBM;IAErD,MAAMM,aAAaC,YACf,CAACC;QACG,IAAI,CAACV,cACDG,uBAAuBO;QAE3Bb,kBAAkBa;IACtB,GACA;QAACV;QAAcH;KAAgB;IAGnC,MAAMc,eAAeF,YAAY;QAC7BH,cAAclB;QACdoB,WAAW;IACf,GAAG;QAACpB;QAAOoB;KAAW;IAEtB,MAAMI,SAASH,YACX,CAACI;QACGxB,SAASwB;QACTP,cAAcL;QACdO,WAAW;IACf,GACA;QAACnB;QAAUmB;KAAW;IAG1B,MAAMM,SAASL,YAAY;QACvBH,cAAcL;QACdO,WAAW;IACf,GAAG;QAACA;KAAW;IAEf,MAAMO,UAAU,CAACC,WAAAA,WAAAA,GACb,oBAAC;YAAI,WAAWC,GAAG,6CAA6CnB;WAC3DJ,cACAsB;IAIT,IAAI1B,UACA,OAAOyB,QAAQ,WAARA,GACH,oBAACG,SAAOA;QACJ,OAAO;QACP,WAAW;QACX,eAAanB;OAEZX;IAKb,IAAImB,WACA,OAAOQ,QAAQ,WAARA,GACH,oBAACI,OAAKA;QACF,WAAW3B;QACX,YAAYC;QACZ,MAAM;QACN,SAAS;QACT,aAAaF;QACb,OAAOc,cAAcjB;QACrB,UAAUkB;QACV,QAAQc,CAAAA,IAAKR,OAAOQ,EAAE,aAAa,CAAC,KAAK;QACzC,SAASA,CAAAA,IAAKR,OAAOQ,EAAE,aAAa,CAAC,KAAK;QAC1C,UAAUN;;IAKtB,MAAMO,UAAU,WAAVA,GACF,oBAAC;QACG,SAASV;QACT,eAAaZ;QACb,WAAWkB,GACP,wDACA,iHACA,oDACA;OAGH7B;IAIT,OAAO2B,QACHpB,UAAU,WAAVA,GAAU,oBAAC2B,SAAOA;QAAC,MAAM;QAAU,SAAS3B;QAAS,SAAS0B;SAAcA;AAEpF;AAEA,MAAME,gBAAgBC,gBAAgB,iBAAiBrC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./EditableTitle.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./EditableTitle.js";
|
package/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export * from "./Dialog/index.js";
|
|
|
18
18
|
export * from "./Drawer/index.js";
|
|
19
19
|
export * from "./DropdownMenu/index.js";
|
|
20
20
|
export * from "./DynamicFieldset/index.js";
|
|
21
|
+
export * from "./EditableTitle/index.js";
|
|
21
22
|
export * from "./FilePicker/index.js";
|
|
22
23
|
export * from "./FillViewport/index.js";
|
|
23
24
|
export * from "./FormComponent/index.js";
|
package/index.js
CHANGED
|
@@ -18,6 +18,7 @@ export * from "./Dialog/index.js";
|
|
|
18
18
|
export * from "./Drawer/index.js";
|
|
19
19
|
export * from "./DropdownMenu/index.js";
|
|
20
20
|
export * from "./DynamicFieldset/index.js";
|
|
21
|
+
export * from "./EditableTitle/index.js";
|
|
21
22
|
export * from "./FilePicker/index.js";
|
|
22
23
|
export * from "./FillViewport/index.js";
|
|
23
24
|
export * from "./FormComponent/index.js";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/admin-ui",
|
|
3
|
-
"version": "6.4.3-beta.
|
|
3
|
+
"version": "6.4.3-beta.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./index.js",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"@monaco-editor/react": "4.7.0",
|
|
20
20
|
"@radix-ui/react-scroll-area": "1.2.11",
|
|
21
21
|
"@tanstack/react-table": "8.21.3",
|
|
22
|
-
"@webiny/icons": "6.4.3-beta.
|
|
23
|
-
"@webiny/react-composition": "6.4.3-beta.
|
|
24
|
-
"@webiny/utils": "6.4.3-beta.
|
|
22
|
+
"@webiny/icons": "6.4.3-beta.2",
|
|
23
|
+
"@webiny/react-composition": "6.4.3-beta.2",
|
|
24
|
+
"@webiny/utils": "6.4.3-beta.2",
|
|
25
25
|
"bytes": "3.1.2",
|
|
26
26
|
"class-variance-authority": "0.7.1",
|
|
27
27
|
"clsx": "2.1.1",
|
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
"@types/react-color": "3.0.13",
|
|
57
57
|
"@types/react-custom-scrollbars": "4.0.13",
|
|
58
58
|
"@types/react-virtualized": "9.22.3",
|
|
59
|
-
"@webiny/build-tools": "6.4.3-beta.
|
|
60
|
-
"@webiny/project": "6.4.3-beta.
|
|
59
|
+
"@webiny/build-tools": "6.4.3-beta.2",
|
|
60
|
+
"@webiny/project": "6.4.3-beta.2",
|
|
61
61
|
"chalk": "5.6.2",
|
|
62
62
|
"oxfmt": "0.51.0",
|
|
63
63
|
"rimraf": "6.1.3",
|