@yahoo/uds 3.175.5 → 3.175.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.cts +2 -2
- package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts +2 -2
- package/dist/components/client/Input/Input.cjs +8 -1
- package/dist/components/client/Input/Input.js +8 -1
- package/dist/components/client/Select/SelectTrigger.cjs +12 -1
- package/dist/components/client/Select/SelectTrigger.js +12 -1
- package/dist/components/client/Select/selectFieldStyles.cjs +2 -2
- package/dist/components/client/Select/selectFieldStyles.d.cts +1 -1
- package/dist/components/client/Select/selectFieldStyles.d.ts +1 -1
- package/dist/components/client/Select/selectFieldStyles.js +2 -2
- package/dist/hooks/usePointerFocusTracker.cjs +25 -0
- package/dist/hooks/usePointerFocusTracker.d.cts +9 -0
- package/dist/hooks/usePointerFocusTracker.d.ts +9 -0
- package/dist/hooks/usePointerFocusTracker.js +24 -0
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.cts +2 -2
- package/dist/tailwind-internal/dist/utils/getShadowStyles.d.ts +2 -2
- package/dist/uds/generated/componentData.cjs +239 -239
- package/dist/uds/generated/componentData.js +239 -239
- package/generated/componentData.json +330 -330
- package/package.json +1 -1
|
@@ -10,8 +10,8 @@ import { VariantConfig } from "../types/ComponentConfig.cjs";
|
|
|
10
10
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
11
11
|
*/
|
|
12
12
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
13
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
13
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
14
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
15
|
} | null;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { getConfigVariantProperties };
|
|
@@ -10,8 +10,8 @@ import { VariantConfig } from "../types/ComponentConfig.js";
|
|
|
10
10
|
* @returns A Record of layer names to their properties, or null if no properties are found
|
|
11
11
|
*/
|
|
12
12
|
declare function getConfigVariantProperties(variant?: VariantConfig): {
|
|
13
|
-
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
14
|
-
root: Readonly<Record<string, SelectedConfigurableProperty<"
|
|
13
|
+
[x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
14
|
+
root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "opacity" | "fillOpacity" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "spacingTop" | "spacingBottom" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity" | "paginationWidthVar" | "controlHeight", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
|
|
15
15
|
} | null;
|
|
16
16
|
//#endregion
|
|
17
17
|
export { getConfigVariantProperties };
|
|
@@ -8,6 +8,7 @@ const require_components_Box = require("../../Box.cjs");
|
|
|
8
8
|
const require_components_HStack = require("../../HStack.cjs");
|
|
9
9
|
const require_components_VStack = require("../../VStack.cjs");
|
|
10
10
|
const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
|
|
11
|
+
const require_hooks_usePointerFocusTracker = require("../../../hooks/usePointerFocusTracker.cjs");
|
|
11
12
|
const require_components_client_AnimateHeightChange = require("../AnimateHeightChange.cjs");
|
|
12
13
|
const require_components_client_Input_UDSInputConfigProvider = require("./UDSInputConfigProvider.cjs");
|
|
13
14
|
const require_components_client_Input_InputHelpTextInternal = require("./InputHelpTextInternal.cjs");
|
|
@@ -93,6 +94,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
93
94
|
const uid = id ?? `uds-input-${generatedId}`;
|
|
94
95
|
const helpTextId = `uds-input-${uid}-help-text`;
|
|
95
96
|
const { startIconSize, endIconSize } = require_components_client_Input_UDSInputConfigProvider.useInputConfig(size);
|
|
97
|
+
const { isPointerFocus, onPointerDown, onFocusChange } = require_hooks_usePointerFocusTracker.usePointerFocusTracker();
|
|
96
98
|
const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};
|
|
97
99
|
const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
|
|
98
100
|
const ref = (0, react.useRef)(null);
|
|
@@ -110,6 +112,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
110
112
|
slotProps
|
|
111
113
|
]);
|
|
112
114
|
const handleBlur = (0, react.useCallback)((e) => {
|
|
115
|
+
onFocusChange(false);
|
|
113
116
|
if (formatOnBlur && ref.current) {
|
|
114
117
|
const next = formatOnBlur(e.target.value);
|
|
115
118
|
if (next !== e.target.value) setNativeInputValue(ref.current, next);
|
|
@@ -119,9 +122,11 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
119
122
|
}, [
|
|
120
123
|
formatOnBlur,
|
|
121
124
|
onBlur,
|
|
125
|
+
onFocusChange,
|
|
122
126
|
slotProps
|
|
123
127
|
]);
|
|
124
128
|
const handleFocus = (0, react.useCallback)((e) => {
|
|
129
|
+
onFocusChange(true);
|
|
125
130
|
if (parseOnFocus && ref.current) {
|
|
126
131
|
const next = parseOnFocus(e.target.value);
|
|
127
132
|
if (next !== e.target.value) setNativeInputValue(ref.current, next);
|
|
@@ -131,6 +136,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
131
136
|
}, [
|
|
132
137
|
parseOnFocus,
|
|
133
138
|
onFocus,
|
|
139
|
+
onFocusChange,
|
|
134
140
|
slotProps
|
|
135
141
|
]);
|
|
136
142
|
const layoutVariant = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion() ? "smooth" : "bouncy";
|
|
@@ -148,7 +154,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
148
154
|
inputSizeInputWrapperDynamic: size,
|
|
149
155
|
inputVariantInputWrapper: "default",
|
|
150
156
|
inputVariantValueInputWrapper: !value ? "empty" : "filled"
|
|
151
|
-
}), "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
157
|
+
}), !isPointerFocus && "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
152
158
|
input: require_styles_styler.getStyles({
|
|
153
159
|
inputSizeInput: size,
|
|
154
160
|
inputVariantInput: "default",
|
|
@@ -201,6 +207,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
201
207
|
alignItems: "center",
|
|
202
208
|
style: { minWidth: `${minWidth}px` },
|
|
203
209
|
...inputWrapperProps,
|
|
210
|
+
onPointerDown,
|
|
204
211
|
className: classNames.inputWrapper,
|
|
205
212
|
children: [
|
|
206
213
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartIcon, {
|
|
@@ -6,6 +6,7 @@ import { Box } from "../../Box.js";
|
|
|
6
6
|
import { HStack } from "../../HStack.js";
|
|
7
7
|
import { VStack } from "../../VStack.js";
|
|
8
8
|
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
|
|
9
|
+
import { usePointerFocusTracker } from "../../../hooks/usePointerFocusTracker.js";
|
|
9
10
|
import { AnimateHeightChange } from "../AnimateHeightChange.js";
|
|
10
11
|
import { useInputConfig } from "./UDSInputConfigProvider.js";
|
|
11
12
|
import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
|
|
@@ -90,6 +91,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
90
91
|
const uid = id ?? `uds-input-${generatedId}`;
|
|
91
92
|
const helpTextId = `uds-input-${uid}-help-text`;
|
|
92
93
|
const { startIconSize, endIconSize } = useInputConfig(size);
|
|
94
|
+
const { isPointerFocus, onPointerDown, onFocusChange } = usePointerFocusTracker();
|
|
93
95
|
const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};
|
|
94
96
|
const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
|
|
95
97
|
const ref = useRef(null);
|
|
@@ -107,6 +109,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
107
109
|
slotProps
|
|
108
110
|
]);
|
|
109
111
|
const handleBlur = useCallback((e) => {
|
|
112
|
+
onFocusChange(false);
|
|
110
113
|
if (formatOnBlur && ref.current) {
|
|
111
114
|
const next = formatOnBlur(e.target.value);
|
|
112
115
|
if (next !== e.target.value) setNativeInputValue(ref.current, next);
|
|
@@ -116,9 +119,11 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
116
119
|
}, [
|
|
117
120
|
formatOnBlur,
|
|
118
121
|
onBlur,
|
|
122
|
+
onFocusChange,
|
|
119
123
|
slotProps
|
|
120
124
|
]);
|
|
121
125
|
const handleFocus = useCallback((e) => {
|
|
126
|
+
onFocusChange(true);
|
|
122
127
|
if (parseOnFocus && ref.current) {
|
|
123
128
|
const next = parseOnFocus(e.target.value);
|
|
124
129
|
if (next !== e.target.value) setNativeInputValue(ref.current, next);
|
|
@@ -128,6 +133,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
128
133
|
}, [
|
|
129
134
|
parseOnFocus,
|
|
130
135
|
onFocus,
|
|
136
|
+
onFocusChange,
|
|
131
137
|
slotProps
|
|
132
138
|
]);
|
|
133
139
|
const layoutVariant = usePrefersReducedMotion() ? "smooth" : "bouncy";
|
|
@@ -145,7 +151,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
145
151
|
inputSizeInputWrapperDynamic: size,
|
|
146
152
|
inputVariantInputWrapper: "default",
|
|
147
153
|
inputVariantValueInputWrapper: !value ? "empty" : "filled"
|
|
148
|
-
}), "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
154
|
+
}), !isPointerFocus && "uds-ring-shadow", "uds-ring-within", inputWrapperClassName),
|
|
149
155
|
input: getStyles({
|
|
150
156
|
inputSizeInput: size,
|
|
151
157
|
inputVariantInput: "default",
|
|
@@ -198,6 +204,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
198
204
|
alignItems: "center",
|
|
199
205
|
style: { minWidth: `${minWidth}px` },
|
|
200
206
|
...inputWrapperProps,
|
|
207
|
+
onPointerDown,
|
|
201
208
|
className: classNames.inputWrapper,
|
|
202
209
|
children: [
|
|
203
210
|
/* @__PURE__ */ jsx(StartIcon, {
|
|
@@ -6,6 +6,7 @@ const require_styles_styler = require("../../../styles/styler.cjs");
|
|
|
6
6
|
const require_components_IconSlot = require("../../IconSlot.cjs");
|
|
7
7
|
const require_components_Box = require("../../Box.cjs");
|
|
8
8
|
const require_components_HStack = require("../../HStack.cjs");
|
|
9
|
+
const require_hooks_usePointerFocusTracker = require("../../../hooks/usePointerFocusTracker.cjs");
|
|
9
10
|
const require_components_client_Select_selectContext = require("./selectContext.cjs");
|
|
10
11
|
const require_components_client_Select_selectFieldStyles = require("./selectFieldStyles.cjs");
|
|
11
12
|
const require_components_client_Select_SelectValue = require("./SelectValue.cjs");
|
|
@@ -41,6 +42,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
|
|
|
41
42
|
EndIcon.displayName = "EndIcon";
|
|
42
43
|
const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
|
|
43
44
|
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
|
|
45
|
+
const { isPointerFocus, onPointerDown: onPointerDownFocusTracker, onFocusChange } = require_hooks_usePointerFocusTracker.usePointerFocusTracker();
|
|
44
46
|
const select = (0, _ariakit_react.useSelectContext)();
|
|
45
47
|
const value = (0, _ariakit_react.useStoreState)(select, "value");
|
|
46
48
|
const open = (0, _ariakit_react.useStoreState)(select, "open");
|
|
@@ -50,6 +52,7 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
50
52
|
const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
|
|
51
53
|
const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
|
|
52
54
|
const handlePointerDown = (event) => {
|
|
55
|
+
onPointerDownFocusTracker();
|
|
53
56
|
if (readOnly) {
|
|
54
57
|
event.preventDefault();
|
|
55
58
|
event.stopPropagation();
|
|
@@ -57,6 +60,12 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
57
60
|
}
|
|
58
61
|
triggerPassthroughOnPointerDown?.(event);
|
|
59
62
|
};
|
|
63
|
+
const handleFocus = () => {
|
|
64
|
+
onFocusChange(true);
|
|
65
|
+
};
|
|
66
|
+
const handleBlur = () => {
|
|
67
|
+
onFocusChange(false);
|
|
68
|
+
};
|
|
60
69
|
const handleClick = (event) => {
|
|
61
70
|
if (readOnly) {
|
|
62
71
|
event.preventDefault();
|
|
@@ -74,7 +83,7 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
74
83
|
width: "full",
|
|
75
84
|
style: { minWidth: `${minWidth}px` },
|
|
76
85
|
...triggerWrapperProps,
|
|
77
|
-
className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
|
|
86
|
+
className: require_components_client_Select_selectFieldStyles.getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName, isPointerFocus),
|
|
78
87
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Select, {
|
|
79
88
|
ref,
|
|
80
89
|
id: uid,
|
|
@@ -87,6 +96,8 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
87
96
|
...triggerPassthroughProps,
|
|
88
97
|
...triggerProps,
|
|
89
98
|
onPointerDown: handlePointerDown,
|
|
99
|
+
onFocus: handleFocus,
|
|
100
|
+
onBlur: handleBlur,
|
|
90
101
|
onClick: handleClick,
|
|
91
102
|
className: require_styles_styler.cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
|
|
92
103
|
children: [
|
|
@@ -5,6 +5,7 @@ import { cx } from "../../../styles/styler.js";
|
|
|
5
5
|
import { IconSlot } from "../../IconSlot.js";
|
|
6
6
|
import { Box } from "../../Box.js";
|
|
7
7
|
import { HStack } from "../../HStack.js";
|
|
8
|
+
import { usePointerFocusTracker } from "../../../hooks/usePointerFocusTracker.js";
|
|
8
9
|
import { useSelectFieldContext } from "./selectContext.js";
|
|
9
10
|
import { getSelectEndIconClassName, getSelectStartIconClassName, getSelectTriggerClassName, getSelectTriggerWrapperClassName } from "./selectFieldStyles.js";
|
|
10
11
|
import { SelectValue as SelectValue$1 } from "./SelectValue.js";
|
|
@@ -40,6 +41,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
|
|
|
40
41
|
EndIcon.displayName = "EndIcon";
|
|
41
42
|
const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
|
|
42
43
|
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = useSelectFieldContext();
|
|
44
|
+
const { isPointerFocus, onPointerDown: onPointerDownFocusTracker, onFocusChange } = usePointerFocusTracker();
|
|
43
45
|
const select = useSelectContext();
|
|
44
46
|
const value = useStoreState(select, "value");
|
|
45
47
|
const open = useStoreState(select, "open");
|
|
@@ -49,6 +51,7 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
49
51
|
const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
|
|
50
52
|
const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
|
|
51
53
|
const handlePointerDown = (event) => {
|
|
54
|
+
onPointerDownFocusTracker();
|
|
52
55
|
if (readOnly) {
|
|
53
56
|
event.preventDefault();
|
|
54
57
|
event.stopPropagation();
|
|
@@ -56,6 +59,12 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
56
59
|
}
|
|
57
60
|
triggerPassthroughOnPointerDown?.(event);
|
|
58
61
|
};
|
|
62
|
+
const handleFocus = () => {
|
|
63
|
+
onFocusChange(true);
|
|
64
|
+
};
|
|
65
|
+
const handleBlur = () => {
|
|
66
|
+
onFocusChange(false);
|
|
67
|
+
};
|
|
59
68
|
const handleClick = (event) => {
|
|
60
69
|
if (readOnly) {
|
|
61
70
|
event.preventDefault();
|
|
@@ -73,7 +82,7 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
73
82
|
width: "full",
|
|
74
83
|
style: { minWidth: `${minWidth}px` },
|
|
75
84
|
...triggerWrapperProps,
|
|
76
|
-
className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName),
|
|
85
|
+
className: getSelectTriggerWrapperClassName(size, hasValue, triggerWrapperClassName, isPointerFocus),
|
|
77
86
|
children: /* @__PURE__ */ jsxs(Select, {
|
|
78
87
|
ref,
|
|
79
88
|
id: uid,
|
|
@@ -86,6 +95,8 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
86
95
|
...triggerPassthroughProps,
|
|
87
96
|
...triggerProps,
|
|
88
97
|
onPointerDown: handlePointerDown,
|
|
98
|
+
onFocus: handleFocus,
|
|
99
|
+
onBlur: handleBlur,
|
|
89
100
|
onClick: handleClick,
|
|
90
101
|
className: cx("flex", "w-full", "min-w-0", "items-center", "border-0", "bg-transparent", "rounded-[inherit]", "outline-none", "shadow-none", "uds-hit-target", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
|
|
91
102
|
children: [
|
|
@@ -26,13 +26,13 @@ function getSelectLabelRequiredClassName(hasValue) {
|
|
|
26
26
|
}
|
|
27
27
|
/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
|
|
28
28
|
const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
|
|
29
|
-
function getSelectTriggerWrapperClassName(size, hasValue, className) {
|
|
29
|
+
function getSelectTriggerWrapperClassName(size, hasValue, className, isPointerFocus) {
|
|
30
30
|
return require_styles_styler.cx(require_styles_styler.getStyles({
|
|
31
31
|
inputSizeInputWrapperStatic: size,
|
|
32
32
|
inputSizeInputWrapperDynamic: size,
|
|
33
33
|
inputVariantInputWrapper: "default",
|
|
34
34
|
inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
|
|
35
|
-
}), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
35
|
+
}), "flex", "w-full", "items-center", !isPointerFocus && "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
36
36
|
}
|
|
37
37
|
function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
|
|
38
38
|
return require_styles_styler.getStyles({
|
|
@@ -18,7 +18,7 @@ declare function getSelectLabelClassName(size: SelectSize, hasValue: boolean): s
|
|
|
18
18
|
declare function getSelectLabelRequiredClassName(hasValue: boolean): string;
|
|
19
19
|
/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
|
|
20
20
|
declare const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
|
|
21
|
-
declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string): string;
|
|
21
|
+
declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string, isPointerFocus?: boolean): string;
|
|
22
22
|
declare function getSelectTriggerClassName({ size, hasValue, disabled, className }: SelectTriggerStyleOptions): string;
|
|
23
23
|
declare function getSelectStartIconClassName(size: SelectSize, hasValue: boolean): string;
|
|
24
24
|
declare function getSelectEndIconClassName(size: SelectSize, hasValue: boolean): string;
|
|
@@ -19,7 +19,7 @@ declare function getSelectLabelClassName(size: SelectSize, hasValue: boolean): s
|
|
|
19
19
|
declare function getSelectLabelRequiredClassName(hasValue: boolean): string;
|
|
20
20
|
/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
|
|
21
21
|
declare const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
|
|
22
|
-
declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string): string;
|
|
22
|
+
declare function getSelectTriggerWrapperClassName(size: SelectSize, hasValue: boolean, className?: string, isPointerFocus?: boolean): string;
|
|
23
23
|
declare function getSelectTriggerClassName({ size, hasValue, disabled, className }: SelectTriggerStyleOptions): string;
|
|
24
24
|
declare function getSelectStartIconClassName(size: SelectSize, hasValue: boolean): string;
|
|
25
25
|
declare function getSelectEndIconClassName(size: SelectSize, hasValue: boolean): string;
|
|
@@ -25,13 +25,13 @@ function getSelectLabelRequiredClassName(hasValue) {
|
|
|
25
25
|
}
|
|
26
26
|
/** Marks Select field triggers so Input `focus-within` wrapper rules skip them. */
|
|
27
27
|
const SELECT_FIELD_TRIGGER_CLASS = "uds-select-field-trigger";
|
|
28
|
-
function getSelectTriggerWrapperClassName(size, hasValue, className) {
|
|
28
|
+
function getSelectTriggerWrapperClassName(size, hasValue, className, isPointerFocus) {
|
|
29
29
|
return cx(getStyles({
|
|
30
30
|
inputSizeInputWrapperStatic: size,
|
|
31
31
|
inputSizeInputWrapperDynamic: size,
|
|
32
32
|
inputVariantInputWrapper: "default",
|
|
33
33
|
inputVariantValueInputWrapper: !hasValue ? "empty" : "filled"
|
|
34
|
-
}), "flex", "w-full", "items-center", "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
34
|
+
}), "flex", "w-full", "items-center", !isPointerFocus && "uds-ring-shadow", "uds-ring-within", SELECT_FIELD_TRIGGER_CLASS, className);
|
|
35
35
|
}
|
|
36
36
|
function getSelectTriggerClassName({ size, hasValue, disabled, className }) {
|
|
37
37
|
return getStyles({
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
let react = require("react");
|
|
4
|
+
//#region src/hooks/usePointerFocusTracker.ts
|
|
5
|
+
function usePointerFocusTracker() {
|
|
6
|
+
const [isPointerFocus, setIsPointerFocus] = (0, react.useState)(false);
|
|
7
|
+
const pointerDownRef = (0, react.useRef)(false);
|
|
8
|
+
return {
|
|
9
|
+
isPointerFocus,
|
|
10
|
+
onPointerDown: (0, react.useCallback)(() => {
|
|
11
|
+
pointerDownRef.current = true;
|
|
12
|
+
}, []),
|
|
13
|
+
onFocusChange: (0, react.useCallback)((focused) => {
|
|
14
|
+
if (focused) {
|
|
15
|
+
setIsPointerFocus(pointerDownRef.current);
|
|
16
|
+
pointerDownRef.current = false;
|
|
17
|
+
} else {
|
|
18
|
+
setIsPointerFocus(false);
|
|
19
|
+
pointerDownRef.current = false;
|
|
20
|
+
}
|
|
21
|
+
}, [])
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
//#endregion
|
|
25
|
+
exports.usePointerFocusTracker = usePointerFocusTracker;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/hooks/usePointerFocusTracker.d.ts
|
|
3
|
+
declare function usePointerFocusTracker(): {
|
|
4
|
+
readonly isPointerFocus: boolean;
|
|
5
|
+
readonly onPointerDown: () => void;
|
|
6
|
+
readonly onFocusChange: (focused: boolean) => void;
|
|
7
|
+
};
|
|
8
|
+
//#endregion
|
|
9
|
+
export { usePointerFocusTracker };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
|
|
2
|
+
//#region src/hooks/usePointerFocusTracker.d.ts
|
|
3
|
+
declare function usePointerFocusTracker(): {
|
|
4
|
+
readonly isPointerFocus: boolean;
|
|
5
|
+
readonly onPointerDown: () => void;
|
|
6
|
+
readonly onFocusChange: (focused: boolean) => void;
|
|
7
|
+
};
|
|
8
|
+
//#endregion
|
|
9
|
+
export { usePointerFocusTracker };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
import { useCallback, useRef, useState } from "react";
|
|
3
|
+
//#region src/hooks/usePointerFocusTracker.ts
|
|
4
|
+
function usePointerFocusTracker() {
|
|
5
|
+
const [isPointerFocus, setIsPointerFocus] = useState(false);
|
|
6
|
+
const pointerDownRef = useRef(false);
|
|
7
|
+
return {
|
|
8
|
+
isPointerFocus,
|
|
9
|
+
onPointerDown: useCallback(() => {
|
|
10
|
+
pointerDownRef.current = true;
|
|
11
|
+
}, []),
|
|
12
|
+
onFocusChange: useCallback((focused) => {
|
|
13
|
+
if (focused) {
|
|
14
|
+
setIsPointerFocus(pointerDownRef.current);
|
|
15
|
+
pointerDownRef.current = false;
|
|
16
|
+
} else {
|
|
17
|
+
setIsPointerFocus(false);
|
|
18
|
+
pointerDownRef.current = false;
|
|
19
|
+
}
|
|
20
|
+
}, [])
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
//#endregion
|
|
24
|
+
export { usePointerFocusTracker };
|
|
@@ -6,8 +6,8 @@ import { UniversalTokensConfig } from "../packages/config/dist/index.cjs";
|
|
|
6
6
|
declare function getShadowStyles({ config, shadowType }: {
|
|
7
7
|
config: UniversalTokensConfig;
|
|
8
8
|
shadowType: ShadowType;
|
|
9
|
-
}): Record<".uds-inset-shadow-
|
|
10
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
9
|
+
}): Record<".uds-inset-shadow-none" | ".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-none" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
|
|
10
|
+
readonly [x: string]: "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
11
11
|
readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
12
12
|
}>;
|
|
13
13
|
//#endregion
|
|
@@ -6,8 +6,8 @@ import { UniversalTokensConfig } from "../packages/config/dist/index.js";
|
|
|
6
6
|
declare function getShadowStyles({ config, shadowType }: {
|
|
7
7
|
config: UniversalTokensConfig;
|
|
8
8
|
shadowType: ShadowType;
|
|
9
|
-
}): Record<".uds-inset-shadow-
|
|
10
|
-
readonly [x: string]: "var(--uds-inset-shadow-
|
|
9
|
+
}): Record<".uds-inset-shadow-none" | ".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-xs" | ".uds-inset-shadow-elevation-0" | ".uds-inset-shadow-elevation-1" | ".uds-inset-shadow-elevation-2" | ".uds-inset-shadow-elevation-3" | ".uds-inset-shadow-elevation-4" | ".uds-inset-shadow-elevation-5" | ".uds-drop-shadow-none" | ".uds-drop-shadow-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-xs" | ".uds-drop-shadow-elevation-0" | ".uds-drop-shadow-elevation-1" | ".uds-drop-shadow-elevation-2" | ".uds-drop-shadow-elevation-3" | ".uds-drop-shadow-elevation-4" | ".uds-drop-shadow-elevation-5", {
|
|
10
|
+
readonly [x: string]: "var(--uds-inset-shadow-none)" | "var(--uds-inset-shadow-sm)" | "var(--uds-inset-shadow-md)" | "var(--uds-inset-shadow-lg)" | "var(--uds-inset-shadow-xl)" | "var(--uds-inset-shadow-2xl)" | "var(--uds-inset-shadow-xs)" | "var(--uds-inset-shadow-elevation-0)" | "var(--uds-inset-shadow-elevation-1)" | "var(--uds-inset-shadow-elevation-2)" | "var(--uds-inset-shadow-elevation-3)" | "var(--uds-inset-shadow-elevation-4)" | "var(--uds-inset-shadow-elevation-5)" | "var(--uds-drop-shadow-none)" | "var(--uds-drop-shadow-sm)" | "var(--uds-drop-shadow-md)" | "var(--uds-drop-shadow-lg)" | "var(--uds-drop-shadow-xl)" | "var(--uds-drop-shadow-2xl)" | "var(--uds-drop-shadow-xs)" | "var(--uds-drop-shadow-elevation-0)" | "var(--uds-drop-shadow-elevation-1)" | "var(--uds-drop-shadow-elevation-2)" | "var(--uds-drop-shadow-elevation-3)" | "var(--uds-drop-shadow-elevation-4)" | "var(--uds-drop-shadow-elevation-5)" | "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
11
11
|
readonly boxShadow: "var(--uds-drop-shadow, 0 0 transparent), var(--uds-inset-shadow, 0 0 transparent), var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow, 0 0 transparent)";
|
|
12
12
|
}>;
|
|
13
13
|
//#endregion
|