@hyphen/hyphen-components 4.1.2 → 4.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/hyphen-components.cjs.development.js +1 -1
  2. package/dist/hyphen-components.cjs.development.js.map +1 -1
  3. package/dist/hyphen-components.cjs.production.min.js +1 -1
  4. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  5. package/dist/hyphen-components.esm.js +1 -1
  6. package/dist/hyphen-components.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/DropdownMenu/DropdownMenu.stories.tsx +4 -0
  9. package/src/components/DropdownMenu/DropdownMenu.tsx +16 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "4.1.2",
3
+ "version": "4.1.3",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "@hyphen"
package/src/components/DropdownMenu/DropdownMenu.stories.tsx CHANGED
@@ -51,6 +51,9 @@ export const Uncontrolled = () => (
51
51
  <span>Settings</span>
52
52
  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
53
53
  </DropdownMenuItem>
54
+ <DropdownMenuItem disabled>
55
+ <span>Disabled</span>
56
+ </DropdownMenuItem>
54
57
  <DropdownMenuItem>
55
58
  <span>Keyboard shortcuts</span>
56
59
  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
@@ -133,6 +136,7 @@ export const Controlled = () => {
133
136
  <span>Keyboard shortcuts</span>
134
137
  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
135
138
  </DropdownMenuItem>
139
+ <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
136
140
  </DropdownMenuContent>
137
141
  </DropdownMenu>
138
142
  </div>
package/src/components/DropdownMenu/DropdownMenu.tsx CHANGED
@@ -21,17 +21,22 @@ const DropdownMenuItem = React.forwardRef<
21
21
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
22
22
  inset?: boolean;
23
23
  }
24
- >(({ className, inset, ...props }, ref) => (
25
- <DropdownMenuPrimitive.Item
26
- ref={ref}
27
- className={classNames(
28
- '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',
29
- inset && 'p-left-md',
30
- className
31
- )}
32
- {...props}
33
- />
34
- ));
24
+ >(({ className, inset, ...props }, ref) => {
25
+ return (
26
+ <DropdownMenuPrimitive.Item
27
+ ref={ref}
28
+ className={classNames(
29
+ 'font-size-sm position-relative cursor-default display-flex br-sm align-items-center p-sm g-sm outline-none',
30
+ inset && 'p-left-md',
31
+ !props.disabled &&
32
+ 'hover:background-color-secondary focus:background-color-secondary',
33
+ props.disabled && 'cursor-not-allowed font-color-disabled',
34
+ className
35
+ )}
36
+ {...props}
37
+ />
38
+ );
39
+ });
35
40
  DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
36
41
 
37
42
  const DropdownMenuContent = React.forwardRef<