@moises.ai/design-system 3.10.2 → 3.10.4

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 (4) hide show
  1. package/dist/index.js +5 -1
  2. package/package.json +1 -1
  3. package/src/components/DropdownMenu/DropdownMenu.jsx +55 -49
  4. package/src/components/ProfileMenu/ProfileMenu.jsx +4 -3
package/dist/index.js CHANGED
@@ -3328,7 +3328,10 @@ const _r = Mr(hc), xn = Ve(
3328
3328
  wrapCloseMenu: h,
3329
3329
  ...p
3330
3330
  }) => {
3331
- const y = p.open !== void 0, [f, g] = G(!1), k = y ? p.open : f, b = y ? p.onOpenChange : g, I = () => b(!1), S = h ? h(I) : I, E = {
3331
+ const y = p.open !== void 0, [f, g] = G(!1), k = y ? p.open : f, b = N((w) => {
3332
+ var R;
3333
+ y || g(w), (R = p == null ? void 0 : p.onOpenChange) == null || R.call(p, w);
3334
+ }, [y, p == null ? void 0 : p.onOpenChange]), I = N(() => b(!1), [b]), S = h ? h(I) : I, E = {
3332
3335
  ...A && {
3333
3336
  width: "var(--radix-dropdown-menu-trigger-width)",
3334
3337
  boxSizing: "border-box"
@@ -5496,6 +5499,7 @@ const py = ({
5496
5499
  trigger: s && a ? /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(ft, { content: a, side: "right", sideOffset: 5, children: p }) }) : p,
5497
5500
  options: t,
5498
5501
  side: l ? "top" : "right",
5502
+ align: l ? "end" : "center",
5499
5503
  ...i,
5500
5504
  wrapCloseMenu: h,
5501
5505
  onSelectionChange: A
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moises.ai/design-system",
3
- "version": "3.10.2",
3
+ "version": "3.10.4",
4
4
  "description": "Design System package based on @radix-ui/themes with custom defaults",
5
5
  "private": false,
6
6
  "type": "module",
package/src/components/DropdownMenu/DropdownMenu.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ScrollArea } from '@radix-ui/themes'
2
2
  import classNames from 'classnames'
3
3
  import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
4
- import React, { memo, useState } from 'react'
4
+ import React, { memo, useCallback, useState } from 'react'
5
5
  import { createRenderItem, styles } from '../../lib/menu'
6
6
  import { Theme } from '../theme/Theme'
7
7
 
@@ -25,9 +25,14 @@ export const DropdownMenu = memo(
25
25
  }) => {
26
26
  const isControlled = props.open !== undefined
27
27
  const [internalOpen, setInternalOpen] = useState(false)
28
+
28
29
  const open = isControlled ? props.open : internalOpen
29
- const onOpenChange = isControlled ? props.onOpenChange : setInternalOpen
30
- const baseClose = () => onOpenChange(false)
30
+ const onOpenChange = useCallback((value) => {
31
+ if (!isControlled) setInternalOpen(value)
32
+ props?.onOpenChange?.(value)
33
+ }, [isControlled, props?.onOpenChange])
34
+
35
+ const baseClose = useCallback(() => onOpenChange(false), [onOpenChange])
31
36
  const closeMenu = wrapCloseMenu ? wrapCloseMenu(baseClose) : baseClose
32
37
 
33
38
  const contentStyle = {
@@ -37,6 +42,7 @@ export const DropdownMenu = memo(
37
42
  }),
38
43
  ...(maxHeight && { height: maxHeight }),
39
44
  }
45
+
40
46
  return (
41
47
  <>
42
48
  {options?.length > 0 && (
@@ -57,22 +63,51 @@ export const DropdownMenu = memo(
57
63
  {maxHeight ? (
58
64
  <DropdownMenuRadix.Portal className={styles.menuPortal}>
59
65
  <Theme asChild>
60
- <DropdownMenuRadix.Content
61
- className={classNames(styles.menuContent, className)}
62
- size={size}
63
- side={props.side}
64
- align={props.align}
65
- style={contentStyle}
66
- sideOffset={sideOffset}
67
- alignOffset={0}
68
- onCloseAutoFocus={(event) => {
69
- event.preventDefault()
70
- }}
71
- onClick={(event) => event.stopPropagation()}
72
- >
73
- <ScrollArea
74
- scrollbars="vertical"
75
- style={{ height: maxHeight }}
66
+ <DropdownMenuRadix.Content
67
+ className={classNames(styles.menuContent, className)}
68
+ size={size}
69
+ side={props.side}
70
+ align={props.align}
71
+ style={contentStyle}
72
+ sideOffset={sideOffset}
73
+ alignOffset={0}
74
+ onCloseAutoFocus={(event) => {
75
+ event.preventDefault()
76
+ }}
77
+ onClick={(event) => event.stopPropagation()}
78
+ >
79
+ <ScrollArea
80
+ scrollbars="vertical"
81
+ style={{ height: maxHeight }}
82
+ >
83
+ {options?.map((option) =>
84
+ renderOption(
85
+ option,
86
+ size,
87
+ onSelectionChange,
88
+ closeOnSelect,
89
+ closeMenu,
90
+ ),
91
+ )}
92
+ </ScrollArea>
93
+ </DropdownMenuRadix.Content>
94
+ </Theme>
95
+ </DropdownMenuRadix.Portal>
96
+ ) : (
97
+ <DropdownMenuRadix.Portal className={styles.menuPortal}>
98
+ <Theme asChild>
99
+ <DropdownMenuRadix.Content
100
+ className={classNames(styles.menuContent, className)}
101
+ size={size}
102
+ side={props.side}
103
+ align={props.align}
104
+ style={contentStyle}
105
+ sideOffset={sideOffset}
106
+ alignOffset={0}
107
+ onCloseAutoFocus={(event) => {
108
+ event.preventDefault()
109
+ }}
110
+ onClick={(event) => event.stopPropagation()}
76
111
  >
77
112
  {options?.map((option) =>
78
113
  renderOption(
@@ -83,36 +118,7 @@ export const DropdownMenu = memo(
83
118
  closeMenu,
84
119
  ),
85
120
  )}
86
- </ScrollArea>
87
- </DropdownMenuRadix.Content>
88
- </Theme>
89
- </DropdownMenuRadix.Portal>
90
- ) : (
91
- <DropdownMenuRadix.Portal className={styles.menuPortal}>
92
- <Theme asChild>
93
- <DropdownMenuRadix.Content
94
- className={classNames(styles.menuContent, className)}
95
- size={size}
96
- side={props.side}
97
- align={props.align}
98
- style={contentStyle}
99
- sideOffset={sideOffset}
100
- alignOffset={0}
101
- onCloseAutoFocus={(event) => {
102
- event.preventDefault()
103
- }}
104
- onClick={(event) => event.stopPropagation()}
105
- >
106
- {options?.map((option) =>
107
- renderOption(
108
- option,
109
- size,
110
- onSelectionChange,
111
- closeOnSelect,
112
- closeMenu,
113
- ),
114
- )}
115
- </DropdownMenuRadix.Content>
121
+ </DropdownMenuRadix.Content>
116
122
  </Theme>
117
123
  </DropdownMenuRadix.Portal>
118
124
  )}
package/src/components/ProfileMenu/ProfileMenu.jsx CHANGED
@@ -26,9 +26,9 @@ export const ProfileMenu = ({
26
26
 
27
27
  const wrapCloseMenu = isMobile
28
28
  ? (baseClose) => () => {
29
- baseClose()
30
- close()
31
- }
29
+ baseClose()
30
+ close()
31
+ }
32
32
  : undefined
33
33
 
34
34
  const trigger = <MenuTrigger user={user} collapsed={collapsed} />
@@ -48,6 +48,7 @@ export const ProfileMenu = ({
48
48
  }
49
49
  options={menuOptions}
50
50
  side={isMobileViewport ? 'top' : 'right'}
51
+ align={isMobileViewport ? 'end' : 'center'}
51
52
  {...props}
52
53
  wrapCloseMenu={wrapCloseMenu}
53
54
  onSelectionChange={handleSelectionChange}