@blockle/blocks-react 3.0.1 → 3.2.0

package/README.md

@@ -1 +1,139 @@
 # @blockle/blocks-react
+
+## Testing
+
+`Dialog` and `Drawer` open with `HTMLDialogElement.showModal()` and close with `close()`. jsdom does not implement these, so in a jsdom test an open `Dialog` stays a closed `<dialog>`, and Testing Library cannot find it, or anything in it, by role.
+
+Add this polyfill to your Vitest or Jest setup file. It only defines the methods jsdom is missing:
+
+```ts
+const DialogPrototype = HTMLDialogElement.prototype;
+
+if (!DialogPrototype.showModal) {
+  DialogPrototype.showModal = function showModal() {
+    this.setAttribute('open', '');
+  };
+}
+
+if (!DialogPrototype.show) {
+  DialogPrototype.show = function show() {
+    this.setAttribute('open', '');
+  };
+}
+
+if (!DialogPrototype.close) {
+  DialogPrototype.close = function close() {
+    if (!this.hasAttribute('open')) {
+      return;
+    }
+
+    this.removeAttribute('open');
+    this.dispatchEvent(new Event('close'));
+  };
+}
+```
+
+With it, an open dialog can be found with `getByRole('dialog')`:
+
+```tsx
+render(
+  <Dialog open onRequestClose={() => {}} aria-label="Settings">
+    <button type="button">Save</button>
+  </Dialog>,
+);
+
+screen.getByRole('dialog', { name: 'Settings' });
+screen.getByRole('button', { name: 'Save' });
+```
+
+Under the polyfill the dialog is open but not modal: it is not in the top layer, and nothing outside it is made inert, so content behind it can still be queried and clicked. Test modal behaviour, focus trapping and clicks outside in a real browser, for example with Vitest Browser Mode or Playwright.
+
+### Popover
+
+`Popover` opens with `showPopover()` and closes with `hidePopover()`. jsdom does not implement the Popover API, and its default stylesheet hides every `[popover]` element that is not open, so Testing Library treats an open popover's content as hidden and `getByRole` finds nothing in it.
+
+Add this polyfill to your test setup. It only defines the methods jsdom is missing, and marks an open popover with a `data-popover-open` attribute that a test stylesheet shows:
+
+```ts
+const PopoverPrototype = HTMLElement.prototype;
+
+if (!PopoverPrototype.showPopover) {
+  PopoverPrototype.showPopover = function showPopover() {
+    this.setAttribute('data-popover-open', '');
+  };
+}
+
+if (!PopoverPrototype.hidePopover) {
+  PopoverPrototype.hidePopover = function hidePopover() {
+    this.removeAttribute('data-popover-open');
+  };
+}
+
+if (!PopoverPrototype.togglePopover) {
+  PopoverPrototype.togglePopover = function togglePopover(force?: boolean) {
+    return this.toggleAttribute('data-popover-open', force);
+  };
+}
+
+const popoverStyle = document.createElement('style');
+popoverStyle.textContent = '[popover][data-popover-open] { display: block; }';
+document.head.append(popoverStyle);
+```
+
+With it, an open popover's content can be found by role:
+
+```tsx
+render(
+  <Popover open anchorElement={anchorRef} onRequestClose={() => {}}>
+    <button type="button">Inside</button>
+  </Popover>,
+);
+
+screen.getByRole('button', { name: 'Inside' });
+```
+
+Other libraries may check for `showPopover` and behave differently once it exists; dnd-kit, for example, drags differently. If a global polyfill breaks such tests, apply it only inside the `describe` that opens a popover, and remove what it added afterwards:
+
+```ts
+import { afterAll, beforeAll, describe } from 'vitest';
+
+describe('with a popover open', () => {
+  const polyfills: Record<string, (this: HTMLElement, force?: boolean) => unknown> = {
+    showPopover() {
+      this.setAttribute('data-popover-open', '');
+    },
+    hidePopover() {
+      this.removeAttribute('data-popover-open');
+    },
+    togglePopover(force?: boolean) {
+      return this.toggleAttribute('data-popover-open', force);
+    },
+  };
+  const added: string[] = [];
+  const popoverStyle = document.createElement('style');
+
+  beforeAll(() => {
+    for (const [method, polyfill] of Object.entries(polyfills)) {
+      if (!(method in HTMLElement.prototype)) {
+        Reflect.set(HTMLElement.prototype, method, polyfill);
+        added.push(method);
+      }
+    }
+
+    popoverStyle.textContent = '[popover][data-popover-open] { display: block; }';
+    document.head.append(popoverStyle);
+  });
+
+  afterAll(() => {
+    for (const method of added) {
+      Reflect.deleteProperty(HTMLElement.prototype, method);
+    }
+
+    popoverStyle.remove();
+  });
+
+  // Tests that open a popover
+});
+```
+
+Where the Popover API is missing and no polyfill is applied, `Popover` warns when it opens or closes instead of throwing. Its content then stays hidden under jsdom's default styles. Test positioning, the top layer and clicks outside in a real browser.

