@canonical/react-ds-app-launchpad 0.9.0-experimental.6 → 0.9.0-experimental.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/dist/esm/ui/EditableBlock/Context.js +4 -0
- package/dist/esm/ui/EditableBlock/Context.js.map +1 -0
- package/dist/esm/ui/EditableBlock/EditableBlock.js +33 -0
- package/dist/esm/ui/EditableBlock/EditableBlock.js.map +1 -0
- package/dist/esm/ui/EditableBlock/EditableBlock.test.js +57 -0
- package/dist/esm/ui/EditableBlock/EditableBlock.test.js.map +1 -0
- package/dist/esm/ui/EditableBlock/hooks/index.js +2 -0
- package/dist/esm/ui/EditableBlock/hooks/index.js.map +1 -0
- package/dist/esm/ui/EditableBlock/hooks/useEditableBlock.js +11 -0
- package/dist/esm/ui/EditableBlock/hooks/useEditableBlock.js.map +1 -0
- package/dist/esm/ui/EditableBlock/index.js +3 -0
- package/dist/esm/ui/EditableBlock/index.js.map +1 -0
- package/dist/esm/ui/EditableBlock/styles.css +41 -0
- package/dist/esm/ui/EditableBlock/types.js +2 -0
- package/dist/esm/ui/EditableBlock/types.js.map +1 -0
- package/dist/esm/ui/index.js +1 -0
- package/dist/esm/ui/index.js.map +1 -1
- package/dist/types/ui/EditableBlock/Context.d.ts +4 -0
- package/dist/types/ui/EditableBlock/Context.d.ts.map +1 -0
- package/dist/types/ui/EditableBlock/EditableBlock.d.ts +10 -0
- package/dist/types/ui/EditableBlock/EditableBlock.d.ts.map +1 -0
- package/dist/types/ui/EditableBlock/EditableBlock.test.d.ts +2 -0
- package/dist/types/ui/EditableBlock/EditableBlock.test.d.ts.map +1 -0
- package/dist/types/ui/EditableBlock/hooks/index.d.ts +2 -0
- package/dist/types/ui/EditableBlock/hooks/index.d.ts.map +1 -0
- package/dist/types/ui/EditableBlock/hooks/useEditableBlock.d.ts +4 -0
- package/dist/types/ui/EditableBlock/hooks/useEditableBlock.d.ts.map +1 -0
- package/dist/types/ui/EditableBlock/index.d.ts +3 -0
- package/dist/types/ui/EditableBlock/index.d.ts.map +1 -0
- package/dist/types/ui/EditableBlock/types.d.ts +24 -0
- package/dist/types/ui/EditableBlock/types.d.ts.map +1 -0
- package/dist/types/ui/index.d.ts +1 -0
- package/dist/types/ui/index.d.ts.map +1 -1
- package/package.json +2 -2
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,cAAc,GAAG,aAAa,CAAiC,SAAS,CAAC,CAAC;AAEhF,eAAe,cAAc,CAAC"}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { useCallback, useRef, useState } from "react";
|
3
|
+
import EditingContext from "./Context.js";
|
4
|
+
import "./styles.css";
|
5
|
+
/**
|
6
|
+
* Component that renders toggling edit mode block
|
7
|
+
* @returns {React.ReactElement} - Rendered EditableBlock
|
8
|
+
*/
|
9
|
+
const EditableBlock = ({ id, EditComponent, className: userClassName, style, title, tag: TitleTag = "h3", }) => {
|
10
|
+
const [isEditing, setIsEditing] = useState(false);
|
11
|
+
const isFocusedRef = useRef(false);
|
12
|
+
const toggleEditing = useCallback(() => {
|
13
|
+
setIsEditing((editing) => !editing);
|
14
|
+
}, []);
|
15
|
+
const handleBlur = useCallback(() => {
|
16
|
+
isFocusedRef.current = false;
|
17
|
+
}, []);
|
18
|
+
const handleFocus = useCallback(() => {
|
19
|
+
isFocusedRef.current = true;
|
20
|
+
}, []);
|
21
|
+
const handleKeyUp = useCallback((event) => {
|
22
|
+
if ((isFocusedRef.current && event.key === "Enter") ||
|
23
|
+
event.key === " ") {
|
24
|
+
toggleEditing();
|
25
|
+
}
|
26
|
+
}, [toggleEditing]);
|
27
|
+
const componentCssClassName = "ds editable-block";
|
28
|
+
return (_jsx(EditingContext.Provider, { value: { isEditing, toggleEditing }, children: _jsxs("div", { className: [componentCssClassName, userClassName]
|
29
|
+
.filter(Boolean)
|
30
|
+
.join(" "), style: style, id: id, children: [_jsxs("header", { children: [_jsx(TitleTag, { className: "title", children: title }), _jsx("div", { className: `icon ${isEditing ? "icon-close" : "icon-edit"}`, onClick: toggleEditing, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: handleFocus, role: "button", tabIndex: 0 })] }), _jsx("div", { className: "content", children: EditComponent && (_jsx(EditComponent, { ...{ isEditing, toggleEditing } })) })] }) }));
|
31
|
+
};
|
32
|
+
export default EditableBlock;
|
33
|
+
//# sourceMappingURL=EditableBlock.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"EditableBlock.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,cAAc,MAAM,cAAc,CAAC;AAG1C,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AAEH,MAAM,aAAa,GAAG,CAA6B,EACjD,EAAE,EACF,aAAa,EACb,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,KAAK,EACL,GAAG,EAAE,QAAQ,GAAG,IAAI,GACE,EAAsB,EAAE;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,YAAY,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA0B,EAAE,EAAE;QAC7B,IACE,CAAC,YAAY,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC;YAC/C,KAAK,CAAC,GAAG,KAAK,GAAG,EACjB,CAAC;YACD,aAAa,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,qBAAqB,GAAG,mBAAmB,CAAC;IAElD,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAC1D,eACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,aAAa,CAAC;iBAC9C,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,EACZ,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,aAEN,6BACE,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,YAAE,KAAK,GAAY,EAC9C,cACE,SAAS,EAAE,QAAQ,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,EAC3D,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,GACX,IACK,EACT,cAAK,SAAS,EAAC,SAAS,YACrB,aAAa,IAAI,CAChB,KAAC,aAAa,OAAM,EAAE,SAAS,EAAE,aAAa,EAAQ,GAAI,CAC3D,GACG,IACF,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
/* @canonical/generator-ds 0.8.0-experimental.0 */
|
3
|
+
import { fireEvent, render, screen } from "@testing-library/react";
|
4
|
+
import { describe, expect, it } from "vitest";
|
5
|
+
import EditableBlock from "./EditableBlock.js";
|
6
|
+
import { useEditableBlock } from "./hooks/useEditableBlock.js";
|
7
|
+
const SampleEditComponent = () => {
|
8
|
+
return _jsx("div", { children: "Sample" });
|
9
|
+
};
|
10
|
+
describe("EditableBlock component", () => {
|
11
|
+
it("renders children content", () => {
|
12
|
+
render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
|
13
|
+
const sampleElement = screen.getByText("Sample");
|
14
|
+
expect(sampleElement).not.toBeNull();
|
15
|
+
expect(document.body.contains(sampleElement)).toBe(true);
|
16
|
+
});
|
17
|
+
it("toggles editing state when icon is clicked", () => {
|
18
|
+
render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
|
19
|
+
const editIcon = screen.getByRole("button");
|
20
|
+
fireEvent.click(editIcon);
|
21
|
+
expect(editIcon.classList.contains("icon-close")).toBe(true);
|
22
|
+
fireEvent.click(editIcon);
|
23
|
+
expect(editIcon.classList.contains("icon-edit")).toBe(true);
|
24
|
+
});
|
25
|
+
it("toggles editing state when Enter key is pressed", () => {
|
26
|
+
render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
|
27
|
+
const editIcon = screen.getByRole("button");
|
28
|
+
fireEvent.keyUp(editIcon, { key: "Enter", code: "Enter", charCode: 13 });
|
29
|
+
expect(editIcon.classList.contains("icon-close")).toBe(true);
|
30
|
+
fireEvent.keyUp(editIcon, { key: "Enter", code: "Enter", charCode: 13 });
|
31
|
+
expect(editIcon.classList.contains("icon-edit")).toBe(true);
|
32
|
+
});
|
33
|
+
it("toggles editing state when Space key is pressed", () => {
|
34
|
+
render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
|
35
|
+
const editIcon = screen.getByRole("button");
|
36
|
+
fireEvent.keyUp(editIcon, { key: " ", code: "Space", charCode: 32 });
|
37
|
+
expect(editIcon.classList.contains("icon-close")).toBe(true);
|
38
|
+
fireEvent.keyUp(editIcon, { key: " ", code: "Space", charCode: 32 });
|
39
|
+
expect(editIcon.classList.contains("icon-edit")).toBe(true);
|
40
|
+
});
|
41
|
+
it("provides editing context to children", () => {
|
42
|
+
const ChildComponent = () => {
|
43
|
+
const { isEditing } = useEditableBlock();
|
44
|
+
return _jsx("div", { children: isEditing ? "Editing" : "Not Editing" });
|
45
|
+
};
|
46
|
+
render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: ChildComponent }));
|
47
|
+
const notEditingElement = screen.getByText("Not Editing");
|
48
|
+
expect(notEditingElement).not.toBeNull();
|
49
|
+
expect(document.body.contains(notEditingElement)).toBe(true);
|
50
|
+
const editIcon = screen.getByRole("button");
|
51
|
+
fireEvent.click(editIcon);
|
52
|
+
const editingElement = screen.getByText("Editing");
|
53
|
+
expect(editingElement).not.toBeNull();
|
54
|
+
expect(document.body.contains(editingElement)).toBe(true);
|
55
|
+
});
|
56
|
+
});
|
57
|
+
//# sourceMappingURL=EditableBlock.test.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"EditableBlock.test.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.test.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { useContext } from "react";
|
2
|
+
import EditingContext from "../Context.js";
|
3
|
+
export const useEditableBlock = () => {
|
4
|
+
const context = useContext(EditingContext);
|
5
|
+
if (!context) {
|
6
|
+
throw new Error("useEditing cannot be used directly.");
|
7
|
+
}
|
8
|
+
return context;
|
9
|
+
};
|
10
|
+
export default useEditableBlock;
|
11
|
+
//# sourceMappingURL=useEditableBlock.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useEditableBlock.js","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/useEditableBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,cAAc,MAAM,eAAe,CAAC;AAG3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAuB,EAAE;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;IACzD,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC"}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
.ds.editable-block {
|
2
|
+
--editable-block-header-icon-size: 16px;
|
3
|
+
--editable-block-header-icon-edit-url: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 13.25v1.5H2v-1.5h12zM11.907 1.676l.58.58a2 2 0 010 2.829l-5.133 5.133c-.038.038-.079.073-.122.104l.01.008a3.77 3.77 0 01-1.718.983l-3.52.914.863-3.583c.138-.57.41-1.099.795-1.54l.17-.183.01.01c.03-.043.065-.084.103-.122l5.133-5.133a2 2 0 012.829 0zm-3.309 2.6L5.036 7.84l-.593.82 1.062 1.063.814-.591 3.567-3.568-1.288-1.288zm1.61-1.597l-.07.057-.479.48 1.288 1.288.48-.48a.5.5 0 00.057-.638l-.057-.069-.581-.58a.5.5 0 00-.638-.058z' fill='%23000000' fill-rule='nonzero'/%3E%3C/svg%3E");
|
4
|
+
--editable-block-header-icon-close-url: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
|
5
|
+
--editable-block-header-title-font-weight: 550;
|
6
|
+
|
7
|
+
> header {
|
8
|
+
display: flex;
|
9
|
+
justify-content: space-between;
|
10
|
+
align-items: center;
|
11
|
+
|
12
|
+
> .icon {
|
13
|
+
width: var(--editable-block-header-icon-size);
|
14
|
+
height: var(--editable-block-header-icon-size);
|
15
|
+
background-size: contain;
|
16
|
+
background-repeat: no-repeat;
|
17
|
+
cursor: pointer;
|
18
|
+
}
|
19
|
+
|
20
|
+
> .icon-edit {
|
21
|
+
background-image: var(--editable-block-header-icon-edit-url);
|
22
|
+
}
|
23
|
+
|
24
|
+
> .icon-close {
|
25
|
+
background-image: var(--editable-block-header-icon-close-url);
|
26
|
+
}
|
27
|
+
|
28
|
+
> .title {
|
29
|
+
flex: 1;
|
30
|
+
text-align: left;
|
31
|
+
font-weight: var(--editable-block-header-title-font-weight);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
> .content {
|
36
|
+
flex-grow: 1;
|
37
|
+
display: flex;
|
38
|
+
justify-content: center;
|
39
|
+
align-items: center;
|
40
|
+
}
|
41
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/types.ts"],"names":[],"mappings":""}
|
package/dist/esm/ui/index.js
CHANGED
package/dist/esm/ui/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/Context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,QAAA,MAAM,cAAc,yDAA2D,CAAC;AAEhF,eAAe,cAAc,CAAC"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import type React from "react";
|
2
|
+
import type { EditElementProps, EditableBlockProps } from "./types.js";
|
3
|
+
import "./styles.css";
|
4
|
+
/**
|
5
|
+
* Component that renders toggling edit mode block
|
6
|
+
* @returns {React.ReactElement} - Rendered EditableBlock
|
7
|
+
*/
|
8
|
+
declare const EditableBlock: <T extends EditElementProps>({ id, EditComponent, className: userClassName, style, title, tag: TitleTag, }: EditableBlockProps<T>) => React.ReactElement;
|
9
|
+
export default EditableBlock;
|
10
|
+
//# sourceMappingURL=EditableBlock.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"EditableBlock.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEvE,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AAEH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,gBAAgB,iFAO9C,kBAAkB,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YA2DhC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"EditableBlock.test.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.test.tsx"],"names":[],"mappings":""}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useEditableBlock.d.ts","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/useEditableBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,gBAAgB,QAAO,kBAMnC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import type React from "react";
|
2
|
+
import type { JSX } from "react";
|
3
|
+
export interface EditingContextType {
|
4
|
+
isEditing: boolean;
|
5
|
+
toggleEditing: () => void;
|
6
|
+
}
|
7
|
+
export type EditElementProps = EditingContextType;
|
8
|
+
export type EditElement<T extends EditElementProps> = (props: T) => React.ReactNode;
|
9
|
+
export interface EditableBlockProps<T extends EditElementProps> {
|
10
|
+
/** Unique identifier for the editable block */
|
11
|
+
id?: string;
|
12
|
+
/** Component to render when in edit mode, must implement EditElement interface */
|
13
|
+
EditComponent: EditElement<T>;
|
14
|
+
/** CSS class name for additional styling */
|
15
|
+
className?: string;
|
16
|
+
/** Inline CSS styles to apply to the component */
|
17
|
+
style?: React.CSSProperties;
|
18
|
+
/** Title text for the editable block */
|
19
|
+
title?: string;
|
20
|
+
/** HTML element type to render as the title component (e.g., 'div', 'section') */
|
21
|
+
tag?: keyof JSX.IntrinsicElements;
|
22
|
+
}
|
23
|
+
export default EditableBlockProps;
|
24
|
+
//# sourceMappingURL=types.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AAElD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,gBAAgB,IAAI,CACpD,KAAK,EAAE,CAAC,KACL,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,gBAAgB;IAC5D,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kFAAkF;IAClF,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAC9B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CACnC;AAED,eAAe,kBAAkB,CAAC"}
|
package/dist/types/ui/index.d.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@canonical/react-ds-app-launchpad",
|
3
|
-
"version": "0.9.0-experimental.
|
3
|
+
"version": "0.9.0-experimental.7",
|
4
4
|
"type": "module",
|
5
5
|
"module": "dist/esm/index.js",
|
6
6
|
"types": "dist/types/index.d.ts",
|
@@ -69,5 +69,5 @@
|
|
69
69
|
"vite-tsconfig-paths": "^5.1.4",
|
70
70
|
"vitest": "^2.1.8"
|
71
71
|
},
|
72
|
-
"gitHead": "
|
72
|
+
"gitHead": "33b2a02e8c6c1befb93d206175a321c33c2064e5"
|
73
73
|
}
|