@uniformdev/design-system 19.87.0 → 19.88.1-alpha.7

package/dist/esm/index.js

@@ -16316,6 +16316,9 @@ var Modal = React19.forwardRef(
         style: { width, height: height === "auto" ? "min-content" : height },
         "data-testid": "side-dialog",
         onClick: onRequestClose,
+        onCancel: (e) => {
+          e.preventDefault();
+        },
         ...modalProps,
         children: /* @__PURE__ */ jsxs59("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
           /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
@@ -16663,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);
 
@@ -16958,7 +16966,7 @@ var ParameterMenuButton = forwardRef12(
           "button",
           {
             className: "parameter-menu",
-            css: inputMenu,
+            css: [inputMenu, inputMenuHover],
             type: "button",
             "aria-label": `${label} options`,
             ref,
@@ -17080,9 +17088,7 @@ var ParameterShell = ({
         {
           css: [
             inputMenu,
-            css81`
-                opacity: var(--opacity-100);
-              `,
+            inputActionItems,
             menuItems ? css81`
                     right: var(--spacing-md);
                   ` : void 0
@@ -18901,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: [
@@ -19357,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",
@@ -19365,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

@@ -74,7 +74,7 @@ declare const supports: (cssProp: string) => string;
  * @function
  * @param {string} size - The responsive breakpoint value
  * @returns {string} - compiled container query e.g. @container (min-width: 640px)
- * @example `${cq('300px`)} { background: red; }`
+ * @example `${cq('300px')} { background: red; }`
  */
 declare const cq: (size: string) => string;
 
@@ -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

@@ -74,7 +74,7 @@ declare const supports: (cssProp: string) => string;
  * @function
  * @param {string} size - The responsive breakpoint value
  * @returns {string} - compiled container query e.g. @container (min-width: 640px)
- * @example `${cq('300px`)} { background: red; }`
+ * @example `${cq('300px')} { background: red; }`
  */
 declare const cq: (size: string) => string;
 
@@ -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

@@ -18110,6 +18110,9 @@ var Modal = import_react99.default.forwardRef(
         style: { width, height: height === "auto" ? "min-content" : height },
         "data-testid": "side-dialog",
         onClick: onRequestClose,
+        onCancel: (e) => {
+          e.preventDefault();
+        },
         ...modalProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
           /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalHeaderStyles, children: [
@@ -18468,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);
 
@@ -18775,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,
@@ -18898,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
@@ -20694,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: [
@@ -21161,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",
@@ -21169,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.87.0",
+  "version": "19.88.1-alpha.7+69b3ccba4",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,11 +23,11 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.87.0",
-    "@uniformdev/richtext": "^19.87.0",
+    "@uniformdev/canvas": "^19.88.1-alpha.7+69b3ccba4",
+    "@uniformdev/richtext": "^19.88.1-alpha.7+69b3ccba4",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
-    "postcss": "8.4.31",
+    "postcss": "8.4.32",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tsup": "8.0.1"
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "596b9c4afbabb8579dd0e6c80690df135d6c55fc"
+  "gitHead": "69b3ccba4050c4ff412c4f226f54a36d74cf9a39"
 }