@evinvest/uikit 0.29.2 → 0.29.3
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/popover.js +4 -1
- package/dist/components/popover.js.map +1 -1
- package/dist/components/select.js +4 -1
- package/dist/components/select.js.map +1 -1
- package/dist/generated/select.js +1 -1
- package/dist/generated/select.js.map +1 -1
- package/dist/index.d.ts +6 -2
- package/package.json +1 -1
|
@@ -5,6 +5,7 @@ import { cn } from "../lib/cn.js";
|
|
|
5
5
|
import { useControllableState } from "../primitives/use-controllable-state.js";
|
|
6
6
|
import { useFloating } from "../primitives/use-floating.js";
|
|
7
7
|
import { DismissableLayerScope, useDismissableLayer } from "../primitives/dismissable-layer.js";
|
|
8
|
+
import { useFocusScope } from "../primitives/focus-scope.js";
|
|
8
9
|
import { usePresence } from "../primitives/presence.js";
|
|
9
10
|
import { mergeRefs } from "../primitives/merge-refs.js";
|
|
10
11
|
import { Portal } from "../primitives/portal.js";
|
|
@@ -59,6 +60,7 @@ function PopoverContent({
|
|
|
59
60
|
side: sideProp = "bottom",
|
|
60
61
|
align = "center",
|
|
61
62
|
sideOffset = 4,
|
|
63
|
+
initialFocus = "first",
|
|
62
64
|
children,
|
|
63
65
|
...props
|
|
64
66
|
}) {
|
|
@@ -71,6 +73,7 @@ function PopoverContent({
|
|
|
71
73
|
align,
|
|
72
74
|
offset: sideOffset
|
|
73
75
|
});
|
|
76
|
+
const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: anchorRef });
|
|
74
77
|
const dismissRef = useDismissableLayer({
|
|
75
78
|
enabled: open,
|
|
76
79
|
onDismiss: () => setOpen(false),
|
|
@@ -84,7 +87,7 @@ function PopoverContent({
|
|
|
84
87
|
"data-state": open ? "open" : "closed",
|
|
85
88
|
"data-side": side,
|
|
86
89
|
"data-align": align,
|
|
87
|
-
ref: mergeRefs(floatingRef, dismissRef, presRef),
|
|
90
|
+
ref: mergeRefs(floatingRef, focusRef, dismissRef, presRef),
|
|
88
91
|
style,
|
|
89
92
|
className: cn(
|
|
90
93
|
POPOVER_CONTENT,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport { POPOVER_CONTENT } from \"../generated/popover\";\n\ninterface PopoverContextValue {\n open: boolean;\n setOpen: (next: boolean) => void;\n anchorRef: React.RefObject<HTMLElement | null>;\n}\n\nconst PopoverContext = React.createContext<PopoverContextValue | null>(null);\n\nfunction usePopover(): PopoverContextValue {\n const ctx = React.useContext(PopoverContext);\n if (!ctx) throw new Error(\"Popover parts must be used within <Popover>\");\n return ctx;\n}\n\nexport interface PopoverProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nexport function Popover({ open, defaultOpen = false, onOpenChange, children }: PopoverProps) {\n const [isOpen, setOpen] = useControllableState<boolean>({\n ...(open !== undefined ? { value: open } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const anchorRef = React.useRef<HTMLElement | null>(null);\n return (\n <PopoverContext.Provider value={{ open: isOpen, setOpen, anchorRef }}>\n {children}\n </PopoverContext.Provider>\n );\n}\n\nexport interface PopoverTriggerProps extends React.ComponentProps<\"button\"> {\n asChild?: boolean;\n}\n\nexport function PopoverTrigger({ asChild = false, onClick, ...props }: PopoverTriggerProps) {\n const { open, setOpen, anchorRef } = usePopover();\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n data-slot=\"popover-trigger\"\n aria-expanded={open}\n ref={anchorRef as React.Ref<never>}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n setOpen(!open);\n }}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport interface PopoverAnchorProps extends React.ComponentProps<\"div\"> {\n asChild?: boolean;\n}\n\nexport function PopoverAnchor({ asChild = false, ...props }: PopoverAnchorProps) {\n const { anchorRef } = usePopover();\n const Comp = asChild ? Slot : \"div\";\n return (\n <Comp\n data-slot=\"popover-anchor\"\n ref={anchorRef as React.Ref<never>}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport interface PopoverContentProps extends React.ComponentProps<\"div\"> {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n sideOffset?: number;\n}\n\nexport function PopoverContent({\n className,\n side: sideProp = \"bottom\",\n align = \"center\",\n sideOffset = 4,\n children,\n ...props\n}: PopoverContentProps) {\n const { open, setOpen, anchorRef } = usePopover();\n const { isPresent, ref: presRef } = usePresence(open);\n const { floatingRef, style, side } = useFloating({\n anchorRef,\n open,\n side: sideProp,\n align,\n offset: sideOffset,\n });\n const dismissRef = useDismissableLayer({\n enabled: open,\n onDismiss: () => setOpen(false),\n exclude: [anchorRef],\n });\n if (!isPresent) return null;\n return (\n <Portal>\n <div\n data-slot=\"popover-content\"\n data-state={open ? \"open\" : \"closed\"}\n data-side={side}\n data-align={align}\n ref={mergeRefs(floatingRef, dismissRef, presRef)}\n style={style}\n className={cn(\n POPOVER_CONTENT,\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n </div>\n </Portal>\n );\n}\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { type InitialFocus, useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport { POPOVER_CONTENT } from \"../generated/popover\";\n\ninterface PopoverContextValue {\n open: boolean;\n setOpen: (next: boolean) => void;\n anchorRef: React.RefObject<HTMLElement | null>;\n}\n\nconst PopoverContext = React.createContext<PopoverContextValue | null>(null);\n\nfunction usePopover(): PopoverContextValue {\n const ctx = React.useContext(PopoverContext);\n if (!ctx) throw new Error(\"Popover parts must be used within <Popover>\");\n return ctx;\n}\n\nexport interface PopoverProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nexport function Popover({ open, defaultOpen = false, onOpenChange, children }: PopoverProps) {\n const [isOpen, setOpen] = useControllableState<boolean>({\n ...(open !== undefined ? { value: open } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const anchorRef = React.useRef<HTMLElement | null>(null);\n return (\n <PopoverContext.Provider value={{ open: isOpen, setOpen, anchorRef }}>\n {children}\n </PopoverContext.Provider>\n );\n}\n\nexport interface PopoverTriggerProps extends React.ComponentProps<\"button\"> {\n asChild?: boolean;\n}\n\nexport function PopoverTrigger({ asChild = false, onClick, ...props }: PopoverTriggerProps) {\n const { open, setOpen, anchorRef } = usePopover();\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n data-slot=\"popover-trigger\"\n aria-expanded={open}\n ref={anchorRef as React.Ref<never>}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n setOpen(!open);\n }}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport interface PopoverAnchorProps extends React.ComponentProps<\"div\"> {\n asChild?: boolean;\n}\n\nexport function PopoverAnchor({ asChild = false, ...props }: PopoverAnchorProps) {\n const { anchorRef } = usePopover();\n const Comp = asChild ? Slot : \"div\";\n return (\n <Comp\n data-slot=\"popover-anchor\"\n ref={anchorRef as React.Ref<never>}\n {...(props as Record<string, unknown>)}\n />\n );\n}\n\nexport interface PopoverContentProps extends React.ComponentProps<\"div\"> {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n sideOffset?: number;\n /** Where focus lands on open. Default `first` (e.g. a `Command` search input). */\n initialFocus?: InitialFocus;\n}\n\nexport function PopoverContent({\n className,\n side: sideProp = \"bottom\",\n align = \"center\",\n sideOffset = 4,\n initialFocus = \"first\",\n children,\n ...props\n}: PopoverContentProps) {\n const { open, setOpen, anchorRef } = usePopover();\n const { isPresent, ref: presRef } = usePresence(open);\n const { floatingRef, style, side } = useFloating({\n anchorRef,\n open,\n side: sideProp,\n align,\n offset: sideOffset,\n });\n const focusRef = useFocusScope(open, { initialFocus, returnFocusTo: anchorRef });\n const dismissRef = useDismissableLayer({\n enabled: open,\n onDismiss: () => setOpen(false),\n exclude: [anchorRef],\n });\n if (!isPresent) return null;\n return (\n <Portal>\n <div\n data-slot=\"popover-content\"\n data-state={open ? \"open\" : \"closed\"}\n data-side={side}\n data-align={align}\n ref={mergeRefs(floatingRef, focusRef, dismissRef, presRef)}\n style={style}\n className={cn(\n POPOVER_CONTENT,\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n </div>\n </Portal>\n );\n}\n"],"mappings":";AA2CI;AAzCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,2BAA2B;AAC3D,SAA4B,qBAAqB;AACjD,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAQhC,MAAM,iBAAiB,MAAM,cAA0C,IAAI;AAE3E,SAAS,aAAkC;AACzC,QAAM,MAAM,MAAM,WAAW,cAAc;AAC3C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,6CAA6C;AACvE,SAAO;AACT;AASO,SAAS,QAAQ,EAAE,MAAM,cAAc,OAAO,cAAc,SAAS,GAAiB;AAC3F,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,YAAY,MAAM,OAA2B,IAAI;AACvD,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,GAChE,UACH;AAEJ;AAMO,SAAS,eAAe,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,GAAwB;AAC1F,QAAM,EAAE,MAAM,SAAS,UAAU,IAAI,WAAW;AAChD,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe;AAAA,MACf,KAAK;AAAA,MACL,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,CAAC,IAAI;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAMO,SAAS,cAAc,EAAE,UAAU,OAAO,GAAG,MAAM,GAAuB;AAC/E,QAAM,EAAE,UAAU,IAAI,WAAW;AACjC,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,KAAK;AAAA,MACJ,GAAI;AAAA;AAAA,EACP;AAEJ;AAUO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,MAAM,WAAW;AAAA,EACjB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,MAAM,SAAS,UAAU,IAAI,WAAW;AAChD,QAAM,EAAE,WAAW,KAAK,QAAQ,IAAI,YAAY,IAAI;AACpD,QAAM,EAAE,aAAa,OAAO,KAAK,IAAI,YAAY;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,QAAQ;AAAA,EACV,CAAC;AACD,QAAM,WAAW,cAAc,MAAM,EAAE,cAAc,eAAe,UAAU,CAAC;AAC/E,QAAM,aAAa,oBAAoB;AAAA,IACrC,SAAS;AAAA,IACT,WAAW,MAAM,QAAQ,KAAK;AAAA,IAC9B,SAAS,CAAC,SAAS;AAAA,EACrB,CAAC;AACD,MAAI,CAAC,UAAW,QAAO;AACvB,SACE,oBAAC,UACC;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,SAAS;AAAA,MAC5B,aAAW;AAAA,MACX,cAAY;AAAA,MACZ,KAAK,UAAU,aAAa,UAAU,YAAY,OAAO;AAAA,MACzD;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI;AAAA,MAEL,8BAAC,yBAAsB,OAAO,YAAa,UAAS;AAAA;AAAA,EACtD,GACF;AAEJ;","names":[]}
|
|
@@ -23,6 +23,7 @@ function useSelect() {
|
|
|
23
23
|
function Select({
|
|
24
24
|
value,
|
|
25
25
|
defaultValue = "",
|
|
26
|
+
resetValue,
|
|
26
27
|
onValueChange,
|
|
27
28
|
open,
|
|
28
29
|
defaultOpen = false,
|
|
@@ -66,6 +67,7 @@ function Select({
|
|
|
66
67
|
{
|
|
67
68
|
value: {
|
|
68
69
|
value: currentValue,
|
|
70
|
+
resetValue,
|
|
69
71
|
setValue,
|
|
70
72
|
open: isOpen,
|
|
71
73
|
setOpen,
|
|
@@ -244,7 +246,7 @@ function listName(trigger) {
|
|
|
244
246
|
return text ? { "aria-label": text } : {};
|
|
245
247
|
}
|
|
246
248
|
function SelectItem({ className, value, textValue, children, ...props }) {
|
|
247
|
-
const { value: selectedValue, setValue, close, registerLabel } = useSelect();
|
|
249
|
+
const { value: selectedValue, resetValue, setValue, close, registerLabel } = useSelect();
|
|
248
250
|
const selected = selectedValue === value;
|
|
249
251
|
const label = itemLabel(value, textValue, children);
|
|
250
252
|
React.useEffect(() => registerLabel(value, label), [registerLabel, value, label]);
|
|
@@ -258,6 +260,7 @@ function SelectItem({ className, value, textValue, children, ...props }) {
|
|
|
258
260
|
role: "option",
|
|
259
261
|
"data-slot": "select-item",
|
|
260
262
|
"aria-selected": selected,
|
|
263
|
+
...resetValue === value ? { "data-reset": "" } : {},
|
|
261
264
|
tabIndex: -1,
|
|
262
265
|
onClick: choose,
|
|
263
266
|
onKeyDown: (e) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SELECT_CONTENT_BOUNDS, SELECT_ITEM, selectTriggerSizeClasses, type SelectTriggerSize } from \"../generated/select\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { walkElements } from \"../primitives/walk-elements\";\nimport { markLabelable } from \"../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"./select-chevron\";\nimport { landOnChosen, tabFromTrigger, useListboxKeys } from \"./select-listbox\";\n\nexport type { SelectTriggerSize };\n\ninterface SelectContextValue {\n value: string;\n setValue: (next: string) => void;\n open: boolean;\n setOpen: (next: boolean) => void;\n /**\n * Closes the list. `restoreFocus`: hand focus back to the trigger — after a\n * key or a choice, never after a click elsewhere, where it would land on the\n * trigger for a moment and fire its blur (a field's validation) on the way out.\n */\n close: (restoreFocus: boolean) => void;\n /** Set by `close(true)`, read once the list is gone. */\n restoreFocusRef: React.RefObject<boolean>;\n anchorRef: React.RefObject<HTMLElement | null>;\n /** The listbox's id, for the trigger's `aria-controls`. */\n contentId: string;\n /** What `SelectValue` shows for a value: the matching `SelectItem`'s children. */\n labelOf: (value: string) => string;\n registerLabel: (value: string, label: string) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null);\n\nfunction useSelect(): SelectContextValue {\n const ctx = React.useContext(SelectContext);\n if (!ctx) throw new Error(\"Select parts must be used within <Select>\");\n return ctx;\n}\n\nexport interface SelectProps {\n value?: string;\n defaultValue?: string;\n onValueChange?: (value: string) => void;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nexport function Select({\n value,\n defaultValue = \"\",\n onValueChange,\n open,\n defaultOpen = false,\n onOpenChange,\n children,\n}: SelectProps) {\n const [currentValue, setValue] = useControllableState<string>({\n ...(value !== undefined ? { value } : {}),\n defaultValue,\n ...(onValueChange ? { onChange: onValueChange } : {}),\n });\n const [isOpen, setOpen] = useControllableState<boolean>({\n ...(open !== undefined ? { value: open } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const anchorRef = React.useRef<HTMLElement | null>(null);\n const contentId = React.useId();\n const restoreFocusRef = React.useRef(false);\n const close = React.useCallback(\n (restoreFocus: boolean) => {\n restoreFocusRef.current = restoreFocus;\n setOpen(false);\n },\n [setOpen],\n );\n // The items live in a closed popover, so they are not mounted when the\n // trigger first renders — on the server least of all. Their labels are read\n // off the element tree instead; items hidden behind a component of the\n // caller's register once they have mounted (i.e. after the first open), and\n // a label learnt that way re-renders the trigger once.\n const declared = React.useMemo(() => collectItemLabels(children), [children]);\n const mounted = React.useRef(new Map<string, string>());\n const [, bump] = React.useReducer((n: number) => n + 1, 0);\n const labelOf = (v: string) => declared.get(v) ?? mounted.current.get(v) ?? v;\n const registerLabel = React.useCallback(\n (v: string, label: string) => {\n if (mounted.current.get(v) === label) return;\n mounted.current.set(v, label);\n if (!declared.has(v)) bump();\n },\n [declared],\n );\n return (\n <SelectContext.Provider\n value={{\n value: currentValue,\n setValue,\n open: isOpen,\n setOpen,\n close,\n restoreFocusRef,\n anchorRef,\n contentId,\n labelOf,\n registerLabel,\n }}\n >\n {children}\n </SelectContext.Provider>\n );\n}\n\nfunction collectItemLabels(node: React.ReactNode): Map<string, string> {\n const labels = new Map<string, string>();\n walkElements(node, (element) => {\n if (element.type !== SelectItem) return true;\n const { value, textValue, children } = element.props as Partial<SelectItemProps>;\n if (typeof value === \"string\") labels.set(value, itemLabel(value, textValue, children));\n return false;\n });\n return labels;\n}\n\n/**\n * What the trigger shows for an item: its `textValue`, else the text of its\n * children. Text, not the children themselves — an item's markup rendered a\n * second time in the trigger would duplicate any id inside it.\n */\nfunction itemLabel(value: string, textValue: string | undefined, children: unknown): string {\n return textValue ?? (textOf(children).trim() || value);\n}\n\nfunction textOf(node: unknown): string {\n if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n if (Array.isArray(node)) return node.map(textOf).join(\"\");\n if (React.isValidElement<{ children?: unknown }>(node)) return textOf(node.props.children);\n return \"\";\n}\n\nexport interface SelectTriggerProps extends React.ComponentProps<\"button\"> {\n size?: SelectTriggerSize;\n}\n\nexport function SelectTrigger({\n className,\n size = \"md\",\n onClick,\n onKeyDown,\n children,\n id,\n ...props\n}: SelectTriggerProps) {\n const { open, setOpen, close, anchorRef, contentId } = useSelect();\n return (\n <button\n type=\"button\"\n role=\"combobox\"\n id={useFieldControlId(id)}\n data-slot=\"select-trigger\"\n data-size={size}\n data-state={open ? \"open\" : \"closed\"}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? contentId : undefined}\n ref={anchorRef as React.Ref<HTMLButtonElement>}\n onClick={(e) => {\n onClick?.(e);\n if (open) close(true);\n else setOpen(true);\n }}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n // A native select opens on the arrows too; Enter and Space already click the button.\n if (!e.defaultPrevented && !open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\")) {\n e.preventDefault();\n setOpen(true);\n }\n }}\n className={cn(\n // The placeholder mark is on `SelectValue`'s span, not on this button.\n \"border-input [&_[data-placeholder]]:text-ink-soft [&_svg:not([class*='text-'])]:text-ink-soft focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error flex w-fit items-center justify-between gap-2 rounded-[var(--control-radius)] border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n selectTriggerSizeClasses[size],\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n {children}\n <SelectChevron className=\"size-4 opacity-50\" />\n </button>\n );\n}\n\nmarkLabelable(SelectTrigger);\n\nexport interface SelectValueProps extends React.ComponentProps<\"span\"> {\n placeholder?: string;\n}\n\n/**\n * The chosen option's label — the `textValue` of the `SelectItem` whose `value`\n * matches, else the text of its children — or `placeholder` while nothing is\n * chosen. `children`, when given,\n * replace the label outright.\n */\nexport function SelectValue({ className, placeholder, children, ...props }: SelectValueProps) {\n const { value, labelOf } = useSelect();\n const isEmpty = value === \"\";\n return (\n <span\n data-slot=\"select-value\"\n {...(isEmpty ? { \"data-placeholder\": \"true\" } : {})}\n className={className}\n {...(props as Record<string, unknown>)}\n >\n {isEmpty ? placeholder : (children ?? labelOf(value))}\n </span>\n );\n}\n\nexport interface SelectContentProps extends React.ComponentProps<\"div\"> {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n sideOffset?: number;\n}\n\nexport function SelectContent({\n className,\n side: sideProp = \"bottom\",\n align = \"start\",\n sideOffset = 4,\n children,\n ...props\n}: SelectContentProps) {\n const { open, setOpen, close, restoreFocusRef, anchorRef, contentId } = useSelect();\n const { isPresent, ref: presRef } = usePresence(open);\n const listRef = React.useRef<HTMLDivElement | null>(null);\n const [name, setName] = React.useState<{ \"aria-labelledby\"?: string; \"aria-label\"?: string }>({});\n // Before placement measures the list: the trigger's width as\n // `--select-trigger-width` (the floor of `SELECT_CONTENT_BOUNDS`), written to\n // the element like the floating offset, and the list's name — the trigger's\n // label, as the combobox is named.\n React.useLayoutEffect(() => {\n const anchor = anchorRef.current;\n if (!open || !(anchor instanceof HTMLElement)) return;\n listRef.current?.style.setProperty(\"--select-trigger-width\", `${anchor.offsetWidth}px`);\n setName(listName(anchor));\n }, [open, anchorRef]);\n const { floatingRef, style, side } = useFloating({\n anchorRef,\n open,\n side: sideProp,\n align,\n offset: sideOffset,\n });\n const dismissRef = useDismissableLayer({\n enabled: open,\n onDismiss: (event) => close(event.type === \"keydown\"),\n exclude: [anchorRef],\n });\n const onListKey = useListboxKeys(listRef);\n React.useEffect(() => {\n if (open) landOnChosen(listRef.current);\n }, [open]);\n React.useEffect(() => {\n if (open || !restoreFocusRef.current) return;\n restoreFocusRef.current = false;\n anchorRef.current?.focus();\n }, [open, anchorRef, restoreFocusRef]);\n if (!isPresent) return null;\n return (\n <Portal>\n <div\n role=\"listbox\"\n id={contentId}\n {...name}\n data-slot=\"select-content\"\n data-state={open ? \"open\" : \"closed\"}\n data-side={side}\n ref={mergeRefs(floatingRef, dismissRef, presRef, listRef)}\n style={style}\n tabIndex={-1}\n onKeyDown={(e) => {\n if (onListKey(e)) return;\n if (e.key === \"Escape\") {\n // The list's Escape is the list's: a consumer's `onKeyDown` around\n // it hears the key through React's tree, portal or not.\n e.stopPropagation();\n close(true);\n } else if (e.key === \"Tab\") {\n tabFromTrigger(e, anchorRef.current);\n setOpen(false);\n }\n }}\n className={cn(\n \"bg-popover text-ink data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-md\",\n SELECT_CONTENT_BOUNDS,\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n <div className=\"p-1\"><DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope></div>\n </div>\n </Portal>\n );\n}\n\n/** The trigger's own name for the list: its `aria-labelledby`, else its `<label>`. */\nfunction listName(trigger: HTMLElement): { \"aria-labelledby\"?: string; \"aria-label\"?: string } {\n const by = trigger.getAttribute(\"aria-labelledby\");\n if (by) return { \"aria-labelledby\": by };\n const label = (trigger as HTMLButtonElement).labels?.[0];\n if (label?.id) return { \"aria-labelledby\": label.id };\n const text = label?.textContent?.trim() || trigger.getAttribute(\"aria-label\");\n return text ? { \"aria-label\": text } : {};\n}\n\nexport interface SelectItemProps extends React.ComponentProps<\"div\"> {\n value: string;\n /** What the trigger shows once this item is chosen; defaults to the text of `children`. */\n textValue?: string;\n}\n\nexport function SelectItem({ className, value, textValue, children, ...props }: SelectItemProps) {\n const { value: selectedValue, setValue, close, registerLabel } = useSelect();\n const selected = selectedValue === value;\n const label = itemLabel(value, textValue, children);\n React.useEffect(() => registerLabel(value, label), [registerLabel, value, label]);\n const choose = () => {\n setValue(value);\n close(true);\n };\n return (\n <div\n role=\"option\"\n data-slot=\"select-item\"\n aria-selected={selected}\n tabIndex={-1}\n onClick={choose}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n choose();\n }\n }}\n className={cn(SELECT_ITEM, className)}\n {...(props as Record<string, unknown>)}\n >\n {selected ? (\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"size-4\"\n aria-hidden=\"true\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n </span>\n ) : null}\n <span>{children}</span>\n </div>\n );\n}\n\nexport function SelectGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return <div role=\"group\" data-slot=\"select-group\" className={className} {...props} />;\n}\n\nexport function SelectLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"select-label\"\n className={cn(\"text-ink-soft px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nexport function SelectSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"select-separator\"\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SELECT_CONTENT_BOUNDS, SELECT_ITEM, selectTriggerSizeClasses, type SelectTriggerSize } from \"../generated/select\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFloating } from \"../primitives/use-floating\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { walkElements } from \"../primitives/walk-elements\";\nimport { markLabelable } from \"../primitives/labelable\";\nimport { useFieldControlId } from \"./field-context\";\nimport { SelectChevron } from \"./select-chevron\";\nimport { landOnChosen, tabFromTrigger, useListboxKeys } from \"./select-listbox\";\n\nexport type { SelectTriggerSize };\n\ninterface SelectContextValue {\n value: string;\n resetValue: string | undefined;\n setValue: (next: string) => void;\n open: boolean;\n setOpen: (next: boolean) => void;\n /**\n * Closes the list. `restoreFocus`: hand focus back to the trigger — after a\n * key or a choice, never after a click elsewhere, where it would land on the\n * trigger for a moment and fire its blur (a field's validation) on the way out.\n */\n close: (restoreFocus: boolean) => void;\n /** Set by `close(true)`, read once the list is gone. */\n restoreFocusRef: React.RefObject<boolean>;\n anchorRef: React.RefObject<HTMLElement | null>;\n /** The listbox's id, for the trigger's `aria-controls`. */\n contentId: string;\n /** What `SelectValue` shows for a value: the matching `SelectItem`'s children. */\n labelOf: (value: string) => string;\n registerLabel: (value: string, label: string) => void;\n}\n\nconst SelectContext = React.createContext<SelectContextValue | null>(null);\n\nfunction useSelect(): SelectContextValue {\n const ctx = React.useContext(SelectContext);\n if (!ctx) throw new Error(\"Select parts must be used within <Select>\");\n return ctx;\n}\n\nexport interface SelectProps {\n value?: string;\n defaultValue?: string;\n /** What a reset would put back: its option is marked, beneath the chosen one's mark. */\n resetValue?: string;\n onValueChange?: (value: string) => void;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nexport function Select({\n value,\n defaultValue = \"\",\n resetValue,\n onValueChange,\n open,\n defaultOpen = false,\n onOpenChange,\n children,\n}: SelectProps) {\n const [currentValue, setValue] = useControllableState<string>({\n ...(value !== undefined ? { value } : {}),\n defaultValue,\n ...(onValueChange ? { onChange: onValueChange } : {}),\n });\n const [isOpen, setOpen] = useControllableState<boolean>({\n ...(open !== undefined ? { value: open } : {}),\n defaultValue: defaultOpen,\n ...(onOpenChange ? { onChange: onOpenChange } : {}),\n });\n const anchorRef = React.useRef<HTMLElement | null>(null);\n const contentId = React.useId();\n const restoreFocusRef = React.useRef(false);\n const close = React.useCallback(\n (restoreFocus: boolean) => {\n restoreFocusRef.current = restoreFocus;\n setOpen(false);\n },\n [setOpen],\n );\n // The items live in a closed popover, so they are not mounted when the\n // trigger first renders — on the server least of all. Their labels are read\n // off the element tree instead; items hidden behind a component of the\n // caller's register once they have mounted (i.e. after the first open), and\n // a label learnt that way re-renders the trigger once.\n const declared = React.useMemo(() => collectItemLabels(children), [children]);\n const mounted = React.useRef(new Map<string, string>());\n const [, bump] = React.useReducer((n: number) => n + 1, 0);\n const labelOf = (v: string) => declared.get(v) ?? mounted.current.get(v) ?? v;\n const registerLabel = React.useCallback(\n (v: string, label: string) => {\n if (mounted.current.get(v) === label) return;\n mounted.current.set(v, label);\n if (!declared.has(v)) bump();\n },\n [declared],\n );\n return (\n <SelectContext.Provider\n value={{\n value: currentValue,\n resetValue,\n setValue,\n open: isOpen,\n setOpen,\n close,\n restoreFocusRef,\n anchorRef,\n contentId,\n labelOf,\n registerLabel,\n }}\n >\n {children}\n </SelectContext.Provider>\n );\n}\n\nfunction collectItemLabels(node: React.ReactNode): Map<string, string> {\n const labels = new Map<string, string>();\n walkElements(node, (element) => {\n if (element.type !== SelectItem) return true;\n const { value, textValue, children } = element.props as Partial<SelectItemProps>;\n if (typeof value === \"string\") labels.set(value, itemLabel(value, textValue, children));\n return false;\n });\n return labels;\n}\n\n/**\n * What the trigger shows for an item: its `textValue`, else the text of its\n * children. Text, not the children themselves — an item's markup rendered a\n * second time in the trigger would duplicate any id inside it.\n */\nfunction itemLabel(value: string, textValue: string | undefined, children: unknown): string {\n return textValue ?? (textOf(children).trim() || value);\n}\n\nfunction textOf(node: unknown): string {\n if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n if (Array.isArray(node)) return node.map(textOf).join(\"\");\n if (React.isValidElement<{ children?: unknown }>(node)) return textOf(node.props.children);\n return \"\";\n}\n\nexport interface SelectTriggerProps extends React.ComponentProps<\"button\"> {\n size?: SelectTriggerSize;\n}\n\nexport function SelectTrigger({\n className,\n size = \"md\",\n onClick,\n onKeyDown,\n children,\n id,\n ...props\n}: SelectTriggerProps) {\n const { open, setOpen, close, anchorRef, contentId } = useSelect();\n return (\n <button\n type=\"button\"\n role=\"combobox\"\n id={useFieldControlId(id)}\n data-slot=\"select-trigger\"\n data-size={size}\n data-state={open ? \"open\" : \"closed\"}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={open ? contentId : undefined}\n ref={anchorRef as React.Ref<HTMLButtonElement>}\n onClick={(e) => {\n onClick?.(e);\n if (open) close(true);\n else setOpen(true);\n }}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n // A native select opens on the arrows too; Enter and Space already click the button.\n if (!e.defaultPrevented && !open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\")) {\n e.preventDefault();\n setOpen(true);\n }\n }}\n className={cn(\n // The placeholder mark is on `SelectValue`'s span, not on this button.\n \"border-input [&_[data-placeholder]]:text-ink-soft [&_svg:not([class*='text-'])]:text-ink-soft focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error flex w-fit items-center justify-between gap-2 rounded-[var(--control-radius)] border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n selectTriggerSizeClasses[size],\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n {children}\n <SelectChevron className=\"size-4 opacity-50\" />\n </button>\n );\n}\n\nmarkLabelable(SelectTrigger);\n\nexport interface SelectValueProps extends React.ComponentProps<\"span\"> {\n placeholder?: string;\n}\n\n/**\n * The chosen option's label — the `textValue` of the `SelectItem` whose `value`\n * matches, else the text of its children — or `placeholder` while nothing is\n * chosen. `children`, when given,\n * replace the label outright.\n */\nexport function SelectValue({ className, placeholder, children, ...props }: SelectValueProps) {\n const { value, labelOf } = useSelect();\n const isEmpty = value === \"\";\n return (\n <span\n data-slot=\"select-value\"\n {...(isEmpty ? { \"data-placeholder\": \"true\" } : {})}\n className={className}\n {...(props as Record<string, unknown>)}\n >\n {isEmpty ? placeholder : (children ?? labelOf(value))}\n </span>\n );\n}\n\nexport interface SelectContentProps extends React.ComponentProps<\"div\"> {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n align?: \"start\" | \"center\" | \"end\";\n sideOffset?: number;\n}\n\nexport function SelectContent({\n className,\n side: sideProp = \"bottom\",\n align = \"start\",\n sideOffset = 4,\n children,\n ...props\n}: SelectContentProps) {\n const { open, setOpen, close, restoreFocusRef, anchorRef, contentId } = useSelect();\n const { isPresent, ref: presRef } = usePresence(open);\n const listRef = React.useRef<HTMLDivElement | null>(null);\n const [name, setName] = React.useState<{ \"aria-labelledby\"?: string; \"aria-label\"?: string }>({});\n // Before placement measures the list: the trigger's width as\n // `--select-trigger-width` (the floor of `SELECT_CONTENT_BOUNDS`), written to\n // the element like the floating offset, and the list's name — the trigger's\n // label, as the combobox is named.\n React.useLayoutEffect(() => {\n const anchor = anchorRef.current;\n if (!open || !(anchor instanceof HTMLElement)) return;\n listRef.current?.style.setProperty(\"--select-trigger-width\", `${anchor.offsetWidth}px`);\n setName(listName(anchor));\n }, [open, anchorRef]);\n const { floatingRef, style, side } = useFloating({\n anchorRef,\n open,\n side: sideProp,\n align,\n offset: sideOffset,\n });\n const dismissRef = useDismissableLayer({\n enabled: open,\n onDismiss: (event) => close(event.type === \"keydown\"),\n exclude: [anchorRef],\n });\n const onListKey = useListboxKeys(listRef);\n React.useEffect(() => {\n if (open) landOnChosen(listRef.current);\n }, [open]);\n React.useEffect(() => {\n if (open || !restoreFocusRef.current) return;\n restoreFocusRef.current = false;\n anchorRef.current?.focus();\n }, [open, anchorRef, restoreFocusRef]);\n if (!isPresent) return null;\n return (\n <Portal>\n <div\n role=\"listbox\"\n id={contentId}\n {...name}\n data-slot=\"select-content\"\n data-state={open ? \"open\" : \"closed\"}\n data-side={side}\n ref={mergeRefs(floatingRef, dismissRef, presRef, listRef)}\n style={style}\n tabIndex={-1}\n onKeyDown={(e) => {\n if (onListKey(e)) return;\n if (e.key === \"Escape\") {\n // The list's Escape is the list's: a consumer's `onKeyDown` around\n // it hears the key through React's tree, portal or not.\n e.stopPropagation();\n close(true);\n } else if (e.key === \"Tab\") {\n tabFromTrigger(e, anchorRef.current);\n setOpen(false);\n }\n }}\n className={cn(\n \"bg-popover text-ink data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-md\",\n SELECT_CONTENT_BOUNDS,\n className,\n )}\n {...(props as Record<string, unknown>)}\n >\n <div className=\"p-1\"><DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope></div>\n </div>\n </Portal>\n );\n}\n\n/** The trigger's own name for the list: its `aria-labelledby`, else its `<label>`. */\nfunction listName(trigger: HTMLElement): { \"aria-labelledby\"?: string; \"aria-label\"?: string } {\n const by = trigger.getAttribute(\"aria-labelledby\");\n if (by) return { \"aria-labelledby\": by };\n const label = (trigger as HTMLButtonElement).labels?.[0];\n if (label?.id) return { \"aria-labelledby\": label.id };\n const text = label?.textContent?.trim() || trigger.getAttribute(\"aria-label\");\n return text ? { \"aria-label\": text } : {};\n}\n\nexport interface SelectItemProps extends React.ComponentProps<\"div\"> {\n value: string;\n /** What the trigger shows once this item is chosen; defaults to the text of `children`. */\n textValue?: string;\n}\n\nexport function SelectItem({ className, value, textValue, children, ...props }: SelectItemProps) {\n const { value: selectedValue, resetValue, setValue, close, registerLabel } = useSelect();\n const selected = selectedValue === value;\n const label = itemLabel(value, textValue, children);\n React.useEffect(() => registerLabel(value, label), [registerLabel, value, label]);\n const choose = () => {\n setValue(value);\n close(true);\n };\n return (\n <div\n role=\"option\"\n data-slot=\"select-item\"\n aria-selected={selected}\n {...(resetValue === value ? { \"data-reset\": \"\" } : {})}\n tabIndex={-1}\n onClick={choose}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n choose();\n }\n }}\n className={cn(SELECT_ITEM, className)}\n {...(props as Record<string, unknown>)}\n >\n {selected ? (\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className=\"size-4\"\n aria-hidden=\"true\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n </span>\n ) : null}\n <span>{children}</span>\n </div>\n );\n}\n\nexport function SelectGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return <div role=\"group\" data-slot=\"select-group\" className={className} {...props} />;\n}\n\nexport function SelectLabel({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"select-label\"\n className={cn(\"text-ink-soft px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n );\n}\n\nexport function SelectSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"select-separator\"\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n {...props}\n />\n );\n}\n"],"mappings":"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","names":[]}
|
package/dist/generated/select.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const SELECT_CONTENT_BOUNDS = "min-w-[max(8rem,var(--select-trigger-width,0px))] max-w-[min(24rem,calc(100vw-2rem))] max-h-[min(24rem,calc(100dvh-2rem))]";
|
|
2
|
-
const SELECT_ITEM = "focus:bg-hover focus:text-ink focus-visible:inset-ring-2 focus-visible:inset-ring-ring [&_svg:not([class*='text-'])]:text-ink-soft relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm whitespace-normal [overflow-wrap:anywhere] outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
|
|
2
|
+
const SELECT_ITEM = "focus:bg-hover focus:text-ink aria-selected:bg-accent-info/20 aria-selected:text-accent-info data-[reset]:not-aria-selected:bg-accent-trace/20 focus-visible:inset-ring-2 focus-visible:inset-ring-ring [&_svg:not([class*='text-'])]:text-ink-soft relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm whitespace-normal [overflow-wrap:anywhere] outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
|
|
3
3
|
const selectTriggerSizeClasses = {
|
|
4
4
|
"sm": "h-8",
|
|
5
5
|
"md": "h-9",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/generated/select.ts"],"sourcesContent":["// AUTO-GENERATED by `nix run .#gen` — do not edit.\n\nexport const SELECT_CONTENT_BOUNDS = \"min-w-[max(8rem,var(--select-trigger-width,0px))] max-w-[min(24rem,calc(100vw-2rem))] max-h-[min(24rem,calc(100dvh-2rem))]\";\n\nexport const SELECT_ITEM = \"focus:bg-hover focus:text-ink focus-visible:inset-ring-2 focus-visible:inset-ring-ring [&_svg:not([class*='text-'])]:text-ink-soft relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm whitespace-normal [overflow-wrap:anywhere] outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\";\n\nexport const selectTriggerSizeClasses = {\n \"sm\": \"h-8\",\n \"md\": \"h-9\",\n \"lg\": \"h-12 px-4 text-base\",\n} as const;\nexport type SelectTriggerSize = keyof typeof selectTriggerSizeClasses;\n\nexport const nativeSelectSizeClasses = {\n \"sm\": \"h-8\",\n \"md\": \"h-9\",\n \"lg\": \"h-12 pr-11 pl-4 text-base md:text-base\",\n} as const;\nexport type NativeSelectSize = keyof typeof nativeSelectSizeClasses;\n"],"mappings":"AAEO,MAAM,wBAAwB;AAE9B,MAAM,cAAc;AAEpB,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGO,MAAM,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/generated/select.ts"],"sourcesContent":["// AUTO-GENERATED by `nix run .#gen` — do not edit.\n\nexport const SELECT_CONTENT_BOUNDS = \"min-w-[max(8rem,var(--select-trigger-width,0px))] max-w-[min(24rem,calc(100vw-2rem))] max-h-[min(24rem,calc(100dvh-2rem))]\";\n\nexport const SELECT_ITEM = \"focus:bg-hover focus:text-ink aria-selected:bg-accent-info/20 aria-selected:text-accent-info data-[reset]:not-aria-selected:bg-accent-trace/20 focus-visible:inset-ring-2 focus-visible:inset-ring-ring [&_svg:not([class*='text-'])]:text-ink-soft relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm whitespace-normal [overflow-wrap:anywhere] outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\";\n\nexport const selectTriggerSizeClasses = {\n \"sm\": \"h-8\",\n \"md\": \"h-9\",\n \"lg\": \"h-12 px-4 text-base\",\n} as const;\nexport type SelectTriggerSize = keyof typeof selectTriggerSizeClasses;\n\nexport const nativeSelectSizeClasses = {\n \"sm\": \"h-8\",\n \"md\": \"h-9\",\n \"lg\": \"h-12 pr-11 pl-4 text-base md:text-base\",\n} as const;\nexport type NativeSelectSize = keyof typeof nativeSelectSizeClasses;\n"],"mappings":"AAEO,MAAM,wBAAwB;AAE9B,MAAM,cAAc;AAEpB,MAAM,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGO,MAAM,0BAA0B;AAAA,EACrC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1150,8 +1150,10 @@ interface PopoverContentProps extends React.ComponentProps<"div"> {
|
|
|
1150
1150
|
side?: "top" | "right" | "bottom" | "left";
|
|
1151
1151
|
align?: "start" | "center" | "end";
|
|
1152
1152
|
sideOffset?: number;
|
|
1153
|
+
/** Where focus lands on open. Default `first` (e.g. a `Command` search input). */
|
|
1154
|
+
initialFocus?: InitialFocus;
|
|
1153
1155
|
}
|
|
1154
|
-
declare function PopoverContent({ className, side: sideProp, align, sideOffset, children, ...props }: PopoverContentProps): React.JSX.Element | null;
|
|
1156
|
+
declare function PopoverContent({ className, side: sideProp, align, sideOffset, initialFocus, children, ...props }: PopoverContentProps): React.JSX.Element | null;
|
|
1155
1157
|
|
|
1156
1158
|
interface InfoTipProps {
|
|
1157
1159
|
open?: boolean;
|
|
@@ -1537,13 +1539,15 @@ type NativeSelectSize = keyof typeof nativeSelectSizeClasses;
|
|
|
1537
1539
|
interface SelectProps {
|
|
1538
1540
|
value?: string;
|
|
1539
1541
|
defaultValue?: string;
|
|
1542
|
+
/** What a reset would put back: its option is marked, beneath the chosen one's mark. */
|
|
1543
|
+
resetValue?: string;
|
|
1540
1544
|
onValueChange?: (value: string) => void;
|
|
1541
1545
|
open?: boolean;
|
|
1542
1546
|
defaultOpen?: boolean;
|
|
1543
1547
|
onOpenChange?: (open: boolean) => void;
|
|
1544
1548
|
children?: React.ReactNode;
|
|
1545
1549
|
}
|
|
1546
|
-
declare function Select({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, children, }: SelectProps): React.JSX.Element;
|
|
1550
|
+
declare function Select({ value, defaultValue, resetValue, onValueChange, open, defaultOpen, onOpenChange, children, }: SelectProps): React.JSX.Element;
|
|
1547
1551
|
interface SelectTriggerProps extends React.ComponentProps<"button"> {
|
|
1548
1552
|
size?: SelectTriggerSize;
|
|
1549
1553
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@evinvest/uikit",
|
|
3
|
-
"version": "0.29.
|
|
3
|
+
"version": "0.29.3",
|
|
4
4
|
"description": "Dep-light React UI kit: shadcn-semantics components with zero @radix-ui / cva, mirroring the ev_lib::uikit Rust feature. Ships the shared design tokens.",
|
|
5
5
|
"license": "BlueOak-1.0.0",
|
|
6
6
|
"publishConfig": {
|