draft-components 1.6.0 → 1.7.0

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 (174) hide show
  1. package/cjs/components/dialog/dialog.cjs +1 -1
  2. package/cjs/components/filtered-search/filter-item.cjs +23 -0
  3. package/cjs/components/filtered-search/filter-operator-select.cjs +17 -0
  4. package/cjs/components/filtered-search/filter-token.cjs +17 -0
  5. package/cjs/components/filtered-search/filter-value-list.cjs +20 -0
  6. package/cjs/components/filtered-search/filtered-search.cjs +202 -0
  7. package/cjs/components/filtered-search/icons.cjs +21 -0
  8. package/cjs/components/filtered-search/model/abstract-filter.cjs +6 -0
  9. package/cjs/components/filtered-search/model/string-filter.cjs +46 -0
  10. package/cjs/components/filtered-search/model/string-set-filter.cjs +44 -0
  11. package/cjs/components/filtered-search/string-filter-input.cjs +17 -0
  12. package/cjs/components/filtered-search/string-filter-item.cjs +68 -0
  13. package/cjs/components/filtered-search/string-set-filter-item.cjs +77 -0
  14. package/cjs/components/filtered-search/use-combobox-ids.cjs +17 -0
  15. package/cjs/components/filtered-search/use-translations.cjs +24 -0
  16. package/cjs/components/index.cjs +12 -0
  17. package/cjs/components/popover/popover.cjs +3 -4
  18. package/cjs/components/slide-over/slide-over-body.cjs +10 -0
  19. package/cjs/components/slide-over/slide-over-context.cjs +24 -0
  20. package/cjs/components/slide-over/slide-over-header.cjs +21 -0
  21. package/cjs/components/slide-over/slide-over.cjs +106 -0
  22. package/cjs/hooks/index.cjs +2 -2
  23. package/cjs/hooks/use-disable-body-scroll.cjs +3 -1
  24. package/cjs/hooks/use-esc-key-down.cjs +3 -1
  25. package/cjs/hooks/use-focus-trap.cjs +3 -1
  26. package/cjs/index.cjs +16 -2
  27. package/cjs/lib/helpers.cjs +5 -1
  28. package/cjs/lib/index.cjs +2 -0
  29. package/cjs/lib/keyboard-keys.cjs +1 -0
  30. package/cjs/lib/react-helpers.cjs +8 -0
  31. package/css/draft-components.css +340 -2
  32. package/css/draft-components.dark.css +65 -40
  33. package/esm/components/dialog/dialog.js +1 -1
  34. package/esm/components/filtered-search/filter-item.js +21 -0
  35. package/esm/components/filtered-search/filter-operator-select.js +15 -0
  36. package/esm/components/filtered-search/filter-token.js +15 -0
  37. package/esm/components/filtered-search/filter-value-list.js +18 -0
  38. package/esm/components/filtered-search/filtered-search.js +200 -0
  39. package/esm/components/filtered-search/icons.js +16 -0
  40. package/esm/components/filtered-search/model/abstract-filter.js +4 -0
  41. package/esm/components/filtered-search/model/string-filter.js +44 -0
  42. package/esm/components/filtered-search/model/string-set-filter.js +42 -0
  43. package/esm/components/filtered-search/string-filter-input.js +15 -0
  44. package/esm/components/filtered-search/string-filter-item.js +66 -0
  45. package/esm/components/filtered-search/string-set-filter-item.js +75 -0
  46. package/esm/components/filtered-search/use-combobox-ids.js +15 -0
  47. package/esm/components/filtered-search/use-translations.js +21 -0
  48. package/esm/components/index.js +6 -0
  49. package/esm/components/popover/popover.js +3 -4
  50. package/esm/components/slide-over/slide-over-body.js +8 -0
  51. package/esm/components/slide-over/slide-over-context.js +21 -0
  52. package/esm/components/slide-over/slide-over-header.js +19 -0
  53. package/esm/components/slide-over/slide-over.js +104 -0
  54. package/esm/hooks/index.js +1 -1
  55. package/esm/hooks/use-disable-body-scroll.js +3 -1
  56. package/esm/hooks/use-esc-key-down.js +3 -1
  57. package/esm/hooks/use-focus-trap.js +3 -1
  58. package/esm/index.js +9 -3
  59. package/esm/lib/helpers.js +5 -2
  60. package/esm/lib/index.js +2 -2
  61. package/esm/lib/keyboard-keys.js +1 -0
  62. package/esm/lib/react-helpers.js +8 -1
  63. package/package.json +1 -1
  64. package/types/components/alert/alert.d.ts +1 -1
  65. package/types/components/avatar/avatar.d.ts +1 -1
  66. package/types/components/avatar-group/avatar-group.d.ts +1 -1
  67. package/types/components/badge/badge.d.ts +1 -1
  68. package/types/components/breadcrumbs/breadcrumbs-context.d.ts +1 -1
  69. package/types/components/breadcrumbs/breadcrumbs-item.d.ts +1 -1
  70. package/types/components/breadcrumbs/breadcrumbs.d.ts +1 -1
  71. package/types/components/button/button.d.ts +1 -1
  72. package/types/components/button/icon-button.d.ts +2 -2
  73. package/types/components/button-group/button-group.d.ts +1 -1
  74. package/types/components/caption/caption.d.ts +1 -1
  75. package/types/components/caption/icons.d.ts +1 -1
  76. package/types/components/checkbox/checkbox.d.ts +1 -1
  77. package/types/components/color-picker/color-picker-button.d.ts +1 -1
  78. package/types/components/color-picker/color-picker.d.ts +1 -1
  79. package/types/components/date-picker/calendar-day.d.ts +1 -1
  80. package/types/components/date-picker/calendar-grid-head.d.ts +1 -1
  81. package/types/components/date-picker/calendar-grid.d.ts +1 -1
  82. package/types/components/date-picker/calendar.d.ts +3 -3
  83. package/types/components/date-picker/date-picker.d.ts +3 -3
  84. package/types/components/date-picker/date-range-picker.d.ts +4 -4
  85. package/types/components/date-picker/date-range.d.ts +1 -1
  86. package/types/components/date-picker/icons.d.ts +1 -1
  87. package/types/components/date-picker-popover/date-picker-popover.d.ts +3 -3
  88. package/types/components/date-range-picker-popover/date-range-picker-popover-footer.d.ts +1 -1
  89. package/types/components/date-range-picker-popover/date-range-picker-popover-presets.d.ts +1 -1
  90. package/types/components/date-range-picker-popover/date-range-picker-popover.d.ts +4 -4
  91. package/types/components/date-range-picker-popover/types.d.ts +1 -1
  92. package/types/components/dialog/dialog-body.d.ts +1 -1
  93. package/types/components/dialog/dialog-context.d.ts +1 -1
  94. package/types/components/dialog/dialog-footer.d.ts +1 -1
  95. package/types/components/dialog/dialog-header.d.ts +1 -1
  96. package/types/components/dialog/dialog.d.ts +1 -1
  97. package/types/components/dialog/x-mark-icon.d.ts +1 -1
  98. package/types/components/empty-state/empty-state.d.ts +1 -1
  99. package/types/components/filter-buttons/filter-button.d.ts +1 -1
  100. package/types/components/filter-buttons/filter-buttons.d.ts +1 -1
  101. package/types/components/filtered-search/filter-item.d.ts +10 -0
  102. package/types/components/filtered-search/filter-operator-select.d.ts +10 -0
  103. package/types/components/filtered-search/filter-token.d.ts +9 -0
  104. package/types/components/filtered-search/filter-value-list.d.ts +8 -0
  105. package/types/components/filtered-search/filtered-search.d.ts +15 -0
  106. package/types/components/filtered-search/icons.d.ts +5 -0
  107. package/types/components/filtered-search/index.d.ts +4 -0
  108. package/types/components/filtered-search/model/abstract-filter.d.ts +6 -0
  109. package/types/components/filtered-search/model/string-filter.d.ts +47 -0
  110. package/types/components/filtered-search/model/string-set-filter.d.ts +41 -0
  111. package/types/components/filtered-search/model/validation-result.d.ts +6 -0
  112. package/types/components/filtered-search/string-filter-input.d.ts +9 -0
  113. package/types/components/filtered-search/string-filter-item.d.ts +13 -0
  114. package/types/components/filtered-search/string-set-filter-item.d.ts +15 -0
  115. package/types/components/filtered-search/types.d.ts +4 -0
  116. package/types/components/filtered-search/use-combobox-ids.d.ts +5 -0
  117. package/types/components/filtered-search/use-translations.d.ts +13 -0
  118. package/types/components/form-field/form-field.d.ts +1 -1
  119. package/types/components/index.d.ts +2 -0
  120. package/types/components/label/label.d.ts +1 -1
  121. package/types/components/menu/menu-item.d.ts +1 -1
  122. package/types/components/menu/menu-separator.d.ts +1 -1
  123. package/types/components/menu/menu.d.ts +3 -3
  124. package/types/components/nav-list/nav-list-item.d.ts +1 -1
  125. package/types/components/nav-list/nav-list-title.d.ts +1 -1
  126. package/types/components/nav-list/nav-list.d.ts +1 -1
  127. package/types/components/password-input/icons.d.ts +1 -1
  128. package/types/components/password-input/password-input.d.ts +1 -1
  129. package/types/components/popover/popover.d.ts +3 -1
  130. package/types/components/portal/portal-context.d.ts +1 -1
  131. package/types/components/portal/portal.d.ts +1 -1
  132. package/types/components/positioner/calc-position.d.ts +1 -1
  133. package/types/components/positioner/positioner.d.ts +2 -2
  134. package/types/components/radio/radio.d.ts +1 -1
  135. package/types/components/segmented-control/segmented-control-button.d.ts +1 -1
  136. package/types/components/segmented-control/segmented-control.d.ts +1 -1
  137. package/types/components/select/select.d.ts +1 -1
  138. package/types/components/selection-control/selection-control.d.ts +1 -1
  139. package/types/components/slide-over/index.d.ts +4 -0
  140. package/types/components/slide-over/slide-over-body.d.ts +3 -0
  141. package/types/components/slide-over/slide-over-context.d.ts +14 -0
  142. package/types/components/slide-over/slide-over-header.d.ts +11 -0
  143. package/types/components/slide-over/slide-over.d.ts +15 -0
  144. package/types/components/slide-over/types.d.ts +1 -0
  145. package/types/components/slider/slider-tick-marks.d.ts +1 -1
  146. package/types/components/slider/slider.d.ts +2 -2
  147. package/types/components/spinner/spinner.d.ts +1 -1
  148. package/types/components/switch/switch.d.ts +1 -1
  149. package/types/components/table/table-body.d.ts +1 -1
  150. package/types/components/table/table-cell.d.ts +1 -1
  151. package/types/components/table/table-container.d.ts +1 -1
  152. package/types/components/table/table-head-cell.d.ts +1 -1
  153. package/types/components/table/table-head.d.ts +1 -1
  154. package/types/components/table/table-row.d.ts +1 -1
  155. package/types/components/table/table.d.ts +1 -1
  156. package/types/components/tabs/tab-list.d.ts +1 -1
  157. package/types/components/tabs/tab-panel.d.ts +2 -2
  158. package/types/components/tabs/tab.d.ts +1 -1
  159. package/types/components/tabs/tabs-context.d.ts +2 -2
  160. package/types/components/tabs/tabs.d.ts +2 -2
  161. package/types/components/tag/tag.d.ts +1 -1
  162. package/types/components/text-input/text-input.d.ts +1 -1
  163. package/types/components/textarea/textarea.d.ts +1 -1
  164. package/types/components/toast/toast-button.d.ts +1 -1
  165. package/types/components/toast/toast.d.ts +1 -1
  166. package/types/components/toaster/toaster.d.ts +1 -1
  167. package/types/components/tooltip/tooltip.d.ts +2 -2
  168. package/types/hooks/index.d.ts +1 -1
  169. package/types/hooks/use-disable-body-scroll.d.ts +1 -1
  170. package/types/hooks/use-esc-key-down.d.ts +1 -1
  171. package/types/hooks/use-focus-trap.d.ts +2 -2
  172. package/types/lib/helpers.d.ts +1 -0
  173. package/types/lib/keyboard-keys.d.ts +1 -0
  174. package/types/lib/react-helpers.d.ts +2 -1
