@butternutbox/pawprint-native 0.10.8 → 0.10.10
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 +4 -4
- package/CHANGELOG.md +44 -0
- package/dist/index.cjs +732 -748
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +229 -245
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/Drawer/Drawer.stories.tsx +49 -110
- package/src/components/molecules/Drawer/DrawerBody.tsx +15 -35
- package/src/components/molecules/Drawer/DrawerContent.tsx +80 -71
- package/src/components/molecules/Drawer/DrawerMeasureContext.ts +11 -15
package/dist/index.js
CHANGED
|
@@ -9,7 +9,7 @@ import ibmPlexSansCondensed400 from './ibm-plex-sans-condensed-400-normal.ttf';
|
|
|
9
9
|
import ibmPlexSansCondensed500 from './ibm-plex-sans-condensed-500-normal.ttf';
|
|
10
10
|
import ibmPlexSansCondensed600 from './ibm-plex-sans-condensed-600-normal.ttf';
|
|
11
11
|
import ibmPlexSansCondensed700 from './ibm-plex-sans-condensed-700-normal.ttf';
|
|
12
|
-
import
|
|
12
|
+
import React65, { createContext, forwardRef, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
|
|
13
13
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
14
14
|
import * as AvatarPrimitive from '@rn-primitives/avatar';
|
|
15
15
|
import { Text, View, Animated, Pressable, TextInput, Easing, StyleSheet, useWindowDimensions, PanResponder, Image, ScrollView, Keyboard, ActionSheetIOS, TouchableOpacity, Platform, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
|
|
@@ -190,7 +190,7 @@ var VARIANT_DEFAULTS = {
|
|
|
190
190
|
display: { size: "lg" }
|
|
191
191
|
};
|
|
192
192
|
var StyledText = styled50(Text)({});
|
|
193
|
-
var Typography =
|
|
193
|
+
var Typography = React65.forwardRef(
|
|
194
194
|
(props, ref) => {
|
|
195
195
|
const theme2 = useTheme();
|
|
196
196
|
const { typography, colour } = theme2.tokens.semantics;
|
|
@@ -280,7 +280,7 @@ var StyledIconRoot = styled50(View)(({ iconDimension }) => ({
|
|
|
280
280
|
width: iconDimension,
|
|
281
281
|
height: iconDimension
|
|
282
282
|
}));
|
|
283
|
-
var Icon =
|
|
283
|
+
var Icon = React65.forwardRef(
|
|
284
284
|
(_a, ref) => {
|
|
285
285
|
var _b = _a, {
|
|
286
286
|
icon: IconComponent,
|
|
@@ -3880,7 +3880,7 @@ var AVATAR_SIZE_TO_ICON_SIZE = {
|
|
|
3880
3880
|
md: "md",
|
|
3881
3881
|
lg: "xl"
|
|
3882
3882
|
};
|
|
3883
|
-
var AvatarRoot =
|
|
3883
|
+
var AvatarRoot = React65.forwardRef(
|
|
3884
3884
|
(_a, ref) => {
|
|
3885
3885
|
var _b = _a, {
|
|
3886
3886
|
src,
|
|
@@ -3939,7 +3939,7 @@ function getVisibleDots(count, activeIndex) {
|
|
|
3939
3939
|
const windowStart = Math.min(Math.max(activeIndex - 2, 0), count - 5);
|
|
3940
3940
|
return Array.from({ length: 5 }, (_, i) => windowStart + i);
|
|
3941
3941
|
}
|
|
3942
|
-
var CarouselControls =
|
|
3942
|
+
var CarouselControls = React65.forwardRef(
|
|
3943
3943
|
(_a, ref) => {
|
|
3944
3944
|
var _b = _a, { count, activeIndex, showBackground = true } = _b, props = __objRest(_b, ["count", "activeIndex", "showBackground"]);
|
|
3945
3945
|
const theme2 = useTheme();
|
|
@@ -4026,7 +4026,7 @@ var StyledBadge = styled50(View)(({ theme: theme2, badgeVariant, badgeSize, pinn
|
|
|
4026
4026
|
backgroundColor: backgroundColorMap[badgeVariant]
|
|
4027
4027
|
}, borderRadiusStyles), positionStyles);
|
|
4028
4028
|
});
|
|
4029
|
-
var Badge =
|
|
4029
|
+
var Badge = React65.forwardRef(
|
|
4030
4030
|
(_a, ref) => {
|
|
4031
4031
|
var _b = _a, {
|
|
4032
4032
|
variant = "primary",
|
|
@@ -4101,7 +4101,7 @@ var Badge = React66.forwardRef(
|
|
|
4101
4101
|
Badge.displayName = "Badge";
|
|
4102
4102
|
var parseTokenValue6 = (value) => parseFloat(value);
|
|
4103
4103
|
var StyledSpinner = styled50(View)({});
|
|
4104
|
-
var Spinner =
|
|
4104
|
+
var Spinner = React65.forwardRef(
|
|
4105
4105
|
(_a, ref) => {
|
|
4106
4106
|
var _b = _a, { size = "md", variant = "dark", style } = _b, rest = __objRest(_b, ["size", "variant", "style"]);
|
|
4107
4107
|
const theme2 = useTheme();
|
|
@@ -4208,7 +4208,7 @@ var StyledSpinnerWrapper = styled50(View)({
|
|
|
4208
4208
|
alignItems: "center",
|
|
4209
4209
|
justifyContent: "center"
|
|
4210
4210
|
});
|
|
4211
|
-
var Button =
|
|
4211
|
+
var Button = React65.forwardRef(
|
|
4212
4212
|
(_a, ref) => {
|
|
4213
4213
|
var _b = _a, {
|
|
4214
4214
|
variant = "filled",
|
|
@@ -4240,7 +4240,7 @@ var Button = React66.forwardRef(
|
|
|
4240
4240
|
const typographyKey = sizeToTypographyKey[size];
|
|
4241
4241
|
const typography = buttons.text[typographyKey];
|
|
4242
4242
|
resolveFont(typography.fontFamily, typography.fontWeight);
|
|
4243
|
-
const [pressed, setPressed] =
|
|
4243
|
+
const [pressed, setPressed] = React65.useState(false);
|
|
4244
4244
|
const getVariantStyles = (isPressed) => {
|
|
4245
4245
|
if (variant === "filled") {
|
|
4246
4246
|
const bgTokens = buttons.filledButton.colour.background[colour];
|
|
@@ -4351,7 +4351,7 @@ var StyledHint = styled50(View)(({
|
|
|
4351
4351
|
backgroundColor: hintVariantMap[hintVariant]
|
|
4352
4352
|
};
|
|
4353
4353
|
});
|
|
4354
|
-
var Hint =
|
|
4354
|
+
var Hint = React65.forwardRef(
|
|
4355
4355
|
(_a, ref) => {
|
|
4356
4356
|
var _b = _a, { variant = "default" } = _b, rest = __objRest(_b, ["variant"]);
|
|
4357
4357
|
return /* @__PURE__ */ jsx(StyledHint, __spreadValues({ ref, hintVariant: variant }, rest));
|
|
@@ -4393,7 +4393,7 @@ var StyledSpinnerWrapper2 = styled50(View)({
|
|
|
4393
4393
|
alignItems: "center",
|
|
4394
4394
|
justifyContent: "center"
|
|
4395
4395
|
});
|
|
4396
|
-
var IconButton =
|
|
4396
|
+
var IconButton = React65.forwardRef(
|
|
4397
4397
|
(_a, ref) => {
|
|
4398
4398
|
var _b = _a, {
|
|
4399
4399
|
icon: IconComponent,
|
|
@@ -4419,7 +4419,7 @@ var IconButton = React66.forwardRef(
|
|
|
4419
4419
|
const dimension = parseTokenValue9(sizeTokens.height);
|
|
4420
4420
|
const iconSizing = theme2.tokens.components.icons.sizing.icons.core;
|
|
4421
4421
|
const iconDimension = parseTokenValue9(iconSizing[sizeToIconSizeToken[size]]);
|
|
4422
|
-
const [pressed, setPressed] =
|
|
4422
|
+
const [pressed, setPressed] = React65.useState(false);
|
|
4423
4423
|
const getVariantStyles = (isPressed) => {
|
|
4424
4424
|
if (variant === "filled") {
|
|
4425
4425
|
const filled = buttons.iconButton.filledButton;
|
|
@@ -4502,7 +4502,7 @@ var StyledRoot2 = styled50(View)(({ illustrationHeight }) => ({
|
|
|
4502
4502
|
flexShrink: 0,
|
|
4503
4503
|
height: illustrationHeight
|
|
4504
4504
|
}));
|
|
4505
|
-
var Illustration =
|
|
4505
|
+
var Illustration = React65.forwardRef(
|
|
4506
4506
|
(_a, ref) => {
|
|
4507
4507
|
var _b = _a, {
|
|
4508
4508
|
illustration: IllustrationComponent,
|
|
@@ -4538,7 +4538,7 @@ var StyledLabelRow = styled50(View)(({ labelGap }) => ({
|
|
|
4538
4538
|
alignItems: "center",
|
|
4539
4539
|
gap: labelGap
|
|
4540
4540
|
}));
|
|
4541
|
-
var InputLabel =
|
|
4541
|
+
var InputLabel = React65.forwardRef(
|
|
4542
4542
|
(_a, ref) => {
|
|
4543
4543
|
var _b = _a, { optionalText, state = "default", children } = _b, rest = __objRest(_b, ["optionalText", "state", "children"]);
|
|
4544
4544
|
const theme2 = useTheme();
|
|
@@ -4838,7 +4838,7 @@ var StyledIconSlot = styled50(View)({
|
|
|
4838
4838
|
justifyContent: "center",
|
|
4839
4839
|
flexShrink: 0
|
|
4840
4840
|
});
|
|
4841
|
-
var InputField =
|
|
4841
|
+
var InputField = React65.forwardRef(
|
|
4842
4842
|
(_a, ref) => {
|
|
4843
4843
|
var _b = _a, {
|
|
4844
4844
|
leadingIcon,
|
|
@@ -4997,7 +4997,7 @@ var InputField = React66.forwardRef(
|
|
|
4997
4997
|
}
|
|
4998
4998
|
);
|
|
4999
4999
|
InputField.displayName = "Input.Field";
|
|
5000
|
-
var InputText =
|
|
5000
|
+
var InputText = React65.forwardRef(
|
|
5001
5001
|
(_a, ref) => {
|
|
5002
5002
|
var _b = _a, { placeholderTextColor } = _b, rest = __objRest(_b, ["placeholderTextColor"]);
|
|
5003
5003
|
const theme2 = useTheme();
|
|
@@ -5016,7 +5016,7 @@ var StyledDescriptionRow = styled50(View)({
|
|
|
5016
5016
|
flexDirection: "row",
|
|
5017
5017
|
alignItems: "center"
|
|
5018
5018
|
});
|
|
5019
|
-
var InputDescription =
|
|
5019
|
+
var InputDescription = React65.forwardRef(
|
|
5020
5020
|
(_a, ref) => {
|
|
5021
5021
|
var _b = _a, { state = "default", children } = _b, rest = __objRest(_b, ["state", "children"]);
|
|
5022
5022
|
const theme2 = useTheme();
|
|
@@ -5036,7 +5036,7 @@ var StyledErrorRow = styled50(View)({
|
|
|
5036
5036
|
flexDirection: "row",
|
|
5037
5037
|
alignItems: "center"
|
|
5038
5038
|
});
|
|
5039
|
-
var InputError =
|
|
5039
|
+
var InputError = React65.forwardRef(
|
|
5040
5040
|
(_a, ref) => {
|
|
5041
5041
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
5042
5042
|
const theme2 = useTheme();
|
|
@@ -5059,7 +5059,7 @@ var StyledRoot3 = styled50(View)(({ theme: theme2 }) => {
|
|
|
5059
5059
|
gap: parseTokenValue13(spacing.gap)
|
|
5060
5060
|
};
|
|
5061
5061
|
});
|
|
5062
|
-
var InputRoot =
|
|
5062
|
+
var InputRoot = React65.forwardRef(
|
|
5063
5063
|
(_a, ref) => {
|
|
5064
5064
|
var _b = _a, {
|
|
5065
5065
|
label,
|
|
@@ -5103,7 +5103,7 @@ var Input = Object.assign(InputRoot, {
|
|
|
5103
5103
|
Description: InputDescription,
|
|
5104
5104
|
Error: InputError
|
|
5105
5105
|
});
|
|
5106
|
-
var Link =
|
|
5106
|
+
var Link = React65.forwardRef(
|
|
5107
5107
|
(_a, ref) => {
|
|
5108
5108
|
var _b = _a, {
|
|
5109
5109
|
size = "md",
|
|
@@ -7701,7 +7701,7 @@ var StyledRoot4 = styled50(View)({
|
|
|
7701
7701
|
justifyContent: "center",
|
|
7702
7702
|
flexShrink: 0
|
|
7703
7703
|
});
|
|
7704
|
-
var Logo =
|
|
7704
|
+
var Logo = React65.forwardRef(
|
|
7705
7705
|
(_a, ref) => {
|
|
7706
7706
|
var _b = _a, { brand, variant = "primary", "aria-label": ariaLabel } = _b, rest = __objRest(_b, ["brand", "variant", "aria-label"]);
|
|
7707
7707
|
const effectiveVariant = brand === "bcorp" ? "primary" : variant;
|
|
@@ -7740,7 +7740,7 @@ var StyledInputContainer = styled50(View)(({ hasInlineHelp }) => ({
|
|
|
7740
7740
|
flexDirection: "column",
|
|
7741
7741
|
gap: hasInlineHelp ? 2 : 0
|
|
7742
7742
|
}));
|
|
7743
|
-
var NumberInputField =
|
|
7743
|
+
var NumberInputField = React65.forwardRef((_a, ref) => {
|
|
7744
7744
|
var _b = _a, { fieldText, inlineHelpText } = _b, props = __objRest(_b, ["fieldText", "inlineHelpText"]);
|
|
7745
7745
|
const theme2 = useTheme();
|
|
7746
7746
|
const { colour, description } = theme2.tokens.components.inputs;
|
|
@@ -7837,7 +7837,7 @@ var StyledRoot5 = styled50(View)(({ theme: theme2 }) => {
|
|
|
7837
7837
|
gap: parseTokenValue15(spacing.gap)
|
|
7838
7838
|
};
|
|
7839
7839
|
});
|
|
7840
|
-
var NumberInputRoot =
|
|
7840
|
+
var NumberInputRoot = React65.forwardRef(
|
|
7841
7841
|
(_a, ref) => {
|
|
7842
7842
|
var _b = _a, {
|
|
7843
7843
|
label,
|
|
@@ -7932,7 +7932,7 @@ var StyledContent = styled50(View)(({ contentGap }) => ({
|
|
|
7932
7932
|
flex: 1,
|
|
7933
7933
|
minWidth: 0
|
|
7934
7934
|
}));
|
|
7935
|
-
var Switch =
|
|
7935
|
+
var Switch = React65.forwardRef(
|
|
7936
7936
|
(_a, ref) => {
|
|
7937
7937
|
var _b = _a, {
|
|
7938
7938
|
label,
|
|
@@ -7952,7 +7952,7 @@ var Switch = React66.forwardRef(
|
|
|
7952
7952
|
const theme2 = useTheme();
|
|
7953
7953
|
const { size, colour, opacity, borderWidth, spacing, typography } = theme2.tokens.components.switch;
|
|
7954
7954
|
const isControlled = controlledChecked !== void 0;
|
|
7955
|
-
const [internalChecked, setInternalChecked] =
|
|
7955
|
+
const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
|
|
7956
7956
|
const isChecked = isControlled ? controlledChecked : internalChecked;
|
|
7957
7957
|
const controlWidth = parseTokenValue16(size.control.width);
|
|
7958
7958
|
const controlHeight = parseTokenValue16(size.control.height);
|
|
@@ -8058,7 +8058,7 @@ var StyledTag = styled50(View)(({ theme: theme2, tagVariant, tagSize }) => {
|
|
|
8058
8058
|
backgroundColor: backgroundColorMap[tagVariant]
|
|
8059
8059
|
};
|
|
8060
8060
|
});
|
|
8061
|
-
var Tag =
|
|
8061
|
+
var Tag = React65.forwardRef(
|
|
8062
8062
|
(_a, ref) => {
|
|
8063
8063
|
var _b = _a, { variant = "primary", size = "medium", icon, children } = _b, rest = __objRest(_b, ["variant", "size", "icon", "children"]);
|
|
8064
8064
|
const theme2 = useTheme();
|
|
@@ -8158,7 +8158,7 @@ var IconWrapper2 = styled50(View)(({ side }) => {
|
|
|
8158
8158
|
zIndex: 1
|
|
8159
8159
|
};
|
|
8160
8160
|
});
|
|
8161
|
-
var TextAreaField =
|
|
8161
|
+
var TextAreaField = React65.forwardRef(
|
|
8162
8162
|
(_a, ref) => {
|
|
8163
8163
|
var _b = _a, {
|
|
8164
8164
|
leadingIcon,
|
|
@@ -8351,7 +8351,7 @@ var StyledCharCountWrapper = styled50(View)(({ charCountGap, charCountPadding })
|
|
|
8351
8351
|
gap: charCountGap,
|
|
8352
8352
|
paddingLeft: charCountPadding
|
|
8353
8353
|
}));
|
|
8354
|
-
var TextAreaLabel =
|
|
8354
|
+
var TextAreaLabel = React65.forwardRef(
|
|
8355
8355
|
(_a, ref) => {
|
|
8356
8356
|
var _b = _a, {
|
|
8357
8357
|
optionalText,
|
|
@@ -8415,7 +8415,7 @@ var StyledRoot6 = styled50(View)(({ theme: theme2 }) => {
|
|
|
8415
8415
|
gap: parseTokenValue20(spacing.gap)
|
|
8416
8416
|
};
|
|
8417
8417
|
});
|
|
8418
|
-
var TextAreaRoot =
|
|
8418
|
+
var TextAreaRoot = React65.forwardRef(
|
|
8419
8419
|
(_a, ref) => {
|
|
8420
8420
|
var _b = _a, {
|
|
8421
8421
|
label,
|
|
@@ -8442,8 +8442,8 @@ var TextAreaRoot = React66.forwardRef(
|
|
|
8442
8442
|
"defaultValue",
|
|
8443
8443
|
"onChangeText"
|
|
8444
8444
|
]);
|
|
8445
|
-
const [charCount, setCharCount] =
|
|
8446
|
-
|
|
8445
|
+
const [charCount, setCharCount] = React65.useState(0);
|
|
8446
|
+
React65.useEffect(() => {
|
|
8447
8447
|
if (value !== void 0) {
|
|
8448
8448
|
setCharCount(String(value).length);
|
|
8449
8449
|
} else if (defaultValue !== void 0) {
|
|
@@ -8496,7 +8496,7 @@ var TextArea = Object.assign(TextAreaRoot, {
|
|
|
8496
8496
|
Description: InputDescription,
|
|
8497
8497
|
Error: InputError
|
|
8498
8498
|
});
|
|
8499
|
-
var AccordionContext =
|
|
8499
|
+
var AccordionContext = React65.createContext({
|
|
8500
8500
|
openValues: [],
|
|
8501
8501
|
toggle: () => {
|
|
8502
8502
|
},
|
|
@@ -8527,7 +8527,7 @@ var StyledDivider = styled50(View)(({ dividerColor, dividerMarginTop }) => ({
|
|
|
8527
8527
|
backgroundColor: dividerColor,
|
|
8528
8528
|
marginTop: dividerMarginTop
|
|
8529
8529
|
}));
|
|
8530
|
-
var AccordionItem =
|
|
8530
|
+
var AccordionItem = React65.forwardRef(
|
|
8531
8531
|
(_a, ref) => {
|
|
8532
8532
|
var _b = _a, { title, children, value, disabled: itemDisabled } = _b, rest = __objRest(_b, ["title", "children", "value", "disabled"]);
|
|
8533
8533
|
const theme2 = useTheme();
|
|
@@ -8537,7 +8537,7 @@ var AccordionItem = React66.forwardRef(
|
|
|
8537
8537
|
toggle,
|
|
8538
8538
|
disabled: rootDisabled,
|
|
8539
8539
|
size
|
|
8540
|
-
} =
|
|
8540
|
+
} = React65.useContext(AccordionContext);
|
|
8541
8541
|
const itemValue = value != null ? value : title;
|
|
8542
8542
|
const isOpen = openValues.includes(itemValue);
|
|
8543
8543
|
const isDisabled = itemDisabled || rootDisabled;
|
|
@@ -8598,7 +8598,7 @@ var AccordionItem = React66.forwardRef(
|
|
|
8598
8598
|
}
|
|
8599
8599
|
);
|
|
8600
8600
|
AccordionItem.displayName = "Accordion.Item";
|
|
8601
|
-
var AccordionRoot =
|
|
8601
|
+
var AccordionRoot = React65.forwardRef(
|
|
8602
8602
|
(_a, ref) => {
|
|
8603
8603
|
var _b = _a, {
|
|
8604
8604
|
children,
|
|
@@ -8620,11 +8620,11 @@ var AccordionRoot = React66.forwardRef(
|
|
|
8620
8620
|
const theme2 = useTheme();
|
|
8621
8621
|
const { accordion } = theme2.tokens.components;
|
|
8622
8622
|
const isControlled = controlledValue !== void 0;
|
|
8623
|
-
const [internalValue, setInternalValue] =
|
|
8623
|
+
const [internalValue, setInternalValue] = React65.useState(
|
|
8624
8624
|
defaultValue != null ? defaultValue : []
|
|
8625
8625
|
);
|
|
8626
8626
|
const openValues = isControlled ? controlledValue : internalValue;
|
|
8627
|
-
const toggle =
|
|
8627
|
+
const toggle = React65.useCallback(
|
|
8628
8628
|
(itemValue) => {
|
|
8629
8629
|
const isOpen = openValues.includes(itemValue);
|
|
8630
8630
|
let next;
|
|
@@ -8642,7 +8642,7 @@ var AccordionRoot = React66.forwardRef(
|
|
|
8642
8642
|
},
|
|
8643
8643
|
[openValues, multiple, isControlled, onValueChange]
|
|
8644
8644
|
);
|
|
8645
|
-
const ctx =
|
|
8645
|
+
const ctx = React65.useMemo(
|
|
8646
8646
|
() => ({ openValues, toggle, disabled, size }),
|
|
8647
8647
|
[openValues, toggle, disabled, size]
|
|
8648
8648
|
);
|
|
@@ -8772,7 +8772,7 @@ function buildDelayedEntering(variant, delayMs) {
|
|
|
8772
8772
|
b.delay(delayMs);
|
|
8773
8773
|
return b;
|
|
8774
8774
|
}
|
|
8775
|
-
var Animated5 =
|
|
8775
|
+
var Animated5 = React65.forwardRef(
|
|
8776
8776
|
(_a, ref) => {
|
|
8777
8777
|
var _b = _a, { variant = "fade", delay, exit = true, children } = _b, props = __objRest(_b, ["variant", "delay", "exit", "children"]);
|
|
8778
8778
|
const delayMs = delay !== void 0 && delay > 0 ? Math.round(delay * 1e3) : 0;
|
|
@@ -8790,7 +8790,7 @@ var Animated5 = React66.forwardRef(
|
|
|
8790
8790
|
}
|
|
8791
8791
|
);
|
|
8792
8792
|
Animated5.displayName = "Animated";
|
|
8793
|
-
var DrawerContext =
|
|
8793
|
+
var DrawerContext = React65.createContext({
|
|
8794
8794
|
isOpen: false,
|
|
8795
8795
|
modalVisible: false,
|
|
8796
8796
|
openDrawer: () => {
|
|
@@ -8800,9 +8800,9 @@ var DrawerContext = React66.createContext({
|
|
|
8800
8800
|
onExitComplete: () => {
|
|
8801
8801
|
}
|
|
8802
8802
|
});
|
|
8803
|
-
var useDrawerContext = () =>
|
|
8803
|
+
var useDrawerContext = () => React65.useContext(DrawerContext);
|
|
8804
8804
|
var FADE_DURATION = 220;
|
|
8805
|
-
var DrawerOverlay =
|
|
8805
|
+
var DrawerOverlay = React65.forwardRef(({ accessible = false }, _ref) => {
|
|
8806
8806
|
const theme2 = useTheme();
|
|
8807
8807
|
const { isOpen, closeDrawer } = useDrawerContext();
|
|
8808
8808
|
const opacity = useRef(new Animated.Value(0)).current;
|
|
@@ -8836,14 +8836,14 @@ var DrawerOverlay = React66.forwardRef(({ accessible = false }, _ref) => {
|
|
|
8836
8836
|
);
|
|
8837
8837
|
});
|
|
8838
8838
|
DrawerOverlay.displayName = "Drawer.Overlay";
|
|
8839
|
-
var DrawerDragContext =
|
|
8840
|
-
var useDrawerDragContext = () =>
|
|
8841
|
-
var DrawerMeasureContext =
|
|
8842
|
-
var useDrawerMeasureContext = () =>
|
|
8843
|
-
var DrawerFooterContext =
|
|
8844
|
-
var useDrawerFooterContext = () =>
|
|
8845
|
-
var DrawerHeaderContext =
|
|
8846
|
-
var useDrawerHeaderContext = () =>
|
|
8839
|
+
var DrawerDragContext = React65.createContext(null);
|
|
8840
|
+
var useDrawerDragContext = () => React65.useContext(DrawerDragContext);
|
|
8841
|
+
var DrawerMeasureContext = createContext(null);
|
|
8842
|
+
var useDrawerMeasureContext = () => useContext(DrawerMeasureContext);
|
|
8843
|
+
var DrawerFooterContext = React65.createContext(false);
|
|
8844
|
+
var useDrawerFooterContext = () => React65.useContext(DrawerFooterContext);
|
|
8845
|
+
var DrawerHeaderContext = React65.createContext(null);
|
|
8846
|
+
var useDrawerHeaderContext = () => React65.useContext(DrawerHeaderContext);
|
|
8847
8847
|
var OPEN_DURATION = 320;
|
|
8848
8848
|
var CLOSE_DURATION = 220;
|
|
8849
8849
|
var DISMISS_THRESHOLD = 80;
|
|
@@ -8879,7 +8879,7 @@ var StyledPanel2 = styled50(View)(
|
|
|
8879
8879
|
overflow: "hidden"
|
|
8880
8880
|
})
|
|
8881
8881
|
);
|
|
8882
|
-
var DrawerContent =
|
|
8882
|
+
var DrawerContent = React65.forwardRef(
|
|
8883
8883
|
(_a, ref) => {
|
|
8884
8884
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
8885
8885
|
var _a2;
|
|
@@ -8901,6 +8901,9 @@ var DrawerContent = React66.forwardRef(
|
|
|
8901
8901
|
const isOpenRef = useRef(isOpen);
|
|
8902
8902
|
const activeAnim = useRef(null);
|
|
8903
8903
|
const [panelHeight, setPanelHeight] = useState(0);
|
|
8904
|
+
const chromeRef = useRef(0);
|
|
8905
|
+
const bodyContentRef = useRef(0);
|
|
8906
|
+
const firstNaturalRef = useRef(0);
|
|
8904
8907
|
useEffect(() => {
|
|
8905
8908
|
const id = translateY.addListener(({ value }) => {
|
|
8906
8909
|
translateYValue.current = value;
|
|
@@ -8959,61 +8962,59 @@ var DrawerContent = React66.forwardRef(
|
|
|
8959
8962
|
runExit();
|
|
8960
8963
|
}
|
|
8961
8964
|
}, [isOpen, runEntry, runExit]);
|
|
8962
|
-
const
|
|
8963
|
-
({ nativeEvent }) => {
|
|
8964
|
-
if (entryRanRef.current) return;
|
|
8965
|
-
const h = nativeEvent.layout.height;
|
|
8966
|
-
const capped = Math.min(h, maxHeight);
|
|
8967
|
-
if (capped <= 0) return;
|
|
8968
|
-
if (capped !== panelHeightRef.current) {
|
|
8969
|
-
setPanelHeight(capped);
|
|
8970
|
-
panelHeightRef.current = capped;
|
|
8971
|
-
}
|
|
8972
|
-
if (isOpenRef.current) {
|
|
8973
|
-
runEntry();
|
|
8974
|
-
}
|
|
8975
|
-
},
|
|
8976
|
-
[runEntry, maxHeight]
|
|
8977
|
-
);
|
|
8978
|
-
const chromeRef = useRef(0);
|
|
8979
|
-
const bodyContentRef = useRef(0);
|
|
8980
|
-
const applyDesiredHeight = useCallback(() => {
|
|
8965
|
+
const applyRefit = useCallback(() => {
|
|
8981
8966
|
const chrome = chromeRef.current;
|
|
8982
8967
|
const content = bodyContentRef.current;
|
|
8983
|
-
|
|
8984
|
-
if (chrome <= 0 || content <= 0 || current <= 0) return;
|
|
8968
|
+
if (chrome <= 0 || content <= 0) return;
|
|
8985
8969
|
const desired = Math.min(
|
|
8986
8970
|
chrome + Math.min(content, bodyMaxHeight),
|
|
8987
8971
|
maxHeight
|
|
8988
8972
|
);
|
|
8989
|
-
if (Math.abs(desired - current) > 1) {
|
|
8973
|
+
if (Math.abs(desired - panelHeightRef.current) > 1) {
|
|
8990
8974
|
panelHeightRef.current = desired;
|
|
8991
8975
|
setPanelHeight(desired);
|
|
8992
8976
|
}
|
|
8993
|
-
}, [
|
|
8994
|
-
const
|
|
8995
|
-
(
|
|
8996
|
-
|
|
8997
|
-
|
|
8998
|
-
|
|
8999
|
-
|
|
9000
|
-
|
|
9001
|
-
}
|
|
9002
|
-
applyDesiredHeight();
|
|
9003
|
-
},
|
|
9004
|
-
[applyDesiredHeight]
|
|
9005
|
-
);
|
|
8977
|
+
}, [bodyMaxHeight, maxHeight]);
|
|
8978
|
+
const lockChrome = useCallback(() => {
|
|
8979
|
+
if (chromeRef.current > 0) return;
|
|
8980
|
+
const natural = firstNaturalRef.current;
|
|
8981
|
+
const content = bodyContentRef.current;
|
|
8982
|
+
if (natural <= 0 || content <= 0) return;
|
|
8983
|
+
chromeRef.current = natural - Math.min(content, bodyMaxHeight);
|
|
8984
|
+
}, [bodyMaxHeight]);
|
|
9006
8985
|
const setBodyContentHeight = useCallback(
|
|
9007
|
-
(
|
|
9008
|
-
if (
|
|
9009
|
-
bodyContentRef.current =
|
|
9010
|
-
|
|
8986
|
+
(height) => {
|
|
8987
|
+
if (height <= 0) return;
|
|
8988
|
+
bodyContentRef.current = height;
|
|
8989
|
+
lockChrome();
|
|
8990
|
+
applyRefit();
|
|
9011
8991
|
},
|
|
9012
|
-
[
|
|
8992
|
+
[lockChrome, applyRefit]
|
|
9013
8993
|
);
|
|
9014
8994
|
const measureContextValue = useMemo(
|
|
9015
|
-
() => ({
|
|
9016
|
-
[
|
|
8995
|
+
() => ({ setBodyContentHeight }),
|
|
8996
|
+
[setBodyContentHeight]
|
|
8997
|
+
);
|
|
8998
|
+
const onLayout = useCallback(
|
|
8999
|
+
({ nativeEvent }) => {
|
|
9000
|
+
const h = nativeEvent.layout.height;
|
|
9001
|
+
const capped = Math.min(h, maxHeight);
|
|
9002
|
+
if (capped <= 0) return;
|
|
9003
|
+
if (entryRanRef.current) return;
|
|
9004
|
+
if (chromeRef.current <= 0) {
|
|
9005
|
+
firstNaturalRef.current = h;
|
|
9006
|
+
lockChrome();
|
|
9007
|
+
}
|
|
9008
|
+
if (capped !== panelHeightRef.current) {
|
|
9009
|
+
panelHeightRef.current = capped;
|
|
9010
|
+
setPanelHeight(capped);
|
|
9011
|
+
}
|
|
9012
|
+
if (isOpenRef.current) {
|
|
9013
|
+
runEntry();
|
|
9014
|
+
}
|
|
9015
|
+
applyRefit();
|
|
9016
|
+
},
|
|
9017
|
+
[runEntry, maxHeight, lockChrome, applyRefit]
|
|
9017
9018
|
);
|
|
9018
9019
|
const panResponder = useRef(
|
|
9019
9020
|
PanResponder.create({
|
|
@@ -9073,11 +9074,11 @@ var DrawerContent = React66.forwardRef(
|
|
|
9073
9074
|
() => ({ panHandlers: panResponder.panHandlers }),
|
|
9074
9075
|
[panResponder.panHandlers]
|
|
9075
9076
|
);
|
|
9076
|
-
const hasFooter =
|
|
9077
|
-
(child) =>
|
|
9077
|
+
const hasFooter = React65.Children.toArray(children).some(
|
|
9078
|
+
(child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Footer"
|
|
9078
9079
|
);
|
|
9079
|
-
const headerChild =
|
|
9080
|
-
(child) =>
|
|
9080
|
+
const headerChild = React65.Children.toArray(children).find(
|
|
9081
|
+
(child) => React65.isValidElement(child) && child.type.displayName === "Drawer.Header"
|
|
9081
9082
|
);
|
|
9082
9083
|
const headerContextValue = headerChild != null ? {
|
|
9083
9084
|
variant: (_a2 = headerChild.props.variant) != null ? _a2 : "titleAndText"
|
|
@@ -9140,7 +9141,7 @@ var StyledBar = styled50(View)(({ barWidth, barHeight, barBorderRadius, barColor
|
|
|
9140
9141
|
borderRadius: barBorderRadius,
|
|
9141
9142
|
backgroundColor: barColor
|
|
9142
9143
|
}));
|
|
9143
|
-
var DrawerGrabber =
|
|
9144
|
+
var DrawerGrabber = React65.forwardRef(
|
|
9144
9145
|
(props, ref) => {
|
|
9145
9146
|
var _a;
|
|
9146
9147
|
const theme2 = useTheme();
|
|
@@ -9168,7 +9169,7 @@ var DrawerGrabber = React66.forwardRef(
|
|
|
9168
9169
|
);
|
|
9169
9170
|
DrawerGrabber.displayName = "Drawer.Grabber";
|
|
9170
9171
|
var parseTokenValue24 = (value) => parseFloat(value);
|
|
9171
|
-
var DrawerClose =
|
|
9172
|
+
var DrawerClose = React65.forwardRef(
|
|
9172
9173
|
(_a, ref) => {
|
|
9173
9174
|
var _b = _a, { "aria-label": ariaLabel = "Close" } = _b, props = __objRest(_b, ["aria-label"]);
|
|
9174
9175
|
const theme2 = useTheme();
|
|
@@ -9281,8 +9282,8 @@ var StyledTitleContent = styled50(View)(
|
|
|
9281
9282
|
function splitChildren(children) {
|
|
9282
9283
|
let closeChild = null;
|
|
9283
9284
|
const otherChildren = [];
|
|
9284
|
-
|
|
9285
|
-
if (
|
|
9285
|
+
React65.Children.forEach(children, (child) => {
|
|
9286
|
+
if (React65.isValidElement(child) && child.type === DrawerClose) {
|
|
9286
9287
|
closeChild = child;
|
|
9287
9288
|
} else {
|
|
9288
9289
|
otherChildren.push(child);
|
|
@@ -9290,7 +9291,7 @@ function splitChildren(children) {
|
|
|
9290
9291
|
});
|
|
9291
9292
|
return { closeChild, otherChildren };
|
|
9292
9293
|
}
|
|
9293
|
-
var DrawerHeader =
|
|
9294
|
+
var DrawerHeader = React65.forwardRef(
|
|
9294
9295
|
(_a, ref) => {
|
|
9295
9296
|
var _b = _a, { variant = "titleAndText", imageSource, children } = _b, props = __objRest(_b, ["variant", "imageSource", "children"]);
|
|
9296
9297
|
var _a2, _b2, _c, _d, _e, _f;
|
|
@@ -9377,7 +9378,7 @@ var DrawerHeader = React66.forwardRef(
|
|
|
9377
9378
|
}
|
|
9378
9379
|
);
|
|
9379
9380
|
DrawerHeader.displayName = "Drawer.Header";
|
|
9380
|
-
var DrawerTitle =
|
|
9381
|
+
var DrawerTitle = React65.forwardRef(
|
|
9381
9382
|
(_a, ref) => {
|
|
9382
9383
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
9383
9384
|
const theme2 = useTheme();
|
|
@@ -9393,7 +9394,7 @@ var DrawerTitle = React66.forwardRef(
|
|
|
9393
9394
|
}
|
|
9394
9395
|
);
|
|
9395
9396
|
DrawerTitle.displayName = "Drawer.Title";
|
|
9396
|
-
var DrawerDescription =
|
|
9397
|
+
var DrawerDescription = React65.forwardRef(
|
|
9397
9398
|
(_a, ref) => {
|
|
9398
9399
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
9399
9400
|
const theme2 = useTheme();
|
|
@@ -9415,32 +9416,20 @@ var StyledScrollView = styled50(ScrollView)(
|
|
|
9415
9416
|
bodyPaddingHorizontal,
|
|
9416
9417
|
bodyPaddingRight,
|
|
9417
9418
|
bodyGap,
|
|
9419
|
+
bodyMaxHeight,
|
|
9418
9420
|
bodyPaddingBottom
|
|
9419
9421
|
}) => ({
|
|
9420
|
-
// flex: 1 fills the bounded panel so the ScrollView can scroll. The panel
|
|
9421
|
-
// (DrawerContent) is the single height authority — the body must NOT set
|
|
9422
|
-
// its own maxHeight, or it would cap independently of the panel and corrupt
|
|
9423
|
-
// the panel's chrome measurement.
|
|
9424
9422
|
flex: 1,
|
|
9425
9423
|
paddingLeft: bodyPaddingHorizontal,
|
|
9426
9424
|
paddingRight: bodyPaddingRight,
|
|
9427
9425
|
gap: bodyGap,
|
|
9426
|
+
maxHeight: bodyMaxHeight,
|
|
9428
9427
|
paddingBottom: bodyPaddingBottom
|
|
9429
9428
|
})
|
|
9430
9429
|
);
|
|
9431
|
-
var DrawerBody =
|
|
9430
|
+
var DrawerBody = React65.forwardRef(
|
|
9432
9431
|
(_a, ref) => {
|
|
9433
|
-
var _b = _a, {
|
|
9434
|
-
children,
|
|
9435
|
-
contentContainerStyle,
|
|
9436
|
-
onLayout,
|
|
9437
|
-
onContentSizeChange
|
|
9438
|
-
} = _b, props = __objRest(_b, [
|
|
9439
|
-
"children",
|
|
9440
|
-
"contentContainerStyle",
|
|
9441
|
-
"onLayout",
|
|
9442
|
-
"onContentSizeChange"
|
|
9443
|
-
]);
|
|
9432
|
+
var _b = _a, { children, contentContainerStyle, onContentSizeChange } = _b, props = __objRest(_b, ["children", "contentContainerStyle", "onContentSizeChange"]);
|
|
9444
9433
|
const theme2 = useTheme();
|
|
9445
9434
|
const { spacing } = theme2.tokens.components.drawer;
|
|
9446
9435
|
const { buttons } = theme2.tokens.components;
|
|
@@ -9448,16 +9437,7 @@ var DrawerBody = React66.forwardRef(
|
|
|
9448
9437
|
const headerContext = useDrawerHeaderContext();
|
|
9449
9438
|
const footerContext = useDrawerFooterContext();
|
|
9450
9439
|
const measureContext = useDrawerMeasureContext();
|
|
9451
|
-
const
|
|
9452
|
-
const horizontalPadding = parseTokenValue26(content.slot.horizontalPadding);
|
|
9453
|
-
const topPadding = parseTokenValue26(content.slot.verticalPadding);
|
|
9454
|
-
const handleLayout = useCallback(
|
|
9455
|
-
(event) => {
|
|
9456
|
-
measureContext == null ? void 0 : measureContext.setBodyFrameHeight(event.nativeEvent.layout.height);
|
|
9457
|
-
onLayout == null ? void 0 : onLayout(event);
|
|
9458
|
-
},
|
|
9459
|
-
[measureContext, onLayout]
|
|
9460
|
-
);
|
|
9440
|
+
const { height: windowHeight } = useWindowDimensions();
|
|
9461
9441
|
const handleContentSizeChange = useCallback(
|
|
9462
9442
|
(width, height) => {
|
|
9463
9443
|
measureContext == null ? void 0 : measureContext.setBodyContentHeight(height);
|
|
@@ -9465,6 +9445,10 @@ var DrawerBody = React66.forwardRef(
|
|
|
9465
9445
|
},
|
|
9466
9446
|
[measureContext, onContentSizeChange]
|
|
9467
9447
|
);
|
|
9448
|
+
const gap = parseTokenValue26(content.slot.gap);
|
|
9449
|
+
const horizontalPadding = parseTokenValue26(content.slot.horizontalPadding);
|
|
9450
|
+
const topPadding = parseTokenValue26(content.slot.verticalPadding);
|
|
9451
|
+
const bodyMaxHeight = windowHeight - 300;
|
|
9468
9452
|
const paddingRight = headerContext === null ? parseTokenValue26(spacing.close.right.md) + parseTokenValue26(buttons.size.sm.height) : horizontalPadding;
|
|
9469
9453
|
const bodyPaddingBottom = !footerContext ? parseTokenValue26(theme2.tokens.semantics.dimensions.spacing["2xl"]) : 0;
|
|
9470
9454
|
return /* @__PURE__ */ jsx(
|
|
@@ -9474,8 +9458,8 @@ var DrawerBody = React66.forwardRef(
|
|
|
9474
9458
|
bodyPaddingHorizontal: horizontalPadding,
|
|
9475
9459
|
bodyPaddingRight: paddingRight,
|
|
9476
9460
|
bodyGap: gap,
|
|
9461
|
+
bodyMaxHeight,
|
|
9477
9462
|
bodyPaddingBottom,
|
|
9478
|
-
onLayout: handleLayout,
|
|
9479
9463
|
onContentSizeChange: handleContentSizeChange,
|
|
9480
9464
|
contentContainerStyle: [
|
|
9481
9465
|
{
|
|
@@ -9499,7 +9483,7 @@ var StyledFooter = styled50(View)(({ footerPaddingTop, footerPaddingHorizontal,
|
|
|
9499
9483
|
paddingHorizontal: footerPaddingHorizontal,
|
|
9500
9484
|
paddingBottom: footerPaddingBottom
|
|
9501
9485
|
}));
|
|
9502
|
-
var DrawerFooter =
|
|
9486
|
+
var DrawerFooter = React65.forwardRef(
|
|
9503
9487
|
(_a, ref) => {
|
|
9504
9488
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
9505
9489
|
const theme2 = useTheme();
|
|
@@ -9521,7 +9505,7 @@ var DrawerFooter = React66.forwardRef(
|
|
|
9521
9505
|
}
|
|
9522
9506
|
);
|
|
9523
9507
|
DrawerFooter.displayName = "Drawer.Footer";
|
|
9524
|
-
var DrawerRoot =
|
|
9508
|
+
var DrawerRoot = React65.forwardRef(
|
|
9525
9509
|
(_a, ref) => {
|
|
9526
9510
|
var _b = _a, {
|
|
9527
9511
|
open: controlledOpen,
|
|
@@ -9562,15 +9546,15 @@ var DrawerRoot = React66.forwardRef(
|
|
|
9562
9546
|
}
|
|
9563
9547
|
);
|
|
9564
9548
|
DrawerRoot.displayName = "Drawer";
|
|
9565
|
-
var DrawerTrigger =
|
|
9549
|
+
var DrawerTrigger = React65.forwardRef(
|
|
9566
9550
|
({ children }, ref) => {
|
|
9567
|
-
const { openDrawer } =
|
|
9551
|
+
const { openDrawer } = React65.useContext(DrawerContext);
|
|
9568
9552
|
return /* @__PURE__ */ jsx(Slot, { ref, onPress: openDrawer, children });
|
|
9569
9553
|
}
|
|
9570
9554
|
);
|
|
9571
9555
|
DrawerTrigger.displayName = "Drawer.Trigger";
|
|
9572
9556
|
var DrawerPortal = ({ children, topContent }) => {
|
|
9573
|
-
const { modalVisible, closeDrawer } =
|
|
9557
|
+
const { modalVisible, closeDrawer } = React65.useContext(DrawerContext);
|
|
9574
9558
|
if (!modalVisible) return null;
|
|
9575
9559
|
return /* @__PURE__ */ jsx(
|
|
9576
9560
|
Modal,
|
|
@@ -9641,7 +9625,7 @@ var StyledButtonGroup = styled50(View)(({ groupDirection, groupAlign, groupJusti
|
|
|
9641
9625
|
gap: groupGap,
|
|
9642
9626
|
width: "100%"
|
|
9643
9627
|
}, groupDirection === "column" ? { maxWidth: 520 } : {}));
|
|
9644
|
-
var ButtonDock =
|
|
9628
|
+
var ButtonDock = React65.forwardRef(
|
|
9645
9629
|
(_a, ref) => {
|
|
9646
9630
|
var _b = _a, { variant = "stacked", leadingContent, description, children } = _b, rest = __objRest(_b, ["variant", "leadingContent", "description", "children"]);
|
|
9647
9631
|
const theme2 = useTheme();
|
|
@@ -9721,7 +9705,7 @@ var StyledButtonRow = styled50(View)(({ rowDirection, rowAlign, rowGap }) => __s
|
|
|
9721
9705
|
var StyledChildSlot = styled50(View)(
|
|
9722
9706
|
({ slotInline }) => __spreadValues({}, slotInline ? { flex: 1, minWidth: 0 } : { width: "100%", alignSelf: "stretch" })
|
|
9723
9707
|
);
|
|
9724
|
-
var ButtonGroup =
|
|
9708
|
+
var ButtonGroup = React65.forwardRef(
|
|
9725
9709
|
(_a, ref) => {
|
|
9726
9710
|
var _b = _a, { layout = "stacked", description, children } = _b, rest = __objRest(_b, ["layout", "description", "children"]);
|
|
9727
9711
|
const theme2 = useTheme();
|
|
@@ -9743,9 +9727,9 @@ var ButtonGroup = React66.forwardRef(
|
|
|
9743
9727
|
rowGap: parseTokenValue29(
|
|
9744
9728
|
isInline ? buttonGroup.spacing.sideBySide.gap : buttonGroup.spacing.stacked.gap
|
|
9745
9729
|
),
|
|
9746
|
-
children:
|
|
9747
|
-
if (!
|
|
9748
|
-
return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children:
|
|
9730
|
+
children: React65.Children.map(children, (child, index) => {
|
|
9731
|
+
if (!React65.isValidElement(child)) return child;
|
|
9732
|
+
return /* @__PURE__ */ jsx(StyledChildSlot, { slotInline: isInline, children: React65.cloneElement(
|
|
9749
9733
|
child,
|
|
9750
9734
|
{
|
|
9751
9735
|
fullWidth: true
|
|
@@ -9820,7 +9804,7 @@ var StyledIllustration = styled50(View)(({ illustrationSize }) => ({
|
|
|
9820
9804
|
height: illustrationSize,
|
|
9821
9805
|
overflow: "hidden"
|
|
9822
9806
|
}));
|
|
9823
|
-
var Checkbox =
|
|
9807
|
+
var Checkbox = React65.forwardRef(
|
|
9824
9808
|
(_a, ref) => {
|
|
9825
9809
|
var _b = _a, {
|
|
9826
9810
|
variant = "standalone",
|
|
@@ -9847,7 +9831,7 @@ var Checkbox = React66.forwardRef(
|
|
|
9847
9831
|
const { checkbox } = theme2.tokens.components;
|
|
9848
9832
|
const { dimensions: dimensions3 } = theme2.tokens.semantics;
|
|
9849
9833
|
const isControlled = controlledChecked !== void 0;
|
|
9850
|
-
const [internalChecked, setInternalChecked] =
|
|
9834
|
+
const [internalChecked, setInternalChecked] = React65.useState(defaultChecked);
|
|
9851
9835
|
const isChecked = isControlled ? controlledChecked : internalChecked;
|
|
9852
9836
|
const handleCheckedChange = (checked) => {
|
|
9853
9837
|
if (!isControlled) {
|
|
@@ -9942,7 +9926,7 @@ var StyledGroup = styled50(View)(({ groupDirection, groupGap }) => ({
|
|
|
9942
9926
|
flexDirection: groupDirection,
|
|
9943
9927
|
gap: groupGap
|
|
9944
9928
|
}));
|
|
9945
|
-
var CheckboxGroup =
|
|
9929
|
+
var CheckboxGroup = React65.forwardRef(
|
|
9946
9930
|
(_a, ref) => {
|
|
9947
9931
|
var _b = _a, { orientation = "vertical", children } = _b, rest = __objRest(_b, ["orientation", "children"]);
|
|
9948
9932
|
const theme2 = useTheme();
|
|
@@ -9960,7 +9944,7 @@ var CheckboxGroup = React66.forwardRef(
|
|
|
9960
9944
|
}
|
|
9961
9945
|
);
|
|
9962
9946
|
CheckboxGroup.displayName = "CheckboxGroup";
|
|
9963
|
-
var CopyFieldInput =
|
|
9947
|
+
var CopyFieldInput = React65.forwardRef(
|
|
9964
9948
|
(_a, ref) => {
|
|
9965
9949
|
var _b = _a, {
|
|
9966
9950
|
onCopy,
|
|
@@ -9979,19 +9963,19 @@ var CopyFieldInput = React66.forwardRef(
|
|
|
9979
9963
|
"editable",
|
|
9980
9964
|
"defaultValue"
|
|
9981
9965
|
]);
|
|
9982
|
-
const [internalValue, setInternalValue] =
|
|
9966
|
+
const [internalValue, setInternalValue] = React65.useState(
|
|
9983
9967
|
typeof defaultValue === "string" ? defaultValue : ""
|
|
9984
9968
|
);
|
|
9985
|
-
const [copied, setCopied] =
|
|
9986
|
-
const timeoutRef =
|
|
9969
|
+
const [copied, setCopied] = React65.useState(false);
|
|
9970
|
+
const timeoutRef = React65.useRef(
|
|
9987
9971
|
void 0
|
|
9988
9972
|
);
|
|
9989
|
-
|
|
9973
|
+
React65.useEffect(() => {
|
|
9990
9974
|
if (defaultValue !== void 0 && value === void 0) {
|
|
9991
9975
|
setInternalValue(typeof defaultValue === "string" ? defaultValue : "");
|
|
9992
9976
|
}
|
|
9993
9977
|
}, [defaultValue, value]);
|
|
9994
|
-
|
|
9978
|
+
React65.useEffect(() => {
|
|
9995
9979
|
return () => {
|
|
9996
9980
|
if (timeoutRef.current) {
|
|
9997
9981
|
clearTimeout(timeoutRef.current);
|
|
@@ -10058,7 +10042,7 @@ var StyledRoot8 = styled50(View)(({ theme: theme2 }) => {
|
|
|
10058
10042
|
gap: parseTokenValue32(spacing.gap)
|
|
10059
10043
|
};
|
|
10060
10044
|
});
|
|
10061
|
-
var CopyFieldRoot =
|
|
10045
|
+
var CopyFieldRoot = React65.forwardRef(
|
|
10062
10046
|
(_a, ref) => {
|
|
10063
10047
|
var _b = _a, {
|
|
10064
10048
|
label,
|
|
@@ -10126,7 +10110,7 @@ var useCopyField = (options = {}) => {
|
|
|
10126
10110
|
onCopy: handleCopy
|
|
10127
10111
|
};
|
|
10128
10112
|
};
|
|
10129
|
-
var FilterTabContext =
|
|
10113
|
+
var FilterTabContext = React65.createContext({
|
|
10130
10114
|
size: "sm",
|
|
10131
10115
|
selectedValues: [],
|
|
10132
10116
|
toggle: () => {
|
|
@@ -10165,7 +10149,7 @@ var StyledItem2 = styled50(Pressable)(
|
|
|
10165
10149
|
flexShrink: 0
|
|
10166
10150
|
})
|
|
10167
10151
|
);
|
|
10168
|
-
var FilterTabItem =
|
|
10152
|
+
var FilterTabItem = React65.forwardRef(
|
|
10169
10153
|
(_a, ref) => {
|
|
10170
10154
|
var _b = _a, {
|
|
10171
10155
|
value,
|
|
@@ -10185,7 +10169,7 @@ var FilterTabItem = React66.forwardRef(
|
|
|
10185
10169
|
"accessibilityLabel"
|
|
10186
10170
|
]);
|
|
10187
10171
|
const theme2 = useTheme();
|
|
10188
|
-
const { size, selectedValues, toggle } =
|
|
10172
|
+
const { size, selectedValues, toggle } = React65.useContext(FilterTabContext);
|
|
10189
10173
|
const isSelected = selectedValues.includes(value);
|
|
10190
10174
|
const isIconOnly = !!IconOnlyIcon && !label;
|
|
10191
10175
|
const isActive = isSelected && !disabled;
|
|
@@ -10259,7 +10243,7 @@ var FilterTabItem = React66.forwardRef(
|
|
|
10259
10243
|
}
|
|
10260
10244
|
);
|
|
10261
10245
|
FilterTabItem.displayName = "FilterTab.Item";
|
|
10262
|
-
var FilterTabRoot =
|
|
10246
|
+
var FilterTabRoot = React65.forwardRef(
|
|
10263
10247
|
(_a, ref) => {
|
|
10264
10248
|
var _b = _a, {
|
|
10265
10249
|
size = "sm",
|
|
@@ -10279,9 +10263,9 @@ var FilterTabRoot = React66.forwardRef(
|
|
|
10279
10263
|
const theme2 = useTheme();
|
|
10280
10264
|
const { filterTabs } = theme2.tokens.components;
|
|
10281
10265
|
const isControlled = controlledValue !== void 0;
|
|
10282
|
-
const [internalValue, setInternalValue] =
|
|
10266
|
+
const [internalValue, setInternalValue] = React65.useState(defaultValue);
|
|
10283
10267
|
const selectedValues = isControlled ? controlledValue : internalValue;
|
|
10284
|
-
const toggle =
|
|
10268
|
+
const toggle = React65.useCallback(
|
|
10285
10269
|
(itemValue) => {
|
|
10286
10270
|
let next;
|
|
10287
10271
|
if (multiple) {
|
|
@@ -10294,7 +10278,7 @@ var FilterTabRoot = React66.forwardRef(
|
|
|
10294
10278
|
},
|
|
10295
10279
|
[selectedValues, isControlled, onValueChange, multiple]
|
|
10296
10280
|
);
|
|
10297
|
-
const contextValue =
|
|
10281
|
+
const contextValue = React65.useMemo(
|
|
10298
10282
|
() => ({ size, selectedValues, toggle }),
|
|
10299
10283
|
[size, selectedValues, toggle]
|
|
10300
10284
|
);
|
|
@@ -10364,7 +10348,7 @@ var StyledRow = styled50(View)(({ rowGap }) => ({
|
|
|
10364
10348
|
alignItems: "center",
|
|
10365
10349
|
gap: rowGap
|
|
10366
10350
|
}));
|
|
10367
|
-
var NumberFieldInput =
|
|
10351
|
+
var NumberFieldInput = React65.forwardRef(
|
|
10368
10352
|
(_a, ref) => {
|
|
10369
10353
|
var _b = _a, {
|
|
10370
10354
|
fieldSize = "lg",
|
|
@@ -10411,9 +10395,9 @@ var NumberFieldInput = React66.forwardRef(
|
|
|
10411
10395
|
const theme2 = useTheme();
|
|
10412
10396
|
const tokens3 = theme2.tokens.components.numberField;
|
|
10413
10397
|
const inputTokens3 = theme2.tokens.components.inputs;
|
|
10414
|
-
const [isFocused, setIsFocused] =
|
|
10415
|
-
const [isEdited, setIsEdited] =
|
|
10416
|
-
const initialValueRef =
|
|
10398
|
+
const [isFocused, setIsFocused] = React65.useState(false);
|
|
10399
|
+
const [isEdited, setIsEdited] = React65.useState(false);
|
|
10400
|
+
const initialValueRef = React65.useRef((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
|
|
10417
10401
|
const isLarge = fieldSize === "lg";
|
|
10418
10402
|
const sizeTokens = isLarge ? tokens3.spacing.large : tokens3.spacing.small;
|
|
10419
10403
|
const buttonSize = isLarge ? "lg" : "sm";
|
|
@@ -10430,14 +10414,14 @@ var NumberFieldInput = React66.forwardRef(
|
|
|
10430
10414
|
if (isEdited) return tokens3.colour.field.border.edited;
|
|
10431
10415
|
return tokens3.colour.field.border.default;
|
|
10432
10416
|
};
|
|
10433
|
-
const handleFocus =
|
|
10417
|
+
const handleFocus = React65.useCallback(
|
|
10434
10418
|
(e) => {
|
|
10435
10419
|
setIsFocused(true);
|
|
10436
10420
|
onFocus == null ? void 0 : onFocus(e);
|
|
10437
10421
|
},
|
|
10438
10422
|
[onFocus]
|
|
10439
10423
|
);
|
|
10440
|
-
const handleBlur =
|
|
10424
|
+
const handleBlur = React65.useCallback(
|
|
10441
10425
|
(e) => {
|
|
10442
10426
|
setIsFocused(false);
|
|
10443
10427
|
if (value != null && onChangeText) {
|
|
@@ -10456,7 +10440,7 @@ var NumberFieldInput = React66.forwardRef(
|
|
|
10456
10440
|
const numericValue = value != null ? Number(value) : Number(defaultValue != null ? defaultValue : 0);
|
|
10457
10441
|
const isAtMin = min != null && numericValue <= min;
|
|
10458
10442
|
const isAtMax = max != null && numericValue >= max;
|
|
10459
|
-
const handleChangeText =
|
|
10443
|
+
const handleChangeText = React65.useCallback(
|
|
10460
10444
|
(text) => {
|
|
10461
10445
|
setIsEdited(text !== initialValueRef.current);
|
|
10462
10446
|
onChangeText == null ? void 0 : onChangeText(text);
|
|
@@ -10555,7 +10539,7 @@ var StyledRoot10 = styled50(View)(({ rootGap, fullWidth }) => __spreadValues({
|
|
|
10555
10539
|
var StyledLabelGroup = styled50(View)(({ labelGap }) => ({
|
|
10556
10540
|
gap: labelGap
|
|
10557
10541
|
}));
|
|
10558
|
-
var NumberField =
|
|
10542
|
+
var NumberField = React65.forwardRef(
|
|
10559
10543
|
(_a, ref) => {
|
|
10560
10544
|
var _b = _a, {
|
|
10561
10545
|
label,
|
|
@@ -10670,9 +10654,9 @@ var NumberField = React66.forwardRef(
|
|
|
10670
10654
|
);
|
|
10671
10655
|
NumberField.displayName = "NumberField";
|
|
10672
10656
|
var HIT_SLOP = 12;
|
|
10673
|
-
var PasswordFieldInput =
|
|
10657
|
+
var PasswordFieldInput = React65.forwardRef((_a, ref) => {
|
|
10674
10658
|
var _b = _a, { onValueChange, value, state, editable } = _b, inputFieldProps = __objRest(_b, ["onValueChange", "value", "state", "editable"]);
|
|
10675
|
-
const [showPassword, setShowPassword] =
|
|
10659
|
+
const [showPassword, setShowPassword] = React65.useState(false);
|
|
10676
10660
|
const handleValueChange = (newValue) => {
|
|
10677
10661
|
onValueChange == null ? void 0 : onValueChange(newValue);
|
|
10678
10662
|
};
|
|
@@ -10717,7 +10701,7 @@ var StyledErrorRow2 = styled50(View)(({ gap }) => ({
|
|
|
10717
10701
|
alignItems: "center",
|
|
10718
10702
|
gap
|
|
10719
10703
|
}));
|
|
10720
|
-
var PasswordFieldError =
|
|
10704
|
+
var PasswordFieldError = React65.forwardRef((_a, ref) => {
|
|
10721
10705
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
10722
10706
|
const theme2 = useTheme();
|
|
10723
10707
|
const { listItem } = theme2.tokens.components.validationList;
|
|
@@ -10756,7 +10740,7 @@ var StyledRequirementItem = styled50(View)(
|
|
|
10756
10740
|
gap: itemGap
|
|
10757
10741
|
})
|
|
10758
10742
|
);
|
|
10759
|
-
var PasswordFieldRequirements =
|
|
10743
|
+
var PasswordFieldRequirements = React65.forwardRef((_a, ref) => {
|
|
10760
10744
|
var _b = _a, { requirements } = _b, rest = __objRest(_b, ["requirements"]);
|
|
10761
10745
|
const theme2 = useTheme();
|
|
10762
10746
|
const { listItem, list } = theme2.tokens.components.validationList;
|
|
@@ -10812,7 +10796,7 @@ var StyledRoot11 = styled50(View)(({ theme: theme2 }) => {
|
|
|
10812
10796
|
gap: parseTokenValue38(spacing.gap)
|
|
10813
10797
|
};
|
|
10814
10798
|
});
|
|
10815
|
-
var PasswordFieldRoot =
|
|
10799
|
+
var PasswordFieldRoot = React65.forwardRef(
|
|
10816
10800
|
(_a, ref) => {
|
|
10817
10801
|
var _b = _a, {
|
|
10818
10802
|
label,
|
|
@@ -10947,7 +10931,7 @@ var StyledIndicator = styled50(View)(({ indicatorBorderRadius, indicatorBgColor
|
|
|
10947
10931
|
backgroundColor: indicatorBgColor
|
|
10948
10932
|
}));
|
|
10949
10933
|
var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
|
|
10950
|
-
var Progress =
|
|
10934
|
+
var Progress = React65.forwardRef(
|
|
10951
10935
|
(_a, ref) => {
|
|
10952
10936
|
var _b = _a, {
|
|
10953
10937
|
value = 0,
|
|
@@ -11090,7 +11074,7 @@ var StyledTagWrapper = styled50(View)(
|
|
|
11090
11074
|
paddingTop: tagTopPadding
|
|
11091
11075
|
})
|
|
11092
11076
|
);
|
|
11093
|
-
var Radio =
|
|
11077
|
+
var Radio = React65.forwardRef(
|
|
11094
11078
|
(_a, ref) => {
|
|
11095
11079
|
var _b = _a, {
|
|
11096
11080
|
variant = "standalone",
|
|
@@ -11194,7 +11178,7 @@ var Radio = React66.forwardRef(
|
|
|
11194
11178
|
}
|
|
11195
11179
|
);
|
|
11196
11180
|
Radio.displayName = "Radio";
|
|
11197
|
-
var RadioTile =
|
|
11181
|
+
var RadioTile = React65.forwardRef(
|
|
11198
11182
|
(props, ref) => /* @__PURE__ */ jsx(Radio, __spreadProps(__spreadValues({ ref }, props), { variant: "tile" }))
|
|
11199
11183
|
);
|
|
11200
11184
|
RadioTile.displayName = "RadioTile";
|
|
@@ -11203,7 +11187,7 @@ var StyledRadioGroup = styled50(View)(({ groupDirection, groupGap }) => ({
|
|
|
11203
11187
|
flexDirection: groupDirection,
|
|
11204
11188
|
gap: groupGap
|
|
11205
11189
|
}));
|
|
11206
|
-
var RadioGroupRoot =
|
|
11190
|
+
var RadioGroupRoot = React65.forwardRef(
|
|
11207
11191
|
(_a, ref) => {
|
|
11208
11192
|
var _b = _a, {
|
|
11209
11193
|
name: _name,
|
|
@@ -11230,11 +11214,11 @@ var RadioGroupRoot = React66.forwardRef(
|
|
|
11230
11214
|
const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
|
|
11231
11215
|
const derivedDefaultValue = defaultValue != null ? defaultValue : optionsFirstValue;
|
|
11232
11216
|
const isControlled = value !== void 0;
|
|
11233
|
-
const [internalValue, setInternalValue] =
|
|
11217
|
+
const [internalValue, setInternalValue] = React65.useState(
|
|
11234
11218
|
derivedDefaultValue != null ? derivedDefaultValue : ""
|
|
11235
11219
|
);
|
|
11236
11220
|
const currentValue = isControlled ? value : internalValue;
|
|
11237
|
-
const handleSelect =
|
|
11221
|
+
const handleSelect = React65.useCallback(
|
|
11238
11222
|
(newValue) => {
|
|
11239
11223
|
if (!isControlled) {
|
|
11240
11224
|
setInternalValue(newValue);
|
|
@@ -11255,9 +11239,9 @@ var RadioGroupRoot = React66.forwardRef(
|
|
|
11255
11239
|
option.value
|
|
11256
11240
|
));
|
|
11257
11241
|
}
|
|
11258
|
-
return
|
|
11259
|
-
if (!
|
|
11260
|
-
return
|
|
11242
|
+
return React65.Children.map(children, (child) => {
|
|
11243
|
+
if (!React65.isValidElement(child)) return child;
|
|
11244
|
+
return React65.cloneElement(child, {
|
|
11261
11245
|
selected: currentValue === child.props.value,
|
|
11262
11246
|
onSelect: handleSelect,
|
|
11263
11247
|
disabled: disabled || child.props.disabled
|
|
@@ -11282,11 +11266,11 @@ var RadioGroup = Object.assign(RadioGroupRoot, {
|
|
|
11282
11266
|
Radio,
|
|
11283
11267
|
Tile: RadioTile
|
|
11284
11268
|
});
|
|
11285
|
-
var SearchFieldInput =
|
|
11269
|
+
var SearchFieldInput = React65.forwardRef((_a, ref) => {
|
|
11286
11270
|
var _b = _a, { onClear, onValueChange, value, state } = _b, inputFieldProps = __objRest(_b, ["onClear", "onValueChange", "value", "state"]);
|
|
11287
|
-
const [internalValue, setInternalValue] =
|
|
11288
|
-
const inputRef =
|
|
11289
|
-
|
|
11271
|
+
const [internalValue, setInternalValue] = React65.useState("");
|
|
11272
|
+
const inputRef = React65.useRef(null);
|
|
11273
|
+
React65.useImperativeHandle(ref, () => inputRef.current);
|
|
11290
11274
|
const handleValueChange = (newValue) => {
|
|
11291
11275
|
setInternalValue(newValue);
|
|
11292
11276
|
onValueChange == null ? void 0 : onValueChange(newValue);
|
|
@@ -11332,7 +11316,7 @@ var StyledRoot13 = styled50(View)(({ theme: theme2 }) => {
|
|
|
11332
11316
|
gap: parseTokenValue42(spacing.gap)
|
|
11333
11317
|
};
|
|
11334
11318
|
});
|
|
11335
|
-
var SearchFieldRoot =
|
|
11319
|
+
var SearchFieldRoot = React65.forwardRef(
|
|
11336
11320
|
(_a, ref) => {
|
|
11337
11321
|
var _b = _a, {
|
|
11338
11322
|
label,
|
|
@@ -11462,7 +11446,7 @@ var ScrollIndicatorGradient = ({
|
|
|
11462
11446
|
side,
|
|
11463
11447
|
color
|
|
11464
11448
|
}) => {
|
|
11465
|
-
const uid =
|
|
11449
|
+
const uid = React65.useId();
|
|
11466
11450
|
const gradientId = `sc-scroll-indicator-${side}-${uid}`;
|
|
11467
11451
|
const isTrailing = side === "trailing";
|
|
11468
11452
|
return /* @__PURE__ */ jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "none", children: /* @__PURE__ */ jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
|
|
@@ -11545,7 +11529,7 @@ var SegmentedControlItemBase = ({
|
|
|
11545
11529
|
}
|
|
11546
11530
|
);
|
|
11547
11531
|
};
|
|
11548
|
-
var SegmentedControlItem =
|
|
11532
|
+
var SegmentedControlItem = React65.forwardRef(
|
|
11549
11533
|
(_props, _ref) => {
|
|
11550
11534
|
return null;
|
|
11551
11535
|
}
|
|
@@ -11561,10 +11545,10 @@ var IntrinsicTrack = (_a) => {
|
|
|
11561
11545
|
"renderItems",
|
|
11562
11546
|
"forwardedRef"
|
|
11563
11547
|
]);
|
|
11564
|
-
const scrollRef =
|
|
11565
|
-
const [containerWidth, setContainerWidth] =
|
|
11566
|
-
const [contentWidth, setContentWidth] =
|
|
11567
|
-
const [scrollX, setScrollX] =
|
|
11548
|
+
const scrollRef = React65.useRef(null);
|
|
11549
|
+
const [containerWidth, setContainerWidth] = React65.useState(0);
|
|
11550
|
+
const [contentWidth, setContentWidth] = React65.useState(0);
|
|
11551
|
+
const [scrollX, setScrollX] = React65.useState(0);
|
|
11568
11552
|
const epsilon = 2;
|
|
11569
11553
|
const maxScroll = Math.max(0, contentWidth - containerWidth);
|
|
11570
11554
|
const canScrollLeft = scrollX > epsilon;
|
|
@@ -11660,7 +11644,7 @@ var IntrinsicTrack = (_a) => {
|
|
|
11660
11644
|
})
|
|
11661
11645
|
);
|
|
11662
11646
|
};
|
|
11663
|
-
var SegmentedControlRoot =
|
|
11647
|
+
var SegmentedControlRoot = React65.forwardRef(
|
|
11664
11648
|
(_a, ref) => {
|
|
11665
11649
|
var _b = _a, {
|
|
11666
11650
|
options,
|
|
@@ -11684,18 +11668,18 @@ var SegmentedControlRoot = React66.forwardRef(
|
|
|
11684
11668
|
const { spacing, borderRadius, colour } = theme2.tokens.components.segmentedControl;
|
|
11685
11669
|
const { dimensions: dimensions3 } = theme2.tokens.semantics;
|
|
11686
11670
|
const optionsFirstValue = (_a2 = options == null ? void 0 : options[0]) == null ? void 0 : _a2.value;
|
|
11687
|
-
const childrenArray =
|
|
11671
|
+
const childrenArray = React65.Children.toArray(children);
|
|
11688
11672
|
const firstChildValue = childrenArray.map((child) => {
|
|
11689
|
-
if (!
|
|
11673
|
+
if (!React65.isValidElement(child)) return void 0;
|
|
11690
11674
|
return child.props.value;
|
|
11691
11675
|
}).find((v) => typeof v === "string");
|
|
11692
11676
|
const derivedDefaultValue = (_b2 = defaultValue != null ? defaultValue : optionsFirstValue) != null ? _b2 : firstChildValue;
|
|
11693
11677
|
const isControlled = typeof value === "string";
|
|
11694
|
-
const [uncontrolledValue, setUncontrolledValue] =
|
|
11678
|
+
const [uncontrolledValue, setUncontrolledValue] = React65.useState(
|
|
11695
11679
|
() => derivedDefaultValue != null ? derivedDefaultValue : ""
|
|
11696
11680
|
);
|
|
11697
11681
|
const currentValue = isControlled ? value : uncontrolledValue;
|
|
11698
|
-
const handleSelect =
|
|
11682
|
+
const handleSelect = React65.useCallback(
|
|
11699
11683
|
(newValue) => {
|
|
11700
11684
|
if (!isControlled) {
|
|
11701
11685
|
setUncontrolledValue(newValue);
|
|
@@ -11721,7 +11705,7 @@ var SegmentedControlRoot = React66.forwardRef(
|
|
|
11721
11705
|
));
|
|
11722
11706
|
}
|
|
11723
11707
|
return childrenArray.map((child) => {
|
|
11724
|
-
if (!
|
|
11708
|
+
if (!React65.isValidElement(child)) return child;
|
|
11725
11709
|
const childProps = child.props;
|
|
11726
11710
|
return /* @__PURE__ */ jsx(
|
|
11727
11711
|
SegmentedControlItemBase,
|
|
@@ -11792,7 +11776,7 @@ var StyledArrowIcon = styled50(Animated.View)({
|
|
|
11792
11776
|
alignItems: "center",
|
|
11793
11777
|
justifyContent: "center"
|
|
11794
11778
|
});
|
|
11795
|
-
var SelectFieldTrigger =
|
|
11779
|
+
var SelectFieldTrigger = React65.forwardRef(
|
|
11796
11780
|
(_a, ref) => {
|
|
11797
11781
|
var _b = _a, {
|
|
11798
11782
|
state = "default",
|
|
@@ -11891,7 +11875,7 @@ var SelectFieldTrigger = React66.forwardRef(
|
|
|
11891
11875
|
}
|
|
11892
11876
|
);
|
|
11893
11877
|
SelectFieldTrigger.displayName = "SelectField.Trigger";
|
|
11894
|
-
var SelectFieldValue =
|
|
11878
|
+
var SelectFieldValue = React65.forwardRef(
|
|
11895
11879
|
(_a, ref) => {
|
|
11896
11880
|
var _b = _a, { placeholder } = _b, rest = __objRest(_b, ["placeholder"]);
|
|
11897
11881
|
const theme2 = useTheme();
|
|
@@ -11935,7 +11919,7 @@ var StyledContentInner = styled50(View)(({ theme: theme2 }) => {
|
|
|
11935
11919
|
overflow: "hidden"
|
|
11936
11920
|
};
|
|
11937
11921
|
});
|
|
11938
|
-
var SelectFieldContent =
|
|
11922
|
+
var SelectFieldContent = React65.forwardRef((_a, ref) => {
|
|
11939
11923
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
11940
11924
|
const theme2 = useTheme();
|
|
11941
11925
|
const { spacing } = theme2.tokens.components.inputs;
|
|
@@ -12010,7 +11994,7 @@ var StyledHintText = styled50(Text)(({ theme: theme2 }) => {
|
|
|
12010
11994
|
flexShrink: 0
|
|
12011
11995
|
};
|
|
12012
11996
|
});
|
|
12013
|
-
var SelectFieldItem =
|
|
11997
|
+
var SelectFieldItem = React65.forwardRef(
|
|
12014
11998
|
(_a, ref) => {
|
|
12015
11999
|
var _b = _a, { value, leadingIcon, hintText, children, disabled, isSelected } = _b, rest = __objRest(_b, ["value", "leadingIcon", "hintText", "children", "disabled", "isSelected"]);
|
|
12016
12000
|
const theme2 = useTheme();
|
|
@@ -12062,7 +12046,7 @@ var StyledRoot14 = styled50(View)(({ theme: theme2 }) => {
|
|
|
12062
12046
|
gap: parseTokenValue47(spacing.gap)
|
|
12063
12047
|
};
|
|
12064
12048
|
});
|
|
12065
|
-
var SelectFieldRoot =
|
|
12049
|
+
var SelectFieldRoot = React65.forwardRef(
|
|
12066
12050
|
(_a, ref) => {
|
|
12067
12051
|
var _b = _a, {
|
|
12068
12052
|
label,
|
|
@@ -12097,15 +12081,15 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
12097
12081
|
"searchPlaceholder",
|
|
12098
12082
|
"noResultsText"
|
|
12099
12083
|
]);
|
|
12100
|
-
const [isOpen, setIsOpen] =
|
|
12101
|
-
const [showContent, setShowContent] =
|
|
12102
|
-
const [internalValue, setInternalValue] =
|
|
12084
|
+
const [isOpen, setIsOpen] = React65.useState(false);
|
|
12085
|
+
const [showContent, setShowContent] = React65.useState(false);
|
|
12086
|
+
const [internalValue, setInternalValue] = React65.useState(
|
|
12103
12087
|
defaultValue != null ? defaultValue : null
|
|
12104
12088
|
);
|
|
12105
|
-
const [searchQuery, setSearchQuery] =
|
|
12106
|
-
const [clearKey, setClearKey] =
|
|
12107
|
-
const searchInputRef =
|
|
12108
|
-
|
|
12089
|
+
const [searchQuery, setSearchQuery] = React65.useState("");
|
|
12090
|
+
const [clearKey, setClearKey] = React65.useState(0);
|
|
12091
|
+
const searchInputRef = React65.useRef(null);
|
|
12092
|
+
React65.useEffect(() => {
|
|
12109
12093
|
if (!isOpen) {
|
|
12110
12094
|
setShowContent(false);
|
|
12111
12095
|
return;
|
|
@@ -12138,8 +12122,8 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
12138
12122
|
keyboardSub.remove();
|
|
12139
12123
|
};
|
|
12140
12124
|
}, [isOpen, searchable]);
|
|
12141
|
-
const isCompound =
|
|
12142
|
-
(child) =>
|
|
12125
|
+
const isCompound = React65.Children.toArray(children).some(
|
|
12126
|
+
(child) => React65.isValidElement(child) && child.type === SelectFieldContent
|
|
12143
12127
|
);
|
|
12144
12128
|
if (isCompound) {
|
|
12145
12129
|
return /* @__PURE__ */ jsx(StyledRoot14, __spreadProps(__spreadValues({ ref }, rest), { children }));
|
|
@@ -12154,11 +12138,11 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
12154
12138
|
if (!open) setSearchQuery("");
|
|
12155
12139
|
};
|
|
12156
12140
|
const currentValue = value !== void 0 ? value : internalValue;
|
|
12157
|
-
const allItems =
|
|
12141
|
+
const allItems = React65.Children.toArray(children);
|
|
12158
12142
|
const filteredItems = searchable ? allItems.filter((child) => {
|
|
12159
12143
|
var _a2;
|
|
12160
12144
|
if (!searchQuery) return true;
|
|
12161
|
-
if (
|
|
12145
|
+
if (React65.isValidElement(child) && child.type === SelectFieldItem) {
|
|
12162
12146
|
const label2 = String(
|
|
12163
12147
|
(_a2 = child.props.children) != null ? _a2 : ""
|
|
12164
12148
|
);
|
|
@@ -12227,10 +12211,10 @@ var SelectFieldRoot = React66.forwardRef(
|
|
|
12227
12211
|
] })),
|
|
12228
12212
|
showContent && /* @__PURE__ */ jsxs(SelectFieldContent, { children: [
|
|
12229
12213
|
filteredItems.map((child) => {
|
|
12230
|
-
if (
|
|
12214
|
+
if (React65.isValidElement(child) && child.type === SelectFieldItem) {
|
|
12231
12215
|
const selectedValue = currentValue && typeof currentValue === "object" && "value" in currentValue ? currentValue.value : currentValue;
|
|
12232
12216
|
const childProps = child.props;
|
|
12233
|
-
return
|
|
12217
|
+
return React65.cloneElement(
|
|
12234
12218
|
child,
|
|
12235
12219
|
{
|
|
12236
12220
|
isSelected: childProps.value === selectedValue
|
|
@@ -12397,7 +12381,7 @@ var useIconAnimation = () => {
|
|
|
12397
12381
|
iconAnimationStyles
|
|
12398
12382
|
};
|
|
12399
12383
|
};
|
|
12400
|
-
var NativeSelectPicker =
|
|
12384
|
+
var NativeSelectPicker = React65.forwardRef(
|
|
12401
12385
|
(_a, ref) => {
|
|
12402
12386
|
var _b = _a, {
|
|
12403
12387
|
items,
|
|
@@ -12556,7 +12540,7 @@ var StyledLabelSlot = styled50(View)(({ labelSlotGap }) => ({
|
|
|
12556
12540
|
gap: labelSlotGap,
|
|
12557
12541
|
flexShrink: 0
|
|
12558
12542
|
}));
|
|
12559
|
-
var Slider =
|
|
12543
|
+
var Slider = React65.forwardRef(
|
|
12560
12544
|
(_a, ref) => {
|
|
12561
12545
|
var _b = _a, {
|
|
12562
12546
|
value: controlledValue,
|
|
@@ -12591,7 +12575,7 @@ var Slider = React66.forwardRef(
|
|
|
12591
12575
|
const { slider, buttons } = theme2.tokens.components;
|
|
12592
12576
|
const { dimensions: dimensions3 } = theme2.tokens.semantics;
|
|
12593
12577
|
const isControlled = controlledValue !== void 0;
|
|
12594
|
-
const [internalValue, setInternalValue] =
|
|
12578
|
+
const [internalValue, setInternalValue] = React65.useState(defaultValue);
|
|
12595
12579
|
const currentValue = isControlled ? controlledValue : internalValue;
|
|
12596
12580
|
const thumbSize = parseTokenValue48(buttons.size.md.height);
|
|
12597
12581
|
const trackHeight = parseTokenValue48(slider.sizing.track.height);
|
|
@@ -12974,7 +12958,7 @@ var StyledCloseButton = styled50(Pressable)({
|
|
|
12974
12958
|
flexShrink: 0,
|
|
12975
12959
|
padding: 0
|
|
12976
12960
|
});
|
|
12977
|
-
var Notification =
|
|
12961
|
+
var Notification = React65.forwardRef(
|
|
12978
12962
|
(props, ref) => {
|
|
12979
12963
|
const _a = props, {
|
|
12980
12964
|
variant = "inline",
|
|
@@ -13318,7 +13302,7 @@ function NibTriangle({
|
|
|
13318
13302
|
}
|
|
13319
13303
|
);
|
|
13320
13304
|
}
|
|
13321
|
-
var Tooltip =
|
|
13305
|
+
var Tooltip = React65.forwardRef(
|
|
13322
13306
|
(_a, ref) => {
|
|
13323
13307
|
var _b = _a, { text, alignment = "middle", position = "bottom", children } = _b, props = __objRest(_b, ["text", "alignment", "position", "children"]);
|
|
13324
13308
|
const theme2 = useTheme();
|
|
@@ -13406,8 +13390,8 @@ var Tooltip = React66.forwardRef(
|
|
|
13406
13390
|
return bubble;
|
|
13407
13391
|
}
|
|
13408
13392
|
if (Platform.OS === "web") {
|
|
13409
|
-
const child =
|
|
13410
|
-
const trigger = child ?
|
|
13393
|
+
const child = React65.isValidElement(children) ? children : null;
|
|
13394
|
+
const trigger = child ? React65.cloneElement(child, {
|
|
13411
13395
|
onPress: () => {
|
|
13412
13396
|
var _a2, _b2;
|
|
13413
13397
|
(_b2 = (_a2 = child.props).onPress) == null ? void 0 : _b2.call(_a2);
|
|
@@ -13484,7 +13468,7 @@ var StyledInsightContent = styled50(View)(
|
|
|
13484
13468
|
gap: contentGap
|
|
13485
13469
|
})
|
|
13486
13470
|
);
|
|
13487
|
-
var MessageCardInsight =
|
|
13471
|
+
var MessageCardInsight = React65.forwardRef(
|
|
13488
13472
|
(_a, ref) => {
|
|
13489
13473
|
var _b = _a, { variant = "standalone", icon, illustration, title, children } = _b, rest = __objRest(_b, ["variant", "icon", "illustration", "title", "children"]);
|
|
13490
13474
|
const theme2 = useTheme();
|
|
@@ -13595,7 +13579,7 @@ var StyledBannerCopy = styled50(View)(({ copyGap }) => ({
|
|
|
13595
13579
|
gap: copyGap,
|
|
13596
13580
|
width: "100%"
|
|
13597
13581
|
}));
|
|
13598
|
-
var MessageCardBanner =
|
|
13582
|
+
var MessageCardBanner = React65.forwardRef(
|
|
13599
13583
|
(_a, ref) => {
|
|
13600
13584
|
var _b = _a, {
|
|
13601
13585
|
colourScheme = "primary",
|
|
@@ -13629,7 +13613,7 @@ var MessageCardBanner = React66.forwardRef(
|
|
|
13629
13613
|
accessibilityRole: "summary"
|
|
13630
13614
|
}, rest), {
|
|
13631
13615
|
children: [
|
|
13632
|
-
(media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children:
|
|
13616
|
+
(media == null ? void 0 : media.type) === "illustration" ? /* @__PURE__ */ jsx(StyledBannerIllustrationSlot, { children: React65.createElement(media.illustration, {
|
|
13633
13617
|
width: 108,
|
|
13634
13618
|
height: 108
|
|
13635
13619
|
}) }) : (media == null ? void 0 : media.type) === "image" ? /* @__PURE__ */ jsx(
|
|
@@ -13789,7 +13773,7 @@ var StyledIndicator3 = styled50(View)(
|
|
|
13789
13773
|
justifyContent: "center"
|
|
13790
13774
|
})
|
|
13791
13775
|
);
|
|
13792
|
-
var DatePicker =
|
|
13776
|
+
var DatePicker = React65.forwardRef(
|
|
13793
13777
|
(_a, ref) => {
|
|
13794
13778
|
var _b = _a, {
|
|
13795
13779
|
year,
|
|
@@ -14189,7 +14173,7 @@ var StyledPointer = styled50(Svg)(
|
|
|
14189
14173
|
opacity: pointerVisible ? 1 : 0
|
|
14190
14174
|
})
|
|
14191
14175
|
);
|
|
14192
|
-
var PictureSelector =
|
|
14176
|
+
var PictureSelector = React65.forwardRef(
|
|
14193
14177
|
(_a, ref) => {
|
|
14194
14178
|
var _b = _a, {
|
|
14195
14179
|
label,
|
|
@@ -14216,7 +14200,7 @@ var PictureSelector = React66.forwardRef(
|
|
|
14216
14200
|
const { pictureSelector } = theme2.tokens.components;
|
|
14217
14201
|
const { pictureButton } = pictureSelector;
|
|
14218
14202
|
const isControlled = value !== void 0;
|
|
14219
|
-
const [internalValue, setInternalValue] =
|
|
14203
|
+
const [internalValue, setInternalValue] = React65.useState(defaultValue);
|
|
14220
14204
|
const selectedValue = isControlled ? value : internalValue;
|
|
14221
14205
|
const selectedItem = items.find((item) => item.value === selectedValue);
|
|
14222
14206
|
const hasInsight = Boolean(
|
|
@@ -14400,7 +14384,7 @@ var InlineCount = styled50(View)(({ countGap }) => ({
|
|
|
14400
14384
|
alignItems: "center",
|
|
14401
14385
|
gap: countGap
|
|
14402
14386
|
}));
|
|
14403
|
-
var Countdown =
|
|
14387
|
+
var Countdown = React65.forwardRef(
|
|
14404
14388
|
(_a, ref) => {
|
|
14405
14389
|
var _b = _a, {
|
|
14406
14390
|
layout = "stacked",
|
|
@@ -14479,7 +14463,7 @@ var Countdown = React66.forwardRef(
|
|
|
14479
14463
|
InlineGroup,
|
|
14480
14464
|
{
|
|
14481
14465
|
groupGap: parseTokenValue54(countdown.countdownGroup.spacing.gap),
|
|
14482
|
-
children: units.map((unit, index) => /* @__PURE__ */ jsxs(
|
|
14466
|
+
children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
|
|
14483
14467
|
index > 0 && colon(`colon-${unit.key}`),
|
|
14484
14468
|
/* @__PURE__ */ jsxs(
|
|
14485
14469
|
InlineCount,
|
|
@@ -14522,7 +14506,7 @@ var Countdown = React66.forwardRef(
|
|
|
14522
14506
|
ref,
|
|
14523
14507
|
rootGap: parseTokenValue54(countdown.spacing.gap)
|
|
14524
14508
|
}, rest), {
|
|
14525
|
-
children: units.map((unit, index) => /* @__PURE__ */ jsxs(
|
|
14509
|
+
children: units.map((unit, index) => /* @__PURE__ */ jsxs(React65.Fragment, { children: [
|
|
14526
14510
|
index > 0 && colon(`colon-${unit.key}`),
|
|
14527
14511
|
/* @__PURE__ */ jsxs(
|
|
14528
14512
|
StackedItem,
|
|
@@ -14610,7 +14594,7 @@ var BadgeIcon = styled50(View)(({ theme: theme2 }) => {
|
|
|
14610
14594
|
flexShrink: 0
|
|
14611
14595
|
};
|
|
14612
14596
|
});
|
|
14613
|
-
var Badge2 =
|
|
14597
|
+
var Badge2 = React65.forwardRef(
|
|
14614
14598
|
(_a, ref) => {
|
|
14615
14599
|
var _b = _a, { icon, text } = _b, rest = __objRest(_b, ["icon", "text"]);
|
|
14616
14600
|
return /* @__PURE__ */ jsxs(BadgeContainer, __spreadProps(__spreadValues({ ref }, rest), { children: [
|
|
@@ -14628,7 +14612,7 @@ var StyledGrid = styled50(View)(({ theme: theme2 }) => {
|
|
|
14628
14612
|
"grid-row-gap": spacing.xl
|
|
14629
14613
|
};
|
|
14630
14614
|
});
|
|
14631
|
-
var Grid =
|
|
14615
|
+
var Grid = React65.forwardRef(
|
|
14632
14616
|
(_a, ref) => {
|
|
14633
14617
|
var _b = _a, { children, xs = 1, md = 2, lg = 3 } = _b, rest = __objRest(_b, ["children", "xs", "md", "lg"]);
|
|
14634
14618
|
const { width } = useWindowDimensions();
|
|
@@ -14727,7 +14711,7 @@ var PricingContainer = styled50(View)(({ theme: theme2 }) => {
|
|
|
14727
14711
|
width: "100%"
|
|
14728
14712
|
};
|
|
14729
14713
|
});
|
|
14730
|
-
var _ProductListingCard =
|
|
14714
|
+
var _ProductListingCard = React65.forwardRef(
|
|
14731
14715
|
(_a, ref) => {
|
|
14732
14716
|
var _b = _a, {
|
|
14733
14717
|
image,
|
|
@@ -14769,7 +14753,7 @@ var _ProductListingCard = React66.forwardRef(
|
|
|
14769
14753
|
accessibilityLabel: imageAlt,
|
|
14770
14754
|
accessible: true
|
|
14771
14755
|
}
|
|
14772
|
-
) :
|
|
14756
|
+
) : React65.isValidElement(image) ? image : /* @__PURE__ */ jsx(
|
|
14773
14757
|
StyledImage2,
|
|
14774
14758
|
{
|
|
14775
14759
|
source: image,
|
|
@@ -14915,7 +14899,7 @@ var StyledNoneBanner = styled50(View)(({ theme: theme2 }) => {
|
|
|
14915
14899
|
borderBottomRightRadius: radiusMd
|
|
14916
14900
|
};
|
|
14917
14901
|
});
|
|
14918
|
-
var ProductDisplayCard =
|
|
14902
|
+
var ProductDisplayCard = React65.forwardRef(
|
|
14919
14903
|
(_a, ref) => {
|
|
14920
14904
|
var _b = _a, {
|
|
14921
14905
|
title,
|
|
@@ -15045,9 +15029,9 @@ var ProductDisplayCard = React66.forwardRef(
|
|
|
15045
15029
|
}
|
|
15046
15030
|
);
|
|
15047
15031
|
ProductDisplayCard.displayName = "ProductDisplayCard";
|
|
15048
|
-
var TabNavigationContext =
|
|
15032
|
+
var TabNavigationContext = React65.createContext(void 0);
|
|
15049
15033
|
var useTabNavigationContext = () => {
|
|
15050
|
-
const context =
|
|
15034
|
+
const context = React65.useContext(TabNavigationContext);
|
|
15051
15035
|
if (!context) {
|
|
15052
15036
|
throw new Error(
|
|
15053
15037
|
"TabNavigation.List, TabNavigation.Tab and TabNavigation.Panel must be used within a TabNavigation component."
|
|
@@ -15086,7 +15070,7 @@ var StyledTab = styled50(Pressable)(
|
|
|
15086
15070
|
borderBottomColor: tabBorderColor
|
|
15087
15071
|
}, tabFlex !== void 0 ? { flex: tabFlex } : { flexShrink: 0 })
|
|
15088
15072
|
);
|
|
15089
|
-
var TabNavigationList =
|
|
15073
|
+
var TabNavigationList = React65.forwardRef(
|
|
15090
15074
|
(_a, ref) => {
|
|
15091
15075
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
15092
15076
|
const { layout } = useTabNavigationContext();
|
|
@@ -15105,7 +15089,7 @@ var TabNavigationList = React66.forwardRef(
|
|
|
15105
15089
|
}
|
|
15106
15090
|
);
|
|
15107
15091
|
TabNavigationList.displayName = "TabNavigation.List";
|
|
15108
|
-
var TabNavigationTab =
|
|
15092
|
+
var TabNavigationTab = React65.forwardRef(
|
|
15109
15093
|
(_a, ref) => {
|
|
15110
15094
|
var _b = _a, { value, disabled = false, icon, avatar, children } = _b, rest = __objRest(_b, ["value", "disabled", "icon", "avatar", "children"]);
|
|
15111
15095
|
const { layout } = useTabNavigationContext();
|
|
@@ -15141,7 +15125,7 @@ var TabNavigationTab = React66.forwardRef(
|
|
|
15141
15125
|
}
|
|
15142
15126
|
);
|
|
15143
15127
|
TabNavigationTab.displayName = "TabNavigation.Tab";
|
|
15144
|
-
var TabNavigationPanel =
|
|
15128
|
+
var TabNavigationPanel = React65.forwardRef(
|
|
15145
15129
|
(_a, ref) => {
|
|
15146
15130
|
var _b = _a, { value, children } = _b, rest = __objRest(_b, ["value", "children"]);
|
|
15147
15131
|
const { animation } = useTabNavigationContext();
|
|
@@ -15149,7 +15133,7 @@ var TabNavigationPanel = React66.forwardRef(
|
|
|
15149
15133
|
}
|
|
15150
15134
|
);
|
|
15151
15135
|
TabNavigationPanel.displayName = "TabNavigation.Panel";
|
|
15152
|
-
var TabNavigationRoot =
|
|
15136
|
+
var TabNavigationRoot = React65.forwardRef(
|
|
15153
15137
|
(_a, ref) => {
|
|
15154
15138
|
var _b = _a, {
|
|
15155
15139
|
value,
|
|
@@ -15167,11 +15151,11 @@ var TabNavigationRoot = React66.forwardRef(
|
|
|
15167
15151
|
"children"
|
|
15168
15152
|
]);
|
|
15169
15153
|
const isControlled = typeof value === "string";
|
|
15170
|
-
const [uncontrolledValue, setUncontrolledValue] =
|
|
15154
|
+
const [uncontrolledValue, setUncontrolledValue] = React65.useState(
|
|
15171
15155
|
() => defaultValue != null ? defaultValue : ""
|
|
15172
15156
|
);
|
|
15173
15157
|
const currentValue = isControlled ? value : uncontrolledValue;
|
|
15174
|
-
const handleValueChange =
|
|
15158
|
+
const handleValueChange = React65.useCallback(
|
|
15175
15159
|
(newValue) => {
|
|
15176
15160
|
if (!isControlled) {
|
|
15177
15161
|
setUncontrolledValue(newValue);
|
|
@@ -15180,7 +15164,7 @@ var TabNavigationRoot = React66.forwardRef(
|
|
|
15180
15164
|
},
|
|
15181
15165
|
[isControlled, onValueChange]
|
|
15182
15166
|
);
|
|
15183
|
-
const contextValue =
|
|
15167
|
+
const contextValue = React65.useMemo(
|
|
15184
15168
|
() => ({ layout, animation }),
|
|
15185
15169
|
[layout, animation]
|
|
15186
15170
|
);
|