@sesamehr/react-design-system 2.0.0-beta.11 → 2.0.0-beta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Forms/Inputs/Combobox/Combobox.d.ts +19 -0
- package/dist/Forms/Inputs/Combobox/ComboboxItemEdit.d.ts +10 -0
- package/dist/Forms/Inputs/Combobox/context.d.ts +6 -0
- package/dist/Forms/Inputs/Combobox/useComboboxSearch.d.ts +20 -0
- package/dist/Forms/Inputs/SearchBar/SearchBar.d.ts +2 -2
- package/dist/Forms/Inputs/SearchBar/index.d.ts +0 -2
- package/dist/hooks/index.d.ts +4 -2
- package/dist/{Forms/Inputs/SearchBar/useSearchDelay.d.ts → hooks/useSearchDebounce/useSearchDebounce.d.ts} +3 -3
- package/dist/main.d.ts +1 -1
- package/dist/react-design-system.js +4911 -4887
- package/dist/react-design-system.umd.cjs +33 -33
- package/package.json +1 -1
- /package/dist/hooks/{useAutoGrow.d.ts → useAutoGrow/useAutoGrow.d.ts} +0 -0
|
@@ -16,6 +16,25 @@ export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
16
16
|
/** Emitted when the open state changes. */
|
|
17
17
|
onOpenChange?: (open: boolean) => void;
|
|
18
18
|
children?: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* The term to search for, once typing has stopped. Binding it is what tells
|
|
21
|
+
* the combobox its options are an answer it asked for — see `ignoreFilter`.
|
|
22
|
+
*/
|
|
23
|
+
onSearch?: (term: string) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Quiet period, in milliseconds, between the last keystroke and `onSearch`.
|
|
26
|
+
* `0` emits in the same tick.
|
|
27
|
+
*/
|
|
28
|
+
debounce?: number;
|
|
29
|
+
/**
|
|
30
|
+
* Whether to skip filtering the rendered options in the browser. Left unset
|
|
31
|
+
* it follows `onSearch`: options the caller went and fetched have already
|
|
32
|
+
* been filtered, by something that knows more than a literal text match does
|
|
33
|
+
* — search "peres", get "Ana Pérez" back from a server that folds accents,
|
|
34
|
+
* and a second pass here hides a correct answer with nothing logged. Pass it
|
|
35
|
+
* explicitly to override, `false` included.
|
|
36
|
+
*/
|
|
37
|
+
ignoreFilter?: boolean;
|
|
19
38
|
dataTestid: string;
|
|
20
39
|
}
|
|
21
40
|
/**
|
|
@@ -113,6 +113,16 @@ export interface ComboboxItemEditProps extends Omit<React.HTMLAttributes<HTMLDiv
|
|
|
113
113
|
* sides: take focus on entering the edit, hand it back to the combobox's own
|
|
114
114
|
* field on leaving.
|
|
115
115
|
*
|
|
116
|
+
* **A dialog around the combobox is free here and was not in Vue.** A dialog
|
|
117
|
+
* traps focus, the popover is portalled to `body` and is therefore outside what
|
|
118
|
+
* the trap considers the dialog, so the `.focus()` below reads as focus
|
|
119
|
+
* escaping — unless a nearer focus layer has suspended the trap.
|
|
120
|
+
* `Popover.Content` registers one in every Radix build, untrapped when the
|
|
121
|
+
* popover is non-modal, which ours is. reka gives `SelectContentImpl`,
|
|
122
|
+
* `PopoverContentImpl` and `MenuContentImpl` a `FocusScope` and
|
|
123
|
+
* `ComboboxContentImpl` none, so the Vue `ComboboxContent` has to add the layer
|
|
124
|
+
* by hand to reach the behaviour this side gets for nothing.
|
|
125
|
+
*
|
|
116
126
|
* **One thing here has no Vue counterpart.** cmdk re-sorts the option elements
|
|
117
127
|
* by moving the DOM nodes themselves whenever the search term changes, and a
|
|
118
128
|
* focused field inside a row that gets reparented loses focus. Typing in the
|
|
@@ -22,6 +22,12 @@ export interface ComboboxContextValue extends ComboboxEditing {
|
|
|
22
22
|
/** Search string driving cmdk filtering. */
|
|
23
23
|
search: string;
|
|
24
24
|
setSearch: (search: string) => void;
|
|
25
|
+
/** Typing: restart the quiet period before the root's `onSearch`. */
|
|
26
|
+
scheduleSearch: (term: string) => void;
|
|
27
|
+
/** A gesture that settles the term — clearing it. Report now. */
|
|
28
|
+
searchImmediately: (term: string) => void;
|
|
29
|
+
/** Whether cmdk should leave the rendered options alone. */
|
|
30
|
+
skipFilter: boolean;
|
|
25
31
|
/**
|
|
26
32
|
* The text each option renders, keyed by the value it selects, so the field
|
|
27
33
|
* can show `Barcelona` rather than `barcelona`. See `useComboboxLabels` for
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface ComboboxSearch {
|
|
2
|
+
/** Typing: restart the quiet period, emit when it elapses. */
|
|
3
|
+
schedule: (term: string) => void;
|
|
4
|
+
/** A gesture that settles the term — clearing it. Emit now. */
|
|
5
|
+
immediately: (term: string) => void;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* The wire between whichever field is typed into and the root's `onSearch`.
|
|
9
|
+
*
|
|
10
|
+
* The root is where `debounce` and `onSearch` belong — there are three fields
|
|
11
|
+
* (`ComboboxInput`, `ComboboxChipsInput`, and `ComboboxCancel` clearing one of
|
|
12
|
+
* them) and a prop on each would be the same number asked three times. The
|
|
13
|
+
* fields reach it through the shared context, beside `setSearch`.
|
|
14
|
+
*
|
|
15
|
+
* The fields report from their `onChange` rather than from the term itself,
|
|
16
|
+
* because the term is also written when a value is selected — the field is
|
|
17
|
+
* reset and the resolved label put in its place — and a search fired for the
|
|
18
|
+
* text of the option the user just picked is a request nobody asked for.
|
|
19
|
+
*/
|
|
20
|
+
export declare function useComboboxSearch(debounce: number, onSearch: ((term: string) => void) | undefined): ComboboxSearch;
|
|
@@ -6,14 +6,14 @@ export interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInput
|
|
|
6
6
|
* Milliseconds of no typing before `onSearch` fires. `0` fires on every
|
|
7
7
|
* keystroke.
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
debounce?: number;
|
|
10
10
|
/** Controlled term. Pair with `onValueChange`; omit for uncontrolled. */
|
|
11
11
|
value?: string;
|
|
12
12
|
/** Starting term when uncontrolled. */
|
|
13
13
|
defaultValue?: string;
|
|
14
14
|
/** Called on every keystroke with the next term, without waiting. */
|
|
15
15
|
onValueChange?: (value: string) => void;
|
|
16
|
-
/** Called once typing has been quiet for `
|
|
16
|
+
/** Called once typing has been quiet for `debounce` ms — and at once on Enter or clear. */
|
|
17
17
|
onSearch?: (term: string) => void;
|
|
18
18
|
dataTestid: string;
|
|
19
19
|
}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
export { SearchBar } from './SearchBar.tsx';
|
|
3
3
|
export type { SearchBarProps } from './SearchBar.tsx';
|
|
4
|
-
export { useSearchDelay } from './useSearchDelay.ts';
|
|
5
|
-
export type { UseSearchDelayReturn } from './useSearchDelay.ts';
|
|
6
4
|
/**
|
|
7
5
|
* Class names, not utilities — see `Button/index.ts` for why the package
|
|
8
6
|
* cannot publish `.h-10` and `.rounded-lg` of its own. `SearchBar.module.css`
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -8,5 +8,7 @@
|
|
|
8
8
|
* sibling's folder and a reader having to know that `Textarea`'s sizing is
|
|
9
9
|
* really `ChatInput`'s. See `.claude/rules/component-architecture.md` §13.
|
|
10
10
|
*/
|
|
11
|
-
export { useAutoGrow } from './useAutoGrow.ts';
|
|
12
|
-
export type { UseAutoGrowReturn } from './useAutoGrow.ts';
|
|
11
|
+
export { useAutoGrow } from './useAutoGrow/useAutoGrow.ts';
|
|
12
|
+
export type { UseAutoGrowReturn } from './useAutoGrow/useAutoGrow.ts';
|
|
13
|
+
export { useSearchDebounce } from './useSearchDebounce/useSearchDebounce.ts';
|
|
14
|
+
export type { UseSearchDebounceReturn } from './useSearchDebounce/useSearchDebounce.ts';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* The quiet period between typing and searching — mirrors
|
|
3
|
-
* `@sesame/orxata-core` `
|
|
3
|
+
* `@sesame/orxata-core` `useSearchDebounce`.
|
|
4
4
|
*
|
|
5
5
|
* A search field that emits on every keystroke turns "Marie" into five
|
|
6
6
|
* requests, four of which are already stale by the time they land. Waiting for
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
* drops whatever `schedule` had pending, which would otherwise fire a moment
|
|
14
14
|
* later with a term the user has already moved on from.
|
|
15
15
|
*/
|
|
16
|
-
export interface
|
|
16
|
+
export interface UseSearchDebounceReturn {
|
|
17
17
|
/** Restart the quiet period; emit when it elapses. */
|
|
18
18
|
schedule: (term: string) => void;
|
|
19
19
|
/** Emit now, dropping anything pending. */
|
|
@@ -21,4 +21,4 @@ export interface UseSearchDelayReturn {
|
|
|
21
21
|
/** Drop anything pending without emitting. */
|
|
22
22
|
cancel: () => void;
|
|
23
23
|
}
|
|
24
|
-
export declare const
|
|
24
|
+
export declare const useSearchDebounce: (debounce: number, emit: (term: string) => void) => UseSearchDebounceReturn;
|
package/dist/main.d.ts
CHANGED
|
@@ -44,6 +44,6 @@ export { PageControl as OxPageControl, pageControlDots, PAGE_CONTROL_WINDOW, typ
|
|
|
44
44
|
export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, BreadcrumbItem as OxBreadcrumbItem, BreadcrumbLink as OxBreadcrumbLink, BreadcrumbPage as OxBreadcrumbPage, BreadcrumbSeparator as OxBreadcrumbSeparator, BreadcrumbEllipsis as OxBreadcrumbEllipsis, } from './Navigation/Breadcrumb/index.ts';
|
|
45
45
|
export { Counter as OxCounter, counterVariants, type CounterVariants, } from './Forms/Field/Counter/index.ts';
|
|
46
46
|
export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, useFieldControl, useFieldControlGroup, type FieldControlAttrs, type FieldControlGroupAttrs, type FieldGroupProps, type FieldVariant, } from './Forms/Field/index.ts';
|
|
47
|
-
export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Calendar as OxCalendar, CalendarRange as OxCalendarRange, CalendarDay as OxCalendarDay, calendarDayVariants, Combobox as OxCombobox, ComboboxCancel as OxComboboxCancel, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxItemEdit as OxComboboxItemEdit, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, ChatInput as OxChatInput, DatePicker as OxDatePicker, DateRangePicker as OxDateRangePicker, DatePickerTrigger as OxDatePickerTrigger, DatePickerHeader as OxDatePickerHeader, DatePickerMonthSelect as OxDatePickerMonthSelect, DatePickerYearSelect as OxDatePickerYearSelect, SearchBar as OxSearchBar, searchBarVariants,
|
|
47
|
+
export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Calendar as OxCalendar, CalendarRange as OxCalendarRange, CalendarDay as OxCalendarDay, calendarDayVariants, Combobox as OxCombobox, ComboboxCancel as OxComboboxCancel, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxItemEdit as OxComboboxItemEdit, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, ChatInput as OxChatInput, DatePicker as OxDatePicker, DateRangePicker as OxDateRangePicker, DatePickerTrigger as OxDatePickerTrigger, DatePickerHeader as OxDatePickerHeader, DatePickerMonthSelect as OxDatePickerMonthSelect, DatePickerYearSelect as OxDatePickerYearSelect, SearchBar as OxSearchBar, searchBarVariants, SearchPanel as OxSearchPanel, SearchPanelInput as OxSearchPanelInput, SearchPanelList as OxSearchPanelList, SearchPanelGroup as OxSearchPanelGroup, SearchPanelItem as OxSearchPanelItem, SearchPanelEmpty as OxSearchPanelEmpty, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, Textarea as OxTextarea, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type CalendarProps, type CalendarRangeProps, type CalendarDateRange, type CalendarDayProps, type CalendarDayState, type CalendarDayVariants, type CalendarConstraints, type CalendarNav, type ComboboxProps, type ChatInputActionLabels, type ChatInputState, type DatePickerProps, type DateRangePickerProps, type DatePickerTriggerProps, type DatePickerHeaderProps, type DatePickerMonthSelectProps, type DatePickerYearSelectProps, type SearchBarVariants, type SelectProps, type TextareaCounterState, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
|
|
48
48
|
export { Table as OxTable, TableVirtualized as OxTableVirtualized, TableHead as OxTableHead, TableBody as OxTableBody, TableRow as OxTableRow, TableCell as OxTableCell, TableHeaderCell as OxTableHeaderCell, TableSelectCell as OxTableSelectCell, TableDragCell as OxTableDragCell, TableBulkHeader as OxTableBulkHeader, TablePagination as OxTablePagination, TableEmpty as OxTableEmpty, TableRowExpanded as OxTableRowExpanded, TableExpandCell as OxTableExpandCell, TableColumnVisibility as OxTableColumnVisibility, useTable, useTableSelection, useTableSorting, useTablePagination, useTableDetailRow, useTablePinning, useTableColumns, useScrollShadow, useDragToScroll, useFixedColumns, useTableVirtual, } from './Data/Table/index.ts';
|
|
49
49
|
export type { UseTableOptions, UseTableReturn, UseTableSelectionReturn, UseTableSortingReturn, UseTablePaginationOptions, UseTablePaginationReturn, DetailRowInstance, DetailRowOptions, DetailRowPluginDef, UseTablePinningOptions, UseTablePinningReturn, CellInfo, HeaderInfo, UseTableVirtualOptions, UseTableVirtualReturn, UseTableColumnsOptions, UseTableColumnsReturn, UseScrollShadowOptions, UseScrollShadowReturn, UseDragToScrollOptions, UseDragToScrollReturn, UseFixedColumnsOptions, TableProps, TableMode, ColumnDef, ColumnAlign, CellContext, SortingState, PaginationState, PaginationChangePayload, SortingChangePayload, SelectionChangePayload, FilterChangePayload, ColumnResizeMode, ColumnVisibilityState, ColumnOrderState, ExpandedState, ColumnVisibilityChangePayload, ColumnOrderChangePayload, RowExpandChangePayload, ColumnResizePayload, ColumnPinningState, } from './Data/Table/index.ts';
|