@lumx/react 4.3.1-alpha.0 → 4.3.2-alpha.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/_internal/Ui3KfDoH.js +1447 -0
- package/_internal/Ui3KfDoH.js.map +1 -0
- package/index.d.ts +436 -47
- package/index.js +1971 -601
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/utils/index.js +3 -1289
- package/utils/index.js.map +1 -1
- package/_internal/DpdvhbTO.js +0 -159
- package/_internal/DpdvhbTO.js.map +0 -1
package/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, Theme as Theme$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1, GlobalSize, TypographyInterface as TypographyInterface$1 } from '@lumx/core/js/constants';
|
|
1
|
+
import { Kind as Kind$1, HorizontalAlignment as HorizontalAlignment$1, Size as Size$1, ColorPalette as ColorPalette$1, Theme as Theme$1, GenericProps as GenericProps$1, Orientation as Orientation$1, Alignment as Alignment$1, AspectRatio, ColorWithVariants as ColorWithVariants$1, ColorVariant as ColorVariant$1, Typography as Typography$1, Emphasis as Emphasis$1, GlobalSize, TypographyInterface as TypographyInterface$1 } from '@lumx/core/js/constants';
|
|
2
2
|
export * from '@lumx/core/js/constants';
|
|
3
3
|
import * as _lumx_core_js_types from '@lumx/core/js/types';
|
|
4
|
-
import { GenericProps, HasTheme as HasTheme$1, ValueOf, HasAriaDisabled as HasAriaDisabled$1, HasCloseMode, Falsy, HasClassName as HasClassName$1, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
|
|
4
|
+
import { GenericProps, HasTheme as HasTheme$1, ValueOf, HasAriaDisabled as HasAriaDisabled$1, PartialBy, HasCloseMode, Falsy, HasClassName as HasClassName$1, HeadingElement as HeadingElement$1, HasRequiredLinkHref, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
|
|
5
5
|
export * from '@lumx/core/js/types';
|
|
6
6
|
import * as React$1 from 'react';
|
|
7
|
-
import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, RefObject, CSSProperties, ImgHTMLAttributes, SetStateAction, Key, ElementType, ComponentProps } from 'react';
|
|
7
|
+
import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, ReactText, RefObject, CSSProperties, ImgHTMLAttributes, SetStateAction, Key, ElementType, InputHTMLAttributes, ComponentProps } from 'react';
|
|
8
8
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
9
|
import { Selector } from '@lumx/core/js/types/Selector';
|
|
10
10
|
|
|
@@ -849,6 +849,423 @@ interface SelectionChipGroupProps<O> extends GenericProps {
|
|
|
849
849
|
*/
|
|
850
850
|
declare const SelectionChipGroup: <O>({ onChange, value, getOptionId, getOptionName, inputRef, inputLabel, renderChip, theme, isDisabled, chipTooltipLabel, label, ...forwardedProps }: SelectionChipGroupProps<O>) => react_jsx_runtime.JSX.Element;
|
|
851
851
|
|
|
852
|
+
/**
|
|
853
|
+
* The source of the combobox option selection
|
|
854
|
+
* It could either be on click / touch or keyboard selection
|
|
855
|
+
*/
|
|
856
|
+
type ComboboxOptionSelectEventSource = 'keyboard' | 'click';
|
|
857
|
+
type ComboboxSelectionType = 'single' | 'multiple';
|
|
858
|
+
type BaseLoadingStatus = 'loading' | 'loadingMore' | 'idle' | 'error' | 'debouncing' | 'filtering' | 'empty';
|
|
859
|
+
/**
|
|
860
|
+
* Options related types
|
|
861
|
+
*/
|
|
862
|
+
/** All possible values a combobox option can have */
|
|
863
|
+
type BaseComboboxOptionProps<O = any> = {
|
|
864
|
+
/**
|
|
865
|
+
* A unique id to track the option
|
|
866
|
+
*/
|
|
867
|
+
id: string;
|
|
868
|
+
/**
|
|
869
|
+
* Whether the current input value should filter this option.
|
|
870
|
+
*/
|
|
871
|
+
filterFromInput?: boolean;
|
|
872
|
+
/**
|
|
873
|
+
* Callback to call when the option is selected.
|
|
874
|
+
* This should only be used to add custom actions on options.
|
|
875
|
+
* For most cases, the "onSelect" on the Combobox root component should be enough.
|
|
876
|
+
*/
|
|
877
|
+
onSelect?: (option: O, eventSource?: ComboboxOptionSelectEventSource) => void;
|
|
878
|
+
/**
|
|
879
|
+
* Additional data to link to the option. This can be useful to retrieve with `onSelect`.
|
|
880
|
+
*/
|
|
881
|
+
data?: O;
|
|
882
|
+
/**
|
|
883
|
+
* Whether the option is disabled
|
|
884
|
+
*/
|
|
885
|
+
isDisabled?: boolean;
|
|
886
|
+
/**
|
|
887
|
+
* The components to use to visually customize options.
|
|
888
|
+
* ! Options must not have interactive elements.
|
|
889
|
+
* ! If you need additional actions, you might need to create custom options and search how to
|
|
890
|
+
* ! make them accessible.
|
|
891
|
+
*/
|
|
892
|
+
children?: ReactNode;
|
|
893
|
+
/**
|
|
894
|
+
* The text value the option has.
|
|
895
|
+
* This is the value used to filter the options by when manual filtering is disabled
|
|
896
|
+
* and that will be used as input value when an option is selected
|
|
897
|
+
*/
|
|
898
|
+
textValue?: string;
|
|
899
|
+
/**
|
|
900
|
+
* Element to display before the content of the option.
|
|
901
|
+
* ! Options must not have interactive elements.
|
|
902
|
+
* ! If you need additional actions, you might need to create custom options and search how to
|
|
903
|
+
* ! make them accessible.
|
|
904
|
+
*/
|
|
905
|
+
before?: ReactNode;
|
|
906
|
+
/**
|
|
907
|
+
* Element to display after the content of the option.
|
|
908
|
+
* ! Options must not have interactive elements.
|
|
909
|
+
* ! If you need additional actions, you might need to create custom options and search how to
|
|
910
|
+
* ! make them accessible.
|
|
911
|
+
*/
|
|
912
|
+
after?: ReactNode;
|
|
913
|
+
/**
|
|
914
|
+
* Size of the list item.
|
|
915
|
+
* Default to tiny
|
|
916
|
+
*/
|
|
917
|
+
size?: ListItemSize;
|
|
918
|
+
/**
|
|
919
|
+
* Fill to activate a tooltip on mouse over
|
|
920
|
+
*/
|
|
921
|
+
tooltipProps?: Partial<TooltipProps>;
|
|
922
|
+
};
|
|
923
|
+
/**
|
|
924
|
+
* Props for when an option has no children.
|
|
925
|
+
* In these case, we need at least the text value to know what to display
|
|
926
|
+
* */
|
|
927
|
+
type TextValueOnly<O = any> = BaseComboboxOptionProps<O> & {
|
|
928
|
+
children?: never;
|
|
929
|
+
textValue: string;
|
|
930
|
+
};
|
|
931
|
+
/**
|
|
932
|
+
* Props for when an option has a react element as string
|
|
933
|
+
* In that case, we can use the children as the textValue without having
|
|
934
|
+
* to set a manual props.
|
|
935
|
+
* The props is still available to have a text value different than the displayed value.
|
|
936
|
+
*/
|
|
937
|
+
type StringOption<O = any> = BaseComboboxOptionProps<O> & {
|
|
938
|
+
children: ReactText;
|
|
939
|
+
textValue?: string;
|
|
940
|
+
};
|
|
941
|
+
/**
|
|
942
|
+
* Props for when an option has a react element as children
|
|
943
|
+
* In that case, we cannot know what the actual value of the
|
|
944
|
+
* option is, so the `textValue` prop has to be set.
|
|
945
|
+
*/
|
|
946
|
+
type NodeOption<O = any> = BaseComboboxOptionProps<O> & {
|
|
947
|
+
children: Exclude<ReactNode, ReactText>;
|
|
948
|
+
textValue: string;
|
|
949
|
+
};
|
|
950
|
+
/** Props for the ComboboxOption component */
|
|
951
|
+
type ComboboxOptionProps<O = any> = TextValueOnly<O> | StringOption<O> | NodeOption<O>;
|
|
952
|
+
/** Shared data between all combobox option types. */
|
|
953
|
+
interface BaseRegisteredComboboxOption {
|
|
954
|
+
id: string;
|
|
955
|
+
/** The id that was generated for this option */
|
|
956
|
+
generatedId: string;
|
|
957
|
+
/** Whether the "option" is an action */
|
|
958
|
+
isAction?: boolean;
|
|
959
|
+
/** Whether the "option" is disabled */
|
|
960
|
+
isDisabled?: boolean;
|
|
961
|
+
}
|
|
962
|
+
/** Combobox value */
|
|
963
|
+
interface RegisteredComboboxOptionValue<O = any> extends BaseRegisteredComboboxOption, Pick<ComboboxOptionProps<O>, 'data' | 'filterFromInput' | 'textValue' | 'onSelect'> {
|
|
964
|
+
/** The section the option is a child of. */
|
|
965
|
+
sectionId?: string;
|
|
966
|
+
/** Whether the "option" is an action */
|
|
967
|
+
isAction?: never;
|
|
968
|
+
}
|
|
969
|
+
type OnComboboxSelect<O = any> = (option: RegisteredComboboxOptionValue<O>) => void;
|
|
970
|
+
type OnComboboxInputChange = TextFieldProps['onChange'];
|
|
971
|
+
type ComboboxTranslations = {
|
|
972
|
+
clearLabel: string;
|
|
973
|
+
showSuggestionsLabel: string;
|
|
974
|
+
loadingLabel: string;
|
|
975
|
+
noResultsForInputLabel: (input?: string) => string;
|
|
976
|
+
serviceUnavailableLabel: string;
|
|
977
|
+
tryReloadLabel: string;
|
|
978
|
+
nbOptionsLabel: (options: number) => string;
|
|
979
|
+
};
|
|
980
|
+
/** Props for the main combobox component. */
|
|
981
|
+
type ComboboxProps<O = any> = {
|
|
982
|
+
/**
|
|
983
|
+
* HTML id
|
|
984
|
+
*/
|
|
985
|
+
id?: string;
|
|
986
|
+
/**
|
|
987
|
+
* The current option id to set as selected.
|
|
988
|
+
* If omitted, the local state will be used instead;
|
|
989
|
+
*/
|
|
990
|
+
selectedIds?: Array<string | number>;
|
|
991
|
+
/**
|
|
992
|
+
* The current value for the combobox input.
|
|
993
|
+
* If omitted, the input is controlled locally */
|
|
994
|
+
inputValue?: string;
|
|
995
|
+
/**
|
|
996
|
+
* The default value to set on the input.
|
|
997
|
+
* Use this if you want to initialize the input with a value and not control it
|
|
998
|
+
*/
|
|
999
|
+
defaultInputValue?: string;
|
|
1000
|
+
/**
|
|
1001
|
+
* Whether the options should be automatically filtered or not.
|
|
1002
|
+
* By default, the combobox will try to filter the options from the current input value
|
|
1003
|
+
* using a "contains" strategy.
|
|
1004
|
+
* If this is `false`, the option will not be automatically filtered and must be manually filtered by the parent.
|
|
1005
|
+
* Useful for asynchronous comboboxes.
|
|
1006
|
+
*/
|
|
1007
|
+
autoFilter: boolean;
|
|
1008
|
+
/**
|
|
1009
|
+
* Whether the combobox should open on focus
|
|
1010
|
+
*/
|
|
1011
|
+
openOnFocus?: boolean;
|
|
1012
|
+
/**
|
|
1013
|
+
* Whether the combobox should open on click
|
|
1014
|
+
*/
|
|
1015
|
+
openOnClick?: boolean;
|
|
1016
|
+
/**
|
|
1017
|
+
* Status of the combobox
|
|
1018
|
+
*/
|
|
1019
|
+
status?: BaseLoadingStatus;
|
|
1020
|
+
/**
|
|
1021
|
+
* Callback when the input changes.
|
|
1022
|
+
*/
|
|
1023
|
+
onInputChange?: OnComboboxInputChange;
|
|
1024
|
+
/**
|
|
1025
|
+
* Callback for when an option is selected
|
|
1026
|
+
*/
|
|
1027
|
+
onSelect?: OnComboboxSelect<O>;
|
|
1028
|
+
/**
|
|
1029
|
+
* Callback called when the combobox opens
|
|
1030
|
+
*/
|
|
1031
|
+
onOpen?: (options: {
|
|
1032
|
+
currentValue?: string;
|
|
1033
|
+
manual: boolean;
|
|
1034
|
+
}) => void;
|
|
1035
|
+
/**
|
|
1036
|
+
* The combobox components to render.
|
|
1037
|
+
* Must be one of the exposed components (Combobox.Input, Combobox.ListBox etc...)
|
|
1038
|
+
*/
|
|
1039
|
+
children: ReactNode;
|
|
1040
|
+
/**
|
|
1041
|
+
* The combobox can have a specific selection type:
|
|
1042
|
+
* - Single: only one item is selected
|
|
1043
|
+
* - Multiple: several items can be selected (this impacts the combobox list, which will now not close when selectiong an option)
|
|
1044
|
+
*/
|
|
1045
|
+
selectionType?: ComboboxSelectionType;
|
|
1046
|
+
/**
|
|
1047
|
+
* Whether the error state should be displayed when the status is in error.
|
|
1048
|
+
* @default `true` if `status` is defined
|
|
1049
|
+
*/
|
|
1050
|
+
showErrorState?: boolean;
|
|
1051
|
+
/**
|
|
1052
|
+
* Whether the empty state should be displayed when there is no results.
|
|
1053
|
+
* @default `true` if `autoFilter=false`
|
|
1054
|
+
*/
|
|
1055
|
+
showEmptyState?: boolean;
|
|
1056
|
+
/** custom className */
|
|
1057
|
+
className?: string;
|
|
1058
|
+
/** translations to be used across the combobox */
|
|
1059
|
+
translations: ComboboxTranslations;
|
|
1060
|
+
};
|
|
1061
|
+
|
|
1062
|
+
interface ComboboxButtonProps extends GenericProps {
|
|
1063
|
+
/**
|
|
1064
|
+
* Label of the combobox button trigger.
|
|
1065
|
+
*/
|
|
1066
|
+
label: string;
|
|
1067
|
+
/**
|
|
1068
|
+
* Controls how the `label` is displayed:
|
|
1069
|
+
* - `show-selection` (default): Displays the current selection as the label, or falls back to the provided `label`
|
|
1070
|
+
* if there is no selection. The `label` will still appear as a tooltip in this mode.
|
|
1071
|
+
* - `show-label`: Always displays the provided `label` as the visual label.
|
|
1072
|
+
* - `show-tooltip`: Always displays the provided `label` as the visual a tooltip.
|
|
1073
|
+
* (useful for IconButton combobox)
|
|
1074
|
+
* In all cases, the given `label` is the ARIA label in use
|
|
1075
|
+
*/
|
|
1076
|
+
labelDisplayMode?: 'show-selection' | 'show-label' | 'show-tooltip';
|
|
1077
|
+
/**
|
|
1078
|
+
* Focus event handler
|
|
1079
|
+
*/
|
|
1080
|
+
onFocus?: React__default.FocusEventHandler;
|
|
1081
|
+
/**
|
|
1082
|
+
* Blur event handler
|
|
1083
|
+
*/
|
|
1084
|
+
onBlur?: React__default.FocusEventHandler;
|
|
1085
|
+
/** Customize the root element. */
|
|
1086
|
+
as?: React__default.ElementType;
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
interface ComboboxOptionSkeletonProps {
|
|
1090
|
+
className?: string;
|
|
1091
|
+
index?: number;
|
|
1092
|
+
children?: ReactNode | ((options: {
|
|
1093
|
+
index?: number;
|
|
1094
|
+
}) => ReactNode);
|
|
1095
|
+
before?: ComboboxOptionProps['before'];
|
|
1096
|
+
after?: ComboboxOptionProps['after'];
|
|
1097
|
+
size?: ComboboxOptionProps['size'];
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
interface ComboboxListSkeletonProps {
|
|
1101
|
+
isLoadingMore?: boolean;
|
|
1102
|
+
children?: ComboboxOptionSkeletonProps['children'];
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
interface ComboboxListBoxProps extends GenericProps$1, React__default.ComponentProps<'ul'> {
|
|
1106
|
+
/** Options display in the combobox */
|
|
1107
|
+
children?: ReactNode;
|
|
1108
|
+
/**
|
|
1109
|
+
* Component to use as skeleton for each option instead of the default one.
|
|
1110
|
+
* Can either be a react node or a component that receives the index as prop
|
|
1111
|
+
*/
|
|
1112
|
+
renderItemSkeleton?: ComboboxListSkeletonProps['children'];
|
|
1113
|
+
/** Label for the list */
|
|
1114
|
+
label?: string;
|
|
1115
|
+
/** Props of the popover element. */
|
|
1116
|
+
popoverProps?: Partial<PopoverProps>;
|
|
1117
|
+
/**
|
|
1118
|
+
* An element to display at the bottom of the listbox.
|
|
1119
|
+
* No interactive element must be set here as they will not be accessible.
|
|
1120
|
+
*/
|
|
1121
|
+
footer?: ReactNode;
|
|
1122
|
+
/** List ref */
|
|
1123
|
+
listRef?: React__default.Ref<HTMLElement>;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
1126
|
+
/**
|
|
1127
|
+
* All TextField props that are extended.
|
|
1128
|
+
* We can't use "Omit" here as it is not compatible with the "GenericProps" type from the DS,
|
|
1129
|
+
* meaning we would loose all props.
|
|
1130
|
+
*
|
|
1131
|
+
*/
|
|
1132
|
+
type ExtendedTextFieldProps = PartialBy<Pick<TextFieldProps, 'ariaLabel' | 'chips' | 'error' | 'forceFocusStyle' | 'hasError' | 'afterElement' | 'helper' | 'icon' | 'inputRef' | 'textFieldRef' | 'isDisabled' | 'className' | 'isRequired' | 'isValid' | 'label' | 'maxLength' | 'minimumRows' | 'multiline' | 'id' | 'name' | 'placeholder' | 'onBlur' | 'onClear' | 'onKeyDown' | 'onFocus' | 'theme'>, 'ariaLabel' | 'onKeyDown'>;
|
|
1133
|
+
type ComboboxInputProps = ExtendedTextFieldProps & {
|
|
1134
|
+
/** Whether the toggle button should be hidden */
|
|
1135
|
+
hideToggle?: boolean;
|
|
1136
|
+
/** Activate the clear button */
|
|
1137
|
+
hasClearButton?: boolean;
|
|
1138
|
+
/** Clear button forwarded props */
|
|
1139
|
+
clearButtonProps?: Omit<TextFieldProps['clearButtonProps'], 'label'>;
|
|
1140
|
+
/** Make input read only */
|
|
1141
|
+
readOnly?: boolean;
|
|
1142
|
+
};
|
|
1143
|
+
|
|
1144
|
+
interface ComboboxSectionProps {
|
|
1145
|
+
/** Forwarded class name */
|
|
1146
|
+
className?: string;
|
|
1147
|
+
/** The title of the section */
|
|
1148
|
+
title?: string;
|
|
1149
|
+
/** Whether the section should be displayed as loading */
|
|
1150
|
+
isLoading?: boolean;
|
|
1151
|
+
/** Custom skeletons to use for loading state */
|
|
1152
|
+
renderItemSkeleton?: ComboboxListSkeletonProps['children'];
|
|
1153
|
+
/** Options to display */
|
|
1154
|
+
children: ReactNode;
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1157
|
+
/**
|
|
1158
|
+
* Props for ComboboxOption with additional generic properties.
|
|
1159
|
+
*/
|
|
1160
|
+
interface ComboboxOptionComponentProps<O extends object = any> extends GenericProps, Omit<ComboboxOptionProps<O>, 'as'> {
|
|
1161
|
+
/** Customize the root element. */
|
|
1162
|
+
as?: React__default.ElementType;
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
declare const SUB_COMPONENTS: {
|
|
1166
|
+
/**
|
|
1167
|
+
* Option to set within a combobox list.
|
|
1168
|
+
*
|
|
1169
|
+
* @family Combobox
|
|
1170
|
+
* @param ComboboxOptionProps
|
|
1171
|
+
* @returns ComboboxOption
|
|
1172
|
+
*/
|
|
1173
|
+
readonly Option: Comp<ComboboxOptionComponentProps<any>, HTMLElement>;
|
|
1174
|
+
/**
|
|
1175
|
+
* Skeleton for a combobox option.
|
|
1176
|
+
* A typography skeleton is rendered by default but can be overridden by passing children.
|
|
1177
|
+
*/
|
|
1178
|
+
readonly OptionSkeleton: ({ className, index, before, after, size, children, }: ComboboxOptionSkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1179
|
+
/**
|
|
1180
|
+
* Section for options of a Combobox.
|
|
1181
|
+
*
|
|
1182
|
+
* @family Combobox
|
|
1183
|
+
* @param ComboboxSectionProps
|
|
1184
|
+
* @returns ComboboxSection
|
|
1185
|
+
*/
|
|
1186
|
+
readonly Section: ({ children, ...props }: ComboboxSectionProps) => react_jsx_runtime.JSX.Element;
|
|
1187
|
+
/**
|
|
1188
|
+
* Combobox input trigger.
|
|
1189
|
+
*
|
|
1190
|
+
* @family Combobox
|
|
1191
|
+
*/
|
|
1192
|
+
readonly Input: ({ hideToggle, inputRef, textFieldRef, afterElement, onFocus, onBlur, onKeyDown, clearButtonProps, hasClearButton, theme, ...textFieldProps }: ComboboxInputProps) => react_jsx_runtime.JSX.Element;
|
|
1193
|
+
/**
|
|
1194
|
+
* The listbox containing the combobox's options.
|
|
1195
|
+
*
|
|
1196
|
+
* @family Combobox
|
|
1197
|
+
* @param ComboboxListBoxProps
|
|
1198
|
+
* @returns ComboboxListBox
|
|
1199
|
+
*/
|
|
1200
|
+
readonly List: ({ children, renderItemSkeleton, label, popoverProps, footer, listRef, ...forwardedProps }: ComboboxListBoxProps) => react_jsx_runtime.JSX.Element;
|
|
1201
|
+
/**
|
|
1202
|
+
* Combobox button trigger.
|
|
1203
|
+
*
|
|
1204
|
+
* @family Combobox
|
|
1205
|
+
*/
|
|
1206
|
+
readonly Button: Comp<ComboboxButtonProps, HTMLElement>;
|
|
1207
|
+
};
|
|
1208
|
+
/**
|
|
1209
|
+
*
|
|
1210
|
+
* A Combobox is a combination of two components:
|
|
1211
|
+
* * An input to enter the user's value
|
|
1212
|
+
* * A popover with a list of suggestions to fill the value.
|
|
1213
|
+
*
|
|
1214
|
+
* These two components are included via the Combobox.Input and Combobox.ListBox components.
|
|
1215
|
+
*
|
|
1216
|
+
* In its simplest implementation the component will automatically filter the given options
|
|
1217
|
+
* from the value of the input and fill the input with the textValue of the selected option.
|
|
1218
|
+
*
|
|
1219
|
+
* Props are available for more complex implementations.
|
|
1220
|
+
*
|
|
1221
|
+
* @family Combobox
|
|
1222
|
+
* @param ComboboxProps
|
|
1223
|
+
* @returns Combobox
|
|
1224
|
+
*/
|
|
1225
|
+
declare const Combobox: (<O>({ id: htmlId, inputValue, defaultInputValue, autoFilter, openOnClick, openOnFocus, status, showEmptyState, showErrorState, selectedIds, onInputChange, onSelect, onOpen, children, selectionType, translations, }: ComboboxProps<O>) => react_jsx_runtime.JSX.Element) & {
|
|
1226
|
+
/**
|
|
1227
|
+
* Option to set within a combobox list.
|
|
1228
|
+
*
|
|
1229
|
+
* @family Combobox
|
|
1230
|
+
* @param ComboboxOptionProps
|
|
1231
|
+
* @returns ComboboxOption
|
|
1232
|
+
*/
|
|
1233
|
+
readonly Option: Comp<ComboboxOptionComponentProps<any>, HTMLElement>;
|
|
1234
|
+
/**
|
|
1235
|
+
* Skeleton for a combobox option.
|
|
1236
|
+
* A typography skeleton is rendered by default but can be overridden by passing children.
|
|
1237
|
+
*/
|
|
1238
|
+
readonly OptionSkeleton: ({ className, index, before, after, size, children, }: ComboboxOptionSkeletonProps) => react_jsx_runtime.JSX.Element;
|
|
1239
|
+
/**
|
|
1240
|
+
* Section for options of a Combobox.
|
|
1241
|
+
*
|
|
1242
|
+
* @family Combobox
|
|
1243
|
+
* @param ComboboxSectionProps
|
|
1244
|
+
* @returns ComboboxSection
|
|
1245
|
+
*/
|
|
1246
|
+
readonly Section: ({ children, ...props }: ComboboxSectionProps) => react_jsx_runtime.JSX.Element;
|
|
1247
|
+
/**
|
|
1248
|
+
* Combobox input trigger.
|
|
1249
|
+
*
|
|
1250
|
+
* @family Combobox
|
|
1251
|
+
*/
|
|
1252
|
+
readonly Input: ({ hideToggle, inputRef, textFieldRef, afterElement, onFocus, onBlur, onKeyDown, clearButtonProps, hasClearButton, theme, ...textFieldProps }: ComboboxInputProps) => react_jsx_runtime.JSX.Element;
|
|
1253
|
+
/**
|
|
1254
|
+
* The listbox containing the combobox's options.
|
|
1255
|
+
*
|
|
1256
|
+
* @family Combobox
|
|
1257
|
+
* @param ComboboxListBoxProps
|
|
1258
|
+
* @returns ComboboxListBox
|
|
1259
|
+
*/
|
|
1260
|
+
readonly List: ({ children, renderItemSkeleton, label, popoverProps, footer, listRef, ...forwardedProps }: ComboboxListBoxProps) => react_jsx_runtime.JSX.Element;
|
|
1261
|
+
/**
|
|
1262
|
+
* Combobox button trigger.
|
|
1263
|
+
*
|
|
1264
|
+
* @family Combobox
|
|
1265
|
+
*/
|
|
1266
|
+
readonly Button: Comp<ComboboxButtonProps, HTMLElement>;
|
|
1267
|
+
};
|
|
1268
|
+
|
|
852
1269
|
/**
|
|
853
1270
|
* Comment block variants.
|
|
854
1271
|
*/
|
|
@@ -2528,38 +2945,27 @@ declare const ProgressTrackerStepPanel: Comp<ProgressTrackerStepPanelProps, HTML
|
|
|
2528
2945
|
/**
|
|
2529
2946
|
* Defines the props of the component.
|
|
2530
2947
|
*/
|
|
2531
|
-
interface RadioButtonProps
|
|
2948
|
+
interface RadioButtonProps extends GenericProps, HasTheme$1, HasAriaDisabled$1 {
|
|
2532
2949
|
/** Helper text. */
|
|
2533
2950
|
helper?: string;
|
|
2534
2951
|
/** Native input id property. */
|
|
2535
2952
|
id?: string;
|
|
2953
|
+
/** Native input ref. */
|
|
2954
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
2536
2955
|
/** Whether it is checked or not. */
|
|
2537
2956
|
isChecked?: boolean;
|
|
2538
|
-
checked?: boolean;
|
|
2539
2957
|
/** Whether the component is disabled or not. */
|
|
2540
2958
|
isDisabled?: boolean;
|
|
2541
2959
|
/** Label content. */
|
|
2542
|
-
label?:
|
|
2960
|
+
label?: ReactNode;
|
|
2543
2961
|
/** Native input name property. */
|
|
2544
2962
|
name?: string;
|
|
2545
2963
|
/** Native input value property. */
|
|
2546
2964
|
value?: string;
|
|
2547
|
-
/** optional props for input */
|
|
2548
|
-
inputProps?: Record<string, any>;
|
|
2549
|
-
/** Native input ref. */
|
|
2550
|
-
inputRef?: CommonRef;
|
|
2551
|
-
/** Native input id. */
|
|
2552
|
-
inputId: string;
|
|
2553
2965
|
/** On change callback. */
|
|
2554
|
-
onChange?(value?: string, name?: string, event?:
|
|
2555
|
-
/**
|
|
2556
|
-
|
|
2557
|
-
}
|
|
2558
|
-
|
|
2559
|
-
/**
|
|
2560
|
-
* Defines the props of the component.
|
|
2561
|
-
*/
|
|
2562
|
-
interface RadioButtonProps extends GenericProps, Omit<RadioButtonProps$1, 'inputId'> {
|
|
2966
|
+
onChange?(value?: string, name?: string, event?: SyntheticEvent): void;
|
|
2967
|
+
/** optional props for input */
|
|
2968
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
2563
2969
|
}
|
|
2564
2970
|
/**
|
|
2565
2971
|
* RadioButton component.
|
|
@@ -3050,42 +3456,25 @@ declare const Slides: Comp<SlidesProps, HTMLDivElement>;
|
|
|
3050
3456
|
/**
|
|
3051
3457
|
* Defines the props of the component.
|
|
3052
3458
|
*/
|
|
3053
|
-
interface SwitchProps
|
|
3459
|
+
interface SwitchProps extends GenericProps, HasTheme$1, HasAriaDisabled$1 {
|
|
3054
3460
|
/** Helper text. */
|
|
3055
3461
|
helper?: string;
|
|
3056
|
-
/** Native input id property. */
|
|
3057
|
-
id?: string;
|
|
3058
3462
|
/** Whether it is checked or not. */
|
|
3059
3463
|
isChecked?: boolean;
|
|
3060
|
-
checked?: boolean;
|
|
3061
3464
|
/** Whether the component is disabled or not. */
|
|
3062
3465
|
isDisabled?: boolean;
|
|
3063
|
-
/** Label text. */
|
|
3064
|
-
label?: JSXElement;
|
|
3065
3466
|
/** Native input name property. */
|
|
3066
3467
|
name?: string;
|
|
3468
|
+
/** Position of the switch relative to the label. */
|
|
3469
|
+
position?: Extract<Alignment$1, 'right' | 'left'>;
|
|
3067
3470
|
/** Native input value property. */
|
|
3068
3471
|
value?: string;
|
|
3069
|
-
/** optional props for input */
|
|
3070
|
-
inputProps?: Record<string, any>;
|
|
3071
|
-
/** Native input ref. */
|
|
3072
|
-
inputRef?: CommonRef;
|
|
3073
|
-
/** Native input id. */
|
|
3074
|
-
inputId: string;
|
|
3075
3472
|
/** On change callback. */
|
|
3076
|
-
onChange?(isChecked: boolean, value?: string, name?: string, event?:
|
|
3077
|
-
/**
|
|
3078
|
-
|
|
3079
|
-
/**
|
|
3080
|
-
|
|
3081
|
-
}
|
|
3082
|
-
|
|
3083
|
-
/**
|
|
3084
|
-
* Defines the props of the component.
|
|
3085
|
-
*/
|
|
3086
|
-
interface SwitchProps extends GenericProps, Omit<SwitchProps$1, 'inputId' | 'label'> {
|
|
3087
|
-
/** Children (label content). */
|
|
3088
|
-
children?: React__default.ReactNode;
|
|
3473
|
+
onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
|
|
3474
|
+
/** optional props for input */
|
|
3475
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
3476
|
+
/** Children */
|
|
3477
|
+
children?: React.ReactNode;
|
|
3089
3478
|
}
|
|
3090
3479
|
/**
|
|
3091
3480
|
* Switch component.
|
|
@@ -3581,5 +3970,5 @@ declare const ThemeProvider: React__default.FC<{
|
|
|
3581
3970
|
/** Get the theme in the current context. */
|
|
3582
3971
|
declare function useTheme(): ThemeContextValue;
|
|
3583
3972
|
|
|
3584
|
-
export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME, COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
|
|
3973
|
+
export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME, COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, SUB_COMPONENTS, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
|
|
3585
3974
|
export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };
|