package/dist/components/display/Tag/Tag.d.ts

@@ -0,0 +1,28 @@
+import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
+import { default as React } from 'react';
+type TagTheme = ComponentThemes['tag'];
+export type TagProps = {
+    /**
+     * Render the single child element instead of a `span`, with the Tag's
+     * classes and attributes merged onto it
+     */
+    asChild?: boolean;
+    children: React.ReactNode;
+    /**
+     * Content placed after the text, such as an `IconButton` that removes the
+     * Tag. It is sized to the Tag's line height, so it doesn't make the Tag
+     * taller.
+     */
+    endSlot?: React.ReactNode;
+    intent?: TagTheme['variants']['intent'];
+    ref?: React.Ref<HTMLSpanElement>;
+    size?: TagTheme['variants']['size'];
+    /**
+     * Content placed before the text, such as an `Icon`, an avatar `img` or an
+     * emoji. It is sized to the Tag's line height.
+     */
+    startSlot?: React.ReactNode;
+} & Omit<HTMLElementProps<HTMLSpanElement>, 'children' | 'ref' | 'size'>;
+export declare const Tag: React.FC<TagProps>;
+export {};
+//# sourceMappingURL=Tag.d.ts.map

package/dist/components/display/Tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC;AAQzE,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAoClC,CAAC"}

package/dist/components/display/Tag/Tag.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames } from "@blockle/blocks-core";
+import { createSlottable } from "@blockle/blocks-react-slot";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+const [Template, Slot] = createSlottable("span");
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+const Tag = ({
+  asChild,
+  children,
+  className,
+  endSlot,
+  intent,
+  size,
+  startSlot,
+  ...restProps
+}) => {
+  const tagClassName = useComponentStyles("tag", {
+    root: true,
+    variants: { intent, size }
+  });
+  const startSlotClassName = useComponentStyles(
+    "tag",
+    { startSlot: true },
+    false
+  );
+  const endSlotClassName = useComponentStyles("tag", { endSlot: true }, false);
+  return /* @__PURE__ */ jsxs(
+    Template,
+    {
+      asChild,
+      className: classnames(tagClassName, className),
+      ...restProps,
+      children: [
+        hasContent(startSlot) && /* @__PURE__ */ jsx("span", { className: startSlotClassName, children: startSlot }),
+        /* @__PURE__ */ jsx(Slot, { children }),
+        hasContent(endSlot) && /* @__PURE__ */ jsx("span", { className: endSlotClassName, children: endSlot })
+      ]
+    }
+  );
+};
+export {
+  Tag
+};

package/dist/components/feedback/Alert/Alert.d.ts

@@ -2,9 +2,24 @@ import { ComponentThemes, HTMLElementProps } from '@blockle/blocks-core';
 type AlertTheme = ComponentThemes['alert'];
 export type AlertProps = {
     children?: React.ReactNode;
+    /**
+     * Content placed after the message, such as a `Button`, or an `IconButton`
+     * to dismiss the Alert. The message takes the remaining width.
+     */
+    endSlot?: React.ReactNode;
     intent?: AlertTheme['variants']['intent'];
-    onRequestClose?: () => void;
-} & HTMLElementProps<HTMLDivElement>;
+    /**
+     * `alert` announces the message as urgent, for a message shown in response
+     * to something that just happened. Use `status` for a lasting notice, such
+     * as a banner that stays while a record is archived.
+     * @default 'alert'
+     */
+    role?: 'alert' | 'status';
+    /**
+     * Content placed before the message, such as an icon
+     */
+    startSlot?: React.ReactNode;
+} & Omit<HTMLElementProps<HTMLDivElement>, 'role'>;
 export declare const Alert: React.FC<AlertProps>;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

