@yahoo/uds 3.175.7 → 3.175.8
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/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/components/client/Toast/UDSToastConfigProvider.d.cts +5 -5
- package/dist/components/client/Toast/UDSToastConfigProvider.d.ts +5 -5
- 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 +243 -243
- package/dist/uds/generated/componentData.js +243 -243
- package/dist/uds/generated/tailwindPurge.cjs +6 -6
- package/dist/uds/generated/tailwindPurge.js +6 -6
- package/generated/componentData.json +345 -345
- package/generated/tailwindPurge.ts +1 -1
- package/package.json +1 -1
|
@@ -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
|