@capra/core 1.12.0 → 1.13.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.
- package/dist/index.cjs +468 -39
- package/dist/index.d.cts +127 -5
- package/dist/index.d.mts +127 -5
- package/dist/index.mjs +472 -44
- package/dist/style.css +354 -18
- package/docs/core-autocompletefield--usage.md +1 -1
- package/docs/core-selectfield--design.md +66 -0
- package/docs/core-selectfield--usage.md +145 -0
- package/docs/history-changelogs-capra-core--docs.md +10 -0
- package/docs/index.md +2 -0
- package/package.json +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React$2 from "react";
|
|
2
|
-
import React$1, { HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy } from "react";
|
|
2
|
+
import React$1, { HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy, ReactNode } from "react";
|
|
3
3
|
import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, Key, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, PressEvent, RouterProvider } from "react-aria-components";
|
|
4
4
|
import { SvgIcon } from "@capra/icons";
|
|
5
5
|
import { SvgLogo } from "@capra/icons/logos";
|
|
@@ -125,6 +125,11 @@ declare const TextInput: React$2.ForwardRefExoticComponent<{
|
|
|
125
125
|
trailingSlot?: React$2.ReactNode;
|
|
126
126
|
} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "className" | "size" | "style"> & React$2.RefAttributes<HTMLInputElement>>;
|
|
127
127
|
//#endregion
|
|
128
|
+
//#region src/components/input-helpers/ChildrenOrFunction.d.ts
|
|
129
|
+
type ChildrenOrFunction$1<T> = ReactNode | ((values: T & {
|
|
130
|
+
defaultChildren: ReactNode | undefined;
|
|
131
|
+
}) => ReactNode);
|
|
132
|
+
//#endregion
|
|
128
133
|
//#region src/components/input-helpers/fieldLayout.d.ts
|
|
129
134
|
type FieldLayoutProps = {
|
|
130
135
|
/** Helper text below the field. Replaced by error message when status is error. Use for requirements, disclaimers. */
|
|
@@ -139,9 +144,7 @@ type FieldLayoutProps = {
|
|
|
139
144
|
type AutocompleteItem = {
|
|
140
145
|
value: string;
|
|
141
146
|
};
|
|
142
|
-
type ChildrenOrFunction<T> =
|
|
143
|
-
defaultChildren: React$1.ReactNode | undefined;
|
|
144
|
-
}) => React$1.ReactNode);
|
|
147
|
+
type ChildrenOrFunction<T> = ChildrenOrFunction$1<T>;
|
|
145
148
|
type AutocompleteFieldProps = {
|
|
146
149
|
/** Whether to show a clear button for the input. */
|
|
147
150
|
canClear?: boolean;
|
|
@@ -735,6 +738,125 @@ declare const DatePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProp
|
|
|
735
738
|
isInvalid?: boolean;
|
|
736
739
|
} & React$2.RefAttributes<HTMLDivElement>>;
|
|
737
740
|
//#endregion
|
|
741
|
+
//#region src/components/SelectField/SelectField.d.ts
|
|
742
|
+
type SelectionMode = 'single' | 'multiple';
|
|
743
|
+
type DefaultItem = {
|
|
744
|
+
id: Key;
|
|
745
|
+
label: string;
|
|
746
|
+
/** Optional icon rendered before the label. */
|
|
747
|
+
icon?: SvgIcon;
|
|
748
|
+
};
|
|
749
|
+
/** A group of `DefaultItem`s, rendered as a labeled section. Enables defining sections via `items` instead of JSX children. */
|
|
750
|
+
type DefaultSection = {
|
|
751
|
+
/** Unique key for the section. */
|
|
752
|
+
id: Key;
|
|
753
|
+
/** Visible header label. Omit for an unlabeled group (then pass `aria-label`). */
|
|
754
|
+
label?: string;
|
|
755
|
+
/** Accessible name when there is no visible header. */
|
|
756
|
+
'aria-label'?: string;
|
|
757
|
+
/** Options within this section. */
|
|
758
|
+
children: Iterable<DefaultItem>;
|
|
759
|
+
};
|
|
760
|
+
type DefaultItemOrSection = DefaultItem | DefaultSection;
|
|
761
|
+
type ItemRenderer<T extends object> = (item: T) => React$2.ReactElement;
|
|
762
|
+
type ItemsChildren<T extends object> = React$2.ReactNode | ItemRenderer<T>;
|
|
763
|
+
type SelectFieldProps<T extends object = DefaultItemOrSection, M extends SelectionMode = 'single'> = FieldLayoutProps & StylingOverrideProps & {
|
|
764
|
+
/** Visual status of the trigger. `danger` marks the field invalid for accessibility and helper text treatment. @default 'default' */
|
|
765
|
+
appearance?: Appearance$2;
|
|
766
|
+
/** Trigger size variant. @default 'md' */
|
|
767
|
+
size?: Size$3;
|
|
768
|
+
/** Optional content rendered before the selected value, such as an icon. Pass a single node or group multiple nodes in a fragment or array. */
|
|
769
|
+
leadingSlot?: React$2.ReactNode;
|
|
770
|
+
/** Placeholder text shown in the trigger when there is no selection. Omit to render an empty trigger instead of a default placeholder. */
|
|
771
|
+
placeholder?: string;
|
|
772
|
+
/** Disables the field and prevents opening the listbox. */
|
|
773
|
+
disabled?: boolean;
|
|
774
|
+
/** Marks the field as required and shows the required indicator on the label. */
|
|
775
|
+
required?: boolean;
|
|
776
|
+
/** HTML `id` for the field root; associates the label, trigger, and helper text. */
|
|
777
|
+
id?: string;
|
|
778
|
+
/** Form field `name` used for native form submission. */
|
|
779
|
+
name?: string;
|
|
780
|
+
/** Whether to focus the trigger on mount. */
|
|
781
|
+
autoFocus?: boolean;
|
|
782
|
+
/** Selection behavior for the field. @default 'single' */
|
|
783
|
+
selectionMode?: M;
|
|
784
|
+
/** Controlled selected key, or selected keys when `selectionMode` is `multiple`. */
|
|
785
|
+
value?: M extends 'multiple' ? Iterable<Key> : Key | null;
|
|
786
|
+
/** Uncontrolled initial selected key, or keys when `selectionMode` is `multiple`. */
|
|
787
|
+
defaultValue?: M extends 'multiple' ? Iterable<Key> : Key | null;
|
|
788
|
+
/** Called when the selection changes. Receives a `Set` of keys in multiple selection mode. */
|
|
789
|
+
onChange?: (value: M extends 'multiple' ? Set<Key> : Key | null) => void;
|
|
790
|
+
/** Controlled open state for the options popover. */
|
|
791
|
+
isOpen?: boolean;
|
|
792
|
+
/** Uncontrolled initial open state for the options popover. */
|
|
793
|
+
defaultOpen?: boolean;
|
|
794
|
+
/** Called when the options popover opens or closes. */
|
|
795
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
796
|
+
/** When true, renders a search input in the popover to filter options. */
|
|
797
|
+
canSearch?: boolean;
|
|
798
|
+
/** Placeholder text for the in-popover search input when `canSearch` is true. */
|
|
799
|
+
searchPlaceholder?: string;
|
|
800
|
+
/** Whether the popover should be at least as wide as the trigger. @default true */
|
|
801
|
+
shouldAutoSizeDropdown?: boolean;
|
|
802
|
+
/** Accessible name when a visible `label` is not provided. */
|
|
803
|
+
'aria-label'?: string;
|
|
804
|
+
/** Id of an element that labels the field when a visible `label` is not used. */
|
|
805
|
+
'aria-labelledby'?: string;
|
|
806
|
+
/** Id of an element that describes the field, such as external helper or error text. */
|
|
807
|
+
'aria-describedby'?: string;
|
|
808
|
+
/** Data source for dynamic option rendering. Omit to render static `SelectField.Item` children instead. */
|
|
809
|
+
items?: Iterable<T>;
|
|
810
|
+
/** Key(s) of options that cannot be selected, focused, or otherwise interacted with. */
|
|
811
|
+
disabledKeys?: Iterable<Key>;
|
|
812
|
+
/** Static `SelectField.Item` children, or a render function for each item in `items`. Defaults to rendering each item's `id` and `label` when `items` is provided and `children` is omitted. */
|
|
813
|
+
children?: ItemsChildren<T>;
|
|
814
|
+
};
|
|
815
|
+
type SelectFieldItemProps = {
|
|
816
|
+
/** Unique key for the option. */
|
|
817
|
+
id: Key;
|
|
818
|
+
/** Text used for typeahead and accessibility name computation. */
|
|
819
|
+
textValue?: string;
|
|
820
|
+
/** Disables the option, preventing selection, focus, and interaction. */
|
|
821
|
+
isDisabled?: boolean;
|
|
822
|
+
/**
|
|
823
|
+
* Extra inset for the row. When omitted, items inside {@link SelectField.Section} with a {@link SelectField.Header} indent automatically.
|
|
824
|
+
*/
|
|
825
|
+
indent?: boolean;
|
|
826
|
+
/** The object value this item represents. Set automatically when using dynamic collections via `items`. */
|
|
827
|
+
value?: object;
|
|
828
|
+
/** Content rendered for the option label. */
|
|
829
|
+
children: React$2.ReactNode;
|
|
830
|
+
};
|
|
831
|
+
type SelectFieldHeaderProps = StylingOverrideProps & {
|
|
832
|
+
/**
|
|
833
|
+
* Optional id for `aria-labelledby` on {@link SelectField.Section}. When omitted inside a section, an id is assigned automatically.
|
|
834
|
+
*/
|
|
835
|
+
id?: string;
|
|
836
|
+
/** Header label. */
|
|
837
|
+
label?: React$2.ReactNode;
|
|
838
|
+
/** Children for compound usage. */
|
|
839
|
+
children?: React$2.ReactNode;
|
|
840
|
+
};
|
|
841
|
+
type SelectFieldSectionProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLElement>, 'role'> & {
|
|
842
|
+
/**
|
|
843
|
+
* Groups {@link SelectField.Item} rows. Use with an optional {@link SelectField.Header} to label the group.
|
|
844
|
+
* If there is no header, pass `aria-label` (or `aria-labelledby`) so the group has an accessible name.
|
|
845
|
+
*/
|
|
846
|
+
children?: React$2.ReactNode;
|
|
847
|
+
};
|
|
848
|
+
declare function SelectFieldItem(props: SelectFieldItemProps): React$2.JSX.Element;
|
|
849
|
+
declare function SelectFieldHeader(props: SelectFieldHeaderProps): React$2.JSX.Element;
|
|
850
|
+
declare function SelectFieldSection(props: SelectFieldSectionProps): React$2.JSX.Element;
|
|
851
|
+
/**
|
|
852
|
+
* Composed select field with Capra label/helper text layout, single and multiple selection, and an optional popover search input.
|
|
853
|
+
*/
|
|
854
|
+
declare const SelectField: (<T extends object = DefaultItemOrSection, M extends SelectionMode = "single">(props: SelectFieldProps<T, M> & React$2.RefAttributes<HTMLDivElement>) => React$2.ReactElement | null) & {
|
|
855
|
+
Item: typeof SelectFieldItem;
|
|
856
|
+
Header: typeof SelectFieldHeader;
|
|
857
|
+
Section: typeof SelectFieldSection;
|
|
858
|
+
};
|
|
859
|
+
//#endregion
|
|
738
860
|
//#region src/components/DateRangePickerField/DateRangePickerField.d.ts
|
|
739
861
|
/** Visible placeholders for empty start/end when the field is not focus-within. */
|
|
740
862
|
type DateRangePickerFieldPlaceholder = readonly [string, string];
|
|
@@ -2254,4 +2376,4 @@ declare const Label: React$2.ForwardRefExoticComponent<{
|
|
|
2254
2376
|
trailingSlot?: React$2.ReactNode;
|
|
2255
2377
|
} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "className" | "style"> & React$2.RefAttributes<HTMLLabelElement>>;
|
|
2256
2378
|
//#endregion
|
|
2257
|
-
export { Alert, type AlertProps, Anchor, type AnchorProps, AutocompleteField, type AutocompleteFieldProps, Badge, BadgeLayout, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, Checkbox, type CheckboxProps, Collapse, type CollapseProps, CustomTooltipTrigger, type CustomTooltipTriggerProps, DatePickerField, type DatePickerFieldProps, DateRangePickerField, type DateRangePickerFieldPlaceholder, type DateRangePickerFieldProps, Divider, type DividerProps, type DividerType, Drawer, type DrawerPlacement, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, InputRow, type InputRowAddonProps, type InputRowProps, Label, type LabelProps, Link, type LinkProps, ListItem, type ListItemProps, Menu, type MenuDividerProps, type MenuHeaderProps, type MenuItemProps, type MenuListProps, type MenuPanelPadding, type MenuProps, type MenuSectionProps, type MenuSubmenuProps, Modal, type ModalProps, NumberField, type NumberFieldProps, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, Pill, type PillProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RadioTile, type RadioTileProps, Ribbon, type RibbonProps, type RoutedLinkProps, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, Skeleton, type SkeletonElementProps, SkeletonGroup, type SkeletonGroupButtonProps, type SkeletonGroupInputProps, type SkeletonGroupNodeProps, type SkeletonParagraphProps, type SkeletonProps, type SkeletonSize, type SkeletonTitleProps, Spinner, type SpinnerProps, type StylingOverrideProps, Switch, type SwitchProps, TabNav, type TabNavItemType, type TabNavItemVariant, type TabNavPlacement, type TabNavProps, type TabNavSubItemType, Tag, type TagColor, type TagProps, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toast, type ToastOptions, type ToastPosition, type ToastType, Tooltip, type TooltipProps, TopNav, type TopNavCenterProps, type TopNavEndProps, type TopNavProps, type TopNavStartProps, Tree, type TreeItemType, type TreeProps, VerticalNavigation, type VerticalNavigationCollapseProps, type VerticalNavigationFooterProps, type VerticalNavigationItemListProps, type VerticalNavigationItemProps, type VerticalNavigationProps, VisuallyHidden, type VisuallyHiddenProps, submenuPanelClassName, tagColors };
|
|
2379
|
+
export { Alert, type AlertProps, Anchor, type AnchorProps, AutocompleteField, type AutocompleteFieldProps, Badge, BadgeLayout, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, Checkbox, type CheckboxProps, Collapse, type CollapseProps, CustomTooltipTrigger, type CustomTooltipTriggerProps, DatePickerField, type DatePickerFieldProps, DateRangePickerField, type DateRangePickerFieldPlaceholder, type DateRangePickerFieldProps, Divider, type DividerProps, type DividerType, Drawer, type DrawerPlacement, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, InputRow, type InputRowAddonProps, type InputRowProps, Label, type LabelProps, Link, type LinkProps, ListItem, type ListItemProps, Menu, type MenuDividerProps, type MenuHeaderProps, type MenuItemProps, type MenuListProps, type MenuPanelPadding, type MenuProps, type MenuSectionProps, type MenuSubmenuProps, Modal, type ModalProps, NumberField, type NumberFieldProps, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, Pill, type PillProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RadioTile, type RadioTileProps, Ribbon, type RibbonProps, type RoutedLinkProps, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, SelectField, type SelectFieldHeaderProps, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSectionProps, Skeleton, type SkeletonElementProps, SkeletonGroup, type SkeletonGroupButtonProps, type SkeletonGroupInputProps, type SkeletonGroupNodeProps, type SkeletonParagraphProps, type SkeletonProps, type SkeletonSize, type SkeletonTitleProps, Spinner, type SpinnerProps, type StylingOverrideProps, Switch, type SwitchProps, TabNav, type TabNavItemType, type TabNavItemVariant, type TabNavPlacement, type TabNavProps, type TabNavSubItemType, Tag, type TagColor, type TagProps, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toast, type ToastOptions, type ToastPosition, type ToastType, Tooltip, type TooltipProps, TopNav, type TopNavCenterProps, type TopNavEndProps, type TopNavProps, type TopNavStartProps, Tree, type TreeItemType, type TreeProps, VerticalNavigation, type VerticalNavigationCollapseProps, type VerticalNavigationFooterProps, type VerticalNavigationItemListProps, type VerticalNavigationItemProps, type VerticalNavigationProps, VisuallyHidden, type VisuallyHiddenProps, submenuPanelClassName, tagColors };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React$2 from "react";
|
|
2
|
-
import React$1, { HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy } from "react";
|
|
2
|
+
import React$1, { HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy, ReactNode } from "react";
|
|
3
3
|
import { SvgIcon } from "@capra/icons";
|
|
4
4
|
import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, Key, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, PressEvent, RouterProvider } from "react-aria-components";
|
|
5
5
|
import { SvgLogo } from "@capra/icons/logos";
|
|
@@ -125,6 +125,11 @@ declare const TextInput: React$2.ForwardRefExoticComponent<{
|
|
|
125
125
|
trailingSlot?: React$2.ReactNode;
|
|
126
126
|
} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "className" | "size" | "style"> & React$2.RefAttributes<HTMLInputElement>>;
|
|
127
127
|
//#endregion
|
|
128
|
+
//#region src/components/input-helpers/ChildrenOrFunction.d.ts
|
|
129
|
+
type ChildrenOrFunction$1<T> = ReactNode | ((values: T & {
|
|
130
|
+
defaultChildren: ReactNode | undefined;
|
|
131
|
+
}) => ReactNode);
|
|
132
|
+
//#endregion
|
|
128
133
|
//#region src/components/input-helpers/fieldLayout.d.ts
|
|
129
134
|
type FieldLayoutProps = {
|
|
130
135
|
/** Helper text below the field. Replaced by error message when status is error. Use for requirements, disclaimers. */
|
|
@@ -139,9 +144,7 @@ type FieldLayoutProps = {
|
|
|
139
144
|
type AutocompleteItem = {
|
|
140
145
|
value: string;
|
|
141
146
|
};
|
|
142
|
-
type ChildrenOrFunction<T> =
|
|
143
|
-
defaultChildren: React$1.ReactNode | undefined;
|
|
144
|
-
}) => React$1.ReactNode);
|
|
147
|
+
type ChildrenOrFunction<T> = ChildrenOrFunction$1<T>;
|
|
145
148
|
type AutocompleteFieldProps = {
|
|
146
149
|
/** Whether to show a clear button for the input. */
|
|
147
150
|
canClear?: boolean;
|
|
@@ -735,6 +738,125 @@ declare const DatePickerField: React$2.ForwardRefExoticComponent<FieldLayoutProp
|
|
|
735
738
|
isInvalid?: boolean;
|
|
736
739
|
} & React$2.RefAttributes<HTMLDivElement>>;
|
|
737
740
|
//#endregion
|
|
741
|
+
//#region src/components/SelectField/SelectField.d.ts
|
|
742
|
+
type SelectionMode = 'single' | 'multiple';
|
|
743
|
+
type DefaultItem = {
|
|
744
|
+
id: Key;
|
|
745
|
+
label: string;
|
|
746
|
+
/** Optional icon rendered before the label. */
|
|
747
|
+
icon?: SvgIcon;
|
|
748
|
+
};
|
|
749
|
+
/** A group of `DefaultItem`s, rendered as a labeled section. Enables defining sections via `items` instead of JSX children. */
|
|
750
|
+
type DefaultSection = {
|
|
751
|
+
/** Unique key for the section. */
|
|
752
|
+
id: Key;
|
|
753
|
+
/** Visible header label. Omit for an unlabeled group (then pass `aria-label`). */
|
|
754
|
+
label?: string;
|
|
755
|
+
/** Accessible name when there is no visible header. */
|
|
756
|
+
'aria-label'?: string;
|
|
757
|
+
/** Options within this section. */
|
|
758
|
+
children: Iterable<DefaultItem>;
|
|
759
|
+
};
|
|
760
|
+
type DefaultItemOrSection = DefaultItem | DefaultSection;
|
|
761
|
+
type ItemRenderer<T extends object> = (item: T) => React$2.ReactElement;
|
|
762
|
+
type ItemsChildren<T extends object> = React$2.ReactNode | ItemRenderer<T>;
|
|
763
|
+
type SelectFieldProps<T extends object = DefaultItemOrSection, M extends SelectionMode = 'single'> = FieldLayoutProps & StylingOverrideProps & {
|
|
764
|
+
/** Visual status of the trigger. `danger` marks the field invalid for accessibility and helper text treatment. @default 'default' */
|
|
765
|
+
appearance?: Appearance$2;
|
|
766
|
+
/** Trigger size variant. @default 'md' */
|
|
767
|
+
size?: Size$3;
|
|
768
|
+
/** Optional content rendered before the selected value, such as an icon. Pass a single node or group multiple nodes in a fragment or array. */
|
|
769
|
+
leadingSlot?: React$2.ReactNode;
|
|
770
|
+
/** Placeholder text shown in the trigger when there is no selection. Omit to render an empty trigger instead of a default placeholder. */
|
|
771
|
+
placeholder?: string;
|
|
772
|
+
/** Disables the field and prevents opening the listbox. */
|
|
773
|
+
disabled?: boolean;
|
|
774
|
+
/** Marks the field as required and shows the required indicator on the label. */
|
|
775
|
+
required?: boolean;
|
|
776
|
+
/** HTML `id` for the field root; associates the label, trigger, and helper text. */
|
|
777
|
+
id?: string;
|
|
778
|
+
/** Form field `name` used for native form submission. */
|
|
779
|
+
name?: string;
|
|
780
|
+
/** Whether to focus the trigger on mount. */
|
|
781
|
+
autoFocus?: boolean;
|
|
782
|
+
/** Selection behavior for the field. @default 'single' */
|
|
783
|
+
selectionMode?: M;
|
|
784
|
+
/** Controlled selected key, or selected keys when `selectionMode` is `multiple`. */
|
|
785
|
+
value?: M extends 'multiple' ? Iterable<Key> : Key | null;
|
|
786
|
+
/** Uncontrolled initial selected key, or keys when `selectionMode` is `multiple`. */
|
|
787
|
+
defaultValue?: M extends 'multiple' ? Iterable<Key> : Key | null;
|
|
788
|
+
/** Called when the selection changes. Receives a `Set` of keys in multiple selection mode. */
|
|
789
|
+
onChange?: (value: M extends 'multiple' ? Set<Key> : Key | null) => void;
|
|
790
|
+
/** Controlled open state for the options popover. */
|
|
791
|
+
isOpen?: boolean;
|
|
792
|
+
/** Uncontrolled initial open state for the options popover. */
|
|
793
|
+
defaultOpen?: boolean;
|
|
794
|
+
/** Called when the options popover opens or closes. */
|
|
795
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
796
|
+
/** When true, renders a search input in the popover to filter options. */
|
|
797
|
+
canSearch?: boolean;
|
|
798
|
+
/** Placeholder text for the in-popover search input when `canSearch` is true. */
|
|
799
|
+
searchPlaceholder?: string;
|
|
800
|
+
/** Whether the popover should be at least as wide as the trigger. @default true */
|
|
801
|
+
shouldAutoSizeDropdown?: boolean;
|
|
802
|
+
/** Accessible name when a visible `label` is not provided. */
|
|
803
|
+
'aria-label'?: string;
|
|
804
|
+
/** Id of an element that labels the field when a visible `label` is not used. */
|
|
805
|
+
'aria-labelledby'?: string;
|
|
806
|
+
/** Id of an element that describes the field, such as external helper or error text. */
|
|
807
|
+
'aria-describedby'?: string;
|
|
808
|
+
/** Data source for dynamic option rendering. Omit to render static `SelectField.Item` children instead. */
|
|
809
|
+
items?: Iterable<T>;
|
|
810
|
+
/** Key(s) of options that cannot be selected, focused, or otherwise interacted with. */
|
|
811
|
+
disabledKeys?: Iterable<Key>;
|
|
812
|
+
/** Static `SelectField.Item` children, or a render function for each item in `items`. Defaults to rendering each item's `id` and `label` when `items` is provided and `children` is omitted. */
|
|
813
|
+
children?: ItemsChildren<T>;
|
|
814
|
+
};
|
|
815
|
+
type SelectFieldItemProps = {
|
|
816
|
+
/** Unique key for the option. */
|
|
817
|
+
id: Key;
|
|
818
|
+
/** Text used for typeahead and accessibility name computation. */
|
|
819
|
+
textValue?: string;
|
|
820
|
+
/** Disables the option, preventing selection, focus, and interaction. */
|
|
821
|
+
isDisabled?: boolean;
|
|
822
|
+
/**
|
|
823
|
+
* Extra inset for the row. When omitted, items inside {@link SelectField.Section} with a {@link SelectField.Header} indent automatically.
|
|
824
|
+
*/
|
|
825
|
+
indent?: boolean;
|
|
826
|
+
/** The object value this item represents. Set automatically when using dynamic collections via `items`. */
|
|
827
|
+
value?: object;
|
|
828
|
+
/** Content rendered for the option label. */
|
|
829
|
+
children: React$2.ReactNode;
|
|
830
|
+
};
|
|
831
|
+
type SelectFieldHeaderProps = StylingOverrideProps & {
|
|
832
|
+
/**
|
|
833
|
+
* Optional id for `aria-labelledby` on {@link SelectField.Section}. When omitted inside a section, an id is assigned automatically.
|
|
834
|
+
*/
|
|
835
|
+
id?: string;
|
|
836
|
+
/** Header label. */
|
|
837
|
+
label?: React$2.ReactNode;
|
|
838
|
+
/** Children for compound usage. */
|
|
839
|
+
children?: React$2.ReactNode;
|
|
840
|
+
};
|
|
841
|
+
type SelectFieldSectionProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLElement>, 'role'> & {
|
|
842
|
+
/**
|
|
843
|
+
* Groups {@link SelectField.Item} rows. Use with an optional {@link SelectField.Header} to label the group.
|
|
844
|
+
* If there is no header, pass `aria-label` (or `aria-labelledby`) so the group has an accessible name.
|
|
845
|
+
*/
|
|
846
|
+
children?: React$2.ReactNode;
|
|
847
|
+
};
|
|
848
|
+
declare function SelectFieldItem(props: SelectFieldItemProps): React$2.JSX.Element;
|
|
849
|
+
declare function SelectFieldHeader(props: SelectFieldHeaderProps): React$2.JSX.Element;
|
|
850
|
+
declare function SelectFieldSection(props: SelectFieldSectionProps): React$2.JSX.Element;
|
|
851
|
+
/**
|
|
852
|
+
* Composed select field with Capra label/helper text layout, single and multiple selection, and an optional popover search input.
|
|
853
|
+
*/
|
|
854
|
+
declare const SelectField: (<T extends object = DefaultItemOrSection, M extends SelectionMode = "single">(props: SelectFieldProps<T, M> & React$2.RefAttributes<HTMLDivElement>) => React$2.ReactElement | null) & {
|
|
855
|
+
Item: typeof SelectFieldItem;
|
|
856
|
+
Header: typeof SelectFieldHeader;
|
|
857
|
+
Section: typeof SelectFieldSection;
|
|
858
|
+
};
|
|
859
|
+
//#endregion
|
|
738
860
|
//#region src/components/DateRangePickerField/DateRangePickerField.d.ts
|
|
739
861
|
/** Visible placeholders for empty start/end when the field is not focus-within. */
|
|
740
862
|
type DateRangePickerFieldPlaceholder = readonly [string, string];
|
|
@@ -2254,4 +2376,4 @@ declare const Label: React$2.ForwardRefExoticComponent<{
|
|
|
2254
2376
|
trailingSlot?: React$2.ReactNode;
|
|
2255
2377
|
} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "className" | "style"> & React$2.RefAttributes<HTMLLabelElement>>;
|
|
2256
2378
|
//#endregion
|
|
2257
|
-
export { Alert, type AlertProps, Anchor, type AnchorProps, AutocompleteField, type AutocompleteFieldProps, Badge, BadgeLayout, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, Checkbox, type CheckboxProps, Collapse, type CollapseProps, CustomTooltipTrigger, type CustomTooltipTriggerProps, DatePickerField, type DatePickerFieldProps, DateRangePickerField, type DateRangePickerFieldPlaceholder, type DateRangePickerFieldProps, Divider, type DividerProps, type DividerType, Drawer, type DrawerPlacement, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, InputRow, type InputRowAddonProps, type InputRowProps, Label, type LabelProps, Link, type LinkProps, ListItem, type ListItemProps, Menu, type MenuDividerProps, type MenuHeaderProps, type MenuItemProps, type MenuListProps, type MenuPanelPadding, type MenuProps, type MenuSectionProps, type MenuSubmenuProps, Modal, type ModalProps, NumberField, type NumberFieldProps, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, Pill, type PillProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RadioTile, type RadioTileProps, Ribbon, type RibbonProps, type RoutedLinkProps, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, Skeleton, type SkeletonElementProps, SkeletonGroup, type SkeletonGroupButtonProps, type SkeletonGroupInputProps, type SkeletonGroupNodeProps, type SkeletonParagraphProps, type SkeletonProps, type SkeletonSize, type SkeletonTitleProps, Spinner, type SpinnerProps, type StylingOverrideProps, Switch, type SwitchProps, TabNav, type TabNavItemType, type TabNavItemVariant, type TabNavPlacement, type TabNavProps, type TabNavSubItemType, Tag, type TagColor, type TagProps, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toast, type ToastOptions, type ToastPosition, type ToastType, Tooltip, type TooltipProps, TopNav, type TopNavCenterProps, type TopNavEndProps, type TopNavProps, type TopNavStartProps, Tree, type TreeItemType, type TreeProps, VerticalNavigation, type VerticalNavigationCollapseProps, type VerticalNavigationFooterProps, type VerticalNavigationItemListProps, type VerticalNavigationItemProps, type VerticalNavigationProps, VisuallyHidden, type VisuallyHiddenProps, submenuPanelClassName, tagColors };
|
|
2379
|
+
export { Alert, type AlertProps, Anchor, type AnchorProps, AutocompleteField, type AutocompleteFieldProps, Badge, BadgeLayout, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, Checkbox, type CheckboxProps, Collapse, type CollapseProps, CustomTooltipTrigger, type CustomTooltipTriggerProps, DatePickerField, type DatePickerFieldProps, DateRangePickerField, type DateRangePickerFieldPlaceholder, type DateRangePickerFieldProps, Divider, type DividerProps, type DividerType, Drawer, type DrawerPlacement, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, InputRow, type InputRowAddonProps, type InputRowProps, Label, type LabelProps, Link, type LinkProps, ListItem, type ListItemProps, Menu, type MenuDividerProps, type MenuHeaderProps, type MenuItemProps, type MenuListProps, type MenuPanelPadding, type MenuProps, type MenuSectionProps, type MenuSubmenuProps, Modal, type ModalProps, NumberField, type NumberFieldProps, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, Pill, type PillProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RadioTile, type RadioTileProps, Ribbon, type RibbonProps, type RoutedLinkProps, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, SelectField, type SelectFieldHeaderProps, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSectionProps, Skeleton, type SkeletonElementProps, SkeletonGroup, type SkeletonGroupButtonProps, type SkeletonGroupInputProps, type SkeletonGroupNodeProps, type SkeletonParagraphProps, type SkeletonProps, type SkeletonSize, type SkeletonTitleProps, Spinner, type SpinnerProps, type StylingOverrideProps, Switch, type SwitchProps, TabNav, type TabNavItemType, type TabNavItemVariant, type TabNavPlacement, type TabNavProps, type TabNavSubItemType, Tag, type TagColor, type TagProps, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toast, type ToastOptions, type ToastPosition, type ToastType, Tooltip, type TooltipProps, TopNav, type TopNavCenterProps, type TopNavEndProps, type TopNavProps, type TopNavStartProps, Tree, type TreeItemType, type TreeProps, VerticalNavigation, type VerticalNavigationCollapseProps, type VerticalNavigationFooterProps, type VerticalNavigationItemListProps, type VerticalNavigationItemProps, type VerticalNavigationProps, VisuallyHidden, type VisuallyHiddenProps, submenuPanelClassName, tagColors };
|