@gridui/dropdown-menu 1.0.0 → 1.1.2
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.
- package/README.md +7 -5
- package/dist/dropdown-menu-radio-group/dropdown-menu-radio-group.d.ts +3 -1
- package/dist/dropdown-menu-trigger/dropdown-menu-trigger.d.ts +3 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +37 -20
- package/dist/index.js.map +3 -3
- package/dist/styles.css +29 -158
- package/docs/context-menu.md +25 -0
- package/package.json +12 -9
package/README.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# @gridui/dropdown-menu
|
|
2
2
|
|
|
3
|
-
Core family. Public API: `ContextMenu`, `ContextMenuProps`, `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuContentProps`, `DropdownMenuItem`, `DropdownMenuItemProps`, `DropdownMenuLabel`, `DropdownMenuLabelProps`, `DropdownMenuProps`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuRadioItemProps`, `DropdownMenuTrigger`, `dropdownContentStyles`, `dropdownIndicatorStyles`, `dropdownItemStyles`, `dropdownLabelStyles`.
|
|
3
|
+
Core family. Public API: `ContextMenu`, `ContextMenuProps`, `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuContentProps`, `DropdownMenuItem`, `DropdownMenuItemProps`, `DropdownMenuLabel`, `DropdownMenuLabelProps`, `DropdownMenuProps`, `DropdownMenuRadioGroup`, `DropdownMenuRadioGroupProps`, `DropdownMenuRadioItem`, `DropdownMenuRadioItemProps`, `DropdownMenuTrigger`, `DropdownMenuTriggerProps`, `dropdownContentStyles`, `dropdownIndicatorStyles`, `dropdownItemStyles`, `dropdownLabelStyles`.
|
|
4
4
|
|
|
5
5
|
Import components from `@gridui/dropdown-menu` and load `@gridui/dropdown-menu/styles.css` after Theme.
|
|
6
6
|
Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
|
|
7
7
|
|
|
8
|
-
See [component ownership](
|
|
8
|
+
See [component ownership](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/component-ownership.md) and [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/dropdown-menu/.changeset/history).
|
|
9
9
|
|
|
10
10
|
## Buttons and dropdown menus
|
|
11
11
|
|
|
12
12
|
Import `Button`, `ButtonLink`, `buttonClass`, `useAsyncAction`, and `downloadBlob`
|
|
13
|
-
from [`@gridui/button`](
|
|
14
|
-
for standalone buttons and
|
|
13
|
+
from [`@gridui/button`](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/README.md). Load that package's `styles.css`
|
|
14
|
+
for standalone buttons and composed actions. The Button package owns
|
|
15
15
|
native semantics, variants, sizes, icons, loading, and action lifecycle behavior.
|
|
16
|
-
|
|
16
|
+
DropdownMenu uses Button through its public API.
|
|
17
17
|
|
|
18
18
|
`@gridui/dropdown-menu` wraps Radix Dropdown Menu.
|
|
19
19
|
It exports the root, trigger, portalled content, items, label, radio
|
|
@@ -22,3 +22,5 @@ its separate `styles.css` export. Radix owns keyboard navigation, focus return,
|
|
|
22
22
|
Escape dismissal, and viewport collisions. The portal avoids clipped grid
|
|
23
23
|
boundaries.
|
|
24
24
|
|
|
25
|
+
|
|
26
|
+
Surface motion uses `@gridui/overlay`; load `@gridui/overlay/styles.css` after Theme and before this family.
|
|
@@ -5,4 +5,6 @@
|
|
|
5
5
|
* @description Dropdown Menu Radio Group
|
|
6
6
|
*/
|
|
7
7
|
import * as Primitive from "@radix-ui/react-dropdown-menu";
|
|
8
|
-
|
|
8
|
+
import type { ComponentPropsWithRef, FC } from "react";
|
|
9
|
+
export type DropdownMenuRadioGroupProps = ComponentPropsWithRef<typeof Primitive.RadioGroup>;
|
|
10
|
+
export declare const DropdownMenuRadioGroup: FC<DropdownMenuRadioGroupProps>;
|
|
@@ -5,4 +5,6 @@
|
|
|
5
5
|
* @description Dropdown Menu Trigger
|
|
6
6
|
*/
|
|
7
7
|
import * as Primitive from "@radix-ui/react-dropdown-menu";
|
|
8
|
-
|
|
8
|
+
import type { ComponentPropsWithRef, FC } from "react";
|
|
9
|
+
export type DropdownMenuTriggerProps = ComponentPropsWithRef<typeof Primitive.Trigger>;
|
|
10
|
+
export declare const DropdownMenuTrigger: FC<DropdownMenuTriggerProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -16,9 +16,11 @@ export { DropdownMenuItem } from "./dropdown-menu-item/dropdown-menu-item";
|
|
|
16
16
|
export type { DropdownMenuLabelProps } from "./dropdown-menu-label/dropdown-menu-label";
|
|
17
17
|
export { DropdownMenuLabel } from "./dropdown-menu-label/dropdown-menu-label";
|
|
18
18
|
export { dropdownLabelStyles } from "./dropdown-menu-label/style";
|
|
19
|
+
export type { DropdownMenuRadioGroupProps } from "./dropdown-menu-radio-group/dropdown-menu-radio-group";
|
|
19
20
|
export { DropdownMenuRadioGroup } from "./dropdown-menu-radio-group/dropdown-menu-radio-group";
|
|
20
21
|
export type { DropdownMenuRadioItemProps } from "./dropdown-menu-radio-item/dropdown-menu-radio-item";
|
|
21
22
|
export { DropdownMenuRadioItem } from "./dropdown-menu-radio-item/dropdown-menu-radio-item";
|
|
22
23
|
export { dropdownIndicatorStyles } from "./dropdown-menu-radio-item/style";
|
|
24
|
+
export type { DropdownMenuTriggerProps } from "./dropdown-menu-trigger/dropdown-menu-trigger";
|
|
23
25
|
export { DropdownMenuTrigger } from "./dropdown-menu-trigger/dropdown-menu-trigger";
|
|
24
26
|
export { dropdownItemStyles } from "./shared/style";
|
package/dist/index.js
CHANGED
|
@@ -20,12 +20,13 @@ var DropdownMenu = (props) => {
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
// src/dropdown-menu-content/style.ts
|
|
23
|
+
import { overlaySurfaceStyles } from "@gridui/overlay";
|
|
23
24
|
import { cn } from "@gridui/style-utils";
|
|
24
25
|
import { cva } from "class-variance-authority";
|
|
25
26
|
var dropdownContentStyles = cva(cn(
|
|
27
|
+
overlaySurfaceStyles(),
|
|
26
28
|
"gridui-dropdown-content",
|
|
27
|
-
"z-(--gridui-z-popover) min-w-44 max-w-[calc(100vw-2*var(--gridui-page-gutter))] max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-gridui-4
|
|
28
|
-
"data-[state='closed']:pointer-events-none"
|
|
29
|
+
"gridui-u-z-(--gridui-z-popover) gridui-u-min-w-44 gridui-u-max-w-[calc(100vw-2*var(--gridui-page-gutter))] gridui-u-max-h-(--radix-dropdown-menu-content-available-height) gridui-u-overflow-y-auto gridui-u-p-gridui-4 gridui-u-type-data"
|
|
29
30
|
));
|
|
30
31
|
|
|
31
32
|
// src/dropdown-menu-content/dropdown-menu-content.tsx
|
|
@@ -62,12 +63,20 @@ var DropdownMenuContent = (props) => {
|
|
|
62
63
|
|
|
63
64
|
// src/dropdown-menu-trigger/dropdown-menu-trigger.tsx
|
|
64
65
|
import * as Primitive3 from "@radix-ui/react-dropdown-menu";
|
|
65
|
-
|
|
66
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
67
|
+
var DropdownMenuTrigger = (props) => {
|
|
68
|
+
return /* @__PURE__ */ jsx3(
|
|
69
|
+
Primitive3.Trigger,
|
|
70
|
+
{
|
|
71
|
+
...props
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
};
|
|
66
75
|
|
|
67
76
|
// src/context-menu/context-menu.tsx
|
|
68
77
|
import { useEffect, useState } from "react";
|
|
69
78
|
import { createPortal } from "react-dom";
|
|
70
|
-
import { jsx as
|
|
79
|
+
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
71
80
|
var ContextMenu = (props) => {
|
|
72
81
|
const { x, y, label, children, onClose, onCloseAutoFocus, onKeyDown, ...contentProps } = props;
|
|
73
82
|
const [returnFocus] = useState(() => {
|
|
@@ -98,11 +107,11 @@ var ContextMenu = (props) => {
|
|
|
98
107
|
}
|
|
99
108
|
},
|
|
100
109
|
children: [
|
|
101
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ jsx4(
|
|
102
111
|
DropdownMenuTrigger,
|
|
103
112
|
{
|
|
104
113
|
asChild: true,
|
|
105
|
-
children: /* @__PURE__ */
|
|
114
|
+
children: /* @__PURE__ */ jsx4(
|
|
106
115
|
"button",
|
|
107
116
|
{
|
|
108
117
|
type: "button",
|
|
@@ -123,7 +132,7 @@ var ContextMenu = (props) => {
|
|
|
123
132
|
)
|
|
124
133
|
}
|
|
125
134
|
),
|
|
126
|
-
/* @__PURE__ */
|
|
135
|
+
/* @__PURE__ */ jsx4(
|
|
127
136
|
DropdownMenuContent,
|
|
128
137
|
{
|
|
129
138
|
"aria-label": label,
|
|
@@ -163,21 +172,21 @@ import { cn as cn3 } from "@gridui/style-utils";
|
|
|
163
172
|
import { cva as cva2 } from "class-variance-authority";
|
|
164
173
|
var dropdownItemStyles = cva2(cn3(
|
|
165
174
|
"gridui-dropdown-item",
|
|
166
|
-
"flex min-h-10 items-center gap-gridui-8 px-gridui-8 py-gridui-8 rounded-xs text-inherit no-underline outline-none cursor-pointer",
|
|
167
|
-
"data-highlighted:bg-surface data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]",
|
|
168
|
-
"data-disabled:opacity-50 data-disabled:pointer-events-none"
|
|
175
|
+
"gridui-u-flex gridui-u-min-h-10 gridui-u-items-center gridui-u-gap-gridui-8 gridui-u-px-gridui-8 gridui-u-py-gridui-8 gridui-u-rounded-xs gridui-u-text-inherit gridui-u-no-underline gridui-u-outline-none gridui-u-cursor-pointer",
|
|
176
|
+
"gridui-u-data-highlighted:bg-surface gridui-u-data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]",
|
|
177
|
+
"gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:pointer-events-none"
|
|
169
178
|
));
|
|
170
179
|
|
|
171
180
|
// src/dropdown-menu-item/dropdown-menu-item.tsx
|
|
172
181
|
import { cn as cn4 } from "@gridui/style-utils";
|
|
173
182
|
import * as Primitive4 from "@radix-ui/react-dropdown-menu";
|
|
174
|
-
import { jsx as
|
|
183
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
175
184
|
var DropdownMenuItem = (props) => {
|
|
176
185
|
const {
|
|
177
186
|
className,
|
|
178
187
|
...restProps
|
|
179
188
|
} = props;
|
|
180
|
-
return /* @__PURE__ */
|
|
189
|
+
return /* @__PURE__ */ jsx5(
|
|
181
190
|
Primitive4.Item,
|
|
182
191
|
{
|
|
183
192
|
...restProps,
|
|
@@ -191,19 +200,19 @@ import { cn as cn5 } from "@gridui/style-utils";
|
|
|
191
200
|
import { cva as cva3 } from "class-variance-authority";
|
|
192
201
|
var dropdownLabelStyles = cva3(cn5(
|
|
193
202
|
"gridui-dropdown-label",
|
|
194
|
-
"p-gridui-8 text-muted type-caption"
|
|
203
|
+
"gridui-u-p-gridui-8 gridui-u-text-muted gridui-u-type-caption"
|
|
195
204
|
));
|
|
196
205
|
|
|
197
206
|
// src/dropdown-menu-label/dropdown-menu-label.tsx
|
|
198
207
|
import { cn as cn6 } from "@gridui/style-utils";
|
|
199
208
|
import * as Primitive5 from "@radix-ui/react-dropdown-menu";
|
|
200
|
-
import { jsx as
|
|
209
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
201
210
|
var DropdownMenuLabel = (props) => {
|
|
202
211
|
const {
|
|
203
212
|
className,
|
|
204
213
|
...restProps
|
|
205
214
|
} = props;
|
|
206
|
-
return /* @__PURE__ */
|
|
215
|
+
return /* @__PURE__ */ jsx6(
|
|
207
216
|
Primitive5.Label,
|
|
208
217
|
{
|
|
209
218
|
...restProps,
|
|
@@ -214,21 +223,29 @@ var DropdownMenuLabel = (props) => {
|
|
|
214
223
|
|
|
215
224
|
// src/dropdown-menu-radio-group/dropdown-menu-radio-group.tsx
|
|
216
225
|
import * as Primitive6 from "@radix-ui/react-dropdown-menu";
|
|
217
|
-
|
|
226
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
227
|
+
var DropdownMenuRadioGroup = (props) => {
|
|
228
|
+
return /* @__PURE__ */ jsx7(
|
|
229
|
+
Primitive6.RadioGroup,
|
|
230
|
+
{
|
|
231
|
+
...props
|
|
232
|
+
}
|
|
233
|
+
);
|
|
234
|
+
};
|
|
218
235
|
|
|
219
236
|
// src/dropdown-menu-radio-item/style.ts
|
|
220
237
|
import { cn as cn7 } from "@gridui/style-utils";
|
|
221
238
|
import { cva as cva4 } from "class-variance-authority";
|
|
222
239
|
var dropdownIndicatorStyles = cva4(cn7(
|
|
223
240
|
"gridui-dropdown-indicator",
|
|
224
|
-
"w-gridui-16 shrink-0 text-foreground"
|
|
241
|
+
"gridui-u-w-gridui-16 gridui-u-shrink-0 gridui-u-text-foreground"
|
|
225
242
|
));
|
|
226
243
|
|
|
227
244
|
// src/dropdown-menu-radio-item/dropdown-menu-radio-item.tsx
|
|
228
245
|
import { cn as cn8 } from "@gridui/style-utils";
|
|
229
246
|
import * as Primitive7 from "@radix-ui/react-dropdown-menu";
|
|
230
247
|
import { Check } from "lucide-react";
|
|
231
|
-
import { jsx as
|
|
248
|
+
import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
232
249
|
var DropdownMenuRadioItem = (props) => {
|
|
233
250
|
const {
|
|
234
251
|
className,
|
|
@@ -241,12 +258,12 @@ var DropdownMenuRadioItem = (props) => {
|
|
|
241
258
|
...restProps,
|
|
242
259
|
className: cn8(dropdownItemStyles(), className),
|
|
243
260
|
children: [
|
|
244
|
-
/* @__PURE__ */
|
|
261
|
+
/* @__PURE__ */ jsx8(
|
|
245
262
|
"span",
|
|
246
263
|
{
|
|
247
264
|
className: cn8(dropdownIndicatorStyles()),
|
|
248
265
|
"aria-hidden": "true",
|
|
249
|
-
children: /* @__PURE__ */
|
|
266
|
+
children: /* @__PURE__ */ jsx8(Primitive7.ItemIndicator, { children: /* @__PURE__ */ jsx8(
|
|
250
267
|
Check,
|
|
251
268
|
{
|
|
252
269
|
size: 16,
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/dropdown-menu/dropdown-menu.tsx", "../src/dropdown-menu-content/style.ts", "../src/dropdown-menu-content/dropdown-menu-content.tsx", "../src/dropdown-menu-trigger/dropdown-menu-trigger.tsx", "../src/context-menu/context-menu.tsx", "../src/shared/style.ts", "../src/dropdown-menu-item/dropdown-menu-item.tsx", "../src/dropdown-menu-label/style.ts", "../src/dropdown-menu-label/dropdown-menu-label.tsx", "../src/dropdown-menu-radio-group/dropdown-menu-radio-group.tsx", "../src/dropdown-menu-radio-item/style.ts", "../src/dropdown-menu-radio-item/dropdown-menu-radio-item.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenu\n * @description Dropdown Menu\n */\n\nimport { OverlayOpen, useOverlayState } from \"@gridui/overlay\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuProps = ComponentPropsWithRef<typeof Primitive.Root>;\n\nexport const DropdownMenu: FC<DropdownMenuProps> = (props: DropdownMenuProps) => {\n const state = useOverlayState(props);\n return (<OverlayOpen.Provider\n value={state.open}\n >\n <Primitive.Root\n {...props}\n {...state}\n />\n </OverlayOpen.Provider>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownContentStyles = cva(cn(\n \"gridui-dropdown-content\",\n \"z-(--gridui-z-popover) min-w-44 max-w-[calc(100vw-2*var(--gridui-page-gutter))] max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-gridui-4 border border-solid border-border rounded-control text-foreground bg-background type-data\",\n \"data-[state='closed']:pointer-events-none\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Dropdown Menu Content\n */\n\nimport { dropdownContentStyles } from \"./style\";\nimport { RetainedLayer } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuContentProps = ComponentPropsWithRef<typeof Primitive.Content>;\n\nexport const DropdownMenuContent: FC<DropdownMenuContentProps> = (props: DropdownMenuContentProps) => {\n const {\n className,\n forceMount,\n sideOffset = 8,\n align = \"end\",\n ...restProps\n } = props;\n const content = (<Primitive.Content\n {...restProps}\n forceMount={forceMount}\n align={align}\n sideOffset={sideOffset}\n className={cn(dropdownContentStyles(), className)}\n />);\n return (<Primitive.Portal\n forceMount={forceMount}\n >\n {forceMount ? (<RetainedLayer>\n {content}\n </RetainedLayer>) : content}\n </Primitive.Portal>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuTrigger\n * @description Dropdown Menu Trigger\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\n\nexport const DropdownMenuTrigger = Primitive.Trigger;\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace ContextMenu\n * @description Context Menu\n */\n\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu\";\nimport { DropdownMenuContent, type DropdownMenuContentProps } from \"../dropdown-menu-content/dropdown-menu-content\";\nimport { DropdownMenuTrigger } from \"../dropdown-menu-trigger/dropdown-menu-trigger\";\nimport { type FC, type ReactNode, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport type ContextMenuProps = Omit<DropdownMenuContentProps, \"children\"> & {\n readonly x: number;\n readonly y: number;\n readonly label: string;\n readonly children: ReactNode;\n readonly onClose: () => void;\n};\n\n/** Uses the same menu semantics and presentation as trigger-based dropdowns. */\nexport const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {\n const { x, y, label, children, onClose, onCloseAutoFocus, onKeyDown, ...contentProps } = props;\n\n const [returnFocus] = useState(() => {\n return typeof document === \"undefined\" ? null : document.activeElement;\n });\n useEffect(() => {\n\n const dismissWhenInactive = () => {\n\n if (!document.hasFocus()) {\n onClose();\n }\n };\n window.addEventListener(\"blur\", dismissWhenInactive);\n\n return () => {\n\n window.removeEventListener(\"blur\", dismissWhenInactive);\n };\n }, [onClose]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n return createPortal((<DropdownMenu\n key={`${x}:${y}`}\n open\n modal={false}\n onOpenChange={open => {\n\n if (!open) {\n onClose();\n }\n }}\n >\n <DropdownMenuTrigger\n asChild\n >\n <button\n type=\"button\"\n tabIndex={-1}\n aria-hidden=\"true\"\n style={{\n position: \"fixed\",\n left: x,\n top: y,\n width: 0,\n height: 0,\n padding: 0,\n border: 0,\n opacity: 0,\n pointerEvents: \"none\",\n }}\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent\n aria-label={label}\n side=\"bottom\"\n align=\"start\"\n sideOffset={0}\n collisionPadding={8}\n {...contentProps}\n onCloseAutoFocus={event => {\n onCloseAutoFocus?.(event);\n if (event.defaultPrevented) {\n return;\n }\n event.preventDefault();\n if (document.activeElement === document.body\n && returnFocus instanceof HTMLElement\n && returnFocus.isConnected) {\n returnFocus.focus();\n }\n }}\n onKeyDown={event => {\n\n onKeyDown?.(event);\n if (!event.defaultPrevented && event.key === \"Tab\") {\n event.preventDefault();\n onClose();\n }\n }}\n >\n {children}\n </DropdownMenuContent>\n </DropdownMenu>), document.body);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownItemStyles = cva(cn(\n \"gridui-dropdown-item\",\n \"flex min-h-10 items-center gap-gridui-8 px-gridui-8 py-gridui-8 rounded-xs text-inherit no-underline outline-none cursor-pointer\",\n \"data-highlighted:bg-surface data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]\",\n \"data-disabled:opacity-50 data-disabled:pointer-events-none\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuItem\n * @description Dropdown Menu Item\n */\n\nimport { dropdownItemStyles } from \"../shared/style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuItemProps = ComponentPropsWithRef<typeof Primitive.Item>;\n\nexport const DropdownMenuItem: FC<DropdownMenuItemProps> = (props: DropdownMenuItemProps) => {\n const {\n className,\n ...restProps\n } = props;\n return (<Primitive.Item\n {...restProps}\n className={cn(dropdownItemStyles(), className)}\n />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownLabelStyles = cva(cn(\n \"gridui-dropdown-label\",\n \"p-gridui-8 text-muted type-caption\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Dropdown Menu Label\n */\n\nimport { dropdownLabelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuLabelProps = ComponentPropsWithRef<typeof Primitive.Label>;\n\nexport const DropdownMenuLabel: FC<DropdownMenuLabelProps> = (props: DropdownMenuLabelProps) => {\n const {\n className,\n ...restProps\n } = props;\n return (<Primitive.Label\n {...restProps}\n className={cn(dropdownLabelStyles(), className)}\n />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioGroup\n * @description Dropdown Menu Radio Group\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\n\nexport const DropdownMenuRadioGroup = Primitive.RadioGroup;\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownIndicatorStyles = cva(cn(\n \"gridui-dropdown-indicator\",\n \"w-gridui-16 shrink-0 text-foreground\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Dropdown Menu Radio Item\n */\n\nimport { dropdownItemStyles } from \"../shared/style\";\nimport { dropdownIndicatorStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check } from \"lucide-react\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuRadioItemProps = ComponentPropsWithRef<typeof Primitive.RadioItem>;\n\nexport const DropdownMenuRadioItem: FC<DropdownMenuRadioItemProps> = (props: DropdownMenuRadioItemProps) => {\n const {\n className,\n children,\n ...restProps\n } = props;\n return (<Primitive.RadioItem\n {...restProps}\n className={cn(dropdownItemStyles(), className)}\n >\n <span\n className={cn(dropdownIndicatorStyles())}\n aria-hidden=\"true\"\n >\n <Primitive.ItemIndicator>\n <Check\n size={16}\n aria-hidden=\"true\"\n />\n </Primitive.ItemIndicator>\n </span>\n {children}\n </Primitive.RadioItem>);\n};\n"],
|
|
5
|
-
"mappings": ";AAOA,SAAS,aAAa,uBAAuB;AAC7C,YAAY,eAAe;AAUnB;AALD,IAAM,eAAsC,CAAC,UAA6B;AAC7E,QAAM,QAAQ,gBAAgB,KAAK;AACnC,SAAQ;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACL,OAAO,MAAM;AAAA,MAEb;AAAA,QAAW;AAAA,QAAV;AAAA,UACI,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,MACR;AAAA;AAAA,EACJ;AACJ;;;AChBA,SAAS,UAAU;AACnB,SAAS,WAAW;AAEb,IAAM,wBAAwB,IAAI;AAAA,EACrC;AAAA,
|
|
6
|
-
"names": ["cn", "Primitive", "jsx", "Primitive", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "Primitive", "cn", "cva", "cn", "Primitive", "jsx", "jsxs"]
|
|
4
|
+
"sourcesContent": ["/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenu\n * @description Dropdown Menu\n */\n\nimport { OverlayOpen, useOverlayState } from \"@gridui/overlay\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuProps = ComponentPropsWithRef<typeof Primitive.Root>;\n\nexport const DropdownMenu: FC<DropdownMenuProps> = (props: DropdownMenuProps) => {\n const state = useOverlayState(props);\n return (<OverlayOpen.Provider\n value={state.open}\n >\n <Primitive.Root\n {...props}\n {...state}\n />\n </OverlayOpen.Provider>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Style\n */\n\nimport { overlaySurfaceStyles } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownContentStyles = cva(cn(\n overlaySurfaceStyles(),\n \"gridui-dropdown-content\",\n \"gridui-u-z-(--gridui-z-popover) gridui-u-min-w-44 gridui-u-max-w-[calc(100vw-2*var(--gridui-page-gutter))] gridui-u-max-h-(--radix-dropdown-menu-content-available-height) gridui-u-overflow-y-auto gridui-u-p-gridui-4 gridui-u-type-data\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Dropdown Menu Content\n */\n\nimport { dropdownContentStyles } from \"./style\";\nimport { RetainedLayer } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuContentProps = ComponentPropsWithRef<typeof Primitive.Content>;\n\nexport const DropdownMenuContent: FC<DropdownMenuContentProps> = (props: DropdownMenuContentProps) => {\n const {\n className,\n forceMount,\n sideOffset = 8,\n align = \"end\",\n ...restProps\n } = props;\n const content = (<Primitive.Content\n {...restProps}\n forceMount={forceMount}\n align={align}\n sideOffset={sideOffset}\n className={cn(dropdownContentStyles(), className)}\n />);\n return (<Primitive.Portal\n forceMount={forceMount}\n >\n {forceMount ? (<RetainedLayer>\n {content}\n </RetainedLayer>) : content}\n </Primitive.Portal>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuTrigger\n * @description Dropdown Menu Trigger\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuTriggerProps = ComponentPropsWithRef<typeof Primitive.Trigger>;\n\nexport const DropdownMenuTrigger: FC<DropdownMenuTriggerProps> = (props: DropdownMenuTriggerProps) => {\n return (<Primitive.Trigger\n {...props}\n />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace ContextMenu\n * @description Context Menu\n */\n\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu\";\nimport { DropdownMenuContent, type DropdownMenuContentProps } from \"../dropdown-menu-content/dropdown-menu-content\";\nimport { DropdownMenuTrigger } from \"../dropdown-menu-trigger/dropdown-menu-trigger\";\nimport { type FC, type ReactNode, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport type ContextMenuProps = Omit<DropdownMenuContentProps, \"children\"> & {\n readonly x: number;\n readonly y: number;\n readonly label: string;\n readonly children: ReactNode;\n readonly onClose: () => void;\n};\n\n/** Uses the same menu semantics and presentation as trigger-based dropdowns. */\nexport const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {\n const { x, y, label, children, onClose, onCloseAutoFocus, onKeyDown, ...contentProps } = props;\n\n const [returnFocus] = useState(() => {\n return typeof document === \"undefined\" ? null : document.activeElement;\n });\n useEffect(() => {\n\n const dismissWhenInactive = () => {\n\n if (!document.hasFocus()) {\n onClose();\n }\n };\n window.addEventListener(\"blur\", dismissWhenInactive);\n\n return () => {\n\n window.removeEventListener(\"blur\", dismissWhenInactive);\n };\n }, [onClose]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n return createPortal((<DropdownMenu\n key={`${x}:${y}`}\n open\n modal={false}\n onOpenChange={open => {\n\n if (!open) {\n onClose();\n }\n }}\n >\n <DropdownMenuTrigger\n asChild\n >\n <button\n type=\"button\"\n tabIndex={-1}\n aria-hidden=\"true\"\n style={{\n position: \"fixed\",\n left: x,\n top: y,\n width: 0,\n height: 0,\n padding: 0,\n border: 0,\n opacity: 0,\n pointerEvents: \"none\",\n }}\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent\n aria-label={label}\n side=\"bottom\"\n align=\"start\"\n sideOffset={0}\n collisionPadding={8}\n {...contentProps}\n onCloseAutoFocus={event => {\n onCloseAutoFocus?.(event);\n if (event.defaultPrevented) {\n return;\n }\n event.preventDefault();\n if (document.activeElement === document.body\n && returnFocus instanceof HTMLElement\n && returnFocus.isConnected) {\n returnFocus.focus();\n }\n }}\n onKeyDown={event => {\n\n onKeyDown?.(event);\n if (!event.defaultPrevented && event.key === \"Tab\") {\n event.preventDefault();\n onClose();\n }\n }}\n >\n {children}\n </DropdownMenuContent>\n </DropdownMenu>), document.body);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownItemStyles = cva(cn(\n \"gridui-dropdown-item\",\n \"gridui-u-flex gridui-u-min-h-10 gridui-u-items-center gridui-u-gap-gridui-8 gridui-u-px-gridui-8 gridui-u-py-gridui-8 gridui-u-rounded-xs gridui-u-text-inherit gridui-u-no-underline gridui-u-outline-none gridui-u-cursor-pointer\",\n \"gridui-u-data-highlighted:bg-surface gridui-u-data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]\",\n \"gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:pointer-events-none\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuItem\n * @description Dropdown Menu Item\n */\n\nimport { dropdownItemStyles } from \"../shared/style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuItemProps = ComponentPropsWithRef<typeof Primitive.Item>;\n\nexport const DropdownMenuItem: FC<DropdownMenuItemProps> = (props: DropdownMenuItemProps) => {\n const {\n className,\n ...restProps\n } = props;\n return (<Primitive.Item\n {...restProps}\n className={cn(dropdownItemStyles(), className)}\n />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownLabelStyles = cva(cn(\n \"gridui-dropdown-label\",\n \"gridui-u-p-gridui-8 gridui-u-text-muted gridui-u-type-caption\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Dropdown Menu Label\n */\n\nimport { dropdownLabelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuLabelProps = ComponentPropsWithRef<typeof Primitive.Label>;\n\nexport const DropdownMenuLabel: FC<DropdownMenuLabelProps> = (props: DropdownMenuLabelProps) => {\n const {\n className,\n ...restProps\n } = props;\n return (<Primitive.Label\n {...restProps}\n className={cn(dropdownLabelStyles(), className)}\n />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioGroup\n * @description Dropdown Menu Radio Group\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuRadioGroupProps = ComponentPropsWithRef<typeof Primitive.RadioGroup>;\n\nexport const DropdownMenuRadioGroup: FC<DropdownMenuRadioGroupProps> = (props: DropdownMenuRadioGroupProps) => {\n return (<Primitive.RadioGroup\n {...props}\n />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownIndicatorStyles = cva(cn(\n \"gridui-dropdown-indicator\",\n \"gridui-u-w-gridui-16 gridui-u-shrink-0 gridui-u-text-foreground\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Dropdown Menu Radio Item\n */\n\nimport { dropdownItemStyles } from \"../shared/style\";\nimport { dropdownIndicatorStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check } from \"lucide-react\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuRadioItemProps = ComponentPropsWithRef<typeof Primitive.RadioItem>;\n\nexport const DropdownMenuRadioItem: FC<DropdownMenuRadioItemProps> = (props: DropdownMenuRadioItemProps) => {\n const {\n className,\n children,\n ...restProps\n } = props;\n return (<Primitive.RadioItem\n {...restProps}\n className={cn(dropdownItemStyles(), className)}\n >\n <span\n className={cn(dropdownIndicatorStyles())}\n aria-hidden=\"true\"\n >\n <Primitive.ItemIndicator>\n <Check\n size={16}\n aria-hidden=\"true\"\n />\n </Primitive.ItemIndicator>\n </span>\n {children}\n </Primitive.RadioItem>);\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["cn", "Primitive", "jsx", "Primitive", "jsx", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "Primitive", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "jsxs"]
|
|
7
7
|
}
|
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@layer properties;
|
|
3
2
|
@layer theme, base, components, utilities;
|
|
4
3
|
@layer theme {
|
|
5
4
|
:root, :host {
|
|
@@ -8,225 +7,97 @@
|
|
|
8
7
|
}
|
|
9
8
|
}
|
|
10
9
|
@layer utilities {
|
|
11
|
-
.
|
|
12
|
-
position: fixed;
|
|
13
|
-
}
|
|
14
|
-
.z-\(--gridui-z-popover\) {
|
|
10
|
+
.gridui-u-z-\(--gridui-z-popover\) {
|
|
15
11
|
z-index: var(--gridui-z-popover);
|
|
16
12
|
}
|
|
17
|
-
.flex {
|
|
13
|
+
.gridui-u-flex {
|
|
18
14
|
display: flex;
|
|
19
15
|
}
|
|
20
|
-
.max-h-\(--radix-dropdown-menu-content-available-height\) {
|
|
16
|
+
.gridui-u-max-h-\(--radix-dropdown-menu-content-available-height\) {
|
|
21
17
|
max-height: var(--radix-dropdown-menu-content-available-height);
|
|
22
18
|
}
|
|
23
|
-
.min-h-10 {
|
|
19
|
+
.gridui-u-min-h-10 {
|
|
24
20
|
min-height: calc(var(--spacing) * 10);
|
|
25
21
|
}
|
|
26
|
-
.w-gridui-16 {
|
|
22
|
+
.gridui-u-w-gridui-16 {
|
|
27
23
|
width: var(--gridui-space-16);
|
|
28
24
|
}
|
|
29
|
-
.max-w-\[calc\(100vw-2\*var\(--gridui-page-gutter\)\)\] {
|
|
25
|
+
.gridui-u-max-w-\[calc\(100vw-2\*var\(--gridui-page-gutter\)\)\] {
|
|
30
26
|
max-width: calc(100vw - 2 * var(--gridui-page-gutter));
|
|
31
27
|
}
|
|
32
|
-
.min-w-44 {
|
|
28
|
+
.gridui-u-min-w-44 {
|
|
33
29
|
min-width: calc(var(--spacing) * 44);
|
|
34
30
|
}
|
|
35
|
-
.shrink-0 {
|
|
31
|
+
.gridui-u-shrink-0 {
|
|
36
32
|
flex-shrink: 0;
|
|
37
33
|
}
|
|
38
|
-
.cursor-pointer {
|
|
34
|
+
.gridui-u-cursor-pointer {
|
|
39
35
|
cursor: pointer;
|
|
40
36
|
}
|
|
41
|
-
.items-center {
|
|
37
|
+
.gridui-u-items-center {
|
|
42
38
|
align-items: center;
|
|
43
39
|
}
|
|
44
|
-
.gap-gridui-8 {
|
|
40
|
+
.gridui-u-gap-gridui-8 {
|
|
45
41
|
gap: var(--gridui-space-8);
|
|
46
42
|
}
|
|
47
|
-
.overflow-y-auto {
|
|
43
|
+
.gridui-u-overflow-y-auto {
|
|
48
44
|
overflow-y: auto;
|
|
49
45
|
}
|
|
50
|
-
.rounded-
|
|
51
|
-
border-radius: var(--gridui-control-radius);
|
|
52
|
-
}
|
|
53
|
-
.rounded-xs {
|
|
46
|
+
.gridui-u-rounded-xs {
|
|
54
47
|
border-radius: var(--radius-xs);
|
|
55
48
|
}
|
|
56
|
-
.
|
|
57
|
-
border-style: var(--tw-border-style);
|
|
58
|
-
border-width: 1px;
|
|
59
|
-
}
|
|
60
|
-
.border-solid {
|
|
61
|
-
--tw-border-style: solid;
|
|
62
|
-
border-style: solid;
|
|
63
|
-
}
|
|
64
|
-
.border-border {
|
|
65
|
-
border-color: var(--gridui-border);
|
|
66
|
-
}
|
|
67
|
-
.bg-background {
|
|
68
|
-
background-color: var(--gridui-background);
|
|
69
|
-
}
|
|
70
|
-
.p-gridui-4 {
|
|
49
|
+
.gridui-u-p-gridui-4 {
|
|
71
50
|
padding: var(--gridui-space-4);
|
|
72
51
|
}
|
|
73
|
-
.p-gridui-8 {
|
|
52
|
+
.gridui-u-p-gridui-8 {
|
|
74
53
|
padding: var(--gridui-space-8);
|
|
75
54
|
}
|
|
76
|
-
.px-gridui-8 {
|
|
55
|
+
.gridui-u-px-gridui-8 {
|
|
77
56
|
padding-inline: var(--gridui-space-8);
|
|
78
57
|
}
|
|
79
|
-
.py-gridui-8 {
|
|
58
|
+
.gridui-u-py-gridui-8 {
|
|
80
59
|
padding-block: var(--gridui-space-8);
|
|
81
60
|
}
|
|
82
|
-
.type-data {
|
|
61
|
+
.gridui-u-type-data {
|
|
83
62
|
font: var(--gridui-type-data);
|
|
84
63
|
letter-spacing: normal;
|
|
85
64
|
font-variant-numeric: tabular-nums;
|
|
86
65
|
}
|
|
87
|
-
.type-caption {
|
|
66
|
+
.gridui-u-type-caption {
|
|
88
67
|
font: var(--gridui-type-caption);
|
|
89
68
|
letter-spacing: normal;
|
|
90
69
|
}
|
|
91
|
-
.text-foreground {
|
|
70
|
+
.gridui-u-text-foreground {
|
|
92
71
|
color: var(--gridui-foreground);
|
|
93
72
|
}
|
|
94
|
-
.text-inherit {
|
|
73
|
+
.gridui-u-text-inherit {
|
|
95
74
|
color: inherit;
|
|
96
75
|
}
|
|
97
|
-
.text-muted {
|
|
76
|
+
.gridui-u-text-muted {
|
|
98
77
|
color: var(--gridui-muted);
|
|
99
78
|
}
|
|
100
|
-
.no-underline {
|
|
79
|
+
.gridui-u-no-underline {
|
|
101
80
|
text-decoration-line: none;
|
|
102
81
|
}
|
|
103
|
-
.
|
|
104
|
-
--tw-blur: blur(8px);
|
|
105
|
-
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
106
|
-
}
|
|
107
|
-
.outline-none {
|
|
82
|
+
.gridui-u-outline-none {
|
|
108
83
|
--tw-outline-style: none;
|
|
109
84
|
outline-style: none;
|
|
110
85
|
}
|
|
111
|
-
.data-disabled\:pointer-events-none[data-disabled] {
|
|
86
|
+
.gridui-u-data-disabled\:pointer-events-none[data-disabled] {
|
|
112
87
|
pointer-events: none;
|
|
113
88
|
}
|
|
114
|
-
.data-disabled\:opacity-50[data-disabled] {
|
|
89
|
+
.gridui-u-data-disabled\:opacity-50[data-disabled] {
|
|
115
90
|
opacity: 50%;
|
|
116
91
|
}
|
|
117
|
-
.data-highlighted\:bg-surface[data-highlighted] {
|
|
92
|
+
.gridui-u-data-highlighted\:bg-surface[data-highlighted] {
|
|
118
93
|
background-color: var(--gridui-surface);
|
|
119
94
|
}
|
|
120
|
-
.data-highlighted\:\[box-shadow\:inset_0_0_0_1px_var\(--gridui-border\)\][data-highlighted] {
|
|
95
|
+
.gridui-u-data-highlighted\:\[box-shadow\:inset_0_0_0_1px_var\(--gridui-border\)\][data-highlighted] {
|
|
121
96
|
box-shadow: inset 0 0 0 1px var(--gridui-border);
|
|
122
97
|
}
|
|
123
|
-
.data-\[state\=\'closed\'\]\:pointer-events-none[data-state='closed'] {
|
|
124
|
-
pointer-events: none;
|
|
125
|
-
}
|
|
126
98
|
}
|
|
127
99
|
@layer components {
|
|
128
100
|
.gridui-dropdown-content {
|
|
129
|
-
|
|
130
|
-
}
|
|
131
|
-
.gridui-dropdown-content[data-side="bottom"] {
|
|
132
|
-
--gridui-surface-offset-y: calc(-1 * var(--gridui-motion-distance));
|
|
133
|
-
}
|
|
134
|
-
.gridui-dropdown-content[data-side="top"] {
|
|
135
|
-
--gridui-surface-offset-y: var(--gridui-motion-distance);
|
|
136
|
-
}
|
|
137
|
-
.gridui-dropdown-content[data-side="left"] {
|
|
138
|
-
--gridui-surface-offset-x: var(--gridui-motion-distance);
|
|
139
|
-
}
|
|
140
|
-
.gridui-dropdown-content[data-side="right"] {
|
|
141
|
-
--gridui-surface-offset-x: calc(-1 * var(--gridui-motion-distance));
|
|
142
|
-
}
|
|
143
|
-
.gridui-dropdown-content[data-state="open"] {
|
|
144
|
-
animation: gridui-surface-enter var(--gridui-motion-duration-normal) var(--gridui-motion-ease-out) both;
|
|
145
|
-
}
|
|
146
|
-
.gridui-dropdown-content[data-state="closed"] {
|
|
147
|
-
animation: gridui-surface-exit var(--gridui-motion-duration-quick) var(--gridui-motion-ease-in) both;
|
|
148
|
-
}
|
|
149
|
-
@media (prefers-reduced-motion: reduce) {
|
|
150
|
-
.gridui-dropdown-content[data-state] {
|
|
151
|
-
animation: none;
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
@property --tw-border-style {
|
|
156
|
-
syntax: "*";
|
|
157
|
-
inherits: false;
|
|
158
|
-
initial-value: solid;
|
|
159
|
-
}
|
|
160
|
-
@property --tw-blur {
|
|
161
|
-
syntax: "*";
|
|
162
|
-
inherits: false;
|
|
163
|
-
}
|
|
164
|
-
@property --tw-brightness {
|
|
165
|
-
syntax: "*";
|
|
166
|
-
inherits: false;
|
|
167
|
-
}
|
|
168
|
-
@property --tw-contrast {
|
|
169
|
-
syntax: "*";
|
|
170
|
-
inherits: false;
|
|
171
|
-
}
|
|
172
|
-
@property --tw-grayscale {
|
|
173
|
-
syntax: "*";
|
|
174
|
-
inherits: false;
|
|
175
|
-
}
|
|
176
|
-
@property --tw-hue-rotate {
|
|
177
|
-
syntax: "*";
|
|
178
|
-
inherits: false;
|
|
179
|
-
}
|
|
180
|
-
@property --tw-invert {
|
|
181
|
-
syntax: "*";
|
|
182
|
-
inherits: false;
|
|
183
|
-
}
|
|
184
|
-
@property --tw-opacity {
|
|
185
|
-
syntax: "*";
|
|
186
|
-
inherits: false;
|
|
187
|
-
}
|
|
188
|
-
@property --tw-saturate {
|
|
189
|
-
syntax: "*";
|
|
190
|
-
inherits: false;
|
|
191
|
-
}
|
|
192
|
-
@property --tw-sepia {
|
|
193
|
-
syntax: "*";
|
|
194
|
-
inherits: false;
|
|
195
|
-
}
|
|
196
|
-
@property --tw-drop-shadow {
|
|
197
|
-
syntax: "*";
|
|
198
|
-
inherits: false;
|
|
199
|
-
}
|
|
200
|
-
@property --tw-drop-shadow-color {
|
|
201
|
-
syntax: "*";
|
|
202
|
-
inherits: false;
|
|
203
|
-
}
|
|
204
|
-
@property --tw-drop-shadow-alpha {
|
|
205
|
-
syntax: "<percentage>";
|
|
206
|
-
inherits: false;
|
|
207
|
-
initial-value: 100%;
|
|
208
|
-
}
|
|
209
|
-
@property --tw-drop-shadow-size {
|
|
210
|
-
syntax: "*";
|
|
211
|
-
inherits: false;
|
|
212
|
-
}
|
|
213
|
-
@layer properties {
|
|
214
|
-
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
215
|
-
*, ::before, ::after, ::backdrop {
|
|
216
|
-
--tw-border-style: solid;
|
|
217
|
-
--tw-blur: initial;
|
|
218
|
-
--tw-brightness: initial;
|
|
219
|
-
--tw-contrast: initial;
|
|
220
|
-
--tw-grayscale: initial;
|
|
221
|
-
--tw-hue-rotate: initial;
|
|
222
|
-
--tw-invert: initial;
|
|
223
|
-
--tw-opacity: initial;
|
|
224
|
-
--tw-saturate: initial;
|
|
225
|
-
--tw-sepia: initial;
|
|
226
|
-
--tw-drop-shadow: initial;
|
|
227
|
-
--tw-drop-shadow-color: initial;
|
|
228
|
-
--tw-drop-shadow-alpha: 100%;
|
|
229
|
-
--tw-drop-shadow-size: initial;
|
|
230
|
-
}
|
|
101
|
+
--gridui-overlay-origin: var(--radix-dropdown-menu-content-transform-origin);
|
|
231
102
|
}
|
|
232
103
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# Point-anchored context menu
|
|
2
|
+
|
|
3
|
+
Import `ContextMenu`, `ContextMenuProps`, and the existing `DropdownMenuItem`,
|
|
4
|
+
`DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, and `DropdownMenuLabel` from
|
|
5
|
+
`@gridui/dropdown-menu`. Load `@gridui/dropdown-menu/styles.css` after Theme.
|
|
6
|
+
|
|
7
|
+
Render `ContextMenu` only while open. Pass viewport `x` / `y` coordinates (for
|
|
8
|
+
example, `clientX` / `clientY`), an accessible `label`, menu children, and `onClose`
|
|
9
|
+
to clear the owner's open state. The owner decides which pointer or keyboard
|
|
10
|
+
interaction opens the menu and what each action does. For keyboard opening,
|
|
11
|
+
anchor to the invoking element's bounding rectangle.
|
|
12
|
+
|
|
13
|
+
The menu reuses dropdown keyboard navigation, disabled-item semantics, collision
|
|
14
|
+
handling, and item selection. It is nonmodal, closes on Escape, Tab, outside
|
|
15
|
+
interaction, or window focus loss, and portals its point anchor to the document
|
|
16
|
+
body so transformed application containers do not alter viewport coordinates.
|
|
17
|
+
It renders no server-side markup.
|
|
18
|
+
|
|
19
|
+
Content props such as `className`, `collisionPadding`, positioning options and
|
|
20
|
+
refs are forwarded. `onKeyDown` and `onCloseAutoFocus` are composed; preventing
|
|
21
|
+
their default cancels the library's corresponding behavior. Default close focus
|
|
22
|
+
returns to the element focused when mounted if focus has fallen back to the
|
|
23
|
+
body; it does not steal focus from an outside control. Focus the invoking element
|
|
24
|
+
before opening when it should be the return target. Consumers can override
|
|
25
|
+
return focus with `onCloseAutoFocus`.
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gridui/dropdown-menu",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "GridUI React dropdown menu",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"files": [
|
|
8
8
|
"dist",
|
|
9
|
+
"docs",
|
|
9
10
|
"README.md"
|
|
10
11
|
],
|
|
11
12
|
"sideEffects": [
|
|
@@ -26,18 +27,20 @@
|
|
|
26
27
|
"react-dom": "^19.2.0"
|
|
27
28
|
},
|
|
28
29
|
"dependencies": {
|
|
29
|
-
"@gridui/overlay": "^1.
|
|
30
|
-
"@gridui/style-utils": "^2.1.
|
|
31
|
-
"@gridui/theme": "^2.
|
|
30
|
+
"@gridui/overlay": "^1.1.2",
|
|
31
|
+
"@gridui/style-utils": "^2.1.4",
|
|
32
|
+
"@gridui/theme": "^2.3.2",
|
|
32
33
|
"@radix-ui/react-dropdown-menu": "2.2.1",
|
|
33
34
|
"class-variance-authority": "0.7.1",
|
|
34
|
-
"lucide-react": "1.
|
|
35
|
+
"lucide-react": "1.65.0"
|
|
35
36
|
},
|
|
36
37
|
"devDependencies": {
|
|
37
|
-
"@gridui-internal/configuration": "0.0.0",
|
|
38
|
+
"@gridui-internal/configuration": "0.0.0-internal",
|
|
39
|
+
"@gridui/button": "2.2.0",
|
|
38
40
|
"@jest/globals": "30.5.2",
|
|
41
|
+
"@storybook/react-vite": "10.6.5",
|
|
39
42
|
"@types/jest": "30.0.0",
|
|
40
|
-
"@types/node": "26.6.
|
|
43
|
+
"@types/node": "26.6.6",
|
|
41
44
|
"@types/react": "19.3.0",
|
|
42
45
|
"@types/react-dom": "19.3.0",
|
|
43
46
|
"jest": "30.5.2",
|
|
@@ -48,7 +51,7 @@
|
|
|
48
51
|
"scripts": {
|
|
49
52
|
"build": "node ../../scripts/compilation/package.ts",
|
|
50
53
|
"compile": "tsc --project tsconfig.json",
|
|
51
|
-
"test": "jest
|
|
52
|
-
"coverage": "jest --coverage
|
|
54
|
+
"test": "jest",
|
|
55
|
+
"coverage": "jest --coverage"
|
|
53
56
|
}
|
|
54
57
|
}
|