@canonical/react-ds-core 0.9.0-experimental.5 → 0.9.0-experimental.9

package/dist/esm/ui/Tooltip/Tooltip.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds tooltip";
+/**
+ * The Tooltip component is used to display a message.
+ * This component is just the "message" part of the tooltip, and has no interactivity or positioning logic. It is generally not consumed directly, but rather in one of two ways
+ * - The [TooltipArea](?path=/docs/tooltip-tooltiparea--docs) component
+ * - The [withTooltip](?path=/docs/tooltip-withtooltip--docs) HOC
+ */
+const Tooltip = ({ id, children, className, style, ref, isOpen = false, zIndex, onPointerEnter, onFocus, }) => {
+    return (_jsx("div", { className: [componentCssClassName, className].filter(Boolean).join(" "), ref: ref, id: id, "aria-hidden": !isOpen, onPointerEnter: onPointerEnter, onFocus: onFocus, role: "tooltip", style: {
+            ...style,
+            visibility: isOpen ? "visible" : "hidden",
+            zIndex,
+        }, children: children }));
+};
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/ui/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/ui/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAGtB,MAAM,qBAAqB,GAAG,YAAY,CAAC;AAE3C;;;;;GAKG;AACH,MAAM,OAAO,GAAG,CAAC,EACf,EAAE,EACF,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,MAAM,GAAG,KAAK,EACd,MAAM,EACN,cAAc,EACd,OAAO,GACM,EAAsB,EAAE;IACrC,OAAO,CACL,cACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,EAAE,iBACO,CAAC,MAAM,EACpB,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;YACL,GAAG,KAAK;YACR,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;YACzC,MAAM;SACP,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePopup } from "../../../hooks/index.js";
+import { Tooltip } from "../../index.js";
+import "./styles.css";
+import { createPortal } from "react-dom";
+const componentCssClassName = "ds tooltip-area";
+/**
+ * Wraps a target element with a tooltip.
+ * This component allows you to attach a tooltip to any JSX fragment.
+ */
+const TooltipArea = ({ children, Message, distance = "6px", targetElementId, targetElementClassName, targetElementStyle, messageElementClassName, messageElementStyle, parentElement, ...props }) => {
+    const { targetRef, popupRef, popupPositionStyle, popupId, isOpen, handleTriggerFocus, handleTriggerBlur, handleTriggerEnter, handleTriggerLeave, bestPosition, } = usePopup({ distance, ...props });
+    const TooltipMessageElement = (_jsx(Tooltip, { id: popupId, className: [bestPosition?.positionName, messageElementClassName]
+            .filter(Boolean)
+            .join(" "), onPointerEnter: handleTriggerEnter, onFocus: handleTriggerFocus, ref: popupRef, style: {
+            ...messageElementStyle,
+            ...popupPositionStyle,
+            // @ts-ignore allow binding arrow size to distance, as it is needed both in JS and CSS calculations
+            "--tooltip-spacing-arrow-size": distance,
+        }, isOpen: isOpen, children: Message }));
+    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"
+                ? // Portals allow the tooltip to be rendered outside the parent element
+                    // This is helpful when the parent element is a scrollable container or has bounds that may be
+                    // overflown by the tooltip message.
+                    createPortal(TooltipMessageElement, parentElement || document.body)
+                : TooltipMessageElement] }));
+};
+export default TooltipArea;
+//# sourceMappingURL=TooltipArea.js.map

package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js.map

@@ -0,0 +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;IAErC,MAAM,qBAAqB,GAAG,CAC5B,KAAC,OAAO,IACN,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,uBAAuB,CAAC;aAC7D,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;SACzC,EACD,MAAM,EAAE,MAAM,YAEb,OAAO,GACA,CACX,CAAC;IAEF,OAAO,CACL,gBACE,SAAS,EAAE,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5D,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,cAAc,EAAE,kBAAkB,EAClC,cAAc,EAAE,kBAAkB,aAElC,eACE,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,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"}

package/dist/esm/ui/Tooltip/common/TooltipArea/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as TooltipArea } from "./TooltipArea.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Tooltip/common/TooltipArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Tooltip/common/TooltipArea/styles.css

@@ -0,0 +1,13 @@
+.ds.tooltip-area {
+  position: relative;
+  & .target {
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+
+    & > * {
+      /* The tooltip targets must have no margin in order for tooltip placements to work correctly */
+      margin: 0 !important;
+    }
+  }
+}

package/dist/esm/ui/Tooltip/common/TooltipArea/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Tooltip/common/TooltipArea/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/Tooltip/common/index.js

