@uniformdev/design-system 20.39.1 → 20.39.3-alpha.11

package/dist/esm/index.js

@@ -2275,7 +2275,15 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     );
     return null;
   }
-  return /* @__PURE__ */ jsx16(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
+  return /* @__PURE__ */ jsx16(
+    IconComponent,
+    {
+      role: "img",
+      size,
+      ...otherProps,
+      css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
+    }
+  );
 };
 var Icon = React3.memo(IconInner);
 
@@ -7103,12 +7111,13 @@ var Counter = ({
   if (typeof count === "undefined") {
     return null;
   }
-  const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isNumber = typeof count === "number";
+  const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ jsx60(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ jsx60("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
+  return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon || !isNumber)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ jsx60(
       "span",
       {
@@ -12323,7 +12332,7 @@ var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
 import { forwardRef as forwardRef21 } from "react";
 import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef21(
-  ({ label: label2, children, disabled: disabled2 }, ref) => {
+  ({ label: label2, children, disabled: disabled2, withoutPortal }, ref) => {
     return /* @__PURE__ */ jsx120(
       Menu,
       {
@@ -12340,6 +12349,7 @@ var ParameterMenuButton = forwardRef21(
             children: /* @__PURE__ */ jsx120(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
+        withoutPortal,
         children
       }
     );
@@ -12431,6 +12441,7 @@ var ParameterShell = ({
   title,
   children,
   isParameterGroup = false,
+  menuWithoutPortal,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = useState14(void 0);
@@ -12462,7 +12473,15 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx121(ParameterMenuButton, { label: `${label2} menu`, disabled: props.disabled, children: menuItems }) : null,
+      menuItems ? /* @__PURE__ */ jsx121(
+        ParameterMenuButton,
+        {
+          label: `${label2} menu`,
+          disabled: props.disabled,
+          withoutPortal: menuWithoutPortal,
+          children: menuItems
+        }
+      ) : null,
       /* @__PURE__ */ jsx121(
         ParameterShellContext.Provider,
         {

package/dist/index.d.mts

@@ -1502,8 +1502,10 @@ declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProp
 type CounterBgColors = 'var(--white)' | 'var(--gray-50)' | 'var(--accent-light)' | 'var(--accent-dark)' | 'transparent';
 type CounterIconColors = 'auto' | 'var(--utility-caution-icon)' | 'var(--utility-danger-icon)' | 'var(--utility-info-icon)' | 'var(--utility-success-icon)' | 'red';
 type CounterProps = {
-    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
-    count: number | undefined;
+    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear.
+     * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
+     */
+    count: number | string | undefined;
     /** sets the background color
      * @default 'transparent'
      */
@@ -3372,6 +3374,8 @@ type ParameterMenuButtonProps = {
     label: string;
     children?: ReactNode;
     disabled?: boolean;
+    /** set to true to render the menu directly in the parent DOM */
+    withoutPortal?: boolean;
 };
 /** @example <ParameterMenuButton label="label value"><MenuItem>menu option component</MenuItem></ParameterMenuButton> */
 declare const ParameterMenuButton: React$1.ForwardRefExoticComponent<ParameterMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -3734,12 +3738,15 @@ type ParameterShellOverrideProps = {
      */
     isParameterGroup?: boolean;
 };
-type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps;
+type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps & {
+    /** set to true to render the menu directly in the parent DOM */
+    menuWithoutPortal?: boolean;
+};
 /**
  * Uniform Parameter shell component
  * @example <ParameterShell label="my label" id="my-id"><ParameterInput onChange={() => {}} /></ParameterShell>
  */
-declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, ...props }: ParameterShellProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, menuWithoutPortal, ...props }: ParameterShellProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare const ParameterShellPlaceholder: ({ children }: {
     children?: ReactNode;
 }) => _emotion_react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -1502,8 +1502,10 @@ declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProp
 type CounterBgColors = 'var(--white)' | 'var(--gray-50)' | 'var(--accent-light)' | 'var(--accent-dark)' | 'transparent';
 type CounterIconColors = 'auto' | 'var(--utility-caution-icon)' | 'var(--utility-danger-icon)' | 'var(--utility-info-icon)' | 'var(--utility-success-icon)' | 'red';
 type CounterProps = {
-    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
-    count: number | undefined;
+    /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear.
+     * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
+     */
+    count: number | string | undefined;
     /** sets the background color
      * @default 'transparent'
      */
@@ -3372,6 +3374,8 @@ type ParameterMenuButtonProps = {
     label: string;
     children?: ReactNode;
     disabled?: boolean;
+    /** set to true to render the menu directly in the parent DOM */
+    withoutPortal?: boolean;
 };
 /** @example <ParameterMenuButton label="label value"><MenuItem>menu option component</MenuItem></ParameterMenuButton> */
 declare const ParameterMenuButton: React$1.ForwardRefExoticComponent<ParameterMenuButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -3734,12 +3738,15 @@ type ParameterShellOverrideProps = {
      */
     isParameterGroup?: boolean;
 };
-type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps;
+type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps & {
+    /** set to true to render the menu directly in the parent DOM */
+    menuWithoutPortal?: boolean;
+};
 /**
  * Uniform Parameter shell component
  * @example <ParameterShell label="my label" id="my-id"><ParameterInput onChange={() => {}} /></ParameterShell>
  */
-declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, ...props }: ParameterShellProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, menuWithoutPortal, ...props }: ParameterShellProps) => _emotion_react_jsx_runtime.JSX.Element;
 declare const ParameterShellPlaceholder: ({ children }: {
     children?: ReactNode;
 }) => _emotion_react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -3989,7 +3989,15 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     );
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    IconComponent,
+    {
+      role: "img",
+      size,
+      ...otherProps,
+      css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
+    }
+  );
 };
 var Icon = import_react24.default.memo(IconInner);
 
@@ -8900,12 +8908,13 @@ var Counter = ({
   if (typeof count === "undefined") {
     return null;
   }
-  const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
+  const isNumber = typeof count === "number";
+  const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon || !isNumber)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "span",
       {
@@ -14251,7 +14260,7 @@ init_emotion_jsx_shim();
 var import_react139 = require("react");
 var import_jsx_runtime120 = require("@emotion/react/jsx-runtime");
 var ParameterMenuButton = (0, import_react139.forwardRef)(
-  ({ label: label2, children, disabled: disabled2 }, ref) => {
+  ({ label: label2, children, disabled: disabled2, withoutPortal }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
       Menu,
       {
@@ -14268,6 +14277,7 @@ var ParameterMenuButton = (0, import_react139.forwardRef)(
             children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
+        withoutPortal,
         children
       }
     );
@@ -14360,6 +14370,7 @@ var ParameterShell = ({
   title,
   children,
   isParameterGroup = false,
+  menuWithoutPortal,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = (0, import_react142.useState)(void 0);
@@ -14391,7 +14402,15 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ParameterMenuButton, { label: `${label2} menu`, disabled: props.disabled, children: menuItems }) : null,
+      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+        ParameterMenuButton,
+        {
+          label: `${label2} menu`,
+          disabled: props.disabled,
+          withoutPortal: menuWithoutPortal,
+          children: menuItems
+        }
+      ) : null,
       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
         ParameterShellContext.Provider,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.39.1",
+  "version": "20.39.3-alpha.11+b3ab5fb305",
   "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.24",
     "@types/react-dom": "18.3.7",
-    "@uniformdev/canvas": "^20.39.1",
-    "@uniformdev/richtext": "^20.39.1",
+    "@uniformdev/canvas": "^20.39.3-alpha.11+b3ab5fb305",
+    "@uniformdev/richtext": "^20.39.3-alpha.11+b3ab5fb305",
     "@vitest/coverage-v8": "3.2.4",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -93,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b30fa1c0f65428db041678384bc2565fed1e34e6"
+  "gitHead": "b3ab5fb305533690de4bbd859a69196b6c26ee2f"
 }