@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.
Files changed (34) hide show
  1. package/dist/esm/ui/EditableBlock/Context.js +4 -0
  2. package/dist/esm/ui/EditableBlock/Context.js.map +1 -0
  3. package/dist/esm/ui/EditableBlock/EditableBlock.js +33 -0
  4. package/dist/esm/ui/EditableBlock/EditableBlock.js.map +1 -0
  5. package/dist/esm/ui/EditableBlock/EditableBlock.test.js +57 -0
  6. package/dist/esm/ui/EditableBlock/EditableBlock.test.js.map +1 -0
  7. package/dist/esm/ui/EditableBlock/hooks/index.js +2 -0
  8. package/dist/esm/ui/EditableBlock/hooks/index.js.map +1 -0
  9. package/dist/esm/ui/EditableBlock/hooks/useEditableBlock.js +11 -0
  10. package/dist/esm/ui/EditableBlock/hooks/useEditableBlock.js.map +1 -0
  11. package/dist/esm/ui/EditableBlock/index.js +3 -0
  12. package/dist/esm/ui/EditableBlock/index.js.map +1 -0
  13. package/dist/esm/ui/EditableBlock/styles.css +41 -0
  14. package/dist/esm/ui/EditableBlock/types.js +2 -0
  15. package/dist/esm/ui/EditableBlock/types.js.map +1 -0
  16. package/dist/esm/ui/index.js +1 -0
  17. package/dist/esm/ui/index.js.map +1 -1
  18. package/dist/types/ui/EditableBlock/Context.d.ts +4 -0
  19. package/dist/types/ui/EditableBlock/Context.d.ts.map +1 -0
  20. package/dist/types/ui/EditableBlock/EditableBlock.d.ts +10 -0
  21. package/dist/types/ui/EditableBlock/EditableBlock.d.ts.map +1 -0
  22. package/dist/types/ui/EditableBlock/EditableBlock.test.d.ts +2 -0
  23. package/dist/types/ui/EditableBlock/EditableBlock.test.d.ts.map +1 -0
  24. package/dist/types/ui/EditableBlock/hooks/index.d.ts +2 -0
  25. package/dist/types/ui/EditableBlock/hooks/index.d.ts.map +1 -0
  26. package/dist/types/ui/EditableBlock/hooks/useEditableBlock.d.ts +4 -0
  27. package/dist/types/ui/EditableBlock/hooks/useEditableBlock.d.ts.map +1 -0
  28. package/dist/types/ui/EditableBlock/index.d.ts +3 -0
  29. package/dist/types/ui/EditableBlock/index.d.ts.map +1 -0
  30. package/dist/types/ui/EditableBlock/types.d.ts +24 -0
  31. package/dist/types/ui/EditableBlock/types.d.ts.map +1 -0
  32. package/dist/types/ui/index.d.ts +1 -0
  33. package/dist/types/ui/index.d.ts.map +1 -1
  34. package/package.json +2 -2
@@ -0,0 +1,4 @@
1
+ import { createContext } from "react";
2
+ const EditingContext = createContext(undefined);
3
+ export default EditingContext;
4
+ //# sourceMappingURL=Context.js.map
@@ -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,2 @@
1
+ export * from "./useEditableBlock.js";
2
+ //# sourceMappingURL=index.js.map
@@ -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,3 @@
1
+ /* @canonical/generator-ds 0.8.0-experimental.0 */
2
+ export { default as EditableBlock } from "./EditableBlock.js";
3
+ //# sourceMappingURL=index.js.map
@@ -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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/types.ts"],"names":[],"mappings":""}
@@ -1,2 +1,3 @@
1
1
  export * from "./GitDiffViewer/index.js";
2
+ export * from "./EditableBlock/index.js";
2
3
  //# sourceMappingURL=index.js.map
@@ -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,4 @@
1
+ import type { EditingContextType } from "./types.js";
2
+ declare const EditingContext: import("react").Context<EditingContextType | undefined>;
3
+ export default EditingContext;
4
+ //# sourceMappingURL=Context.d.ts.map
@@ -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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=EditableBlock.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EditableBlock.test.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export * from "./useEditableBlock.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -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,4 @@
1
+ import type { EditingContextType } from "../types.js";
2
+ export declare const useEditableBlock: () => EditingContextType;
3
+ export default useEditableBlock;
4
+ //# sourceMappingURL=useEditableBlock.d.ts.map
@@ -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,3 @@
1
+ export { default as EditableBlock } from "./EditableBlock.js";
2
+ export type { default as EditableBlockProps } from "./types.js";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -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"}
@@ -1,2 +1,3 @@
1
1
  export * from "./GitDiffViewer/index.js";
2
+ export * from "./EditableBlock/index.js";
2
3
  //# sourceMappingURL=index.d.ts.map
@@ -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.6",
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": "88907393fcb7f317006ac5198c849fd6ba0b8c0b"
72
+ "gitHead": "33b2a02e8c6c1befb93d206175a321c33c2064e5"
73
73
  }