@uniformdev/design-system 20.25.0 → 20.25.2-alpha.3

package/dist/esm/index.js

@@ -4167,6 +4167,7 @@ var menuTriggerStyles = css25`
   background: transparent;
   padding: var(--spacing-xs);
   color: var(--gray-600);
+  border-radius: var(--rounded-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
 
   &:focus,
@@ -4174,6 +4175,10 @@ var menuTriggerStyles = css25`
     outline: none;
     color: var(--typography-base);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-dark-active);
+  }
 `;
 
 // src/components/Menu/Menu.tsx
@@ -8242,6 +8247,11 @@ var iconButton = css58`
   justify-content: center;
   width: var(--button-size);
   height: var(--button-size);
+
+  &:disabled {
+    filter: grayscale(100%);
+    opacity: 0.5;
+  }
 `;
 var sizes2 = {
   xs: css58`
@@ -14590,7 +14600,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     /* @__PURE__ */ jsxs86(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ jsxs86("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
           /* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
@@ -14623,6 +14633,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           "data-testid": `formatting-button-${format.type}`,
+          type: "button",
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
           },
@@ -14636,7 +14647,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx128(
         Menu,
         {
-          menuTrigger: /* @__PURE__ */ jsx128("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx128(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx128("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ jsx128(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
           children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx128(
             MenuItem,
@@ -14656,6 +14667,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           "data-testid": "element-link",
+          type: "button",
           onClick: () => {
             if (isLink) {
               editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {});
@@ -14672,6 +14684,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             "data-testid": "element-unordered-list",
+            type: "button",
             onClick: () => {
               if (activeElement === "unorderedList") {
                 editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
@@ -14690,6 +14703,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             "data-testid": "element-ordered-list",
+            type: "button",
             onClick: () => {
               if (activeElement === "orderedList") {
                 editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
@@ -14710,7 +14724,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx128("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs86(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", children: [
+        menuTrigger: /* @__PURE__ */ jsxs86("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
           "Insert",
           /* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),

package/dist/index.d.mts

@@ -1164,13 +1164,12 @@ declare const allSupportedIcons: {
 
 /** A list of available icon names that can be used with the Uniform brand */
 type IconName = keyof typeof allSupportedIcons;
-
+/** sets the type of icon to use from the available list */
+type IconType = IconName | IconType$1;
 /** sets fill color of the svg icon
  * @default 'default'
  */
 type IconColor = 'white' | 'action' | 'default' | 'red' | 'gray' | 'gray300' | 'accent' | 'currentColor' | 'accent-dark' | 'accent-light' | 'accent-alt-dark';
-/** sets the type of icon to use from the available list */
-type IconType = IconName | IconType$1;
 interface IconProps extends IconBaseProps {
     /** sets the icon to be used */
     icon: IconType;
@@ -1179,11 +1178,6 @@ interface IconProps extends IconBaseProps {
     /** sets additional icon props provided by "react-icons" */
     otherProps?: IconBaseProps;
 }
-/**
- * Component that renders icons
- * @example <Icon icon="add-r" iconColor="currentColor" />
- */
-declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_jsx_runtime.JSX.Element | null>;
 
 declare const rectangleRoundedIcon: (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
 declare const cardIcon: (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
@@ -1238,6 +1232,12 @@ declare const customIcons: {
     'zig-zag-thick': (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
 };
 
+/**
+ * Component that renders icons
+ * @example <Icon icon="add-r" iconColor="currentColor" />
+ */
+declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_jsx_runtime.JSX.Element | null>;
+
 type IconsMap = Record<string, IconType$1>;
 declare function useIconContext(): {
     iconsMap: IconsMap;

package/dist/index.d.ts

@@ -1164,13 +1164,12 @@ declare const allSupportedIcons: {
 
 /** A list of available icon names that can be used with the Uniform brand */
 type IconName = keyof typeof allSupportedIcons;
-
+/** sets the type of icon to use from the available list */
+type IconType = IconName | IconType$1;
 /** sets fill color of the svg icon
  * @default 'default'
  */
 type IconColor = 'white' | 'action' | 'default' | 'red' | 'gray' | 'gray300' | 'accent' | 'currentColor' | 'accent-dark' | 'accent-light' | 'accent-alt-dark';
-/** sets the type of icon to use from the available list */
-type IconType = IconName | IconType$1;
 interface IconProps extends IconBaseProps {
     /** sets the icon to be used */
     icon: IconType;
@@ -1179,11 +1178,6 @@ interface IconProps extends IconBaseProps {
     /** sets additional icon props provided by "react-icons" */
     otherProps?: IconBaseProps;
 }
-/**
- * Component that renders icons
- * @example <Icon icon="add-r" iconColor="currentColor" />
- */
-declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_jsx_runtime.JSX.Element | null>;
 
 declare const rectangleRoundedIcon: (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
 declare const cardIcon: (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
@@ -1238,6 +1232,12 @@ declare const customIcons: {
     'zig-zag-thick': (props: _react_icons_all_files.IconBaseProps) => React.JSX.Element;
 };
 
+/**
+ * Component that renders icons
+ * @example <Icon icon="add-r" iconColor="currentColor" />
+ */
+declare const Icon: React__default.MemoExoticComponent<({ icon, iconColor, size, ...otherProps }: IconProps) => _emotion_react_jsx_runtime.JSX.Element | null>;
+
 type IconsMap = Record<string, IconType$1>;
 declare function useIconContext(): {
     iconsMap: IconsMap;

package/dist/index.js

@@ -5892,6 +5892,7 @@ var menuTriggerStyles = import_react35.css`
   background: transparent;
   padding: var(--spacing-xs);
   color: var(--gray-600);
+  border-radius: var(--rounded-sm);
   transition: color var(--duration-fast) var(--timing-ease-out);
 
   &:focus,
@@ -5899,6 +5900,10 @@ var menuTriggerStyles = import_react35.css`
     outline: none;
     color: var(--typography-base);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-dark-active);
+  }
 `;
 
 // src/components/Menu/Menu.tsx
@@ -10057,6 +10062,11 @@ var iconButton = import_react88.css`
   justify-content: center;
   width: var(--button-size);
   height: var(--button-size);
+
+  &:disabled {
+    filter: grayscale(100%);
+    opacity: 0.5;
+  }
 `;
 var sizes2 = {
   xs: import_react88.css`
@@ -16444,7 +16454,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", children: [
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
           /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
@@ -16477,6 +16487,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           "data-testid": `formatting-button-${format.type}`,
+          type: "button",
           onClick: () => {
             editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, format.type);
           },
@@ -16490,7 +16501,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
         Menu,
         {
-          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
           children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
             MenuItem,
@@ -16510,6 +16521,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           "data-testid": "element-link",
+          type: "button",
           onClick: () => {
             if (isLink) {
               editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {});
@@ -16526,6 +16538,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             "data-testid": "element-unordered-list",
+            type: "button",
             onClick: () => {
               if (activeElement === "unorderedList") {
                 editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0);
@@ -16544,6 +16557,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             "data-testid": "element-ordered-list",
+            type: "button",
             onClick: () => {
               if (activeElement === "orderedList") {
                 editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0);
@@ -16564,7 +16578,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
     visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", children: [
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
           "Insert",
           /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.25.0",
+  "version": "20.25.2-alpha.3+fac462fd6d",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -38,8 +38,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.25.0",
-    "@uniformdev/richtext": "^20.25.0",
+    "@uniformdev/canvas": "^20.25.2-alpha.3+fac462fd6d",
+    "@uniformdev/richtext": "^20.25.2-alpha.3+fac462fd6d",
     "@vitest/coverage-v8": "^3.1.2",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -91,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3fe795ce670ac4b96982a833d234059ad5a47995"
+  "gitHead": "fac462fd6dd8d6d51a6d37d5ed321ed058e23d00"
 }