@@ -0,0 +1,47 @@
1
+ import { AbstractFilter } from './abstract-filter';
2
+ import { ValidationResult } from './validation-result';
3
+ declare const TYPE = "STRING";
4
+ declare const OPERATORS: {
5
+ readonly equal: "EQUAL";
6
+ readonly notEqual: "NOT_EQUAL";
7
+ readonly contain: "CONTAIN";
8
+ readonly notContain: "NOT_CONTAIN";
9
+ };
10
+ export type StringFilterType = typeof TYPE;
11
+ export type StringFilterOperator = typeof OPERATORS[keyof typeof OPERATORS];
12
+ export type StringFilterConfig = {
13
+ type: StringFilterType;
14
+ field: string;
15
+ label: string;
16
+ operators: StringFilterOperator[];
17
+ valueInputPlaceholder?: string;
18
+ valueInputAccessibleName?: string;
19
+ operatorSelectAccessibleName?: string;
20
+ valueValidator?: (value: string) => ValidationResult;
21
+ operatorFormatter?: (operator: StringFilterOperator) => string;
22
+ };
23
+ export type StringFilterState = {
24
+ value: string;
25
+ operator: StringFilterOperator;
26
+ };
27
+ export declare class StringFilter extends AbstractFilter {
28
+ static readonly Type = "STRING";
29
+ static readonly Operators: {
30
+ readonly equal: "EQUAL";
31
+ readonly notEqual: "NOT_EQUAL";
32
+ readonly contain: "CONTAIN";
33
+ readonly notContain: "NOT_CONTAIN";
34
+ };
35
+ readonly config: Readonly<StringFilterConfig>;
36
+ readonly state: Readonly<StringFilterState>;
37
+ constructor(config: StringFilterConfig, state: StringFilterState);
38
+ get type(): "STRING";
39
+ get field(): string;
40
+ get label(): string;
41
+ get value(): string;
42
+ get operator(): StringFilterOperator;
43
+ setValue(value: string): StringFilter;
44
+ setOperator(operator: StringFilterOperator): StringFilter;
45
+ isEmpty(): boolean;
46
+ }
47
+ export {};
@@ -0,0 +1,41 @@
1
+ import { AbstractFilter } from './abstract-filter';
2
+ declare const TYPE = "STRING_SET";
3
+ declare const OPERATORS: {
4
+ readonly in: "IN";
5
+ readonly notIn: "NOT_IN";
6
+ };
7
+ export type StringSetFilterType = typeof TYPE;
8
+ export type StringSetFilterOperator = typeof OPERATORS[keyof typeof OPERATORS];
9
+ export type StringSetFilterConfig = {
10
+ type: StringSetFilterType;
11
+ field: string;
12
+ label: string;
13
+ values: string[];
14
+ valueFormatter?: (value: string) => string;
15
+ operatorSelectAccessibleName?: string;
16
+ operators: StringSetFilterOperator[];
17
+ operatorFormatter?: (operator: StringSetFilterOperator) => string;
18
+ };
19
+ export type StringSetFilterState = {
20
+ value: string[];
21
+ operator: StringSetFilterOperator;
22
+ };
23
+ export declare class StringSetFilter extends AbstractFilter {
24
+ static readonly Type = "STRING_SET";
25
+ static readonly Operators: {
26
+ readonly in: "IN";
27
+ readonly notIn: "NOT_IN";
28
+ };
29
+ readonly config: Readonly<StringSetFilterConfig>;
30
+ readonly state: Readonly<StringSetFilterState>;
31
+ constructor(config: StringSetFilterConfig, state: StringSetFilterState);
32
+ get type(): "STRING_SET";
33
+ get field(): string;
34
+ get label(): string;
35
+ get value(): string[];
36
+ get operator(): StringSetFilterOperator;
37
+ setValue(value: string[]): StringSetFilter;
38
+ setOperator(operator: StringSetFilterOperator): StringSetFilter;
39
+ isEmpty(): boolean;
40
+ }
41
+ export {};
@@ -0,0 +1,6 @@
1
+ export type ValidationResult = {
2
+ valid: true;
3
+ } | {
4
+ valid: false;
5
+ error: string;
6
+ };
@@ -0,0 +1,9 @@
1
+ export type StringFilterInputProps = {
2
+ className?: string;
3
+ accessibleName?: string;
4
+ placeholder?: string;
5
+ error?: string;
6
+ value: string;
7
+ onChangeValue: (value: string) => void;
8
+ };
9
+ export declare function StringFilterInput({ className, accessibleName, placeholder, error, value, onChangeValue, }: StringFilterInputProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,13 @@
1
+ import { StringFilter, StringFilterOperator } from './model/string-filter';
2
+ export type StringFilterItemProps = {
3
+ filter: StringFilter;
4
+ isEditing: boolean;
5
+ onEditStart: (filter: StringFilter) => void;
6
+ onEditCancel: (filter: StringFilter) => void;
7
+ onRemove: (filter: StringFilter) => void;
8
+ onChange: (filter: StringFilter) => void;
9
+ };
10
+ export declare function StringFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }: StringFilterItemProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare namespace StringFilterItem {
12
+ var defaultOperatorFormatter: (operator: StringFilterOperator) => string;
13
+ }
@@ -0,0 +1,15 @@
1
+ import { StringSetFilter, StringSetFilterOperator } from './model/string-set-filter';
2
+ export type StringSetFilterItemProps = {
3
+ filter: StringSetFilter;
4
+ isEditing: boolean;
5
+ onEditStart: (filter: StringSetFilter) => void;
6
+ onEditCancel: (filter: StringSetFilter) => void;
7
+ onRemove: (filter: StringSetFilter) => void;
8
+ onChange: (filter: StringSetFilter) => void;
9
+ };
10
+ export declare function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCancel, onRemove, onChange, }: StringSetFilterItemProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare namespace StringSetFilterItem {
12
+ var defaultValueFormatter: (value: string) => string;
13
+ var defaultOperatorFormatter: (operator: StringSetFilterOperator) => string;
14
+ var formatFilterValue: (values: string[]) => string;
15
+ }
@@ -0,0 +1,4 @@
1
+ import { StringFilter, StringFilterConfig } from './model/string-filter';
2
+ import { StringSetFilter, StringSetFilterConfig } from './model/string-set-filter';
3
+ export type FilterConfig = StringFilterConfig | StringSetFilterConfig;
4
+ export type Filter = StringFilter | StringSetFilter;
@@ -0,0 +1,5 @@
1
+ export declare function useComboboxIds(): {
2
+ textBoxId: string;
3
+ listBoxId: string;
4
+ getOptionId: (key: string) => string;
5
+ };
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from 'react';
2
+ export type FilteredSearchMessages = {
3
+ applyButton: string;
4
+ cancelButton: string;
5
+ removeFilterButton: string;
6
+ };
7
+ export declare function useTranslations(): FilteredSearchMessages;
8
+ export declare function TranslationsProvider({ applyButton, cancelButton, removeFilterButton, children, }: {
9
+ applyButton: string;
10
+ cancelButton: string;
11
+ removeFilterButton: string;
12
+ children: ReactNode;
13
+ }): import("react/jsx-runtime").JSX.Element;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  export type FormFieldRenderFn = (props: {
3
3
  id: string;
4
4
  required: boolean;
@@ -15,6 +15,7 @@ export * from './dialog';
15
15
  export * from './empty-state';
16
16
  export * from './file-picker';
17
17
  export * from './filter-buttons';
18
+ export * from './filtered-search';
18
19
  export * from './form-field';
19
20
  export * from './label';
20
21
  export * from './menu';
@@ -27,6 +28,7 @@ export * from './radio';
27
28
  export * from './segmented-control';
28
29
  export * from './select';
29
30
  export * from './selection-control';
31
+ export * from './slide-over';
30
32
  export * from './slider';
31
33
  export * from './spinner';
32
34
  export * from './switch';
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  export type LabelProps = ComponentPropsWithRef<'label'> & {
3
3
  required?: boolean;
4
4
  };
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef, type ReactNode } from 'react';
1
+ import { ComponentPropsWithRef, ReactNode } from 'react';
2
2
  type MenuItemHTMLProps = ComponentPropsWithRef<'button'>;
3
3
  type MenuItemBaseProps = Omit<MenuItemHTMLProps, 'children' | 'role'>;
4
4
  export type MenuItemAppearance = 'default' | 'destructive';
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
1
+ import { ComponentPropsWithoutRef } from 'react';
2
2
  type MenuSeparatorHTMLProps = ComponentPropsWithoutRef<'li'>;
3
3
  type MenuSeparatorBaseProps = Omit<MenuSeparatorHTMLProps, 'children'>;
4
4
  export type MenuSeparatorProps = MenuSeparatorBaseProps;
@@ -1,6 +1,6 @@
1
- import { type ComponentPropsWithoutRef, type JSX, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type RefCallback } from 'react';
2
- import { type ButtonAppearance, type ButtonVariant } from '../button';
3
- import { type PopoverAlignment, type PopoverPlacement } from '../popover';
1
+ import { ComponentPropsWithoutRef, JSX, KeyboardEventHandler, MouseEventHandler, ReactNode, RefCallback } from 'react';
2
+ import { ButtonAppearance, ButtonVariant } from '../button';
3
+ import { PopoverAlignment, PopoverPlacement } from '../popover';
4
4
  export type MenuButtonRenderFn = (props: {
5
5
  ref: RefCallback<HTMLElement>;
6
6
  id: string;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
2
2
  type NavListItemHTMLProps = ComponentPropsWithoutRef<'a'>;
3
3
  export type NavListItemRenderFn = (props: {
4
4
  className: string;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  type NavListTitleHTMLProps = ComponentPropsWithoutRef<'li'>;
3
3
  type NavListTitleBaseProps = Omit<NavListTitleHTMLProps, 'children'>;
4
4
  export type NavListTitleProps = {
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
1
+ import { ComponentPropsWithoutRef } from 'react';
2
2
  type NavListHTMLProps = ComponentPropsWithoutRef<'nav'>;
3
3
  export type NavListProps = NavListHTMLProps;
4
4
  export declare function NavList({ className, children, ...props }: NavListProps): import("react/jsx-runtime").JSX.Element;
@@ -1,3 +1,3 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
1
+ import { ComponentPropsWithoutRef } from 'react';
2
2
  export declare function EyeIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
3
3
  export declare function EyeSlashIcon(props: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { type TextInputProps } from '../text-input';
2
+ import { TextInputProps } from '../text-input';
3
3
  type PasswordInputBaseProps = Omit<TextInputProps, 'type' | 'rightAddOn'>;
4
4
  export type PasswordInputProps = {
5
5
  isDefaultVisible?: boolean;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef, type ReactNode, type RefCallback } from 'react';
1
+ import { ComponentPropsWithoutRef, ReactNode, RefCallback } from 'react';
2
2
  import { type PositionerProps } from '../positioner';
3
3
  export type PopoverRef = {
4
4
  open(): void;
@@ -23,6 +23,7 @@ export type PopoverProps = {
23
23
  isOpen?: boolean;
24
24
  shouldTrapFocus?: boolean;
25
25
  shouldFocusAnchorAfterEscPress?: boolean;
26
+ transitionDurationMs?: number;
26
27
  anchorGap?: number;
27
28
  viewportGap?: number;
28
29
  placement?: PopoverPlacement;
@@ -37,6 +38,7 @@ export declare const Popover: import("react").ForwardRefExoticComponent<{
37
38
  isOpen?: boolean | undefined;
38
39
  shouldTrapFocus?: boolean | undefined;
39
40
  shouldFocusAnchorAfterEscPress?: boolean | undefined;
41
+ transitionDurationMs?: number | undefined;
40
42
  anchorGap?: number | undefined;
41
43
  viewportGap?: number | undefined;
42
44
  placement?: PopoverPlacement;
@@ -1,4 +1,4 @@
1
- import { type ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  export declare function usePortalRoot(): HTMLElement;
3
3
  export declare function PortalRootProvider(props: {
4
4
  children?: ReactNode;
@@ -1,4 +1,4 @@
1
- import { type ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  export type PortalProps = {
3
3
  children: ReactNode;
4
4
  };
@@ -1,4 +1,4 @@
1
- import { type Alignment, type Coordinates, type Placement, type Rect } from './types';
1
+ import { Alignment, Coordinates, Placement, Rect } from './types';
2
2
  export type CalcPositionParams = {
3
3
  placement: Placement;
4
4
  alignment: Alignment;
@@ -1,5 +1,5 @@
1
- import { type CSSProperties, type ReactNode, type RefCallback } from 'react';
2
- import { type Alignment, type Placement } from './types';
1
+ import { CSSProperties, ReactNode, RefCallback } from 'react';
2
+ import { Alignment, Placement } from './types';
3
3
  export type PositionerAnchorRenderFn = (params: {
4
4
  setRef: RefCallback<HTMLElement>;
5
5
  }) => ReactNode;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  type RadioHTMLProps = ComponentPropsWithRef<'input'>;
3
3
  type RadioBaseProps = Omit<RadioHTMLProps, 'type'>;
4
4
  export type RadioIcon = 'dot' | 'check';
@@ -1,4 +1,4 @@
1
- import { type ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  export type SegmentedControlButtonProps<T extends string | number> = {
3
3
  icon?: ReactNode;
4
4
  children?: ReactNode;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef, type ReactNode } from 'react';
1
+ import { ComponentPropsWithRef, ReactNode } from 'react';
2
2
  export type SegmentedControlOption<T extends string | number> = {
3
3
  value: T;
4
4
  icon?: ReactNode;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  export type SelectSize = 'sm' | 'md' | 'lg';
3
3
  type SelectHTMLProps = ComponentPropsWithRef<'select'>;
4
4
  type SelectBaseProps = Omit<SelectHTMLProps, 'size' | 'multiple' | 'value' | 'defaultValue'> & {
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
2
2
  export type SelectionControlRenderFn = (props: {
3
3
  id: string;
4
4
  }) => JSX.Element;
@@ -0,0 +1,4 @@
1
+ export { type SlideOverCloseCallback } from './types';
2
+ export { SlideOver, type SlideOverProps } from './slide-over';
3
+ export { SlideOverHeader, type SlideOverHeaderProps, } from './slide-over-header';
4
+ export { SlideOverBody, type SlideOverBodyProps, } from './slide-over-body';
@@ -0,0 +1,3 @@
1
+ import { ComponentPropsWithoutRef } from 'react';
2
+ export type SlideOverBodyProps = ComponentPropsWithoutRef<'div'>;
3
+ export declare function SlideOverBody({ className, ...props }: SlideOverBodyProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,14 @@
1
+ import { SlideOverCloseCallback } from './types';
2
+ import { ReactNode } from 'react';
3
+ export type SlideOverContext = {
4
+ titleId: string;
5
+ descriptionId: string;
6
+ closePanel: SlideOverCloseCallback;
7
+ };
8
+ export declare function useSlideOverContext(): SlideOverContext;
9
+ export declare function SlideOverContextProvider({ titleId, descriptionId, closePanel, children, }: {
10
+ titleId: string;
11
+ descriptionId: string;
12
+ closePanel: SlideOverCloseCallback;
13
+ children: ReactNode;
14
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,11 @@
1
+ import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';
2
+ export type SlideOverHeaderHTMLProps = ComponentPropsWithoutRef<'div'>;
3
+ export type SlideOverHeaderBaseProps = Omit<SlideOverHeaderHTMLProps, 'title'>;
4
+ export type SlideOverHeaderProps = {
5
+ htmlTitle?: SlideOverHeaderHTMLProps['title'];
6
+ title: ReactNode;
7
+ description?: ReactNode;
8
+ closeButtonAccessibleName?: string;
9
+ onClickCloseButton?: MouseEventHandler<HTMLButtonElement>;
10
+ } & SlideOverHeaderBaseProps;
11
+ export declare function SlideOverHeader({ className, htmlTitle, title, description, closeButtonAccessibleName, onClickCloseButton, ...props }: SlideOverHeaderProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,15 @@
1
+ import { SlideOverCloseCallback } from './types';
2
+ import { ComponentPropsWithoutRef } from 'react';
3
+ import { SlideOverHeader } from './slide-over-header';
4
+ import { SlideOverBody } from './slide-over-body';
5
+ export type SlideOverHTMLProps = ComponentPropsWithoutRef<'div'>;
6
+ export type SlideOverProps = SlideOverHTMLProps & {
7
+ animationDurationMs?: number;
8
+ animationDisabled?: boolean;
9
+ onClose: SlideOverCloseCallback;
10
+ };
11
+ export declare function SlideOver({ 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, animationDurationMs, animationDisabled, className, children, onClose, ...props }: SlideOverProps): import("react/jsx-runtime").JSX.Element;
12
+ export declare namespace SlideOver {
13
+ var Header: typeof SlideOverHeader;
14
+ var Body: typeof SlideOverBody;
15
+ }
@@ -0,0 +1 @@
1
+ export type SlideOverCloseCallback = (source: 'close-button' | 'backdrop' | 'escape') => void;
@@ -1,4 +1,4 @@
1
- import { type ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  export type RenderTickMarkLabel = (index: number) => ReactNode;
3
3
  export type SliderTickMarksProps = {
4
4
  tickMarksCount: number;
@@ -1,5 +1,5 @@
1
- import { type ComponentPropsWithRef } from 'react';
2
- import { type SliderTickMarksProps } from './slider-tick-marks';
1
+ import { ComponentPropsWithRef } from 'react';
2
+ import { SliderTickMarksProps } from './slider-tick-marks';
3
3
  type SliderHTMLProps = ComponentPropsWithRef<'input'>;
4
4
  type SliderBaseProps = Omit<SliderHTMLProps, 'type' | 'min' | 'max' | 'step' | 'value' | 'defaultValue'>;
5
5
  export type SliderThumbStyle = 'round' | 'rect';
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
1
+ import { ComponentPropsWithoutRef } from 'react';
2
2
  export type SpinnerProps = ComponentPropsWithoutRef<'svg'> & {
3
3
  size?: number | string;
4
4
  };
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  type SwitchHTMLProps = ComponentPropsWithRef<'input'>;
3
3
  type SwitchBaseProps = Omit<SwitchHTMLProps, 'type'>;
4
4
  export type SwitchToggleHandler = (checked: boolean) => void;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  export type TableBodyProps = ComponentPropsWithRef<'tbody'>;
3
3
  export declare const TableBody: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
4
4
  ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  export type TableCellProps = ComponentPropsWithRef<'td'>;
3
3
  export declare const TableCell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
4
4
  ref?: ((instance: HTMLTableDataCellElement | null) => void) | import("react").RefObject<HTMLTableDataCellElement> | null | undefined;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  type TableContainerBaseProps = ComponentPropsWithRef<'div'>;
3
3
  export type TableContainerBorder = {
4
4
  top?: boolean;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  type TableHeadCellBaseProps = ComponentPropsWithRef<'th'>;
3
3
  export type TableHeadCellSort = 'none' | 'ascending' | 'descending';
4
4
  export type TableHeadCellProps = {
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  type TableHeadBaseProps = ComponentPropsWithRef<'thead'>;
3
3
  export type TableHeadProps = {
4
4
  isTinted?: boolean;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  type TableRowBaseProps = ComponentPropsWithRef<'tr'>;
3
3
  export type TableRowProps = {
4
4
  isSelected?: boolean;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  type TableBaseProps = ComponentPropsWithRef<'table'>;
3
3
  export type TableCellSize = 'sm' | 'md' | 'lg';
4
4
  export type TableProps = {
@@ -1,3 +1,3 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
1
+ import { ComponentPropsWithoutRef } from 'react';
2
2
  export type TabListProps = ComponentPropsWithoutRef<'div'>;
3
3
  export declare function TabList({ className, children, onFocus, onBlur, onKeyDown, ...props }: TabListProps): import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,5 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
2
- import { type TabName } from './types';
1
+ import { ComponentPropsWithoutRef } from 'react';
2
+ import { TabName } from './types';
3
3
  export type TabPanelProps = {
4
4
  tab: TabName;
5
5
  } & ComponentPropsWithoutRef<'div'>;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  export type TabProps = {
3
3
  icon?: ReactNode;
4
4
  counter?: number;
@@ -1,5 +1,5 @@
1
- import { type ReactNode } from 'react';
2
- import { type TabName, type TabSetter } from './types';
1
+ import { ReactNode } from 'react';
2
+ import { TabName, TabSetter } from './types';
3
3
  export type GetTabProps = (tab: TabName) => ({
4
4
  id: string;
5
5
  ariaControls: string;
@@ -1,5 +1,5 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
2
- import { type TabName, type TabSetter } from './types';
1
+ import { ComponentPropsWithoutRef } from 'react';
2
+ import { TabName, TabSetter } from './types';
3
3
  export interface TabsProps extends ComponentPropsWithoutRef<'div'> {
4
4
  selectedTab: TabName;
5
5
  onSelectTab: TabSetter;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
1
+ import { ComponentPropsWithoutRef } from 'react';
2
2
  type TagBaseProps = ComponentPropsWithoutRef<'strong'>;
3
3
  export type TagFill = 'gray' | 'green' | 'cyan' | 'blue' | 'purple' | 'pink' | 'red' | 'orange' | 'yellow';
4
4
  export type TagSize = 'sm' | 'md' | 'lg';
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef, type ReactNode } from 'react';
1
+ import { ComponentPropsWithRef, ReactNode } from 'react';
2
2
  type TextInputHTMLProps = ComponentPropsWithRef<'input'>;
3
3
  type TextInputBaseProps = Omit<TextInputHTMLProps, 'type' | 'width' | 'size'>;
4
4
  export type TextInputType = 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef, type ReactNode } from 'react';
1
+ import { ComponentPropsWithRef, ReactNode } from 'react';
2
2
  type TextareaHTMLProps = ComponentPropsWithRef<'textarea'>;
3
3
  export type TextareaSize = 'sm' | 'md' | 'lg';
4
4
  export type TextareaWidth = '30ch' | '40ch' | '60ch' | '80ch';
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithRef } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  export type ToastButtonProps = ComponentPropsWithRef<'button'>;
3
3
  export declare const ToastButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
4
4
  ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
@@ -1,4 +1,4 @@
1
- import { type ComponentPropsWithoutRef, type MouseEventHandler, type ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';
2
2
  type ToastBaseProps = ComponentPropsWithoutRef<'section'>;
3
3
  export type ToastProps = {
4
4
  icon?: ReactNode;
@@ -1,4 +1,4 @@
1
- import { type ReactNode } from 'react';
1
+ import { ReactNode } from 'react';
2
2
  type YPosition = 'top' | 'bottom';
3
3
  type XPosition = 'left' | 'center' | 'right';
4
4
  export type ToastPosition = `${YPosition}-${XPosition}`;
@@ -1,5 +1,5 @@
1
- import { type ComponentPropsWithoutRef, type ReactNode, type RefCallback } from 'react';
2
- import { type PositionerProps } from '../positioner';
1
+ import { ComponentPropsWithoutRef, ReactNode, RefCallback } from 'react';
2
+ import { PositionerProps } from '../positioner';
3
3
  type TooltipChildrenRenderFn = (props: {
4
4
  ref: RefCallback<HTMLElement>;
5
5
  }, context: {
@@ -1,4 +1,4 @@
1
- export * from './use-mount-transition';
2
1
  export * from './use-disable-body-scroll';
3
2
  export * from './use-esc-key-down';
4
3
  export * from './use-focus-trap';
4
+ export * from './use-mount-transition';
@@ -1,5 +1,5 @@
1
1
  type Options = {
2
2
  isEnabled: boolean;
3
3
  };
4
- export declare function useDisableBodyScroll(options: Options): void;
4
+ export declare function useDisableBodyScroll(options?: Options): void;
5
5
  export {};
@@ -13,5 +13,5 @@ type Options = {
13
13
  * @param options.isEnabled A flag that determines whether to run
14
14
  * the passed handler or not.
15
15
  */
16
- export declare function useEscKeyDown(handler: Handler, options: Options): void;
16
+ export declare function useEscKeyDown(handler: Handler, options?: Options): void;
17
17
  export {};