@@ -0,0 +1,2 @@
+export * from "./TooltipArea/index.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Tooltip/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/Tooltip/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/esm/ui/Tooltip/index.js

@@ -0,0 +1,6 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+export { default as Tooltip } from "./Tooltip.js";
+export { default as withTooltip } from "./withTooltip.js";
+export * from "./common/index.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Tooltip/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC1D,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Tooltip/styles.css

@@ -0,0 +1,111 @@
+/* @canonical/generator-ds 0.9.0-experimental.4 */
+
+/* component variables
+    --tooltip-color-background: background color of the tooltip
+    --tooltip-color-background-hover: background color of the tooltip on hover
+    --tooltip-color-background-active: background color of the tooltip on active
+    --tooltip-color-text: text color of the tooltip
+    --tooltip-color-border: border color of the tooltip
+    --tooltip-color-border-hover: border color of the tooltip on hover
+    --tooltip-color-border-active: border color of the tooltip on active
+
+    --tooltip-margin-left: left margin of the tooltip
+    --tooltip-margin-bottom: bottom margin of the tooltip
+    --tooltip-padding-vertical: vertical padding of the tooltip
+    --tooltip-padding-horizontal: horizontal padding of the tooltip
+    --tooltip-font-size: font size of the tooltip
+    --tooltip-font-weight: font weight of the tooltip
+    --tooltip-line-height: line height of the tooltip
+
+    --tooltip-spacing-arrow-size: size of the arrow
+*/
+
+.ds.tooltip {
+  --tooltip-spacing-arrow-middle: calc(50% - var(--tooltip-spacing-arrow-size));
+  --tooltip-spacing-arrow-edge: calc(-2 * var(--tooltip-spacing-arrow-size));
+  --tooltip-border-arrow-visible: var(--tooltip-spacing-arrow-size) solid
+    var(--tooltip-color-background);
+  --tooltip-border-arrow-hidden: var(--tooltip-spacing-arrow-size) solid
+    transparent;
+
+  color: var(
+    --intent-color-text,
+    var(--tooltip-color-text, var(--color-text-default))
+  );
+  background-color: var(
+    --intent-color,
+    var(--tooltip-color-background, var(--color-background-default))
+  );
+  border-color: var(
+    --intent-color-border,
+    var(--tooltip-color-border, transparent)
+  );
+  border-style: solid;
+  border-radius: var(--tooltip-border-radius);
+  border-width: var(--tooltip-border-width, 1px);
+  font-size: var(--tooltip-font-size, var(--font-size-small));
+  font-weight: var(--tooltip-font-weight, var(--font-weight-default));
+  line-height: var(--tooltip-line-height, var(--line-height-small));
+  margin-block-end: var(--tooltip-margin-bottom, 0);
+  margin-inline-end: var(--tooltip-margin-left, 0);
+  padding-block: var(--tooltip-padding-vertical, 5px);
+  padding-inline: var(--tooltip-padding-horizontal, 10px);
+  white-space: pre;
+  text-align: left;
+  text-decoration: initial;
+  pointer-events: auto;
+  display: inline-block;
+  transition: opacity 0.1s ease-in-out;
+  position: absolute;
+
+  &[aria-hidden="true"] {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  &[aria-hidden="false"] {
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  /* triangle */
+  &::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border: var(--tooltip-border-arrow-hidden);
+    position: absolute;
+  }
+
+  &.top::before {
+    border-top: var(--tooltip-border-arrow-visible);
+    bottom: var(--tooltip-spacing-arrow-edge);
+  }
+
+  &.right::before {
+    border-right: var(--tooltip-border-arrow-visible);
+    left: var(--tooltip-spacing-arrow-edge);
+  }
+
+  &.bottom::before {
+    border-bottom: var(--tooltip-border-arrow-visible);
+    top: var(--tooltip-spacing-arrow-edge);
+  }
+
+  &.left::before {
+    border-left: var(--tooltip-border-arrow-visible);
+    right: var(--tooltip-spacing-arrow-edge);
+  }
+
+  &.top::before,
+  &.bottom::before {
+    left: var(--tooltip-spacing-arrow-middle);
+  }
+
+  &.left::before,
+  &.right::before {
+    top: var(--tooltip-spacing-arrow-middle);
+  }
+}

package/dist/esm/ui/Tooltip/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Tooltip/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Tooltip/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/Tooltip/withTooltip.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TooltipArea } from "./common/TooltipArea/index.js";
+/**
+ * A higher-order component that wraps a component with a tooltip.
+ * @param Component The component function to wrap. If you need to use a Node instead of a function, use [`TooltipArea`](/?path=/docs/tooltip-withtooltip--docs) instead.
+ * @param Message The content of the tooltip
+ * @param popupProps The props to pass to the usePopup hook
+ */
+const withTooltip = (Component, Message, popupProps = {}) => {
+    const WrappedComponent = (props, ref) => {
+        return (_jsx(TooltipArea, { Message: Message, ...popupProps, children: _jsx(Component, { ...props, ref: ref }) }));
+    };
+    // Set the displayName for easier debugging
+    WrappedComponent.displayName = `withTooltip(${Component.displayName || Component.name || "Component"})`;
+    return WrappedComponent;
+};
+export default withTooltip;
+//# sourceMappingURL=withTooltip.js.map

