@frontify/guideline-blocks-settings 0.32.2 → 0.33.0
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/CHANGELOG.md +108 -1
- package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js +23 -27
- package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js.map +1 -1
- package/dist/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.es.js.map +1 -1
- package/dist/components/BlockItemWrapper/Toolbar/Toolbar.es.js +10 -14
- package/dist/components/BlockItemWrapper/Toolbar/Toolbar.es.js.map +1 -1
- package/dist/index.cjs.js +3 -3
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +42 -11
- package/dist/index.es.js +201 -193
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +3 -3
- package/dist/index.umd.js.map +1 -1
- package/package.json +3 -2
- package/src/components/BlockItemWrapper/BlockItemWrapper.spec.ct.tsx +37 -38
- package/src/components/BlockItemWrapper/BlockItemWrapper.tsx +0 -4
- package/src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.tsx +2 -1
- package/src/components/BlockItemWrapper/Toolbar/Toolbar.spec.tsx +165 -30
- package/src/components/BlockItemWrapper/Toolbar/Toolbar.tsx +14 -9
- package/src/components/BlockItemWrapper/Toolbar/context/index.ts +4 -0
- package/src/components/BlockItemWrapper/Toolbar/hooks/index.ts +3 -0
- package/src/components/BlockItemWrapper/Toolbar/index.ts +2 -0
- package/src/components/BlockItemWrapper/Toolbar/types.ts +8 -9
- package/src/components/BlockItemWrapper/types.ts +1 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,117 @@
|
|
|
1
1
|
# @frontify/guideline-blocks-settings
|
|
2
2
|
|
|
3
|
+
## 0.33.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#756](https://github.com/Frontify/brand-sdk/pull/756) [`dc4b57d`](https://github.com/Frontify/brand-sdk/commit/dc4b57d698e037cac4d6eca75e45f2ef65e96b47) Thanks [@SamCreasey](https://github.com/SamCreasey)! - - feat(Toolbar): extend `items` to include `menu` and `flyout` type. Each `item` must now contain a `type` prop (`"dragHandle"`, `"button"`, `"flyout"`, `"menu"`). The `flyoutItems` prop has been removed as any item in the items array can now be a flyout. This change is also reflected in the `BlockItemWrapper`, where `toolbarFlyoutItems` has now been removed.
|
|
8
|
+
|
|
9
|
+
Migration Example:
|
|
10
|
+
|
|
11
|
+
```jsx
|
|
12
|
+
<Toolbar
|
|
13
|
+
items={[
|
|
14
|
+
{
|
|
15
|
+
icon: <IconArrowMove16 />,
|
|
16
|
+
draggableProps,
|
|
17
|
+
setActivatorNodeRef,
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
icon: <IconTrashBin16 />,
|
|
21
|
+
tooltip: "Delete Item",
|
|
22
|
+
onClick: onRemoveSelf,
|
|
23
|
+
},
|
|
24
|
+
]}
|
|
25
|
+
flyoutItems={[
|
|
26
|
+
[
|
|
27
|
+
{
|
|
28
|
+
title: "Delete",
|
|
29
|
+
icon: <IconTrashBin20 />,
|
|
30
|
+
onClick,
|
|
31
|
+
},
|
|
32
|
+
],
|
|
33
|
+
]}
|
|
34
|
+
/>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
The above component should now be written as:
|
|
38
|
+
|
|
39
|
+
```jsx
|
|
40
|
+
<Toolbar
|
|
41
|
+
items={[
|
|
42
|
+
{
|
|
43
|
+
type: "dragHandle",
|
|
44
|
+
icon: <IconArrowMove16 />,
|
|
45
|
+
draggableProps,
|
|
46
|
+
setActivatorNodeRef,
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
type: "button",
|
|
50
|
+
icon: <IconTrashBin16 />,
|
|
51
|
+
tooltip: "Delete Item",
|
|
52
|
+
onClick: onRemoveSelf,
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
type: "menu",
|
|
56
|
+
items: [
|
|
57
|
+
{
|
|
58
|
+
title: "Delete",
|
|
59
|
+
icon: <IconTrashBin20 />,
|
|
60
|
+
onClick,
|
|
61
|
+
},
|
|
62
|
+
],
|
|
63
|
+
flyoutId: "special-menu",
|
|
64
|
+
},
|
|
65
|
+
]}
|
|
66
|
+
/>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Full "Flyout as a toolbar button" example:
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
const FlyoutFooterWithCloseButton = ({ flyoutId }) => {
|
|
73
|
+
// The flyout footer can close the flyout by accessing the flyout context
|
|
74
|
+
const { onOpenChange } = useMultiFlyoutState(flyoutId);
|
|
75
|
+
|
|
76
|
+
return <button onClick={() => onOpenChange(false)}>Cancel</button>;
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
const ExampleToolbar = () => {
|
|
80
|
+
const [openFlyoutIds, setOpenFlyoutIds] = useState([]);
|
|
81
|
+
|
|
82
|
+
return (
|
|
83
|
+
<MultiFlyoutContextProvider
|
|
84
|
+
openFlyoutIds={openFlyoutIds}
|
|
85
|
+
setOpenFlyoutIds={setOpenFlyoutIds}
|
|
86
|
+
>
|
|
87
|
+
<Toolbar
|
|
88
|
+
items={[
|
|
89
|
+
{
|
|
90
|
+
type: "flyout",
|
|
91
|
+
icon: <IconArrowMove16 />,
|
|
92
|
+
tooltip: "Move To",
|
|
93
|
+
content: <div>Content</div>,
|
|
94
|
+
flyoutHeader: <div>Fixed Header</div>,
|
|
95
|
+
flyoutFooter: <FlyoutFooterWithCloseButton flyoutId="move" />,
|
|
96
|
+
flyoutId: "move",
|
|
97
|
+
},
|
|
98
|
+
]}
|
|
99
|
+
/>
|
|
100
|
+
</MultiFlyoutContextProvider>
|
|
101
|
+
);
|
|
102
|
+
};
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Patch Changes
|
|
106
|
+
|
|
107
|
+
- Updated dependencies [[`7f57867`](https://github.com/Frontify/brand-sdk/commit/7f57867274c7ba21a0a1ab5ecc46852d559d968d)]:
|
|
108
|
+
- @frontify/sidebar-settings@0.9.2
|
|
109
|
+
|
|
3
110
|
## 0.32.2
|
|
4
111
|
|
|
5
112
|
### Patch Changes
|
|
6
113
|
|
|
7
|
-
- [#749](https://github.com/Frontify/brand-sdk/pull/749) [`5393e3a`](https://github.com/Frontify/brand-sdk/commit/5393e3aed9822bb00521a22b1cc75a62fafb4a59) Thanks [@SamCreasey](https://github.com/SamCreasey)! - - refactor (Toolbar): split Toolbar into smaller subcomponents. `ToolbarFlyoutState` type has been removed, as well as `flyoutMenu.isOpen`, `flyoutMenu.onOpenChange`, `attachments.isOpen`, `attachments.onOpenChange` props that could be passed to the `Toolbar`
|
|
114
|
+
- [#749](https://github.com/Frontify/brand-sdk/pull/749) [`5393e3a`](https://github.com/Frontify/brand-sdk/commit/5393e3aed9822bb00521a22b1cc75a62fafb4a59) Thanks [@SamCreasey](https://github.com/SamCreasey)! - - refactor (Toolbar): split Toolbar into smaller subcomponents. `ToolbarFlyoutState` type has been removed, as well as `flyoutMenu.isOpen`, `flyoutMenu.onOpenChange`, `attachments.isOpen`, `attachments.onOpenChange` props that could be passed to the `Toolbar` component. To control the state of open `Flyouts` the `Toolbar` must instead be wrapped in a `MultiFlyoutContextProvider`.
|
|
8
115
|
|
|
9
116
|
Migration Example:
|
|
10
117
|
|
|
@@ -1,40 +1,39 @@
|
|
|
1
|
-
import { jsx as t, Fragment as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { DragPreviewContextProvider as
|
|
4
|
-
import { MultiFlyoutContextProvider as
|
|
5
|
-
import { DEFAULT_MENU_BUTTON_ID as
|
|
6
|
-
import { Toolbar as
|
|
7
|
-
import { joinClassNames as
|
|
1
|
+
import { jsx as t, Fragment as y, jsxs as h } from "react/jsx-runtime";
|
|
2
|
+
import { useState as x, useRef as g } from "react";
|
|
3
|
+
import { DragPreviewContextProvider as b } from "./Toolbar/context/DragPreviewContext.es.js";
|
|
4
|
+
import { MultiFlyoutContextProvider as F } from "./Toolbar/context/MultiFlyoutContext.es.js";
|
|
5
|
+
import { DEFAULT_MENU_BUTTON_ID as N } from "./Toolbar/MenuToolbarButton/MenuToolbarButton.es.js";
|
|
6
|
+
import { Toolbar as T } from "./Toolbar/Toolbar.es.js";
|
|
7
|
+
import { joinClassNames as w } from "../../utilities/react/joinClassNames.es.js";
|
|
8
8
|
const k = ({
|
|
9
9
|
children: i,
|
|
10
|
-
toolbarFlyoutItems: w,
|
|
11
10
|
toolbarItems: e,
|
|
12
11
|
shouldHideWrapper: a,
|
|
13
|
-
shouldHideComponent:
|
|
14
|
-
isDragging:
|
|
15
|
-
shouldFillContainer:
|
|
12
|
+
shouldHideComponent: n = !1,
|
|
13
|
+
isDragging: p = !1,
|
|
14
|
+
shouldFillContainer: c,
|
|
16
15
|
outlineOffset: o = 2,
|
|
17
16
|
shouldBeShown: r = !1,
|
|
18
|
-
showAttachments:
|
|
17
|
+
showAttachments: u = !1
|
|
19
18
|
}) => {
|
|
20
|
-
const [l,
|
|
19
|
+
const [l, f] = x(r ? [N] : []), m = g(null);
|
|
21
20
|
if (a)
|
|
22
|
-
return /* @__PURE__ */ t(
|
|
23
|
-
const
|
|
24
|
-
return /* @__PURE__ */ t(
|
|
21
|
+
return /* @__PURE__ */ t(y, { children: i });
|
|
22
|
+
const d = e == null ? void 0 : e.filter((v) => v !== void 0), s = l.length > 0 || r;
|
|
23
|
+
return /* @__PURE__ */ t(b, { isDragPreview: p, children: /* @__PURE__ */ t(F, { openFlyoutIds: l, setOpenFlyoutIds: f, children: /* @__PURE__ */ h(
|
|
25
24
|
"div",
|
|
26
25
|
{
|
|
27
|
-
ref:
|
|
26
|
+
ref: m,
|
|
28
27
|
"data-test-id": "block-item-wrapper",
|
|
29
28
|
style: {
|
|
30
29
|
outlineOffset: o
|
|
31
30
|
},
|
|
32
|
-
className:
|
|
31
|
+
className: w([
|
|
33
32
|
"tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse",
|
|
34
|
-
|
|
33
|
+
c && "tw-flex-1 tw-h-full tw-w-full",
|
|
35
34
|
"hover:tw-outline focus-within:tw-outline",
|
|
36
35
|
s && "tw-outline",
|
|
37
|
-
|
|
36
|
+
n && "tw-opacity-0"
|
|
38
37
|
]),
|
|
39
38
|
children: [
|
|
40
39
|
/* @__PURE__ */ t(
|
|
@@ -44,22 +43,19 @@ const k = ({
|
|
|
44
43
|
right: -1 - o,
|
|
45
44
|
bottom: `calc(100% - ${2 + o}px)`
|
|
46
45
|
},
|
|
47
|
-
className:
|
|
46
|
+
className: w([
|
|
48
47
|
"tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]",
|
|
49
48
|
"group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
|
|
50
49
|
"tw-flex tw-justify-end",
|
|
51
50
|
s && "tw-opacity-100"
|
|
52
51
|
]),
|
|
53
52
|
children: /* @__PURE__ */ t(
|
|
54
|
-
|
|
53
|
+
T,
|
|
55
54
|
{
|
|
56
|
-
flyoutMenu: {
|
|
57
|
-
items: w
|
|
58
|
-
},
|
|
59
55
|
attachments: {
|
|
60
|
-
isEnabled:
|
|
56
|
+
isEnabled: u
|
|
61
57
|
},
|
|
62
|
-
items:
|
|
58
|
+
items: d
|
|
63
59
|
}
|
|
64
60
|
)
|
|
65
61
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { type BlockItemWrapperProps } from './types';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\n\nexport const BlockItemWrapper = ({\n children,\n
|
|
1
|
+
{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { type BlockItemWrapperProps } from './types';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\n\nexport const BlockItemWrapper = ({\n children,\n toolbarItems,\n shouldHideWrapper,\n shouldHideComponent = false,\n isDragging = false,\n shouldFillContainer,\n outlineOffset = 2,\n shouldBeShown = false,\n showAttachments = false,\n}: BlockItemWrapperProps): ReactElement => {\n const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n if (shouldHideWrapper) {\n // eslint-disable-next-line react/jsx-no-useless-fragment\n return <>{children}</>;\n }\n\n const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;\n\n return (\n <DragPreviewContextProvider isDragPreview={isDragging}>\n <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\n <div\n ref={wrapperRef}\n data-test-id=\"block-item-wrapper\"\n style={{\n outlineOffset,\n }}\n className={joinClassNames([\n 'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n 'hover:tw-outline focus-within:tw-outline',\n shouldToolbarBeVisible && 'tw-outline',\n shouldHideComponent && 'tw-opacity-0',\n ])}\n >\n <div\n style={{\n right: -1 - outlineOffset,\n bottom: `calc(100% - ${2 + outlineOffset}px)`,\n }}\n className={joinClassNames([\n 'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n 'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n 'tw-flex tw-justify-end',\n shouldToolbarBeVisible && 'tw-opacity-100',\n ])}\n >\n <Toolbar\n attachments={{\n isEnabled: showAttachments,\n }}\n items={items}\n />\n </div>\n {children}\n </div>\n </MultiFlyoutContextProvider>\n </DragPreviewContextProvider>\n );\n};\n"],"names":["BlockItemWrapper","children","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","openFlyoutIds","setOpenFlyoutIds","useState","DEFAULT_MENU_BUTTON_ID","wrapperRef","useRef","items","item","shouldToolbarBeVisible","DragPreviewContextProvider","jsx","MultiFlyoutContextProvider","jsxs","joinClassNames","Toolbar"],"mappings":";;;;;;;AAWO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AACtB,MAA2C;AACjC,QAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,CAAA,CAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,MAAIZ;AAEA,kCAAU,UAAAF,EAAS,CAAA;AAGvB,QAAMe,IAAQd,KAAA,gBAAAA,EAAc,OAAO,CAACe,MAA8BA,MAAS,SAErEC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,2BACKW,GAA2B,EAAA,eAAed,GACvC,UAAC,gBAAAe,EAAAC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACL,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAP;AAAA,MACJ;AAAA,MACA,WAAWgB,EAAe;AAAA,QACtB;AAAA,QACAjB,KAAuB;AAAA,QACvB;AAAA,QACAY,KAA0B;AAAA,QAC1Bd,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKb;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWgB,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,cACA;AAAA,cACAL,KAA0B;AAAA,YAAA,CAC7B;AAAA,YAED,UAAA,gBAAAE;AAAA,cAACI;AAAA,cAAA;AAAA,gBACG,aAAa;AAAA,kBACT,WAAWf;AAAA,gBACf;AAAA,gBACA,OAAAO;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCf;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAET,CAAA,EACJ,CAAA;AAER;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragHandleToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../../constants';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\nimport { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';\n\nexport type DragHandleToolbarButtonProps = {\n icon
|
|
1
|
+
{"version":3,"file":"DragHandleToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactNode } from 'react';\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../../constants';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\nimport { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';\n\nexport type DragHandleToolbarButtonProps = {\n icon?: ReactNode;\n tooltip?: string;\n draggableProps: Record<string, unknown>;\n setActivatorNodeRef?: (node: HTMLElement | null) => void;\n};\n\nexport const DragHandleToolbarButton = ({\n tooltip,\n icon,\n setActivatorNodeRef,\n draggableProps,\n}: DragHandleToolbarButtonProps) => {\n const isDragPreview = useDragPreviewContext();\n\n return (\n <ToolbarButtonTooltip\n open={isDragPreview}\n content={<div>{isDragPreview ? DEFAULT_DRAGGING_TOOLTIP : tooltip ?? DEFAULT_DRAG_TOOLTIP}</div>}\n >\n <BaseToolbarButton\n ref={setActivatorNodeRef}\n data-test-id=\"block-item-wrapper-toolbar-btn\"\n forceActiveStyle={isDragPreview}\n cursor=\"grab\"\n {...draggableProps}\n >\n {icon}\n </BaseToolbarButton>\n </ToolbarButtonTooltip>\n );\n};\n"],"names":["DragHandleToolbarButton","tooltip","icon","setActivatorNodeRef","draggableProps","isDragPreview","useDragPreviewContext","jsx","ToolbarButtonTooltip","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","BaseToolbarButton"],"mappings":";;;;;AAeO,MAAMA,IAA0B,CAAC;AAAA,EACpC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC;AACJ,MAAoC;AAChC,QAAMC,IAAgBC;AAGlB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMH;AAAA,MACN,SAAU,gBAAAE,EAAA,OAAA,EAAK,UAAgBF,IAAAI,IAA2BR,KAAWS,GAAqB;AAAA,MAE1F,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,KAAKR;AAAA,UACL,gBAAa;AAAA,UACb,kBAAkBE;AAAA,UAClB,QAAO;AAAA,UACN,GAAGD;AAAA,UAEH,UAAAF;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
|
|
@@ -1,26 +1,22 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { ToolbarSegment as
|
|
3
|
-
import { AttachmentsToolbarButton as
|
|
4
|
-
import { DragHandleToolbarButton as
|
|
1
|
+
import { jsxs as n, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { ToolbarSegment as r } from "./ToolbarSegment.es.js";
|
|
3
|
+
import { AttachmentsToolbarButton as a } from "./AttachmentsToolbarButton/AttachmentsToolbarButton.es.js";
|
|
4
|
+
import { DragHandleToolbarButton as p } from "./DragHandleToolbarButton/DragHandleToolbarButton.es.js";
|
|
5
|
+
import { MenuToolbarButton as d } from "./MenuToolbarButton/MenuToolbarButton.es.js";
|
|
6
|
+
import { FlyoutToolbarButton as i } from "./FlyoutToolbarButton/FlyoutToolbarButton.es.js";
|
|
5
7
|
import { ToolbarButton as s } from "./ToolbarButton/ToolbarButton.es.js";
|
|
6
|
-
|
|
7
|
-
const x = ({ items: l, flyoutMenu: r, attachments: i }) => /* @__PURE__ */ a(
|
|
8
|
+
const g = ({ items: e, attachments: l }) => /* @__PURE__ */ n(
|
|
8
9
|
"div",
|
|
9
10
|
{
|
|
10
11
|
"data-test-id": "block-item-wrapper-toolbar",
|
|
11
12
|
className: "tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate",
|
|
12
13
|
children: [
|
|
13
|
-
|
|
14
|
-
/* @__PURE__ */
|
|
15
|
-
l.map(
|
|
16
|
-
(t, e) => "draggableProps" in t ? /* @__PURE__ */ o(m, { ...t }, e) : /* @__PURE__ */ o(s, { ...t }, e)
|
|
17
|
-
),
|
|
18
|
-
r.items.length > 0 && /* @__PURE__ */ o(b, { ...r })
|
|
19
|
-
] })
|
|
14
|
+
l.isEnabled && /* @__PURE__ */ t(r, { children: /* @__PURE__ */ t(a, {}) }),
|
|
15
|
+
/* @__PURE__ */ t(r, { children: e.map((o) => o.type === "dragHandle" ? /* @__PURE__ */ t(p, { ...o }, o.tooltip + o.type) : o.type === "menu" ? /* @__PURE__ */ t(d, { ...o }, o.tooltip + o.type) : o.type === "flyout" ? /* @__PURE__ */ t(i, { ...o }, o.tooltip + o.type) : /* @__PURE__ */ t(s, { ...o }, o.tooltip + o.type)) })
|
|
20
16
|
]
|
|
21
17
|
}
|
|
22
18
|
);
|
|
23
19
|
export {
|
|
24
|
-
|
|
20
|
+
g as Toolbar
|
|
25
21
|
};
|
|
26
22
|
//# sourceMappingURL=Toolbar.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarSegment } from './ToolbarSegment';\nimport { AttachmentsToolbarButton } from './AttachmentsToolbarButton';\nimport { type ToolbarProps } from './types';\nimport { ToolbarButton } from './ToolbarButton';\nimport { DragHandleToolbarButton } from './DragHandleToolbarButton';\nimport { MenuToolbarButton } from './MenuToolbarButton';\n\nexport const Toolbar = ({ items,
|
|
1
|
+
{"version":3,"file":"Toolbar.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarSegment } from './ToolbarSegment';\nimport { AttachmentsToolbarButton } from './AttachmentsToolbarButton';\nimport { type ToolbarProps } from './types';\nimport { ToolbarButton } from './ToolbarButton';\nimport { DragHandleToolbarButton } from './DragHandleToolbarButton';\nimport { FlyoutToolbarButton } from './FlyoutToolbarButton';\nimport { MenuToolbarButton } from './MenuToolbarButton';\n\nexport const Toolbar = ({ items, attachments }: ToolbarProps) => (\n <div\n data-test-id=\"block-item-wrapper-toolbar\"\n className=\"tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate\"\n >\n {attachments.isEnabled && (\n <ToolbarSegment>\n <AttachmentsToolbarButton />\n </ToolbarSegment>\n )}\n <ToolbarSegment>\n {items.map((item) => {\n if (item.type === 'dragHandle') {\n return <DragHandleToolbarButton key={item.tooltip + item.type} {...item} />;\n }\n if (item.type === 'menu') {\n return <MenuToolbarButton key={item.tooltip + item.type} {...item} />;\n }\n if (item.type === 'flyout') {\n return <FlyoutToolbarButton key={item.tooltip + item.type} {...item} />;\n }\n return <ToolbarButton key={item.tooltip + item.type} {...item} />;\n })}\n </ToolbarSegment>\n </div>\n);\n"],"names":["Toolbar","items","attachments","jsxs","jsx","ToolbarSegment","AttachmentsToolbarButton","item","DragHandleToolbarButton","MenuToolbarButton","FlyoutToolbarButton","ToolbarButton"],"mappings":";;;;;;;AAUO,MAAMA,IAAU,CAAC,EAAE,OAAAC,GAAO,aAAAC,EAC7B,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAA;AAAA,MAAAD,EAAY,aACT,gBAAAE,EAACC,GACG,EAAA,UAAA,gBAAAD,EAACE,IAAyB,CAAA,GAC9B;AAAA,MAEH,gBAAAF,EAAAC,GAAA,EACI,UAAMJ,EAAA,IAAI,CAACM,MACJA,EAAK,SAAS,iCACNC,GAAwD,EAAA,GAAGD,KAA9BA,EAAK,UAAUA,EAAK,IAAgB,IAEzEA,EAAK,SAAS,2BACNE,GAAkD,EAAA,GAAGF,KAA9BA,EAAK,UAAUA,EAAK,IAAgB,IAEnEA,EAAK,SAAS,6BACNG,GAAoD,EAAA,GAAGH,KAA9BA,EAAK,UAAUA,EAAK,IAAgB,sBAEjEI,GAA8C,EAAA,GAAGJ,KAA9BA,EAAK,UAAUA,EAAK,IAAgB,CAClE,GACL;AAAA,IAAA;AAAA,EAAA;AACJ;"}
|