@tale-ui/react 0.0.3

package/esm/toast/utils/test-utils.js

@@ -0,0 +1,45 @@
+var _Toast$Title, _Toast$Description, _Toast$Close, _Toast$Action;
+import { Toast } from '@tale-ui/react/toast';
+
+/**
+ * @internal
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Button() {
+  const {
+    add
+  } = Toast.useToastManager();
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    onClick: () => {
+      add({
+        title: 'title',
+        description: 'description',
+        actionProps: {
+          id: 'action',
+          children: 'action'
+        }
+      });
+    },
+    children: "add"
+  });
+}
+
+/**
+ * @internal
+ */
+export function List() {
+  return Toast.useToastManager().toasts.map(toastItem => /*#__PURE__*/_jsxs(Toast.Root, {
+    toast: toastItem,
+    "data-testid": "root",
+    children: [_Toast$Title || (_Toast$Title = /*#__PURE__*/_jsx(Toast.Title, {
+      "data-testid": "title"
+    })), _Toast$Description || (_Toast$Description = /*#__PURE__*/_jsx(Toast.Description, {
+      "data-testid": "description"
+    })), _Toast$Close || (_Toast$Close = /*#__PURE__*/_jsx(Toast.Close, {
+      "aria-label": "close-press"
+    })), _Toast$Action || (_Toast$Action = /*#__PURE__*/_jsx(Toast.Action, {
+      "data-testid": "action"
+    }))]
+  }, toastItem.id));
+}

package/esm/toast/viewport/ToastViewport.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { TaleUIComponentProps } from "../../utils/types.js";
+/**
+ * A container viewport for toasts.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Toast](https://base-ui.com/react/components/toast)
+ */
+export declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ToastViewportState {
+  /**
+   * Whether toasts are expanded in the viewport.
+   */
+  expanded: boolean;
+}
+export interface ToastViewportProps extends TaleUIComponentProps<'div', ToastViewport.State> {}
+export declare namespace ToastViewport {
+  type State = ToastViewportState;
+  type Props = ToastViewportProps;
+}

package/esm/toast/viewport/ToastViewport.js

