@uniformdev/design-system 19.134.0 → 19.134.3-alpha.10

package/dist/esm/index.js

@@ -11852,7 +11852,7 @@ function isMenuSeparator(child) {
 
 // src/components/Menu/Menu.styles.ts
 import { css as css26 } from "@emotion/react";
-var menuStyles = css26`
+var menuStyles = (maxMenuHeight) => css26`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -11862,10 +11862,21 @@ var menuStyles = css26`
   outline: none;
   position: relative;
   z-index: var(--z-50);
-
   &:focus {
     outline: none;
   }
+
+  // resolves uni-2997 for smaller screens not being able to access large menus
+  // the code was removed in https://github.com/uniformdev/platform/commit/0067e6c87aaf29147c656949bbf49d632d3e89dc#diff-84f70b10af4d4ec4f57c535e3c44b04c30ce95ac337ce21db9f1ffd8393a846d
+  // but we need to keep it for the Menu component if the menu is larger than the screen
+  ${maxMenuHeight ? `
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: min(${maxMenuHeight}, var(--popover-available-height));
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  ${scrollbarStyles}
+  ` : ""}
 `;
 
 // src/components/Menu/Menu.tsx
@@ -11881,6 +11892,7 @@ var Menu = React8.forwardRef(function Menu2({
   disableAutoSeparatorManagement,
   menuItemsContainerCssClasses,
   testId,
+  maxMenuHeight,
   ...props
 }, ref) {
   const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
@@ -11895,7 +11907,7 @@ var Menu = React8.forwardRef(function Menu2({
         shift: menu.parent ? -4 : 0,
         ...props,
         css: [
-          menuStyles,
+          menuStyles(maxMenuHeight),
           typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
         ],
         className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
@@ -12146,6 +12158,7 @@ var ButtonWithMenu = ({
   size = "lg",
   menuContainerCssClasses,
   withoutPortal = false,
+  maxMenuHeight,
   ...buttonProps
 }) => {
   const buttonTheme = {
@@ -12204,6 +12217,7 @@ var ButtonWithMenu = ({
             placement,
             menuTrigger: clickableButton,
             menuItemsContainerCssClasses: menuContainerCssClasses,
+            maxMenuHeight,
             children
           }
         )
@@ -12215,6 +12229,7 @@ var ButtonWithMenu = ({
           menuTrigger: dropdownButton,
           menuItemsContainerCssClasses: menuContainerCssClasses,
           portal: withoutPortal,
+          maxMenuHeight,
           children
         }
       ) })
@@ -20463,6 +20478,18 @@ var ConditionalFilterRow = css92`
 
   ${cq("380px")} {
     align-items: center;
+
+    &:after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--gray-300);
+      width: calc(100% - var(--spacing-base));
+      margin-left: var(--spacing-base);
+    }
+    &:last-of-type:after {
+      display: none;
+    }
   }
 
   &:first-of-type {
@@ -20470,6 +20497,12 @@ var ConditionalFilterRow = css92`
     grid-template-columns: 50px 1fr;
   }
 
+  ${cq("580px")} {
+    &:after {
+      display: none;
+    }
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     animation: ${fadeInLtr} var(--duration-fast) var(--timing-ease-out);
   }
@@ -20477,15 +20510,24 @@ var ConditionalFilterRow = css92`
 var ConditionalInputRow = css92`
   display: flex;
   gap: var(--spacing-sm);
-  flex-direction: column;
+  flex-wrap: wrap;
 
   ${cq("380px")} {
-    align-items: center;
-    flex-direction: row;
+    & > div:nth-child(-n + 2) {
+      width: calc(50% - var(--spacing-sm));
+    }
+
+    & > div:nth-child(n + 3) {
+      width: calc(100% - 48px);
+    }
   }
   ${cq("580px")} {
     display: grid;
     grid-template-columns: 200px 160px 1fr 32px;
+
+    & > div:nth-child(n) {
+      width: auto;
+    }
   }
 `;
 var SearchInput = css92`

package/dist/index.d.mts

@@ -21107,6 +21107,11 @@ interface ActionButtonsProps {
      * @default false
      */
     withoutPortal?: boolean;
+    /** (optional) sets the maximum height of the menu
+     * setting a max menu height value will make the menu scrollable if the content exceeds the height
+     * this is not compatible with nested menus that expand to the left or right of the menu
+     */
+    maxMenuHeight?: string;
 }
 /** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
 type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -21132,7 +21137,7 @@ type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTM
     </MenuItem>
 </ButtonWithMenu>
  */
-declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, withoutPortal, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, withoutPortal, maxMenuHeight, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * A string in the ISO 8601 date format: YYYY-MM-DD
@@ -22377,6 +22382,11 @@ interface MenuProps extends MenuProps$2 {
     withoutPortal?: boolean;
     /** (optional) sets the test id attribute */
     testId?: string;
+    /** (optional) sets the maximum height of the menu
+     * setting a max menu height value will make the menu scrollable if the content exceeds the height
+     * this is not compatible with nested menus that expand to the left or right of the menu
+     */
+    maxMenuHeight?: string;
 }
 /**
  * Component used for creating clickable menus

package/dist/index.d.ts

@@ -21107,6 +21107,11 @@ interface ActionButtonsProps {
      * @default false
      */
     withoutPortal?: boolean;
+    /** (optional) sets the maximum height of the menu
+     * setting a max menu height value will make the menu scrollable if the content exceeds the height
+     * this is not compatible with nested menus that expand to the left or right of the menu
+     */
+    maxMenuHeight?: string;
 }
 /** ButtonWithMenuProps combines the ActionButtonsProps with React HTMLButtonElement attributes */
 type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
@@ -21132,7 +21137,7 @@ type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTM
     </MenuItem>
 </ButtonWithMenu>
  */
-declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, withoutPortal, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ButtonWithMenu: ({ onButtonClick, buttonType, buttonText, icon, disabled, children, placement, size, menuContainerCssClasses, withoutPortal, maxMenuHeight, ...buttonProps }: ButtonWithMenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 /**
  * A string in the ISO 8601 date format: YYYY-MM-DD
@@ -22377,6 +22382,11 @@ interface MenuProps extends MenuProps$2 {
     withoutPortal?: boolean;
     /** (optional) sets the test id attribute */
     testId?: string;
+    /** (optional) sets the maximum height of the menu
+     * setting a max menu height value will make the menu scrollable if the content exceeds the height
+     * this is not compatible with nested menus that expand to the left or right of the menu
+     */
+    maxMenuHeight?: string;
 }
 /**
  * Component used for creating clickable menus

package/dist/index.js

@@ -13529,7 +13529,7 @@ function isMenuSeparator(child) {
 // src/components/Menu/Menu.styles.ts
 init_emotion_jsx_shim();
 var import_react35 = require("@emotion/react");
-var menuStyles = import_react35.css`
+var menuStyles = (maxMenuHeight) => import_react35.css`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -13539,10 +13539,21 @@ var menuStyles = import_react35.css`
   outline: none;
   position: relative;
   z-index: var(--z-50);
-
   &:focus {
     outline: none;
   }
+
+  // resolves uni-2997 for smaller screens not being able to access large menus
+  // the code was removed in https://github.com/uniformdev/platform/commit/0067e6c87aaf29147c656949bbf49d632d3e89dc#diff-84f70b10af4d4ec4f57c535e3c44b04c30ce95ac337ce21db9f1ffd8393a846d
+  // but we need to keep it for the Menu component if the menu is larger than the screen
+  ${maxMenuHeight ? `
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: min(${maxMenuHeight}, var(--popover-available-height));
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  ${scrollbarStyles}
+  ` : ""}
 `;
 
 // src/components/Menu/Menu.tsx
@@ -13558,6 +13569,7 @@ var Menu = React8.forwardRef(function Menu2({
   disableAutoSeparatorManagement,
   menuItemsContainerCssClasses,
   testId,
+  maxMenuHeight,
   ...props
 }, ref) {
   const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
@@ -13572,7 +13584,7 @@ var Menu = React8.forwardRef(function Menu2({
         shift: menu.parent ? -4 : 0,
         ...props,
         css: [
-          menuStyles,
+          menuStyles(maxMenuHeight),
           typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
         ],
         className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
@@ -13825,6 +13837,7 @@ var ButtonWithMenu = ({
   size = "lg",
   menuContainerCssClasses,
   withoutPortal = false,
+  maxMenuHeight,
   ...buttonProps
 }) => {
   const buttonTheme = {
@@ -13883,6 +13896,7 @@ var ButtonWithMenu = ({
             placement,
             menuTrigger: clickableButton,
             menuItemsContainerCssClasses: menuContainerCssClasses,
+            maxMenuHeight,
             children
           }
         )
@@ -13894,6 +13908,7 @@ var ButtonWithMenu = ({
           menuTrigger: dropdownButton,
           menuItemsContainerCssClasses: menuContainerCssClasses,
           portal: withoutPortal,
+          maxMenuHeight,
           children
         }
       ) })
@@ -22300,6 +22315,18 @@ var ConditionalFilterRow = import_react139.css`
 
   ${cq("380px")} {
     align-items: center;
+
+    &:after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--gray-300);
+      width: calc(100% - var(--spacing-base));
+      margin-left: var(--spacing-base);
+    }
+    &:last-of-type:after {
+      display: none;
+    }
   }
 
   &:first-of-type {
@@ -22307,6 +22334,12 @@ var ConditionalFilterRow = import_react139.css`
     grid-template-columns: 50px 1fr;
   }
 
+  ${cq("580px")} {
+    &:after {
+      display: none;
+    }
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     animation: ${fadeInLtr} var(--duration-fast) var(--timing-ease-out);
   }
@@ -22314,15 +22347,24 @@ var ConditionalFilterRow = import_react139.css`
 var ConditionalInputRow = import_react139.css`
   display: flex;
   gap: var(--spacing-sm);
-  flex-direction: column;
+  flex-wrap: wrap;
 
   ${cq("380px")} {
-    align-items: center;
-    flex-direction: row;
+    & > div:nth-child(-n + 2) {
+      width: calc(50% - var(--spacing-sm));
+    }
+
+    & > div:nth-child(n + 3) {
+      width: calc(100% - 48px);
+    }
   }
   ${cq("580px")} {
     display: grid;
     grid-template-columns: 200px 160px 1fr 32px;
+
+    & > div:nth-child(n) {
+      width: auto;
+    }
   }
 `;
 var SearchInput = import_react139.css`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.134.0",
+  "version": "19.134.3-alpha.10+ae656e8e4c",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,15 +23,15 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.134.0",
-    "@uniformdev/richtext": "^19.134.0",
+    "@uniformdev/canvas": "^19.134.3-alpha.10+ae656e8e4c",
+    "@uniformdev/richtext": "^19.134.3-alpha.10+ae656e8e4c",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
-    "postcss": "8.4.32",
+    "postcss": "8.4.38",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-select-event": "^5.5.1",
-    "tsup": "8.0.1"
+    "tsup": "8.0.2"
   },
   "dependencies": {
     "@ariakit/react": "^0.3.5",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d3856ce53d66b4e69fd693dadc98292cfbc37d1"
+  "gitHead": "ae656e8e4c730dbf960ef43b6c5e9a0b8ba13193"
 }