@uniformdev/design-system 19.25.0 → 19.26.0

package/dist/index.d.ts

@@ -20450,13 +20450,16 @@ type DetailsProps = React$1.HTMLAttributes<HTMLDetailsElement> & {
     /** sets the summary inner components */
     summary: React$1.ReactNode;
     children: React$1.ReactNode;
-    /** sets whether the details should be open by default
+    isOpen?: boolean | undefined;
+    onChange?: (isOpen: boolean) => void;
+    /** sets whether the details should be open by default.
+     *  Undefined value means that the details will be controlled by the user.
      * @default false
      */
     isOpenByDefault?: boolean;
 };
 /** @example  <Details summary="summary text">child content here</Details>*/
-declare const Details: ({ summary, children, isOpenByDefault, ...props }: DetailsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Details: ({ summary, children, isOpenByDefault, isOpen, onChange, ...props }: DetailsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface DrawerItem {
     /** An ID for the drawer. It should be unique in the stack where it's rendered */

package/dist/index.js

@@ -12713,43 +12713,48 @@ var summaryIconVisiblyHidden = import_react46.css`
 
 // src/components/Details/Details.tsx
 var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
-var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props }) => {
+var Details = ({
+  summary: summary2,
+  children,
+  isOpenByDefault = false,
+  isOpen,
+  onChange,
+  ...props
+}) => {
   const detailsRef = React9.useRef(null);
-  const [open, setOpen] = React9.useState(isOpenByDefault);
-  React9.useEffect(() => {
-    var _a;
-    if (!detailsRef) {
-      return;
+  const [internalOpen, setInternalOpen] = React9.useState(isOpenByDefault);
+  const memoizedIsOpen = React9.useMemo(() => {
+    return isOpen !== void 0 ? isOpen : internalOpen;
+  }, [internalOpen, isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "details",
+    {
+      "data-testid": "details",
+      onToggle: (e) => {
+        setInternalOpen(e.currentTarget.open);
+        onChange == null ? void 0 : onChange(e.currentTarget.open);
+      },
+      css: details,
+      open: memoizedIsOpen,
+      ref: detailsRef,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("summary", { "data-testid": "summary", css: summary, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            Icon,
+            {
+              css: [!children ? summaryIconVisiblyHidden : void 0, summaryIcon],
+              icon: "chevron-down",
+              iconColor: "currentColor",
+              size: "1.25rem"
+            }
+          ),
+          summary2
+        ] }),
+        memoizedIsOpen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "data-testid": "details-content", css: detailsContent, children }) : null
+      ]
     }
-    const toggleEvent = () => {
-      var _a2;
-      const toggle = Boolean((_a2 = detailsRef == null ? void 0 : detailsRef.current) == null ? void 0 : _a2.open);
-      setOpen(toggle);
-    };
-    (_a = detailsRef.current) == null ? void 0 : _a.addEventListener("toggle", toggleEvent);
-    () => {
-      var _a2;
-      return (_a2 = detailsRef.current) == null ? void 0 : _a2.removeEventListener("toggle", toggleEvent);
-    };
-  }, [detailsRef]);
-  React9.useEffect(() => {
-    setOpen(isOpenByDefault);
-  }, [isOpenByDefault]);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("details", { "data-testid": "details", css: details, open, ref: detailsRef, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("summary", { "data-testid": "summary", css: summary, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        Icon,
-        {
-          css: [!children ? summaryIconVisiblyHidden : void 0, summaryIcon],
-          icon: "chevron-down",
-          iconColor: "currentColor",
-          size: "1.25rem"
-        }
-      ),
-      summary2
-    ] }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "data-testid": "details-content", css: detailsContent, children }) : null
-  ] });
+  );
 };
 
 // src/components/Drawer/Drawer.tsx
@@ -16534,6 +16539,26 @@ function removeLinkNode(node) {
   }
   node.remove();
 }
+function removeLinkNodeFromSelection() {
+  const selection = (0, import_lexical2.$getSelection)();
+  if (!(0, import_lexical2.$isRangeSelection)(selection)) {
+    return;
+  }
+  const nodes = selection.extract();
+  const linkNodesFound = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    if ((0, import_lexical2.$isElementNode)(node) && !node.isInline()) {
+      continue;
+    }
+    const linkNodeAncestor = getLinkAncestor(node);
+    if (linkNodeAncestor) {
+      linkNodesFound.add(linkNodeAncestor);
+    }
+  }
+  for (const node of linkNodesFound) {
+    removeLinkNode(node);
+  }
+}
 function upsertLinkNode(props) {
   var _a, _b, _c, _d, _e;
   const selection = (0, import_lexical2.$getSelection)();
@@ -16591,6 +16616,7 @@ function upsertLinkNode(props) {
     }
   }
 }
+var REMOVE_LINK_NODE_COMMAND = (0, import_lexical2.createCommand)("REMOVE_LINK_NODE_COMMAND");
 var UPSERT_LINK_NODE_COMMAND = (0, import_lexical2.createCommand)("UPSERT_LINK_NODE_COMMAND");
 var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical2.createCommand)(
   "OPEN_LINK_NODE_MODAL_COMMAND"
@@ -16635,6 +16661,14 @@ function LinkNodePlugin({ onConnectLink }) {
         },
         import_lexical2.COMMAND_PRIORITY_EDITOR
       ),
+      editor.registerCommand(
+        REMOVE_LINK_NODE_COMMAND,
+        () => {
+          removeLinkNodeFromSelection();
+          return true;
+        },
+        import_lexical2.COMMAND_PRIORITY_EDITOR
+      ),
       editor.registerCommand(
         OPEN_LINK_NODE_MODAL_COMMAND,
         () => {
@@ -16839,7 +16873,6 @@ var import_react99 = require("@emotion/react");
 var import_code = require("@lexical/code");
 var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
-var import_LexicalDecoratorBlockNode = require("@lexical/react/LexicalDecoratorBlockNode");
 var import_rich_text = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
 var import_utils5 = require("@lexical/utils");
@@ -16899,40 +16932,35 @@ var toolbarChevron = import_react99.css`
 var ToolbarIcon = ({ icon }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
+var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
+  ["bold", "format-bold"],
+  ["italic", "format-italic"],
+  ["underline", "format-underline"],
+  ["strikethrough", "format-strike"],
+  ["code", "format-code"],
+  ["superscript", "format-superscript"],
+  ["subscript", "format-subscript"]
+]);
+var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
 var RichTextToolbar = ({ config }) => {
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
-  const enabledBuiltInFormats = richTextBuiltInFormats.filter(
-    (format) => {
-      var _a, _b;
-      return (_b = (_a = config == null ? void 0 : config.formatting) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(format.type);
-    }
-  );
-  const enabledBuiltInElements = richTextBuiltInElements.filter(
-    (element) => {
-      var _a, _b;
-      return (_b = (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(element.type);
-    }
-  );
-  const formatsWithIcon = /* @__PURE__ */ new Map([
-    ["bold", "format-bold"],
-    ["italic", "format-italic"],
-    ["underline", "format-underline"],
-    ["strikethrough", "format-strike"],
-    ["code", "format-code"],
-    ["superscript", "format-superscript"],
-    ["subscript", "format-subscript"]
-  ]);
-  const enabledBuiltInFormatsWithIcon = enabledBuiltInFormats.filter(
-    (format) => formatsWithIcon.has(format.type)
-  );
-  const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
-    (format) => !formatsWithIcon.has(format.type)
-  );
-  const [activeFormats, setActiveFormats] = (0, import_react100.useState)([]);
-  const [activeElement, setActiveElement] = (0, import_react100.useState)("paragraph");
-  const enabledTextualElements = enabledBuiltInElements.filter(
-    (element) => ["h1", "h2", "h3", "h4", "h5", "h6"].includes(element.type)
-  );
+  const {
+    activeElement,
+    setActiveElement,
+    activeFormats,
+    setActiveFormats,
+    visibleFormatsWithIcon,
+    visibleFormatsWithoutIcon,
+    visibleTextualElements,
+    isLink,
+    setIsLink,
+    linkElementVisible,
+    visibleLists,
+    codeElementVisible,
+    quoteElementVisible,
+    visibleElementsWithIcons
+  } = useRichTextToolbarState({ config });
   const onSelectElement = (type) => {
     if (activeElement === type) {
       return;
@@ -16942,7 +16970,7 @@ var RichTextToolbar = ({ config }) => {
       if (!(0, import_lexical4.$isRangeSelection)(selection)) {
         return;
       }
-      if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(type)) {
+      if (HEADING_ELEMENTS.includes(type)) {
         (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
       } else if (type === "paragraph") {
         (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical4.$createParagraphNode)());
@@ -16953,28 +16981,13 @@ var RichTextToolbar = ({ config }) => {
       }
     });
   };
-  const [isLink, setIsLink] = (0, import_react100.useState)(false);
-  const linkElementEnabled = (0, import_react100.useMemo)(() => {
-    return enabledBuiltInElements.some((element) => element.type === "link");
-  }, [enabledBuiltInElements]);
-  const enabledLists = (0, import_react100.useMemo)(() => {
-    return new Set(
-      enabledBuiltInElements.filter((element) => ["orderedList", "unorderedList"].includes(element.type)).map((element) => element.type)
-    );
-  }, [enabledBuiltInElements]);
-  const quoteElementEnabled = (0, import_react100.useMemo)(() => {
-    return enabledBuiltInElements.some((element) => element.type === "quote");
-  }, [enabledBuiltInElements]);
-  const codeElementEnabled = (0, import_react100.useMemo)(() => {
-    return enabledBuiltInElements.some((element) => element.type === "code");
-  }, [enabledBuiltInElements]);
   const updateToolbar = (0, import_react100.useCallback)(() => {
     const selection = (0, import_lexical4.$getSelection)();
     if (!(0, import_lexical4.$isRangeSelection)(selection)) {
       return;
     }
     const newActiveFormats = [];
-    for (const format of enabledBuiltInFormats) {
+    for (const format of richTextBuiltInFormats) {
       if (selection.hasFormat(format.type)) {
         newActiveFormats.push(format.type);
       }
@@ -17006,7 +17019,7 @@ var RichTextToolbar = ({ config }) => {
     } else {
       setIsLink(false);
     }
-  }, [editor, enabledBuiltInFormats]);
+  }, [editor, setActiveElement, setActiveFormats, setIsLink]);
   (0, import_react100.useEffect)(() => {
     return editor.registerCommand(
       import_lexical4.SELECTION_CHANGE_COMMAND,
@@ -17026,103 +17039,56 @@ var RichTextToolbar = ({ config }) => {
       });
     });
   }, [editor, updateToolbar]);
-  const clearFormatting2 = (0, import_react100.useCallback)(() => {
-    editor.update(() => {
-      const selection = (0, import_lexical4.$getSelection)();
-      if ((0, import_lexical4.$isRangeSelection)(selection)) {
-        const anchor = selection.anchor;
-        const focus = selection.focus;
-        const nodes = selection.getNodes();
-        if (anchor.key === focus.key && anchor.offset === focus.offset) {
-          return;
-        }
-        nodes.forEach((node, idx) => {
-          if ((0, import_lexical4.$isTextNode)(node)) {
-            if (idx === 0 && anchor.offset !== 0) {
-              node = node.splitText(anchor.offset)[1] || node;
-            }
-            if (idx === nodes.length - 1) {
-              node = node.splitText(focus.offset)[0] || node;
-            }
-            if (node.__style !== "") {
-              node.setStyle("");
-            }
-            if (node.__format !== 0) {
-              node.setFormat(0);
-              (0, import_utils5.$getNearestBlockElementAncestorOrThrow)(node).setFormat("");
-            }
-          } else if ((0, import_rich_text.$isHeadingNode)(node) || (0, import_rich_text.$isQuoteNode)(node)) {
-            node.replace((0, import_lexical4.$createParagraphNode)(), true);
-          } else if ((0, import_LexicalDecoratorBlockNode.$isDecoratorBlockNode)(node)) {
-            node.setFormat("");
-          }
-        });
-      }
-      updateToolbar();
-    });
-  }, [editor, updateToolbar]);
-  const elementsThatShouldBeVisibleInDropdown = (0, import_react100.useMemo)(() => {
-    if (activeElement === "paragraph") {
-      return enabledTextualElements;
-    }
-    if (enabledBuiltInElements.some((element) => element.type === activeElement)) {
-      return enabledTextualElements;
-    }
-    return [
-      ...enabledTextualElements,
-      {
-        label: getLabelForElement(activeElement),
-        type: activeElement
-      }
-    ];
-  }, [enabledBuiltInElements, enabledTextualElements, activeElement]);
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: toolbar, children: [
-    elementsThatShouldBeVisibleInDropdown.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
       Menu,
       {
         menuLabel: "Elements",
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("button", { css: toolbarButton, title: "Text formatting", children: [
-          elementsThatShouldBeVisibleInDropdown.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("button", { css: toolbarButton, title: "Text styles", children: [
+          visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
           /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
-          {
-            label: "Normal",
-            type: "paragraph"
-          },
-          ...elementsThatShouldBeVisibleInDropdown
-        ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-          MenuItem,
-          {
-            onClick: () => {
-              onSelectElement(element.type);
+          [
+            {
+              label: "Normal",
+              type: "paragraph"
             },
-            children: element.label
-          },
-          element.type
-        ))
+            ...visibleTextualElements
+          ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+            MenuItem,
+            {
+              onClick: () => {
+                onSelectElement(element.type);
+              },
+              children: element.label
+            },
+            element.type
+          )),
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+        ]
       }
-    ) : null,
-    enabledBuiltInFormatsWithIcon.length > 0 || enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: toolbarGroup, children: [
-      enabledBuiltInFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    ),
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: toolbarGroup, children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "button",
         {
           onClick: () => {
             editor.dispatchCommand(import_lexical4.FORMAT_TEXT_COMMAND, format.type);
           },
           css: [toolbarButton, activeFormats.includes(format.type) ? toolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: formatsWithIcon.get(format.type) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         Menu,
         {
-          menuLabel: "Text formatting",
-          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { css: toolbarButton, title: "Text formatting", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuLabel: "Alternative text styles",
+          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { css: toolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: enabledBuiltInFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             MenuItem,
             {
               onClick: () => {
@@ -17135,19 +17101,19 @@ var RichTextToolbar = ({ config }) => {
         }
       ) : null
     ] }) : null,
-    linkElementEnabled || enabledLists.size > 0 || quoteElementEnabled || codeElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: toolbarGroup, children: [
-      linkElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: toolbarGroup, children: [
+      linkElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "button",
         {
           onClick: () => {
-            editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
+            isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [toolbarButton, isLink ? toolbarButtonActive : null],
           children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      enabledLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
-        enabledLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Bullet list", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      visibleLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "button",
           {
             onClick: () => {
@@ -17157,7 +17123,7 @@ var RichTextToolbar = ({ config }) => {
             children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        enabledLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Numbered list", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "button",
           {
             onClick: () => {
@@ -17168,7 +17134,7 @@ var RichTextToolbar = ({ config }) => {
           }
         ) }) : null
       ] }) : null,
-      quoteElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      quoteElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "button",
         {
           onClick: () => {
@@ -17178,7 +17144,7 @@ var RichTextToolbar = ({ config }) => {
           children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Code", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      codeElementVisible ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "button",
         {
           onClick: () => {
@@ -17188,31 +17154,118 @@ var RichTextToolbar = ({ config }) => {
           children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-      "div",
-      {
-        css: [
-          toolbarGroup,
-          {
-            marginLeft: "auto"
-          }
-        ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Clear formatting", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-          "button",
-          {
-            onClick: () => {
-              clearFormatting2();
-            },
-            css: [toolbarButton],
-            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "clear-formatting" })
-          }
-        ) })
-      }
-    )
+    ] }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
+var useRichTextToolbarState = ({ config }) => {
+  var _a;
+  const enabledBuiltInFormats = (0, import_react100.useMemo)(() => {
+    return richTextBuiltInFormats.filter((format) => {
+      var _a2, _b;
+      return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
+    });
+  }, [config]);
+  const enabledBuiltInElements = (0, import_react100.useMemo)(() => {
+    return richTextBuiltInElements.filter((element) => {
+      var _a2, _b;
+      return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
+    });
+  }, [config]);
+  const enabledBuiltInFormatsWithIcon = (0, import_react100.useMemo)(() => {
+    return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
+  }, [enabledBuiltInFormats]);
+  const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
+    (format) => !FORMATS_WITH_ICON.has(format.type)
+  );
+  const [activeFormats, setActiveFormats] = (0, import_react100.useState)([]);
+  const visibleFormatsWithIcon = (0, import_react100.useMemo)(() => {
+    const visibleFormats = /* @__PURE__ */ new Set();
+    activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
+      visibleFormats.add(type);
+    });
+    enabledBuiltInFormatsWithIcon.forEach((format) => {
+      visibleFormats.add(format.type);
+    });
+    return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
+  }, [activeFormats, enabledBuiltInFormatsWithIcon]);
+  const visibleFormatsWithoutIcon = (0, import_react100.useMemo)(() => {
+    const visibleFormats = /* @__PURE__ */ new Set();
+    activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
+      visibleFormats.add(type);
+    });
+    enabledBuiltInFormatsWithoutIcon.forEach((format) => {
+      visibleFormats.add(format.type);
+    });
+    return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
+  }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
+  const [activeElement, setActiveElement] = (0, import_react100.useState)("paragraph");
+  const enabledTextualElements = enabledBuiltInElements.filter(
+    (element) => TEXTUAL_ELEMENTS.includes(element.type)
+  );
+  const visibleTextualElements = (0, import_react100.useMemo)(() => {
+    if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
+      return enabledTextualElements;
+    }
+    return richTextBuiltInElements.filter(
+      (element) => {
+        var _a2, _b;
+        return TEXTUAL_ELEMENTS.includes(element.type) && (((_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type)) || element.type === activeElement);
+      }
+    );
+  }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
+  const [isLink, setIsLink] = (0, import_react100.useState)(false);
+  const linkElementVisible = (0, import_react100.useMemo)(() => {
+    return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
+  }, [isLink, enabledBuiltInElements]);
+  const visibleLists = (0, import_react100.useMemo)(() => {
+    return new Set(
+      ["orderedList", "unorderedList"].filter(
+        (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
+      )
+    );
+  }, [activeElement, enabledBuiltInElements]);
+  const quoteElementVisible = (0, import_react100.useMemo)(() => {
+    return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
+  }, [activeElement, enabledBuiltInElements]);
+  const codeElementVisible = (0, import_react100.useMemo)(() => {
+    return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
+  }, [activeElement, enabledBuiltInElements]);
+  const visibleElementsWithIcons = (0, import_react100.useMemo)(() => {
+    const visibleElements = /* @__PURE__ */ new Set();
+    if (linkElementVisible) {
+      visibleElements.add("link");
+    }
+    if (visibleLists.size > 0) {
+      visibleLists.forEach((type) => {
+        visibleElements.add(type);
+      });
+    }
+    if (quoteElementVisible) {
+      visibleElements.add("quote");
+    }
+    if (codeElementVisible) {
+      visibleElements.add("code");
+    }
+    return visibleElements;
+  }, [codeElementVisible, linkElementVisible, quoteElementVisible, visibleLists]);
+  return {
+    activeFormats,
+    setActiveFormats,
+    activeElement,
+    setActiveElement,
+    visibleFormatsWithIcon,
+    visibleFormatsWithoutIcon,
+    visibleTextualElements,
+    isLink,
+    setIsLink,
+    linkElementVisible,
+    visibleLists,
+    quoteElementVisible,
+    codeElementVisible,
+    visibleElementsWithIcons
+  };
+};
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.25.0",
+  "version": "19.26.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/client-api": "6.5.16",
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.7",
-    "@uniformdev/canvas": "^19.25.0",
-    "@uniformdev/richtext": "^19.25.0",
+    "@uniformdev/canvas": "^19.26.0",
+    "@uniformdev/richtext": "^19.26.0",
     "autoprefixer": "10.4.14",
     "hygen": "6.2.11",
     "postcss": "8.4.24",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cb76e00b562db60df1804aa968906f2297079ed2"
+  "gitHead": "860f4f8ae7161b5fb0b7a670bdfd1566fce45bee"
 }