@canonical/react-ds-core 0.9.0-experimental.10 → 0.9.0-experimental.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/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 +10 -0
- package/dist/esm/ui/hooks/useWindowFitment/useWindowFitment.js +25 -2
- package/dist/esm/ui/hooks/useWindowFitment/useWindowFitment.js.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/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 +3 -3
|
@@ -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 {
|
|
@@ -70,6 +73,13 @@
|
|
|
70
73
|
visibility: visible;
|
|
71
74
|
}
|
|
72
75
|
|
|
76
|
+
&.autofit {
|
|
77
|
+
&::before {
|
|
78
|
+
transform: translateX(var(--tooltip-arrow-offset-left))
|
|
79
|
+
translateY(var(--tooltip-arrow-offset-top));
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
73
83
|
/* triangle */
|
|
74
84
|
&::before {
|
|
75
85
|
content: "";
|
|
@@ -1,7 +1,7 @@
|
|
|
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, }) => {
|
|
4
|
+
const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "right"], distance = "0px", gutter = "0px", maxWidth = "350px", resizeDelay = 150, scrollDelay = 150, onBestPositionChange, autoFit = false, }) => {
|
|
5
5
|
const isServer = typeof window === "undefined";
|
|
6
6
|
const targetRef = useRef(null);
|
|
7
7
|
const popupRef = useRef(null);
|
|
@@ -119,10 +119,33 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
|
119
119
|
top: targetRect.top + relativePosition.top,
|
|
120
120
|
left: targetRect.left + relativePosition.left,
|
|
121
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
|
+
}
|
|
122
144
|
const bestPositionForName = {
|
|
123
145
|
positionName: direction,
|
|
124
146
|
position: absolutePosition,
|
|
125
147
|
fits: fitsInWindow(absolutePosition, popupRect),
|
|
148
|
+
autoFitOffset,
|
|
126
149
|
};
|
|
127
150
|
// Save the calculated position as a fallback in case no other position fits.
|
|
128
151
|
fallbackPosition ||= bestPositionForName;
|
|
@@ -133,7 +156,7 @@ const useWindowFitment = ({ preferredDirections = ["top", "bottom", "left", "rig
|
|
|
133
156
|
}
|
|
134
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.
|
|
135
158
|
return fallbackPosition;
|
|
136
|
-
}, [calculateRelativePosition, fitsInWindow, isServer]);
|
|
159
|
+
}, [calculateRelativePosition, fitsInWindow, isServer, autoFit, bounds]);
|
|
137
160
|
/** The best possible position for the popup. */
|
|
138
161
|
const bestPosition = useMemo(() => {
|
|
139
162
|
if (!isServer &&
|
|
@@ -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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"}
|
|
@@ -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,mMAcd,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,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,kHASnB,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-experimental.
|
|
3
|
+
"version": "0.9.0-experimental.11",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"test:vitest:watch": "vitest"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@canonical/storybook-config": "^0.9.0-experimental.
|
|
41
|
+
"@canonical/storybook-config": "^0.9.0-experimental.11",
|
|
42
42
|
"@canonical/styles": "^0.9.0-experimental.9",
|
|
43
43
|
"react": "^19.0.0",
|
|
44
44
|
"react-dom": "^19.0.0"
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"vite-tsconfig-paths": "^5.1.4",
|
|
67
67
|
"vitest": "^3.0.9"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "5a5c35f36022ab346ab6cb40f74affc712e7beda"
|
|
70
70
|
}
|