@salt-ds/lab 1.0.0-alpha.58 → 1.0.0-alpha.59
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/CHANGELOG.md +69 -0
- package/css/salt-lab.css +5 -49
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +2 -2
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/dialog/DialogHeader.css.js +1 -1
- package/dist-cjs/dialog/DialogHeader.js +2 -2
- package/dist-cjs/dialog/DialogHeader.js.map +1 -1
- package/dist-cjs/index.js +0 -2
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/overlay/OverlayHeader.css.js +1 -1
- package/dist-cjs/overlay/OverlayHeader.js +2 -2
- package/dist-cjs/overlay/OverlayHeader.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +3 -3
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +2 -2
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/dialog/DialogHeader.css.js +1 -1
- package/dist-es/dialog/DialogHeader.js +3 -3
- package/dist-es/dialog/DialogHeader.js.map +1 -1
- package/dist-es/index.js +0 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/overlay/OverlayHeader.css.js +1 -1
- package/dist-es/overlay/OverlayHeader.js +3 -3
- package/dist-es/overlay/OverlayHeader.js.map +1 -1
- package/dist-types/date-picker/DatePicker.d.ts +1 -1
- package/dist-types/date-picker/DatePickerActions.d.ts +2 -2
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +1 -1
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +1 -1
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +1 -1
- package/dist-types/index.d.ts +0 -1
- package/dist-types/localization-provider/LocalizationProvider.d.ts +2 -2
- package/package.json +3 -3
- package/dist-cjs/skip-link/SkipLink.css.js +0 -6
- package/dist-cjs/skip-link/SkipLink.css.js.map +0 -1
- package/dist-cjs/skip-link/SkipLink.js +0 -53
- package/dist-cjs/skip-link/SkipLink.js.map +0 -1
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js +0 -76
- package/dist-cjs/skip-link/internal/useManageFocusOnTarget.js.map +0 -1
- package/dist-es/skip-link/SkipLink.css.js +0 -4
- package/dist-es/skip-link/SkipLink.css.js.map +0 -1
- package/dist-es/skip-link/SkipLink.js +0 -51
- package/dist-es/skip-link/SkipLink.js.map +0 -1
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js +0 -74
- package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map +0 -1
- package/dist-types/skip-link/SkipLink.d.ts +0 -10
- package/dist-types/skip-link/index.d.ts +0 -1
- package/dist-types/skip-link/internal/useManageFocusOnTarget.d.ts +0 -15
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var react = require('react');
|
|
4
|
-
|
|
5
|
-
const FOCUS_TIMEOUT = 50;
|
|
6
|
-
const useManageFocusOnTarget = ({
|
|
7
|
-
onKeyUp,
|
|
8
|
-
onBlur,
|
|
9
|
-
onClick,
|
|
10
|
-
targetRef,
|
|
11
|
-
targetClass
|
|
12
|
-
}) => {
|
|
13
|
-
const [target, setTarget] = react.useState();
|
|
14
|
-
const hasTabIndex = react.useRef();
|
|
15
|
-
const shouldRemoveTabIndex = react.useRef();
|
|
16
|
-
react.useEffect(() => {
|
|
17
|
-
if (targetRef == null ? void 0 : targetRef.current) {
|
|
18
|
-
setTarget(targetRef.current);
|
|
19
|
-
}
|
|
20
|
-
}, [targetRef]);
|
|
21
|
-
if (!target) {
|
|
22
|
-
return {};
|
|
23
|
-
}
|
|
24
|
-
const addTabIndex = () => {
|
|
25
|
-
const tabIndex = target.getAttribute("tabIndex");
|
|
26
|
-
hasTabIndex.current = tabIndex || tabIndex === "0";
|
|
27
|
-
if (!hasTabIndex.current) {
|
|
28
|
-
shouldRemoveTabIndex.current = true;
|
|
29
|
-
target.setAttribute("tabIndex", "-1");
|
|
30
|
-
}
|
|
31
|
-
};
|
|
32
|
-
const removeTabIndex = () => {
|
|
33
|
-
if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
|
|
34
|
-
target.removeAttribute("tabIndex");
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
const handleFocusOnTarget = () => {
|
|
38
|
-
shouldRemoveTabIndex.current = false;
|
|
39
|
-
target.classList.add(targetClass);
|
|
40
|
-
};
|
|
41
|
-
const handleBlurFromTarget = () => {
|
|
42
|
-
shouldRemoveTabIndex.current = true;
|
|
43
|
-
removeTabIndex();
|
|
44
|
-
target.classList.remove(targetClass);
|
|
45
|
-
};
|
|
46
|
-
function moveToTarget() {
|
|
47
|
-
addTabIndex();
|
|
48
|
-
setTimeout(() => {
|
|
49
|
-
target == null ? void 0 : target.focus();
|
|
50
|
-
}, FOCUS_TIMEOUT);
|
|
51
|
-
target == null ? void 0 : target.addEventListener("focus", handleFocusOnTarget, { once: true });
|
|
52
|
-
target == null ? void 0 : target.addEventListener("blur", handleBlurFromTarget, { once: true });
|
|
53
|
-
}
|
|
54
|
-
const handleKeyUp = (event) => {
|
|
55
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
56
|
-
moveToTarget();
|
|
57
|
-
}
|
|
58
|
-
onKeyUp == null ? void 0 : onKeyUp(event);
|
|
59
|
-
};
|
|
60
|
-
const handleClick = (event) => {
|
|
61
|
-
moveToTarget();
|
|
62
|
-
onClick == null ? void 0 : onClick(event);
|
|
63
|
-
};
|
|
64
|
-
const handleBlur = (event) => {
|
|
65
|
-
setTimeout(removeTabIndex, FOCUS_TIMEOUT);
|
|
66
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
67
|
-
};
|
|
68
|
-
return {
|
|
69
|
-
onBlur: handleBlur,
|
|
70
|
-
onClick: handleClick,
|
|
71
|
-
onKeyUp: handleKeyUp
|
|
72
|
-
};
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
exports.useManageFocusOnTarget = useManageFocusOnTarget;
|
|
76
|
-
//# sourceMappingURL=useManageFocusOnTarget.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n type FocusEventHandler,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n onBlur?: FocusEventHandler;\n onClick?: MouseEventHandler;\n onKeyUp?: KeyboardEventHandler;\n targetRef: RefObject<HTMLElement> | undefined;\n targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n onBlur?: FocusEventHandler<HTMLAnchorElement>;\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n onKeyUp,\n onBlur,\n onClick,\n targetRef,\n targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n const [target, setTarget] = useState<HTMLElement>();\n\n const hasTabIndex = useRef<boolean | string>();\n const shouldRemoveTabIndex = useRef<boolean>();\n\n useEffect(() => {\n if (targetRef?.current) {\n setTarget(targetRef.current);\n }\n }, [targetRef]);\n\n if (!target) {\n return {};\n }\n\n const addTabIndex = () => {\n const tabIndex = target.getAttribute(\"tabIndex\");\n hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n if (!hasTabIndex.current) {\n shouldRemoveTabIndex.current = true;\n target.setAttribute(\"tabIndex\", \"-1\");\n }\n };\n\n const removeTabIndex = () => {\n if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n target.removeAttribute(\"tabIndex\");\n }\n };\n\n const handleFocusOnTarget = () => {\n shouldRemoveTabIndex.current = false;\n target.classList.add(targetClass);\n };\n\n const handleBlurFromTarget = () => {\n shouldRemoveTabIndex.current = true;\n removeTabIndex();\n target.classList.remove(targetClass);\n };\n\n function moveToTarget() {\n addTabIndex();\n setTimeout(() => {\n target?.focus();\n }, FOCUS_TIMEOUT);\n\n target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n }\n\n const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n moveToTarget();\n }\n onKeyUp?.(event);\n };\n\n const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n moveToTarget();\n onClick?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n onBlur?.(event);\n };\n\n return {\n onBlur: handleBlur,\n onClick: handleClick,\n onKeyUp: handleKeyUp,\n };\n};\n"],"names":["useState","useRef","useEffect"],"mappings":";;;;AAUA,MAAM,aAAgB,GAAA,EAAA;AAiBf,MAAM,yBAAyB,CAAC;AAAA,EACrC,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAA2D,KAAA;AACzD,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,cAAsB,EAAA;AAElD,EAAA,MAAM,cAAcC,YAAyB,EAAA;AAC7C,EAAA,MAAM,uBAAuBA,YAAgB,EAAA;AAE7C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,OAAS,EAAA;AACtB,MAAA,SAAA,CAAU,UAAU,OAAO,CAAA;AAAA;AAC7B,GACF,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAA,OAAO,EAAC;AAAA;AAGV,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,QAAA,GAAW,MAAO,CAAA,YAAA,CAAa,UAAU,CAAA;AAC/C,IAAY,WAAA,CAAA,OAAA,GAAU,YAAY,QAAa,KAAA,GAAA;AAE/C,IAAI,IAAA,CAAC,YAAY,OAAS,EAAA;AACxB,MAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA;AAC/B,MAAO,MAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA;AACtC,GACF;AAEA,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,IAAI,CAAC,WAAA,CAAY,OAAW,IAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,MAAA,MAAA,CAAO,gBAAgB,UAAU,CAAA;AAAA;AACnC,GACF;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,oBAAA,CAAqB,OAAU,GAAA,KAAA;AAC/B,IAAO,MAAA,CAAA,SAAA,CAAU,IAAI,WAAW,CAAA;AAAA,GAClC;AAEA,EAAA,MAAM,uBAAuB,MAAM;AACjC,IAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA;AAC/B,IAAe,cAAA,EAAA;AACf,IAAO,MAAA,CAAA,SAAA,CAAU,OAAO,WAAW,CAAA;AAAA,GACrC;AAEA,EAAA,SAAS,YAAe,GAAA;AACtB,IAAY,WAAA,EAAA;AACZ,IAAA,UAAA,CAAW,MAAM;AACf,MAAQ,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,EAAA;AAAA,OACP,aAAa,CAAA;AAEhB,IAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,gBAAiB,CAAA,OAAA,EAAS,mBAAqB,EAAA,EAAE,MAAM,IAAK,EAAA,CAAA;AACpE,IAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,gBAAiB,CAAA,MAAA,EAAQ,oBAAsB,EAAA,EAAE,MAAM,IAAK,EAAA,CAAA;AAAA;AAGtE,EAAM,MAAA,WAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,MAAa,YAAA,EAAA;AAAA;AAEf,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,WAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,IAAa,YAAA,EAAA;AACb,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,GACZ;AAEA,EAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,IAAA,UAAA,CAAW,gBAAgB,aAAa,CAAA;AACxC,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACX;AAEA,EAAO,OAAA;AAAA,IACL,MAAQ,EAAA,UAAA;AAAA,IACR,OAAS,EAAA,WAAA;AAAA,IACT,OAAS,EAAA;AAAA,GACX;AACF;;;;"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = "/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n top: 0;\n left: 0;\n opacity: 0;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n position: absolute;\n\n color: var(--salt-content-primary-foreground);\n letter-spacing: var(--salt-text-letterSpacing);\n text-decoration: var(--salt-navigable-textDecoration);\n font-family: var(--salt-text-fontFamily);\n white-space: nowrap;\n background: var(--saltSkipLink-background, var(--salt-container-primary-background));\n z-index: calc(var(--salt-zIndex-appHeader) + 1);\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n opacity: 1;\n width: auto;\n height: max(var(--salt-size-base), auto);\n padding: var(--salt-spacing-100) var(--salt-spacing-300);\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n box-shadow: var(--salt-overlayable-shadow);\n}\n\n@keyframes fade-out-back-outline {\n /* required animation to apply an opacity fade-out-back to outline */\n 0% {\n outline-color: var(--salt-focused-outlineColor);\n }\n 100% {\n outline-color: transparent;\n }\n}\n\n.saltSkipLink-target {\n animation: fade-out-back-outline var(--salt-duration-notable) var(--salt-animation-timing-function) both;\n outline: var(--salt-focused-outline);\n}\n@media (prefers-reduced-motion: reduce) {\n .saltSkipLink-target {\n animation: none;\n }\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=SkipLink.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLink.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
3
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
|
-
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import { clsx } from 'clsx';
|
|
6
|
-
import { forwardRef, useState, useRef, useEffect } from 'react';
|
|
7
|
-
import { useManageFocusOnTarget } from './internal/useManageFocusOnTarget.js';
|
|
8
|
-
import css_248z from './SkipLink.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltSkipLink");
|
|
11
|
-
const SkipLink = forwardRef(
|
|
12
|
-
function SkipLink2({ className, targetId, children, onKeyUp, onBlur, onClick, ...rest }, ref) {
|
|
13
|
-
const [isTargetAvailable, setIsTargetAvailable] = useState(false);
|
|
14
|
-
const targetWindow = useWindow();
|
|
15
|
-
useComponentCssInjection({
|
|
16
|
-
testId: "salt-skip-link",
|
|
17
|
-
css: css_248z,
|
|
18
|
-
window: targetWindow
|
|
19
|
-
});
|
|
20
|
-
const targetRef = useRef(null);
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
if (targetWindow) {
|
|
23
|
-
targetRef.current = targetWindow.document.getElementById(targetId);
|
|
24
|
-
}
|
|
25
|
-
setIsTargetAvailable(!!targetRef.current);
|
|
26
|
-
}, [targetId, targetWindow]);
|
|
27
|
-
const eventHandlers = useManageFocusOnTarget({
|
|
28
|
-
onKeyUp,
|
|
29
|
-
onBlur,
|
|
30
|
-
onClick,
|
|
31
|
-
targetRef,
|
|
32
|
-
targetClass: withBaseName("target")
|
|
33
|
-
});
|
|
34
|
-
if (!isTargetAvailable) return null;
|
|
35
|
-
return /* @__PURE__ */ jsx(
|
|
36
|
-
"a",
|
|
37
|
-
{
|
|
38
|
-
className: clsx(withBaseName(), className),
|
|
39
|
-
href: `#${targetId}`,
|
|
40
|
-
ref,
|
|
41
|
-
target: "_self",
|
|
42
|
-
...eventHandlers,
|
|
43
|
-
...rest,
|
|
44
|
-
children
|
|
45
|
-
}
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
export { SkipLink };
|
|
51
|
-
//# sourceMappingURL=SkipLink.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type ComponentPropsWithoutRef,\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\nimport skipLinkCss from \"./SkipLink.css\";\n\ninterface SkipLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n /**\n * The ID of the target element to apply focus when the link is clicked.\n * If the element with this ID is not found, the SkipLink will not be rendered.\n */\n targetId: string;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n function SkipLink(\n { className, targetId, children, onKeyUp, onBlur, onClick, ...rest },\n ref,\n ) {\n const [isTargetAvailable, setIsTargetAvailable] = useState(false);\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-skip-link\",\n css: skipLinkCss,\n window: targetWindow,\n });\n\n const targetRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n if (targetWindow) {\n targetRef.current = targetWindow.document.getElementById(targetId);\n }\n setIsTargetAvailable(!!targetRef.current);\n }, [targetId, targetWindow]);\n\n const eventHandlers = useManageFocusOnTarget({\n onKeyUp,\n onBlur,\n onClick,\n targetRef,\n targetClass: withBaseName(\"target\"),\n });\n\n if (!isTargetAvailable) return null;\n return (\n <a\n className={clsx(withBaseName(), className)}\n href={`#${targetId}`}\n ref={ref}\n target=\"_self\"\n {...eventHandlers}\n {...rest}\n >\n {children}\n </a>\n );\n },\n);\n"],"names":["SkipLink","skipLinkCss"],"mappings":";;;;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAEzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SAAAA,CACP,EAAE,SAAA,EAAW,QAAU,EAAA,QAAA,EAAU,OAAS,EAAA,MAAA,EAAQ,OAAS,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAS,KAAK,CAAA;AAChE,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA;AAEjD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,YAAc,EAAA;AAChB,QAAA,SAAA,CAAU,OAAU,GAAA,YAAA,CAAa,QAAS,CAAA,cAAA,CAAe,QAAQ,CAAA;AAAA;AAEnE,MAAqB,oBAAA,CAAA,CAAC,CAAC,SAAA,CAAU,OAAO,CAAA;AAAA,KACvC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,IAAA,MAAM,gBAAgB,sBAAuB,CAAA;AAAA,MAC3C,OAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,EAAa,aAAa,QAAQ;AAAA,KACnC,CAAA;AAED,IAAI,IAAA,CAAC,mBAA0B,OAAA,IAAA;AAC/B,IACE,uBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,IAAA,EAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,QAClB,GAAA;AAAA,QACA,MAAO,EAAA,OAAA;AAAA,QACN,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { useState, useRef, useEffect } from 'react';
|
|
2
|
-
|
|
3
|
-
const FOCUS_TIMEOUT = 50;
|
|
4
|
-
const useManageFocusOnTarget = ({
|
|
5
|
-
onKeyUp,
|
|
6
|
-
onBlur,
|
|
7
|
-
onClick,
|
|
8
|
-
targetRef,
|
|
9
|
-
targetClass
|
|
10
|
-
}) => {
|
|
11
|
-
const [target, setTarget] = useState();
|
|
12
|
-
const hasTabIndex = useRef();
|
|
13
|
-
const shouldRemoveTabIndex = useRef();
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
if (targetRef == null ? void 0 : targetRef.current) {
|
|
16
|
-
setTarget(targetRef.current);
|
|
17
|
-
}
|
|
18
|
-
}, [targetRef]);
|
|
19
|
-
if (!target) {
|
|
20
|
-
return {};
|
|
21
|
-
}
|
|
22
|
-
const addTabIndex = () => {
|
|
23
|
-
const tabIndex = target.getAttribute("tabIndex");
|
|
24
|
-
hasTabIndex.current = tabIndex || tabIndex === "0";
|
|
25
|
-
if (!hasTabIndex.current) {
|
|
26
|
-
shouldRemoveTabIndex.current = true;
|
|
27
|
-
target.setAttribute("tabIndex", "-1");
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const removeTabIndex = () => {
|
|
31
|
-
if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
|
|
32
|
-
target.removeAttribute("tabIndex");
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const handleFocusOnTarget = () => {
|
|
36
|
-
shouldRemoveTabIndex.current = false;
|
|
37
|
-
target.classList.add(targetClass);
|
|
38
|
-
};
|
|
39
|
-
const handleBlurFromTarget = () => {
|
|
40
|
-
shouldRemoveTabIndex.current = true;
|
|
41
|
-
removeTabIndex();
|
|
42
|
-
target.classList.remove(targetClass);
|
|
43
|
-
};
|
|
44
|
-
function moveToTarget() {
|
|
45
|
-
addTabIndex();
|
|
46
|
-
setTimeout(() => {
|
|
47
|
-
target == null ? void 0 : target.focus();
|
|
48
|
-
}, FOCUS_TIMEOUT);
|
|
49
|
-
target == null ? void 0 : target.addEventListener("focus", handleFocusOnTarget, { once: true });
|
|
50
|
-
target == null ? void 0 : target.addEventListener("blur", handleBlurFromTarget, { once: true });
|
|
51
|
-
}
|
|
52
|
-
const handleKeyUp = (event) => {
|
|
53
|
-
if (event.key === "Enter" || event.key === " ") {
|
|
54
|
-
moveToTarget();
|
|
55
|
-
}
|
|
56
|
-
onKeyUp == null ? void 0 : onKeyUp(event);
|
|
57
|
-
};
|
|
58
|
-
const handleClick = (event) => {
|
|
59
|
-
moveToTarget();
|
|
60
|
-
onClick == null ? void 0 : onClick(event);
|
|
61
|
-
};
|
|
62
|
-
const handleBlur = (event) => {
|
|
63
|
-
setTimeout(removeTabIndex, FOCUS_TIMEOUT);
|
|
64
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
65
|
-
};
|
|
66
|
-
return {
|
|
67
|
-
onBlur: handleBlur,
|
|
68
|
-
onClick: handleClick,
|
|
69
|
-
onKeyUp: handleKeyUp
|
|
70
|
-
};
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
export { useManageFocusOnTarget };
|
|
74
|
-
//# sourceMappingURL=useManageFocusOnTarget.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n type FocusEventHandler,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n onBlur?: FocusEventHandler;\n onClick?: MouseEventHandler;\n onKeyUp?: KeyboardEventHandler;\n targetRef: RefObject<HTMLElement> | undefined;\n targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n onBlur?: FocusEventHandler<HTMLAnchorElement>;\n onClick?: MouseEventHandler<HTMLAnchorElement>;\n onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n onKeyUp,\n onBlur,\n onClick,\n targetRef,\n targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n const [target, setTarget] = useState<HTMLElement>();\n\n const hasTabIndex = useRef<boolean | string>();\n const shouldRemoveTabIndex = useRef<boolean>();\n\n useEffect(() => {\n if (targetRef?.current) {\n setTarget(targetRef.current);\n }\n }, [targetRef]);\n\n if (!target) {\n return {};\n }\n\n const addTabIndex = () => {\n const tabIndex = target.getAttribute(\"tabIndex\");\n hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n if (!hasTabIndex.current) {\n shouldRemoveTabIndex.current = true;\n target.setAttribute(\"tabIndex\", \"-1\");\n }\n };\n\n const removeTabIndex = () => {\n if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n target.removeAttribute(\"tabIndex\");\n }\n };\n\n const handleFocusOnTarget = () => {\n shouldRemoveTabIndex.current = false;\n target.classList.add(targetClass);\n };\n\n const handleBlurFromTarget = () => {\n shouldRemoveTabIndex.current = true;\n removeTabIndex();\n target.classList.remove(targetClass);\n };\n\n function moveToTarget() {\n addTabIndex();\n setTimeout(() => {\n target?.focus();\n }, FOCUS_TIMEOUT);\n\n target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n }\n\n const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n moveToTarget();\n }\n onKeyUp?.(event);\n };\n\n const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n moveToTarget();\n onClick?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n onBlur?.(event);\n };\n\n return {\n onBlur: handleBlur,\n onClick: handleClick,\n onKeyUp: handleKeyUp,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { type ComponentPropsWithoutRef } from "react";
|
|
2
|
-
interface SkipLinkProps extends ComponentPropsWithoutRef<"a"> {
|
|
3
|
-
/**
|
|
4
|
-
* The ID of the target element to apply focus when the link is clicked.
|
|
5
|
-
* If the element with this ID is not found, the SkipLink will not be rendered.
|
|
6
|
-
*/
|
|
7
|
-
targetId: string;
|
|
8
|
-
}
|
|
9
|
-
export declare const SkipLink: import("react").ForwardRefExoticComponent<SkipLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
10
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./SkipLink";
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler, type RefObject } from "react";
|
|
2
|
-
interface ManageFocusOnTargetProps {
|
|
3
|
-
onBlur?: FocusEventHandler;
|
|
4
|
-
onClick?: MouseEventHandler;
|
|
5
|
-
onKeyUp?: KeyboardEventHandler;
|
|
6
|
-
targetRef: RefObject<HTMLElement> | undefined;
|
|
7
|
-
targetClass: string;
|
|
8
|
-
}
|
|
9
|
-
interface ManageFocusOnTargetResult {
|
|
10
|
-
onBlur?: FocusEventHandler<HTMLAnchorElement>;
|
|
11
|
-
onClick?: MouseEventHandler<HTMLAnchorElement>;
|
|
12
|
-
onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;
|
|
13
|
-
}
|
|
14
|
-
export declare const useManageFocusOnTarget: ({ onKeyUp, onBlur, onClick, targetRef, targetClass, }: ManageFocusOnTargetProps) => ManageFocusOnTargetResult;
|
|
15
|
-
export {};
|