@ostack.tech/ui 0.9.1 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/chunks/{en-Dem8nwZz.js → en-GEeEwItR.js} +9 -2
  2. package/dist/chunks/en-GEeEwItR.js.map +1 -0
  3. package/dist/locales/en-GB.js +1 -1
  4. package/dist/locales/en-US.js +1 -1
  5. package/dist/locales/fr-FR.js +8 -1
  6. package/dist/locales/fr-FR.js.map +1 -1
  7. package/dist/locales/pt-PT.js +8 -1
  8. package/dist/locales/pt-PT.js.map +1 -1
  9. package/dist/ostack-ui.css +36 -36
  10. package/dist/ostack-ui.css.map +1 -1
  11. package/dist/ostack-ui.js +1083 -150
  12. package/dist/ostack-ui.js.map +1 -1
  13. package/dist/types/components/Alert/Alert.d.ts +17 -0
  14. package/dist/types/components/Alert/AlertContext.d.ts +8 -0
  15. package/dist/types/components/CommandMenu/CommandMenu.d.ts +1 -1
  16. package/dist/types/components/CommandMenu/CommandMenuGroup.d.ts +1 -1
  17. package/dist/types/components/CommandMenu/CommandMenuItem.d.ts +1 -1
  18. package/dist/types/components/CommandMenu/cmdk/command-score.d.ts +1 -0
  19. package/dist/types/components/CommandMenu/cmdk/index.d.ts +320 -0
  20. package/dist/types/components/Input/Input.d.ts +9 -0
  21. package/dist/types/components/RadioGroup/RadioGroup.d.ts +5 -0
  22. package/dist/types/components/Select/Select.d.ts +6 -2
  23. package/dist/types/components/Select/SelectContext.d.ts +3 -1
  24. package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts +3 -1
  25. package/package.json +1 -2
  26. package/scss/components/CommandMenu/_CommandMenu.scss +1 -7
  27. package/scss/components/DropdownMenu/_DropdownMenu.scss +3 -3
  28. package/scss/components/MenuList/_MenuList.scss +3 -3
  29. package/scss/components/Select/_Select-variables.scss +4 -0
  30. package/scss/components/Select/_Select.scss +6 -0
  31. package/scss/components/Tag/_Tag-variables.scss +1 -1
  32. package/scss/scss/placeholders/menu/_menu-variables.scss +24 -15
  33. package/scss/scss/placeholders/menu/_menu.scss +1 -3
  34. package/scss/scss/placeholders/notification/_notification-variables.scss +2 -2
  35. package/scss/scss/placeholders/notification/_notification.scss +1 -0
  36. package/dist/chunks/en-Dem8nwZz.js.map +0 -1
@@ -6,6 +6,8 @@ import { Icon, IconProp } from '../Icon';
6
6
  export type AlertVariant = "solid" | "subtle" | "outlined";
7
7
  /** Alert severities. */
8
8
  export type AlertSeverity = "neutral" | "info" | "success" | "danger" | "warning";
9
+ /** Alert type of announcement. */
10
+ export type AlertAnnounce = "off" | "polite" | "assertive";
9
11
  /** Properties of the alert component. */