package/dist/esm/ui/Tooltip/withTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTooltip.js","sourceRoot":"","sources":["../../../../src/ui/Tooltip/withTooltip.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D;;;;;GAKG;AACH,MAAM,WAAW,GAAG,CAClB,SAAgC,EAChC,OAAkB,EAClB,aAA4B,EAAE,EAClB,EAAE;IACd,MAAM,gBAAgB,GAAG,CACvB,KAAa,EACb,GAA4B,EACN,EAAE;QACxB,OAAO,CACL,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,KAAM,UAAU,YAC3C,KAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,GACtB,CACf,CAAC;IACJ,CAAC,CAAC;IAEF,2CAA2C;IAC3C,gBAAgB,CAAC,WAAW,GAAG,eAC7B,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAC7C,GAAG,CAAC;IAEJ,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/ui/hooks/index.js

@@ -0,0 +1,6 @@
+export * from "./useDelayedToggle/index.js";
+export * from "./usePopup/index.js";
+export * from "./useWindowFitment/index.js";
+export * from "./useResizeObserver/index.js";
+export * from "./useWindowDimensions/index.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/hooks/index.js.map

@@ -0,0 +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,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC"}

package/dist/esm/ui/hooks/useDelayedToggle/index.js

@@ -0,0 +1,3 @@
+export { default as useDelayedToggle } from "./useDelayedToggle.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/hooks/useDelayedToggle/index.js.map

@@ -0,0 +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;AACpE,cAAc,YAAY,CAAC"}

package/dist/esm/ui/hooks/useDelayedToggle/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/hooks/useDelayedToggle/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/hooks/useDelayedToggle/useDelayedToggle.js

@@ -0,0 +1,37 @@
+import { useCallback, useRef, useState } from "react";
+/**
+ * Hook to toggle a flag with a delay.
+ * Allows the caller to `activate()` or `deactivate()` some flag
+ * @param activateDelay The delay in milliseconds before setting the flag to true.
+ * @param deactivateDelay   The delay in milliseconds before setting the flag to false.
+ * @param onActivate A callback to be called when the flag is set to true.
+ * @param onDeactivate A callback to be called when the flag is set to false.
+ * @returns The current state of the flag, functions to activate and deactivate the flag.
+ */
+const useDelayedToggle = ({ activateDelay = 150, deactivateDelay = 150, onActivate, onDeactivate, }) => {
+    const [flag, setFlag] = useState(false);
+    const flagTimeout = useRef(undefined);
+    const replaceTimer = useCallback((newTimer) => {
+        if (flagTimeout.current) {
+            clearTimeout(flagTimeout.current);
+        }
+        flagTimeout.current = newTimer;
+    }, []);
+    const activate = useCallback((event) => {
+        replaceTimer(setTimeout(() => {
+            setFlag(true);
+            if (onActivate)
+                onActivate(event);
+        }, activateDelay));
+    }, [activateDelay, replaceTimer, onActivate]);
+    const deactivate = useCallback((event) => {
+        replaceTimer(setTimeout(() => {
+            setFlag(false);
+            if (onDeactivate)
+                onDeactivate(event);
+        }, deactivateDelay));
+    }, [deactivateDelay, replaceTimer, onDeactivate]);
+    return { flag, activate, deactivate };
+};
+export default useDelayedToggle;
+//# sourceMappingURL=useDelayedToggle.js.map

package/dist/esm/ui/hooks/useDelayedToggle/useDelayedToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDelayedToggle.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useDelayedToggle/useDelayedToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAa,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,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AACxC,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/ui/hooks/usePopup/index.js

@@ -0,0 +1,3 @@
+export { default as usePopup } from "./usePopup.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/hooks/usePopup/index.js.map

@@ -0,0 +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;AACpD,cAAc,YAAY,CAAC"}

package/dist/esm/ui/hooks/usePopup/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/hooks/usePopup/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/usePopup/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/hooks/usePopup/usePopup.js