@@ -0,0 +1,240 @@
+'use client';
+
+import * as React from 'react';
+import { ownerDocument, ownerWindow } from '@tale-ui/utils/owner';
+import { visuallyHidden } from '@tale-ui/utils/visuallyHidden';
+import { useTimeout } from '@tale-ui/utils/useTimeout';
+import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
+import { FocusGuard } from "../../utils/FocusGuard.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { isFocusVisible } from "../utils/focusVisible.js";
+import { ToastViewportCssVars } from "./ToastViewportCssVars.js";
+
+/**
+ * A container viewport for toasts.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Toast](https://base-ui.com/react/components/toast)
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewport(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    children,
+    ...elementProps
+  } = componentProps;
+  const store = useToastProviderContext();
+  const windowFocusTimeout = useTimeout();
+  const handlingFocusGuardRef = React.useRef(false);
+  const markedReadyForMouseLeaveRef = React.useRef(false);
+  const isEmpty = store.useState('isEmpty');
+  const toasts = store.useState('toasts');
+  const focused = store.useState('focused');
+  const expanded = store.useState('expanded');
+  const prevFocusElement = store.useState('prevFocusElement');
+  const frontmostHeight = toasts[0]?.height ?? 0;
+  const hasTransitioningToasts = React.useMemo(() => toasts.some(toast => toast.transitionStatus === 'ending'), [toasts]);
+
+  // Listen globally for F6 so we can force-focus the viewport.
+  React.useEffect(() => {
+    const viewport = store.state.viewport;
+    if (!viewport) {
+      return undefined;
+    }
+    function handleGlobalKeyDown(event) {
+      if (isEmpty) {
+        return;
+      }
+      if (event.key === 'F6' && event.target !== viewport) {
+        event.preventDefault();
+        store.setPrevFocusElement(activeElement(ownerDocument(viewport)));
+        viewport?.focus({
+          preventScroll: true
+        });
+        store.pauseTimers();
+        store.setFocused(true);
+      }
+    }
+    const win = ownerWindow(viewport);
+    win.addEventListener('keydown', handleGlobalKeyDown);
+    return () => {
+      win.removeEventListener('keydown', handleGlobalKeyDown);
+    };
+  }, [store, isEmpty]);
+  React.useEffect(() => {
+    const viewport = store.state.viewport;
+    if (!viewport || isEmpty) {
+      return undefined;
+    }
+    const win = ownerWindow(viewport);
+    function handleWindowBlur(event) {
+      if (event.target !== win) {
+        return;
+      }
+      store.setIsWindowFocused(false);
+      store.pauseTimers();
+    }
+    function handleWindowFocus(event) {
+      if (event.relatedTarget || event.target === win) {
+        return;
+      }
+      const target = getTarget(event);
+      const activeEl = activeElement(ownerDocument(viewport));
+      if (!contains(viewport, target) || !isFocusVisible(activeEl)) {
+        store.resumeTimers();
+      }
+
+      // Wait for the `handleFocus` event to fire.
+      windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
+    }
+    win.addEventListener('blur', handleWindowBlur, true);
+    win.addEventListener('focus', handleWindowFocus, true);
+    return () => {
+      win.removeEventListener('blur', handleWindowBlur, true);
+      win.removeEventListener('focus', handleWindowFocus, true);
+    };
+  }, [store, windowFocusTimeout,
+  // `store.state.viewport` isn't available on the first render,
+  // since the portal node hasn't yet been created.
+  // By adding this dependency, we ensure the window listeners
+  // are added when toasts have been created, once the ref is available.
+  isEmpty]);
+  React.useEffect(() => {
+    const viewport = store.state.viewport;
+    if (!viewport || isEmpty) {
+      return undefined;
+    }
+    const doc = ownerDocument(viewport);
+    doc.addEventListener('pointerdown', store.handleDocumentPointerDown, true);
+    return () => {
+      doc.removeEventListener('pointerdown', store.handleDocumentPointerDown, true);
+    };
+  }, [isEmpty, store]);
+  function handleFocusGuard(event) {
+    const viewport = store.state.viewport;
+    if (!viewport) {
+      return;
+    }
+    handlingFocusGuardRef.current = true;
+
+    // If we're coming off the container, move to the first toast
+    if (event.relatedTarget === viewport) {
+      toasts[0]?.ref?.current?.focus();
+    } else {
+      store.restoreFocusToPrevElement();
+    }
+  }
+  function handleKeyDown(event) {
+    if (event.key === 'Tab' && event.shiftKey && event.target === store.state.viewport) {
+      event.preventDefault();
+      store.restoreFocusToPrevElement();
+      store.resumeTimers();
+    }
+  }
+  React.useEffect(() => {
+    if (!store.state.isWindowFocused || hasTransitioningToasts || !markedReadyForMouseLeaveRef.current) {
+      return;
+    }
+
+    // Once transitions have finished, see if a mouseleave was already triggered
+    // but blocked from taking effect. If so, we can now safely resume timers and
+    // collapse the viewport.
+    store.resumeTimers();
+    store.setHovering(false);
+    markedReadyForMouseLeaveRef.current = false;
+  }, [hasTransitioningToasts, store]);
+  function handleMouseEnter() {
+    store.pauseTimers();
+    store.setHovering(true);
+    markedReadyForMouseLeaveRef.current = false;
+  }
+  function handleMouseLeave() {
+    if (hasTransitioningToasts) {
+      // When swiping to dismiss, wait until the transitions have settled
+      // to avoid the viewport collapsing while the user is interacting.
+      markedReadyForMouseLeaveRef.current = true;
+    } else {
+      store.resumeTimers();
+      store.setHovering(false);
+    }
+  }
+  function handleFocus() {
+    if (handlingFocusGuardRef.current) {
+      handlingFocusGuardRef.current = false;
+      return;
+    }
+    if (focused) {
+      return;
+    }
+
+    // Only set focused when the active element is focus-visible.
+    // This prevents the viewport from staying expanded when clicking inside without
+    // keyboard navigation.
+    if (isFocusVisible(ownerDocument(store.state.viewport).activeElement)) {
+      store.setFocused(true);
+      store.pauseTimers();
+    }
+  }
+  function handleBlur(event) {
+    if (!focused || contains(store.state.viewport, event.relatedTarget)) {
+      return;
+    }
+    store.setFocused(false);
+    store.resumeTimers();
+  }
+  const defaultProps = {
+    tabIndex: -1,
+    role: 'region',
+    'aria-live': 'polite',
+    'aria-atomic': false,
+    'aria-relevant': 'additions text',
+    'aria-label': 'Notifications',
+    onMouseEnter: handleMouseEnter,
+    onMouseMove: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onClick: handleFocus
+  };
+  const state = {
+    expanded
+  };
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, store.setViewport],
+    state,
+    props: [defaultProps, {
+      style: {
+        [ToastViewportCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined
+      }
+    }, elementProps, {
+      children: /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+          onFocus: handleFocusGuard
+        }), children, !isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+          onFocus: handleFocusGuard
+        })]
+      })
+    }]
+  });
+  const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+      onFocus: handleFocusGuard
+    }), element, !focused && highPriorityToasts.length > 0 && /*#__PURE__*/_jsx("div", {
+      style: visuallyHidden,
+      children: highPriorityToasts.map(toast => /*#__PURE__*/_jsxs("div", {
+        role: "alert",
+        "aria-atomic": true,
+        children: [/*#__PURE__*/_jsx("div", {
+          children: toast.title
+        }), /*#__PURE__*/_jsx("div", {
+          children: toast.description
+        })]
+      }, toast.id))
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") ToastViewport.displayName = "ToastViewport";

package/esm/toast/viewport/ToastViewportCssVars.d.ts

@@ -0,0 +1,7 @@
+export declare enum ToastViewportCssVars {
+  /**
+   * Indicates the height of the frontmost toast.
+   * @type {number}
+   */
+  frontmostHeight = "--toast-frontmost-height",
+}

package/esm/toast/viewport/ToastViewportCssVars.js

@@ -0,0 +1,8 @@
+export let ToastViewportCssVars = /*#__PURE__*/function (ToastViewportCssVars) {
+  /**
+   * Indicates the height of the frontmost toast.
+   * @type {number}
+   */
+  ToastViewportCssVars["frontmostHeight"] = "--toast-frontmost-height";
+  return ToastViewportCssVars;
+}({});

package/esm/toast/viewport/ToastViewportDataAttributes.d.ts

@@ -0,0 +1,7 @@
+export declare enum ToastViewportDataAttributes {
+  /**
+   * Indicates toasts are expanded in the viewport.
+   * @type {boolean}
+   */
+  expanded = "data-expanded",
+}

package/esm/toast/viewport/ToastViewportDataAttributes.js

@@ -0,0 +1,8 @@
+export let ToastViewportDataAttributes = /*#__PURE__*/function (ToastViewportDataAttributes) {
+  /**
+   * Indicates toasts are expanded in the viewport.
+   * @type {boolean}
+   */
+  ToastViewportDataAttributes["expanded"] = "data-expanded";
+  return ToastViewportDataAttributes;
+}({});

package/esm/toggle/Toggle.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import type { TaleUIComponentProps, NativeButtonProps } from "../utils/types.js";
+import { type TaleUIChangeEventDetails } from "../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../utils/reasons.js";
+/**
+ * A two-state button that can be on or off.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Tale UI Toggle](https://base-ui.com/react/components/toggle)
+ */
+export declare const Toggle: {
+  <Value extends string>(props: Toggle.Props<Value> & React.RefAttributes<HTMLButtonElement>): React.JSX.Element;
+};
+export interface ToggleState {
+  /**
+   * Whether the toggle is currently pressed.
+   */
+  pressed: boolean;
+  /**
+   * Whether the toggle should ignore user interaction.
+   */
+  disabled: boolean;
+}
+export interface ToggleProps<Value extends string> extends NativeButtonProps, TaleUIComponentProps<'button', Toggle.State> {
+  /**
+   * Whether the toggle button is currently pressed.
+   * This is the controlled counterpart of `defaultPressed`.
+   */
+  pressed?: boolean | undefined;
+  /**
+   * Whether the toggle button is currently pressed.
+   * This is the uncontrolled counterpart of `pressed`.
+   * @default false
+   */
+  defaultPressed?: boolean | undefined;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Callback fired when the pressed state is changed.
+   */
+  onPressedChange?: ((pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void) | undefined;
+  /**
+   * A unique string that identifies the toggle when used
+   * inside a toggle group.
+   */
+  value?: Value | undefined;
+}
+export type ToggleChangeEventReason = typeof REASONS.none;
+export type ToggleChangeEventDetails = TaleUIChangeEventDetails<Toggle.ChangeEventReason>;
+export declare namespace Toggle {
+  type State = ToggleState;
+  type Props<TValue extends string = string> = ToggleProps<TValue>;
+  type ChangeEventReason = ToggleChangeEventReason;
+  type ChangeEventDetails = ToggleChangeEventDetails;
+}

package/esm/toggle/Toggle.js

@@ -0,0 +1,108 @@
+'use client';
+
+import * as React from 'react';
+import { useStableCallback } from '@tale-ui/utils/useStableCallback';
+import { useControlled } from '@tale-ui/utils/useControlled';
+import { useIsoLayoutEffect } from '@tale-ui/utils/useIsoLayoutEffect';
+import { error } from '@tale-ui/utils/error';
+import { useTaleUiId } from "../utils/useTaleUiId.js";
+import { useRenderElement } from "../utils/useRenderElement.js";
+import { useToggleGroupContext } from "../toggle-group/ToggleGroupContext.js";
+import { useButton } from "../use-button/useButton.js";
+import { CompositeItem } from "../composite/item/CompositeItem.js";
+import { createChangeEventDetails } from "../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../utils/reasons.js";
+
+/**
+ * A two-state button that can be on or off.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Tale UI Toggle](https://base-ui.com/react/components/toggle)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentProps, forwardedRef) {
+  const {
+    className,
+    defaultPressed: defaultPressedProp = false,
+    disabled: disabledProp = false,
+    form,
+    // never participates in form validation
+    onPressedChange: onPressedChangeProp,
+    pressed: pressedProp,
+    render,
+    type,
+    // cannot change button type
+    value: valueProp,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+
+  // `|| undefined` handles cases, where value is falsy (i.e. "")
+  const value = useTaleUiId(valueProp || undefined);
+  const groupContext = useToggleGroupContext();
+  const groupValue = groupContext?.value ?? [];
+  const defaultPressed = groupContext ? undefined : defaultPressedProp;
+  const disabled = (disabledProp || groupContext?.disabled) ?? false;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsoLayoutEffect(() => {
+      if (groupContext && valueProp === undefined && groupContext.isValueInitialized) {
+        error('A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.', 'This will cause issues between the Toggle Group and Toggle values.', 'Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.');
+      }
+    }, [groupContext, valueProp, groupContext?.isValueInitialized]);
+  }
+  const [pressed, setPressedState] = useControlled({
+    controlled: groupContext ? value !== undefined && groupValue.indexOf(value) > -1 : pressedProp,
+    default: defaultPressed,
+    name: 'Toggle',
+    state: 'pressed'
+  });
+  const onPressedChange = useStableCallback((nextPressed, eventDetails) => {
+    if (value) {
+      groupContext?.setGroupValue?.(value, nextPressed, eventDetails);
+    }
+    onPressedChangeProp?.(nextPressed, eventDetails);
+  });
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  });
+  const state = {
+    disabled,
+    pressed
+  };
+  const refs = [buttonRef, forwardedRef];
+  const props = [{
+    'aria-pressed': pressed,
+    onClick(event) {
+      const nextPressed = !pressed;
+      const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
+      onPressedChange(nextPressed, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setPressedState(nextPressed);
+    }
+  }, elementProps, getButtonProps];
+  const element = useRenderElement('button', componentProps, {
+    enabled: !groupContext,
+    state,
+    ref: refs,
+    props
+  });
+  if (groupContext) {
+    return /*#__PURE__*/_jsx(CompositeItem, {
+      tag: "button",
+      render: render,
+      className: className,
+      state: state,
+      refs: refs,
+      props: props
+    });
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") Toggle.displayName = "Toggle";

package/esm/toggle/ToggleDataAttributes.d.ts

@@ -0,0 +1,6 @@
+export declare enum ToggleDataAttributes {
+  /**
+   * Present when the toggle button is pressed.
+   */
+  pressed = "data-pressed",
+}

package/esm/toggle/ToggleDataAttributes.js

@@ -0,0 +1,7 @@
+export let ToggleDataAttributes = /*#__PURE__*/function (ToggleDataAttributes) {
+  /**
+   * Present when the toggle button is pressed.
+   */
+  ToggleDataAttributes["pressed"] = "data-pressed";
+  return ToggleDataAttributes;
+}({});

package/esm/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { Toggle } from "./Toggle.js";
+export type * from "./Toggle.js";

package/esm/toggle/index.js

@@ -0,0 +1 @@
+export { Toggle } from "./Toggle.js";

package/esm/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import type { TaleUIComponentProps, Orientation } from "../utils/types.js";
+import type { TaleUIChangeEventDetails } from "../utils/createTaleUIEventDetails.js";
+import { REASONS } from "../utils/reasons.js";
+/**
+ * Provides a shared state to a series of toggle buttons.
+ *
+ * Documentation: [Tale UI Toggle Group](https://base-ui.com/react/components/toggle-group)
+ */
+export declare const ToggleGroup: {
+  <Value extends string>(props: ToggleGroup.Props<Value> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+};
+export interface ToggleGroupState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
+  multiple: boolean;
+  /**
+   * The orientation of the toggle group.
+   */
+  orientation: Orientation;
+}
+export interface ToggleGroupProps<Value extends string> extends TaleUIComponentProps<'div', ToggleGroup.State> {
+  /**
+   * The open state of the toggle group represented by an array of
+   * the values of all pressed toggle buttons.
+   * This is the controlled counterpart of `defaultValue`.
+   */
+  value?: readonly Value[] | undefined;
+  /**
+   * The open state of the toggle group represented by an array of
+   * the values of all pressed toggle buttons.
+   * This is the uncontrolled counterpart of `value`.
+   */
+  defaultValue?: readonly Value[] | undefined;
+  /**
+   * Callback fired when the pressed states of the toggle group changes.
+   */
+  onValueChange?: ((groupValue: Value[], eventDetails: ToggleGroup.ChangeEventDetails) => void) | undefined;
+  /**
+   * Whether the toggle group should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * @default 'horizontal'
+   */
+  orientation?: Orientation | undefined;
+  /**
+   * Whether to loop keyboard focus back to the first item
+   * when the end of the list is reached while using the arrow keys.
+   * @default true
+   */
+  loopFocus?: boolean | undefined;
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
+  multiple?: boolean | undefined;
+}
+export type ToggleGroupChangeEventReason = typeof REASONS.none;
+export type ToggleGroupChangeEventDetails = TaleUIChangeEventDetails<ToggleGroup.ChangeEventReason>;
+export declare namespace ToggleGroup {
+  type State = ToggleGroupState;
+  type Props<Value extends string = string> = ToggleGroupProps<Value>;
+  type ChangeEventReason = ToggleGroupChangeEventReason;
+  type ChangeEventDetails = ToggleGroupChangeEventDetails;
+}