@canonical/react-ds-core 0.9.0-experimental.9 → 0.10.0-experimental.0
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/README.md +1 -1
- package/dist/esm/ui/Button/Button.js +2 -2
- package/dist/esm/ui/Button/Button.js.map +1 -1
- package/dist/esm/ui/Button/types.js +10 -0
- package/dist/esm/ui/Button/types.js.map +1 -1
- package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js +15 -4
- package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js.map +1 -1
- package/dist/esm/ui/Tooltip/index.js +2 -2
- package/dist/esm/ui/Tooltip/index.js.map +1 -1
- package/dist/esm/ui/Tooltip/styles.css +12 -1
- package/dist/esm/ui/hooks/index.js +1 -1
- package/dist/esm/ui/hooks/index.js.map +1 -1
- package/dist/esm/ui/hooks/useDelayedToggle/index.js +1 -1
- package/dist/esm/ui/hooks/useDelayedToggle/index.js.map +1 -1
- package/dist/esm/ui/hooks/useDelayedToggle/useDelayedToggle.js +9 -1
- package/dist/esm/ui/hooks/useDelayedToggle/useDelayedToggle.js.map +1 -1
- package/dist/esm/ui/hooks/usePopup/index.js +1 -1
- package/dist/esm/ui/hooks/usePopup/index.js.map +1 -1
- package/dist/esm/ui/hooks/usePopup/usePopup.js +29 -7
- package/dist/esm/ui/hooks/usePopup/usePopup.js.map +1 -1
- package/dist/esm/ui/hooks/useResizeObserver/index.js +1 -1
- package/dist/esm/ui/hooks/useResizeObserver/index.js.map +1 -1
- package/dist/esm/ui/hooks/useResizeObserver/useResizeObserver.js +3 -4
- package/dist/esm/ui/hooks/useResizeObserver/useResizeObserver.js.map +1 -1
- package/dist/esm/ui/hooks/useWindowDimensions/index.js +1 -1
- package/dist/esm/ui/hooks/useWindowDimensions/index.js.map +1 -1
- package/dist/esm/ui/hooks/useWindowDimensions/useWindowDimensions.js +10 -13
- package/dist/esm/ui/hooks/useWindowDimensions/useWindowDimensions.js.map +1 -1
- package/dist/esm/ui/hooks/useWindowFitment/index.js +1 -1
- package/dist/esm/ui/hooks/useWindowFitment/index.js.map +1 -1
- package/dist/esm/ui/hooks/useWindowFitment/useWindowFitment.js +45 -16
- package/dist/esm/ui/hooks/useWindowFitment/useWindowFitment.js.map +1 -1
- package/dist/types/ui/Button/Button.d.ts +1 -1
- package/dist/types/ui/Button/Button.d.ts.map +1 -1
- package/dist/types/ui/Button/index.d.ts +1 -1
- package/dist/types/ui/Button/index.d.ts.map +1 -1
- package/dist/types/ui/Button/types.d.ts +9 -6
- package/dist/types/ui/Button/types.d.ts.map +1 -1
- package/dist/types/ui/Chip/Chip.d.ts.map +1 -1
- package/dist/types/ui/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/ui/Tooltip/common/TooltipArea/TooltipArea.d.ts +1 -1
- package/dist/types/ui/Tooltip/common/TooltipArea/TooltipArea.d.ts.map +1 -1
- package/dist/types/ui/Tooltip/common/TooltipArea/types.d.ts +4 -0
- package/dist/types/ui/Tooltip/common/TooltipArea/types.d.ts.map +1 -1
- package/dist/types/ui/Tooltip/index.d.ts +2 -2
- package/dist/types/ui/Tooltip/index.d.ts.map +1 -1
- package/dist/types/ui/Tooltip/types.d.ts.map +1 -1
- package/dist/types/ui/Tooltip/withTooltip.d.ts +1 -1
- package/dist/types/ui/Tooltip/withTooltip.d.ts.map +1 -1
- package/dist/types/ui/hooks/index.d.ts +1 -1
- package/dist/types/ui/hooks/index.d.ts.map +1 -1
- package/dist/types/ui/hooks/useDelayedToggle/index.d.ts +1 -1
- package/dist/types/ui/hooks/useDelayedToggle/index.d.ts.map +1 -1
- package/dist/types/ui/hooks/useDelayedToggle/useDelayedToggle.d.ts.map +1 -1
- package/dist/types/ui/hooks/usePopup/index.d.ts +1 -1
- package/dist/types/ui/hooks/usePopup/index.d.ts.map +1 -1
- package/dist/types/ui/hooks/usePopup/types.d.ts +5 -0
- package/dist/types/ui/hooks/usePopup/types.d.ts.map +1 -1
- package/dist/types/ui/hooks/usePopup/usePopup.d.ts +2 -1
- package/dist/types/ui/hooks/usePopup/usePopup.d.ts.map +1 -1
- package/dist/types/ui/hooks/useResizeObserver/index.d.ts +1 -1
- package/dist/types/ui/hooks/useResizeObserver/index.d.ts.map +1 -1
- package/dist/types/ui/hooks/useResizeObserver/useResizeObserver.d.ts.map +1 -1
- package/dist/types/ui/hooks/useWindowDimensions/index.d.ts +1 -1
- package/dist/types/ui/hooks/useWindowDimensions/index.d.ts.map +1 -1
- package/dist/types/ui/hooks/useWindowDimensions/useWindowDimensions.d.ts.map +1 -1
- package/dist/types/ui/hooks/useWindowFitment/index.d.ts +1 -1
- package/dist/types/ui/hooks/useWindowFitment/index.d.ts.map +1 -1
- package/dist/types/ui/hooks/useWindowFitment/types.d.ts +7 -0
- package/dist/types/ui/hooks/useWindowFitment/types.d.ts.map +1 -1
- package/dist/types/ui/hooks/useWindowFitment/useWindowFitment.d.ts +1 -1
- package/dist/types/ui/hooks/useWindowFitment/useWindowFitment.d.ts.map +1 -1
- package/package.json +23 -24
package/README.md
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import "./styles.css";
|
3
3
|
/** Buttons are clickable elements used to perform an action. */
|
4
|
-
const Button = ({ id, className,
|
4
|
+
const Button = ({ id, className, children, style, appearance, ...props }) => {
|
5
5
|
return (_jsx("button", { id: id, className: ["ds", "button", appearance, className]
|
6
6
|
.filter(Boolean)
|
7
|
-
.join(" "),
|
7
|
+
.join(" "), style: style, "aria-label": props["aria-label"] || children?.toString(), ...props, children: children }));
|
8
8
|
};
|
9
9
|
export default Button;
|
10
10
|
//# sourceMappingURL=Button.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,QAAQ,EACR,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACF,EAAsB,EAAE;IAC9B,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;aAC/C,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,KAAK,EAAE,KAAK,gBAIA,KAAK,CAAC,YAAY,CAAC,IAAI,QAAQ,EAAE,QAAQ,EAAE,KACnD,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
@@ -1,2 +1,12 @@
|
|
1
|
+
// TODO: this is how appearance could work as enum
|
2
|
+
//
|
3
|
+
// export enum ButtonAppearance {
|
4
|
+
// DEFAULT = "default",
|
5
|
+
// BASE = "base",
|
6
|
+
// POSITIVE = "positive",
|
7
|
+
// NEGATIVE = "negative",
|
8
|
+
// LINK = "link",
|
9
|
+
// }
|
10
|
+
//
|
1
11
|
export {};
|
2
12
|
//# sourceMappingURL=types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":""}
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,EAAE;AACF,iCAAiC;AACjC,yBAAyB;AACzB,mBAAmB;AACnB,2BAA2B;AAC3B,2BAA2B;AAC3B,mBAAmB;AACnB,IAAI;AACJ,EAAE"}
|
@@ -8,17 +8,28 @@ const componentCssClassName = "ds tooltip-area";
|
|
8
8
|
* Wraps a target element with a tooltip.
|
9
9
|
* This component allows you to attach a tooltip to any JSX fragment.
|
10
10
|
*/
|
11
|
-
const TooltipArea = ({ children, Message, distance = "6px", targetElementId, targetElementClassName, targetElementStyle, messageElementClassName, messageElementStyle, parentElement, ...props }) => {
|
12
|
-
const { targetRef, popupRef, popupPositionStyle, popupId, isOpen, handleTriggerFocus, handleTriggerBlur, handleTriggerEnter, handleTriggerLeave, bestPosition, } = usePopup({ distance, ...props });
|
13
|
-
const TooltipMessageElement = (_jsx(Tooltip, { id: popupId, className: [
|
11
|
+
const TooltipArea = ({ children, style, className, Message, distance = "6px", targetElementId, targetElementClassName, targetElementStyle, messageElementClassName, messageElementStyle, parentElement, autoFit, ...props }) => {
|
12
|
+
const { targetRef, popupRef, popupPositionStyle, popupId, isOpen, handleTriggerFocus, handleTriggerBlur, handleTriggerEnter, handleTriggerLeave, bestPosition, } = usePopup({ distance, autoFit, ...props });
|
13
|
+
const TooltipMessageElement = (_jsx(Tooltip, { id: popupId, className: [
|
14
|
+
bestPosition?.positionName,
|
15
|
+
messageElementClassName,
|
16
|
+
autoFit && "autofit",
|
17
|
+
]
|
14
18
|
.filter(Boolean)
|
15
19
|
.join(" "), onPointerEnter: handleTriggerEnter, onFocus: handleTriggerFocus, ref: popupRef, style: {
|
16
20
|
...messageElementStyle,
|
17
21
|
...popupPositionStyle,
|
18
22
|
// @ts-ignore allow binding arrow size to distance, as it is needed both in JS and CSS calculations
|
19
23
|
"--tooltip-spacing-arrow-size": distance,
|
24
|
+
...(autoFit &&
|
25
|
+
bestPosition?.autoFitOffset && {
|
26
|
+
"--tooltip-arrow-offset-top": `${bestPosition?.autoFitOffset.top || 0}px`,
|
27
|
+
"--tooltip-arrow-offset-left": `${bestPosition?.autoFitOffset.left || 0}px`,
|
28
|
+
}),
|
20
29
|
}, isOpen: isOpen, children: Message }));
|
21
|
-
return (
|
30
|
+
return (
|
31
|
+
// biome-ignore lint/a11y/noStaticElementInteractions: TODO this is kept as is to prevent breaking changes
|
32
|
+
_jsxs("span", { className: [componentCssClassName, className].filter(Boolean).join(" "), style: style, onFocus: handleTriggerFocus, onBlur: handleTriggerBlur, onPointerEnter: handleTriggerEnter, onPointerLeave: handleTriggerLeave, children: [_jsx("span", { id: targetElementId, style: targetElementStyle, className: ["target", targetElementClassName].filter(Boolean).join(" "), ref: targetRef, "aria-describedby": popupId, children: children }), typeof window !== "undefined"
|
22
33
|
? // Portals allow the tooltip to be rendered outside the parent element
|
23
34
|
// This is helpful when the parent element is a scrollable container or has bounds that may be
|
24
35
|
// overflown by the tooltip message.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TooltipArea.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":";
|
1
|
+
{"version":3,"file":"TooltipArea.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGzC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,sBAAsB,EACtB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACS,EAAgB,EAAE;IACnC,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,GACb,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAE9C,MAAM,qBAAqB,GAAG,CAC5B,KAAC,OAAO,IACN,EAAE,EAAE,OAAO,EACX,SAAS,EAAE;YACT,YAAY,EAAE,YAAY;YAC1B,uBAAuB;YACvB,OAAO,IAAI,SAAS;SACrB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE;YACL,GAAG,mBAAmB;YACtB,GAAG,kBAAkB;YACrB,mGAAmG;YACnG,8BAA8B,EAAE,QAAQ;YACxC,GAAG,CAAC,OAAO;gBACT,YAAY,EAAE,aAAa,IAAI;gBAC7B,4BAA4B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI;gBACzE,6BAA6B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI;aAC5E,CAAC;SACL,EACD,MAAM,EAAE,MAAM,YAEb,OAAO,GACA,CACX,CAAC;IAEF,OAAO;IACL,0GAA0G;IAC1G,gBACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,cAAc,EAAE,kBAAkB,EAClC,cAAc,EAAE,kBAAkB,aAElC,eACE,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,GAAG,EAAE,SAAS,sBACI,OAAO,YAExB,QAAQ,GACJ,EAIN,OAAO,MAAM,KAAK,WAAW;gBAC5B,CAAC,CAAC,sEAAsE;oBACtE,8FAA8F;oBAC9F,oCAAoC;oBACpC,YAAY,CAAC,qBAAqB,EAAE,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAC;gBACrE,CAAC,CAAC,qBAAqB,IACpB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
/* @canonical/generator-ds 0.9.0-experimental.4 */
|
2
|
-
export { default as Tooltip } from "./Tooltip.js";
|
3
|
-
export { default as withTooltip } from "./withTooltip.js";
|
4
2
|
export * from "./common/index.js";
|
3
|
+
export { default as Tooltip } from "./Tooltip.js";
|
5
4
|
export * from "./types.js";
|
5
|
+
export { default as withTooltip } from "./withTooltip.js";
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Tooltip/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Tooltip/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAElD,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC"}
|
@@ -18,6 +18,9 @@
|
|
18
18
|
--tooltip-line-height: line height of the tooltip
|
19
19
|
|
20
20
|
--tooltip-spacing-arrow-size: size of the arrow
|
21
|
+
|
22
|
+
--tooltip-arrow-offset-left: offset of the arrow from the left
|
23
|
+
--tooltip-arrow-offset-top: offset of the arrow from the top
|
21
24
|
*/
|
22
25
|
|
23
26
|
.ds.tooltip {
|
@@ -56,7 +59,8 @@
|
|
56
59
|
pointer-events: auto;
|
57
60
|
display: inline-block;
|
58
61
|
transition: opacity 0.1s ease-in-out;
|
59
|
-
position:
|
62
|
+
position: fixed;
|
63
|
+
overflow: auto;
|
60
64
|
|
61
65
|
&[aria-hidden="true"] {
|
62
66
|
opacity: 0;
|
@@ -70,6 +74,13 @@
|
|
70
74
|
visibility: visible;
|
71
75
|
}
|
72
76
|
|
77
|
+
&.autofit {
|
78
|
+
&::before {
|
79
|
+
transform: translateX(var(--tooltip-arrow-offset-left))
|
80
|
+
translateY(var(--tooltip-arrow-offset-top));
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
73
84
|
/* triangle */
|
74
85
|
&::before {
|
75
86
|
content: "";
|
@@ -1,6 +1,6 @@
|
|
1
1
|
export * from "./useDelayedToggle/index.js";
|
2
2
|
export * from "./usePopup/index.js";
|
3
|
-
export * from "./useWindowFitment/index.js";
|
4
3
|
export * from "./useResizeObserver/index.js";
|
5
4
|
export * from "./useWindowDimensions/index.js";
|
5
|
+
export * from "./useWindowFitment/index.js";
|
6
6
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { useCallback, useRef, useState } from "react";
|
1
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
2
2
|
/**
|
3
3
|
* Hook to toggle a flag with a delay.
|
4
4
|
* Allows the caller to `activate()` or `deactivate()` some flag
|
@@ -31,6 +31,14 @@ const useDelayedToggle = ({ activateDelay = 150, deactivateDelay = 150, onActiva
|
|
31
31
|
onDeactivate(event);
|
32
32
|
}, deactivateDelay));
|
33
33
|
}, [deactivateDelay, replaceTimer, onDeactivate]);
|
34
|
+
// Cleanup
|
35
|
+
useEffect(() => {
|
36
|
+
return () => {
|
37
|
+
if (flagTimeout.current) {
|
38
|
+
clearTimeout(flagTimeout.current);
|
39
|
+
}
|
40
|
+
};
|
41
|
+
}, []);
|
34
42
|
return { flag, activate, deactivate };
|
35
43
|
};
|
36
44
|
export default useDelayedToggle;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useDelayedToggle.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/useDelayedToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,
|
1
|
+
{"version":3,"file":"useDelayedToggle.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/useDelayedToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjE;;;;;;;;GAQG;AACH,MAAM,gBAAgB,GAAG,CAAC,EACxB,aAAa,GAAG,GAAG,EACnB,eAAe,GAAG,GAAG,EACrB,UAAU,EACV,YAAY,GACU,EAA0B,EAAE;IAClD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,MAAM,CACxB,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAwC,EAAE,EAAE;QAC3C,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC;QACD,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;IACjC,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAY,EAAE,EAAE;QACf,YAAY,CACV,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,IAAI,UAAU;gBAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,EAAE,aAAa,CAAC,CAClB,CAAC;IACJ,CAAC,EACD,CAAC,aAAa,EAAE,YAAY,EAAE,UAAU,CAAC,CAC1C,CAAC;IAEF,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAY,EAAE,EAAE;QACf,YAAY,CACV,UAAU,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,IAAI,YAAY;gBAAE,YAAY,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC,EAAE,eAAe,CAAC,CACpB,CAAC;IACJ,CAAC,EACD,CAAC,eAAe,EAAE,YAAY,EAAE,YAAY,CAAC,CAC9C,CAAC;IAEF,UAAU;IACV,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxB,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC"}
|
@@ -1,5 +1,4 @@
|
|
1
|
-
import { useCallback, useId, } from "react";
|
2
|
-
import { useState } from "react";
|
1
|
+
import { useCallback, useEffect, useId, useState, } from "react";
|
3
2
|
import { useDelayedToggle } from "../useDelayedToggle/index.js";
|
4
3
|
import { useWindowFitment } from "../useWindowFitment/index.js";
|
5
4
|
/**
|
@@ -13,10 +12,12 @@ import { useWindowFitment } from "../useWindowFitment/index.js";
|
|
13
12
|
* @param onBlur A callback to be called when the target element loses focus.
|
14
13
|
* @param onShow A callback to be called when the popup is shown.
|
15
14
|
* @param onHide A callback to be called when the popup is hidden.
|
15
|
+
* @param closeOnEscape Whether the popup should close when the escape key is pressed. Defaults to true.
|
16
16
|
* @param props The props to be passed to the useWindowFitment hook.
|
17
17
|
* @returns The current state of the popup, and event handlers for the target element.
|
18
18
|
*/
|
19
|
-
const usePopup = ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter, onLeave, onFocus, onBlur, onShow, onHide, ...props }) => {
|
19
|
+
const usePopup = ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter, onLeave, onFocus, onBlur, onShow, onHide, closeOnEscape = true, ...props }) => {
|
20
|
+
const isServer = typeof window === "undefined";
|
20
21
|
const [isFocused, setIsFocused] = useState(false);
|
21
22
|
const popupId = useId();
|
22
23
|
const { flag: isOpenHook, deactivate: close, activate: open, } = useDelayedToggle({
|
@@ -32,27 +33,48 @@ const usePopup = ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter,
|
|
32
33
|
isOpen: isOpen,
|
33
34
|
});
|
34
35
|
const handleTriggerFocus = useCallback((event) => {
|
36
|
+
if (isServer)
|
37
|
+
return;
|
35
38
|
setIsFocused(true);
|
36
39
|
open(event.nativeEvent);
|
37
40
|
if (onFocus)
|
38
41
|
onFocus(event);
|
39
|
-
}, [open, onFocus]);
|
42
|
+
}, [open, onFocus, isServer]);
|
40
43
|
const handleTriggerBlur = useCallback((event) => {
|
44
|
+
if (isServer)
|
45
|
+
return;
|
41
46
|
setIsFocused(false);
|
42
47
|
close(event.nativeEvent);
|
43
48
|
if (onBlur)
|
44
49
|
onBlur(event);
|
45
|
-
}, [close, onBlur]);
|
50
|
+
}, [close, onBlur, isServer]);
|
51
|
+
const isDisabled = useCallback((el) => el?.disabled, []);
|
46
52
|
const handleTriggerEnter = useCallback((event) => {
|
53
|
+
if (isServer || isDisabled(event.target))
|
54
|
+
return;
|
47
55
|
open(event.nativeEvent);
|
48
56
|
if (onEnter)
|
49
57
|
onEnter(event);
|
50
|
-
}, [open, onEnter]);
|
58
|
+
}, [open, onEnter, isServer, isDisabled]);
|
51
59
|
const handleTriggerLeave = useCallback((event) => {
|
60
|
+
if (isServer || isDisabled(event.target))
|
61
|
+
return;
|
52
62
|
close(event.nativeEvent);
|
53
63
|
if (onLeave)
|
54
64
|
onLeave(event);
|
55
|
-
}, [close, onLeave]);
|
65
|
+
}, [close, onLeave, isServer, isDisabled]);
|
66
|
+
useEffect(() => {
|
67
|
+
if (isServer || !closeOnEscape || !isOpen)
|
68
|
+
return;
|
69
|
+
const handleEscape = (event) => {
|
70
|
+
if (event.key === "Escape")
|
71
|
+
close(event);
|
72
|
+
};
|
73
|
+
document.addEventListener("keydown", handleEscape);
|
74
|
+
return () => {
|
75
|
+
document.removeEventListener("keydown", handleEscape);
|
76
|
+
};
|
77
|
+
}, [close, closeOnEscape, isOpen, isServer]);
|
56
78
|
return {
|
57
79
|
handleTriggerBlur,
|
58
80
|
handleTriggerEnter,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"usePopup.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/usePopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,
|
1
|
+
{"version":3,"file":"usePopup.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/usePopup.ts"],"names":[],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
|
@@ -9,10 +9,9 @@ export default function useResizeObserver(element) {
|
|
9
9
|
width: 0,
|
10
10
|
height: 0,
|
11
11
|
});
|
12
|
-
|
13
|
-
return size;
|
12
|
+
const isServer = typeof window === "undefined";
|
14
13
|
useEffect(() => {
|
15
|
-
if (!element)
|
14
|
+
if (!element || isServer)
|
16
15
|
return;
|
17
16
|
const observer = new ResizeObserver(([entry]) => {
|
18
17
|
if (entry) {
|
@@ -27,7 +26,7 @@ export default function useResizeObserver(element) {
|
|
27
26
|
return () => {
|
28
27
|
observer.disconnect();
|
29
28
|
};
|
30
|
-
}, [element]);
|
29
|
+
}, [element, isServer]);
|
31
30
|
return size;
|
32
31
|
}
|
33
32
|
//# sourceMappingURL=useResizeObserver.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useResizeObserver.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,OAAyB;IAEzB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA0B;QACxD,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;
|
1
|
+
{"version":3,"file":"useResizeObserver.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,OAAyB;IAEzB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAA0B;QACxD,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;IACH,MAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO,IAAI,QAAQ;YAAE,OAAO;QAEjC,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YAC9C,IAAI,KAAK,EAAE,CAAC;gBACV,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC;gBAC/B,OAAO,CAAC;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,MAAM,EAAE,IAAI,CAAC,MAAM;iBACpB,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE1B,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,IAAI,CAAC;AACd,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}
|
@@ -4,18 +4,11 @@ import { useEffect, useMemo, useState } from "react";
|
|
4
4
|
* Hook to get the window dimensions and scroll position.
|
5
5
|
*/
|
6
6
|
export default function useWindowDimensions({ onResize, onScroll, resizeDelay = 100, scrollDelay = 100, } = {}) {
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
scrollHeight: 0,
|
13
|
-
};
|
14
|
-
}
|
15
|
-
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
|
16
|
-
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
|
17
|
-
const [scrollHeight, setScrollHeight] = useState(window.scrollY);
|
18
|
-
const [scrollWidth, setScrollWidth] = useState(window.scrollX);
|
7
|
+
const isServer = typeof window === "undefined";
|
8
|
+
const [windowWidth, setWindowWidth] = useState(isServer ? 0 : window.innerWidth);
|
9
|
+
const [windowHeight, setWindowHeight] = useState(isServer ? 0 : window.innerHeight);
|
10
|
+
const [scrollHeight, setScrollHeight] = useState(isServer ? 0 : window.scrollY);
|
11
|
+
const [scrollWidth, setScrollWidth] = useState(isServer ? 0 : window.scrollX);
|
19
12
|
const result = useMemo(() => ({
|
20
13
|
windowWidth,
|
21
14
|
windowHeight,
|
@@ -23,6 +16,8 @@ export default function useWindowDimensions({ onResize, onScroll, resizeDelay =
|
|
23
16
|
scrollHeight,
|
24
17
|
}), [windowWidth, windowHeight, scrollWidth, scrollHeight]);
|
25
18
|
useEffect(() => {
|
19
|
+
if (isServer)
|
20
|
+
return;
|
26
21
|
const handleResize = debounce(() => {
|
27
22
|
setWindowWidth(window.innerWidth);
|
28
23
|
setWindowHeight(window.innerHeight);
|
@@ -41,10 +36,12 @@ export default function useWindowDimensions({ onResize, onScroll, resizeDelay =
|
|
41
36
|
void handleResize();
|
42
37
|
void handleScroll();
|
43
38
|
return () => {
|
39
|
+
handleResize.cancel();
|
40
|
+
handleScroll.cancel();
|
44
41
|
window.removeEventListener("resize", handleResize);
|
45
42
|
window.removeEventListener("scroll", handleScroll);
|
46
43
|
};
|
47
|
-
}, [onResize, onScroll, resizeDelay, scrollDelay, result]);
|
44
|
+
}, [onResize, onScroll, resizeDelay, scrollDelay, result, isServer]);
|
48
45
|
return result;
|
49
46
|
}
|
50
47
|
//# sourceMappingURL=useWindowDimensions.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useWindowDimensions.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/useWindowDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMrD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,GAAG,EACjB,WAAW,GAAG,GAAG,MACU,EAAE;IAC7B,
|
1
|
+
{"version":3,"file":"useWindowDimensions.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/useWindowDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMrD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,GAAG,EACjB,WAAW,GAAG,GAAG,MACU,EAAE;IAC7B,MAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAC5C,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CACjC,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAClC,CAAC;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAC9B,CAAC;IACF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAE9E,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,YAAY;QACZ,WAAW;QACX,YAAY;KACb,CAAC,EACF,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CACvD,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ;YAAE,OAAO;QACrB,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE;YACjC,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YAClC,eAAe,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,QAAQ;gBAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC,EAAE,WAAW,CAAC,CAAC;QAEhB,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE;YACjC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC/B,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAChC,IAAI,QAAQ;gBAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC,EAAE,WAAW,CAAC,CAAC;QAEhB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAEhD,+EAA+E;QAC/E,KAAK,YAAY,EAAE,CAAC;QACpB,KAAK,YAAY,EAAE,CAAC;QAEpB,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,MAAM,EAAE,CAAC;YACtB,YAAY,CAAC,MAAM,EAAE,CAAC;YACtB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACnD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErE,OAAO,MAAM,CAAC;AAChB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
|
@@ -1,16 +1,8 @@
|
|
1
1
|
import { useCallback, useEffect, useMemo, useRef, } from "react";
|
2
2
|
import { useResizeObserver } from "../useResizeObserver/index.js";
|
3
3
|
import { useWindowDimensions } from "../useWindowDimensions/index.js";
|
4
|
-
const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "right"], distance = "0px", gutter = "0px", maxWidth = "350px", resizeDelay = 150, scrollDelay = 150, onBestPositionChange, }) => {
|
5
|
-
|
6
|
-
if (typeof window === "undefined") {
|
7
|
-
return {
|
8
|
-
targetRef: { current: null },
|
9
|
-
popupRef: { current: null },
|
10
|
-
bestPosition: undefined,
|
11
|
-
popupPositionStyle: {},
|
12
|
-
};
|
13
|
-
}
|
4
|
+
const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "right"], distance = "0px", gutter = "0px", maxWidth = "350px", resizeDelay = 150, scrollDelay = 150, onBestPositionChange, autoFit = false, }) => {
|
5
|
+
const isServer = typeof window === "undefined";
|
14
6
|
const targetRef = useRef(null);
|
15
7
|
const popupRef = useRef(null);
|
16
8
|
const prevBestPosition = useRef(undefined);
|
@@ -21,6 +13,8 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
21
13
|
const distanceAsPixelsNumber = useMemo(() => Number.parseInt(distance, 10) || 0, [distance]);
|
22
14
|
/** The bounds of the window, accounting for the `gutter` prop. */
|
23
15
|
const bounds = useMemo(() => {
|
16
|
+
if (isServer)
|
17
|
+
return;
|
24
18
|
const gutterValues = gutter
|
25
19
|
.split(" ")
|
26
20
|
.map((val) => Number.parseInt(val, 10));
|
@@ -34,7 +28,7 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
34
28
|
right: windowDimensions.windowWidth - rightGutter,
|
35
29
|
bottom: windowDimensions.windowHeight - bottomGutter,
|
36
30
|
};
|
37
|
-
}, [gutter, windowDimensions]);
|
31
|
+
}, [gutter, windowDimensions, isServer]);
|
38
32
|
/**
|
39
33
|
* Calculate the relative position of the popup when oriented in a given direction.
|
40
34
|
* @param direction The side of the target element to position the popup on.
|
@@ -45,6 +39,12 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
45
39
|
const calculateRelativePosition = useCallback((direction, targetRect, popupRect) => {
|
46
40
|
let left = 0;
|
47
41
|
let top = 0;
|
42
|
+
if (isServer) {
|
43
|
+
return {
|
44
|
+
left,
|
45
|
+
top,
|
46
|
+
};
|
47
|
+
}
|
48
48
|
/*
|
49
49
|
We use left and top offsets to position the popup relative to the target element.
|
50
50
|
Then, we apply a margin on the opposite side of the popup to create a buffer zone between the target and the popup, to prevent a mouseleave event when moving from the target to the popup.
|
@@ -78,7 +78,7 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
78
78
|
break;
|
79
79
|
}
|
80
80
|
return { left, top };
|
81
|
-
}, [distanceAsPixelsNumber]);
|
81
|
+
}, [distanceAsPixelsNumber, isServer]);
|
82
82
|
/**
|
83
83
|
* Check if the popup fits within the window. Accounts for `gutter` prop.
|
84
84
|
* @param candidatePosition The absolute position of the popup
|
@@ -86,6 +86,8 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
86
86
|
* @returns Whether the popup fits within the window.
|
87
87
|
*/
|
88
88
|
const fitsInWindow = useCallback((candidatePosition, popupRect) => {
|
89
|
+
if (isServer || !bounds)
|
90
|
+
return false;
|
89
91
|
// Absolute position of the popup's vertices, relative to the viewport
|
90
92
|
const vertices = {
|
91
93
|
top: candidatePosition.top,
|
@@ -97,7 +99,7 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
97
99
|
vertices.right <= bounds.right &&
|
98
100
|
vertices.bottom <= bounds.bottom &&
|
99
101
|
vertices.left >= bounds.left);
|
100
|
-
}, [bounds]);
|
102
|
+
}, [bounds, isServer]);
|
101
103
|
/**
|
102
104
|
* Find the best position for the popup based on the preferred directions.
|
103
105
|
* @param targetRect The bounding client rect of the target element.
|
@@ -105,7 +107,9 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
105
107
|
* @returns The best absolute position for the popup.
|
106
108
|
*/
|
107
109
|
const findBestPosition = useCallback((targetRect, popupRect, preferredDirections) => {
|
108
|
-
|
110
|
+
if (isServer)
|
111
|
+
return;
|
112
|
+
let fallbackPosition;
|
109
113
|
if (!preferredDirections.length) {
|
110
114
|
throw new Error("Preferred directions must not be empty.");
|
111
115
|
}
|
@@ -115,10 +119,33 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
115
119
|
top: targetRect.top + relativePosition.top,
|
116
120
|
left: targetRect.left + relativePosition.left,
|
117
121
|
};
|
122
|
+
const autoFitOffset = { top: 0, left: 0 };
|
123
|
+
if (autoFit && bounds) {
|
124
|
+
// Adjust position if it overflows the bounds
|
125
|
+
if (absolutePosition.top < bounds.top) {
|
126
|
+
autoFitOffset.top = bounds.top - absolutePosition.top;
|
127
|
+
absolutePosition.top = bounds.top;
|
128
|
+
}
|
129
|
+
else if (absolutePosition.top + popupRect.height > bounds.bottom) {
|
130
|
+
autoFitOffset.top =
|
131
|
+
bounds.bottom - (absolutePosition.top + popupRect.height);
|
132
|
+
absolutePosition.top = bounds.bottom - popupRect.height;
|
133
|
+
}
|
134
|
+
if (absolutePosition.left < bounds.left) {
|
135
|
+
autoFitOffset.left = -1 * (bounds.left - absolutePosition.left);
|
136
|
+
absolutePosition.left = bounds.left;
|
137
|
+
}
|
138
|
+
else if (absolutePosition.left + popupRect.width > bounds.right) {
|
139
|
+
autoFitOffset.left =
|
140
|
+
-1 * (bounds.right - (absolutePosition.left + popupRect.width));
|
141
|
+
absolutePosition.left = bounds.right - popupRect.width;
|
142
|
+
}
|
143
|
+
}
|
118
144
|
const bestPositionForName = {
|
119
145
|
positionName: direction,
|
120
146
|
position: absolutePosition,
|
121
147
|
fits: fitsInWindow(absolutePosition, popupRect),
|
148
|
+
autoFitOffset,
|
122
149
|
};
|
123
150
|
// Save the calculated position as a fallback in case no other position fits.
|
124
151
|
fallbackPosition ||= bestPositionForName;
|
@@ -129,10 +156,11 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
129
156
|
}
|
130
157
|
// biome-ignore lint/style/noNonNullAssertion: Fallback position is always defined here, due to the loop above and the thrown error if preferredDirections is empty.
|
131
158
|
return fallbackPosition;
|
132
|
-
}, [calculateRelativePosition, fitsInWindow]);
|
159
|
+
}, [calculateRelativePosition, fitsInWindow, isServer, autoFit, bounds]);
|
133
160
|
/** The best possible position for the popup. */
|
134
161
|
const bestPosition = useMemo(() => {
|
135
|
-
if (
|
162
|
+
if (!isServer &&
|
163
|
+
targetRef.current &&
|
136
164
|
popupRef.current &&
|
137
165
|
windowDimensions &&
|
138
166
|
popupSize &&
|
@@ -144,6 +172,7 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
144
172
|
windowDimensions,
|
145
173
|
popupSize,
|
146
174
|
targetSize,
|
175
|
+
isServer,
|
147
176
|
]);
|
148
177
|
/** Notify the consumer when the best position changes. */
|
149
178
|
useEffect(() => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useWindowFitment.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/useWindowFitment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,GACP,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAStE,MAAM,gBAAgB,GAAG,CAAC,EACxB,mBAAmB,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EACxD,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,OAAO,EAClB,WAAW,GAAG,GAAG,EACjB,WAAW,GAAG,GAAG,EACjB,oBAAoB,
|
1
|
+
{"version":3,"file":"useWindowFitment.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/useWindowFitment.tsx"],"names":[],"mappings":"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"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import type Props from "./types.js";
|
2
2
|
import "./styles.css";
|
3
3
|
/** Buttons are clickable elements used to perform an action. */
|
4
|
-
declare const Button: ({ id, className,
|
4
|
+
declare const Button: ({ id, className, children, style, appearance, ...props }: Props) => React.ReactElement;
|
5
5
|
export default Button;
|
6
6
|
//# sourceMappingURL=Button.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,QAAA,MAAM,MAAM,
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,QAAA,MAAM,MAAM,GAAI,0DAOb,KAAK,KAAG,KAAK,CAAC,YAiBhB,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EACV,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EACV,SAAS,IAAI,eAAe,EAC5B,OAAO,IAAI,WAAW,GACvB,MAAM,YAAY,CAAC"}
|
@@ -1,15 +1,18 @@
|
|
1
|
-
import type
|
1
|
+
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
2
2
|
export interface BaseProps {
|
3
3
|
id?: string;
|
4
4
|
/** Additional CSS classes */
|
5
5
|
className?: string;
|
6
|
+
/**
|
7
|
+
* Button contents.
|
8
|
+
* This will also be used for the `aria-label`.
|
9
|
+
* If this contains anything other than a string literal (such as a <p> element), you should specify an
|
10
|
+
* `aria-label` prop to ensure that the button label is applied properly. Otherwise, the label will be set to [object Object].
|
11
|
+
* */
|
12
|
+
children: ReactNode;
|
6
13
|
/** The visual style of the button */
|
7
14
|
appearance?: "neutral" | "base" | "positive" | "negative" | "link";
|
8
|
-
/** Button contents */
|
9
|
-
label: string;
|
10
|
-
/** Optional click handler */
|
11
|
-
onClick?: () => void;
|
12
15
|
}
|
13
|
-
type Props = BaseProps &
|
16
|
+
type Props = BaseProps & ButtonHTMLAttributes<HTMLButtonElement>;
|
14
17
|
export default Props;
|
15
18
|
//# sourceMappingURL=types.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;SAKK;IACL,QAAQ,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;CACpE;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjE,eAAe,KAAK,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD;;;GAGG;AACH,QAAA,MAAM,IAAI,
|
1
|
+
{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD;;;GAGG;AACH,QAAA,MAAM,IAAI,GAAI,iFAUX,aAAa,KAAG,KAAK,CAAC,YAwBxB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C;;;;;GAKG;AACH,QAAA,MAAM,OAAO,
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C;;;;;GAKG;AACH,QAAA,MAAM,OAAO,GAAI,mFAUd,YAAY,KAAG,KAAK,CAAC,YAmBvB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
@@ -5,6 +5,6 @@ import "./styles.css";
|
|
5
5
|
* Wraps a target element with a tooltip.
|
6
6
|
* This component allows you to attach a tooltip to any JSX fragment.
|
7
7
|
*/
|
8
|
-
declare const TooltipArea: ({ children, Message, distance, targetElementId, targetElementClassName, targetElementStyle, messageElementClassName, messageElementStyle, parentElement, ...props }: TooltipAreaProps) => ReactElement;
|
8
|
+
declare const TooltipArea: ({ children, style, className, Message, distance, targetElementId, targetElementClassName, targetElementStyle, messageElementClassName, messageElementStyle, parentElement, autoFit, ...props }: TooltipAreaProps) => ReactElement;
|
9
9
|
export default TooltipArea;
|
10
10
|
//# sourceMappingURL=TooltipArea.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TooltipArea.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"TooltipArea.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD,OAAO,cAAc,CAAC;AAKtB;;;GAGG;AACH,QAAA,MAAM,WAAW,GAAI,gMAclB,gBAAgB,KAAG,YA0ErB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
@@ -10,6 +10,10 @@ export interface TooltipAreaProps extends UsePopupProps {
|
|
10
10
|
* The content of the tooltip. This can be a string or any valid React node.
|
11
11
|
*/
|
12
12
|
Message: ReactNode;
|
13
|
+
/** Styles applied to the tooltip area */
|
14
|
+
style?: CSSProperties;
|
15
|
+
/** Class name applied to the tooltip area */
|
16
|
+
className?: string;
|
13
17
|
/** ID applied to the target element */
|
14
18
|
targetElementId?: string;
|
15
19
|
/** Class name applied to the target element */
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,aAAa,CAAC;IACnC,wDAAwD;IACxD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,aAAa,CAAC;IACpC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;CAC7B"}
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,aAAa,CAAC;IACnC,wDAAwD;IACxD,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,aAAa,CAAC;IACpC;;;;;OAKG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;CAC7B"}
|
@@ -1,5 +1,5 @@
|
|
1
|
-
export { default as Tooltip } from "./Tooltip.js";
|
2
|
-
export { default as withTooltip } from "./withTooltip.js";
|
3
1
|
export * from "./common/index.js";
|
2
|
+
export { default as Tooltip } from "./Tooltip.js";
|
4
3
|
export * from "./types.js";
|
4
|
+
export { default as withTooltip } from "./withTooltip.js";
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/index.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/index.ts"],"names":[],"mappings":"AAEA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,YAAY;IAE3B,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,EAAE,SAAS,CAAC;IAEpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gEAAgE;IAChE,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvC,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"withTooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/withTooltip.tsx"],"names":[],"mappings":"AAAA,
|
1
|
+
{"version":3,"file":"withTooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/withTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,EAAE,EAEF,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD;;;;;GAKG;AACH,QAAA,MAAM,WAAW,GAAI,MAAM,SAAS,MAAM,EACxC,WAAW,aAAa,CAAC,MAAM,CAAC,EAChC,SAAS,SAAS,EAClB,aAAY,aAAkB,KAC7B,EAAE,CAAC,MAAM,CAkBX,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
export * from "./useDelayedToggle/index.js";
|
2
2
|
export * from "./usePopup/index.js";
|
3
|
-
export * from "./useWindowFitment/index.js";
|
4
3
|
export * from "./useResizeObserver/index.js";
|
5
4
|
export * from "./useWindowDimensions/index.js";
|
5
|
+
export * from "./useWindowFitment/index.js";
|
6
6
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useDelayedToggle.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/useDelayedToggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEhF;;;;;;;;GAQG;AACH,QAAA,MAAM,gBAAgB,
|
1
|
+
{"version":3,"file":"useDelayedToggle.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/useDelayedToggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEhF;;;;;;;;GAQG;AACH,QAAA,MAAM,gBAAgB,GAAI,+DAKvB,qBAAqB,KAAG,sBAkD1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC"}
|
@@ -14,7 +14,12 @@ export interface UsePopupProps extends UseWindowFitmentProps, UseDelayedTogglePr
|
|
14
14
|
onShow?: (event?: Event) => void;
|
15
15
|
/** A callback to be called when the popup is hidden. */
|
16
16
|
onHide?: (event?: Event) => void;
|
17
|
+
/** Whether the popup should close when the escape key is pressed. Defaults to true. */
|
18
|
+
closeOnEscape?: boolean;
|
17
19
|
}
|
20
|
+
export type DisableableElement = HTMLElement & {
|
21
|
+
disabled: boolean;
|
22
|
+
};
|
18
23
|
export interface UsePopupResult extends UseWindowFitmentResult {
|
19
24
|
/**
|
20
25
|
* A ref to be attached to the target element.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,aACf,SAAQ,qBAAqB,EAC3B,qBAAqB;IACvB,kEAAkE;IAClE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,wEAAwE;IACxE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,WAAW,aACf,SAAQ,qBAAqB,EAC3B,qBAAqB;IACvB,kEAAkE;IAClE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,wEAAwE;IACxE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,sBAAsB;IAC5D;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C;;OAEG;IACH,kBAAkB,EAAE,aAAa,CAAC;IAClC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,kBAAkB,EAAE,iBAAiB,CAAC;IACtC;;OAEG;IACH,iBAAiB,EAAE,iBAAiB,CAAC;IACrC;;OAEG;IACH,kBAAkB,EAAE,mBAAmB,CAAC;IACxC;;OAEG;IACH,kBAAkB,EAAE,mBAAmB,CAAC;CACzC"}
|
@@ -10,9 +10,10 @@ import type { UsePopupProps, UsePopupResult } from "./types.js";
|
|
10
10
|
* @param onBlur A callback to be called when the target element loses focus.
|
11
11
|
* @param onShow A callback to be called when the popup is shown.
|
12
12
|
* @param onHide A callback to be called when the popup is hidden.
|
13
|
+
* @param closeOnEscape Whether the popup should close when the escape key is pressed. Defaults to true.
|
13
14
|
* @param props The props to be passed to the useWindowFitment hook.
|
14
15
|
* @returns The current state of the popup, and event handlers for the target element.
|
15
16
|
*/
|
16
|
-
declare const usePopup: ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter, onLeave, onFocus, onBlur, onShow, onHide, ...props }: UsePopupProps) => UsePopupResult;
|
17
|
+
declare const usePopup: ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter, onLeave, onFocus, onBlur, onShow, onHide, closeOnEscape, ...props }: UsePopupProps) => UsePopupResult;
|
17
18
|
export default usePopup;
|
18
19
|
//# sourceMappingURL=usePopup.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"usePopup.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/usePopup.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"usePopup.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/usePopup.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAEV,aAAa,EACb,cAAc,EACf,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,QAAQ,GAAI,oIAYf,aAAa,KAAG,cA4FlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,QAAQ,SAAS,WAAW,EACpE,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,GACxB,uBAAuB,
|
1
|
+
{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,QAAQ,SAAS,WAAW,EACpE,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,GACxB,uBAAuB,CA4BzB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useWindowDimensions.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/useWindowDimensions.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,QAAQ,EACR,WAAiB,EACjB,WAAiB,GAClB,GAAE,uBAA4B,GAAG,yBAAyB,
|
1
|
+
{"version":3,"file":"useWindowDimensions.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/useWindowDimensions.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,QAAQ,EACR,QAAQ,EACR,WAAiB,EACjB,WAAiB,GAClB,GAAE,uBAA4B,GAAG,yBAAyB,CAqD1D"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
|
@@ -1,5 +1,11 @@
|
|
1
1
|
import type { CSSProperties, RefObject } from "react";
|
2
2
|
export interface UseWindowFitmentProps {
|
3
|
+
/**
|
4
|
+
* Whether the popup should automatically fit into the viewport.
|
5
|
+
* If true, the hook will try to fit the popup into the viewport if it doesn't fit in the preferred directions.
|
6
|
+
* Defaults to false.
|
7
|
+
*/
|
8
|
+
autoFit?: boolean;
|
3
9
|
/**
|
4
10
|
* An array of preferred directions for the popup.
|
5
11
|
* The hook will try to position the popup in these directions in order.
|
@@ -62,5 +68,6 @@ export interface BestPosition {
|
|
62
68
|
position: RelativePosition;
|
63
69
|
positionName: WindowFitmentDirection;
|
64
70
|
fits: boolean;
|
71
|
+
autoFitOffset: RelativePosition;
|
65
72
|
}
|
66
73
|
//# sourceMappingURL=types.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,kBAAkB,EAAE,aAAa,CAAC;CAOnC;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,YAAY,EAAE,sBAAsB,CAAC;IACrC,IAAI,EAAE,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,qBAAqB;IACpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;OAEG;IACH,kBAAkB,EAAE,aAAa,CAAC;CAOnC;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,YAAY,EAAE,sBAAsB,CAAC;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,aAAa,EAAE,gBAAgB,CAAC;CACjC"}
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import type { UseWindowFitmentProps, UseWindowFitmentResult } from "./types.js";
|
2
|
-
declare const useWindowFitment: ({ preferredDirections, distance, gutter, maxWidth, resizeDelay, scrollDelay, onBestPositionChange, }: UseWindowFitmentProps) => UseWindowFitmentResult;
|
2
|
+
declare const useWindowFitment: ({ preferredDirections, distance, gutter, maxWidth, resizeDelay, scrollDelay, onBestPositionChange, autoFit, }: UseWindowFitmentProps) => UseWindowFitmentResult;
|
3
3
|
export default useWindowFitment;
|
4
4
|
//# sourceMappingURL=useWindowFitment.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useWindowFitment.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/useWindowFitment.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAGV,qBAAqB,EACrB,sBAAsB,EAEvB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,gBAAgB,
|
1
|
+
{"version":3,"file":"useWindowFitment.d.ts","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/useWindowFitment.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAGV,qBAAqB,EACrB,sBAAsB,EAEvB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,gBAAgB,GAAI,+GASvB,qBAAqB,KAAG,sBAgR1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@canonical/react-ds-core",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.10.0-experimental.0",
|
4
4
|
"type": "module",
|
5
5
|
"module": "dist/esm/index.js",
|
6
6
|
"types": "dist/types/index.d.ts",
|
@@ -22,6 +22,7 @@
|
|
22
22
|
"homepage": "https://github.com/canonical/ds25#readme",
|
23
23
|
"scripts": {
|
24
24
|
"build": "bun run build:package",
|
25
|
+
"build:all": "bun run build:package && bun run build:storybook",
|
25
26
|
"build:storybook": "storybook build",
|
26
27
|
"build:package": "bun run build:package:tsc && bun run build:package:copycss",
|
27
28
|
"build:package:copycss": "copyfiles -u 1 'src/ui/{,**/}*.css' dist/esm",
|
@@ -38,33 +39,31 @@
|
|
38
39
|
"test:vitest:watch": "vitest"
|
39
40
|
},
|
40
41
|
"dependencies": {
|
41
|
-
"@canonical/storybook-config": "^0.
|
42
|
-
"@canonical/styles": "^0.
|
43
|
-
"
|
44
|
-
"react
|
42
|
+
"@canonical/storybook-config": "^0.10.0-experimental.0",
|
43
|
+
"@canonical/styles": "^0.10.0-experimental.0",
|
44
|
+
"@canonical/utils": "^0.10.0-experimental.0",
|
45
|
+
"react": "^19.1.0",
|
46
|
+
"react-dom": "^19.1.0"
|
45
47
|
},
|
46
48
|
"devDependencies": {
|
47
|
-
"@biomejs/biome": "^
|
48
|
-
"@canonical/biome-config": "^0.
|
49
|
-
"@canonical/typescript-config-react": "^0.
|
50
|
-
"@chromatic-com/storybook": "^
|
51
|
-
"@storybook/blocks": "^8.4.7",
|
52
|
-
"@storybook/react": "^8.4.7",
|
53
|
-
"@storybook/test": "^8.4.7",
|
49
|
+
"@biomejs/biome": "^2.0.0",
|
50
|
+
"@canonical/biome-config": "^0.10.0-experimental.0",
|
51
|
+
"@canonical/typescript-config-react": "^0.10.0-experimental.0",
|
52
|
+
"@chromatic-com/storybook": "^4.0.0",
|
54
53
|
"@testing-library/jest-dom": "^6.6.3",
|
55
|
-
"@testing-library/react": "^16.
|
56
|
-
"@types/node": "^
|
57
|
-
"@types/react": "^19.
|
58
|
-
"@types/react-dom": "^19.
|
59
|
-
"@vitejs/plugin-react": "^4.
|
54
|
+
"@testing-library/react": "^16.3.0",
|
55
|
+
"@types/node": "^24.0.0",
|
56
|
+
"@types/react": "^19.1.8",
|
57
|
+
"@types/react-dom": "^19.1.6",
|
58
|
+
"@vitejs/plugin-react": "^4.5.2",
|
60
59
|
"copyfiles": "^2.4.1",
|
61
|
-
"globals": "^
|
62
|
-
"jsdom": "^
|
63
|
-
"storybook": "^
|
64
|
-
"typescript": "^5.
|
65
|
-
"vite": "^
|
60
|
+
"globals": "^16.2.0",
|
61
|
+
"jsdom": "^26.1.0",
|
62
|
+
"storybook": "^9.0.8",
|
63
|
+
"typescript": "^5.8.3",
|
64
|
+
"vite": "^7.0.0",
|
66
65
|
"vite-tsconfig-paths": "^5.1.4",
|
67
|
-
"vitest": "^2.
|
66
|
+
"vitest": "^3.2.3"
|
68
67
|
},
|
69
|
-
"gitHead": "
|
68
|
+
"gitHead": "d38f742073a1a0e582ce138bf0eb6dd63889721b"
|
70
69
|
}
|