@@ -0,0 +1,71 @@
+import { useCallback, useId, } from "react";
+import { useState } from "react";
+import { useDelayedToggle } from "../useDelayedToggle/index.js";
+import { useWindowFitment } from "../useWindowFitment/index.js";
+/**
+ * Manages the state of a popup.
+ * @param isOpen An override for the open state.
+ * @param deactivateDelay The delay in milliseconds before setting the flag to false.
+ * @param activateDelay The delay in milliseconds before setting the flag to true.
+ * @param onEnter A callback to be called when the mouse enters the target element.
+ * @param onLeave A callback to be called when the mouse leaves the target element.
+ * @param onFocus A callback to be called when the target element is focused.
+ * @param onBlur A callback to be called when the target element loses focus.
+ * @param onShow A callback to be called when the popup is shown.
+ * @param onHide A callback to be called when the popup is hidden.
+ * @param props The props to be passed to the useWindowFitment hook.
+ * @returns The current state of the popup, and event handlers for the target element.
+ */
+const usePopup = ({ isOpen: isOpenProp, deactivateDelay, activateDelay, onEnter, onLeave, onFocus, onBlur, onShow, onHide, ...props }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const popupId = useId();
+    const { flag: isOpenHook, deactivate: close, activate: open, } = useDelayedToggle({
+        activateDelay,
+        deactivateDelay,
+        onActivate: onShow,
+        onDeactivate: onHide,
+    });
+    // Apply open override
+    const isOpen = typeof isOpenProp === "boolean" ? isOpenProp : isOpenHook;
+    const { targetRef, popupRef, bestPosition, popupPositionStyle } = useWindowFitment({
+        ...props,
+        isOpen: isOpen,
+    });
+    const handleTriggerFocus = useCallback((event) => {
+        setIsFocused(true);
+        open(event.nativeEvent);
+        if (onFocus)
+            onFocus(event);
+    }, [open, onFocus]);
+    const handleTriggerBlur = useCallback((event) => {
+        setIsFocused(false);
+        close(event.nativeEvent);
+        if (onBlur)
+            onBlur(event);
+    }, [close, onBlur]);
+    const handleTriggerEnter = useCallback((event) => {
+        open(event.nativeEvent);
+        if (onEnter)
+            onEnter(event);
+    }, [open, onEnter]);
+    const handleTriggerLeave = useCallback((event) => {
+        close(event.nativeEvent);
+        if (onLeave)
+            onLeave(event);
+    }, [close, onLeave]);
+    return {
+        handleTriggerBlur,
+        handleTriggerEnter,
+        handleTriggerFocus,
+        handleTriggerLeave,
+        isFocused,
+        isOpen,
+        popupId,
+        popupRef,
+        targetRef,
+        bestPosition,
+        popupPositionStyle,
+    };
+};
+export default usePopup;
+//# sourceMappingURL=usePopup.js.map

package/dist/esm/ui/hooks/usePopup/usePopup.js.map

@@ -0,0 +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;AAGhE;;;;;;;;;;;;;GAaG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,EAAE,UAAU,EAClB,eAAe,EACf,aAAa,EACb,OAAO,EACP,OAAO,EACP,OAAO,EACP,MAAM,EACN,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACM,EAAkB,EAAE;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,EACJ,IAAI,EAAE,UAAU,EAChB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,IAAI,GACf,GAAG,gBAAgB,CAAC;QACnB,aAAa;QACb,eAAe;QACf,UAAU,EAAE,MAAM;QAClB,YAAY,EAAE,MAAM;KACrB,CAAC,CAAC;IAEH,sBAAsB;IACtB,MAAM,MAAM,GAAG,OAAO,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IAEzE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,GAC7D,gBAAgB,CAAC;QACf,GAAG,KAAK;QACR,MAAM,EAAE,MAAM;KACf,CAAC,CAAC;IAEL,MAAM,kBAAkB,GAAsB,WAAW,CACvD,CAAC,KAAK,EAAE,EAAE;QACR,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACxB,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,MAAM,iBAAiB,GAAsB,WAAW,CACtD,CAAC,KAAK,EAAE,EAAE;QACR,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,MAAM;YAAE,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EACD,CAAC,KAAK,EAAE,MAAM,CAAC,CAChB,CAAC;IAEF,MAAM,kBAAkB,GAAwB,WAAW,CACzD,CAAC,KAAK,EAAE,EAAE;QACR,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACxB,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IAEF,MAAM,kBAAkB,GAAwB,WAAW,CACzD,CAAC,KAAK,EAAE,EAAE;QACR,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,OAAO;YAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,EACD,CAAC,KAAK,EAAE,OAAO,CAAC,CACjB,CAAC;IAEF,OAAO;QACL,iBAAiB;QACjB,kBAAkB;QAClB,kBAAkB;QAClB,kBAAkB;QAClB,SAAS;QACT,MAAM;QACN,OAAO;QACP,QAAQ;QACR,SAAS;QACT,YAAY;QACZ,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/ui/hooks/useResizeObserver/index.js