10
12
  export interface AlertProps extends ComponentPropsWithoutRef<"div"> {
11
13
  /**
@@ -20,6 +22,21 @@ export interface AlertProps extends ComponentPropsWithoutRef<"div"> {
20
22
  * @default info
21
23
  */
22
24
  severity?: AlertSeverity;
25
+ /**
26
+ * Controls how the alert is announced to screen reader users:
27
+ *
28
+ * - `off`: The alert is silent. Recommended for static messages.
29
+ * - `polite`: Sets `role="status"`. The screen reader will announce the alert
30
+ * at the next available opportunity without interrupting the user
31
+ * (recommended for non-critical feedback that appears _after_ a user
32
+ * action).
33
+ * - `assertive`: Sets `role="alert"`. The screen reader will interrupt any
34
+ * current speech to announce this immediately (recommended for critical
35
+ * errors that appear and should stop the user's flow).
36
+ *
37
+ * @default off
38
+ */
39
+ announce?: AlertAnnounce;
23
40
  /** Alert action. */
24
41
  action?: ReactNode;
25
42
  /**
@@ -0,0 +1,8 @@
1
+ /** Value of the alert context. */
2
+ export interface AlertContextValue {
3
+ setTitleId: (id: string | undefined) => void;
4
+ }
5
+ /** Alert context. */
6
+ export declare const AlertContext: import('react').Context<AlertContextValue | null>;
7
+ /** Hook providing access to the alert context. */
8
+ export declare function useAlertContext(): AlertContextValue;
@@ -1,10 +1,10 @@
1
- import { Command as CommandPrimitive } from 'cmdk';
2
1
  import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';
3
2
  import { ControlAddon } from '../ControlAddon';
4
3
  import { Icon } from '../Icon';
5
4
  import { Input } from '../Input';
6
5
  import { MenuList, MenuListIconPlacement, MenuListVariant } from '../MenuList';
7
6
  import { Spinner } from '../Spinner';
7
+ import { Command as CommandPrimitive } from './cmdk';
8
8
  /** Command menu variants. */
9
9
  export type CommandMenuVariant = MenuListVariant;
10
10
  /** Placement of icons within command menu items. */
@@ -1,5 +1,5 @@
1
- import { Command as CommandPrimitive } from 'cmdk';
2
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import { Command as CommandPrimitive } from './cmdk';
3
3
  /** Properties of the command menu group. */
4
4
  export interface CommandMenuGroupProps extends Omit<ComponentPropsWithoutRef<typeof CommandPrimitive.Group>, "asChild" | "heading"> {
5
5
  /** Optional label of the command menu group. */
@@ -1,6 +1,6 @@
1
- import { Command as CommandPrimitive } from 'cmdk';
2
1
  import { ComponentPropsWithoutRef } from 'react';
3
2
  import { MenuListItemProps } from '../MenuList';
3
+ import { Command as CommandPrimitive } from './cmdk';
4
4
  export interface CommandMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof CommandPrimitive.Item>, "asChild" | "color">, Pick<MenuListItemProps, "selected" | "color" | "loading" | "loadingContent" | "showSpinner" | "icon" | "iconPlacement" | "keybinds" | "href" | "target" | "rel" | "actionProps" | "contentProps" | "iconProps" | "spinnerProps" | "keybindsProps"> {
5
5
  /**
6
6
  * Render the item as a link. When set, you can pass `href`, `target`, and
@@ -0,0 +1 @@
1
+ export declare function commandScore(string: string, abbreviation: string, aliases: string[]): number;
@@ -0,0 +1,320 @@
1
+ import * as React from "react";
2
+ type Children = {
3
+ children?: React.ReactNode;
4
+ };
5
+ type DivProps = React.ComponentPropsWithoutRef<"div"> & {
6
+ /**
7
+ * Change the component to the HTML tag or custom component of the only child.
8
+ * This will merge the original component props with the props of the supplied
9
+ * element/component and change the underlying DOM node.
10
+ */
11
+ asChild?: boolean;
12
+ };
13
+ type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
14
+ type State = {
15
+ search: string;
16
+ value: string;
17
+ selectedItemId?: string;
18
+ filtered: {
19
+ count: number;
20
+ items: Map<string, number>;
21
+ groups: Set<string>;
22
+ };
23
+ };
24
+ type Group = {
25
+ id: string;
26
+ forceMount?: boolean;
27
+ };
28
+ declare const defaultFilter: CommandFilter;
29
+ declare const Command: React.ForwardRefExoticComponent<Children & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
30
+ /**
31
+ * Change the component to the HTML tag or custom component of the only child.
32
+ * This will merge the original component props with the props of the supplied
33
+ * element/component and change the underlying DOM node.
34
+ */
35
+ asChild?: boolean;
36
+ } & {
37
+ /** Accessible label for this command menu. Not shown visibly. */
38
+ label?: string;
39
+ /**
40
+ * Optionally set to `false` to turn off the automatic filtering and
41
+ * sorting. If `false`, you must conditionally render valid items based on
42
+ * the search query yourself.
43
+ */
44
+ shouldFilter?: boolean;
45
+ /**
46
+ * Custom filter function for whether each command menu item should matches
47
+ * the given search query. It should return a number between 0 and 1, with 1
48
+ * being the best match and 0 being hidden entirely. By default, uses the
49
+ * `command-score` library.
50
+ */
51
+ filter?: CommandFilter;
52
+ /** Optional default item value when it is initially rendered. */
53
+ defaultValue?: string;
54
+ /** Optional controlled state of the selected command menu item. */
55
+ value?: string;
56
+ /** Event handler called when the selected item of the menu changes. */
57
+ onValueChange?: (value: string) => void;
58
+ /**
59
+ * Optionally set to `true` to turn on looping around when using the arrow
60
+ * keys.
61
+ */
62
+ loop?: boolean;
63
+ /** Optionally set to `true` to disable selection via pointer events. */
64
+ disablePointerSelection?: boolean;
65
+ } & React.RefAttributes<HTMLDivElement>>;
66
+ /**
67
+ * Command menu item. Becomes active on pointer enter or through keyboard
68
+ * navigation. Preferably pass a `value`, otherwise the value will be inferred
69
+ * from `children` or the rendered item's `textContent`.
70
+ */
71
+ declare const Item: React.ForwardRefExoticComponent<Children & Omit<DivProps, "disabled" | "value" | "onSelect"> & {
72
+ /** Whether this item is currently disabled. */
73
+ disabled?: boolean;
74
+ /**
75
+ * Event handler for when this item is selected, either via click or
76
+ * keyboard selection.
77
+ */
78
+ onSelect?: (value: string) => void;
79
+ /**
80
+ * A unique value for this item. If no value is provided, it will be
81
+ * inferred from `children` or the rendered `textContent`. If your
82
+ * `textContent` changes between renders, you _must_ provide a stable,
83
+ * unique `value`.
84
+ */
85
+ value?: string;
86
+ /** Optional keywords to match against when filtering. */
87
+ keywords?: string[];
88
+ /** Whether this item is forcibly rendered regardless of filtering. */
89
+ forceMount?: boolean;
90
+ } & React.RefAttributes<HTMLDivElement>>;
91
+ /**
92
+ * Group command menu items together with a heading. Grouped items are always
93
+ * shown together.
94
+ */
95
+ declare const Group: React.ForwardRefExoticComponent<Children & Omit<DivProps, "value" | "heading"> & {
96
+ /** Optional heading to render for this group. */
97
+ heading?: React.ReactNode;
98
+ /**
99
+ * If no heading is provided, you must provide a value that is unique for
100
+ * this group.
101
+ */
102
+ value?: string;
103
+ /** Whether this group is forcibly rendered regardless of filtering. */
104
+ forceMount?: boolean;
105
+ } & React.RefAttributes<HTMLDivElement>>;
106
+ /**
107
+ * A visual and semantic separator between items or groups. Visible when the
108
+ * search query is empty or `alwaysRender` is true, hidden otherwise.
109
+ */
110
+ declare const Separator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
111
+ /**
112
+ * Change the component to the HTML tag or custom component of the only child.
113
+ * This will merge the original component props with the props of the supplied
114
+ * element/component and change the underlying DOM node.
115
+ */
116
+ asChild?: boolean;
117
+ } & {
118
+ /**
119
+ * Whether this separator should always be rendered. Useful if you disable
120
+ * automatic filtering.
121
+ */
122
+ alwaysRender?: boolean;
123
+ } & React.RefAttributes<HTMLDivElement>>;
124
+ /**
125
+ * Command menu input. All props are forwarded to the underyling `input`
126
+ * element.
127
+ */
128
+ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "value" | "onChange"> & {
129
+ /**
130
+ * Change the component to the HTML tag or custom component of the only child.
131
+ * This will merge the original component props with the props of the supplied
132
+ * element/component and change the underlying DOM node.
133
+ */
134
+ asChild?: boolean;
135
+ /** Optional controlled state for the value of the search input. */
136
+ value?: string;
137
+ /** Event handler called when the search value changes. */
138
+ onValueChange?: (search: string) => void;
139
+ } & React.RefAttributes<HTMLInputElement>>;
140
+ /**
141
+ * Contains `Item`, `Group`, and `Separator`. Use the `--cmdk-list-height` CSS
142
+ * variable to animate height based on the number of results.
143
+ */
144
+ declare const List: React.ForwardRefExoticComponent<Children & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
145
+ /**
146
+ * Change the component to the HTML tag or custom component of the only child.
147
+ * This will merge the original component props with the props of the supplied
148
+ * element/component and change the underlying DOM node.
149
+ */
150
+ asChild?: boolean;
151
+ } & {
152
+ /** Accessible label for this List of suggestions. Not shown visibly. */
153
+ label?: string;
154
+ } & React.RefAttributes<HTMLDivElement>>;
155
+ /** Automatically renders when there are no results for the search query. */
156
+ declare const Empty: React.ForwardRefExoticComponent<Children & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
157
+ /**
158
+ * Change the component to the HTML tag or custom component of the only child.
159
+ * This will merge the original component props with the props of the supplied
160
+ * element/component and change the underlying DOM node.
161
+ */
162
+ asChild?: boolean;
163
+ } & React.RefAttributes<HTMLDivElement>>;
164
+ /**
165
+ * You should conditionally render this with `progress` while loading
166
+ * asynchronous items.
167
+ */
168
+ declare const Loading: React.ForwardRefExoticComponent<Children & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
169
+ /**
170
+ * Change the component to the HTML tag or custom component of the only child.
171
+ * This will merge the original component props with the props of the supplied
172
+ * element/component and change the underlying DOM node.
173
+ */
174
+ asChild?: boolean;
175
+ } & {
176
+ /** Estimated progress of loading asynchronous options. */
177
+ progress?: number;
178
+ /** Accessible label for this loading progressbar. Not shown visibly. */
179
+ label?: string;
180
+ } & React.RefAttributes<HTMLDivElement>>;
181
+ declare const pkg: React.ForwardRefExoticComponent<Children & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
182
+ /**
183
+ * Change the component to the HTML tag or custom component of the only child.
184
+ * This will merge the original component props with the props of the supplied
185
+ * element/component and change the underlying DOM node.
186
+ */
187
+ asChild?: boolean;
188
+ } & {
189
+ /** Accessible label for this command menu. Not shown visibly. */
190
+ label?: string;
191
+ /**
192
+ * Optionally set to `false` to turn off the automatic filtering and
193
+ * sorting. If `false`, you must conditionally render valid items based on
194
+ * the search query yourself.
195
+ */
196
+ shouldFilter?: boolean;
197
+ /**
198
+ * Custom filter function for whether each command menu item should matches
199
+ * the given search query. It should return a number between 0 and 1, with 1
200
+ * being the best match and 0 being hidden entirely. By default, uses the
201
+ * `command-score` library.
202
+ */
203
+ filter?: CommandFilter;
204
+ /** Optional default item value when it is initially rendered. */
205
+ defaultValue?: string;
206
+ /** Optional controlled state of the selected command menu item. */
207
+ value?: string;
208
+ /** Event handler called when the selected item of the menu changes. */
209
+ onValueChange?: (value: string) => void;
210
+ /**
211
+ * Optionally set to `true` to turn on looping around when using the arrow
212
+ * keys.
213
+ */
214
+ loop?: boolean;
215
+ /** Optionally set to `true` to disable selection via pointer events. */
216
+ disablePointerSelection?: boolean;
217
+ } & React.RefAttributes<HTMLDivElement>> & {
218
+ List: React.ForwardRefExoticComponent<Children & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
219
+ /**
220
+ * Change the component to the HTML tag or custom component of the only child.
221
+ * This will merge the original component props with the props of the supplied
222
+ * element/component and change the underlying DOM node.
223
+ */
224
+ asChild?: boolean;
225
+ } & {
226
+ /** Accessible label for this List of suggestions. Not shown visibly. */
227
+ label?: string;
228
+ } & React.RefAttributes<HTMLDivElement>>;
229
+ Item: React.ForwardRefExoticComponent<Children & Omit<DivProps, "disabled" | "value" | "onSelect"> & {
230
+ /** Whether this item is currently disabled. */
231
+ disabled?: boolean;
232
+ /**
233
+ * Event handler for when this item is selected, either via click or
234
+ * keyboard selection.
235
+ */
236
+ onSelect?: (value: string) => void;
237
+ /**
238
+ * A unique value for this item. If no value is provided, it will be
239
+ * inferred from `children` or the rendered `textContent`. If your
240
+ * `textContent` changes between renders, you _must_ provide a stable,
241
+ * unique `value`.
242
+ */
243
+ value?: string;
244
+ /** Optional keywords to match against when filtering. */
245
+ keywords?: string[];
246
+ /** Whether this item is forcibly rendered regardless of filtering. */
247
+ forceMount?: boolean;
248
+ } & React.RefAttributes<HTMLDivElement>>;
249
+ Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "value" | "onChange"> & {
250
+ /**
251
+ * Change the component to the HTML tag or custom component of the only child.
252
+ * This will merge the original component props with the props of the supplied
253
+ * element/component and change the underlying DOM node.
254
+ */
255
+ asChild?: boolean;
256
+ /** Optional controlled state for the value of the search input. */
257
+ value?: string;
258
+ /** Event handler called when the search value changes. */
259
+ onValueChange?: (search: string) => void;
260
+ } & React.RefAttributes<HTMLInputElement>>;
261
+ Group: React.ForwardRefExoticComponent<Children & Omit<DivProps, "value" | "heading"> & {
262
+ /** Optional heading to render for this group. */
263
+ heading?: React.ReactNode;
264
+ /**
265
+ * If no heading is provided, you must provide a value that is unique for
266
+ * this group.
267
+ */
268
+ value?: string;
269
+ /** Whether this group is forcibly rendered regardless of filtering. */
270
+ forceMount?: boolean;
271
+ } & React.RefAttributes<HTMLDivElement>>;
272
+ Separator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
273
+ /**
274
+ * Change the component to the HTML tag or custom component of the only child.
275
+ * This will merge the original component props with the props of the supplied
276
+ * element/component and change the underlying DOM node.
277
+ */
278
+ asChild?: boolean;
279
+ } & {
280
+ /**
281
+ * Whether this separator should always be rendered. Useful if you disable
282
+ * automatic filtering.
283
+ */
284
+ alwaysRender?: boolean;
285
+ } & React.RefAttributes<HTMLDivElement>>;
286
+ Empty: React.ForwardRefExoticComponent<Children & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
287
+ /**
288
+ * Change the component to the HTML tag or custom component of the only child.
289
+ * This will merge the original component props with the props of the supplied
290
+ * element/component and change the underlying DOM node.
291
+ */
292
+ asChild?: boolean;
293
+ } & React.RefAttributes<HTMLDivElement>>;
294
+ Loading: React.ForwardRefExoticComponent<Children & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
295
+ /**
296
+ * Change the component to the HTML tag or custom component of the only child.
297
+ * This will merge the original component props with the props of the supplied
298
+ * element/component and change the underlying DOM node.
299
+ */
300
+ asChild?: boolean;
301
+ } & {
302
+ /** Estimated progress of loading asynchronous options. */
303
+ progress?: number;
304
+ /** Accessible label for this loading progressbar. Not shown visibly. */
305
+ label?: string;
306
+ } & React.RefAttributes<HTMLDivElement>>;
307
+ };
308
+ export { useCmdk as useCommandState };
309
+ export { pkg as Command };
310
+ export { defaultFilter };
311
+ export { Command as CommandRoot };
312
+ export { List as CommandList };
313
+ export { Item as CommandItem };
314
+ export { Input as CommandInput };
315
+ export { Group as CommandGroup };
316
+ export { Separator as CommandSeparator };
317
+ export { Empty as CommandEmpty };
318
+ export { Loading as CommandLoading };
319
+ /** Run a selector against the store state. */
320
+ declare function useCmdk<T = any>(selector: (state: State) => T): T;
@@ -77,6 +77,15 @@ export interface InputPropsBase {
77
77
  showClearButton?: ShowClearButton;
78
78
  /** Label of the clear button announced to assistive technologies. */
79
79
  clearButtonLabel?: string;
80
+ /**
81
+ * Accessible description for how to clear the control when the clear button
82
+ * is visible.
83
+ *
84
+ * This field should be provided when adding extra keybinds to clear the
85
+ * control (_e.g._ the input is a file input and pressing Backspace/Delete
86
+ * clears it).
87
+ */
88
+ clearDescription?: ReactNode;
80
89
  /**
81
90
  * Function called whenever the value changes.
82
91
  *
@@ -57,6 +57,11 @@ export interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof Ra
57
57
  * @default false
58
58
  */
59
59
  showClearButton?: ShowClearButton;
60
+ /**
61
+ * Accessible description for how to clear the radio group when the clear
62
+ * button is visible.
63
+ */
64
+ clearDescription?: ReactNode;
60
65
  /** Label of the clear button announced to assistive technologies. */
61
66
  clearButtonLabel?: string;
62
67
  /**
@@ -5,7 +5,7 @@ import { Input } from '../Input';
5
5
  import { PopoverContent, PopoverTrigger } from '../Popover';
6
6
  import { Tag } from '../Tag';
7
7
  /** Base properties of the select component. */
8
- export interface SelectPropsBase<T extends string | number | readonly string[] = string | number | readonly string[]> extends ComponentPropsWithoutRef<typeof PopoverTrigger>, Pick<ComponentPropsWithoutRef<typeof Input>, "name" | "required" | "variant" | "status" | "code" | "readOnly" | "loading" | "loadingDescription" | "showSpinner" | "align" | "startAdornment" | "endAdornment" | "showClearButton" | "onBlurToOutside" | "rootProps" | "codeProps" | "containerProps" | "clearButtonProps" | "spinnerProps">, Pick<ComponentPropsWithoutRef<typeof CommandMenu>, "searchPlaceholder" | "searchValue" | "onSearchValueChange"> {
8
+ export interface SelectPropsBase<T extends string | number | readonly string[] = string | number | readonly string[]> extends ComponentPropsWithoutRef<typeof PopoverTrigger>, Pick<ComponentPropsWithoutRef<typeof Input>, "name" | "required" | "variant" | "status" | "code" | "readOnly" | "loading" | "loadingDescription" | "showSpinner" | "align" | "startAdornment" | "endAdornment" | "showClearButton" | "clearDescription" | "onBlurToOutside" | "rootProps" | "codeProps" | "containerProps" | "clearButtonProps" | "spinnerProps">, Pick<ComponentPropsWithoutRef<typeof CommandMenu>, "searchPlaceholder" | "searchValue" | "onSearchValueChange"> {
9
9
  /**
10
10
  * Whether multiple options can be selected. If not set, at most one option
11
11
  * can be selected at a time.
@@ -38,6 +38,8 @@ export interface SelectPropsBase<T extends string | number | readonly string[] =
38
38
  onOpenChange?: (open: boolean) => void;
39
39
  /** Select's placeholder. */
40
40
  placeholder?: ReactNode;
41
+ /** Accessible label for the search input. Not shown visibly. */
42
+ searchLabel?: string;
41
43
  /** Accessible label for the list of options. Not shown visibly. */
42
44
  optionsLabel?: string;
43
45
  /**
@@ -52,6 +54,8 @@ export interface SelectPropsBase<T extends string | number | readonly string[] =
52
54
  loadingOptionsProgress?: number;
53
55
  /** Message to display when no options were found. */
54
56
  emptyMessage?: ReactNode;
57
+ /** Label of the close button shown on each value tag. */
58
+ valueTagCloseButtonLabel?: ReactNode;
55
59
  /**
56
60
  * When `multiple` is set, this property controls the maximum width the
57
61
  * content of a value tag representing a selected option can reach. By
@@ -67,7 +71,7 @@ export interface SelectPropsBase<T extends string | number | readonly string[] =
67
71
  /** Properties to pass to the `Popover` component. */
68
72
  popoverProps?: ComponentPropsWithRef<typeof PopoverContent>;
69
73
  /** Options to pass to the `CommandMenu` component. */
70
- commandMenuProps?: Omit<ComponentPropsWithRef<typeof CommandMenu>, "defaultValue" | "value" | "onValueChange" | "iconPlacement" | "searchPlaceholder" | "searchValue" | "onSearchValueChange" | "listLabel" | "loading" | "loadingLabel" | "loadingProgress" | "emptyMessage">;
74
+ commandMenuProps?: Omit<ComponentPropsWithRef<typeof CommandMenu>, "defaultValue" | "value" | "onValueChange" | "iconPlacement" | "searchPlaceholder" | "searchValue" | "onSearchValueChange" | "label" | "listLabel" | "loading" | "loadingLabel" | "loadingProgress" | "emptyMessage">;
71
75
  }
72
76
  /** Properties of the select component with `multiple` not set. */
73
77
  export interface SelectSingleProps extends SelectPropsBase<string | number> {
@@ -11,6 +11,7 @@ export interface SelectContextValue {
11
11
  status?: ControlStatus;
12
12
  disabled?: boolean;
13
13
  readOnly?: boolean;
14
+ valueTagCloseButtonLabel?: SelectProps["valueTagCloseButtonLabel"];
14
15
  valueTagProps?: SelectProps["valueTagProps"];
15
16
  store: SelectStore;
16
17
  }
@@ -37,13 +38,14 @@ export declare const SelectContext: import('react').Context<SelectContextValue |
37
38
  /** Options to pass to the `useCreateSelectContext` hook. */
38
39
  export type UseCreateSelectContextOptions = Omit<SelectContextValue, "store">;
39
40
  /** Hook which creates the select context. */
40
- export declare function useCreateSelectContext({ multiple, value, onOptionSelect, status, disabled, readOnly, valueTagProps, }: UseCreateSelectContextOptions): {
41
+ export declare function useCreateSelectContext({ multiple, value, onOptionSelect, status, disabled, readOnly, valueTagCloseButtonLabel, valueTagProps, }: UseCreateSelectContextOptions): {
41
42
  multiple: boolean;
42
43
  value: string | string[];
43
44
  onOptionSelect: (value: string) => void;
44
45
  status: ControlStatus | undefined;
45
46
  disabled: boolean | undefined;
46
47
  readOnly: boolean | undefined;
48
+ valueTagCloseButtonLabel: ReactNode;
47
49
  valueTagProps: Omit<Omit<import('../Tag/Tag.tsx').TagProps & import('react').RefAttributes<HTMLSpanElement>, "ref">, "color" | "open" | "defaultOpen" | "onOpenChange" | "showCloseButton"> | undefined;
48
50
  store: Omit<import('zustand').StoreApi<SelectState>, "subscribe"> & {
49
51
  subscribe: {
@@ -14,6 +14,7 @@ import { InputProps } from '../../components/Input';
14
14
  import { KeybindsProps } from '../../components/Keybinds';
15
15
  import { LabelProps } from '../../components/Label';
16
16
  import { NumericInputProps } from '../../components/NumericInput';
17
+ import { RadioGroupProps } from '../../components/RadioGroup';
17
18
  import { SelectProps } from '../../components/Select';
18
19
  import { TableColumnProps, TableHeadProps } from '../../components/Table';
19
20
  import { TabListProps } from '../../components/Tabs';
@@ -44,7 +45,8 @@ export interface LocalizationObject {
44
45
  Keybinds: Pick<KeybindsProps, "keybindsSeparatorLabel" | "keyPressesSeparatorLabel" | "keysSeparatorLabel" | "keySymbols" | "keyLabels">;
45
46
  Label: Pick<LabelProps, "helperButtonLabel">;
46
47
  NumericInput: Pick<NumericInputProps, "decimalSeparator" | "groupingStyle" | "groupSeparator">;
47
- Select: Pick<SelectProps, "searchPlaceholder" | "emptyMessage" | "optionsLabel" | "loadingOptionsLabel">;
48
+ RadioGroup: Pick<RadioGroupProps, "clearDescription">;
49
+ Select: Pick<SelectProps, "placeholder" | "clearDescription" | "searchLabel" | "searchPlaceholder" | "emptyMessage" | "optionsLabel" | "loadingOptionsLabel" | "valueTagCloseButtonLabel">;
48
50
  TableColumn: Pick<TableColumnProps, "helperButtonLabel">;
49
51
  TableHead: Pick<TableHeadProps, "sortByColumnDescription">;
50
52
  TabList: Pick<TabListProps, "scrollLeftButtonLabel" | "scrollRightButtonLabel">;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ostack.tech/ui",
3
3
  "description": "ostack/UI component library.",
4
- "version": "0.9.1",
4
+ "version": "0.9.2",
5
5
  "homepage": "https://ui.ostack.tech/",
6
6
  "author": {
7
7
  "name": "Opensoft",
@@ -46,7 +46,6 @@
46
46
  "dependencies": {
47
47
  "@fortawesome/react-fontawesome": "^3.1.1",
48
48
  "@tanstack/react-virtual": "^3.13.18",
49
- "cmdk": "^1.1.1",
50
49
  "from-exponential": "^1.1.1",
51
50
  "radix-ui": "^1.4.3",
52
51
  "react-day-picker": "^9.13.0",
@@ -131,13 +131,7 @@
131
131
  $command-menu-list-transition-timing-function;
132
132
  }
133
133
 
134
- &__item
135
- &__item-action:not(
136
- a,
137
- :disabled,
138
- [data-disabled=""],
139
- [data-disabled="true"]
140
- ) {
134
+ &__item &__item-action:not(a, :disabled, [data-disabled]) {
141
135
  cursor: $command-menu-item-button-cursor;
142
136
  }
143
137
 
@@ -19,9 +19,9 @@
19
19
  }
20
20
 
21
21
  :is(&__item, &__checkbox-item, &__radio-item)
22
- #{$menu-list-item-action}:not(a):not(:disabled):not([data-disabled=""]):not(
23
- [data-disabled="true"]
24
- ):not([data-loading]) {
22
+ #{$menu-list-item-action}:not(a):not(:disabled):not([data-disabled]):not(
23
+ [data-loading]
24
+ ) {
25
25
  cursor: $menu-item-button-cursor;
26
26
  }
27
27
 
@@ -33,9 +33,9 @@
33
33
 
34
34
  // Highlight action on hover only if the item isn't styled as selected
35
35
  &:not([data-state="checked"][data-hide-control]) {
36
- &:is([data-highlighted], [data-state="open"], [data-selected="true"])
36
+ &:is([data-highlighted], [data-state="open"], [data-selected])
37
37
  #{$menu-list}__item-action--#{$variant},
38
- #{$menu-list}__item-action--#{$variant}:hover {
38
+ #{$menu-list}__item-action--#{$variant}:not([data-loading]):hover {
39
39
  @extend %#{$prefix}menu__item-action--#{$variant}--highlighted;
40
40
  }
41
41
  }
@@ -49,7 +49,7 @@
49
49
  &--#{$variant} {
50
50
  @extend %#{$prefix}menu__item-action--#{$variant};
51
51
 
52
- &:is([data-selected=""], [data-selected="true"]) {
52
+ &[data-selected] {
53
53
  @extend %#{$prefix}menu__item-action--#{$variant}--selected;
54
54
  }
55
55
  }
@@ -66,6 +66,10 @@ $select-option-font-family: null !default;
66
66
  $select-option-font-weight: null !default;
67
67
  $select-option-text-transform: null !default;
68
68
 
69
+ // Option - Selected
70
+ $select-option-selected-font-weight: null !default;
71
+ $select-option-selected-text-transform: null !default;
72
+
69
73
  // Option indicator
70
74
  $select-option-indicator-font-size: var(--#{$prefix}font-size-sm) !default;
71
75
 
@@ -160,6 +160,12 @@
160
160
  text-transform: $select-option-text-transform;
161
161
  }
162
162
 
163
+ // Option - Selected
164
+ &__option[aria-selected="true"] > &__option-action {
165
+ font-weight: $select-option-selected-font-weight;
166
+ text-transform: $select-option-selected-text-transform;
167
+ }
168
+
163
169
  // Option indicator
164
170
  &__option-indicator {
165
171
  font-size: $select-option-indicator-font-size;
@@ -23,7 +23,7 @@ $tag-subtle-box-shadow: null !default;
23
23
 
24
24
  // Outlined variant
25
25
  $tag-outlined-background-color: null !default;
26
- $tag-outlined-color: var(--#{$prefix}accent-a11) !default;
26
+ $tag-outlined-color: var(--#{$prefix}accent-a12) !default;
27
27
  $tag-outlined-box-shadow: inset 0 0 0 2px var(--#{$prefix}accent-a11) !default;
28
28
 
29
29
  // Icon