@hyphen/hyphen-components 4.1.2 → 4.2.0

package/dist/lib/tokens.d.ts

@@ -1,5 +1,5 @@
 import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
-export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
+export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
 export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
 export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
 export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -61,7 +61,7 @@
     }
   ],
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.19.0",
+    "@hyphen/hyphen-design-tokens": "^4.20.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -51,6 +51,9 @@ export const Uncontrolled = () => (
           <span>Settings</span>
           <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
         </DropdownMenuItem>
+        <DropdownMenuItem disabled>
+          <span>Disabled</span>
+        </DropdownMenuItem>
         <DropdownMenuItem>
           <span>Keyboard shortcuts</span>
           <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
@@ -133,6 +136,7 @@ export const Controlled = () => {
             <span>Keyboard shortcuts</span>
             <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
           </DropdownMenuItem>
+          <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -21,17 +21,22 @@ const DropdownMenuItem = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
   }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={classNames(
-      'font-size-sm position-relative cursor-default display-flex br-sm align-items-center p-sm g-sm outline-none hover:background-color-secondary focus:background-color-secondary',
-      inset && 'p-left-md',
-      className
-    )}
-    {...props}
-  />
-));
+>(({ className, inset, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={classNames(
+        'font-size-sm position-relative cursor-default display-flex br-sm align-items-center p-sm g-sm outline-none',
+        inset && 'p-left-md',
+        !props.disabled &&
+          'hover:background-color-secondary focus:background-color-secondary',
+        props.disabled && 'cursor-not-allowed font-color-disabled',
+        className
+      )}
+      {...props}
+    />
+  );
+});
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuContent = React.forwardRef<