@@ -0,0 +1,3 @@
+export { default as useResizeObserver } from "./useResizeObserver.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/hooks/useResizeObserver/index.js.map

@@ -0,0 +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;AACtE,cAAc,YAAY,CAAC"}

package/dist/esm/ui/hooks/useResizeObserver/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/hooks/useResizeObserver/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useResizeObserver/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/hooks/useResizeObserver/useResizeObserver.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+/**
+ * Hook to observe the size of an element.
+ * @param element The element to observe.
+ * @returns The size of the element.
+ */
+export default function useResizeObserver(element) {
+    const [size, setSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    if (typeof window === "undefined")
+        return size;
+    useEffect(() => {
+        if (!element)
+            return;
+        const observer = new ResizeObserver(([entry]) => {
+            if (entry) {
+                const rect = entry.contentRect;
+                setSize({
+                    width: rect.width,
+                    height: rect.height,
+                });
+            }
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [element]);
+    return size;
+}
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/esm/ui/hooks/useResizeObserver/useResizeObserver.js.map

@@ -0,0 +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;IAEH,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,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,CAAC,CAAC,CAAC;IAEd,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/esm/ui/hooks/useWindowDimensions/index.js

@@ -0,0 +1,3 @@
+export { default as useWindowDimensions } from "./useWindowDimensions.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/hooks/useWindowDimensions/index.js.map

@@ -0,0 +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;AAC1E,cAAc,YAAY,CAAC"}

package/dist/esm/ui/hooks/useWindowDimensions/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/hooks/useWindowDimensions/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowDimensions/types.ts"],"names":[],"mappings":""}

package/dist/esm/ui/hooks/useWindowDimensions/useWindowDimensions.js

@@ -0,0 +1,50 @@
+import { debounce } from "@canonical/utils";
+import { useEffect, useMemo, useState } from "react";
+/**
+ * Hook to get the window dimensions and scroll position.
+ */
+export default function useWindowDimensions({ onResize, onScroll, resizeDelay = 100, scrollDelay = 100, } = {}) {
+    if (typeof window === "undefined") {
+        return {
+            windowWidth: 0,
+            windowHeight: 0,
+            scrollWidth: 0,
+            scrollHeight: 0,
+        };
+    }
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+    const [scrollHeight, setScrollHeight] = useState(window.scrollY);
+    const [scrollWidth, setScrollWidth] = useState(window.scrollX);
+    const result = useMemo(() => ({
+        windowWidth,
+        windowHeight,
+        scrollWidth,
+        scrollHeight,
+    }), [windowWidth, windowHeight, scrollWidth, scrollHeight]);
+    useEffect(() => {
+        const handleResize = debounce(() => {
+            setWindowWidth(window.innerWidth);
+            setWindowHeight(window.innerHeight);
+            if (onResize)
+                onResize(result);
+        }, resizeDelay);
+        const handleScroll = debounce(() => {
+            setScrollWidth(window.scrollX);
+            setScrollHeight(window.scrollY);
+            if (onScroll)
+                onScroll(result);
+        }, scrollDelay);
+        window.addEventListener("resize", handleResize);
+        window.addEventListener("scroll", handleScroll);
+        // Initial trigger in case the values need to be passed immediately after mount
+        void handleResize();
+        void handleScroll();
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, [onResize, onScroll, resizeDelay, scrollDelay, result]);
+    return result;
+}
+//# sourceMappingURL=useWindowDimensions.js.map

package/dist/esm/ui/hooks/useWindowDimensions/useWindowDimensions.js.map

@@ -0,0 +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,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAO;YACL,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;SAChB,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACrE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACjE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAE/D,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,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,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,CAAC,CAAC,CAAC;IAE3D,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/esm/ui/hooks/useWindowFitment/index.js

@@ -0,0 +1,3 @@
+export { default as useWindowFitment } from "./useWindowFitment.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/hooks/useWindowFitment/index.js.map

@@ -0,0 +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;AACpE,cAAc,YAAY,CAAC"}

package/dist/esm/ui/hooks/useWindowFitment/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/hooks/useWindowFitment/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/ui/hooks/useWindowFitment/types.ts"],"names":[],"mappings":""}