package/dist/components/feedback/Alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAO9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwDtC,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAEpB,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,KAAK,UAAU,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;AAE3C,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC1C;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEnD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8BtC,CAAC"}

package/dist/components/feedback/Alert/Alert.js

@@ -2,14 +2,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
-import { Button } from "../../form/Button/Button.js";
 import { Box } from "../../layout/Box/Box.js";
-import { closeButton } from "./Alert.css.js";
 const Alert = ({
   intent = "info",
   children,
-  onRequestClose,
   className,
+  endSlot,
+  role = "alert",
+  startSlot,
   ...restProps
 }) => {
   const containerClassName = useComponentStyles("alert", {
@@ -19,43 +19,16 @@ const Alert = ({
   return /* @__PURE__ */ jsxs(
     Box,
     {
-      role: "alert",
+      role,
       className: classnames(containerClassName, className),
       display: "flex",
       alignItems: "center",
-      justifyContent: "space-between",
+      gap: 2,
       ...restProps,
       children: [
-        /* @__PURE__ */ jsx("div", { children }),
-        onRequestClose ? /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "small",
-            className: closeButton,
-            onClick: () => onRequestClose?.(),
-            children: /* @__PURE__ */ jsxs(
-              "svg",
-              {
-                role: "presentation",
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "24",
-                height: "24",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: [
-                  /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
-                  /* @__PURE__ */ jsx("path", { d: "M18 6l-12 12" }),
-                  /* @__PURE__ */ jsx("path", { d: "M6 6l12 12" })
-                ]
-              }
-            )
-          }
-        ) : null
+        startSlot,
+        /* @__PURE__ */ jsx(Box, { flexGrow: 1, children }),
+        endSlot
       ]
     }
   );

package/dist/components/feedback/Toast/Toast.css.d.ts

@@ -1,2 +1,11 @@
-export declare const container: string;
+export declare const stack: string;
+export declare const toast: string;
+export declare const placement: {
+    top: string;
+    'top-start': string;
+    'top-end': string;
+    bottom: string;
+    'bottom-start': string;
+    'bottom-end': string;
+};
 //# sourceMappingURL=Toast.css.d.ts.map

package/dist/components/feedback/Toast/Toast.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/Toast.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS,QASpB,CAAC"}
+{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/Toast.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,QAYhB,CAAC;AAEH,eAAO,MAAM,KAAK,QAOhB,CAAC;AAmBH,eAAO,MAAM,SAAS;;;;;;;CAOrB,CAAC"}

package/dist/components/feedback/Toast/Toast.css.js

@@ -1,22 +1,49 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { layers } from "@blockle/blocks-core";
-import { style, keyframes } from "@vanilla-extract/css";
+import { style } from "@vanilla-extract/css";
 setFileScope("src/components/feedback/Toast/Toast.css.ts", "@blockle/blocks-react");
-const toastEnter = keyframes({
-  from: { opacity: 0, scale: 0.9, translate: "0 20%" },
-  to: { opacity: 1, scale: 1, translate: "0 0" }
+const stack = style({
+  "@layer": {
+    [layers.molecule]: {
+      position: "fixed",
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      boxSizing: "border-box",
+      // Let clicks through the stack's empty space, but not through a toast
+      pointerEvents: "none"
+    }
+  }
 });
-const container = style({
+const toast = style({
   "@layer": {
     [layers.molecule]: {
-      animationName: toastEnter,
-      animationDuration: "240ms",
-      animationTimingFunction: "ease-out",
-      height: "fit-content"
+      height: "fit-content",
+      pointerEvents: "auto"
     }
   }
 });
+const top = {
+  insetBlockStart: 0,
+  // Newest toast nearest the top edge
+  flexDirection: "column-reverse"
+};
+const bottom = { insetBlockEnd: 0 };
+const center = { insetInline: 0, marginInline: "auto" };
+const start = { insetInlineStart: 0 };
+const end = { insetInlineEnd: 0 };
+const placementStyle = (...rules) => style({ "@layer": { [layers.molecule]: Object.assign({}, ...rules) } });
+const placement = {
+  top: placementStyle(top, center),
+  "top-start": placementStyle(top, start),
+  "top-end": placementStyle(top, end),
+  bottom: placementStyle(bottom, center),
+  "bottom-start": placementStyle(bottom, start),
+  "bottom-end": placementStyle(bottom, end)
+};
 endFileScope();
 export {
-  container
+  placement,
+  stack,
+  toast
 };

package/dist/components/feedback/Toast/ToastContext.d.ts

@@ -1,6 +1,12 @@
 import { AlertProps } from '../Alert/Alert.js';
 export type Toast = {
     id: string;
+    /**
+     * Milliseconds before the toast removes itself. The countdown pauses while
+     * any toast is hovered or focused, or the page is hidden. Leave it out to
+     * keep the toast until it's closed, and always leave it out when the toast
+     * contains an action, such as an "Undo" button.
+     */
     duration?: number;
     children?: React.ReactNode;
     intent?: AlertProps['intent'];

package/dist/components/feedback/Toast/ToastContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+C,CAAC"}
+{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastContext.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+C,CAAC"}

package/dist/components/feedback/Toast/ToastProvider.d.ts

@@ -1,6 +1,20 @@
+import { ToastPlacement } from '@blockle/blocks-core';
+export type { ToastPlacement };
+type ToastPosition = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
 export type ToastProviderProps = {
     children?: React.ReactNode;
-    position?: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right';
+    /**
+     * Accessible name of each Toast's close button. Pass your own wording to
+     * translate it.
+     * @default 'Close'
+     */
+    closeLabel?: string;
+    /** Where the toasts sit on the screen. Defaults to `bottom` */
+    placement?: ToastPlacement;
+    /**
+     * @deprecated Use `placement`, which wins when both are passed
+     */
+    position?: ToastPosition;
 };
 export declare const ToastProvider: React.FC<ToastProviderProps>;
 //# sourceMappingURL=ToastProvider.d.ts.map

package/dist/components/feedback/Toast/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastProvider.tsx"],"names":[],"mappings":"AA2BA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EACL,aAAa,GACb,eAAe,GACf,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwFtD,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Toast/ToastProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AA+BvE,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,KAAK,aAAa,GACd,aAAa,GACb,eAAe,GACf,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,CAAC;AAWhB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqLtD,CAAC"}

package/dist/components/feedback/Toast/ToastProvider.js

@@ -1,58 +1,114 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useMemo } from "react";
+import { classnames } from "@blockle/blocks-core";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { flushSync } from "react-dom";
-import { Box } from "../../layout/Box/Box.js";
-import { Stack } from "../../layout/Stack/Stack.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { CloseIcon } from "../../../icons/icons.js";
+import { IconButton } from "../../form/IconButton/IconButton.js";
 import { Alert } from "../Alert/Alert.js";
-import { container } from "./Toast.css.js";
+import { toast, stack, placement } from "./Toast.css.js";
 import { ToastContext } from "./ToastContext.js";
+import { useCountdowns } from "./useCountdowns.js";
 function makeTransition(transition) {
   if (document.startViewTransition) {
-    document.startViewTransition(() => {
+    const viewTransition = document.startViewTransition(() => {
       flushSync(() => {
         transition();
       });
     });
+    viewTransition.ready.catch(() => {
+    });
   } else {
     transition();
   }
 }
-const ToastProvider = ({ children }) => {
+const placementByPosition = {
+  "bottom-left": "bottom-start",
+  "bottom-center": "bottom",
+  "bottom-right": "bottom-end",
+  "top-left": "top-start",
+  "top-center": "top",
+  "top-right": "top-end"
+};
+const ToastProvider = ({
+  children,
+  closeLabel = "Close",
+  placement: placementProp,
+  position
+}) => {
+  const placement$1 = placementProp ?? (position ? placementByPosition[position] : "bottom");
+  const rootClassName = useComponentStyles("toast", {
+    root: true,
+    variants: { placement: placement$1 }
+  });
+  const toastClassName = useComponentStyles("toast", {
+    toast: true,
+    variants: { placement: placement$1 }
+  });
   const [toasts, setToasts] = useState([]);
   const toastsRef = useRef(toasts);
   toastsRef.current = toasts;
-  const removeToast = useCallback((id) => {
+  const stackRef = useRef(null);
+  const hoveredIdsRef = useRef(/* @__PURE__ */ new Set());
+  const focusWithinRef = useRef(false);
+  const commitRemoval = useCallback((id) => {
     makeTransition(() => {
-      setToasts((prev) => prev.filter((toast) => toast.id !== id));
+      setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
     });
   }, []);
-  const addToast = useCallback((toast) => {
-    const toasts2 = toastsRef.current;
-    const match = toasts2.findIndex(({ id }) => id === toast.id) !== -1;
-    function updateState(prev) {
-      const match2 = prev.findIndex(({ id }) => id === toast.id) !== -1;
-      if (match2) {
-        return prev.map((item) => item.id === toast.id ? toast : item);
+  const countdowns = useCountdowns(commitRemoval);
+  const syncPaused = useCallback(() => {
+    countdowns.setPaused(
+      hoveredIdsRef.current.size > 0 || focusWithinRef.current || document.visibilityState === "hidden"
+    );
+  }, [countdowns]);
+  const removeToast = useCallback(
+    (id) => {
+      countdowns.clear(id);
+      hoveredIdsRef.current.delete(id);
+      syncPaused();
+      commitRemoval(id);
+    },
+    [countdowns, syncPaused, commitRemoval]
+  );
+  const addToast = useCallback(
+    (toast2) => {
+      const toasts2 = toastsRef.current;
+      const match = toasts2.findIndex(({ id }) => id === toast2.id) !== -1;
+      function updateState(prev) {
+        const match2 = prev.findIndex(({ id }) => id === toast2.id) !== -1;
+        if (match2) {
+          return prev.map((item) => item.id === toast2.id ? toast2 : item);
+        }
+        return [...prev, toast2];
       }
-      return [...prev, toast];
-    }
-    if (match) {
-      setToasts(updateState);
-      return;
-    }
-    makeTransition(() => {
-      setToasts(updateState);
-    });
-    if (toast.duration) {
-      const toastId = toast.id;
-      setTimeout(() => {
-        makeTransition(() => {
-          setToasts((prev) => prev.filter((toast2) => toast2.id !== toastId));
-        });
-      }, toast.duration);
-    }
-  }, []);
+      syncPaused();
+      if (toast2.duration) {
+        countdowns.set(toast2.id, toast2.duration);
+      } else {
+        countdowns.clear(toast2.id);
+      }
+      if (match) {
+        setToasts(updateState);
+        return;
+      }
+      makeTransition(() => {
+        setToasts(updateState);
+      });
+    },
+    [countdowns, syncPaused]
+  );
+  useEffect(() => {
+    document.addEventListener("visibilitychange", syncPaused);
+    return () => {
+      document.removeEventListener("visibilitychange", syncPaused);
+    };
+  }, [syncPaused]);
+  useEffect(() => {
+    focusWithinRef.current = stackRef.current?.contains(document.activeElement) ?? false;
+    syncPaused();
+  }, [toasts, syncPaused]);
   const contextValue = useMemo(
     () => ({
       add: addToast,
@@ -63,28 +119,56 @@ const ToastProvider = ({ children }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ToastContext.Provider, { value: contextValue, children }),
     /* @__PURE__ */ jsx(
-      Box,
+      "div",
       {
-        asChild: true,
-        position: "fixed",
-        insetBlockEnd: 0,
-        insetInline: 0,
-        padding: 2,
-        children: /* @__PURE__ */ jsx(Stack, { gap: 2, children: toasts.map(({ id, children: children2, intent }) => /* @__PURE__ */ jsx(
+        className: classnames(
+          stack,
+          placement[placement$1],
+          rootClassName
+        ),
+        ref: stackRef,
+        children: toasts.map(({ id, children: children2, intent }) => /* @__PURE__ */ jsx(
           Alert,
           {
             intent,
-            className: container,
+            className: classnames(toast, toastClassName),
             style: {
               viewTransitionName: `toast-${id}`
             },
-            onRequestClose: () => {
-              removeToast(id);
+            onPointerEnter: () => {
+              hoveredIdsRef.current.add(id);
+              syncPaused();
+            },
+            onPointerLeave: () => {
+              hoveredIdsRef.current.delete(id);
+              syncPaused();
+            },
+            onFocus: () => {
+              focusWithinRef.current = true;
+              syncPaused();
+            },
+            onBlur: (event) => {
+              const stack2 = stackRef.current;
+              focusWithinRef.current = !!stack2 && (stack2.contains(event.relatedTarget) || stack2.contains(document.activeElement));
+              syncPaused();
             },
+            endSlot: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                label: closeLabel,
+                variant: "ghost",
+                size: "small",
+                intent: "neutral",
+                onClick: () => {
+                  removeToast(id);
+                },
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            ),
             children: children2
           },
           id
-        )) })
+        ))
       }
     )
   ] });