@butternutbox/pawprint-native 0.21.0 → 0.23.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/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +18 -0
- package/dist/index.cjs +90 -21
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +15 -1
- package/dist/index.d.ts +15 -1
- package/dist/index.js +90 -21
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/atoms/Button/Button.stories.tsx +22 -2
- package/src/components/atoms/Button/Button.tsx +6 -5
- package/src/components/atoms/IconButton/IconButton.tsx +1 -1
- package/src/components/atoms/Tag/Tag.stories.tsx +11 -1
- package/src/components/atoms/Tag/Tag.tsx +12 -2
- package/src/components/molecules/Checkbox/Checkbox.stories.tsx +4 -0
- package/src/components/molecules/Checkbox/Checkbox.tsx +5 -2
- package/src/components/molecules/Drawer/DrawerBody.tsx +1 -1
- package/src/components/molecules/SelectField/SelectField.stories.tsx +53 -0
- package/src/components/molecules/SelectField/SelectField.test.tsx +257 -1
- package/src/components/molecules/SelectField/SelectField.tsx +193 -46
- package/src/components/molecules/SelectField/index.ts +1 -1
- package/src/components/molecules/Slider/Slider.tsx +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1609,6 +1609,17 @@ declare const StyledRoot: _emotion_native.StyledComponent<ViewProps & {
|
|
|
1609
1609
|
}, {}, {
|
|
1610
1610
|
ref?: React.Ref<View> | undefined;
|
|
1611
1611
|
}>;
|
|
1612
|
+
/**
|
|
1613
|
+
* A single item returned by an async `onSearchQuery` resolver. Mirrors the
|
|
1614
|
+
* props of `SelectField.Item` so results render identically to static items.
|
|
1615
|
+
*/
|
|
1616
|
+
type SelectFieldSearchResult = {
|
|
1617
|
+
value: string;
|
|
1618
|
+
label: string;
|
|
1619
|
+
leadingIcon?: React.ReactNode;
|
|
1620
|
+
hintText?: string;
|
|
1621
|
+
disabled?: boolean;
|
|
1622
|
+
};
|
|
1612
1623
|
type SelectFieldOwnProps<Value = Option | string> = {
|
|
1613
1624
|
label?: string;
|
|
1614
1625
|
description?: string;
|
|
@@ -1625,6 +1636,9 @@ type SelectFieldOwnProps<Value = Option | string> = {
|
|
|
1625
1636
|
searchable?: boolean;
|
|
1626
1637
|
searchPlaceholder?: string;
|
|
1627
1638
|
noResultsText?: string;
|
|
1639
|
+
onSearchQuery?: (query: string) => Promise<SelectFieldSearchResult[]>;
|
|
1640
|
+
debounceMs?: number;
|
|
1641
|
+
errorText?: string;
|
|
1628
1642
|
};
|
|
1629
1643
|
type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> & Omit<ViewProps, keyof SelectFieldOwnProps<Value>>;
|
|
1630
1644
|
type SelectFieldComponent = React.ForwardRefExoticComponent<SelectFieldProps<Option | string> & React.RefAttributes<View>> & {
|
|
@@ -2480,4 +2494,4 @@ declare const useDrawerKeyboardAvoidance: (minPadding?: number) => {
|
|
|
2480
2494
|
contentContainerStyle: StyleProp<ViewStyle>;
|
|
2481
2495
|
};
|
|
2482
2496
|
|
|
2483
|
-
export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
|
2497
|
+
export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
package/dist/index.d.ts
CHANGED
|
@@ -1609,6 +1609,17 @@ declare const StyledRoot: _emotion_native.StyledComponent<ViewProps & {
|
|
|
1609
1609
|
}, {}, {
|
|
1610
1610
|
ref?: React.Ref<View> | undefined;
|
|
1611
1611
|
}>;
|
|
1612
|
+
/**
|
|
1613
|
+
* A single item returned by an async `onSearchQuery` resolver. Mirrors the
|
|
1614
|
+
* props of `SelectField.Item` so results render identically to static items.
|
|
1615
|
+
*/
|
|
1616
|
+
type SelectFieldSearchResult = {
|
|
1617
|
+
value: string;
|
|
1618
|
+
label: string;
|
|
1619
|
+
leadingIcon?: React.ReactNode;
|
|
1620
|
+
hintText?: string;
|
|
1621
|
+
disabled?: boolean;
|
|
1622
|
+
};
|
|
1612
1623
|
type SelectFieldOwnProps<Value = Option | string> = {
|
|
1613
1624
|
label?: string;
|
|
1614
1625
|
description?: string;
|
|
@@ -1625,6 +1636,9 @@ type SelectFieldOwnProps<Value = Option | string> = {
|
|
|
1625
1636
|
searchable?: boolean;
|
|
1626
1637
|
searchPlaceholder?: string;
|
|
1627
1638
|
noResultsText?: string;
|
|
1639
|
+
onSearchQuery?: (query: string) => Promise<SelectFieldSearchResult[]>;
|
|
1640
|
+
debounceMs?: number;
|
|
1641
|
+
errorText?: string;
|
|
1628
1642
|
};
|
|
1629
1643
|
type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> & Omit<ViewProps, keyof SelectFieldOwnProps<Value>>;
|
|
1630
1644
|
type SelectFieldComponent = React.ForwardRefExoticComponent<SelectFieldProps<Option | string> & React.RefAttributes<View>> & {
|
|
@@ -2480,4 +2494,4 @@ declare const useDrawerKeyboardAvoidance: (minPadding?: number) => {
|
|
|
2480
2494
|
contentContainerStyle: StyleProp<ViewStyle>;
|
|
2481
2495
|
};
|
|
2482
2496
|
|
|
2483
|
-
export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
|
2497
|
+
export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
package/dist/index.js
CHANGED
|
@@ -1163,7 +1163,7 @@ var IconWrapper = styled51(View)({
|
|
|
1163
1163
|
});
|
|
1164
1164
|
var StyledButton = styled51(Pressable)(
|
|
1165
1165
|
({
|
|
1166
|
-
|
|
1166
|
+
buttonMinHeight,
|
|
1167
1167
|
buttonMinWidth,
|
|
1168
1168
|
buttonPaddingHorizontal,
|
|
1169
1169
|
buttonPaddingVertical,
|
|
@@ -1179,7 +1179,7 @@ var StyledButton = styled51(Pressable)(
|
|
|
1179
1179
|
alignItems: "center",
|
|
1180
1180
|
justifyContent: "center",
|
|
1181
1181
|
position: "relative",
|
|
1182
|
-
|
|
1182
|
+
minHeight: buttonMinHeight,
|
|
1183
1183
|
minWidth: buttonMinWidth,
|
|
1184
1184
|
paddingHorizontal: buttonPaddingHorizontal,
|
|
1185
1185
|
paddingVertical: buttonPaddingVertical,
|
|
@@ -1191,7 +1191,7 @@ var StyledButton = styled51(Pressable)(
|
|
|
1191
1191
|
);
|
|
1192
1192
|
var StyledTextWrapper = styled51(View)(({ textOpacity }) => ({
|
|
1193
1193
|
opacity: textOpacity,
|
|
1194
|
-
|
|
1194
|
+
flex: 1
|
|
1195
1195
|
}));
|
|
1196
1196
|
var StyledSpinnerWrapper = styled51(View)({
|
|
1197
1197
|
position: "absolute",
|
|
@@ -1267,7 +1267,7 @@ var Button = React66.forwardRef(
|
|
|
1267
1267
|
accessibilityState: { disabled: isDisabled, busy: loading },
|
|
1268
1268
|
onPressIn: () => setPressed(true),
|
|
1269
1269
|
onPressOut: () => setPressed(false),
|
|
1270
|
-
|
|
1270
|
+
buttonMinHeight: parseTokenValue7(sizeTokens.minHeight),
|
|
1271
1271
|
buttonMinWidth: parseTokenValue7(sizeTokens.minWidth),
|
|
1272
1272
|
buttonPaddingHorizontal: parseTokenValue7(
|
|
1273
1273
|
spacingTokens.horizontalPadding
|
|
@@ -1294,6 +1294,7 @@ var Button = React66.forwardRef(
|
|
|
1294
1294
|
letterSpacing: typography.letterSpacing
|
|
1295
1295
|
},
|
|
1296
1296
|
color: variantStyles.textColor,
|
|
1297
|
+
align: "center",
|
|
1297
1298
|
children
|
|
1298
1299
|
}
|
|
1299
1300
|
) }),
|
|
@@ -1429,7 +1430,7 @@ var IconButton = React66.forwardRef(
|
|
|
1429
1430
|
const isDisabled = disabled || loading;
|
|
1430
1431
|
const buttons = theme2.tokens.components.buttons;
|
|
1431
1432
|
const sizeTokens = buttons.size[size];
|
|
1432
|
-
const dimension = parseTokenValue10(sizeTokens.
|
|
1433
|
+
const dimension = parseTokenValue10(sizeTokens.minHeight);
|
|
1433
1434
|
const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
|
|
1434
1435
|
const iconDimension = parseTokenValue10(iconSizing[sizeToIconSizeToken[size]]);
|
|
1435
1436
|
const [pressed, setPressed] = React66.useState(false);
|
|
@@ -4861,6 +4862,7 @@ Switch.displayName = "Switch";
|
|
|
4861
4862
|
var parseTokenValue18 = (value) => parseFloat(value);
|
|
4862
4863
|
var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
|
|
4863
4864
|
const { sizing, spacing, colour, badge } = theme2.tokens.components.tags;
|
|
4865
|
+
const { spacing: semanticSpacing } = theme2.tokens.semantics.dimensions;
|
|
4864
4866
|
const backgroundColorMap = {
|
|
4865
4867
|
primary: colour.primary.background,
|
|
4866
4868
|
secondary: colour.primary.secondary,
|
|
@@ -4870,13 +4872,21 @@ var StyledTag = styled51(View)(({ theme: theme2, tagVariant, tagSize }) => {
|
|
|
4870
4872
|
warning: colour.primary.warning,
|
|
4871
4873
|
error: colour.primary.error
|
|
4872
4874
|
};
|
|
4875
|
+
const verticalPaddingMap = {
|
|
4876
|
+
small: semanticSpacing["2xs"],
|
|
4877
|
+
medium: semanticSpacing["3xs"],
|
|
4878
|
+
large: semanticSpacing["2xs"]
|
|
4879
|
+
};
|
|
4873
4880
|
return {
|
|
4874
4881
|
flexDirection: "row",
|
|
4875
4882
|
alignItems: "center",
|
|
4876
4883
|
justifyContent: "center",
|
|
4877
|
-
|
|
4884
|
+
minHeight: parseTokenValue18(sizing[tagSize].minHeight),
|
|
4878
4885
|
minWidth: parseTokenValue18(sizing[tagSize].minWidth),
|
|
4879
|
-
|
|
4886
|
+
paddingLeft: parseTokenValue18(spacing.horizontalPadding) * 2,
|
|
4887
|
+
paddingRight: parseTokenValue18(spacing.horizontalPadding) * 2,
|
|
4888
|
+
paddingTop: parseTokenValue18(verticalPaddingMap[tagSize]),
|
|
4889
|
+
paddingBottom: parseTokenValue18(verticalPaddingMap[tagSize]),
|
|
4880
4890
|
gap: parseTokenValue18(spacing[tagSize].gap),
|
|
4881
4891
|
borderRadius: parseTokenValue18(badge.borderRadius.default),
|
|
4882
4892
|
backgroundColor: backgroundColorMap[tagVariant]
|
|
@@ -6325,7 +6335,7 @@ var DrawerBody = React66.forwardRef(
|
|
|
6325
6335
|
const horizontalPadding = parseTokenValue27(content.slot.horizontalPadding);
|
|
6326
6336
|
const topPadding = parseTokenValue27(content.slot.verticalPadding);
|
|
6327
6337
|
const bodyMaxHeight = providedMaxHeight != null ? providedMaxHeight : windowHeight - 300;
|
|
6328
|
-
const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.
|
|
6338
|
+
const paddingRight = headerContext === null ? parseTokenValue27(spacing.close.right.md) + parseTokenValue27(buttons.size.sm.minHeight) : horizontalPadding;
|
|
6329
6339
|
const bodyPaddingBottom = !footerContext ? Math.max(
|
|
6330
6340
|
parseTokenValue27(theme2.tokens.semantics.dimensions.spacing["2xl"]),
|
|
6331
6341
|
insets.bottom
|
|
@@ -6716,12 +6726,12 @@ var StyledControl = styled51(View)(
|
|
|
6716
6726
|
justifyContent: "center"
|
|
6717
6727
|
})
|
|
6718
6728
|
);
|
|
6719
|
-
var StyledContent2 = styled51(View)(({ contentGap, contentFlex }) => ({
|
|
6729
|
+
var StyledContent2 = styled51(View)(({ contentGap, contentFlex, contentFitContent }) => __spreadValues({
|
|
6720
6730
|
flexDirection: "column",
|
|
6721
6731
|
gap: contentGap,
|
|
6722
6732
|
flex: contentFlex,
|
|
6723
6733
|
minWidth: 0
|
|
6724
|
-
}));
|
|
6734
|
+
}, contentFitContent ? { maxWidth: "85%" } : {}));
|
|
6725
6735
|
var StyledIllustration = styled51(View)(({ illustrationSize }) => ({
|
|
6726
6736
|
flexShrink: 0,
|
|
6727
6737
|
width: illustrationSize,
|
|
@@ -6809,6 +6819,7 @@ var Checkbox = React66.forwardRef(
|
|
|
6809
6819
|
{
|
|
6810
6820
|
contentGap: parseTokenValue31(checkbox.spacing.content.gap),
|
|
6811
6821
|
contentFlex: isTile && fitContent ? 0 : 1,
|
|
6822
|
+
contentFitContent: isTile && fitContent,
|
|
6812
6823
|
children: [
|
|
6813
6824
|
label && /* @__PURE__ */ jsx(
|
|
6814
6825
|
Typography,
|
|
@@ -8973,7 +8984,7 @@ var SelectFieldItem = React66.forwardRef(
|
|
|
8973
8984
|
);
|
|
8974
8985
|
SelectFieldItem.displayName = "SelectField.Item";
|
|
8975
8986
|
var parseTokenValue48 = (value) => parseFloat(value);
|
|
8976
|
-
var
|
|
8987
|
+
var StyledStatusRow = styled51(View)(({ theme: theme2 }) => {
|
|
8977
8988
|
const { dropdown } = theme2.tokens.components.dropdownList;
|
|
8978
8989
|
return {
|
|
8979
8990
|
paddingVertical: parseTokenValue48(dropdown.listItem.spacing.verticalPadding),
|
|
@@ -9006,7 +9017,10 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
9006
9017
|
disabled,
|
|
9007
9018
|
searchable = false,
|
|
9008
9019
|
searchPlaceholder,
|
|
9009
|
-
noResultsText = "No results found"
|
|
9020
|
+
noResultsText = "No results found",
|
|
9021
|
+
onSearchQuery,
|
|
9022
|
+
debounceMs = 300,
|
|
9023
|
+
errorText = "Something went wrong"
|
|
9010
9024
|
} = _b, rest = __objRest(_b, [
|
|
9011
9025
|
"label",
|
|
9012
9026
|
"placeholder",
|
|
@@ -9022,7 +9036,10 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
9022
9036
|
"disabled",
|
|
9023
9037
|
"searchable",
|
|
9024
9038
|
"searchPlaceholder",
|
|
9025
|
-
"noResultsText"
|
|
9039
|
+
"noResultsText",
|
|
9040
|
+
"onSearchQuery",
|
|
9041
|
+
"debounceMs",
|
|
9042
|
+
"errorText"
|
|
9026
9043
|
]);
|
|
9027
9044
|
const [isOpen, setIsOpen] = React66.useState(false);
|
|
9028
9045
|
const [showContent, setShowContent] = React66.useState(false);
|
|
@@ -9032,6 +9049,44 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
9032
9049
|
const [searchQuery, setSearchQuery] = React66.useState("");
|
|
9033
9050
|
const [clearKey, setClearKey] = React66.useState(0);
|
|
9034
9051
|
const searchInputRef = React66.useRef(null);
|
|
9052
|
+
const isQueryMode = searchable && typeof onSearchQuery === "function";
|
|
9053
|
+
const [searchResults, setSearchResults] = React66.useState([]);
|
|
9054
|
+
const [isSearching, setIsSearching] = React66.useState(false);
|
|
9055
|
+
const [searchFailed, setSearchFailed] = React66.useState(false);
|
|
9056
|
+
const searchRequestIdRef = React66.useRef(0);
|
|
9057
|
+
const onSearchQueryRef = React66.useRef(onSearchQuery);
|
|
9058
|
+
React66.useEffect(() => {
|
|
9059
|
+
onSearchQueryRef.current = onSearchQuery;
|
|
9060
|
+
});
|
|
9061
|
+
React66.useEffect(() => {
|
|
9062
|
+
if (!isQueryMode) return;
|
|
9063
|
+
if (searchQuery.length === 0) {
|
|
9064
|
+
searchRequestIdRef.current += 1;
|
|
9065
|
+
setSearchResults([]);
|
|
9066
|
+
setIsSearching(false);
|
|
9067
|
+
setSearchFailed(false);
|
|
9068
|
+
return;
|
|
9069
|
+
}
|
|
9070
|
+
const requestId = searchRequestIdRef.current + 1;
|
|
9071
|
+
searchRequestIdRef.current = requestId;
|
|
9072
|
+
setIsSearching(true);
|
|
9073
|
+
setSearchFailed(false);
|
|
9074
|
+
const debounceTimer = setTimeout(() => {
|
|
9075
|
+
const runQuery = onSearchQueryRef.current;
|
|
9076
|
+
if (!runQuery) return;
|
|
9077
|
+
Promise.resolve(runQuery(searchQuery)).then((items) => {
|
|
9078
|
+
if (searchRequestIdRef.current !== requestId) return;
|
|
9079
|
+
setSearchResults(items);
|
|
9080
|
+
setIsSearching(false);
|
|
9081
|
+
}).catch(() => {
|
|
9082
|
+
if (searchRequestIdRef.current !== requestId) return;
|
|
9083
|
+
setSearchResults([]);
|
|
9084
|
+
setSearchFailed(true);
|
|
9085
|
+
setIsSearching(false);
|
|
9086
|
+
});
|
|
9087
|
+
}, debounceMs);
|
|
9088
|
+
return () => clearTimeout(debounceTimer);
|
|
9089
|
+
}, [searchQuery, isQueryMode, debounceMs]);
|
|
9035
9090
|
React66.useEffect(() => {
|
|
9036
9091
|
if (!isOpen) {
|
|
9037
9092
|
setShowContent(false);
|
|
@@ -9064,7 +9119,7 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
9064
9119
|
clearTimeout(hardwareKeyboardTimer);
|
|
9065
9120
|
keyboardSub.remove();
|
|
9066
9121
|
};
|
|
9067
|
-
}, [isOpen, searchable]);
|
|
9122
|
+
}, [isOpen, searchable, isSearching, searchQuery]);
|
|
9068
9123
|
const isCompound = React66.Children.toArray(children).some(
|
|
9069
9124
|
(child) => React66.isValidElement(child) && child.type === SelectFieldContent
|
|
9070
9125
|
);
|
|
@@ -9082,7 +9137,7 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
9082
9137
|
};
|
|
9083
9138
|
const currentValue = value !== void 0 ? value : internalValue;
|
|
9084
9139
|
const allItems = React66.Children.toArray(children);
|
|
9085
|
-
const
|
|
9140
|
+
const localFilteredItems = searchable && !isQueryMode ? allItems.filter((child) => {
|
|
9086
9141
|
var _a2;
|
|
9087
9142
|
if (!searchQuery) return true;
|
|
9088
9143
|
if (React66.isValidElement(child) && child.type === SelectFieldItem) {
|
|
@@ -9093,7 +9148,21 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
9093
9148
|
}
|
|
9094
9149
|
return true;
|
|
9095
9150
|
}) : allItems;
|
|
9096
|
-
const
|
|
9151
|
+
const isQueryActive = isQueryMode && searchQuery.length > 0;
|
|
9152
|
+
const queryResultItems = searchResults.map((result) => /* @__PURE__ */ jsx(
|
|
9153
|
+
SelectFieldItem,
|
|
9154
|
+
{
|
|
9155
|
+
value: result.value,
|
|
9156
|
+
leadingIcon: result.leadingIcon,
|
|
9157
|
+
hintText: result.hintText,
|
|
9158
|
+
disabled: result.disabled,
|
|
9159
|
+
children: result.label
|
|
9160
|
+
},
|
|
9161
|
+
String(result.value)
|
|
9162
|
+
));
|
|
9163
|
+
const itemsToRender = isQueryActive ? queryResultItems : localFilteredItems;
|
|
9164
|
+
const hasNoResults = isQueryMode ? isQueryActive && !isSearching && !searchFailed && searchResults.length === 0 : searchable && searchQuery.length > 0 && localFilteredItems.length === 0;
|
|
9165
|
+
const hasContentToShow = isSearching || searchFailed || hasNoResults || itemsToRender.length > 0;
|
|
9097
9166
|
const searchActionIcon = (() => {
|
|
9098
9167
|
if (!searchable) return void 0;
|
|
9099
9168
|
const showClear = isOpen && searchQuery.length > 0 || !isOpen && Boolean(currentValue);
|
|
@@ -9152,8 +9221,8 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
9152
9221
|
description && /* @__PURE__ */ jsx(InputDescription, { state, children: description }),
|
|
9153
9222
|
error && state === "error" && /* @__PURE__ */ jsx(InputError, { children: error })
|
|
9154
9223
|
] })),
|
|
9155
|
-
showContent && /* @__PURE__ */
|
|
9156
|
-
|
|
9224
|
+
showContent && hasContentToShow && /* @__PURE__ */ jsx(SelectFieldContent, { children: isSearching ? /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Spinner, { size: "sm" }) }) : searchFailed ? /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: errorText }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
9225
|
+
itemsToRender.map((child) => {
|
|
9157
9226
|
if (React66.isValidElement(child) && child.type === SelectFieldItem) {
|
|
9158
9227
|
const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
|
|
9159
9228
|
const childProps = child.props;
|
|
@@ -9166,8 +9235,8 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
9166
9235
|
}
|
|
9167
9236
|
return child;
|
|
9168
9237
|
}),
|
|
9169
|
-
hasNoResults && /* @__PURE__ */ jsx(
|
|
9170
|
-
] })
|
|
9238
|
+
hasNoResults && /* @__PURE__ */ jsx(StyledStatusRow, { children: /* @__PURE__ */ jsx(Typography, { size: "sm", children: noResultsText }) })
|
|
9239
|
+
] }) })
|
|
9171
9240
|
]
|
|
9172
9241
|
},
|
|
9173
9242
|
clearKey
|
|
@@ -9532,7 +9601,7 @@ var Slider = React66.forwardRef(
|
|
|
9532
9601
|
const isControlled = controlledValue !== void 0;
|
|
9533
9602
|
const [internalValue, setInternalValue] = React66.useState(defaultValue);
|
|
9534
9603
|
const currentValue = isControlled ? controlledValue : internalValue;
|
|
9535
|
-
const thumbSize = parseTokenValue49(buttons.size.md.
|
|
9604
|
+
const thumbSize = parseTokenValue49(buttons.size.md.minHeight);
|
|
9536
9605
|
const trackHeight = parseTokenValue49(slider.sizing.track.height);
|
|
9537
9606
|
const isWeb = Platform.OS === "web";
|
|
9538
9607
|
const [trackLayoutWidth, setTrackLayoutWidth] = useState(0);
|