@uniformdev/design-system 19.24.0 → 19.25.0

package/dist/esm/index.js

@@ -11152,11 +11152,13 @@ import { css as css20 } from "@emotion/react";
 var MenuGroupContainer = css20`
   display: flex;
   flex-direction: column;
+  margin-top: var(--spacing-sm);
 `;
 var MenuTitle = css20`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
+  padding: var(--spacing-xs) var(--spacing-sm);
   text-transform: uppercase;
 `;
 
@@ -11171,7 +11173,12 @@ var MenuGroup = ({ title, children }) => {
 
 // src/components/Menu/MenuItem.styles.ts
 import { css as css21 } from "@emotion/react";
-var menuItem = (textTheme) => css21`
+var activeMenuItem = css21`
+  box-shadow: none;
+  background: var(--gray-200);
+  outline: none;
+`;
+var menuItem = (textTheme, forceActive) => css21`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -11182,9 +11189,10 @@ var menuItem = (textTheme) => css21`
   font-weight: var(--fw-regular);
   flex-grow: 1;
   gap: var(--spacing-xs);
-  line-height: 1.5;
+
   white-space: nowrap;
   transition: background-color var(--duration-fast) var(--timing-ease-out);
+  ${forceActive ? activeMenuItem : ""}
 
   &:disabled {
     color: var(--gray-300);
@@ -11192,9 +11200,7 @@ var menuItem = (textTheme) => css21`
 
   &:hover,
   &:focus {
-    box-shadow: none;
-    background: var(--gray-200);
-    outline: none;
+    ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
 `;
 var menuItemWithIcon = css21`
@@ -11323,14 +11329,15 @@ import * as React8 from "react";
 import { MenuItem as BaseMenuItem } from "reakit";
 import { jsx as jsx24, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var MenuItem = React8.forwardRef(
-  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", ...props }, ref) => {
+  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active, ...props }, ref) => {
     const menuState = useMenuContext();
     const resolveProps = (originalProps) => {
       const resolvedProps2 = { ...originalProps };
       if (resolvedProps2.onClick) {
         const origOnClick = resolvedProps2.onClick;
         resolvedProps2.onClick = (e) => {
-          menuState.hide();
+          var _a;
+          (_a = menuState == null ? void 0 : menuState.hide) == null ? void 0 : _a.call(menuState);
           origOnClick(e);
         };
       }
@@ -11346,7 +11353,7 @@ var MenuItem = React8.forwardRef(
         "data-test-id": "button-menu",
         ...menuState,
         ...resolvedProps,
-        css: [menuItem(textColor), typeof className === "object" ? className : void 0],
+        css: [menuItem(textColor, active), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
         children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
       }

package/dist/index.d.ts

@@ -20392,14 +20392,14 @@ type ChipSizeProp = 'xs' | 'sm' | 'md';
 type ChipThemeProps = 'accent-light' | 'accent-dark' | 'accent-alt-light' | 'accent-alt-dark' | 'neutral-light' | 'neutral-dark';
 type ChipProps = {
     icon?: IconType$1;
-    text: string;
+    text: ReactNode;
     /** sets the size of the chip
      * @default 'sm'
      */
     theme?: ChipThemeProps;
-    chipAction?: React$1.ReactNode;
+    chipAction?: React.ReactNode;
     size?: ChipSizeProp;
-} & React$1.HTMLAttributes<HTMLSpanElement>;
+} & React.HTMLAttributes<HTMLSpanElement>;
 /**
  * @description Chips are used in a variety of ways
  * To represent tokens, where the value of the chip will be replaced with something dynamically.
@@ -21237,7 +21237,7 @@ interface MenuProps extends MenuHTMLProps {
     disableAutoSeparatorManagement?: boolean;
 }
 declare const MenuContext: React$1.Context<MenuStateReturn>;
-declare const useMenuContext: () => MenuStateReturn;
+declare const useMenuContext: () => MenuStateReturn | undefined;
 /**
  * Component used for creating clickable menus
  * @example
@@ -21250,7 +21250,9 @@ declare const useMenuContext: () => MenuStateReturn;
 declare const Menu: ({ menuLabel, menuTrigger, placement, menuItemsContainerCssClasses, children, forceVisible, disableAutoSeparatorManagement, }: MenuProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type MenuGroupProps = {
+    /** Title for the menu group */
     title: string;
+    /** Menu items to render in the group */
     children: ReactNode;
 };
 declare const MenuGroup: ({ title, children }: MenuGroupProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
@@ -21269,6 +21271,11 @@ type MenuItemProps = MenuItemHTMLProps & {
      * @default 'base'
      */
     textColor?: MenuItemTextThemeProps;
+    /**
+     * Overrides the focus styles and forces this menu item to have highlighted/selected styles
+     * Normally automatically managed.
+     */
+    active?: boolean;
 };
 type ChildFunction = (menuItemProps: MenuItemHTMLProps) => React$1.ReactElement | null;
 /**
@@ -22135,8 +22142,8 @@ interface RouteProps {
     as?: string;
     href: string;
 }
-type PageHeaderSectionProps = React$1.HTMLAttributes<HTMLElement> & {
-    title: string | undefined;
+type PageHeaderSectionProps = Omit<React$1.HTMLAttributes<HTMLHeadingElement>, 'title'> & {
+    title: React$1.ReactNode;
     desc?: React$1.ReactNode;
     children?: React$1.ReactNode;
     linkProps?: RouteProps;

package/dist/index.js

@@ -11377,11 +11377,13 @@ var import_react27 = require("@emotion/react");
 var MenuGroupContainer = import_react27.css`
   display: flex;
   flex-direction: column;
+  margin-top: var(--spacing-sm);
 `;
 var MenuTitle = import_react27.css`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
+  padding: var(--spacing-xs) var(--spacing-sm);
   text-transform: uppercase;
 `;
 
@@ -11396,7 +11398,12 @@ var MenuGroup = ({ title, children }) => {
 
 // src/components/Menu/MenuItem.styles.ts
 var import_react28 = require("@emotion/react");
-var menuItem = (textTheme) => import_react28.css`
+var activeMenuItem = import_react28.css`
+  box-shadow: none;
+  background: var(--gray-200);
+  outline: none;
+`;
+var menuItem = (textTheme, forceActive) => import_react28.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -11407,9 +11414,10 @@ var menuItem = (textTheme) => import_react28.css`
   font-weight: var(--fw-regular);
   flex-grow: 1;
   gap: var(--spacing-xs);
-  line-height: 1.5;
+
   white-space: nowrap;
   transition: background-color var(--duration-fast) var(--timing-ease-out);
+  ${forceActive ? activeMenuItem : ""}
 
   &:disabled {
     color: var(--gray-300);
@@ -11417,9 +11425,7 @@ var menuItem = (textTheme) => import_react28.css`
 
   &:hover,
   &:focus {
-    box-shadow: none;
-    background: var(--gray-200);
-    outline: none;
+    ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
 `;
 var menuItemWithIcon = import_react28.css`
@@ -11548,14 +11554,15 @@ var React8 = __toESM(require("react"));
 var import_reakit = require("reakit");
 var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
 var MenuItem = React8.forwardRef(
-  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", ...props }, ref) => {
+  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active, ...props }, ref) => {
     const menuState = useMenuContext();
     const resolveProps = (originalProps) => {
       const resolvedProps2 = { ...originalProps };
       if (resolvedProps2.onClick) {
         const origOnClick = resolvedProps2.onClick;
         resolvedProps2.onClick = (e) => {
-          menuState.hide();
+          var _a;
+          (_a = menuState == null ? void 0 : menuState.hide) == null ? void 0 : _a.call(menuState);
           origOnClick(e);
         };
       }
@@ -11571,7 +11578,7 @@ var MenuItem = React8.forwardRef(
         "data-test-id": "button-menu",
         ...menuState,
         ...resolvedProps,
-        css: [menuItem(textColor), typeof className === "object" ? className : void 0],
+        css: [menuItem(textColor, active), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
         children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.24.0",
+  "version": "19.25.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/client-api": "6.5.16",
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.7",
-    "@uniformdev/canvas": "^19.24.0",
-    "@uniformdev/richtext": "^19.24.0",
+    "@uniformdev/canvas": "^19.25.0",
+    "@uniformdev/richtext": "^19.25.0",
     "autoprefixer": "10.4.14",
     "hygen": "6.2.11",
     "postcss": "8.4.24",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@emotion/react": "11.11.0",
+    "@emotion/react": "11.11.1",
     "@lexical/code": "^0.11.1",
     "@lexical/link": "^0.11.0",
     "@lexical/list": "^0.11.0",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca1c309ce7eed5bffa76130e2baa0f03b08377ac"
+  "gitHead": "cb76e00b562db60df1804aa968906f2297079ed2"
 }