@canonical/react-ds-core 0.9.0-experimental.9 → 0.9.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 +13 -4
- package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js.map +1 -1
- package/dist/esm/ui/Tooltip/styles.css +12 -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/usePopup.js +29 -6
- package/dist/esm/ui/hooks/usePopup/usePopup.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/useWindowDimensions.js +10 -13
- package/dist/esm/ui/hooks/useWindowDimensions/useWindowDimensions.js.map +1 -1
- package/dist/esm/ui/hooks/useWindowFitment/useWindowFitment.js +44 -15
- 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/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/withTooltip.d.ts.map +1 -1
- package/dist/types/ui/hooks/useDelayedToggle/useDelayedToggle.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/useResizeObserver.d.ts.map +1 -1
- package/dist/types/ui/hooks/useWindowDimensions/useWindowDimensions.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 +22 -23
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,26 @@ 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 (_jsxs("span", { className: [componentCssClassName].filter(Boolean).join(" "), onFocus: handleTriggerFocus, onBlur: handleTriggerBlur, onPointerEnter: handleTriggerEnter, onPointerLeave: handleTriggerLeave, children: [_jsx("span", { id: targetElementId, className: ["target"].filter(Boolean).join(" "), ref: targetRef, "aria-describedby": popupId, children: children }), typeof window !== "undefined"
|
30
|
+
return (_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
31
|
? // Portals allow the tooltip to be rendered outside the parent element
|
23
32
|
// This is helpful when the parent element is a scrollable container or has bounds that may be
|
24
33
|
// overflown by the tooltip message.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TooltipArea.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":";AAEA,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,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,sBAAsB,EACtB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,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,GAAG,KAAK,EAAE,CAAC,CAAC;
|
1
|
+
{"version":3,"file":"TooltipArea.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":";AAEA,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,CACL,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"}
|
@@ -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,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,4 +1,4 @@
|
|
1
|
-
import { useCallback, useId, } from "react";
|
1
|
+
import { useCallback, useEffect, useId, } from "react";
|
2
2
|
import { useState } from "react";
|
3
3
|
import { useDelayedToggle } from "../useDelayedToggle/index.js";
|
4
4
|
import { useWindowFitment } from "../useWindowFitment/index.js";
|
@@ -13,10 +13,12 @@ import { useWindowFitment } from "../useWindowFitment/index.js";
|
|
13
13
|
* @param onBlur A callback to be called when the target element loses focus.
|
14
14
|
* @param onShow A callback to be called when the popup is shown.
|
15
15
|
* @param onHide A callback to be called when the popup is hidden.
|
16
|
+
* @param closeOnEscape Whether the popup should close when the escape key is pressed. Defaults to true.
|
16
17
|
* @param props The props to be passed to the useWindowFitment hook.
|
17
18
|
* @returns The current state of the popup, and event handlers for the target element.
|
18
19
|
*/
|
19
|
-
const usePopup = ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter, onLeave, onFocus, onBlur, onShow, onHide, ...props }) => {
|
20
|
+
const usePopup = ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter, onLeave, onFocus, onBlur, onShow, onHide, closeOnEscape = true, ...props }) => {
|
21
|
+
const isServer = typeof window === "undefined";
|
20
22
|
const [isFocused, setIsFocused] = useState(false);
|
21
23
|
const popupId = useId();
|
22
24
|
const { flag: isOpenHook, deactivate: close, activate: open, } = useDelayedToggle({
|
@@ -32,27 +34,48 @@ const usePopup = ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter,
|
|
32
34
|
isOpen: isOpen,
|
33
35
|
});
|
34
36
|
const handleTriggerFocus = useCallback((event) => {
|
37
|
+
if (isServer)
|
38
|
+
return;
|
35
39
|
setIsFocused(true);
|
36
40
|
open(event.nativeEvent);
|
37
41
|
if (onFocus)
|
38
42
|
onFocus(event);
|
39
|
-
}, [open, onFocus]);
|
43
|
+
}, [open, onFocus, isServer]);
|
40
44
|
const handleTriggerBlur = useCallback((event) => {
|
45
|
+
if (isServer)
|
46
|
+
return;
|
41
47
|
setIsFocused(false);
|
42
48
|
close(event.nativeEvent);
|
43
49
|
if (onBlur)
|
44
50
|
onBlur(event);
|
45
|
-
}, [close, onBlur]);
|
51
|
+
}, [close, onBlur, isServer]);
|
52
|
+
const isDisabled = useCallback((el) => el?.disabled, []);
|
46
53
|
const handleTriggerEnter = useCallback((event) => {
|
54
|
+
if (isServer || isDisabled(event.target))
|
55
|
+
return;
|
47
56
|
open(event.nativeEvent);
|
48
57
|
if (onEnter)
|
49
58
|
onEnter(event);
|
50
|
-
}, [open, onEnter]);
|
59
|
+
}, [open, onEnter, isServer, isDisabled]);
|
51
60
|
const handleTriggerLeave = useCallback((event) => {
|
61
|
+
if (isServer || isDisabled(event.target))
|
62
|
+
return;
|
52
63
|
close(event.nativeEvent);
|
53
64
|
if (onLeave)
|
54
65
|
onLeave(event);
|
55
|
-
}, [close, onLeave]);
|
66
|
+
}, [close, onLeave, isServer, isDisabled]);
|
67
|
+
useEffect(() => {
|
68
|
+
if (isServer || !closeOnEscape || !isOpen)
|
69
|
+
return;
|
70
|
+
const handleEscape = (event) => {
|
71
|
+
if (event.key === "Escape")
|
72
|
+
close(event);
|
73
|
+
};
|
74
|
+
document.addEventListener("keydown", handleEscape);
|
75
|
+
return () => {
|
76
|
+
document.removeEventListener("keydown", handleEscape);
|
77
|
+
};
|
78
|
+
}, [close, closeOnEscape, isOpen, isServer]);
|
56
79
|
return {
|
57
80
|
handleTriggerBlur,
|
58
81
|
handleTriggerEnter,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"usePopup.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/usePopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;
|
1
|
+
{"version":3,"file":"usePopup.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/usePopup.ts"],"names":[],"mappings":"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"}
|
@@ -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"}
|
@@ -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,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,6 +107,8 @@ 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) => {
|
110
|
+
if (isServer)
|
111
|
+
return;
|
108
112
|
let fallbackPosition = undefined;
|
109
113
|
if (!preferredDirections.length) {
|
110
114
|
throw new Error("Preferred directions must not be empty.");
|
@@ -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,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":"AACA,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,
|
1
|
+
{"version":3,"file":"TooltipArea.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":"AACA,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,YAyErB,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 +1 @@
|
|
1
|
-
{"version":3,"file":"withTooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/withTooltip.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,KAAK,aAAa,EAClB,KAAK,EAAE,EAEP,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD;;;;;GAKG;AACH,QAAA,MAAM,WAAW,GAAI,MAAM,SAAS,MAAM,
|
1
|
+
{"version":3,"file":"withTooltip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Tooltip/withTooltip.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,KAAK,aAAa,EAClB,KAAK,EAAE,EAEP,KAAK,SAAS,EAEf,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 +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"}
|
@@ -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":"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":"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,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.9.0
|
3
|
+
"version": "0.9.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.9.0
|
42
|
-
"@canonical/styles": "^0.9.0
|
43
|
-
"
|
44
|
-
"react
|
42
|
+
"@canonical/storybook-config": "^0.9.0",
|
43
|
+
"@canonical/styles": "^0.9.0",
|
44
|
+
"@canonical/utils": "^0.9.0",
|
45
|
+
"react": "^19.1.0",
|
46
|
+
"react-dom": "^19.1.0"
|
45
47
|
},
|
46
48
|
"devDependencies": {
|
47
49
|
"@biomejs/biome": "^1.9.4",
|
48
|
-
"@canonical/biome-config": "^0.9.0
|
49
|
-
"@canonical/typescript-config-react": "^0.9.0
|
50
|
-
"@chromatic-com/storybook": "^
|
51
|
-
"@storybook/blocks": "^8.4.7",
|
52
|
-
"@storybook/react": "^8.4.7",
|
53
|
-
"@storybook/test": "^8.4.7",
|
50
|
+
"@canonical/biome-config": "^0.9.0",
|
51
|
+
"@canonical/typescript-config-react": "^0.9.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": "^6.
|
60
|
+
"globals": "^16.2.0",
|
61
|
+
"jsdom": "^26.1.0",
|
62
|
+
"storybook": "^9.0.8",
|
63
|
+
"typescript": "^5.8.3",
|
64
|
+
"vite": "^6.3.5",
|
66
65
|
"vite-tsconfig-paths": "^5.1.4",
|
67
|
-
"vitest": "^2.
|
66
|
+
"vitest": "^3.2.3"
|
68
67
|
},
|
69
|
-
"gitHead": "
|
68
|
+
"gitHead": "59f31f7d58a1794d36dae3cf99691b6eeb3f4042"
|
70
69
|
}
|