@versini/ui-dropdown 1.1.4 → 1.2.0

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/README.md +18 -11
  2. package/dist/DropdownMenu/DropdownMenu.d.ts +2 -2
  3. package/dist/DropdownMenu/DropdownMenu.js +26 -10
  4. package/dist/DropdownMenu/DropdownMenuItem.js +3 -3
  5. package/dist/DropdownMenu/DropdownMenuTypes.d.ts +10 -1
  6. package/dist/DropdownMenu/DropdownMenuTypes.js +3 -3
  7. package/dist/DropdownMenu/utilities.js +3 -3
  8. package/dist/index.js +3 -3
  9. package/package.json +2 -2
package/README.md CHANGED
@@ -166,9 +166,11 @@ function SettingsMenu() {
166
166
  <DropdownMenuItem label="Profile" />
167
167
  <DropdownMenuItem label="Preferences" />
168
168
 
169
- {/* Nested sub-menu */}
170
- <DropdownMenuSub label="AI Settings">
171
- <DropdownMenuGroupLabel>Engines</DropdownMenuGroupLabel>
169
+ {/* Nested sub-menu with icon */}
170
+ <DropdownMenuSub label="AI Settings" icon={<IconSettings />}>
171
+ <DropdownMenuGroupLabel icon={<IconSettings />}>
172
+ Engines
173
+ </DropdownMenuGroupLabel>
172
174
  <DropdownMenuItem
173
175
  label="OpenAI"
174
176
  icon={<IconOpenAI />}
@@ -228,13 +230,14 @@ function SettingsMenu() {
228
230
 
229
231
  ### DropdownMenuSub Props
230
232
 
231
- | Prop | Type | Default | Description |
232
- | ------------- | ----------------- | ------- | ----------------------------------- |
233
- | `label` | `string` | - | The label for the sub-menu trigger. |
234
- | `children` | `React.ReactNode` | - | Items to render inside sub-menu. |
235
- | `disabled` | `boolean` | `false` | Whether the sub-menu is disabled. |
236
- | `sideOffset` | `number` | `2` | Offset from sub-menu trigger. |
237
- | `alignOffset` | `number` | `-4` | Alignment offset for sub-menu. |
233
+ | Prop | Type | Default | Description |
234
+ | ------------- | ----------------- | ------- | ----------------------------------------- |
235
+ | `label` | `string` | - | The label for the sub-menu trigger. |
236
+ | `icon` | `React.ReactNode` | - | Icon to display on the left of the label. |
237
+ | `children` | `React.ReactNode` | - | Items to render inside sub-menu. |
238
+ | `disabled` | `boolean` | `false` | Whether the sub-menu is disabled. |
239
+ | `sideOffset` | `number` | `2` | Offset from sub-menu trigger. |
240
+ | `alignOffset` | `number` | `-4` | Alignment offset for sub-menu. |
238
241
 
239
242
  ### DropdownMenuSeparator Props
240
243
 
@@ -242,4 +245,8 @@ Standard `React.HTMLAttributes<HTMLDivElement>` - use `className` for custom sty
242
245
 
243
246
  ### DropdownMenuGroupLabel Props
244
247
 
245
- Standard `React.HTMLAttributes<HTMLDivElement>` - use `className` for custom styling.
248
+ | Prop | Type | Default | Description |
249
+ | ----------- | ----------------- | ------- | ----------------------------------------- |
250
+ | `icon` | `React.ReactNode` | - | Icon to display on the left of the label. |
251
+ | `children` | `React.ReactNode` | - | The label content. |
252
+ | `className` | `string` | - | Custom CSS class for styling. |
package/dist/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare const DropdownMenu: {
4
4
  displayName: string;
5
5
  };
6
6
  export declare const DropdownMenuSub: {
7
- ({ label, children, disabled, sideOffset, alignOffset, }: DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
7
+ ({ label, icon, children, disabled, sideOffset, alignOffset, }: DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
8
8
  displayName: string;
9
9
  };
10
10
  export declare const DropdownMenuSeparator: {
@@ -12,6 +12,6 @@ export declare const DropdownMenuSeparator: {
12
12
  displayName: string;
13
13
  };
14
14
  export declare const DropdownMenuGroupLabel: {
15
- ({ className, ...props }: DropdownMenuGroupLabelProps): import("react/jsx-runtime").JSX.Element;
15
+ ({ className, icon, children, ...props }: DropdownMenuGroupLabelProps): import("react/jsx-runtime").JSX.Element;
16
16
  displayName: string;
17
17
  };
package/dist/DropdownMenu/DropdownMenu.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.4
2
+ @versini/ui-dropdown v1.2.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.4",
9
- buildTime: "12/16/2025 07:40 PM EST",
8
+ version: "1.2.0",
9
+ buildTime: "12/18/2025 08:37 AM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
@@ -142,15 +142,23 @@ const DropdownMenu = ({ trigger, children, label = "Open menu", defaultPlacement
142
142
  });
143
143
  };
144
144
  DropdownMenu.displayName = "DropdownMenu";
145
- const DropdownMenuSub = ({ label, children, disabled = false, sideOffset = 2, alignOffset = -4 })=>{
145
+ const DropdownMenuSub = ({ label, icon, children, disabled = false, sideOffset = 2, alignOffset = -4 })=>{
146
+ const labelSpanClass = icon ? "pl-2" : "";
146
147
  return /*#__PURE__*/ jsxs(Sub, {
147
148
  children: [
148
149
  /*#__PURE__*/ jsxs(SubTrigger, {
149
150
  className: SUB_TRIGGER_CLASS,
150
151
  disabled: disabled,
151
152
  children: [
152
- /*#__PURE__*/ jsx("span", {
153
- children: label
153
+ /*#__PURE__*/ jsxs("span", {
154
+ className: "flex items-center",
155
+ children: [
156
+ icon,
157
+ /*#__PURE__*/ jsx("span", {
158
+ className: labelSpanClass,
159
+ children: label
160
+ })
161
+ ]
154
162
  }),
155
163
  /*#__PURE__*/ jsx(IconNext, {
156
164
  className: "ml-2",
@@ -180,11 +188,19 @@ const DropdownMenuSeparator = ({ className, ...props })=>{
180
188
  });
181
189
  };
182
190
  DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
183
- const DropdownMenuGroupLabel = ({ className, ...props })=>{
184
- const groupLabelClass = clsx(className, "pt-1 mb-2", "text-sm text-copy-dark font-bold", "border-b border-border-medium");
185
- return /*#__PURE__*/ jsx(Label, {
191
+ const DropdownMenuGroupLabel = ({ className, icon, children, ...props })=>{
192
+ const groupLabelClass = clsx(className, "pt-1 pb-2 mb-2", "text-sm text-copy-dark font-bold", "border-b border-border-medium", icon && "flex items-center");
193
+ const labelSpanClass = icon ? "pl-2" : "";
194
+ return /*#__PURE__*/ jsxs(Label, {
186
195
  className: groupLabelClass,
187
- ...props
196
+ ...props,
197
+ children: [
198
+ icon,
199
+ /*#__PURE__*/ jsx("span", {
200
+ className: labelSpanClass,
201
+ children: children
202
+ })
203
+ ]
188
204
  });
189
205
  };
190
206
  DropdownMenuGroupLabel.displayName = "DropdownMenuGroupLabel";
package/dist/DropdownMenu/DropdownMenuItem.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.4
2
+ @versini/ui-dropdown v1.2.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.4",
9
- buildTime: "12/16/2025 07:40 PM EST",
8
+ version: "1.2.0",
9
+ buildTime: "12/18/2025 08:37 AM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
package/dist/DropdownMenu/DropdownMenuTypes.d.ts CHANGED
@@ -90,12 +90,21 @@ export type DropdownMenuItemProps = {
90
90
  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
91
91
  };
92
92
  export type DropdownMenuSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
93
- export type DropdownMenuGroupLabelProps = React.HTMLAttributes<HTMLDivElement>;
93
+ export type DropdownMenuGroupLabelProps = {
94
+ /**
95
+ * A React component of type Icon to be placed on the left of the label.
96
+ */
97
+ icon?: React.ReactNode;
98
+ } & React.HTMLAttributes<HTMLDivElement>;
94
99
  export type DropdownMenuSubProps = {
95
100
  /**
96
101
  * The label for the sub-menu trigger.
97
102
  */
98
103
  label: string;
104
+ /**
105
+ * A React component of type Icon to be placed on the left of the label.
106
+ */
107
+ icon?: React.ReactNode;
99
108
  /**
100
109
  * The children to render inside the sub-menu.
101
110
  */
package/dist/DropdownMenu/DropdownMenuTypes.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.4
2
+ @versini/ui-dropdown v1.2.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.4",
9
- buildTime: "12/16/2025 07:40 PM EST",
8
+ version: "1.2.0",
9
+ buildTime: "12/18/2025 08:37 AM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
package/dist/DropdownMenu/utilities.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.4
2
+ @versini/ui-dropdown v1.2.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.4",
9
- buildTime: "12/16/2025 07:40 PM EST",
8
+ version: "1.2.0",
9
+ buildTime: "12/18/2025 08:37 AM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
package/dist/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  /*!
2
- @versini/ui-dropdown v1.1.4
2
+ @versini/ui-dropdown v1.2.0
3
3
  © 2025 gizmette.com
4
4
  */
5
5
  try {
6
6
  if (!window.__VERSINI_UI_DROPDOWN__) {
7
7
  window.__VERSINI_UI_DROPDOWN__ = {
8
- version: "1.1.4",
9
- buildTime: "12/16/2025 07:40 PM EST",
8
+ version: "1.2.0",
9
+ buildTime: "12/18/2025 08:37 AM EST",
10
10
  homepage: "https://www.npmjs.com/package/@versini/ui-dropdown",
11
11
  license: "MIT",
12
12
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versini/ui-dropdown",
3
- "version": "1.1.4",
3
+ "version": "1.2.0",
4
4
  "license": "MIT",
5
5
  "author": "Arno Versini",
6
6
  "publishConfig": {
@@ -50,5 +50,5 @@
50
50
  "sideEffects": [
51
51
  "**/*.css"
52
52
  ],
53
- "gitHead": "bcb3916f0c9c7b9933026ca959b14f69bef5b52d"
53
+ "gitHead": "59a78fa649e803c40e8f1910abf64006c5f67ffd"
54
54
  }