@frontify/guideline-blocks-settings 2.1.1 → 2.1.3

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 (9) hide show
  1. package/dist/components/BlockInjectButton/BlockInjectButton.es.js +32 -29
  2. package/dist/components/BlockInjectButton/BlockInjectButton.es.js.map +1 -1
  3. package/dist/components/RichTextEditor/plugins/OrderedListPlugin/index.es.js +3 -3
  4. package/dist/components/RichTextEditor/plugins/OrderedListPlugin/index.es.js.map +1 -1
  5. package/dist/index.cjs.js +3 -3
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.umd.js +3 -3
  8. package/dist/index.umd.js.map +1 -1
  9. package/package.json +1 -1
package/dist/components/BlockInjectButton/BlockInjectButton.es.js CHANGED
@@ -5,7 +5,7 @@ import { IconArrowCircleUp as V, IconImageStack as W, IconExclamationMarkTriangl
5
5
  import { useState as I, useRef as G, useCallback as H, useMemo as J } from "react";
6
6
  import { joinClassNames as Q } from "../../utilities/react/joinClassNames.es.js";
7
7
  const et = ({
8
- onDrop: l,
8
+ onDrop: s,
9
9
  label: f,
10
10
  icon: j,
11
11
  secondaryLabel: u,
@@ -14,19 +14,19 @@ const et = ({
14
14
  onAssetChooseClick: m,
15
15
  onUploadClick: v,
16
16
  withMenu: C = !0,
17
- onClick: E,
17
+ onClick: D,
18
18
  validFileType: h,
19
- verticalLayout: M
19
+ verticalLayout: E
20
20
  }) => {
21
- const [d, p] = I(!1), [n, b] = I(), g = G(null), [s, i] = I(void 0), y = (t) => {
22
- if (t.preventDefault(), p(!1), !D(t.dataTransfer.files)) {
23
- i("Invalid"), setTimeout(() => {
24
- i(void 0);
21
+ const [d, g] = I(!1), [n, p] = I(), b = G(null), [i, l] = I(void 0), M = (t) => {
22
+ if (t.preventDefault(), g(!1), !O(t.dataTransfer.files)) {
23
+ l("Invalid"), setTimeout(() => {
24
+ l(void 0);
25
25
  }, 1e3);
26
26
  return;
27
27
  }
28
- l?.(t.dataTransfer.files);
29
- }, D = (t) => {
28
+ s?.(t.dataTransfer.files);
29
+ }, O = (t) => {
30
30
  if (!h)
31
31
  return !0;
32
32
  for (let r = 0; r < t.length; r++) {
@@ -35,13 +35,13 @@ const et = ({
35
35
  return !1;
36
36
  }
37
37
  return !0;
38
- }, O = (t) => {
39
- if (!g.current || a)
38
+ }, y = (t) => {
39
+ if (!b.current || a)
40
40
  return;
41
- const { clientX: r, clientY: c } = t, N = r === 0 && c === 0, { left: T, top: z, width: B, height: F } = g.current.getBoundingClientRect(), P = N ? B / 2 : r - T, X = N ? F / 2 : c - z;
42
- b([P, X]);
41
+ const { clientX: r, clientY: c } = t, N = r === 0 && c === 0, { left: T, top: z, width: B, height: F } = b.current.getBoundingClientRect(), P = N ? B / 2 : r - T, X = N ? F / 2 : c - z;
42
+ p([P, X]);
43
43
  }, x = H((t) => {
44
- t(), b(void 0);
44
+ t(), p(void 0);
45
45
  }, []), R = J(() => {
46
46
  const t = [];
47
47
  return v && t.push({
@@ -57,35 +57,38 @@ const et = ({
57
57
  return /* @__PURE__ */ o(
58
58
  "button",
59
59
  {
60
- ref: g,
60
+ ref: b,
61
61
  "data-test-id": "block-inject-button",
62
62
  className: Q([
63
63
  "tw-font-primary tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
64
- M ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr",
64
+ E ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr",
65
65
  S ? "tw-h-full" : "tw-h-[72px]",
66
66
  d && !a ? "tw-border-dashed" : "tw-border-solid",
67
67
  n && "tw-bg-blank-state-pressed-inverse",
68
68
  d && "tw-bg-blank-state-weak-inverse",
69
- s ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
70
- a || n || d || s ? "" : "tw-text-secondary hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover",
71
- (d || n) && !s ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
69
+ i ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
70
+ a || n || d || i ? "" : "tw-text-secondary hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover",
71
+ (d || n) && !i ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
72
72
  ]),
73
- onDragEnter: l ? (t) => {
74
- if (p(!0), h === "Images")
73
+ onDragEnter: s ? (t) => {
74
+ if (g(!0), h === "Images")
75
75
  for (const r of Array.from(t.dataTransfer.items))
76
- r?.type?.startsWith("image/") ? i(void 0) : i("Invalid");
76
+ r?.type?.startsWith("image/") ? l(void 0) : l("Invalid");
77
+ } : void 0,
78
+ onDragOver: s ? (t) => {
79
+ t.preventDefault();
77
80
  } : void 0,
78
- onDragLeave: l ? () => {
79
- p(!1), i(void 0);
81
+ onDragLeave: s ? () => {
82
+ g(!1), l(void 0);
80
83
  } : void 0,
81
- onDrop: l ? y : void 0,
84
+ onDrop: s ? M : void 0,
82
85
  onClick: (t) => {
83
- C && !n && O(t), E?.();
86
+ C && !n && y(t), D?.();
84
87
  },
85
88
  children: [
86
- a ? /* @__PURE__ */ e(K, {}) : s ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
89
+ a ? /* @__PURE__ */ e(K, {}) : i ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
87
90
  /* @__PURE__ */ e(q, { size: "16" }),
88
- s
91
+ i
89
92
  ] }) : /* @__PURE__ */ o(Y, { children: [
90
93
  j && /* @__PURE__ */ e("div", { children: j }),
91
94
  (f || u) && /* @__PURE__ */ o("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
@@ -101,7 +104,7 @@ const et = ({
101
104
  left: n[0],
102
105
  top: n[1]
103
106
  },
104
- children: /* @__PURE__ */ o(k.Root, { open: !0, onOpenChange: (t) => !t && b(void 0), children: [
107
+ children: /* @__PURE__ */ o(k.Root, { open: !0, onOpenChange: (t) => !t && p(void 0), children: [
105
108
  /* @__PURE__ */ e(k.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
106
109
  /* @__PURE__ */ e(k.Content, { triggerOffset: "compact", children: /* @__PURE__ */ o(w.Root, { open: !0, children: [
107
110
  /* @__PURE__ */ e(w.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
package/dist/components/BlockInjectButton/BlockInjectButton.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';\nimport { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n onDrop,\n label,\n icon,\n secondaryLabel,\n isLoading,\n fillParentContainer,\n onAssetChooseClick,\n onUploadClick,\n withMenu = true,\n onClick,\n validFileType,\n verticalLayout,\n}: BlockInjectButtonProps) => {\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n setIsDraggingOver(false);\n if (!isValidAsset(event.dataTransfer.files)) {\n setErrorMsg('Invalid');\n setTimeout(() => {\n setErrorMsg(undefined);\n }, 1000);\n return;\n }\n onDrop?.(event.dataTransfer.files);\n };\n\n const isValidAsset = (files: FileList) => {\n if (!validFileType) {\n return true;\n }\n for (let i = 0; i < files.length; i++) {\n const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n return false;\n }\n }\n return true;\n };\n\n const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!buttonRef.current || isLoading) {\n return;\n }\n const { clientX, clientY } = event;\n const isKeyboardEvent = clientX === 0 && clientY === 0;\n const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n const onItemClick = useCallback((callback: () => unknown) => {\n callback();\n setMenuPosition(undefined);\n }, []);\n\n const menuItems = useMemo(() => {\n const items = [];\n if (onUploadClick) {\n items.push({\n onSelect: () => onItemClick(onUploadClick),\n title: 'Upload asset',\n icon: <IconArrowCircleUp size=\"20\" />,\n });\n }\n if (onAssetChooseClick) {\n items.push({\n onSelect: () => onItemClick(onAssetChooseClick),\n title: 'Browse asset',\n icon: <IconImageStack size=\"20\" />,\n });\n }\n return items;\n }, [onAssetChooseClick, onUploadClick, onItemClick]);\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-primary tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading || menuPosition || isDraggingOver || errorMsg\n ? ''\n : 'tw-text-secondary hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver || !!menuPosition) && !errorMsg\n ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n if (withMenu && !menuPosition) {\n openMenu(event);\n }\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle size=\"16\" />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label || secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>\n <Flyout.Trigger>\n <div />\n </Flyout.Trigger>\n <Flyout.Content triggerOffset=\"compact\">\n <Dropdown.Root open>\n <Dropdown.Trigger>\n <div />\n </Dropdown.Trigger>\n <Dropdown.Content triggerOffset=\"compact\">\n {menuItems.map((item) => (\n <Dropdown.Item key={item.title} onSelect={item.onSelect}>\n {item.icon}\n {item.title}\n </Dropdown.Item>\n ))}\n </Dropdown.Content>\n </Dropdown.Root>\n </Flyout.Content>\n </Flyout.Root>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","onItemClick","useCallback","callback","menuItems","useMemo","items","jsx","IconArrowCircleUp","IconImageStack","jsxs","joinClassNames","item","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":"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"}
1
+ {"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';\nimport { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n onDrop,\n label,\n icon,\n secondaryLabel,\n isLoading,\n fillParentContainer,\n onAssetChooseClick,\n onUploadClick,\n withMenu = true,\n onClick,\n validFileType,\n verticalLayout,\n}: BlockInjectButtonProps) => {\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n setIsDraggingOver(false);\n if (!isValidAsset(event.dataTransfer.files)) {\n setErrorMsg('Invalid');\n setTimeout(() => {\n setErrorMsg(undefined);\n }, 1000);\n return;\n }\n onDrop?.(event.dataTransfer.files);\n };\n\n const isValidAsset = (files: FileList) => {\n if (!validFileType) {\n return true;\n }\n for (let i = 0; i < files.length; i++) {\n const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n return false;\n }\n }\n return true;\n };\n\n const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!buttonRef.current || isLoading) {\n return;\n }\n const { clientX, clientY } = event;\n const isKeyboardEvent = clientX === 0 && clientY === 0;\n const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n const onItemClick = useCallback((callback: () => unknown) => {\n callback();\n setMenuPosition(undefined);\n }, []);\n\n const menuItems = useMemo(() => {\n const items = [];\n if (onUploadClick) {\n items.push({\n onSelect: () => onItemClick(onUploadClick),\n title: 'Upload asset',\n icon: <IconArrowCircleUp size=\"20\" />,\n });\n }\n if (onAssetChooseClick) {\n items.push({\n onSelect: () => onItemClick(onAssetChooseClick),\n title: 'Browse asset',\n icon: <IconImageStack size=\"20\" />,\n });\n }\n return items;\n }, [onAssetChooseClick, onUploadClick, onItemClick]);\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-primary tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading || menuPosition || isDraggingOver || errorMsg\n ? ''\n : 'tw-text-secondary hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver || !!menuPosition) && !errorMsg\n ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragOver={\n onDrop\n ? (event) => {\n event.preventDefault();\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n if (withMenu && !menuPosition) {\n openMenu(event);\n }\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle size=\"16\" />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label || secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>\n <Flyout.Trigger>\n <div />\n </Flyout.Trigger>\n <Flyout.Content triggerOffset=\"compact\">\n <Dropdown.Root open>\n <Dropdown.Trigger>\n <div />\n </Dropdown.Trigger>\n <Dropdown.Content triggerOffset=\"compact\">\n {menuItems.map((item) => (\n <Dropdown.Item key={item.title} onSelect={item.onSelect}>\n {item.icon}\n {item.title}\n </Dropdown.Item>\n ))}\n </Dropdown.Content>\n </Dropdown.Root>\n </Flyout.Content>\n </Flyout.Root>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","onItemClick","useCallback","callback","menuItems","useMemo","items","jsx","IconArrowCircleUp","IconImageStack","jsxs","joinClassNames","item","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":";;;;;;AAWO,MAAMA,KAAoB,CAAC;AAAA,EAC9B,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACJ,MAA8B;AAC1B,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpD,CAACC,GAAcC,CAAe,IAAIF,EAAA,GAClCG,IAAYC,EAA0B,IAAI,GAC1C,CAACC,GAAUC,CAAW,IAAIN,EAA6B,MAAS,GAEhEO,IAAkD,CAACC,MAAU;AAG/D,QAFAA,EAAM,eAAA,GACNT,EAAkB,EAAK,GACnB,CAACU,EAAaD,EAAM,aAAa,KAAK,GAAG;AACzC,MAAAF,EAAY,SAAS,GACrB,WAAW,MAAM;AACb,QAAAA,EAAY,MAAS;AAAA,MACzB,GAAG,GAAI;AACP;AAAA,IACJ;AACA,IAAApB,IAASsB,EAAM,aAAa,KAAK;AAAA,EACrC,GAEMC,IAAe,CAACC,MAAoB;AACtC,QAAI,CAACd;AACD,aAAO;AAEX,aAASe,IAAI,GAAGA,IAAID,EAAM,QAAQC,KAAK;AACnC,YAAMC,IAAwBF,EAAMC,CAAC,EAAE,KAAK,MAAM,GAAG,EAAE,IAAA,KAAS;AAChE,UAAI,CAACE,EAAkBjB,CAAa,EAAE,SAASgB,CAAoB;AAC/D,eAAO;AAAA,IAEf;AACA,WAAO;AAAA,EACX,GAEME,IAAiD,CAACN,MAAU;AAC9D,QAAI,CAACL,EAAU,WAAWb;AACtB;AAEJ,UAAM,EAAE,SAAAyB,GAAS,SAAAC,EAAA,IAAYR,GACvBS,IAAkBF,MAAY,KAAKC,MAAY,GAC/C,EAAE,MAAAE,GAAM,KAAAC,GAAK,OAAAC,GAAO,QAAAC,MAAWlB,EAAU,QAAQ,sBAAA,GACjDmB,IAAoBL,IAAmCG,IAAQ,IAAzBL,IAAUG,GAChDK,IAAoBN,IAAkCI,IAAS,IAAzBL,IAAUG;AACtD,IAAAjB,EAAgB,CAACoB,GAAkBC,CAAgB,CAAC;AAAA,EACxD,GAEMC,IAAcC,EAAY,CAACC,MAA4B;AACzD,IAAAA,EAAA,GACAxB,EAAgB,MAAS;AAAA,EAC7B,GAAG,CAAA,CAAE,GAECyB,IAAYC,EAAQ,MAAM;AAC5B,UAAMC,IAAQ,CAAA;AACd,WAAIpC,KACAoC,EAAM,KAAK;AAAA,MACP,UAAU,MAAML,EAAY/B,CAAa;AAAA,MACzC,OAAO;AAAA,MACP,MAAM,gBAAAqC,EAACC,GAAA,EAAkB,MAAK,KAAA,CAAK;AAAA,IAAA,CACtC,GAEDvC,KACAqC,EAAM,KAAK;AAAA,MACP,UAAU,MAAML,EAAYhC,CAAkB;AAAA,MAC9C,OAAO;AAAA,MACP,MAAM,gBAAAsC,EAACE,GAAA,EAAe,MAAK,KAAA,CAAK;AAAA,IAAA,CACnC,GAEEH;AAAA,EACX,GAAG,CAACrC,GAAoBC,GAAe+B,CAAW,CAAC;AACnD,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAK9B;AAAA,MACL,gBAAa;AAAA,MACb,WAAW+B,EAAe;AAAA,QACtB;AAAA,QACArC,IACM,+EACA;AAAA,QACNN,IAAsB,cAAc;AAAA,QACpCO,KAAkB,CAACR,IAAY,qBAAqB;AAAA,QACpDW,KAAgB;AAAA,QAChBH,KAAkB;AAAA,QAClBO,IAAW,6CAA6C;AAAA,QACxDf,KAAaW,KAAgBH,KAAkBO,IACzC,KACA;AAAA,SACLP,KAAoBG,MAAiB,CAACI,IACjC,kEACA;AAAA,MAAA,CACT;AAAA,MACD,aACInB,IACM,CAACsB,MAAU;AAGP,YAFAT,EAAkB,EAAI,GAElBH,MAAkB;AAClB,qBAAWuC,KAAQ,MAAM,KAAK3B,EAAM,aAAa,KAAK;AAClD,YAAK2B,GAAM,MAAM,WAAW,QAAQ,IAGhC7B,EAAY,MAAS,IAFrBA,EAAY,SAAS;AAAA,MAMrC,IACA;AAAA,MAEV,YACIpB,IACM,CAACsB,MAAU;AACP,QAAAA,EAAM,eAAA;AAAA,MACV,IACA;AAAA,MAEV,aACItB,IACM,MAAM;AACF,QAAAa,EAAkB,EAAK,GACvBO,EAAY,MAAS;AAAA,MACzB,IACA;AAAA,MAEV,QAAQpB,IAASqB,IAAa;AAAA,MAC9B,SAAS,CAACC,MAAU;AAChB,QAAId,KAAY,CAACO,KACba,EAASN,CAAK,GAElBb,IAAA;AAAA,MACJ;AAAA,MAEC,UAAA;AAAA,QAAAL,sBACI8C,GAAA,CAAA,CAAc,IACf/B,IACA,gBAAA4B,EAAC,OAAA,EAAI,WAAU,4EACX,UAAA;AAAA,UAAA,gBAAAH,EAACO,GAAA,EAA4B,MAAK,KAAA,CAAK;AAAA,UACtChC;AAAA,QAAA,EAAA,CACL,IAEA,gBAAA4B,EAAAK,GAAA,EACK,UAAA;AAAA,UAAAlD,KAAQ,gBAAA0C,EAAC,SAAK,UAAA1C,EAAA,CAAK;AAAA,WAClBD,KAASE,MACP,gBAAA4C,EAAC,OAAA,EAAI,WAAU,sCACV,UAAA;AAAA,YAAA9C,KAAS,gBAAA2C,EAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA3C,GAAM;AAAA,YAChDE,KAAkB,gBAAAyC,EAAC,OAAA,EAAI,WAAU,kBAAkB,UAAAzC,EAAA,CAAe;AAAA,UAAA,EAAA,CACvE;AAAA,QAAA,GAER;AAAA,QAEHY,KACG,gBAAA6B;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,OAAO;AAAA,cACH,MAAM7B,EAAa,CAAC;AAAA,cACpB,KAAKA,EAAa,CAAC;AAAA,YAAA;AAAA,YAGvB,UAAA,gBAAAgC,EAACM,EAAO,MAAP,EAAY,MAAI,IAAC,cAAc,CAACC,MAAW,CAACA,KAAUtC,EAAgB,MAAS,GAC5E,UAAA;AAAA,cAAA,gBAAA4B,EAACS,EAAO,SAAP,EACG,UAAA,gBAAAT,EAAC,SAAI,GACT;AAAA,cACA,gBAAAA,EAACS,EAAO,SAAP,EAAe,eAAc,WAC1B,UAAA,gBAAAN,EAACQ,EAAS,MAAT,EAAc,MAAI,IACf,UAAA;AAAA,gBAAA,gBAAAX,EAACW,EAAS,SAAT,EACG,UAAA,gBAAAX,EAAC,SAAI,GACT;AAAA,kCACCW,EAAS,SAAT,EAAiB,eAAc,WAC3B,UAAAd,EAAU,IAAI,CAACQ,wBACXM,EAAS,MAAT,EAA+B,UAAUN,EAAK,UAC1C,UAAA;AAAA,kBAAAA,EAAK;AAAA,kBACLA,EAAK;AAAA,gBAAA,KAFUA,EAAK,KAGzB,CACH,EAAA,CACL;AAAA,cAAA,EAAA,CACJ,EAAA,CACJ;AAAA,YAAA,EAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
package/dist/components/RichTextEditor/plugins/OrderedListPlugin/index.es.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { OrderedListPlugin as r } from "@frontify/fondue/rte";
2
2
  const t = [
3
3
  {
4
- counterType: "var(--f-theme-settings-list-numbered1-counterType, decimal)",
4
+ counterType: "var(--f-theme-settings-list-numbered1-counter-type, decimal)",
5
5
  color: "var(--f-theme-settings-list-numbered1-color, currentColor)"
6
6
  },
7
7
  {
8
- counterType: "var(--f-theme-settings-list-numbered2-counterType, lower-alpha)",
8
+ counterType: "var(--f-theme-settings-list-numbered2-counter-type, lower-alpha)",
9
9
  color: "var(--f-theme-settings-list-numbered2-color, currentColor)"
10
10
  },
11
11
  {
12
- counterType: "var(--f-theme-settings-list-numbered3-counterType, lower-roman)",
12
+ counterType: "var(--f-theme-settings-list-numbered3-counter-type, lower-roman)",
13
13
  color: "var(--f-theme-settings-list-numbered3-color, currentColor)"
14
14
  }
15
15
  ];
package/dist/components/RichTextEditor/plugins/OrderedListPlugin/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../../../../../src/components/RichTextEditor/plugins/OrderedListPlugin/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { OrderedListPlugin as FondueOrderedListPlugin, type OrderedListPluginProps } from '@frontify/fondue/rte';\n\nconst DEFAULT_LIST_STYLES = [\n {\n counterType: 'var(--f-theme-settings-list-numbered1-counterType, decimal)',\n color: 'var(--f-theme-settings-list-numbered1-color, currentColor)',\n },\n {\n counterType: 'var(--f-theme-settings-list-numbered2-counterType, lower-alpha)',\n color: 'var(--f-theme-settings-list-numbered2-color, currentColor)',\n },\n {\n counterType: 'var(--f-theme-settings-list-numbered3-counterType, lower-roman)',\n color: 'var(--f-theme-settings-list-numbered3-color, currentColor)',\n },\n];\n\nexport class OrderedListPlugin extends FondueOrderedListPlugin {\n constructor(props?: OrderedListPluginProps) {\n super({\n listStyles: DEFAULT_LIST_STYLES,\n ...props,\n });\n }\n}\n"],"names":["DEFAULT_LIST_STYLES","OrderedListPlugin","FondueOrderedListPlugin","props"],"mappings":";AAIA,MAAMA,IAAsB;AAAA,EACxB;AAAA,IACI,aAAa;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAEX;AAAA,IACI,aAAa;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAEX;AAAA,IACI,aAAa;AAAA,IACb,OAAO;AAAA,EAAA;AAEf;AAEO,MAAMC,UAA0BC,EAAwB;AAAA,EAC3D,YAAYC,GAAgC;AACxC,UAAM;AAAA,MACF,YAAYH;AAAA,MACZ,GAAGG;AAAA,IAAA,CACN;AAAA,EACL;AACJ;"}
1
+ {"version":3,"file":"index.es.js","sources":["../../../../../src/components/RichTextEditor/plugins/OrderedListPlugin/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { OrderedListPlugin as FondueOrderedListPlugin, type OrderedListPluginProps } from '@frontify/fondue/rte';\n\nconst DEFAULT_LIST_STYLES = [\n {\n counterType: 'var(--f-theme-settings-list-numbered1-counter-type, decimal)',\n color: 'var(--f-theme-settings-list-numbered1-color, currentColor)',\n },\n {\n counterType: 'var(--f-theme-settings-list-numbered2-counter-type, lower-alpha)',\n color: 'var(--f-theme-settings-list-numbered2-color, currentColor)',\n },\n {\n counterType: 'var(--f-theme-settings-list-numbered3-counter-type, lower-roman)',\n color: 'var(--f-theme-settings-list-numbered3-color, currentColor)',\n },\n];\n\nexport class OrderedListPlugin extends FondueOrderedListPlugin {\n constructor(props?: OrderedListPluginProps) {\n super({\n listStyles: DEFAULT_LIST_STYLES,\n ...props,\n });\n }\n}\n"],"names":["DEFAULT_LIST_STYLES","OrderedListPlugin","FondueOrderedListPlugin","props"],"mappings":";AAIA,MAAMA,IAAsB;AAAA,EACxB;AAAA,IACI,aAAa;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAEX;AAAA,IACI,aAAa;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAEX;AAAA,IACI,aAAa;AAAA,IACb,OAAO;AAAA,EAAA;AAEf;AAEO,MAAMC,UAA0BC,EAAwB;AAAA,EAC3D,YAAYC,GAAgC;AACxC,UAAM;AAAA,MACF,YAAYH;AAAA,MACZ,GAAGG;AAAA,IAAA,CACN;AAAA,EACL;AACJ;"}