@powered-by-array/ui 1.77.0 → 1.77.1
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/components/DropdownButton/DropdownButton.d.ts +1 -1
- package/dist/components/DropdownButton/DropdownButton.d.ts.map +1 -1
- package/dist/components/DropdownButton/DropdownButton.js +21 -3
- package/dist/components/DropdownButton/DropdownButton.js.map +1 -1
- package/dist/components/DropdownButton/DropdownButton.types.d.ts +11 -0
- package/dist/components/DropdownButton/DropdownButton.types.d.ts.map +1 -1
- package/dist/components/DropdownButton/DropdownButton.variants.d.ts +3 -3
- package/dist/components/DropdownButton/DropdownButton.variants.d.ts.map +1 -1
- package/dist/components/DropdownButton/DropdownButton.variants.js +11 -7
- package/dist/components/DropdownButton/DropdownButton.variants.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { DropdownButtonProps } from "./DropdownButton.types.js";
|
|
2
|
-
declare function DropdownButton({ label, items, actionItems, onPrimaryAction, onItemSelect, minWidth, disabled, open: openProp, defaultOpen, onOpenChange, className, }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare function DropdownButton({ label, items, actionItems, onPrimaryAction, onItemSelect, minWidth, disabled, open: openProp, defaultOpen, onOpenChange, avoidCollisions, container, className, }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export { DropdownButton };
|
|
4
4
|
//# sourceMappingURL=DropdownButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAenC,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,QAAgB,EAChB,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,SAAS,GACV,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,mBAAmB,EACpB,MAAM,2BAA2B,CAAC;AAenC,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,QAAgB,EAChB,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,eAAsB,EACtB,SAAS,EACT,SAAS,GACV,EAAE,mBAAmB,2CA2JrB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -4,12 +4,30 @@ import { ChevronDown, CircleCheck, CircleX } from "lucide-react";
|
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import { cn } from "../../lib/cn.js";
|
|
6
6
|
import { dropdownButtonActionClasses, dropdownButtonActiveLabelClasses, dropdownButtonChevronClasses, dropdownButtonContainerClasses, dropdownButtonMenuContentClasses, dropdownButtonMenuItemClasses, dropdownButtonMenuSeparatorClasses, dropdownButtonNegativeIconClasses, dropdownButtonPositiveIconClasses, dropdownButtonTerminalIconClasses, dropdownButtonTriggerClasses, } from "./DropdownButton.variants.js";
|
|
7
|
-
function DropdownButton({ label, items, actionItems, onPrimaryAction, onItemSelect, minWidth, disabled = false, open: openProp, defaultOpen = false, onOpenChange, className, }) {
|
|
7
|
+
function DropdownButton({ label, items, actionItems, onPrimaryAction, onItemSelect, minWidth, disabled = false, open: openProp, defaultOpen = false, onOpenChange, avoidCollisions = true, container, className, }) {
|
|
8
8
|
// Track open state internally so we can drive the container border-radius and
|
|
9
9
|
// chevron rotation regardless of controlled vs. uncontrolled usage.
|
|
10
10
|
const isControlled = openProp !== undefined;
|
|
11
11
|
const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
|
|
12
12
|
const isOpen = isControlled ? openProp : internalOpen;
|
|
13
|
+
// Track which side Radix actually places the menu on (may flip from "bottom" to
|
|
14
|
+
// "top" when avoidCollisions repositions it near the viewport edge).
|
|
15
|
+
const [openSide, setOpenSide] = React.useState("bottom");
|
|
16
|
+
const sideObserverRef = React.useRef(null);
|
|
17
|
+
const contentCallbackRef = React.useCallback((el) => {
|
|
18
|
+
sideObserverRef.current?.disconnect();
|
|
19
|
+
if (!el)
|
|
20
|
+
return;
|
|
21
|
+
const sync = () => {
|
|
22
|
+
const s = el.getAttribute("data-side");
|
|
23
|
+
if (s === "top" || s === "bottom")
|
|
24
|
+
setOpenSide(s);
|
|
25
|
+
};
|
|
26
|
+
sync();
|
|
27
|
+
const obs = new MutationObserver(sync);
|
|
28
|
+
obs.observe(el, { attributes: true, attributeFilter: ["data-side"] });
|
|
29
|
+
sideObserverRef.current = obs;
|
|
30
|
+
}, []);
|
|
13
31
|
// Label updates to the selected item label when picked from the dropdown.
|
|
14
32
|
// Resets if the parent changes the label prop.
|
|
15
33
|
const [displayLabel, setDisplayLabel] = React.useState(label);
|
|
@@ -19,14 +37,14 @@ function DropdownButton({ label, items, actionItems, onPrimaryAction, onItemSele
|
|
|
19
37
|
setInternalOpen(next);
|
|
20
38
|
onOpenChange?.(next);
|
|
21
39
|
}, [isControlled, onOpenChange]);
|
|
22
|
-
return (_jsxs(DropdownMenuPrimitive.Root, { open: isControlled ? openProp : internalOpen, onOpenChange: handleOpenChange, modal: false, children: [_jsx(DropdownMenuPrimitive.Trigger, { asChild: true, disabled: disabled, children: _jsxs("div", { "data-slot": "dropdown-button", "data-state": isOpen ? "open" : "closed", "data-disabled": disabled || undefined, className: cn(dropdownButtonContainerClasses, className), style: minWidth !== undefined ? { minWidth } : undefined, children: [_jsx("button", { "data-slot": "dropdown-button-action", type: "button", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
|
|
40
|
+
return (_jsxs(DropdownMenuPrimitive.Root, { open: isControlled ? openProp : internalOpen, onOpenChange: handleOpenChange, modal: false, children: [_jsx(DropdownMenuPrimitive.Trigger, { asChild: true, disabled: disabled, children: _jsxs("div", { "data-slot": "dropdown-button", "data-state": isOpen ? "open" : "closed", "data-open-side": isOpen ? openSide : undefined, "data-disabled": disabled || undefined, className: cn(dropdownButtonContainerClasses, className), style: minWidth !== undefined ? { minWidth } : undefined, children: [_jsx("button", { "data-slot": "dropdown-button-action", type: "button", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
|
|
23
41
|
e.stopPropagation();
|
|
24
42
|
onPrimaryAction();
|
|
25
43
|
}, onKeyDown: (e) => {
|
|
26
44
|
if (e.key === "Enter" || e.key === " ")
|
|
27
45
|
e.stopPropagation();
|
|
28
46
|
}, disabled: disabled, className: cn(dropdownButtonActionClasses), children: _jsx("span", { children: displayLabel }) }), _jsx("div", { "data-slot": "dropdown-button-trigger", "aria-hidden": "true", className: cn(dropdownButtonTriggerClasses, isOpen &&
|
|
29
|
-
"bg-[var(--color-semantic-dropdown-btn-trigger-open-bg)] hover:bg-[var(--color-semantic-dropdown-btn-trigger-open-bg)]"), children: _jsx(ChevronDown, { className: cn(dropdownButtonChevronClasses, isOpen && "rotate-180") }) })] }) }), _jsx(DropdownMenuPrimitive.Portal, { children: _jsxs(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-button-content", side: "bottom", align: "start", sideOffset: 0, avoidCollisions:
|
|
47
|
+
"bg-[var(--color-semantic-dropdown-btn-trigger-open-bg)] hover:bg-[var(--color-semantic-dropdown-btn-trigger-open-bg)]"), children: _jsx(ChevronDown, { className: cn(dropdownButtonChevronClasses, isOpen && "rotate-180") }) })] }) }), _jsx(DropdownMenuPrimitive.Portal, { container: container, children: _jsxs(DropdownMenuPrimitive.Content, { ref: contentCallbackRef, "data-slot": "dropdown-button-content", side: "bottom", align: "start", sideOffset: 0, avoidCollisions: avoidCollisions, className: cn(dropdownButtonMenuContentClasses), children: [items.map((item) => (_jsxs(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-button-item", disabled: item.isActive, onSelect: item.isActive ? undefined : () => {
|
|
30
48
|
setDisplayLabel(item.label);
|
|
31
49
|
onItemSelect?.(item);
|
|
32
50
|
item.onSelect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,qBAAqB,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAKrC,OAAO,EACL,2BAA2B,EAC3B,gCAAgC,EAChC,4BAA4B,EAC5B,8BAA8B,EAC9B,gCAAgC,EAChC,6BAA6B,EAC7B,kCAAkC,EAClC,iCAAiC,EACjC,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,GAC7B,MAAM,8BAA8B,CAAC;AAEtC,SAAS,cAAc,CAAC,EACtB,KAAK,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,IAAI,EAAE,QAAQ,EACd,WAAW,GAAG,KAAK,EACnB,YAAY,EACZ,SAAS,GACW;IACpB,8EAA8E;IAC9E,oEAAoE;IACpE,MAAM,YAAY,GAAG,QAAQ,KAAK,SAAS,CAAC;IAC5C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IACpE,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC;IAEtD,0EAA0E;IAC1E,+CAA+C;IAC/C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5D,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,CAAC,IAAa,EAAE,EAAE;QAChB,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,IAAI,CAAC,CAAC;QACzC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B,CAAC;IAEF,OAAO,CACL,MAAC,qBAAqB,CAAC,IAAI,IACzB,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,EAC5C,YAAY,EAAE,gBAAgB,EAC9B,KAAK,EAAE,KAAK,aAOZ,KAAC,qBAAqB,CAAC,OAAO,IAAC,OAAO,QAAC,QAAQ,EAAE,QAAQ,YACvD,4BACY,iBAAiB,gBACf,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -49,6 +49,17 @@ export type DropdownButtonProps = {
|
|
|
49
49
|
defaultOpen?: boolean;
|
|
50
50
|
/** Called when the dropdown open state changes. */
|
|
51
51
|
onOpenChange?: (open: boolean) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Whether the dropdown content should avoid collisions with the viewport
|
|
54
|
+
* edges. Defaults to `true`. Set to `false` to disable repositioning.
|
|
55
|
+
*/
|
|
56
|
+
avoidCollisions?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* DOM element to render the dropdown portal into. Defaults to `document.body`.
|
|
59
|
+
* Pass a scroll container element (e.g. `document.getElementById('my-list')`)
|
|
60
|
+
* so the menu stays anchored when the page scrolls.
|
|
61
|
+
*/
|
|
62
|
+
container?: HTMLElement | null;
|
|
52
63
|
className?: string;
|
|
53
64
|
};
|
|
54
65
|
//# sourceMappingURL=DropdownButton.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACtC,oFAAoF;IACpF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,6EAA6E;IAC7E,WAAW,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACzC,6DAA6D;IAC7D,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
|
|
1
|
+
{"version":3,"file":"DropdownButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACtC,oFAAoF;IACpF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,6EAA6E;IAC7E,WAAW,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACzC,6DAA6D;IAC7D,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/** Outer unified pill container — shared border + bg;
|
|
2
|
-
export declare const dropdownButtonContainerClasses: readonly ["inline-flex items-center", "h-9 pl-3 pr-[3px] py-[3px]", "rounded-[9px]", "bg-[var(--color-semantic-button-primary-bg)]", "border border-[var(--color-semantic-button-primary-bg)]", "[transition:border-radius_300ms_ease]", "data-[
|
|
1
|
+
/** Outer unified pill container — shared border + bg; adjacent corners flatten to connect with the menu */
|
|
2
|
+
export declare const dropdownButtonContainerClasses: readonly ["inline-flex items-center", "h-9 pl-3 pr-[3px] py-[3px]", "rounded-[9px]", "bg-[var(--color-semantic-button-primary-bg)]", "border border-[var(--color-semantic-button-primary-bg)]", "[transition:border-radius_300ms_ease]", "data-[open-side=bottom]:rounded-b-none", "data-[open-side=top]:rounded-t-none", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"];
|
|
3
3
|
/** Left action button — fills remaining width inside the container */
|
|
4
4
|
export declare const dropdownButtonActionClasses: readonly ["inline-flex flex-1 items-center gap-2 h-full pr-3", "text-[var(--color-semantic-button-primary-fg)]", "text-sm font-medium leading-5 whitespace-nowrap", "cursor-pointer rounded-[6px] transition-colors", "hover:bg-white/15", "active:bg-white/20", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-semantic-button-primary-focus)] focus-visible:ring-offset-1", "disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0"];
|
|
5
5
|
/** Right chevron trigger — inset 30×30 blue button */
|
|
@@ -7,7 +7,7 @@ export declare const dropdownButtonTriggerClasses: readonly ["inline-flex items-
|
|
|
7
7
|
/** Chevron icon — rotates when dropdown is open */
|
|
8
8
|
export declare const dropdownButtonChevronClasses: readonly ["transition-transform duration-200"];
|
|
9
9
|
/** Attached dropdown panel */
|
|
10
|
-
export declare const dropdownButtonMenuContentClasses: readonly ["z-[80] overflow-hidden", "min-w-[var(--radix-popper-anchor-width)]", "p-3", "rounded-t-none rounded-b-[9px]", "bg-[var(--color-semantic-dropdown-btn-menu-bg)]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:slide-in-from-top-1 data-[state=closed]:slide-out-to-top-1", "duration-300"];
|
|
10
|
+
export declare const dropdownButtonMenuContentClasses: readonly ["z-[80] overflow-hidden", "min-w-[var(--radix-popper-anchor-width)]", "p-3", "data-[side=bottom]:rounded-t-none data-[side=bottom]:rounded-b-[9px]", "data-[side=top]:rounded-b-none data-[side=top]:rounded-t-[9px]", "bg-[var(--color-semantic-dropdown-btn-menu-bg)]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[side=bottom]:data-[state=open]:slide-in-from-top-1 data-[side=bottom]:data-[state=closed]:slide-out-to-top-1", "data-[side=top]:data-[state=open]:slide-in-from-bottom-1 data-[side=top]:data-[state=closed]:slide-out-to-bottom-1", "duration-300"];
|
|
11
11
|
/** Individual dropdown item */
|
|
12
12
|
export declare const dropdownButtonMenuItemClasses: readonly ["relative flex cursor-default select-none items-center gap-2", "h-8 rounded-lg px-3 text-sm font-medium outline-hidden overflow-hidden", "text-[var(--color-semantic-dropdown-btn-menu-fg)]", "focus:bg-[var(--color-semantic-dropdown-btn-menu-item-hover-bg)]", "data-[highlighted]:bg-[var(--color-semantic-dropdown-btn-menu-item-hover-bg)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-40"];
|
|
13
13
|
/** "Active" label badge on the current item */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.variants.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.variants.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"DropdownButton.variants.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.variants.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,eAAO,MAAM,8BAA8B,uYAcjC,CAAC;AAEX,sEAAsE;AACtE,eAAO,MAAM,2BAA2B,0hBAe9B,CAAC;AAEX,sDAAsD;AACtD,eAAO,MAAM,4BAA4B,8hBAa/B,CAAC;AAEX,mDAAmD;AACnD,eAAO,MAAM,4BAA4B,gDAE/B,CAAC;AAEX,8BAA8B;AAC9B,eAAO,MAAM,gCAAgC,+oBAiBnC,CAAC;AAEX,+BAA+B;AAC/B,eAAO,MAAM,6BAA6B,gaAOhC,CAAC;AAEX,+CAA+C;AAC/C,eAAO,MAAM,gCAAgC,8CAEnC,CAAC;AAEX,+CAA+C;AAC/C,eAAO,MAAM,kCAAkC,iFAErC,CAAC;AAEX,eAAO,MAAM,iCAAiC,0EAEpC,CAAC;AAEX,eAAO,MAAM,iCAAiC,oEAEpC,CAAC;AAEX,eAAO,MAAM,iCAAiC,oEAEpC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** Outer unified pill container — shared border + bg;
|
|
1
|
+
/** Outer unified pill container — shared border + bg; adjacent corners flatten to connect with the menu */
|
|
2
2
|
export const dropdownButtonContainerClasses = [
|
|
3
3
|
// Layout
|
|
4
4
|
"inline-flex items-center",
|
|
@@ -7,9 +7,10 @@ export const dropdownButtonContainerClasses = [
|
|
|
7
7
|
// Colors
|
|
8
8
|
"bg-[var(--color-semantic-button-primary-bg)]",
|
|
9
9
|
"border border-[var(--color-semantic-button-primary-bg)]",
|
|
10
|
-
// Open state: flatten
|
|
10
|
+
// Open state: flatten the edge that connects to the menu (top or bottom depending on which way it opens)
|
|
11
11
|
"[transition:border-radius_300ms_ease]",
|
|
12
|
-
"data-[
|
|
12
|
+
"data-[open-side=bottom]:rounded-b-none",
|
|
13
|
+
"data-[open-side=top]:rounded-t-none",
|
|
13
14
|
// Disabled
|
|
14
15
|
"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
|
|
15
16
|
];
|
|
@@ -55,14 +56,17 @@ export const dropdownButtonMenuContentClasses = [
|
|
|
55
56
|
"z-[80] overflow-hidden",
|
|
56
57
|
"min-w-[var(--radix-popper-anchor-width)]",
|
|
57
58
|
"p-3",
|
|
58
|
-
// Shape:
|
|
59
|
-
"
|
|
59
|
+
// Shape: the edge that touches the button is flat; the far edge is rounded.
|
|
60
|
+
// Radix sets data-side="bottom" (opens down) or data-side="top" (opens up).
|
|
61
|
+
"data-[side=bottom]:rounded-t-none data-[side=bottom]:rounded-b-[9px]",
|
|
62
|
+
"data-[side=top]:rounded-b-none data-[side=top]:rounded-t-[9px]",
|
|
60
63
|
// Colors
|
|
61
64
|
"bg-[var(--color-semantic-dropdown-btn-menu-bg)]",
|
|
62
|
-
// Animation — slides
|
|
65
|
+
// Animation — slides toward the button on close, away from it on open.
|
|
63
66
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
64
67
|
"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
|
|
65
|
-
"data-[state=open]:slide-in-from-top-1 data-[state=closed]:slide-out-to-top-1",
|
|
68
|
+
"data-[side=bottom]:data-[state=open]:slide-in-from-top-1 data-[side=bottom]:data-[state=closed]:slide-out-to-top-1",
|
|
69
|
+
"data-[side=top]:data-[state=open]:slide-in-from-bottom-1 data-[side=top]:data-[state=closed]:slide-out-to-bottom-1",
|
|
66
70
|
"duration-300",
|
|
67
71
|
];
|
|
68
72
|
/** Individual dropdown item */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownButton.variants.js","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.variants.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"DropdownButton.variants.js","sourceRoot":"","sources":["../../../src/components/DropdownButton/DropdownButton.variants.ts"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC5C,SAAS;IACT,0BAA0B;IAC1B,4BAA4B;IAC5B,eAAe;IACf,SAAS;IACT,8CAA8C;IAC9C,yDAAyD;IACzD,yGAAyG;IACzG,uCAAuC;IACvC,wCAAwC;IACxC,qCAAqC;IACrC,WAAW;IACX,0EAA0E;CAClE,CAAC;AAEX,sEAAsE;AACtE,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,SAAS;IACT,mDAAmD;IACnD,SAAS;IACT,gDAAgD;IAChD,aAAa;IACb,iDAAiD;IACjD,6FAA6F;IAC7F,gDAAgD;IAChD,mBAAmB;IACnB,oBAAoB;IACpB,6IAA6I;IAC7I,kDAAkD;IAClD,cAAc;IACd,mFAAmF;CAC3E,CAAC;AAEX,sDAAsD;AACtD,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,SAAS;IACT,yCAAyC;IACzC,oCAAoC;IACpC,kEAAkE;IAClE,oDAAoD;IACpD,gDAAgD;IAChD,SAAS;IACT,gEAAgE;IAChE,6IAA6I;IAC7I,kDAAkD;IAClD,cAAc;IACd,mFAAmF;CAC3E,CAAC;AAEX,mDAAmD;AACnD,MAAM,CAAC,MAAM,4BAA4B,GAAG;IAC1C,mCAAmC;CAC3B,CAAC;AAEX,8BAA8B;AAC9B,MAAM,CAAC,MAAM,gCAAgC,GAAG;IAC9C,uDAAuD;IACvD,wBAAwB;IACxB,0CAA0C;IAC1C,KAAK;IACL,4EAA4E;IAC5E,4EAA4E;IAC5E,sEAAsE;IACtE,gEAAgE;IAChE,SAAS;IACT,iDAAiD;IACjD,uEAAuE;IACvE,8DAA8D;IAC9D,4DAA4D;IAC5D,oHAAoH;IACpH,oHAAoH;IACpH,cAAc;CACN,CAAC;AAEX,+BAA+B;AAC/B,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,6DAA6D;IAC7D,wEAAwE;IACxE,mDAAmD;IACnD,kEAAkE;IAClE,+EAA+E;IAC/E,gEAAgE;CACxD,CAAC;AAEX,+CAA+C;AAC/C,MAAM,CAAC,MAAM,gCAAgC,GAAG;IAC9C,iCAAiC;CACzB,CAAC;AAEX,+CAA+C;AAC/C,MAAM,CAAC,MAAM,kCAAkC,GAAG;IAChD,oEAAoE;CAC5D,CAAC;AAEX,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,6DAA6D;CACrD,CAAC;AAEX,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,uDAAuD;CAC/C,CAAC;AAEX,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC/C,uDAAuD;CAC/C,CAAC"}
|