@camunda/design-system 0.32.2 → 0.34.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.
- package/dist/carbon-compat/button.d.ts +3 -1
- package/dist/carbon-compat/button.d.ts.map +1 -1
- package/dist/carbon-compat/button.js.map +1 -1
- package/dist/carbon-compat/code-snippet.d.ts +17 -12
- package/dist/carbon-compat/code-snippet.d.ts.map +1 -1
- package/dist/carbon-compat/code-snippet.js +72 -24
- package/dist/carbon-compat/code-snippet.js.map +1 -1
- package/dist/carbon-compat/text-area.d.ts.map +1 -1
- package/dist/carbon-compat/text-area.js +6 -8
- package/dist/carbon-compat/text-area.js.map +1 -1
- package/dist/src/components/ui/alert-dialog.d.ts +9 -1
- package/dist/src/components/ui/alert-dialog.d.ts.map +1 -1
- package/dist/src/components/ui/alert-dialog.js +8 -3
- package/dist/src/components/ui/alert-dialog.js.map +1 -1
- package/dist/src/components/ui/button.d.ts +10 -0
- package/dist/src/components/ui/button.d.ts.map +1 -1
- package/dist/src/components/ui/button.js +33 -6
- package/dist/src/components/ui/button.js.map +1 -1
- package/dist/src/components/ui/dialog.d.ts +9 -1
- package/dist/src/components/ui/dialog.d.ts.map +1 -1
- package/dist/src/components/ui/dialog.js +10 -3
- package/dist/src/components/ui/dialog.js.map +1 -1
- package/dist/src/components/ui/dropdown.d.ts +11 -1
- package/dist/src/components/ui/dropdown.d.ts.map +1 -1
- package/dist/src/components/ui/dropdown.js +9 -5
- package/dist/src/components/ui/dropdown.js.map +1 -1
- package/dist/src/components/ui/popover.d.ts +9 -1
- package/dist/src/components/ui/popover.d.ts.map +1 -1
- package/dist/src/components/ui/popover.js +8 -3
- package/dist/src/components/ui/popover.js.map +1 -1
- package/dist/src/components/ui/select.d.ts +10 -1
- package/dist/src/components/ui/select.d.ts.map +1 -1
- package/dist/src/components/ui/select.js +9 -5
- package/dist/src/components/ui/select.js.map +1 -1
- package/dist/src/components/ui/sheet.d.ts +8 -1
- package/dist/src/components/ui/sheet.d.ts.map +1 -1
- package/dist/src/components/ui/sheet.js +8 -3
- package/dist/src/components/ui/sheet.js.map +1 -1
- package/dist/src/lib/focus-visible-on-close.d.ts +34 -4
- package/dist/src/lib/focus-visible-on-close.d.ts.map +1 -1
- package/dist/src/lib/focus-visible-on-close.js +86 -18
- package/dist/src/lib/focus-visible-on-close.js.map +1 -1
- package/dist/styles.css +21 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dropdown.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
|
|
5
5
|
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
|
6
6
|
import { cn } from "../../lib/utils.js";
|
|
7
|
-
import { composeCloseAutoFocus } from "../../lib/focus-visible-on-close.js";
|
|
7
|
+
import { composeCloseAutoFocus, useDialogFocusReturn, } from "../../lib/focus-visible-on-close.js";
|
|
8
8
|
import { C4Provider } from "./c4-provider.js";
|
|
9
9
|
function DropdownMenu({ ...props }) {
|
|
10
10
|
return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
|
|
@@ -15,11 +15,15 @@ function DropdownMenuPortal({ ...props }) {
|
|
|
15
15
|
function DropdownMenuTrigger({ ...props }) {
|
|
16
16
|
return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
|
|
17
17
|
}
|
|
18
|
-
function DropdownMenuContent({ className, sideOffset = 4, onCloseAutoFocus, ...props }) {
|
|
18
|
+
function DropdownMenuContent({ className, sideOffset = 4, onCloseAutoFocus, restoreFocusRef, ...props }) {
|
|
19
|
+
const dialogFocusReturn = useDialogFocusReturn(restoreFocusRef);
|
|
19
20
|
return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(C4Provider, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset,
|
|
20
|
-
// #259
|
|
21
|
-
//
|
|
22
|
-
|
|
21
|
+
// #259 / #26413 — restore focus to `restoreFocusRef` if passed,
|
|
22
|
+
// else fall back to Radix's native trigger-restore, and make the
|
|
23
|
+
// restored focus ring visible on a mouse close (see
|
|
24
|
+
// focus-visible-on-close). No `onOpenAutoFocus` auto-capture here —
|
|
25
|
+
// Radix's Menu.Content doesn't expose that hook.
|
|
26
|
+
onCloseAutoFocus: composeCloseAutoFocus(onCloseAutoFocus, dialogFocusReturn.onCloseAutoFocus), className: cn("relative z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-border data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", className), ...props }) }) }));
|
|
23
27
|
}
|
|
24
28
|
function DropdownMenuGroup({ ...props }) {
|
|
25
29
|
return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/ui/dropdown.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/ui/dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,15 @@ import * as React from "react";
|
|
|
2
2
|
import { Popover as PopoverPrimitive } from "radix-ui";
|
|
3
3
|
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
|
|
4
4
|
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
|
|
5
|
-
declare function PopoverContent({ className, align, sideOffset, onCloseAutoFocus, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>
|
|
5
|
+
declare function PopoverContent({ className, align, sideOffset, onOpenAutoFocus, onCloseAutoFocus, restoreFocusRef, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
|
|
6
|
+
/**
|
|
7
|
+
* Element to refocus when the popover closes, instead of the auto-captured
|
|
8
|
+
* launcher. Required when the launcher isn't the focused element at open
|
|
9
|
+
* time — e.g. a `DropdownMenuItem` that opens this popover. Point it at a
|
|
10
|
+
* still-mounted element, typically the menu's own trigger.
|
|
11
|
+
*/
|
|
12
|
+
restoreFocusRef?: React.RefObject<HTMLElement | null>;
|
|
13
|
+
}): React.JSX.Element;
|
|
6
14
|
declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
|
|
7
15
|
declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
8
16
|
declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAUvD,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,qBAEpD;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,qBAEvD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,GAAG;IACzD;;;;;OAKG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACvD,qBA+BA;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,qBAEtD;AAED,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ1E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAQxE;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ3B;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,cAAc,GACf,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { Popover as PopoverPrimitive } from "radix-ui";
|
|
4
4
|
import { cn } from "../../lib/utils.js";
|
|
5
|
-
import { composeCloseAutoFocus } from "../../lib/focus-visible-on-close.js";
|
|
5
|
+
import { composeCloseAutoFocus, composeOpenAutoFocus, useDialogFocusReturn, } from "../../lib/focus-visible-on-close.js";
|
|
6
6
|
import { C4Provider } from "./c4-provider.js";
|
|
7
7
|
function Popover({ ...props }) {
|
|
8
8
|
return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
|
|
@@ -10,11 +10,16 @@ function Popover({ ...props }) {
|
|
|
10
10
|
function PopoverTrigger({ ...props }) {
|
|
11
11
|
return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
|
|
12
12
|
}
|
|
13
|
-
function PopoverContent({ className, align = "center", sideOffset = 4, onCloseAutoFocus, ...props }) {
|
|
13
|
+
function PopoverContent({ className, align = "center", sideOffset = 4, onOpenAutoFocus, onCloseAutoFocus, restoreFocusRef, ...props }) {
|
|
14
|
+
const dialogFocusReturn = useDialogFocusReturn(restoreFocusRef);
|
|
14
15
|
return (_jsx(PopoverPrimitive.Portal, { children: _jsx(C4Provider, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset,
|
|
16
|
+
// #26413 — restore focus to the real launcher on close, even for
|
|
17
|
+
// controlled-`open` usage with no `PopoverTrigger` (see
|
|
18
|
+
// focus-visible-on-close).
|
|
19
|
+
onOpenAutoFocus: composeOpenAutoFocus(onOpenAutoFocus, dialogFocusReturn.onOpenAutoFocus),
|
|
15
20
|
// #259 — make the trigger's restored focus ring visible on a mouse
|
|
16
21
|
// close (see focus-visible-on-close).
|
|
17
|
-
onCloseAutoFocus: composeCloseAutoFocus(onCloseAutoFocus), className: cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-border outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
|
|
22
|
+
onCloseAutoFocus: composeCloseAutoFocus(onCloseAutoFocus, dialogFocusReturn.onCloseAutoFocus), className: cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-border outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
|
|
18
23
|
}
|
|
19
24
|
function PopoverAnchor({ ...props }) {
|
|
20
25
|
return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/ui/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/ui/popover.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEvD,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,SAAS,OAAO,CAAC,EACf,GAAG,KAAK,EAC2C;IACnD,OAAO,KAAC,gBAAgB,CAAC,IAAI,iBAAW,SAAS,KAAK,KAAK,GAAI,CAAC;AAClE,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EAC8C;IACtD,OAAO,KAAC,gBAAgB,CAAC,OAAO,iBAAW,iBAAiB,KAAK,KAAK,GAAI,CAAC;AAC7E,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,CAAC,EACd,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,GAAG,KAAK,EAST;IACC,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,eAAe,CAAC,CAAC;IAChE,OAAO,CACL,KAAC,gBAAgB,CAAC,MAAM,cACtB,KAAC,UAAU,cACT,KAAC,gBAAgB,CAAC,OAAO,iBACb,iBAAiB,EAC3B,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU;gBACtB,iEAAiE;gBACjE,wDAAwD;gBACxD,2BAA2B;gBAC3B,eAAe,EAAE,oBAAoB,CACnC,eAAe,EACf,iBAAiB,CAAC,eAAe,CAClC;gBACD,mEAAmE;gBACnE,sCAAsC;gBACtC,gBAAgB,EAAE,qBAAqB,CACrC,gBAAgB,EAChB,iBAAiB,CAAC,gBAAgB,CACnC,EACD,SAAS,EAAE,EAAE,CACX,yeAAye,EACze,SAAS,CACV,KACG,KAAK,GACT,GACS,GACW,CAC3B,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EAC6C;IACrD,OAAO,KAAC,gBAAgB,CAAC,MAAM,iBAAW,gBAAgB,KAAK,KAAK,GAAI,CAAC;AAC3E,CAAC;AAED,SAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B;IACzE,OAAO,CACL,2BACY,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B;IACvE,OAAO,CACL,2BACY,eAAe,EACzB,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,KACnC,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACkB;IAC1B,OAAO,CACL,yBACY,qBAAqB,EAC/B,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,KACtD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EACL,OAAO,EACP,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,cAAc,GACf,CAAC"}
|
|
@@ -6,7 +6,16 @@ declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPri
|
|
|
6
6
|
declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
|
7
7
|
size?: "sm" | "default";
|
|
8
8
|
}): React.JSX.Element;
|
|
9
|
-
declare function SelectContent({ className, children, position, onCloseAutoFocus, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>
|
|
9
|
+
declare function SelectContent({ className, children, position, onCloseAutoFocus, restoreFocusRef, ...props }: React.ComponentProps<typeof SelectPrimitive.Content> & {
|
|
10
|
+
/**
|
|
11
|
+
* Element to refocus when the select closes, instead of the default
|
|
12
|
+
* restore target. Radix's `Select.Content` doesn't expose `onOpenAutoFocus`
|
|
13
|
+
* (it manages open-focus internally, to land on the selected item), so
|
|
14
|
+
* unlike the other 5 DS overlays this component cannot auto-capture the
|
|
15
|
+
* launcher — pass this explicitly for any non-`SelectTrigger` launcher.
|
|
16
|
+
*/
|
|
17
|
+
restoreFocusRef?: React.RefObject<HTMLElement | null>;
|
|
18
|
+
}): React.JSX.Element;
|
|
10
19
|
declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element;
|
|
11
20
|
declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element;
|
|
12
21
|
declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAUrD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,qBAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACvD,qBAwCA;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAWpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAkBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,qBAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,qBAa7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,qBAa/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { Select as SelectPrimitive } from "radix-ui";
|
|
5
5
|
import { cn } from "../../lib/utils.js";
|
|
6
|
-
import { composeCloseAutoFocus } from "../../lib/focus-visible-on-close.js";
|
|
6
|
+
import { composeCloseAutoFocus, useDialogFocusReturn, } from "../../lib/focus-visible-on-close.js";
|
|
7
7
|
import { C4Provider } from "./c4-provider.js";
|
|
8
8
|
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
|
|
9
9
|
function Select({ ...props }) {
|
|
@@ -18,11 +18,15 @@ function SelectValue({ ...props }) {
|
|
|
18
18
|
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
19
19
|
return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit min-w-0 items-center justify-between gap-2 rounded-lg border border-input bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-all duration-200 outline-none select-none focus-visible:border-primary-border-strong dark:focus-visible:border-primary-border-subtle focus-visible:ring-3 focus-visible:ring-ring data-[focus-visible-restore]:border-primary-border-strong dark:data-[focus-visible-restore]:border-primary-border-subtle data-[focus-visible-restore]:ring-3 data-[focus-visible-restore]:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger-action-default aria-invalid:ring-3 aria-invalid:ring-danger-action-default/20 data-placeholder:text-neutral-foreground-subtle data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:hover:bg-neutral-background-medium dark:aria-invalid:border-danger-action-default/50 dark:aria-invalid:ring-danger-action-default/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 opacity-50" }) })] }));
|
|
20
20
|
}
|
|
21
|
-
function SelectContent({ className, children, position = "popper", onCloseAutoFocus, ...props }) {
|
|
21
|
+
function SelectContent({ className, children, position = "popper", onCloseAutoFocus, restoreFocusRef, ...props }) {
|
|
22
|
+
const dialogFocusReturn = useDialogFocusReturn(restoreFocusRef);
|
|
22
23
|
return (_jsx(SelectPrimitive.Portal, { children: _jsx(C4Provider, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content",
|
|
23
|
-
// #259
|
|
24
|
-
//
|
|
25
|
-
|
|
24
|
+
// #259 / #26413 — restore focus to `restoreFocusRef` if passed,
|
|
25
|
+
// else fall back to Radix's native trigger-restore, and make the
|
|
26
|
+
// restored focus ring visible on a mouse close (see
|
|
27
|
+
// focus-visible-on-close). No `onOpenAutoFocus` auto-capture here —
|
|
28
|
+
// Radix's Select.Content doesn't expose that hook.
|
|
29
|
+
onCloseAutoFocus: composeCloseAutoFocus(onCloseAutoFocus, dialogFocusReturn.onCloseAutoFocus), className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-input bg-popover text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" &&
|
|
26
30
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
|
|
27
31
|
"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
|
|
28
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAErD,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/ui/select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,8 +9,15 @@ declare function SheetOverlay({ className, ...props }: React.ComponentProps<type
|
|
|
9
9
|
declare const sheetVariants: (props?: ({
|
|
10
10
|
side?: "left" | "right" | "top" | "bottom" | null | undefined;
|
|
11
11
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
-
declare function SheetContent({ className, children, side, showCloseButton, onCloseAutoFocus, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & VariantProps<typeof sheetVariants> & {
|
|
12
|
+
declare function SheetContent({ className, children, side, showCloseButton, onOpenAutoFocus, onCloseAutoFocus, restoreFocusRef, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & VariantProps<typeof sheetVariants> & {
|
|
13
13
|
showCloseButton?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Element to refocus when the sheet closes, instead of the auto-captured
|
|
16
|
+
* launcher. Required when the launcher isn't the focused element at open
|
|
17
|
+
* time — e.g. a `DropdownMenuItem` that opens this sheet. Point it at a
|
|
18
|
+
* still-mounted element, typically the menu's own trigger.
|
|
19
|
+
*/
|
|
20
|
+
restoreFocusRef?: React.RefObject<HTMLElement | null>;
|
|
14
21
|
}): React.JSX.Element;
|
|
15
22
|
declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
16
23
|
declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAYlE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAcrD;AAED,QAAA,MAAM,aAAa;;8EAelB,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,eAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GACpD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CACvD,qBA0CF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,EACb,UAAU,EACV,YAAY,GACb,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { Dialog as SheetPrimitive } from "radix-ui";
|
|
|
5
5
|
import { cva } from "class-variance-authority";
|
|
6
6
|
import { XIcon } from "lucide-react";
|
|
7
7
|
import { cn } from "../../lib/utils.js";
|
|
8
|
-
import { composeCloseAutoFocus } from "../../lib/focus-visible-on-close.js";
|
|
8
|
+
import { composeCloseAutoFocus, composeOpenAutoFocus, useDialogFocusReturn, } from "../../lib/focus-visible-on-close.js";
|
|
9
9
|
import { C4Provider } from "./c4-provider.js";
|
|
10
10
|
import { Button } from "../ui/button.js";
|
|
11
11
|
function Sheet({ ...props }) {
|
|
@@ -38,11 +38,16 @@ const sheetVariants = cva("fixed z-50 flex flex-col bg-popover text-sm text-popo
|
|
|
38
38
|
},
|
|
39
39
|
defaultVariants: { side: "left" },
|
|
40
40
|
});
|
|
41
|
-
function SheetContent({ className, children, side = "left", showCloseButton = true, onCloseAutoFocus, ...props }) {
|
|
41
|
+
function SheetContent({ className, children, side = "left", showCloseButton = true, onOpenAutoFocus, onCloseAutoFocus, restoreFocusRef, ...props }) {
|
|
42
|
+
const dialogFocusReturn = useDialogFocusReturn(restoreFocusRef);
|
|
42
43
|
return (_jsx(SheetPortal, { children: _jsxs(C4Provider, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", "data-side": side,
|
|
44
|
+
// #26413 — restore focus to the real launcher on close, even for
|
|
45
|
+
// controlled-`open` usage with no `SheetTrigger` (see
|
|
46
|
+
// focus-visible-on-close).
|
|
47
|
+
onOpenAutoFocus: composeOpenAutoFocus(onOpenAutoFocus, dialogFocusReturn.onOpenAutoFocus),
|
|
43
48
|
// #259 — make the trigger's restored focus ring visible on a mouse
|
|
44
49
|
// close (see focus-visible-on-close).
|
|
45
|
-
onCloseAutoFocus: composeCloseAutoFocus(onCloseAutoFocus), className: cn(sheetVariants({ side }), className), ...props, children: [children, showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }) }));
|
|
50
|
+
onCloseAutoFocus: composeCloseAutoFocus(onCloseAutoFocus, dialogFocusReturn.onCloseAutoFocus), className: cn(sheetVariants({ side }), className), ...props, children: [children, showCloseButton && (_jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: _jsxs(Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }) }));
|
|
46
51
|
}
|
|
47
52
|
function SheetHeader({ className, ...props }) {
|
|
48
53
|
return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,
|
|
1
|
+
{"version":3,"file":"sheet.js","sourceRoot":"","sources":["../../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
/**
|
|
2
3
|
* Makes the focus ring visible when a modal overlay restores focus to its
|
|
3
4
|
* trigger on close (#259 follow-up).
|
|
@@ -31,9 +32,38 @@ export declare const FOCUS_VISIBLE_RESTORE_ATTR = "data-focus-visible-restore";
|
|
|
31
32
|
export declare function markFocusVisibleOnClose(event: Event): void;
|
|
32
33
|
/**
|
|
33
34
|
* Wraps a Radix overlay `Content`'s `onCloseAutoFocus`: runs the consumer's
|
|
34
|
-
* handler first (so it can `preventDefault`), then
|
|
35
|
-
* marker.
|
|
36
|
-
* focus
|
|
35
|
+
* handler first (so it can `preventDefault`), then runs `defaultHandler`
|
|
36
|
+
* (default: the #259 focus-visible marker). Every DS overlay composes its
|
|
37
|
+
* default focus-RETURN handling (`useDialogFocusReturn`) through the second
|
|
38
|
+
* parameter instead of calling `markFocusVisibleOnClose` directly, since that
|
|
39
|
+
* handler already stamps the marker itself once it settles on a final target.
|
|
37
40
|
*/
|
|
38
|
-
export declare function composeCloseAutoFocus(handler?: (event: Event) => void): (event: Event) => void;
|
|
41
|
+
export declare function composeCloseAutoFocus(handler?: (event: Event) => void, defaultHandler?: (event: Event) => void): (event: Event) => void;
|
|
42
|
+
/** Same composition shape as {@link composeCloseAutoFocus}, for `onOpenAutoFocus`. */
|
|
43
|
+
export declare function composeOpenAutoFocus(handler: ((event: Event) => void) | undefined, defaultHandler: (event: Event) => void): (event: Event) => void;
|
|
44
|
+
/**
|
|
45
|
+
* Default focus-RETURN for DS overlay `Content` components (issue #26413).
|
|
46
|
+
*
|
|
47
|
+
* Radix's own close-restore only works when it owns the element that opened
|
|
48
|
+
* the overlay (a `<...Trigger>` still mounted at close time). It fails for the
|
|
49
|
+
* common controlled-`open` usage with no `Trigger` — e.g. a persistent
|
|
50
|
+
* `<Button onClick={() => setOpen(true)}>` — where focus falls back to
|
|
51
|
+
* `<body>` on close (a WCAG 2.4.3 regression).
|
|
52
|
+
*
|
|
53
|
+
* `onOpenAutoFocus` fires before Radix moves focus into the overlay, so
|
|
54
|
+
* `document.activeElement` at that point is still whatever launched it. We
|
|
55
|
+
* capture it (without `preventDefault` — Radix must still move focus in) and
|
|
56
|
+
* refocus it in `onCloseAutoFocus`.
|
|
57
|
+
*
|
|
58
|
+
* That auto-capture cannot recover a launcher that has already unmounted by
|
|
59
|
+
* open time — a `DropdownMenuItem` opening a dialog: the menu (and the item)
|
|
60
|
+
* closes and unmounts before `onOpenAutoFocus` runs, so `activeElement` is
|
|
61
|
+
* already `<body>`. Consumers in that shape must pass `restoreFocusRef`
|
|
62
|
+
* pointing at a still-mounted element (typically the menu's own trigger);
|
|
63
|
+
* `restoreFocusRef` always takes precedence over the auto-captured element.
|
|
64
|
+
*/
|
|
65
|
+
export declare function useDialogFocusReturn(restoreFocusRef?: React.RefObject<HTMLElement | null>): {
|
|
66
|
+
onOpenAutoFocus: (event: Event) => void;
|
|
67
|
+
onCloseAutoFocus: (event: Event) => void;
|
|
68
|
+
};
|
|
39
69
|
//# sourceMappingURL=focus-visible-on-close.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-visible-on-close.d.ts","sourceRoot":"","sources":["../../../src/lib/focus-visible-on-close.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;
|
|
1
|
+
{"version":3,"file":"focus-visible-on-close.d.ts","sourceRoot":"","sources":["../../../src/lib/focus-visible-on-close.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AA8BvE;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAM1D;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EAChC,cAAc,GAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAA8B,GAC/D,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAKxB;AAED,sFAAsF;AACtF,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,SAAS,EAC7C,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GACrC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAKxB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,oBAAoB,CAClC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GACpD;IACD,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACxC,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C,CA6BA"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
/**
|
|
2
3
|
* Makes the focus ring visible when a modal overlay restores focus to its
|
|
3
4
|
* trigger on close (#259 follow-up).
|
|
@@ -21,6 +22,32 @@
|
|
|
21
22
|
* inert body-child mirror in `inert-aria-hidden.ts`.
|
|
22
23
|
*/
|
|
23
24
|
export const FOCUS_VISIBLE_RESTORE_ATTR = "data-focus-visible-restore";
|
|
25
|
+
function applyFocusVisibleMarker(el) {
|
|
26
|
+
el.setAttribute(FOCUS_VISIBLE_RESTORE_ATTR, "");
|
|
27
|
+
const clear = () => {
|
|
28
|
+
el.removeAttribute(FOCUS_VISIBLE_RESTORE_ATTR);
|
|
29
|
+
el.removeEventListener("blur", clear);
|
|
30
|
+
document.removeEventListener("pointerdown", clear, true);
|
|
31
|
+
};
|
|
32
|
+
el.addEventListener("blur", clear);
|
|
33
|
+
document.addEventListener("pointerdown", clear, true);
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Stamps the marker on whatever `getElement()` resolves to, one frame later —
|
|
37
|
+
* late enough that a synchronous `.focus()` call earlier in the same tick has
|
|
38
|
+
* already committed, so `getElement` can sanity-check against
|
|
39
|
+
* `document.activeElement` before stamping.
|
|
40
|
+
*/
|
|
41
|
+
function scheduleFocusVisibleMarker(getElement) {
|
|
42
|
+
if (typeof requestAnimationFrame === "undefined")
|
|
43
|
+
return;
|
|
44
|
+
requestAnimationFrame(() => {
|
|
45
|
+
const el = getElement();
|
|
46
|
+
if (el == null)
|
|
47
|
+
return;
|
|
48
|
+
applyFocusVisibleMarker(el);
|
|
49
|
+
});
|
|
50
|
+
}
|
|
24
51
|
/**
|
|
25
52
|
* Use as a Radix overlay `Content`'s `onCloseAutoFocus`. Does not
|
|
26
53
|
* `preventDefault`, so Radix still restores focus to the trigger; on the next
|
|
@@ -29,33 +56,74 @@ export const FOCUS_VISIBLE_RESTORE_ATTR = "data-focus-visible-restore";
|
|
|
29
56
|
* restore.
|
|
30
57
|
*/
|
|
31
58
|
export function markFocusVisibleOnClose(event) {
|
|
32
|
-
if (event.defaultPrevented
|
|
59
|
+
if (event.defaultPrevented)
|
|
33
60
|
return;
|
|
34
|
-
|
|
35
|
-
requestAnimationFrame(() => {
|
|
61
|
+
scheduleFocusVisibleMarker(() => {
|
|
36
62
|
const el = document.activeElement;
|
|
37
|
-
|
|
38
|
-
return;
|
|
39
|
-
el.setAttribute(FOCUS_VISIBLE_RESTORE_ATTR, "");
|
|
40
|
-
const clear = () => {
|
|
41
|
-
el.removeAttribute(FOCUS_VISIBLE_RESTORE_ATTR);
|
|
42
|
-
el.removeEventListener("blur", clear);
|
|
43
|
-
document.removeEventListener("pointerdown", clear, true);
|
|
44
|
-
};
|
|
45
|
-
el.addEventListener("blur", clear);
|
|
46
|
-
document.addEventListener("pointerdown", clear, true);
|
|
63
|
+
return el instanceof HTMLElement && el !== document.body ? el : null;
|
|
47
64
|
});
|
|
48
65
|
}
|
|
49
66
|
/**
|
|
50
67
|
* Wraps a Radix overlay `Content`'s `onCloseAutoFocus`: runs the consumer's
|
|
51
|
-
* handler first (so it can `preventDefault`), then
|
|
52
|
-
* marker.
|
|
53
|
-
* focus
|
|
68
|
+
* handler first (so it can `preventDefault`), then runs `defaultHandler`
|
|
69
|
+
* (default: the #259 focus-visible marker). Every DS overlay composes its
|
|
70
|
+
* default focus-RETURN handling (`useDialogFocusReturn`) through the second
|
|
71
|
+
* parameter instead of calling `markFocusVisibleOnClose` directly, since that
|
|
72
|
+
* handler already stamps the marker itself once it settles on a final target.
|
|
54
73
|
*/
|
|
55
|
-
export function composeCloseAutoFocus(handler) {
|
|
74
|
+
export function composeCloseAutoFocus(handler, defaultHandler = markFocusVisibleOnClose) {
|
|
56
75
|
return (event) => {
|
|
57
76
|
handler?.(event);
|
|
58
|
-
|
|
77
|
+
defaultHandler(event);
|
|
59
78
|
};
|
|
60
79
|
}
|
|
80
|
+
/** Same composition shape as {@link composeCloseAutoFocus}, for `onOpenAutoFocus`. */
|
|
81
|
+
export function composeOpenAutoFocus(handler, defaultHandler) {
|
|
82
|
+
return (event) => {
|
|
83
|
+
handler?.(event);
|
|
84
|
+
defaultHandler(event);
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Default focus-RETURN for DS overlay `Content` components (issue #26413).
|
|
89
|
+
*
|
|
90
|
+
* Radix's own close-restore only works when it owns the element that opened
|
|
91
|
+
* the overlay (a `<...Trigger>` still mounted at close time). It fails for the
|
|
92
|
+
* common controlled-`open` usage with no `Trigger` — e.g. a persistent
|
|
93
|
+
* `<Button onClick={() => setOpen(true)}>` — where focus falls back to
|
|
94
|
+
* `<body>` on close (a WCAG 2.4.3 regression).
|
|
95
|
+
*
|
|
96
|
+
* `onOpenAutoFocus` fires before Radix moves focus into the overlay, so
|
|
97
|
+
* `document.activeElement` at that point is still whatever launched it. We
|
|
98
|
+
* capture it (without `preventDefault` — Radix must still move focus in) and
|
|
99
|
+
* refocus it in `onCloseAutoFocus`.
|
|
100
|
+
*
|
|
101
|
+
* That auto-capture cannot recover a launcher that has already unmounted by
|
|
102
|
+
* open time — a `DropdownMenuItem` opening a dialog: the menu (and the item)
|
|
103
|
+
* closes and unmounts before `onOpenAutoFocus` runs, so `activeElement` is
|
|
104
|
+
* already `<body>`. Consumers in that shape must pass `restoreFocusRef`
|
|
105
|
+
* pointing at a still-mounted element (typically the menu's own trigger);
|
|
106
|
+
* `restoreFocusRef` always takes precedence over the auto-captured element.
|
|
107
|
+
*/
|
|
108
|
+
export function useDialogFocusReturn(restoreFocusRef) {
|
|
109
|
+
const capturedFocusRef = React.useRef(null);
|
|
110
|
+
const onOpenAutoFocus = React.useCallback(() => {
|
|
111
|
+
const active = document.activeElement;
|
|
112
|
+
capturedFocusRef.current =
|
|
113
|
+
active instanceof HTMLElement && active !== document.body ? active : null;
|
|
114
|
+
}, []);
|
|
115
|
+
const onCloseAutoFocus = React.useCallback((event) => {
|
|
116
|
+
if (event.defaultPrevented)
|
|
117
|
+
return;
|
|
118
|
+
const target = restoreFocusRef?.current ?? capturedFocusRef.current;
|
|
119
|
+
if (target != null && target.isConnected) {
|
|
120
|
+
event.preventDefault();
|
|
121
|
+
target.focus();
|
|
122
|
+
scheduleFocusVisibleMarker(() => document.activeElement === target ? target : null);
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
markFocusVisibleOnClose(event);
|
|
126
|
+
}, [restoreFocusRef]);
|
|
127
|
+
return { onOpenAutoFocus, onCloseAutoFocus };
|
|
128
|
+
}
|
|
61
129
|
//# sourceMappingURL=focus-visible-on-close.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-visible-on-close.js","sourceRoot":"","sources":["../../../src/lib/focus-visible-on-close.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,MAAM,0BAA0B,GAAG,4BAA4B,CAAC;AAEvE
|
|
1
|
+
{"version":3,"file":"focus-visible-on-close.js","sourceRoot":"","sources":["../../../src/lib/focus-visible-on-close.ts"],"names":[],"mappings":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -185,6 +185,9 @@
|
|
|
185
185
|
.top-0 {
|
|
186
186
|
top: 0px;
|
|
187
187
|
}
|
|
188
|
+
.top-1\.5 {
|
|
189
|
+
top: calc(var(--spacing) * 1.5);
|
|
190
|
+
}
|
|
188
191
|
.top-1\/2 {
|
|
189
192
|
top: calc(1 / 2 * 100%);
|
|
190
193
|
}
|
|
@@ -203,6 +206,9 @@
|
|
|
203
206
|
.right-0 {
|
|
204
207
|
right: 0px;
|
|
205
208
|
}
|
|
209
|
+
.right-1\.5 {
|
|
210
|
+
right: calc(var(--spacing) * 1.5);
|
|
211
|
+
}
|
|
206
212
|
.right-2 {
|
|
207
213
|
right: calc(var(--spacing) * 2);
|
|
208
214
|
}
|
|
@@ -1795,6 +1801,9 @@
|
|
|
1795
1801
|
.pr-9 {
|
|
1796
1802
|
padding-right: calc(var(--spacing) * 9);
|
|
1797
1803
|
}
|
|
1804
|
+
.pr-10 {
|
|
1805
|
+
padding-right: calc(var(--spacing) * 10);
|
|
1806
|
+
}
|
|
1798
1807
|
.pb-0 {
|
|
1799
1808
|
padding-bottom: 0px;
|
|
1800
1809
|
}
|
|
@@ -2812,6 +2821,15 @@
|
|
|
2812
2821
|
.aria-disabled\:cursor-default[aria-disabled="true"] {
|
|
2813
2822
|
cursor: default;
|
|
2814
2823
|
}
|
|
2824
|
+
.aria-disabled\:bg-danger-action-disabled[aria-disabled="true"] {
|
|
2825
|
+
background-color: var(--danger-action-disabled);
|
|
2826
|
+
}
|
|
2827
|
+
.aria-disabled\:bg-primary-action-disabled[aria-disabled="true"] {
|
|
2828
|
+
background-color: var(--primary-action-disabled);
|
|
2829
|
+
}
|
|
2830
|
+
.aria-disabled\:opacity-50[aria-disabled="true"] {
|
|
2831
|
+
opacity: 50%;
|
|
2832
|
+
}
|
|
2815
2833
|
.aria-expanded\:bg-neutral-background-medium[aria-expanded="true"] {
|
|
2816
2834
|
background-color: var(--neutral-background-medium);
|
|
2817
2835
|
}
|
|
@@ -3476,6 +3494,9 @@
|
|
|
3476
3494
|
.\[\&\>svg\]\:text-neutral-foreground-subtle > svg {
|
|
3477
3495
|
color: var(--neutral-foreground-subtle);
|
|
3478
3496
|
}
|
|
3497
|
+
.\[\&\>svg\:first-child\]\:hidden > svg:first-child {
|
|
3498
|
+
display: none;
|
|
3499
|
+
}
|
|
3479
3500
|
.\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
|
|
3480
3501
|
border-bottom-style: var(--tw-border-style);
|
|
3481
3502
|
border-bottom-width: 0px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@camunda/design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.34.0",
|
|
4
4
|
"description": "Camunda's AI-first design system. shadcn + Tailwind components, design tokens aligned to Camunda's identity, and AI tooling for component authoring + migration.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|