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

package/README.md

@@ -1,91 +1,28 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) 
-  uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) 
-  uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Caveats
-
-### TSConfig
-
-#### Skip library check
-
-We use [skipLibCheck](https://www.typescriptlang.org/tsconfig/#skipLibCheck) to
-skip type checking of declaration files. This is needed for compatibility with
-storybook dependencies. If this option is not enabled, the following error occurs:
-
-```
-The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("storybook/internal/types")' call instead.
-```
-
-Library checking is only disabled for Storybook files. This is due to 
-Storybook dependencies using CommonJS modules alongside ECMAScript modules, 
-which causes issues when TypeScript tries to type-check them together.
-
-Storybook files are excluded from builds in [tsconfig.build.json](tsconfig.build.json).
-Library type-checking is enabled for builds.
-
-
-### Bun
-
-[Bun](https://bun.sh/) is being experimentally used as a package manager.
-
-### Build tool
-
-Bun includes a [native JS bundler](https://bun.sh/docs/bundler) that can 
-transpile Typescript.
-
-#### Downsides
-
-We are not currently considering using `bun build` for production builds for 
-the following reasons:
-
-##### Globstar
-
-Bun's [implementation of globstar](https://bun.sh/docs/api/glob) is non-standard.
-It is difficult to build arbitrarily deep filepaths, as Bun expects a globstar 
-for each level of supported nesting. Most glob implementations treat a globstar 
-as representing an arbitrary number of non-hidden directories. However, with 
-Bun, matching `.ts` files in `src/ui/Button` requires the glob pattern 
-`**/**/*.ts`, which does not match files in other levels of nesting.
-
-##### Dist Depth
-
-Generating `dist/` output that has the correct folder structure (i.e., 
-`dist/ui/Button/`) is non-trivial. `bun build` generates output with folder 
-structure starting from matching the shallowest source file. However, this is 
-not always desired. For example, if `ui/` is inside `src/`, one must `cd` into 
-`src` before running `bun build` to generate the appropriate folder structure. 
-You must then set build output to `../dist` to place build results in the 
-project root. This makes the build script unnecessarily complex.
-
-##### Type emitting
-
-`bun build` does not generate types, so it must be accompanied by the usage of 
-some other tool that generates type declarations.
-
-#### Upsides
-
-##### Speed
-
-Bun builds slightly faster than the Typescript compiler.
-
-| Tool | Command                                                             | Real Time | User Time | Sys Time |
-| ---- | --------------------------------------------------------------------| --------- | --------- | -------- |
-| Bun  | `bun run build:package:bun`                                         | 0m0.648s  | 0m1.498s  | 0m0.117s |
-| Typescript  | `bun run build:package:tsc && bun run build:package:copycss` | 0m0.707s  | 0m1.615s  | 0m0.094s |
-
-Note that the bun build must also call `tsc` to generate type declarations, and 
-the tsc build must call the external `copyfiles` dependency to copy assets into 
-`dist/`.
-
-##### Non-TS bundling
-
-`bun build` copies non-TS assets (such as images, stylesheets, etc) into `dist`. 
-`tsc` must be followed up with a manual step that copies non-TS files (currently, 
-this is only CSS) into `dist`.
+## Canonical Design System - React Core
+
+This package provides the core React components and utilities for Canonical's Design System.
+
+## Getting Started
+
+Install the package in a React 19 project with `bun add @canonical/react-ds-core`.
+
+Then, import components from the package and use them in your React components. 
+An example of a component using the `Button` component:
+```tsx
+// MyComponent.tsx
+import { Button } from "@canonical/react-ds-core";
+
+function MyComponent() {
+  return (
+    <div>
+      <Button
+        appearance={"positive"}
+        label={"Click me"}
+        onClick={() => alert("hello world!")}
+      />
+    </div>
+  );
+}
+
+export default MyComponent;
+```

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":""}