@uniformdev/design-system 19.88.0 → 19.89.0

package/dist/esm/index.js

@@ -13999,7 +13999,7 @@ var WarningIcon = css50`
 // src/components/Input/WarningMessage.tsx
 import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
+  return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId != null ? testId : "message-text", ...props, children: [
     /* @__PURE__ */ jsx55("span", { children: /* @__PURE__ */ jsx55(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -16666,6 +16666,11 @@ var inputMenu = css76`
   position: absolute;
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
+`;
+var inputActionItems = css76`
+  display: flex;
+`;
+var inputMenuHover = css76`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -16961,7 +16966,7 @@ var ParameterMenuButton = forwardRef12(
           "button",
           {
             className: "parameter-menu",
-            css: inputMenu,
+            css: [inputMenu, inputMenuHover],
             type: "button",
             "aria-label": `${label} options`,
             ref,
@@ -17083,9 +17088,7 @@ var ParameterShell = ({
         {
           css: [
             inputMenu,
-            css81`
-                opacity: var(--opacity-100);
-              `,
+            inputActionItems,
             menuItems ? css81`
                     right: var(--spacing-md);
                   ` : void 0
@@ -18904,7 +18907,7 @@ var RichText = ({
     return () => {
       removeUpdateListener();
     };
-  }, []);
+  }, [editor, onChange]);
   return /* @__PURE__ */ jsxs71(Fragment18, { children: [
     readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
@@ -19360,7 +19363,7 @@ var SegmentedControl = ({
     return map[size];
   }, [size]);
   const isIconOnly = useMemo5(() => {
-    return options.every((option) => option.icon && !option.label);
+    return options.every((option) => option && option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ jsx112(
     "div",
@@ -19368,6 +19371,9 @@ var SegmentedControl = ({
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
       children: options.map((option, index) => {
+        if (!option) {
+          return null;
+        }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
         return /* @__PURE__ */ jsx112(

package/dist/index.d.mts

@@ -22776,7 +22776,7 @@ type SegmentedControlProps<TValue extends string = string> = Omit<React__default
     /** A unique name for the component, used to group the options */
     name: string;
     /** The options to show */
-    options: SegmentedControlOption<TValue>[];
+    options: Array<SegmentedControlOption<TValue> | undefined>;
     /** The value of the option to be selected */
     value?: TValue;
     /** Called when the user selects a different option */

package/dist/index.d.ts

@@ -22776,7 +22776,7 @@ type SegmentedControlProps<TValue extends string = string> = Omit<React__default
     /** A unique name for the component, used to group the options */
     name: string;
     /** The options to show */
-    options: SegmentedControlOption<TValue>[];
+    options: Array<SegmentedControlOption<TValue> | undefined>;
     /** The value of the option to be selected */
     value?: TValue;
     /** Called when the user selects a different option */

package/dist/index.js

@@ -15723,7 +15723,7 @@ var WarningIcon = import_react68.css`
 // src/components/Input/WarningMessage.tsx
 var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { role: "status", css: WarningText, "data-testid": testId != null ? testId : "message-text", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { css: WarningIcon, icon: import_MdWarning2.MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -18471,6 +18471,11 @@ var inputMenu = import_react102.css`
   position: absolute;
   top: calc(var(--spacing-md) * -1.2);
   right: 0;
+`;
+var inputActionItems = import_react102.css`
+  display: flex;
+`;
+var inputMenuHover = import_react102.css`
   opacity: var(--opacity-50);
   transition: background-color var(--duration-fast) var(--timing-ease-out);
 
@@ -18778,7 +18783,7 @@ var ParameterMenuButton = (0, import_react108.forwardRef)(
           "button",
           {
             className: "parameter-menu",
-            css: inputMenu,
+            css: [inputMenu, inputMenuHover],
             type: "button",
             "aria-label": `${label} options`,
             ref,
@@ -18901,9 +18906,7 @@ var ParameterShell = ({
         {
           css: [
             inputMenu,
-            import_react110.css`
-                opacity: var(--opacity-100);
-              `,
+            inputActionItems,
             menuItems ? import_react110.css`
                     right: var(--spacing-md);
                   ` : void 0
@@ -20697,7 +20700,7 @@ var RichText = ({
     return () => {
       removeUpdateListener();
     };
-  }, []);
+  }, [editor, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
     readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
@@ -21164,7 +21167,7 @@ var SegmentedControl = ({
     return map[size];
   }, [size]);
   const isIconOnly = (0, import_react132.useMemo)(() => {
-    return options.every((option) => option.icon && !option.label);
+    return options.every((option) => option && option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     "div",
@@ -21172,6 +21175,9 @@ var SegmentedControl = ({
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
       ...props,
       children: options.map((option, index) => {
+        if (!option) {
+          return null;
+        }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
         return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.88.0",
+  "version": "19.89.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.88.0",
-    "@uniformdev/richtext": "^19.88.0",
+    "@uniformdev/canvas": "^19.89.0",
+    "@uniformdev/richtext": "^19.89.0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.32",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a02f919a6b0f0c41307f120adada2e5d45a947b"
+  "gitHead": "247189fb1039d0f81498949534646baaffb8bca7"
 }