@yahoo/uds 3.175.7 → 3.175.9
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 +1 -2
- package/dist/components/client/Input/Input.js +1 -2
- package/dist/components/client/Modal/Modal.cjs +1 -1
- package/dist/components/client/Modal/Modal.js +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/Select/SelectTrigger.cjs +1 -2
- package/dist/components/client/Select/SelectTrigger.js +1 -2
- package/dist/hooks/usePointerFocusTracker.cjs +35 -11
- package/dist/hooks/usePointerFocusTracker.d.cts +0 -1
- package/dist/hooks/usePointerFocusTracker.d.ts +0 -1
- package/dist/hooks/usePointerFocusTracker.js +36 -12
- 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 +244 -243
- package/dist/uds/generated/componentData.js +244 -243
- package/dist/uds/generated/tailwindPurge.cjs +6 -6
- package/dist/uds/generated/tailwindPurge.js +6 -6
- package/generated/componentData.json +346 -345
- package/generated/tailwindPurge.ts +1 -1
- 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<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "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<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "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<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "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<"color" | "iconSize" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "opacity" | "fillOpacity" | "fontWeight" | "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 };
|
|
@@ -94,7 +94,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
94
94
|
const uid = id ?? `uds-input-${generatedId}`;
|
|
95
95
|
const helpTextId = `uds-input-${uid}-help-text`;
|
|
96
96
|
const { startIconSize, endIconSize } = require_components_client_Input_UDSInputConfigProvider.useInputConfig(size);
|
|
97
|
-
const { isPointerFocus,
|
|
97
|
+
const { isPointerFocus, onFocusChange } = require_hooks_usePointerFocusTracker.usePointerFocusTracker();
|
|
98
98
|
const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};
|
|
99
99
|
const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
|
|
100
100
|
const ref = (0, react.useRef)(null);
|
|
@@ -207,7 +207,6 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
|
|
|
207
207
|
alignItems: "center",
|
|
208
208
|
style: { minWidth: `${minWidth}px` },
|
|
209
209
|
...inputWrapperProps,
|
|
210
|
-
onPointerDown,
|
|
211
210
|
className: classNames.inputWrapper,
|
|
212
211
|
children: [
|
|
213
212
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartIcon, {
|
|
@@ -91,7 +91,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
91
91
|
const uid = id ?? `uds-input-${generatedId}`;
|
|
92
92
|
const helpTextId = `uds-input-${uid}-help-text`;
|
|
93
93
|
const { startIconSize, endIconSize } = useInputConfig(size);
|
|
94
|
-
const { isPointerFocus,
|
|
94
|
+
const { isPointerFocus, onFocusChange } = usePointerFocusTracker();
|
|
95
95
|
const { className: inputClassName, ...inputProps } = slotProps?.input ?? {};
|
|
96
96
|
const { className: inputWrapperClassName, ...inputWrapperProps } = slotProps?.inputWrapper ?? {};
|
|
97
97
|
const ref = useRef(null);
|
|
@@ -204,7 +204,6 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
|
|
|
204
204
|
alignItems: "center",
|
|
205
205
|
style: { minWidth: `${minWidth}px` },
|
|
206
206
|
...inputWrapperProps,
|
|
207
|
-
onPointerDown,
|
|
208
207
|
className: classNames.inputWrapper,
|
|
209
208
|
children: [
|
|
210
209
|
/* @__PURE__ */ jsx(StartIcon, {
|
|
@@ -69,7 +69,7 @@ const Modal = ({ children, open, unmountOnHide = false, onClose, onOpen, portal
|
|
|
69
69
|
const classNames = {
|
|
70
70
|
positioner: require_styles_styler.getStyles({
|
|
71
71
|
spacing: gutter,
|
|
72
|
-
className: require_styles_styler.cx("fixed inset-0 z-40", scrollBehavior === "outside" ? "overflow-y-auto" : "overflow-hidden", !reducedMotion && "transition-[opacity,visibility]", open ? "visible opacity-100" : "invisible opacity-0", modal === false && "pointer-events-none")
|
|
72
|
+
className: require_styles_styler.cx("fixed inset-0 z-40", scrollBehavior === "outside" ? "overflow-y-auto" : "overflow-hidden", !reducedMotion && (open ? "transition-opacity" : "transition-[opacity,visibility]"), open ? "visible opacity-100" : "invisible opacity-0", modal === false && "pointer-events-none")
|
|
73
73
|
}),
|
|
74
74
|
root: require_styles_styler.getStyles({
|
|
75
75
|
modalSizeRoot: size,
|
|
@@ -68,7 +68,7 @@ const Modal = ({ children, open, unmountOnHide = false, onClose, onOpen, portal
|
|
|
68
68
|
const classNames = {
|
|
69
69
|
positioner: getStyles({
|
|
70
70
|
spacing: gutter,
|
|
71
|
-
className: cx("fixed inset-0 z-40", scrollBehavior === "outside" ? "overflow-y-auto" : "overflow-hidden", !reducedMotion && "transition-[opacity,visibility]", open ? "visible opacity-100" : "invisible opacity-0", modal === false && "pointer-events-none")
|
|
71
|
+
className: cx("fixed inset-0 z-40", scrollBehavior === "outside" ? "overflow-y-auto" : "overflow-hidden", !reducedMotion && (open ? "transition-opacity" : "transition-[opacity,visibility]"), open ? "visible opacity-100" : "invisible opacity-0", modal === false && "pointer-events-none")
|
|
72
72
|
}),
|
|
73
73
|
root: getStyles({
|
|
74
74
|
modalSizeRoot: size,
|
|
@@ -24,7 +24,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
24
24
|
gap: SpacingAlias;
|
|
25
25
|
dismissButtonSpacing: SpacingAlias;
|
|
26
26
|
dismissIconSize: number;
|
|
27
|
-
ariaKitPlacement: ("
|
|
27
|
+
ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
28
28
|
animationDuration: number;
|
|
29
29
|
};
|
|
30
30
|
//#endregion
|
|
@@ -25,7 +25,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
|
|
|
25
25
|
gap: SpacingAlias;
|
|
26
26
|
dismissButtonSpacing: SpacingAlias;
|
|
27
27
|
dismissIconSize: number;
|
|
28
|
-
ariaKitPlacement: ("
|
|
28
|
+
ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
|
|
29
29
|
animationDuration: number;
|
|
30
30
|
};
|
|
31
31
|
//#endregion
|
|
@@ -42,7 +42,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
|
|
|
42
42
|
EndIcon.displayName = "EndIcon";
|
|
43
43
|
const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
|
|
44
44
|
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = require_components_client_Select_selectContext.useSelectFieldContext();
|
|
45
|
-
const { isPointerFocus,
|
|
45
|
+
const { isPointerFocus, onFocusChange } = require_hooks_usePointerFocusTracker.usePointerFocusTracker();
|
|
46
46
|
const select = (0, _ariakit_react.useSelectContext)();
|
|
47
47
|
const value = (0, _ariakit_react.useStoreState)(select, "value");
|
|
48
48
|
const open = (0, _ariakit_react.useStoreState)(select, "open");
|
|
@@ -52,7 +52,6 @@ const SelectTrigger = (0, react.forwardRef)(function SelectTrigger({ placeholder
|
|
|
52
52
|
const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
|
|
53
53
|
const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
|
|
54
54
|
const handlePointerDown = (event) => {
|
|
55
|
-
onPointerDownFocusTracker();
|
|
56
55
|
if (readOnly) {
|
|
57
56
|
event.preventDefault();
|
|
58
57
|
event.stopPropagation();
|
|
@@ -41,7 +41,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
|
|
|
41
41
|
EndIcon.displayName = "EndIcon";
|
|
42
42
|
const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon, endIcon, slotProps, className, disabled: disabledProp, name, onClick: triggerPassthroughOnClick, onPointerDown: triggerPassthroughOnPointerDown, ...triggerPassthroughProps }, ref) {
|
|
43
43
|
const { size, disabled, readOnly, required, hasError, uid, helpTextId, reduceMotion, minWidth, triggerWrapperRef } = useSelectFieldContext();
|
|
44
|
-
const { isPointerFocus,
|
|
44
|
+
const { isPointerFocus, onFocusChange } = usePointerFocusTracker();
|
|
45
45
|
const select = useSelectContext();
|
|
46
46
|
const value = useStoreState(select, "value");
|
|
47
47
|
const open = useStoreState(select, "open");
|
|
@@ -51,7 +51,6 @@ const SelectTrigger = forwardRef(function SelectTrigger({ placeholder, startIcon
|
|
|
51
51
|
const { className: triggerWrapperClassName, ...triggerWrapperProps } = slotProps?.triggerWrapper ?? {};
|
|
52
52
|
const { className: triggerClassName, onClick, ...triggerProps } = slotProps?.trigger ?? {};
|
|
53
53
|
const handlePointerDown = (event) => {
|
|
54
|
-
onPointerDownFocusTracker();
|
|
55
54
|
if (readOnly) {
|
|
56
55
|
event.preventDefault();
|
|
57
56
|
event.stopPropagation();
|
|
@@ -2,22 +2,46 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
let react = require("react");
|
|
4
4
|
//#region src/hooks/usePointerFocusTracker.ts
|
|
5
|
+
/**
|
|
6
|
+
* The most recent way the user interacted with the page, shared by every field on it. Focus that
|
|
7
|
+
* follows a pointer press hides the ring; focus that follows a key press, or arrives before any
|
|
8
|
+
* interaction, shows it. This is the `:focus-visible` heuristic browsers apply to buttons. Text
|
|
9
|
+
* inputs are exempt from it (one always matches `:focus-visible`), so without this the ring and the
|
|
10
|
+
* border would both paint on every click.
|
|
11
|
+
*
|
|
12
|
+
* Listening on the document rather than the field is what covers a click on the field's label and a
|
|
13
|
+
* `focus()` call: neither delivers a pointerdown to the field itself.
|
|
14
|
+
*/
|
|
15
|
+
let modality = "keyboard";
|
|
16
|
+
let subscribers = 0;
|
|
17
|
+
function handlePointerDown() {
|
|
18
|
+
modality = "pointer";
|
|
19
|
+
}
|
|
20
|
+
function handleKeyDown(event) {
|
|
21
|
+
if (event.metaKey || event.ctrlKey || event.altKey) return;
|
|
22
|
+
modality = "keyboard";
|
|
23
|
+
}
|
|
24
|
+
function subscribe() {
|
|
25
|
+
if (subscribers === 0) {
|
|
26
|
+
document.addEventListener("pointerdown", handlePointerDown, true);
|
|
27
|
+
document.addEventListener("keydown", handleKeyDown, true);
|
|
28
|
+
}
|
|
29
|
+
subscribers += 1;
|
|
30
|
+
return () => {
|
|
31
|
+
subscribers -= 1;
|
|
32
|
+
if (subscribers === 0) {
|
|
33
|
+
document.removeEventListener("pointerdown", handlePointerDown, true);
|
|
34
|
+
document.removeEventListener("keydown", handleKeyDown, true);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}
|
|
5
38
|
function usePointerFocusTracker() {
|
|
6
39
|
const [isPointerFocus, setIsPointerFocus] = (0, react.useState)(false);
|
|
7
|
-
|
|
40
|
+
(0, react.useEffect)(subscribe, []);
|
|
8
41
|
return {
|
|
9
42
|
isPointerFocus,
|
|
10
|
-
onPointerDown: (0, react.useCallback)(() => {
|
|
11
|
-
pointerDownRef.current = true;
|
|
12
|
-
}, []),
|
|
13
43
|
onFocusChange: (0, react.useCallback)((focused) => {
|
|
14
|
-
|
|
15
|
-
setIsPointerFocus(pointerDownRef.current);
|
|
16
|
-
pointerDownRef.current = false;
|
|
17
|
-
} else {
|
|
18
|
-
setIsPointerFocus(false);
|
|
19
|
-
pointerDownRef.current = false;
|
|
20
|
-
}
|
|
44
|
+
setIsPointerFocus(focused && modality === "pointer");
|
|
21
45
|
}, [])
|
|
22
46
|
};
|
|
23
47
|
}
|
|
@@ -1,22 +1,46 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
-
import { useCallback,
|
|
2
|
+
import { useCallback, useEffect, useState } from "react";
|
|
3
3
|
//#region src/hooks/usePointerFocusTracker.ts
|
|
4
|
+
/**
|
|
5
|
+
* The most recent way the user interacted with the page, shared by every field on it. Focus that
|
|
6
|
+
* follows a pointer press hides the ring; focus that follows a key press, or arrives before any
|
|
7
|
+
* interaction, shows it. This is the `:focus-visible` heuristic browsers apply to buttons. Text
|
|
8
|
+
* inputs are exempt from it (one always matches `:focus-visible`), so without this the ring and the
|
|
9
|
+
* border would both paint on every click.
|
|
10
|
+
*
|
|
11
|
+
* Listening on the document rather than the field is what covers a click on the field's label and a
|
|
12
|
+
* `focus()` call: neither delivers a pointerdown to the field itself.
|
|
13
|
+
*/
|
|
14
|
+
let modality = "keyboard";
|
|
15
|
+
let subscribers = 0;
|
|
16
|
+
function handlePointerDown() {
|
|
17
|
+
modality = "pointer";
|
|
18
|
+
}
|
|
19
|
+
function handleKeyDown(event) {
|
|
20
|
+
if (event.metaKey || event.ctrlKey || event.altKey) return;
|
|
21
|
+
modality = "keyboard";
|
|
22
|
+
}
|
|
23
|
+
function subscribe() {
|
|
24
|
+
if (subscribers === 0) {
|
|
25
|
+
document.addEventListener("pointerdown", handlePointerDown, true);
|
|
26
|
+
document.addEventListener("keydown", handleKeyDown, true);
|
|
27
|
+
}
|
|
28
|
+
subscribers += 1;
|
|
29
|
+
return () => {
|
|
30
|
+
subscribers -= 1;
|
|
31
|
+
if (subscribers === 0) {
|
|
32
|
+
document.removeEventListener("pointerdown", handlePointerDown, true);
|
|
33
|
+
document.removeEventListener("keydown", handleKeyDown, true);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
}
|
|
4
37
|
function usePointerFocusTracker() {
|
|
5
38
|
const [isPointerFocus, setIsPointerFocus] = useState(false);
|
|
6
|
-
|
|
39
|
+
useEffect(subscribe, []);
|
|
7
40
|
return {
|
|
8
41
|
isPointerFocus,
|
|
9
|
-
onPointerDown: useCallback(() => {
|
|
10
|
-
pointerDownRef.current = true;
|
|
11
|
-
}, []),
|
|
12
42
|
onFocusChange: useCallback((focused) => {
|
|
13
|
-
|
|
14
|
-
setIsPointerFocus(pointerDownRef.current);
|
|
15
|
-
pointerDownRef.current = false;
|
|
16
|
-
} else {
|
|
17
|
-
setIsPointerFocus(false);
|
|
18
|
-
pointerDownRef.current = false;
|
|
19
|
-
}
|
|
43
|
+
setIsPointerFocus(focused && modality === "pointer");
|
|
20
44
|
}, [])
|
|
21
45
|
};
|
|
22
46
|
}
|
|
@@ -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-
|
|
10
|
-
readonly [x: string]: "var(--uds-
|
|
9
|
+
}): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".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-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".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-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-none)" | "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-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-none)" | "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-
|
|
10
|
-
readonly [x: string]: "var(--uds-
|
|
9
|
+
}): Record<".uds-inset-shadow-sm" | ".uds-inset-shadow-md" | ".uds-inset-shadow-lg" | ".uds-inset-shadow-xl" | ".uds-inset-shadow-2xl" | ".uds-inset-shadow-none" | ".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-sm" | ".uds-drop-shadow-md" | ".uds-drop-shadow-lg" | ".uds-drop-shadow-xl" | ".uds-drop-shadow-2xl" | ".uds-drop-shadow-none" | ".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-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-none)" | "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-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-none)" | "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
|