@kushagradhawan/kookie-ui 0.1.77 → 0.1.79
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/components.css +69 -29
- package/dist/cjs/components/combobox.d.ts +57 -7
- package/dist/cjs/components/combobox.d.ts.map +1 -1
- package/dist/cjs/components/combobox.js +1 -1
- package/dist/cjs/components/combobox.js.map +3 -3
- package/dist/cjs/components/text-field.d.ts +2 -2
- package/dist/cjs/components/text-field.d.ts.map +1 -1
- package/dist/cjs/components/text-field.js +2 -2
- package/dist/cjs/components/text-field.js.map +3 -3
- package/dist/cjs/components/text-field.props.d.ts +26 -0
- package/dist/cjs/components/text-field.props.d.ts.map +1 -1
- package/dist/cjs/components/text-field.props.js +1 -1
- package/dist/cjs/components/text-field.props.js.map +1 -1
- package/dist/esm/components/combobox.d.ts +57 -7
- package/dist/esm/components/combobox.d.ts.map +1 -1
- package/dist/esm/components/combobox.js +1 -1
- package/dist/esm/components/combobox.js.map +3 -3
- package/dist/esm/components/text-field.d.ts +2 -2
- package/dist/esm/components/text-field.d.ts.map +1 -1
- package/dist/esm/components/text-field.js +2 -2
- package/dist/esm/components/text-field.js.map +3 -3
- package/dist/esm/components/text-field.props.d.ts +26 -0
- package/dist/esm/components/text-field.props.d.ts.map +1 -1
- package/dist/esm/components/text-field.props.js +1 -1
- package/dist/esm/components/text-field.props.js.map +1 -1
- package/package.json +2 -2
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/combobox.css +56 -55
- package/src/components/combobox.tsx +305 -73
- package/src/components/text-field.css +83 -0
- package/src/components/text-field.props.tsx +28 -0
- package/src/components/text-field.tsx +222 -5
- package/styles.css +69 -29
package/components.css
CHANGED
|
@@ -9891,12 +9891,68 @@
|
|
|
9891
9891
|
font-size: var(--font-size-1);
|
|
9892
9892
|
line-height: 1;
|
|
9893
9893
|
}
|
|
9894
|
+
.rt-TextFieldSlot:where([data-scrub]) {
|
|
9895
|
+
cursor: ew-resize !important;
|
|
9896
|
+
-webkit-user-select: none;
|
|
9897
|
+
-moz-user-select: none;
|
|
9898
|
+
user-select: none;
|
|
9899
|
+
position: relative;
|
|
9900
|
+
}
|
|
9901
|
+
.rt-TextFieldSlot:where([data-scrub]) * {
|
|
9902
|
+
cursor: ew-resize !important;
|
|
9903
|
+
}
|
|
9904
|
+
.rt-TextFieldSlot:where([data-scrubbing]) {
|
|
9905
|
+
cursor: none;
|
|
9906
|
+
background-color: var(--accent-a3);
|
|
9907
|
+
border-radius: calc(var(--text-field-border-radius, var(--radius-2)) - 2px);
|
|
9908
|
+
}
|
|
9909
|
+
.rt-TextFieldSlot:where([data-scrubbing]) * {
|
|
9910
|
+
cursor: none;
|
|
9911
|
+
}
|
|
9912
|
+
.rt-TextFieldSlotScrubCursor {
|
|
9913
|
+
width: 20px;
|
|
9914
|
+
height: 20px;
|
|
9915
|
+
background-color: var(--accent-9);
|
|
9916
|
+
border-radius: 50%;
|
|
9917
|
+
pointer-events: none;
|
|
9918
|
+
box-shadow: 0 0 0 2px var(--color-background), 0 0 8px var(--accent-a8), 0 0 16px var(--accent-a6);
|
|
9919
|
+
}
|
|
9920
|
+
.rt-TextFieldSlotScrubCursor::before,
|
|
9921
|
+
.rt-TextFieldSlotScrubCursor::after {
|
|
9922
|
+
content: '';
|
|
9923
|
+
position: absolute;
|
|
9924
|
+
top: 50%;
|
|
9925
|
+
width: 0;
|
|
9926
|
+
height: 0;
|
|
9927
|
+
border-style: solid;
|
|
9928
|
+
transform: translateY(-50%);
|
|
9929
|
+
}
|
|
9930
|
+
.rt-TextFieldSlotScrubCursor::before {
|
|
9931
|
+
left: -10px;
|
|
9932
|
+
border-width: 5px 6px 5px 0;
|
|
9933
|
+
border-color: transparent var(--accent-9) transparent transparent;
|
|
9934
|
+
}
|
|
9935
|
+
.rt-TextFieldSlotScrubCursor::after {
|
|
9936
|
+
right: -10px;
|
|
9937
|
+
border-width: 5px 0 5px 6px;
|
|
9938
|
+
border-color: transparent transparent transparent var(--accent-9);
|
|
9939
|
+
}
|
|
9940
|
+
@media (prefers-reduced-motion: reduce) {
|
|
9941
|
+
.rt-TextFieldSlotScrubCursor {
|
|
9942
|
+
box-shadow: 0 0 0 2px var(--color-background);
|
|
9943
|
+
}
|
|
9944
|
+
}
|
|
9894
9945
|
.rt-ComboboxContent {
|
|
9895
9946
|
padding: 0 !important;
|
|
9896
9947
|
max-height: var(--radix-popover-content-available-height);
|
|
9897
9948
|
display: flex;
|
|
9898
9949
|
flex-direction: column;
|
|
9899
9950
|
}
|
|
9951
|
+
.rt-ComboboxContent:where([data-state='closed']) {
|
|
9952
|
+
visibility: hidden;
|
|
9953
|
+
position: absolute;
|
|
9954
|
+
pointer-events: none;
|
|
9955
|
+
}
|
|
9900
9956
|
.rt-ComboboxCommand {
|
|
9901
9957
|
display: flex;
|
|
9902
9958
|
flex-direction: column;
|
|
@@ -9924,6 +9980,8 @@
|
|
|
9924
9980
|
.rt-BaseMenuContent :where(.rt-BaseMenuItem.rt-ComboboxItem[data-disabled='']) {
|
|
9925
9981
|
color: inherit !important;
|
|
9926
9982
|
cursor: var(--cursor-menu-item) !important;
|
|
9983
|
+
opacity: 1 !important;
|
|
9984
|
+
pointer-events: auto !important;
|
|
9927
9985
|
}
|
|
9928
9986
|
.rt-ComboboxSearch {
|
|
9929
9987
|
position: sticky;
|
|
@@ -9944,50 +10002,32 @@
|
|
|
9944
10002
|
flex: 1;
|
|
9945
10003
|
min-height: 0;
|
|
9946
10004
|
}
|
|
9947
|
-
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-
|
|
9948
|
-
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem.rt-ComboboxItem[aria-selected='true']) {
|
|
10005
|
+
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-ComboboxItem[data-selected='true']) {
|
|
9949
10006
|
background-color: var(--accent-9);
|
|
9950
10007
|
color: var(--accent-contrast);
|
|
9951
10008
|
}
|
|
9952
|
-
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-
|
|
9953
|
-
color:
|
|
9954
|
-
}
|
|
9955
|
-
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem.rt-ComboboxItem[data-selected='true']) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem.rt-ComboboxItem[aria-selected='true']) :where([data-accent-color='gray']:not(.rt-Badge)) {
|
|
9956
|
-
color: inherit !important;
|
|
9957
|
-
}
|
|
9958
|
-
.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem.rt-ComboboxItem[data-selected='true']),
|
|
9959
|
-
.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem.rt-ComboboxItem[aria-selected='true']) {
|
|
9960
|
-
background-color: var(--accent-4);
|
|
9961
|
-
}
|
|
9962
|
-
:where([data-panel-background='translucent'], [data-material='translucent']) :is(.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem.rt-ComboboxItem[data-selected='true'])), :where([data-panel-background='translucent'], [data-material='translucent']) :is(.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem.rt-ComboboxItem[aria-selected='true'])) {
|
|
9963
|
-
background-color: var(--accent-a4);
|
|
10009
|
+
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-ComboboxItem[data-selected='true']) * {
|
|
10010
|
+
color: var(--accent-contrast) !important;
|
|
9964
10011
|
}
|
|
9965
|
-
.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-
|
|
10012
|
+
.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-ComboboxItem[data-selected='true']) {
|
|
9966
10013
|
background-color: var(--accent-4);
|
|
9967
10014
|
}
|
|
9968
|
-
|
|
10015
|
+
:where([data-panel-background='translucent'], [data-material='translucent']) .rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-ComboboxItem[data-selected='true']) {
|
|
9969
10016
|
background-color: var(--accent-a4);
|
|
9970
10017
|
}
|
|
9971
|
-
.rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-
|
|
9972
|
-
.rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-BaseMenuItem.rt-ComboboxItem[aria-selected='true']) {
|
|
10018
|
+
.rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-ComboboxItem[data-selected='true']) {
|
|
9973
10019
|
background-color: var(--accent-12);
|
|
9974
10020
|
color: var(--accent-1);
|
|
9975
10021
|
}
|
|
9976
|
-
.rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-
|
|
9977
|
-
color:
|
|
9978
|
-
}
|
|
9979
|
-
.rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-BaseMenuItem.rt-ComboboxItem[data-selected='true']) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-BaseMenuItem.rt-ComboboxItem[aria-selected='true']) :where([data-accent-color='gray']:not(.rt-Badge)) {
|
|
9980
|
-
color: inherit !important;
|
|
10022
|
+
.rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-ComboboxItem[data-selected='true']) * {
|
|
10023
|
+
color: var(--accent-1) !important;
|
|
9981
10024
|
}
|
|
9982
|
-
.rt-BaseMenuContent:where(.rt-high-contrast
|
|
10025
|
+
.rt-BaseMenuContent:where(.rt-high-contrast[data-accent-color]) :where(.rt-ComboboxItem[data-selected='true']) {
|
|
9983
10026
|
background-color: var(--accent-9);
|
|
9984
10027
|
color: var(--accent-contrast);
|
|
9985
10028
|
}
|
|
9986
|
-
.rt-BaseMenuContent:where(.rt-high-contrast
|
|
9987
|
-
color:
|
|
9988
|
-
}
|
|
9989
|
-
.rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-BaseMenuItem.rt-ComboboxItem[data-selected='true']):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)), .rt-BaseMenuContent:where(.rt-high-contrast) :where(.rt-BaseMenuItem.rt-ComboboxItem[aria-selected='true']):where([data-accent-color]) :where([data-accent-color='gray']:not(.rt-Badge)) {
|
|
9990
|
-
color: inherit !important;
|
|
10029
|
+
.rt-BaseMenuContent:where(.rt-high-contrast[data-accent-color]) :where(.rt-ComboboxItem[data-selected='true']) * {
|
|
10030
|
+
color: var(--accent-contrast) !important;
|
|
9991
10031
|
}
|
|
9992
10032
|
.rt-Em {
|
|
9993
10033
|
box-sizing: border-box;
|
|
@@ -14,6 +14,14 @@ import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-p
|
|
|
14
14
|
import type { GetPropDefTypes } from '../props/prop-def.js';
|
|
15
15
|
type TextFieldVariant = (typeof textFieldRootPropDefs.variant.values)[number];
|
|
16
16
|
type ComboboxValue = string | null;
|
|
17
|
+
/**
|
|
18
|
+
* Custom filter function for Combobox search.
|
|
19
|
+
* @param value - The item's value being tested
|
|
20
|
+
* @param search - The current search string
|
|
21
|
+
* @param keywords - Optional keywords associated with the item
|
|
22
|
+
* @returns A number between 0 and 1 where 0 means no match and 1 means exact match.
|
|
23
|
+
* Fractional values indicate relevance for sorting.
|
|
24
|
+
*/
|
|
17
25
|
type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
|
|
18
26
|
/**
|
|
19
27
|
* Additional props supported by Combobox.Root beyond the Radix Popover surface.
|
|
@@ -34,6 +42,42 @@ type ComboboxRootOwnProps = GetPropDefTypes<typeof comboboxRootPropDefs> & {
|
|
|
34
42
|
shouldFilter?: boolean;
|
|
35
43
|
loop?: boolean;
|
|
36
44
|
disabled?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Whether to reset the search value when an option is selected.
|
|
47
|
+
* @default true
|
|
48
|
+
*/
|
|
49
|
+
resetSearchOnSelect?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Accent color for the combobox trigger and content.
|
|
52
|
+
*/
|
|
53
|
+
color?: (typeof comboboxTriggerPropDefs.color.values)[number];
|
|
54
|
+
/**
|
|
55
|
+
* Display value shown in the trigger. This is the recommended approach for
|
|
56
|
+
* best performance as it avoids needing to mount items to register labels.
|
|
57
|
+
*
|
|
58
|
+
* Can be either:
|
|
59
|
+
* - A string: Static display value
|
|
60
|
+
* - A function: `(value: string | null) => string | undefined` - Called with current value
|
|
61
|
+
*
|
|
62
|
+
* Use this when:
|
|
63
|
+
* - You have the selected item's label available (e.g., from your data source)
|
|
64
|
+
* - Items haven't mounted yet (e.g., on initial render with a defaultValue)
|
|
65
|
+
* - You want optimal performance with forceMount={false} (default)
|
|
66
|
+
*
|
|
67
|
+
* @example
|
|
68
|
+
* // Static string
|
|
69
|
+
* <Combobox.Root value="usa" displayValue="United States">
|
|
70
|
+
*
|
|
71
|
+
* // Function (recommended for dynamic data)
|
|
72
|
+
* <Combobox.Root
|
|
73
|
+
* value={selectedCountry}
|
|
74
|
+
* displayValue={(value) => countries.find(c => c.code === value)?.name}
|
|
75
|
+
* >
|
|
76
|
+
*
|
|
77
|
+
* If not provided, falls back to the label registered by the selected item
|
|
78
|
+
* (requires forceMount={true}), then to the raw value.
|
|
79
|
+
*/
|
|
80
|
+
displayValue?: string | ((value: ComboboxValue) => string | undefined);
|
|
37
81
|
};
|
|
38
82
|
type PopoverRootProps = React.ComponentPropsWithoutRef<typeof Popover.Root>;
|
|
39
83
|
interface ComboboxRootProps extends PopoverRootProps, ComboboxRootOwnProps {
|
|
@@ -58,6 +102,8 @@ interface ComboboxValueProps extends React.ComponentPropsWithoutRef<'span'> {
|
|
|
58
102
|
/**
|
|
59
103
|
* Value mirrors Select.Value by showing the selected item's label
|
|
60
104
|
* or falling back to placeholder text supplied by the consumer or context.
|
|
105
|
+
*
|
|
106
|
+
* Priority: resolvedDisplayValue (explicit) > selectedLabel (from items) > raw value > children > placeholder
|
|
61
107
|
*/
|
|
62
108
|
declare const ComboboxValue: React.ForwardRefExoticComponent<ComboboxValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
63
109
|
type ComboboxContentOwnProps = GetPropDefTypes<typeof comboboxContentPropDefs> & {
|
|
@@ -70,10 +116,14 @@ interface ComboboxContentProps extends Omit<ComponentPropsWithout<typeof Popover
|
|
|
70
116
|
* and instantiating cmdk's Command list for roving focus + filtering.
|
|
71
117
|
*/
|
|
72
118
|
declare const ComboboxContent: React.ForwardRefExoticComponent<ComboboxContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
73
|
-
interface ComboboxInputProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
|
|
119
|
+
interface ComboboxInputProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'onValueChange'> {
|
|
74
120
|
startAdornment?: React.ReactNode;
|
|
75
121
|
endAdornment?: React.ReactNode;
|
|
76
122
|
variant?: TextFieldVariant;
|
|
123
|
+
/** Controlled search value. Falls back to Root's searchValue if not provided. */
|
|
124
|
+
value?: string;
|
|
125
|
+
/** Callback when search value changes. Falls back to Root's onSearchValueChange if not provided. */
|
|
126
|
+
onValueChange?: (value: string) => void;
|
|
77
127
|
}
|
|
78
128
|
/**
|
|
79
129
|
* Input composes TextField tokens with cmdk's Command.Input to provide
|
|
@@ -84,6 +134,7 @@ interface ComboboxListProps extends React.ComponentPropsWithoutRef<typeof Comman
|
|
|
84
134
|
}
|
|
85
135
|
/**
|
|
86
136
|
* List wraps cmdk's Command.List to inherit base menu styles and provides ScrollArea for the items.
|
|
137
|
+
* Also handles aria-activedescendant tracking via a single MutationObserver for all items.
|
|
87
138
|
*/
|
|
88
139
|
declare const ComboboxList: React.ForwardRefExoticComponent<ComboboxListProps & React.RefAttributes<HTMLDivElement>>;
|
|
89
140
|
interface ComboboxEmptyProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> {
|
|
@@ -107,14 +158,13 @@ interface ComboboxSeparatorProps extends React.ComponentPropsWithoutRef<typeof C
|
|
|
107
158
|
* Separator visually divides logical sections of the option list.
|
|
108
159
|
*/
|
|
109
160
|
declare const ComboboxSeparator: React.ForwardRefExoticComponent<ComboboxSeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
110
|
-
interface ComboboxItemProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> {
|
|
161
|
+
interface ComboboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>, 'keywords'> {
|
|
162
|
+
/** Display label for the item. Also used for search unless keywords are provided. */
|
|
111
163
|
label?: string;
|
|
164
|
+
/** Additional keywords for search filtering (overrides automatic label-based search). */
|
|
165
|
+
keywords?: string[];
|
|
112
166
|
}
|
|
113
|
-
/**
|
|
114
|
-
* Item wires cmdk's selection handling with Kookie UI tokens and
|
|
115
|
-
* ensures labels are registered for displaying the current value.
|
|
116
|
-
*/
|
|
117
167
|
declare const ComboboxItem: React.ForwardRefExoticComponent<ComboboxItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
118
168
|
export { ComboboxRoot as Root, ComboboxTrigger as Trigger, ComboboxValue as Value, ComboboxContent as Content, ComboboxInput as Input, ComboboxList as List, ComboboxEmpty as Empty, ComboboxGroup as Group, ComboboxLabel as Label, ComboboxSeparator as Separator, ComboboxItem as Item, };
|
|
119
|
-
export type { ComboboxRootProps as RootProps, ComboboxTriggerProps as TriggerProps, ComboboxContentProps as ContentProps, ComboboxInputProps as InputProps, ComboboxListProps as ListProps, ComboboxEmptyProps as EmptyProps, ComboboxGroupProps as GroupProps, ComboboxLabelProps as LabelProps, ComboboxSeparatorProps as SeparatorProps, ComboboxItemProps as ItemProps, };
|
|
169
|
+
export type { ComboboxRootProps as RootProps, ComboboxTriggerProps as TriggerProps, ComboboxValueProps as ValueProps, ComboboxContentProps as ContentProps, ComboboxInputProps as InputProps, ComboboxListProps as ListProps, ComboboxEmptyProps as EmptyProps, ComboboxGroupProps as GroupProps, ComboboxLabelProps as LabelProps, ComboboxSeparatorProps as SeparatorProps, ComboboxItemProps as ItemProps, };
|
|
120
170
|
//# sourceMappingURL=combobox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAGnD,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAK7G,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAGxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,KAAK,gBAAgB,GAAG,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9E,KAAK,aAAa,GAAG,MAAM,GAAG,IAAI,CAAC;AACnC,KAAK,aAAa,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,KAAK,oBAAoB,GAAG,eAAe,CAAC,OAAO,oBAAoB,CAAC,GAAG;IACzE,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var bo=Object.create;var T=Object.defineProperty;var po=Object.getOwnPropertyDescriptor;var co=Object.getOwnPropertyNames;var Co=Object.getPrototypeOf,uo=Object.prototype.hasOwnProperty;var xo=(e,r)=>{for(var t in r)T(e,t,{get:r[t],enumerable:!0})},oo=(e,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of co(r))!uo.call(e,n)&&n!==t&&T(e,n,{get:()=>r[n],enumerable:!(a=po(r,n))||a.enumerable});return e};var D=(e,r,t)=>(t=e!=null?bo(Co(e)):{},oo(r||!e||!e.__esModule?T(t,"default",{value:e,enumerable:!0}):t,e)),fo=e=>oo(T({},"__esModule",{value:!0}),e);var Po={};xo(Po,{Content:()=>A,Empty:()=>H,Group:()=>q,Input:()=>j,Item:()=>Q,Label:()=>J,List:()=>$,Root:()=>B,Separator:()=>K,Trigger:()=>W,Value:()=>w});module.exports=fo(Po);var o=D(require("react")),p=D(require("classnames")),L=require("radix-ui/internal"),v=require("cmdk"),G=require("../helpers/extract-props.js"),d=require("./combobox.props.js"),ao=require("../props/margin.props.js"),z=require("./icons.js"),M=require("./theme.js"),no=require("../helpers/require-react-element.js"),F=D(require("./popover.js")),so=require("./scroll-area.js"),io=require("./slot.js"),ho=require("./text-field.props.js");const eo=o.createContext(null),E=e=>{const r=o.useContext(eo);if(!r)throw new Error(`${e} must be used within Combobox.Root`);return r},to=o.createContext(null),ro=()=>o.useContext(to),B=e=>{const{children:r,size:t=d.comboboxRootPropDefs.size.default,highContrast:a=d.comboboxRootPropDefs.highContrast.default,value:n,defaultValue:l=null,onValueChange:c,open:m,defaultOpen:i=!1,onOpenChange:C,placeholder:u="Select an option",searchPlaceholder:x="Search options...",searchValue:f,defaultSearchValue:P="",onSearchValueChange:g,filter:b,shouldFilter:h=!0,loop:s=!0,disabled:y,...O}=e,[R,I]=(0,L.useControllableState)({prop:m,defaultProp:i,onChange:C}),[S,V]=(0,L.useControllableState)({prop:n,defaultProp:l,onChange:c}),[U,N]=(0,L.useControllableState)({prop:f,defaultProp:P,onChange:g}),X=o.useRef(new Map),Y=o.useCallback((k,mo)=>{X.current.set(k,mo)},[]),Z=S!=null?X.current.get(S):void 0,_=o.useCallback(k=>{V(k),I(!1),N("")},[I,N,V]),lo=o.useMemo(()=>({size:t,highContrast:a,placeholder:u,searchPlaceholder:x,filter:b,shouldFilter:h,loop:s,disabled:y,open:R,setOpen:I,value:S,setValue:V,searchValue:U,setSearchValue:N,selectedLabel:Z,registerItemLabel:Y,handleSelect:_}),[t,a,u,x,b,h,s,y,R,I,S,V,U,N,Z,Y,_]);return o.createElement(eo.Provider,{value:lo},o.createElement(F.Root,{open:R,onOpenChange:I,...O},r))};B.displayName="Combobox.Root";const W=o.forwardRef((e,r)=>{const t=E("Combobox.Trigger"),{children:a,className:n,placeholder:l,disabled:c,readOnly:m,error:i,loading:C,color:u,radius:x,...f}=(0,G.extractProps)({size:t.size,highContrast:t.highContrast,...e},{size:d.comboboxRootPropDefs.size,highContrast:d.comboboxRootPropDefs.highContrast},d.comboboxTriggerPropDefs,ao.marginPropDefs),{material:P,panelBackground:g}=e,b=c??t.disabled,h=o.useMemo(()=>({"aria-expanded":t.open,"aria-disabled":b||void 0,"aria-haspopup":"listbox"}),[t.open,b]),s=o.createElement(o.Fragment,null,o.createElement("span",{className:"rt-SelectTriggerInner"},o.createElement(w,{placeholder:l??t.placeholder})),C?o.createElement("div",{className:"rt-SelectIcon rt-SelectLoadingIcon","aria-hidden":"true"},o.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},o.createElement("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeWidth:"1",strokeLinecap:"round",strokeDasharray:"6 34",strokeDashoffset:"0",className:"rt-SelectLoadingSpinner"}))):o.createElement(z.ChevronDownIcon,{className:"rt-SelectIcon"})),{type:y,...O}=f,I=o.createElement("button",{"data-accent-color":u,"data-radius":x,"data-panel-background":g,"data-material":P,"data-error":i,"data-loading":C,"data-disabled":b||void 0,"data-read-only":m||void 0,...O,...h,type:y??"button",disabled:b,ref:r,className:(0,p.default)("rt-reset","rt-SelectTrigger","rt-ComboboxTrigger",n)},a?(0,no.requireReactElement)(a):s);return o.createElement(F.Trigger,{disabled:b},I)});W.displayName="Combobox.Trigger";const w=o.forwardRef(({placeholder:e,children:r,className:t,...a},n)=>{const l=E("Combobox.Value"),c=l.selectedLabel??l.value??void 0,m=e??l.placeholder;return o.createElement("span",{...a,ref:n,className:(0,p.default)("rt-ComboboxValue",t)},c??r??m)});w.displayName="Combobox.Value";const A=o.forwardRef((e,r)=>{const t=E("Combobox.Content"),a=(0,M.useThemeContext)(),n=a.panelBackground,l=e.size??t.size??d.comboboxContentPropDefs.size.default,c=e.variant??d.comboboxContentPropDefs.variant.default,m=e.highContrast??t.highContrast??d.comboboxContentPropDefs.highContrast.default,{className:i,children:C,color:u,forceMount:x,container:f,...P}=(0,G.extractProps)({...e,size:l,variant:c,highContrast:m},d.comboboxContentPropDefs),g=u||a.accentColor;let b=i;return typeof l=="string"&&(b=i?.split(/\s+/).filter(Boolean).filter(h=>!/^rt-r-size-\d$/.test(h)).join(" ")||void 0),o.createElement(F.Content,{size:l,"data-accent-color":g,"data-material":n,"data-panel-background":n,align:"start",sideOffset:4,collisionPadding:10,...P,forceMount:x,container:f,ref:r,className:(0,p.default)("rt-PopperContent","rt-BaseMenuContent","rt-ComboboxContent",b)},o.createElement(M.Theme,{asChild:!0},o.createElement(to.Provider,{value:{variant:c,size:String(l),color:g,material:n,highContrast:m}},o.createElement(v.Command,{loop:t.loop,value:t.searchValue,onValueChange:t.setSearchValue,shouldFilter:t.shouldFilter,filter:t.filter,className:"rt-ComboboxCommand"},C))))});A.displayName="Combobox.Content";const j=o.forwardRef(({className:e,startAdornment:r,endAdornment:t,placeholder:a,variant:n,...l},c)=>{const m=E("Combobox.Input"),i=ro(),C=i?.variant??"solid",u=i?.color,x=i?.material,f=n??(C==="solid"?"surface":"soft"),P=o.createElement("div",{className:(0,p.default)("rt-TextFieldRoot","rt-ComboboxInputRoot",`rt-r-size-${m.size}`,`rt-variant-${f}`),"data-accent-color":u,"data-material":x,"data-panel-background":x},r?o.createElement("div",{className:"rt-TextFieldSlot"},r):null,o.createElement(v.Command.Input,{...l,ref:c,placeholder:a??m.searchPlaceholder,className:(0,p.default)("rt-reset","rt-TextFieldInput",e)}),t?o.createElement("div",{className:"rt-TextFieldSlot","data-side":"right"},t):null);return i?o.createElement("div",{className:"rt-ComboboxSearch"},P):P});j.displayName="Combobox.Input";const $=o.forwardRef(({className:e,...r},t)=>o.createElement(so.ScrollArea,{type:"auto",className:"rt-ComboboxScrollArea",scrollbars:"vertical",size:"1"},o.createElement("div",{className:(0,p.default)("rt-BaseMenuViewport","rt-ComboboxViewport")},o.createElement(v.Command.List,{...r,ref:t,className:(0,p.default)("rt-ComboboxList",e)}))));$.displayName="Combobox.List";const H=o.forwardRef(({className:e,...r},t)=>o.createElement(v.Command.Empty,{...r,ref:t,className:(0,p.default)("rt-ComboboxEmpty",e)}));H.displayName="Combobox.Empty";const q=o.forwardRef(({className:e,...r},t)=>o.createElement(v.Command.Group,{...r,ref:t,className:(0,p.default)("rt-BaseMenuGroup","rt-ComboboxGroup",e)}));q.displayName="Combobox.Group";const J=o.forwardRef(({className:e,...r},t)=>o.createElement("div",{...r,ref:t,className:(0,p.default)("rt-BaseMenuLabel","rt-ComboboxLabel",e)}));J.displayName="Combobox.Label";const K=o.forwardRef(({className:e,...r},t)=>o.createElement(v.Command.Separator,{...r,ref:t,className:(0,p.default)("rt-BaseMenuSeparator","rt-ComboboxSeparator",e)}));K.displayName="Combobox.Separator";const Q=o.forwardRef(({className:e,children:r,label:t,value:a,disabled:n,onSelect:l,...c},m)=>{const i=E("Combobox.Item"),C=ro(),u=t??(typeof r=="string"?r:String(a)),x=a!=null&&i.value===a,f=C?.size?`rt-r-size-${C.size}`:void 0;o.useEffect(()=>{a&&i.registerItemLabel(a,u)},[i,a,u]);const P=o.useCallback(s=>{i.handleSelect(s),l?.(s)},[i,l]),g=n??i.disabled??!1,b=o.useRef(null),h=o.useCallback(s=>{b.current=s,typeof m=="function"?m(s):m&&(m.current=s)},[m]);return o.useEffect(()=>{if(!g&&b.current){const s=b.current;(s.getAttribute("data-disabled")==="false"||s.getAttribute("data-disabled")==="")&&s.removeAttribute("data-disabled");const y=new MutationObserver(()=>{(s.getAttribute("data-disabled")==="false"||s.getAttribute("data-disabled")==="")&&s.removeAttribute("data-disabled")});return y.observe(s,{attributes:!0,attributeFilter:["data-disabled"]}),()=>y.disconnect()}},[g]),o.createElement(v.Command.Item,{...c,value:a,...g?{disabled:!0}:{},ref:h,onSelect:P,className:(0,p.default)("rt-reset","rt-BaseMenuItem","rt-ComboboxItem",e)},x?o.createElement("span",{className:(0,p.default)("rt-BaseMenuItemIndicator","rt-ComboboxItemIndicator",f)},o.createElement(z.ThickCheckIcon,{className:(0,p.default)("rt-BaseMenuItemIndicatorIcon","rt-ComboboxItemIndicatorIcon",f)})):null,o.createElement(io.Slottable,null,r))});Q.displayName="Combobox.Item";
|
|
1
|
+
"use strict";"use client";var he=Object.create;var w=Object.defineProperty;var ye=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Ve=Object.getPrototypeOf,Se=Object.prototype.hasOwnProperty;var Ee=(o,r)=>{for(var t in r)w(o,t,{get:r[t],enumerable:!0})},ce=(o,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Ie(r))!Se.call(o,a)&&a!==t&&w(o,a,{get:()=>r[a],enumerable:!(n=ye(r,a))||n.enumerable});return o};var $=(o,r,t)=>(t=o!=null?he(Ve(o)):{},ce(r||!o||!o.__esModule?w(t,"default",{value:o,enumerable:!0}):t,o)),Re=o=>ce(w({},"__esModule",{value:!0}),o);var Te={};Ee(Te,{Content:()=>J,Empty:()=>X,Group:()=>Y,Input:()=>Q,Item:()=>oe,Label:()=>Z,List:()=>U,Root:()=>K,Separator:()=>ee,Trigger:()=>_,Value:()=>z});module.exports=Re(Te);var e=$(require("react")),b=$(require("classnames")),O=require("radix-ui/internal"),S=require("cmdk"),q=require("../helpers/extract-props.js"),u=require("./combobox.props.js"),fe=require("../props/margin.props.js"),k=require("./icons.js"),F=require("./theme.js"),xe=require("../helpers/require-react-element.js"),j=$(require("./popover.js")),ge=require("./scroll-area.js"),Pe=require("./slot.js"),Le=require("./text-field.props.js");const de=e.createContext(null),T=o=>{const r=e.useContext(de);if(!r)throw new Error(`${o} must be used within Combobox.Root`);return r},ue=e.createContext(null),Ce=()=>e.useContext(ue),K=o=>{const{children:r,size:t=u.comboboxRootPropDefs.size.default,highContrast:n=u.comboboxRootPropDefs.highContrast.default,value:a,defaultValue:s=null,onValueChange:i,open:p,defaultOpen:c=!1,onOpenChange:l,placeholder:m="Select an option",searchPlaceholder:P="Search options...",searchValue:C,defaultSearchValue:f="",onSearchValueChange:x,filter:d,shouldFilter:h=!0,loop:g=!0,disabled:E,resetSearchOnSelect:y=!0,color:R,displayValue:V,...N}=o,te=`combobox-listbox-${e.useId()}`,[re,ne]=e.useState(void 0),[B,L]=(0,O.useControllableState)({prop:p,defaultProp:c,onChange:l}),[v,D]=(0,O.useControllableState)({prop:a,defaultProp:s,onChange:i}),[ae,M]=(0,O.useControllableState)({prop:C,defaultProp:f,onChange:x}),W=e.useRef(new Map),[se,A]=e.useState(void 0),ie=e.useCallback((I,be)=>{W.current.set(I,be),I===v&&A(be)},[v]),le=e.useCallback(I=>{W.current.delete(I)},[]);e.useEffect(()=>{if(v!=null){const I=W.current.get(v);A(I)}else A(void 0)},[v]);const me=e.useCallback(I=>{D(I),L(!1),y&&M("")},[L,M,D,y]);e.useEffect(()=>{},[v]);const pe=e.useMemo(()=>{if(V!=null)return typeof V=="function"?V(v):V},[V,v]),ve=e.useMemo(()=>({size:t,highContrast:n,placeholder:m,searchPlaceholder:P,filter:d,shouldFilter:h,loop:g,disabled:E,resetSearchOnSelect:y,color:R,resolvedDisplayValue:pe,open:B,setOpen:L,value:v,setValue:D,searchValue:ae,setSearchValue:M,selectedLabel:se,registerItemLabel:ie,unregisterItemLabel:le,handleSelect:me,listboxId:te,activeDescendantId:re,setActiveDescendantId:ne}),[t,n,m,P,d,h,g,E,y,R,pe,B,L,v,D,ae,M,se,ie,le,me,te,re,ne]);return e.createElement(de.Provider,{value:ve},e.createElement(j.Root,{open:B,onOpenChange:L,...N},r))};K.displayName="Combobox.Root";const _=e.forwardRef((o,r)=>{const t=T("Combobox.Trigger"),{children:n,className:a,placeholder:s,disabled:i,readOnly:p,error:c,loading:l,color:m,radius:P,...C}=(0,q.extractProps)({size:t.size,highContrast:t.highContrast,...o},{size:u.comboboxRootPropDefs.size,highContrast:u.comboboxRootPropDefs.highContrast},u.comboboxTriggerPropDefs,fe.marginPropDefs),{material:f,panelBackground:x}=o,d=i??t.disabled,h=m??t.color,g=e.useMemo(()=>({role:"combobox","aria-expanded":t.open,"aria-disabled":d||void 0,"aria-haspopup":"listbox","aria-controls":t.open?t.listboxId:void 0,"aria-activedescendant":t.open?t.activeDescendantId:void 0,"aria-autocomplete":"list"}),[t.open,t.listboxId,t.activeDescendantId,d]),E=e.createElement(e.Fragment,null,e.createElement("span",{className:"rt-SelectTriggerInner"},e.createElement(z,{placeholder:s??t.placeholder})),l?e.createElement("div",{className:"rt-SelectIcon rt-SelectLoadingIcon","aria-hidden":"true"},e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none"},e.createElement("circle",{cx:"8",cy:"8",r:"6.5",stroke:"currentColor",strokeWidth:"1",strokeLinecap:"round",strokeDasharray:"6 34",strokeDashoffset:"0",className:"rt-SelectLoadingSpinner"}))):e.createElement(k.ChevronDownIcon,{className:"rt-SelectIcon"})),{type:y,...R}=C,N=e.createElement("button",{"data-accent-color":h,"data-radius":P,"data-panel-background":x,"data-material":f,"data-error":c,"data-loading":l,"data-disabled":d||void 0,"data-read-only":p||void 0,...R,...g,type:y??"button",disabled:d,ref:r,className:(0,b.default)("rt-reset","rt-SelectTrigger","rt-ComboboxTrigger",a)},n?(0,xe.requireReactElement)(n):E);return e.createElement(j.Trigger,{disabled:d},N)});_.displayName="Combobox.Trigger";const z=e.forwardRef(({placeholder:o,children:r,className:t,...n},a)=>{const s=T("Combobox.Value"),i=s.resolvedDisplayValue??s.selectedLabel??s.value??void 0,p=o??s.placeholder;return e.createElement("span",{...n,ref:a,className:(0,b.default)("rt-ComboboxValue",t)},i??r??p)});z.displayName="Combobox.Value";const J=e.forwardRef((o,r)=>{const t=T("Combobox.Content"),n=(0,F.useThemeContext)(),a=n.panelBackground,s=o.size??t.size??u.comboboxContentPropDefs.size.default,i=o.variant??u.comboboxContentPropDefs.variant.default,p=o.highContrast??t.highContrast??u.comboboxContentPropDefs.highContrast.default,{className:c,children:l,color:m,forceMount:P,container:C,...f}=(0,q.extractProps)({...o,size:s,variant:i,highContrast:p},u.comboboxContentPropDefs),x=m||t.color||n.accentColor,d=e.useMemo(()=>typeof s!="string"?c:c?.split(/\s+/).filter(Boolean).filter(g=>!/^rt-r-size-\d$/.test(g)).join(" ")||void 0,[c,s]),h=P===!0?!0:void 0;return e.createElement(j.Content,{size:s,"data-accent-color":x,"data-material":a,"data-panel-background":a,align:"start",sideOffset:4,collisionPadding:10,...f,forceMount:h,container:C,ref:r,className:(0,b.default)("rt-PopperContent","rt-BaseMenuContent","rt-ComboboxContent",d)},e.createElement(F.Theme,{asChild:!0},e.createElement(ue.Provider,{value:{variant:i,size:String(s),color:x,material:a,highContrast:p}},e.createElement(S.Command,{loop:t.loop,shouldFilter:t.shouldFilter,filter:t.filter,className:"rt-ComboboxCommand"},l))))});J.displayName="Combobox.Content";const Q=e.forwardRef(({className:o,startAdornment:r,endAdornment:t,placeholder:n,variant:a,value:s,onValueChange:i,...p},c)=>{const l=T("Combobox.Input"),m=Ce(),P=m?.variant??"solid",C=m?.color,f=m?.material,x=a??(P==="solid"?"surface":"soft"),d=s??l.searchValue,h=i??l.setSearchValue,g=e.createElement("div",{className:(0,b.default)("rt-TextFieldRoot","rt-ComboboxInputRoot",`rt-r-size-${l.size}`,`rt-variant-${x}`),"data-accent-color":C,"data-material":f,"data-panel-background":f},r?e.createElement("div",{className:"rt-TextFieldSlot"},r):null,e.createElement(S.Command.Input,{...p,ref:c,value:d,onValueChange:h,placeholder:n??l.searchPlaceholder,className:(0,b.default)("rt-reset","rt-TextFieldInput",o)}),t?e.createElement("div",{className:"rt-TextFieldSlot","data-side":"right"},t):null);return m?e.createElement("div",{className:"rt-ComboboxSearch"},g):g});Q.displayName="Combobox.Input";const U=e.forwardRef(({className:o,...r},t)=>{const n=T("Combobox.List"),a=e.useRef(null),s=e.useCallback(i=>{a.current=i,typeof t=="function"?t(i):t&&(t.current=i)},[t]);return e.useEffect(()=>{const i=a.current;if(!i)return;const p=()=>{const m=i.querySelector('[data-selected="true"], [aria-selected="true"]')?.id;n.setActiveDescendantId(m||void 0)};p();const c=new MutationObserver(p);return c.observe(i,{attributes:!0,attributeFilter:["data-selected","aria-selected"],subtree:!0}),()=>c.disconnect()},[n.setActiveDescendantId]),e.createElement(ge.ScrollArea,{type:"auto",className:"rt-ComboboxScrollArea",scrollbars:"vertical",size:"1"},e.createElement("div",{className:(0,b.default)("rt-BaseMenuViewport","rt-ComboboxViewport")},e.createElement(S.Command.List,{...r,ref:s,id:n.listboxId,role:"listbox","aria-label":"Options",className:(0,b.default)("rt-ComboboxList",o)})))});U.displayName="Combobox.List";const X=e.forwardRef(({className:o,...r},t)=>e.createElement(S.Command.Empty,{...r,ref:t,className:(0,b.default)("rt-ComboboxEmpty",o)}));X.displayName="Combobox.Empty";const Y=e.forwardRef(({className:o,...r},t)=>e.createElement(S.Command.Group,{...r,ref:t,className:(0,b.default)("rt-BaseMenuGroup","rt-ComboboxGroup",o)}));Y.displayName="Combobox.Group";const Z=e.forwardRef(({className:o,...r},t)=>e.createElement("div",{...r,ref:t,className:(0,b.default)("rt-BaseMenuLabel","rt-ComboboxLabel",o)}));Z.displayName="Combobox.Label";const ee=e.forwardRef(({className:o,...r},t)=>e.createElement(S.Command.Separator,{...r,ref:t,className:(0,b.default)("rt-BaseMenuSeparator","rt-ComboboxSeparator",o)}));ee.displayName="Combobox.Separator";function H(o){if(typeof o=="string")return o;if(typeof o=="number")return String(o);if(o==null||typeof o=="boolean")return"";if(Array.isArray(o))return o.map(H).filter(Boolean).join(" ");if(e.isValidElement(o)){const r=o.props;if(r.children)return H(r.children)}return""}const oe=e.forwardRef(({className:o,children:r,label:t,value:n,disabled:a,onSelect:s,keywords:i,...p},c)=>{const l=T("Combobox.Item"),m=Ce(),P=e.useMemo(()=>H(r),[r]),C=t??(P||String(n)),f=n!=null&&l.value===n,x=m?.size?`rt-r-size-${m.size}`:void 0,d=i??[C],g=`combobox-item-${e.useId()}`,{registerItemLabel:E,unregisterItemLabel:y,handleSelect:R}=l;e.useEffect(()=>{if(n)return E(n,C),()=>y(n)},[E,y,n,C]);const V=e.useCallback(G=>{R(G),s?.(G)},[R,s]),N=a??l.disabled??!1;return e.createElement(S.Command.Item,{...p,id:g,value:n,keywords:d,role:"option","aria-selected":f,...N?{disabled:!0,"aria-disabled":!0}:{},ref:c,onSelect:V,className:(0,b.default)("rt-reset","rt-BaseMenuItem","rt-ComboboxItem",o)},f?e.createElement("span",{className:(0,b.default)("rt-BaseMenuItemIndicator","rt-ComboboxItemIndicator",x)},e.createElement(k.ThickCheckIcon,{className:(0,b.default)("rt-BaseMenuItemIndicatorIcon","rt-ComboboxItemIndicatorIcon",x)})):null,e.createElement(Pe.Slottable,null,r))});oe.displayName="Combobox.Item";
|
|
2
2
|
//# sourceMappingURL=combobox.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/combobox.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\n/**\n * Combobox is a compound component built on top of Popover and cmdk's Command list.\n * It mirrors the Select API while adding search-first behaviors including filtering,\n * async-friendly state management, and design token support for trigger, content,\n * and input variants.\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useControllableState } from 'radix-ui/internal';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { extractProps } from '../helpers/extract-props.js';\nimport { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { ChevronDownIcon, ThickCheckIcon } from './icons.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport * as Popover from './popover.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Slottable } from './slot.js';\nimport { textFieldRootPropDefs } from './text-field.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype TextFieldVariant = (typeof textFieldRootPropDefs.variant.values)[number];\ntype ComboboxValue = string | null;\ntype CommandFilter = (value: string, search: string, keywords?: string[]) => number;\n\n/**\n * Additional props supported by Combobox.Root beyond the Radix Popover surface.\n */\ntype ComboboxRootOwnProps = GetPropDefTypes<typeof comboboxRootPropDefs> & {\n value?: ComboboxValue;\n defaultValue?: ComboboxValue;\n onValueChange?: (value: ComboboxValue) => void;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n placeholder?: string;\n searchPlaceholder?: string;\n searchValue?: string;\n defaultSearchValue?: string;\n onSearchValueChange?: (value: string) => void;\n filter?: CommandFilter;\n shouldFilter?: boolean;\n loop?: boolean;\n disabled?: boolean;\n};\n\n/**\n * Internal context shared by all sub-components to avoid prop drilling.\n */\ninterface ComboboxContextValue extends ComboboxRootOwnProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n value: ComboboxValue;\n setValue: (value: ComboboxValue) => void;\n searchValue: string;\n setSearchValue: (value: string) => void;\n selectedLabel?: string;\n registerItemLabel: (value: string, label: string) => void;\n handleSelect: (value: string) => void;\n}\n\nconst ComboboxContext = React.createContext<ComboboxContextValue | null>(null);\n\n/**\n * Utility hook that ensures consumers are wrapped in Combobox.Root.\n */\nconst useComboboxContext = (caller: string) => {\n const ctx = React.useContext(ComboboxContext);\n if (!ctx) {\n throw new Error(`${caller} must be used within Combobox.Root`);\n }\n return ctx;\n};\n\n/**\n * Context for values that are only available inside Content (e.g., variant, color)\n * so that Input/Item can style themselves consistently.\n */\nconst ComboboxContentContext = React.createContext<{ variant: 'solid' | 'soft'; size?: string; color?: string; material?: string; highContrast?: boolean } | null>(null);\nconst useComboboxContentContext = () => {\n const ctx = React.useContext(ComboboxContentContext);\n return ctx; // Optional - Input might not always be in Content\n};\n\ntype PopoverRootProps = React.ComponentPropsWithoutRef<typeof Popover.Root>;\ninterface ComboboxRootProps extends PopoverRootProps, ComboboxRootOwnProps {}\n/**\n * Root component that wires up Popover behavior, controllable state,\n * and shared context for trigger/content/input sub-components.\n */\nconst ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {\n const {\n children,\n size = comboboxRootPropDefs.size.default,\n highContrast = comboboxRootPropDefs.highContrast.default,\n value: valueProp,\n defaultValue = null,\n onValueChange,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n placeholder = 'Select an option',\n searchPlaceholder = 'Search options...',\n searchValue: searchValueProp,\n defaultSearchValue = '',\n onSearchValueChange,\n filter,\n shouldFilter = true,\n loop = true,\n disabled,\n ...rootProps\n } = props;\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n const [value, setValue] = useControllableState<ComboboxValue>({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n const [searchValue, setSearchValue] = useControllableState<string>({\n prop: searchValueProp,\n defaultProp: defaultSearchValue,\n onChange: onSearchValueChange,\n });\n\n const labelMapRef = React.useRef(new Map<string, string>());\n const registerItemLabel = React.useCallback((itemValue: string, label: string) => {\n labelMapRef.current.set(itemValue, label);\n }, []);\n\n const selectedLabel = value != null ? labelMapRef.current.get(value) : undefined;\n\n const handleSelect = React.useCallback(\n (nextValue: string) => {\n setValue(nextValue);\n setOpen(false);\n setSearchValue('');\n },\n [setOpen, setSearchValue, setValue],\n );\n\n const contextValue = React.useMemo<ComboboxContextValue>(\n () => ({\n size,\n highContrast,\n placeholder,\n searchPlaceholder,\n filter,\n shouldFilter,\n loop,\n disabled,\n open,\n setOpen,\n value,\n setValue,\n searchValue,\n setSearchValue,\n selectedLabel,\n registerItemLabel,\n handleSelect,\n }),\n [\n size,\n highContrast,\n placeholder,\n searchPlaceholder,\n filter,\n shouldFilter,\n loop,\n disabled,\n open,\n setOpen,\n value,\n setValue,\n searchValue,\n setSearchValue,\n selectedLabel,\n registerItemLabel,\n handleSelect,\n ],\n );\n\n return (\n <ComboboxContext.Provider value={contextValue}>\n <Popover.Root open={open} onOpenChange={setOpen} {...rootProps}>\n {children}\n </Popover.Root>\n </ComboboxContext.Provider>\n );\n};\nComboboxRoot.displayName = 'Combobox.Root';\n\ntype ComboboxTriggerElement = HTMLButtonElement;\ntype ComboboxTriggerOwnProps = GetPropDefTypes<typeof comboboxTriggerPropDefs>;\ntype NativeTriggerProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'color'>;\ninterface ComboboxTriggerProps extends NativeTriggerProps, MarginProps, ComboboxTriggerOwnProps {}\n/**\n * Trigger behaves like a styled button that opens the Popover,\n * syncing size/highContrast from Root while exposing select-like states.\n */\nconst ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTriggerProps>((props, forwardedRef) => {\n const context = useComboboxContext('Combobox.Trigger');\n const { children, className, placeholder, disabled, readOnly, error, loading, color, radius, ...triggerProps } = extractProps(\n { size: context.size, highContrast: context.highContrast, ...props },\n { size: comboboxRootPropDefs.size, highContrast: comboboxRootPropDefs.highContrast },\n comboboxTriggerPropDefs,\n marginPropDefs,\n );\n\n // Extract material and panelBackground separately since they need to be passed as data attributes\n const { material, panelBackground } = props;\n\n const isDisabled = disabled ?? context.disabled;\n const ariaProps = React.useMemo(\n () => ({\n 'aria-expanded': context.open,\n 'aria-disabled': isDisabled || undefined,\n 'aria-haspopup': 'listbox' as const,\n }),\n [context.open, isDisabled],\n );\n\n const defaultContent = (\n <>\n <span className=\"rt-SelectTriggerInner\">\n <ComboboxValue placeholder={placeholder ?? context.placeholder} />\n </span>\n {loading ? (\n <div className=\"rt-SelectIcon rt-SelectLoadingIcon\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" strokeWidth=\"1\" strokeLinecap=\"round\" strokeDasharray=\"6 34\" strokeDashoffset=\"0\" className=\"rt-SelectLoadingSpinner\" />\n </svg>\n </div>\n ) : (\n <ChevronDownIcon className=\"rt-SelectIcon\" />\n )}\n </>\n );\n\n const { type: buttonType, ...restTriggerProps } = triggerProps;\n const resolvedButtonType = buttonType ?? 'button';\n\n const triggerChild = (\n <button\n data-accent-color={color}\n data-radius={radius}\n data-panel-background={panelBackground}\n data-material={material}\n data-error={error}\n data-loading={loading}\n data-disabled={isDisabled || undefined}\n data-read-only={readOnly || undefined}\n {...restTriggerProps}\n {...ariaProps}\n type={resolvedButtonType}\n disabled={isDisabled}\n ref={forwardedRef}\n className={classNames('rt-reset', 'rt-SelectTrigger', 'rt-ComboboxTrigger', className)}\n >\n {children ? requireReactElement(children) : defaultContent}\n </button>\n );\n\n return <Popover.Trigger disabled={isDisabled}>{triggerChild}</Popover.Trigger>;\n});\nComboboxTrigger.displayName = 'Combobox.Trigger';\n\ntype ComboboxValueElement = HTMLSpanElement;\ninterface ComboboxValueProps extends React.ComponentPropsWithoutRef<'span'> {\n placeholder?: string;\n}\n/**\n * Value mirrors Select.Value by showing the selected item's label\n * or falling back to placeholder text supplied by the consumer or context.\n */\nconst ComboboxValue = React.forwardRef<ComboboxValueElement, ComboboxValueProps>(({ placeholder, children, className, ...valueProps }, forwardedRef) => {\n const context = useComboboxContext('Combobox.Value');\n const displayValue = context.selectedLabel ?? context.value ?? undefined;\n const fallback = placeholder ?? context.placeholder;\n return (\n <span {...valueProps} ref={forwardedRef} className={classNames('rt-ComboboxValue', className)}>\n {displayValue ?? children ?? fallback}\n </span>\n );\n});\nComboboxValue.displayName = 'Combobox.Value';\n\ntype ComboboxContentElement = React.ElementRef<typeof Popover.Content>;\ntype ComboboxContentOwnProps = GetPropDefTypes<typeof comboboxContentPropDefs> & {\n container?: React.ComponentPropsWithoutRef<typeof Popover.Content>['container'];\n};\ninterface ComboboxContentProps extends Omit<ComponentPropsWithout<typeof Popover.Content, RemovedProps>, 'size'>, ComboboxContentOwnProps {}\n/**\n * Content renders the dropdown surface, syncing tokens from the current Theme\n * and instantiating cmdk's Command list for roving focus + filtering.\n */\nconst ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContentProps>((props, forwardedRef) => {\n const context = useComboboxContext('Combobox.Content');\n const themeContext = useThemeContext();\n const effectiveMaterial = themeContext.panelBackground;\n\n const sizeProp = props.size ?? context.size ?? comboboxContentPropDefs.size.default;\n const variantProp = props.variant ?? comboboxContentPropDefs.variant.default;\n const highContrastProp = props.highContrast ?? context.highContrast ?? comboboxContentPropDefs.highContrast.default;\n\n const { className, children, color, forceMount, container, ...contentProps } = extractProps(\n { ...props, size: sizeProp, variant: variantProp, highContrast: highContrastProp },\n comboboxContentPropDefs,\n );\n const resolvedColor = color || themeContext.accentColor;\n let sanitizedClassName = className;\n if (typeof sizeProp === 'string') {\n sanitizedClassName =\n className\n ?.split(/\\s+/)\n .filter(Boolean)\n .filter((token) => !/^rt-r-size-\\d$/.test(token))\n .join(' ') || undefined;\n }\n\n return (\n <Popover.Content\n size={sizeProp}\n data-accent-color={resolvedColor}\n data-material={effectiveMaterial}\n data-panel-background={effectiveMaterial}\n align=\"start\"\n sideOffset={4}\n collisionPadding={10}\n {...contentProps}\n forceMount={forceMount}\n container={container}\n ref={forwardedRef}\n className={classNames('rt-PopperContent', 'rt-BaseMenuContent', 'rt-ComboboxContent', sanitizedClassName)}\n >\n <Theme asChild>\n <ComboboxContentContext.Provider value={{ variant: variantProp, size: String(sizeProp), color: resolvedColor, material: effectiveMaterial, highContrast: highContrastProp }}>\n <CommandPrimitive\n loop={context.loop}\n value={context.searchValue}\n onValueChange={context.setSearchValue}\n shouldFilter={context.shouldFilter}\n filter={context.filter}\n className=\"rt-ComboboxCommand\"\n >\n {children}\n </CommandPrimitive>\n </ComboboxContentContext.Provider>\n </Theme>\n </Popover.Content>\n );\n});\nComboboxContent.displayName = 'Combobox.Content';\n\ntype ComboboxInputElement = React.ElementRef<typeof CommandPrimitive.Input>;\ninterface ComboboxInputProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n variant?: TextFieldVariant;\n}\n/**\n * Input composes TextField tokens with cmdk's Command.Input to provide\n * automatic focus management and optional adornments.\n */\nconst ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>(({ className, startAdornment, endAdornment, placeholder, variant: inputVariant, ...inputProps }, forwardedRef) => {\n const context = useComboboxContext('Combobox.Input');\n const contentContext = useComboboxContentContext();\n const contentVariant = contentContext?.variant ?? 'solid';\n const color = contentContext?.color;\n const material = contentContext?.material;\n\n // Map combobox variant to textfield variant: solid -> surface, soft -> soft unless overridden\n const textFieldVariant = inputVariant ?? (contentVariant === 'solid' ? 'surface' : 'soft');\n\n const inputField = (\n <div\n className={classNames('rt-TextFieldRoot', 'rt-ComboboxInputRoot', `rt-r-size-${context.size}`, `rt-variant-${textFieldVariant}`)}\n data-accent-color={color}\n data-material={material}\n data-panel-background={material}\n >\n {startAdornment ? <div className=\"rt-TextFieldSlot\">{startAdornment}</div> : null}\n <CommandPrimitive.Input {...inputProps} ref={forwardedRef} placeholder={placeholder ?? context.searchPlaceholder} className={classNames('rt-reset', 'rt-TextFieldInput', className)} />\n {endAdornment ? (\n <div className=\"rt-TextFieldSlot\" data-side=\"right\">\n {endAdornment}\n </div>\n ) : null}\n </div>\n );\n\n if (contentContext) {\n return <div className=\"rt-ComboboxSearch\">{inputField}</div>;\n }\n\n return inputField;\n});\nComboboxInput.displayName = 'Combobox.Input';\n\ntype ComboboxListElement = React.ElementRef<typeof CommandPrimitive.List>;\ninterface ComboboxListProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> {}\n/**\n * List wraps cmdk's Command.List to inherit base menu styles and provides ScrollArea for the items.\n */\nconst ComboboxList = React.forwardRef<ComboboxListElement, ComboboxListProps>(({ className, ...listProps }, forwardedRef) => (\n <ScrollArea type=\"auto\" className=\"rt-ComboboxScrollArea\" scrollbars=\"vertical\" size=\"1\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-ComboboxViewport')}>\n <CommandPrimitive.List {...listProps} ref={forwardedRef} className={classNames('rt-ComboboxList', className)} />\n </div>\n </ScrollArea>\n));\nComboboxList.displayName = 'Combobox.List';\n\ntype ComboboxEmptyElement = React.ElementRef<typeof CommandPrimitive.Empty>;\ninterface ComboboxEmptyProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> {}\n/**\n * Empty renders when no options match the search query.\n */\nconst ComboboxEmpty = React.forwardRef<ComboboxEmptyElement, ComboboxEmptyProps>(({ className, ...emptyProps }, forwardedRef) => (\n <CommandPrimitive.Empty {...emptyProps} ref={forwardedRef} className={classNames('rt-ComboboxEmpty', className)} />\n));\nComboboxEmpty.displayName = 'Combobox.Empty';\n\ntype ComboboxGroupElement = React.ElementRef<typeof CommandPrimitive.Group>;\ninterface ComboboxGroupProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> {}\n/**\n * Group and Label mirror menu semantics for subheadings inside the list.\n */\nconst ComboboxGroup = React.forwardRef<ComboboxGroupElement, ComboboxGroupProps>(({ className, ...groupProps }, forwardedRef) => (\n <CommandPrimitive.Group {...groupProps} ref={forwardedRef} className={classNames('rt-BaseMenuGroup', 'rt-ComboboxGroup', className)} />\n));\nComboboxGroup.displayName = 'Combobox.Group';\n\ntype ComboboxLabelElement = React.ElementRef<'div'>;\ninterface ComboboxLabelProps extends React.ComponentPropsWithoutRef<'div'> {}\nconst ComboboxLabel = React.forwardRef<ComboboxLabelElement, ComboboxLabelProps>(({ className, ...labelProps }, forwardedRef) => (\n <div {...labelProps} ref={forwardedRef} className={classNames('rt-BaseMenuLabel', 'rt-ComboboxLabel', className)} />\n));\nComboboxLabel.displayName = 'Combobox.Label';\n\ntype ComboboxSeparatorElement = React.ElementRef<typeof CommandPrimitive.Separator>;\ninterface ComboboxSeparatorProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> {}\n/**\n * Separator visually divides logical sections of the option list.\n */\nconst ComboboxSeparator = React.forwardRef<ComboboxSeparatorElement, ComboboxSeparatorProps>(({ className, ...separatorProps }, forwardedRef) => (\n <CommandPrimitive.Separator {...separatorProps} ref={forwardedRef} className={classNames('rt-BaseMenuSeparator', 'rt-ComboboxSeparator', className)} />\n));\nComboboxSeparator.displayName = 'Combobox.Separator';\n\ntype ComboboxItemElement = React.ElementRef<typeof CommandPrimitive.Item>;\ninterface ComboboxItemProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> {\n label?: string;\n}\n/**\n * Item wires cmdk's selection handling with Kookie UI tokens and\n * ensures labels are registered for displaying the current value.\n */\nconst ComboboxItem = React.forwardRef<ComboboxItemElement, ComboboxItemProps>(({ className, children, label, value, disabled, onSelect, ...itemProps }, forwardedRef) => {\n const context = useComboboxContext('Combobox.Item');\n const contentContext = useComboboxContentContext();\n const itemLabel = label ?? (typeof children === 'string' ? children : String(value));\n const isSelected = value != null && context.value === value;\n const sizeClass = contentContext?.size ? `rt-r-size-${contentContext.size}` : undefined;\n\n React.useEffect(() => {\n if (value) {\n context.registerItemLabel(value, itemLabel);\n }\n }, [context, value, itemLabel]);\n\n const handleSelect = React.useCallback(\n (selectedValue: string) => {\n context.handleSelect(selectedValue);\n onSelect?.(selectedValue);\n },\n [context, onSelect],\n );\n\n const isDisabled = disabled ?? context.disabled ?? false;\n\n // Internal ref to clean up data-disabled attribute\n const internalRef = React.useRef<ComboboxItemElement | null>(null);\n\n // Ref callback to handle both forwarded ref and internal ref\n const itemRef = React.useCallback(\n (node: ComboboxItemElement | null) => {\n internalRef.current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n (forwardedRef as React.MutableRefObject<ComboboxItemElement | null>).current = node;\n }\n },\n [forwardedRef],\n );\n\n // Remove data-disabled attribute if cmdk sets it incorrectly\n React.useEffect(() => {\n if (!isDisabled && internalRef.current) {\n const node = internalRef.current;\n // Check and remove immediately\n if (node.getAttribute('data-disabled') === 'false' || node.getAttribute('data-disabled') === '') {\n node.removeAttribute('data-disabled');\n }\n // Also watch for changes\n const observer = new MutationObserver(() => {\n if (node.getAttribute('data-disabled') === 'false' || node.getAttribute('data-disabled') === '') {\n node.removeAttribute('data-disabled');\n }\n });\n observer.observe(node, { attributes: true, attributeFilter: ['data-disabled'] });\n return () => observer.disconnect();\n }\n }, [isDisabled]);\n\n return (\n <CommandPrimitive.Item\n {...itemProps}\n value={value}\n {...(isDisabled ? { disabled: true } : {})}\n ref={itemRef}\n onSelect={handleSelect}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-ComboboxItem', className)}\n >\n {isSelected ? (\n <span className={classNames('rt-BaseMenuItemIndicator', 'rt-ComboboxItemIndicator', sizeClass)}>\n <ThickCheckIcon className={classNames('rt-BaseMenuItemIndicatorIcon', 'rt-ComboboxItemIndicatorIcon', sizeClass)} />\n </span>\n ) : null}\n <Slottable>{children}</Slottable>\n </CommandPrimitive.Item>\n );\n});\nComboboxItem.displayName = 'Combobox.Item';\n\nexport {\n ComboboxRoot as Root,\n ComboboxTrigger as Trigger,\n ComboboxValue as Value,\n ComboboxContent as Content,\n ComboboxInput as Input,\n ComboboxList as List,\n ComboboxEmpty as Empty,\n ComboboxGroup as Group,\n ComboboxLabel as Label,\n ComboboxSeparator as Separator,\n ComboboxItem as Item,\n};\nexport type {\n ComboboxRootProps as RootProps,\n ComboboxTriggerProps as TriggerProps,\n ComboboxContentProps as ContentProps,\n ComboboxInputProps as InputProps,\n ComboboxListProps as ListProps,\n ComboboxEmptyProps as EmptyProps,\n ComboboxGroupProps as GroupProps,\n ComboboxLabelProps as LabelProps,\n ComboboxSeparatorProps as SeparatorProps,\n ComboboxItemProps as ItemProps,\n};\n"],
|
|
5
|
-
"mappings": "slBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,EAAA,UAAAC,EAAA,UAAAC,EAAA,UAAAC,EAAA,SAAAC,
|
|
6
|
-
"names": ["combobox_exports", "__export", "ComboboxContent", "ComboboxEmpty", "ComboboxGroup", "ComboboxInput", "ComboboxItem", "ComboboxLabel", "ComboboxList", "ComboboxRoot", "ComboboxSeparator", "ComboboxTrigger", "ComboboxValue", "__toCommonJS", "React", "import_classnames", "import_internal", "import_cmdk", "import_extract_props", "import_combobox_props", "import_margin_props", "import_icons", "import_theme", "import_require_react_element", "Popover", "import_scroll_area", "import_slot", "import_text_field_props", "ComboboxContext", "useComboboxContext", "caller", "ctx", "ComboboxContentContext", "useComboboxContentContext", "props", "children", "size", "highContrast", "valueProp", "defaultValue", "onValueChange", "openProp", "defaultOpen", "onOpenChange", "placeholder", "searchPlaceholder", "searchValueProp", "defaultSearchValue", "onSearchValueChange", "filter", "shouldFilter", "loop", "disabled", "rootProps", "open", "setOpen", "value", "setValue", "searchValue", "setSearchValue", "labelMapRef", "registerItemLabel", "itemValue", "label", "
|
|
4
|
+
"sourcesContent": ["'use client';\n\n/**\n * Combobox is a compound component built on top of Popover and cmdk's Command list.\n * It mirrors the Select API while adding search-first behaviors including filtering,\n * async-friendly state management, and design token support for trigger, content,\n * and input variants.\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useControllableState } from 'radix-ui/internal';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport { extractProps } from '../helpers/extract-props.js';\nimport { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\nimport { ChevronDownIcon, ThickCheckIcon } from './icons.js';\nimport { Theme, useThemeContext } from './theme.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport * as Popover from './popover.js';\nimport { ScrollArea } from './scroll-area.js';\nimport { Slottable } from './slot.js';\nimport { textFieldRootPropDefs } from './text-field.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype TextFieldVariant = (typeof textFieldRootPropDefs.variant.values)[number];\ntype ComboboxValue = string | null;\n/**\n * Custom filter function for Combobox search.\n * @param value - The item's value being tested\n * @param search - The current search string\n * @param keywords - Optional keywords associated with the item\n * @returns A number between 0 and 1 where 0 means no match and 1 means exact match.\n * Fractional values indicate relevance for sorting.\n */\ntype CommandFilter = (value: string, search: string, keywords?: string[]) => number;\n\n/**\n * Additional props supported by Combobox.Root beyond the Radix Popover surface.\n */\ntype ComboboxRootOwnProps = GetPropDefTypes<typeof comboboxRootPropDefs> & {\n value?: ComboboxValue;\n defaultValue?: ComboboxValue;\n onValueChange?: (value: ComboboxValue) => void;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n placeholder?: string;\n searchPlaceholder?: string;\n searchValue?: string;\n defaultSearchValue?: string;\n onSearchValueChange?: (value: string) => void;\n filter?: CommandFilter;\n shouldFilter?: boolean;\n loop?: boolean;\n disabled?: boolean;\n /**\n * Whether to reset the search value when an option is selected.\n * @default true\n */\n resetSearchOnSelect?: boolean;\n /**\n * Accent color for the combobox trigger and content.\n */\n color?: (typeof comboboxTriggerPropDefs.color.values)[number];\n /**\n * Display value shown in the trigger. This is the recommended approach for\n * best performance as it avoids needing to mount items to register labels.\n * \n * Can be either:\n * - A string: Static display value\n * - A function: `(value: string | null) => string | undefined` - Called with current value\n * \n * Use this when:\n * - You have the selected item's label available (e.g., from your data source)\n * - Items haven't mounted yet (e.g., on initial render with a defaultValue)\n * - You want optimal performance with forceMount={false} (default)\n * \n * @example\n * // Static string\n * <Combobox.Root value=\"usa\" displayValue=\"United States\">\n * \n * // Function (recommended for dynamic data)\n * <Combobox.Root \n * value={selectedCountry}\n * displayValue={(value) => countries.find(c => c.code === value)?.name}\n * >\n * \n * If not provided, falls back to the label registered by the selected item\n * (requires forceMount={true}), then to the raw value.\n */\n displayValue?: string | ((value: ComboboxValue) => string | undefined);\n};\n\n/**\n * Internal context shared by all sub-components to avoid prop drilling.\n */\ninterface ComboboxContextValue extends ComboboxRootOwnProps {\n open: boolean;\n setOpen: (open: boolean) => void;\n value: ComboboxValue;\n setValue: (value: ComboboxValue) => void;\n searchValue: string;\n setSearchValue: (value: string) => void;\n /** Label registered by the selected item */\n selectedLabel?: string;\n /** Resolved display value (already computed from string or function) */\n resolvedDisplayValue?: string;\n registerItemLabel: (value: string, label: string) => void;\n unregisterItemLabel: (value: string) => void;\n handleSelect: (value: string) => void;\n listboxId: string;\n activeDescendantId: string | undefined;\n setActiveDescendantId: (id: string | undefined) => void;\n}\n\nconst ComboboxContext = React.createContext<ComboboxContextValue | null>(null);\n\n/**\n * Utility hook that ensures consumers are wrapped in Combobox.Root.\n */\nconst useComboboxContext = (caller: string) => {\n const ctx = React.useContext(ComboboxContext);\n if (!ctx) {\n throw new Error(`${caller} must be used within Combobox.Root`);\n }\n return ctx;\n};\n\n/**\n * Context for values that are only available inside Content (e.g., variant, color)\n * so that Input/Item can style themselves consistently.\n */\nconst ComboboxContentContext = React.createContext<{ variant: 'solid' | 'soft'; size?: string; color?: string; material?: string; highContrast?: boolean } | null>(null);\nconst useComboboxContentContext = () => {\n const ctx = React.useContext(ComboboxContentContext);\n return ctx; // Optional - Input might not always be in Content\n};\n\ntype PopoverRootProps = React.ComponentPropsWithoutRef<typeof Popover.Root>;\ninterface ComboboxRootProps extends PopoverRootProps, ComboboxRootOwnProps {}\n/**\n * Root component that wires up Popover behavior, controllable state,\n * and shared context for trigger/content/input sub-components.\n */\nconst ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {\n const {\n children,\n size = comboboxRootPropDefs.size.default,\n highContrast = comboboxRootPropDefs.highContrast.default,\n value: valueProp,\n defaultValue = null,\n onValueChange,\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n placeholder = 'Select an option',\n searchPlaceholder = 'Search options...',\n searchValue: searchValueProp,\n defaultSearchValue = '',\n onSearchValueChange,\n filter,\n shouldFilter = true,\n loop = true,\n disabled,\n resetSearchOnSelect = true,\n color,\n displayValue: displayValueProp,\n ...rootProps\n } = props;\n\n // Generate stable IDs for accessibility\n const generatedId = React.useId();\n const listboxId = `combobox-listbox-${generatedId}`;\n const [activeDescendantId, setActiveDescendantId] = React.useState<string | undefined>(undefined);\n\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n const [value, setValue] = useControllableState<ComboboxValue>({\n prop: valueProp,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n const [searchValue, setSearchValue] = useControllableState<string>({\n prop: searchValueProp,\n defaultProp: defaultSearchValue,\n onChange: onSearchValueChange,\n });\n\n const labelMapRef = React.useRef(new Map<string, string>());\n // Track the selected label in state so it triggers re-renders when items register\n const [selectedLabel, setSelectedLabel] = React.useState<string | undefined>(undefined);\n\n const registerItemLabel = React.useCallback((itemValue: string, label: string) => {\n labelMapRef.current.set(itemValue, label);\n // If this item matches the current value, update the selected label\n if (itemValue === value) {\n setSelectedLabel(label);\n }\n }, [value]);\n\n const unregisterItemLabel = React.useCallback((itemValue: string) => {\n labelMapRef.current.delete(itemValue);\n }, []);\n\n // Update selected label when value changes\n React.useEffect(() => {\n if (value != null) {\n const label = labelMapRef.current.get(value);\n setSelectedLabel(label);\n } else {\n setSelectedLabel(undefined);\n }\n }, [value]);\n\n const handleSelect = React.useCallback(\n (nextValue: string) => {\n setValue(nextValue);\n setOpen(false);\n if (resetSearchOnSelect) {\n setSearchValue('');\n }\n },\n [setOpen, setSearchValue, setValue, resetSearchOnSelect],\n );\n\n // Development mode warning for value not matching any registered item\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && value != null && !labelMapRef.current.has(value)) {\n // Defer the check to allow items to register first\n const timeoutId = setTimeout(() => {\n if (value != null && !labelMapRef.current.has(value)) {\n console.warn(\n `[Combobox] The value \"${value}\" does not match any Combobox.Item. ` +\n `Make sure each Item has a matching value prop.`,\n );\n }\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [value]);\n\n // Resolve displayValue: compute if function, use directly if string\n const resolvedDisplayValue = React.useMemo(() => {\n if (displayValueProp == null) return undefined;\n if (typeof displayValueProp === 'function') {\n return displayValueProp(value);\n }\n return displayValueProp;\n }, [displayValueProp, value]);\n\n const contextValue = React.useMemo<ComboboxContextValue>(\n () => ({\n size,\n highContrast,\n placeholder,\n searchPlaceholder,\n filter,\n shouldFilter,\n loop,\n disabled,\n resetSearchOnSelect,\n color,\n resolvedDisplayValue,\n open,\n setOpen,\n value,\n setValue,\n searchValue,\n setSearchValue,\n selectedLabel,\n registerItemLabel,\n unregisterItemLabel,\n handleSelect,\n listboxId,\n activeDescendantId,\n setActiveDescendantId,\n }),\n [\n size,\n highContrast,\n placeholder,\n searchPlaceholder,\n filter,\n shouldFilter,\n loop,\n disabled,\n resetSearchOnSelect,\n color,\n resolvedDisplayValue,\n open,\n setOpen,\n value,\n setValue,\n searchValue,\n setSearchValue,\n selectedLabel,\n registerItemLabel,\n unregisterItemLabel,\n handleSelect,\n listboxId,\n activeDescendantId,\n setActiveDescendantId,\n ],\n );\n\n return (\n <ComboboxContext.Provider value={contextValue}>\n <Popover.Root open={open} onOpenChange={setOpen} {...rootProps}>\n {children}\n </Popover.Root>\n </ComboboxContext.Provider>\n );\n};\nComboboxRoot.displayName = 'Combobox.Root';\n\ntype ComboboxTriggerElement = HTMLButtonElement;\ntype ComboboxTriggerOwnProps = GetPropDefTypes<typeof comboboxTriggerPropDefs>;\ntype NativeTriggerProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'color'>;\ninterface ComboboxTriggerProps extends NativeTriggerProps, MarginProps, ComboboxTriggerOwnProps {}\n/**\n * Trigger behaves like a styled button that opens the Popover,\n * syncing size/highContrast from Root while exposing select-like states.\n */\nconst ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTriggerProps>((props, forwardedRef) => {\n const context = useComboboxContext('Combobox.Trigger');\n const { children, className, placeholder, disabled, readOnly, error, loading, color, radius, ...triggerProps } = extractProps(\n { size: context.size, highContrast: context.highContrast, ...props },\n { size: comboboxRootPropDefs.size, highContrast: comboboxRootPropDefs.highContrast },\n comboboxTriggerPropDefs,\n marginPropDefs,\n );\n\n // Extract material and panelBackground separately since they need to be passed as data attributes\n const { material, panelBackground } = props;\n\n const isDisabled = disabled ?? context.disabled;\n\n // Use color from props or fall back to context color\n const resolvedColor = color ?? context.color;\n\n // Comprehensive ARIA attributes for combobox pattern (WAI-ARIA 1.2)\n const ariaProps = React.useMemo(\n () => ({\n role: 'combobox' as const,\n 'aria-expanded': context.open,\n 'aria-disabled': isDisabled || undefined,\n 'aria-haspopup': 'listbox' as const,\n 'aria-controls': context.open ? context.listboxId : undefined,\n 'aria-activedescendant': context.open ? context.activeDescendantId : undefined,\n 'aria-autocomplete': 'list' as const,\n }),\n [context.open, context.listboxId, context.activeDescendantId, isDisabled],\n );\n\n const defaultContent = (\n <>\n <span className=\"rt-SelectTriggerInner\">\n <ComboboxValue placeholder={placeholder ?? context.placeholder} />\n </span>\n {loading ? (\n <div className=\"rt-SelectIcon rt-SelectLoadingIcon\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6.5\" stroke=\"currentColor\" strokeWidth=\"1\" strokeLinecap=\"round\" strokeDasharray=\"6 34\" strokeDashoffset=\"0\" className=\"rt-SelectLoadingSpinner\" />\n </svg>\n </div>\n ) : (\n <ChevronDownIcon className=\"rt-SelectIcon\" />\n )}\n </>\n );\n\n const { type: buttonType, ...restTriggerProps } = triggerProps;\n const resolvedButtonType = buttonType ?? 'button';\n\n const triggerChild = (\n <button\n data-accent-color={resolvedColor}\n data-radius={radius}\n data-panel-background={panelBackground}\n data-material={material}\n data-error={error}\n data-loading={loading}\n data-disabled={isDisabled || undefined}\n data-read-only={readOnly || undefined}\n {...restTriggerProps}\n {...ariaProps}\n type={resolvedButtonType}\n disabled={isDisabled}\n ref={forwardedRef}\n className={classNames('rt-reset', 'rt-SelectTrigger', 'rt-ComboboxTrigger', className)}\n >\n {children ? requireReactElement(children) : defaultContent}\n </button>\n );\n\n return <Popover.Trigger disabled={isDisabled}>{triggerChild}</Popover.Trigger>;\n});\nComboboxTrigger.displayName = 'Combobox.Trigger';\n\ntype ComboboxValueElement = HTMLSpanElement;\ninterface ComboboxValueProps extends React.ComponentPropsWithoutRef<'span'> {\n placeholder?: string;\n}\n/**\n * Value mirrors Select.Value by showing the selected item's label\n * or falling back to placeholder text supplied by the consumer or context.\n * \n * Priority: resolvedDisplayValue (explicit) > selectedLabel (from items) > raw value > children > placeholder\n */\nconst ComboboxValue = React.forwardRef<ComboboxValueElement, ComboboxValueProps>(({ placeholder, children, className, ...valueProps }, forwardedRef) => {\n const context = useComboboxContext('Combobox.Value');\n // Priority: explicit displayValue (resolved) > registered label > raw value\n const displayValue = context.resolvedDisplayValue ?? context.selectedLabel ?? context.value ?? undefined;\n const fallback = placeholder ?? context.placeholder;\n return (\n <span {...valueProps} ref={forwardedRef} className={classNames('rt-ComboboxValue', className)}>\n {displayValue ?? children ?? fallback}\n </span>\n );\n});\nComboboxValue.displayName = 'Combobox.Value';\n\ntype ComboboxContentElement = React.ElementRef<typeof Popover.Content>;\ntype ComboboxContentOwnProps = GetPropDefTypes<typeof comboboxContentPropDefs> & {\n container?: React.ComponentPropsWithoutRef<typeof Popover.Content>['container'];\n};\ninterface ComboboxContentProps extends Omit<ComponentPropsWithout<typeof Popover.Content, RemovedProps>, 'size'>, ComboboxContentOwnProps {}\n/**\n * Content renders the dropdown surface, syncing tokens from the current Theme\n * and instantiating cmdk's Command list for roving focus + filtering.\n */\nconst ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContentProps>((props, forwardedRef) => {\n const context = useComboboxContext('Combobox.Content');\n const themeContext = useThemeContext();\n const effectiveMaterial = themeContext.panelBackground;\n\n const sizeProp = props.size ?? context.size ?? comboboxContentPropDefs.size.default;\n const variantProp = props.variant ?? comboboxContentPropDefs.variant.default;\n const highContrastProp = props.highContrast ?? context.highContrast ?? comboboxContentPropDefs.highContrast.default;\n\n const { className, children, color, forceMount, container, ...contentProps } = extractProps(\n { ...props, size: sizeProp, variant: variantProp, highContrast: highContrastProp },\n comboboxContentPropDefs,\n );\n const resolvedColor = color || context.color || themeContext.accentColor;\n \n // Memoize className sanitization to avoid string operations on every render\n const sanitizedClassName = React.useMemo(() => {\n if (typeof sizeProp !== 'string') return className;\n return className\n ?.split(/\\s+/)\n .filter(Boolean)\n .filter((token) => !/^rt-r-size-\\d$/.test(token))\n .join(' ') || undefined;\n }, [className, sizeProp]);\n\n /**\n * forceMount behavior:\n * - When true: Content stays mounted when closed, allowing items to register labels\n * for display in the trigger. Use this if you need dynamic label resolution.\n * - When false/undefined (default): Content unmounts when closed for better performance.\n * Use the `displayValue` prop on Root to show the selected label instead.\n * \n * For best performance with large lists, keep forceMount=undefined and provide displayValue.\n */\n const shouldForceMount = forceMount === true ? true : undefined;\n\n return (\n <Popover.Content\n size={sizeProp}\n data-accent-color={resolvedColor}\n data-material={effectiveMaterial}\n data-panel-background={effectiveMaterial}\n align=\"start\"\n sideOffset={4}\n collisionPadding={10}\n {...contentProps}\n forceMount={shouldForceMount}\n container={container}\n ref={forwardedRef}\n className={classNames('rt-PopperContent', 'rt-BaseMenuContent', 'rt-ComboboxContent', sanitizedClassName)}\n >\n <Theme asChild>\n <ComboboxContentContext.Provider value={{ variant: variantProp, size: String(sizeProp), color: resolvedColor, material: effectiveMaterial, highContrast: highContrastProp }}>\n <CommandPrimitive\n loop={context.loop}\n shouldFilter={context.shouldFilter}\n filter={context.filter}\n className=\"rt-ComboboxCommand\"\n >\n {children}\n </CommandPrimitive>\n </ComboboxContentContext.Provider>\n </Theme>\n </Popover.Content>\n );\n});\nComboboxContent.displayName = 'Combobox.Content';\n\ntype ComboboxInputElement = React.ElementRef<typeof CommandPrimitive.Input>;\ninterface ComboboxInputProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>, 'value' | 'onValueChange'> {\n startAdornment?: React.ReactNode;\n endAdornment?: React.ReactNode;\n variant?: TextFieldVariant;\n /** Controlled search value. Falls back to Root's searchValue if not provided. */\n value?: string;\n /** Callback when search value changes. Falls back to Root's onSearchValueChange if not provided. */\n onValueChange?: (value: string) => void;\n}\n/**\n * Input composes TextField tokens with cmdk's Command.Input to provide\n * automatic focus management and optional adornments.\n */\nconst ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>(({ className, startAdornment, endAdornment, placeholder, variant: inputVariant, value, onValueChange, ...inputProps }, forwardedRef) => {\n const context = useComboboxContext('Combobox.Input');\n const contentContext = useComboboxContentContext();\n const contentVariant = contentContext?.variant ?? 'solid';\n const color = contentContext?.color;\n const material = contentContext?.material;\n\n /**\n * Map combobox content variant to TextField variant:\n * - Content 'solid' \u2192 Input 'surface' (elevated input on solid background)\n * - Content 'soft' \u2192 Input 'soft' (subtle input on soft background)\n * This ensures visual harmony between the input and surrounding content.\n */\n const textFieldVariant = inputVariant ?? (contentVariant === 'solid' ? 'surface' : 'soft');\n\n // Use controlled search value from context, allow override via props\n const searchValue = value ?? context.searchValue;\n const handleSearchChange = onValueChange ?? context.setSearchValue;\n\n const inputField = (\n <div\n className={classNames('rt-TextFieldRoot', 'rt-ComboboxInputRoot', `rt-r-size-${context.size}`, `rt-variant-${textFieldVariant}`)}\n data-accent-color={color}\n data-material={material}\n data-panel-background={material}\n >\n {startAdornment ? <div className=\"rt-TextFieldSlot\">{startAdornment}</div> : null}\n <CommandPrimitive.Input\n {...inputProps}\n ref={forwardedRef}\n value={searchValue}\n onValueChange={handleSearchChange}\n placeholder={placeholder ?? context.searchPlaceholder}\n className={classNames('rt-reset', 'rt-TextFieldInput', className)}\n />\n {endAdornment ? (\n <div className=\"rt-TextFieldSlot\" data-side=\"right\">\n {endAdornment}\n </div>\n ) : null}\n </div>\n );\n\n if (contentContext) {\n return <div className=\"rt-ComboboxSearch\">{inputField}</div>;\n }\n\n return inputField;\n});\nComboboxInput.displayName = 'Combobox.Input';\n\ntype ComboboxListElement = React.ElementRef<typeof CommandPrimitive.List>;\ninterface ComboboxListProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> {}\n/**\n * List wraps cmdk's Command.List to inherit base menu styles and provides ScrollArea for the items.\n * Also handles aria-activedescendant tracking via a single MutationObserver for all items.\n */\nconst ComboboxList = React.forwardRef<ComboboxListElement, ComboboxListProps>(({ className, ...listProps }, forwardedRef) => {\n const context = useComboboxContext('Combobox.List');\n const listRef = React.useRef<HTMLDivElement | null>(null);\n\n // Combined ref handling\n const combinedRef = React.useCallback(\n (node: HTMLDivElement | null) => {\n listRef.current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [forwardedRef],\n );\n\n /**\n * Single MutationObserver at List level to track aria-activedescendant.\n * This replaces per-item observers for better performance with large lists.\n */\n React.useEffect(() => {\n const listNode = listRef.current;\n if (!listNode) return;\n\n const updateActiveDescendant = () => {\n const selectedItem = listNode.querySelector('[data-selected=\"true\"], [aria-selected=\"true\"]');\n const itemId = selectedItem?.id;\n context.setActiveDescendantId(itemId || undefined);\n };\n\n // Initial check\n updateActiveDescendant();\n\n // Watch for attribute changes on any descendant\n const observer = new MutationObserver(updateActiveDescendant);\n observer.observe(listNode, {\n attributes: true,\n attributeFilter: ['data-selected', 'aria-selected'],\n subtree: true,\n });\n\n return () => observer.disconnect();\n }, [context.setActiveDescendantId]);\n\n return (\n <ScrollArea type=\"auto\" className=\"rt-ComboboxScrollArea\" scrollbars=\"vertical\" size=\"1\">\n <div className={classNames('rt-BaseMenuViewport', 'rt-ComboboxViewport')}>\n <CommandPrimitive.List\n {...listProps}\n ref={combinedRef}\n id={context.listboxId}\n role=\"listbox\"\n aria-label=\"Options\"\n className={classNames('rt-ComboboxList', className)}\n />\n </div>\n </ScrollArea>\n );\n});\nComboboxList.displayName = 'Combobox.List';\n\ntype ComboboxEmptyElement = React.ElementRef<typeof CommandPrimitive.Empty>;\ninterface ComboboxEmptyProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> {}\n/**\n * Empty renders when no options match the search query.\n */\nconst ComboboxEmpty = React.forwardRef<ComboboxEmptyElement, ComboboxEmptyProps>(({ className, ...emptyProps }, forwardedRef) => (\n <CommandPrimitive.Empty {...emptyProps} ref={forwardedRef} className={classNames('rt-ComboboxEmpty', className)} />\n));\nComboboxEmpty.displayName = 'Combobox.Empty';\n\ntype ComboboxGroupElement = React.ElementRef<typeof CommandPrimitive.Group>;\ninterface ComboboxGroupProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> {}\n/**\n * Group and Label mirror menu semantics for subheadings inside the list.\n */\nconst ComboboxGroup = React.forwardRef<ComboboxGroupElement, ComboboxGroupProps>(({ className, ...groupProps }, forwardedRef) => (\n <CommandPrimitive.Group {...groupProps} ref={forwardedRef} className={classNames('rt-BaseMenuGroup', 'rt-ComboboxGroup', className)} />\n));\nComboboxGroup.displayName = 'Combobox.Group';\n\ntype ComboboxLabelElement = React.ElementRef<'div'>;\ninterface ComboboxLabelProps extends React.ComponentPropsWithoutRef<'div'> {}\nconst ComboboxLabel = React.forwardRef<ComboboxLabelElement, ComboboxLabelProps>(({ className, ...labelProps }, forwardedRef) => (\n <div {...labelProps} ref={forwardedRef} className={classNames('rt-BaseMenuLabel', 'rt-ComboboxLabel', className)} />\n));\nComboboxLabel.displayName = 'Combobox.Label';\n\ntype ComboboxSeparatorElement = React.ElementRef<typeof CommandPrimitive.Separator>;\ninterface ComboboxSeparatorProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> {}\n/**\n * Separator visually divides logical sections of the option list.\n */\nconst ComboboxSeparator = React.forwardRef<ComboboxSeparatorElement, ComboboxSeparatorProps>(({ className, ...separatorProps }, forwardedRef) => (\n <CommandPrimitive.Separator {...separatorProps} ref={forwardedRef} className={classNames('rt-BaseMenuSeparator', 'rt-ComboboxSeparator', className)} />\n));\nComboboxSeparator.displayName = 'Combobox.Separator';\n\ntype ComboboxItemElement = React.ElementRef<typeof CommandPrimitive.Item>;\ninterface ComboboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>, 'keywords'> {\n /** Display label for the item. Also used for search unless keywords are provided. */\n label?: string;\n /** Additional keywords for search filtering (overrides automatic label-based search). */\n keywords?: string[];\n}\n/**\n * Item wires cmdk's selection handling with Kookie UI tokens and\n * ensures labels are registered for displaying the current value.\n */\n/**\n * Extracts text content from React children recursively.\n * Used to derive searchable labels from JSX children.\n */\nfunction extractTextFromChildren(children: React.ReactNode): string {\n if (typeof children === 'string') return children;\n if (typeof children === 'number') return String(children);\n if (children == null || typeof children === 'boolean') return '';\n if (Array.isArray(children)) {\n return children.map(extractTextFromChildren).filter(Boolean).join(' ');\n }\n if (React.isValidElement(children)) {\n const props = children.props as { children?: React.ReactNode };\n if (props.children) {\n return extractTextFromChildren(props.children);\n }\n }\n return '';\n}\n\nconst ComboboxItem = React.forwardRef<ComboboxItemElement, ComboboxItemProps>(({ className, children, label, value, disabled, onSelect, keywords, ...itemProps }, forwardedRef) => {\n const context = useComboboxContext('Combobox.Item');\n const contentContext = useComboboxContentContext();\n \n // Memoize label extraction to avoid recursive traversal on every render\n const extractedLabel = React.useMemo(() => extractTextFromChildren(children), [children]);\n const itemLabel = label ?? (extractedLabel || String(value));\n const isSelected = value != null && context.value === value;\n const sizeClass = contentContext?.size ? `rt-r-size-${contentContext.size}` : undefined;\n\n // Use provided keywords, or default to the item label for search\n // This allows searching by display text even when value is different (e.g., \"usa\" vs \"United States\")\n const searchKeywords = keywords ?? [itemLabel];\n\n // Generate stable ID for this item for aria-activedescendant\n const generatedId = React.useId();\n const itemId = `combobox-item-${generatedId}`;\n\n // Destructure stable references to avoid effect re-runs when unrelated context values change\n const { registerItemLabel, unregisterItemLabel, handleSelect: contextHandleSelect } = context;\n\n // Register/unregister label for display in trigger\n React.useEffect(() => {\n if (value) {\n registerItemLabel(value, itemLabel);\n return () => unregisterItemLabel(value);\n }\n }, [registerItemLabel, unregisterItemLabel, value, itemLabel]);\n\n const handleSelect = React.useCallback(\n (selectedValue: string) => {\n contextHandleSelect(selectedValue);\n onSelect?.(selectedValue);\n },\n [contextHandleSelect, onSelect],\n );\n\n const isDisabled = disabled ?? context.disabled ?? false;\n\n /**\n * Performance notes:\n * - data-disabled workaround: Handled via CSS selectors in combobox.css\n * rather than per-item MutationObservers.\n * - aria-activedescendant: Tracked by a single observer in ComboboxList\n * rather than per-item observers.\n */\n\n return (\n <CommandPrimitive.Item\n {...itemProps}\n id={itemId}\n value={value}\n keywords={searchKeywords}\n role=\"option\"\n aria-selected={isSelected}\n {...(isDisabled ? { disabled: true, 'aria-disabled': true } : {})}\n ref={forwardedRef}\n onSelect={handleSelect}\n className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-ComboboxItem', className)}\n >\n {isSelected ? (\n <span className={classNames('rt-BaseMenuItemIndicator', 'rt-ComboboxItemIndicator', sizeClass)}>\n <ThickCheckIcon className={classNames('rt-BaseMenuItemIndicatorIcon', 'rt-ComboboxItemIndicatorIcon', sizeClass)} />\n </span>\n ) : null}\n <Slottable>{children}</Slottable>\n </CommandPrimitive.Item>\n );\n});\nComboboxItem.displayName = 'Combobox.Item';\n\nexport {\n ComboboxRoot as Root,\n ComboboxTrigger as Trigger,\n ComboboxValue as Value,\n ComboboxContent as Content,\n ComboboxInput as Input,\n ComboboxList as List,\n ComboboxEmpty as Empty,\n ComboboxGroup as Group,\n ComboboxLabel as Label,\n ComboboxSeparator as Separator,\n ComboboxItem as Item,\n};\nexport type {\n ComboboxRootProps as RootProps,\n ComboboxTriggerProps as TriggerProps,\n ComboboxValueProps as ValueProps,\n ComboboxContentProps as ContentProps,\n ComboboxInputProps as InputProps,\n ComboboxListProps as ListProps,\n ComboboxEmptyProps as EmptyProps,\n ComboboxGroupProps as GroupProps,\n ComboboxLabelProps as LabelProps,\n ComboboxSeparatorProps as SeparatorProps,\n ComboboxItemProps as ItemProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["combobox_exports", "__export", "ComboboxContent", "ComboboxEmpty", "ComboboxGroup", "ComboboxInput", "ComboboxItem", "ComboboxLabel", "ComboboxList", "ComboboxRoot", "ComboboxSeparator", "ComboboxTrigger", "ComboboxValue", "__toCommonJS", "React", "import_classnames", "import_internal", "import_cmdk", "import_extract_props", "import_combobox_props", "import_margin_props", "import_icons", "import_theme", "import_require_react_element", "Popover", "import_scroll_area", "import_slot", "import_text_field_props", "ComboboxContext", "useComboboxContext", "caller", "ctx", "ComboboxContentContext", "useComboboxContentContext", "props", "children", "size", "highContrast", "valueProp", "defaultValue", "onValueChange", "openProp", "defaultOpen", "onOpenChange", "placeholder", "searchPlaceholder", "searchValueProp", "defaultSearchValue", "onSearchValueChange", "filter", "shouldFilter", "loop", "disabled", "resetSearchOnSelect", "color", "displayValueProp", "rootProps", "listboxId", "activeDescendantId", "setActiveDescendantId", "open", "setOpen", "value", "setValue", "searchValue", "setSearchValue", "labelMapRef", "selectedLabel", "setSelectedLabel", "registerItemLabel", "itemValue", "label", "unregisterItemLabel", "handleSelect", "nextValue", "resolvedDisplayValue", "contextValue", "forwardedRef", "context", "className", "readOnly", "error", "loading", "radius", "triggerProps", "material", "panelBackground", "isDisabled", "resolvedColor", "ariaProps", "defaultContent", "buttonType", "restTriggerProps", "triggerChild", "classNames", "valueProps", "displayValue", "fallback", "themeContext", "effectiveMaterial", "sizeProp", "variantProp", "highContrastProp", "forceMount", "container", "contentProps", "sanitizedClassName", "token", "shouldForceMount", "CommandPrimitive", "startAdornment", "endAdornment", "inputVariant", "inputProps", "contentContext", "contentVariant", "textFieldVariant", "handleSearchChange", "inputField", "listProps", "listRef", "combinedRef", "node", "listNode", "updateActiveDescendant", "itemId", "observer", "emptyProps", "groupProps", "labelProps", "separatorProps", "extractTextFromChildren", "onSelect", "keywords", "itemProps", "extractedLabel", "itemLabel", "isSelected", "sizeClass", "searchKeywords", "contextHandleSelect", "selectedValue"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { textFieldRootPropDefs, textFieldSlotPropDefs } from './text-field.props.js';
|
|
2
|
+
import { textFieldRootPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.props.js';
|
|
3
3
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
4
4
|
import type { NotInputTextualAttributes } from '../helpers/input-attributes.js';
|
|
5
5
|
import type { MarginProps } from '../props/margin.props.js';
|
|
@@ -13,7 +13,7 @@ type TextFieldInputProps = ComponentPropsWithout<'input', NotInputTextualAttribu
|
|
|
13
13
|
interface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextFieldRootOwnProps {
|
|
14
14
|
}
|
|
15
15
|
declare const TextFieldRoot: React.ForwardRefExoticComponent<TextFieldRootProps & React.RefAttributes<HTMLInputElement>>;
|
|
16
|
-
type TextFieldSlotOwnProps = GetPropDefTypes<typeof textFieldSlotPropDefs
|
|
16
|
+
type TextFieldSlotOwnProps = GetPropDefTypes<typeof textFieldSlotPropDefs> & TextFieldSlotScrubProps;
|
|
17
17
|
interface TextFieldSlotProps extends ComponentPropsWithout<'div', RemovedProps>, TextFieldSlotOwnProps {
|
|
18
18
|
}
|
|
19
19
|
declare const TextFieldSlot: React.ForwardRefExoticComponent<TextFieldSlotProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,KAAK,uBAAuB,EAC7B,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,GAAG;IAC3E,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,CAAC,EACD,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,MAAM,CAAC;CACZ,CAAC;AACF,KAAK,mBAAmB,GAAG,qBAAqB,CAC9C,OAAO,EACP,yBAAyB,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACjF,CAAC;AACF,UAAU,kBAAmB,SAAQ,mBAAmB,EAAE,WAAW,EAAE,qBAAqB;CAAG;AAC/F,QAAA,MAAM,aAAa,6FAkGlB,CAAC;AAIF,KAAK,qBAAqB,GAAG,eAAe,CAAC,OAAO,qBAAqB,CAAC,GAAG,uBAAuB,CAAC;AACrG,UAAU,kBACR,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,EAChD,qBAAqB;CAAG;AAC5B,QAAA,MAAM,aAAa,2FAiOlB,CAAC;AAGF,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,aAAa,IAAI,IAAI,EAAE,CAAC;AACxD,YAAY,EAAE,kBAAkB,IAAI,SAAS,EAAE,kBAAkB,IAAI,SAAS,EAAE,CAAC"}
|