@astryxdesign/lab 0.7.7-canary.c0929c8 → 0.7.7-canary.c19ca12

package/src/InfoTip/InfoTip.tsx

@@ -1,128 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file InfoTip.tsx
- * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
- * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
- * @position Lab experiment (RFC meta/astryx#3349); core implementation consumed by index.ts
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
- * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
- * - /packages/lab/src/InfoTip/index.ts (exports if types change)
- */
-
-import {type ReactNode} from 'react';
-import * as stylex from '@stylexjs/stylex';
-
-import {Icon, type IconSize} from '@astryxdesign/core/Icon';
-import {Tooltip} from '@astryxdesign/core/Tooltip';
-import {
-  colorVars,
-  durationVars,
-  easeVars,
-  radiusVars,
-  spacingVars,
-} from '@astryxdesign/core/theme/tokens.stylex';
-import {focusOutlineStyles} from '@astryxdesign/core/utils';
-
-/**
- * Size of the info icon. Maps 1:1 to Icon sizes
- * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
- */
-export type InfoTipSize = IconSize;
-
-export interface InfoTipProps {
-  /**
-   * Content to display in the tooltip.
-   * Typically short, non-interactive text. Mirrors Tooltip's `content` prop.
-   */
-  content: ReactNode;
-  /**
-   * Accessible name for the trigger button.
-   * @default 'More information'
-   */
-  label?: string;
-  /**
-   * Size of the info icon.
-   * @default 'sm'
-   */
-  size?: InfoTipSize;
-}
-
-const styles = stylex.create({
-  trigger: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    verticalAlign: 'middle',
-    padding: spacingVars['--spacing-0-5'],
-    margin: 0,
-    borderStyle: 'none',
-    backgroundColor: 'transparent',
-    borderRadius: radiusVars['--radius-full'],
-    cursor: {
-      default: 'pointer',
-      ':is(:disabled,[aria-disabled="true"])': 'default',
-    },
-    color: {
-      default: colorVars['--color-icon-secondary'],
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        default: null,
-        '@media (hover: hover)': colorVars['--color-icon-primary'],
-      },
-    },
-    transitionProperty: 'color',
-    transitionDuration: durationVars['--duration-fast'],
-    transitionTimingFunction: easeVars['--ease-standard'],
-  },
-});
-
-/**
- * An inline info-icon help affordance: a small "i" button that reveals a
- * tooltip on hover, keyboard focus, and tap. Use it next to labels, values,
- * and metrics for permission notes, metric definitions, and field help.
- *
- * The value over hand-composing Icon inside Tooltip is the pre-wired
- * accessible trigger: a real button with an aria-label, Tab-reachable,
- * tooltip on hover AND focus, and Escape dismissal.
- *
- * Composed entirely from core primitives (Tooltip + Icon); the info icon
- * resolves from the global icon registry, so themes can override it.
- *
- * @example
- * ```
- * <InfoTip content="Editors can change this field; viewers cannot." />
- * <InfoTip content="30-day rolling average." label="About this metric" />
- * ```
- */
-export function InfoTip({
-  content,
-  label = 'More information',
-  size = 'sm',
-}: InfoTipProps): ReactNode {
-  // No local Escape handler: the trigger used to stopPropagation the press,
-  // which hid the tip but left the browser's close watcher to fire `cancel` on
-  // an enclosing Dialog, so one press took both (#5168). Tooltip's own entry in
-  // the shared dismissal stack takes it instead.
-  return (
-    <Tooltip
-      content={content}
-      // The trigger is a real button, so Tooltip's `auto` touch rule would
-      // give the tap to the control and suppress the tooltip. Here the tooltip
-      // IS the control's only purpose, so the tap has to open it — otherwise
-      // an InfoTip's content is unreachable on a phone.
-      touchTrigger="tap">
-      <button
-        type="button"
-        aria-label={label}
-        {...stylex.props(focusOutlineStyles.focusVisible, styles.trigger)}>
-        <Icon icon="info" size={size} />
-      </button>
-    </Tooltip>
-  );
-}
-
-InfoTip.displayName = 'InfoTip';

package/src/internal/MobileSheetConfirmation.test.tsx

@@ -1,68 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {fireEvent, render, screen, within} from '@testing-library/react';
-import {beforeEach, describe, expect, it, vi} from 'vitest';
-import {MobileSheetConfirmation} from './MobileSheetConfirmation';
-
-// jsdom has no native modal presentation; keep the public Dialog path active.
-beforeEach(() => {
-  HTMLDialogElement.prototype.showModal = vi.fn(function (
-    this: HTMLDialogElement,
-  ) {
-    this.setAttribute('open', '');
-  });
-  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
-    this.removeAttribute('open');
-  });
-  window.scrollTo = vi.fn();
-});
-
-function setup() {
-  const onAction = vi.fn();
-  const onOpenChange = vi.fn();
-  render(
-    <MobileSheetConfirmation
-      isOpen
-      onOpenChange={onOpenChange}
-      title="Discard changes?"
-      description="The draft will be removed."
-      actionLabel="Discard"
-      cancelLabel="Keep editing"
-      onAction={onAction}
-    />,
-  );
-  const dialog = screen.getByRole('alertdialog', {name: 'Discard changes?'});
-  return {dialog, onAction, onOpenChange};
-}
-
-describe('MobileSheetConfirmation', () => {
-  it('keeps the alert-dialog theme target and accessible copy', () => {
-    const {dialog} = setup();
-    expect(dialog).toHaveClass('astryx-alert-dialog');
-    expect(dialog).toHaveAccessibleDescription('The draft will be removed.');
-  });
-
-  it('stacks full-width large actions with the secondary safe action focused', () => {
-    const {dialog} = setup();
-    const [destructive, safe] = within(dialog).getAllByRole('button');
-    expect(destructive).toHaveAccessibleName('Discard');
-    expect(destructive).toHaveAttribute('data-variant', 'destructive');
-    expect(safe).toHaveAccessibleName('Keep editing');
-    expect(safe).toHaveAttribute('data-variant', 'secondary');
-    for (const button of [destructive, safe]) {
-      expect(button).toHaveAttribute('data-size', 'lg');
-      expect(getComputedStyle(button).width).toBe('100%');
-    }
-    expect(getComputedStyle(safe.parentElement!).flexDirection).toBe('column');
-    expect(safe).toHaveFocus();
-  });
-
-  it('reports action and safe dismissal independently without committing on cancel', () => {
-    const {dialog, onAction, onOpenChange} = setup();
-    fireEvent.click(within(dialog).getByRole('button', {name: 'Keep editing'}));
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-    expect(onAction).not.toHaveBeenCalled();
-    fireEvent.click(within(dialog).getByRole('button', {name: 'Discard'}));
-    expect(onAction).toHaveBeenCalledTimes(1);
-  });
-});

package/src/internal/MobileSheetConfirmation.tsx

@@ -1,97 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file MobileSheetConfirmation.tsx
- * @input Public Core Dialog, layout, text and action primitives; caller-owned copy
- * @output Private confirmation shared by MobileTokenizer and MobilePowerSearch
- * @position Lab-only mobile sheet confirmation owner; not a public export
- *
- * Core AlertDialog fixes its purpose to form and its safe action to ghost.
- * These Lab flows instead allow scrim dismissal and use separated, full-width
- * large actions with the secondary safe action focused first. Keep that
- * difference here, while preserving the existing alert-dialog theme target.
- */
-
-import {useId} from 'react';
-import * as stylex from '@stylexjs/stylex';
-import {Button} from '@astryxdesign/core/Button';
-import {Dialog} from '@astryxdesign/core/Dialog';
-import {Heading} from '@astryxdesign/core/Heading';
-import {Layout, LayoutContent, LayoutFooter} from '@astryxdesign/core/Layout';
-import {Stack} from '@astryxdesign/core/Stack';
-import {Text} from '@astryxdesign/core/Text';
-import {themeProps} from '@astryxdesign/core/utils';
-
-interface MobileSheetConfirmationProps {
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  title: string;
-  description: string;
-  cancelLabel: string;
-  actionLabel: string;
-  onAction: () => void;
-}
-
-const styles = stylex.create({
-  action: {width: '100%'},
-});
-
-export function MobileSheetConfirmation({
-  isOpen,
-  onOpenChange,
-  title,
-  description,
-  cancelLabel,
-  actionLabel,
-  onAction,
-}: MobileSheetConfirmationProps) {
-  const titleId = useId();
-  const descriptionId = useId();
-  return (
-    <Dialog
-      {...themeProps('alert-dialog')}
-      isOpen={isOpen}
-      onOpenChange={onOpenChange}
-      purpose="info"
-      role="alertdialog"
-      aria-labelledby={titleId}
-      aria-describedby={descriptionId}
-      width={400}>
-      <Layout
-        content={
-          <LayoutContent>
-            <Heading level={2} id={titleId}>
-              {title}
-            </Heading>
-            <Text type="body" color="secondary" id={descriptionId}>
-              {description}
-            </Text>
-          </LayoutContent>
-        }
-        footer={
-          <LayoutFooter>
-            <Stack direction="vertical" gap={4} hAlign="stretch">
-              <Button
-                label={actionLabel}
-                variant="destructive"
-                size="lg"
-                onClick={onAction}
-                xstyle={styles.action}
-              />
-              <Button
-                label={cancelLabel}
-                variant="secondary"
-                size="lg"
-                onClick={() => onOpenChange(false)}
-                data-autofocus
-                xstyle={styles.action}
-              />
-            </Stack>
-          </LayoutFooter>
-        }
-      />
-    </Dialog>
-  );
-}

package/src/internal/useDismissSearchOnTouchDrag.test.tsx

@@ -1,94 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {useRef} from 'react';
-import {fireEvent, render, screen} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import {describe, expect, it, vi} from 'vitest';
-import {useDismissSearchOnTouchDrag} from './useDismissSearchOnTouchDrag';
-
-function Harness({hasSecondSearch = false}: {hasSecondSearch?: boolean}) {
-  const firstRef = useRef<HTMLInputElement>(null);
-  const secondRef = useRef<HTMLInputElement>(null);
-  const dragProps = useDismissSearchOnTouchDrag(() => [
-    firstRef.current,
-    secondRef.current,
-  ]);
-  return (
-    <>
-      <input ref={firstRef} aria-label="First search" />
-      {hasSecondSearch && <input ref={secondRef} aria-label="Second search" />}
-      <input aria-label="Unrelated field" />
-      <div role="group" aria-label="Results" {...dragProps} />
-    </>
-  );
-}
-
-const touches = (clientY: number) => [{clientY}];
-
-function setup() {
-  render(<Harness hasSecondSearch />);
-  const search = screen.getByRole('textbox', {name: 'First search'});
-  const results = screen.getByRole('group', {name: 'Results'});
-  search.focus();
-  return {search, results};
-}
-
-describe('useDismissSearchOnTouchDrag', () => {
-  it('preserves typing across programmatic result scrolling', async () => {
-    const {search, results} = setup();
-    fireEvent.scroll(results, {target: {scrollTop: 300}});
-    await userEvent.setup().type(search, 'Eng');
-    fireEvent.scroll(results, {target: {scrollTop: 0}});
-    expect(search).toHaveFocus();
-    expect(search).toHaveValue('Eng');
-  });
-
-  it('blurs a focused owned search once at the direct vertical drag threshold', () => {
-    const {search, results} = setup();
-    const blur = vi.spyOn(search, 'blur');
-    fireEvent.touchStart(results, {touches: touches(100)});
-    fireEvent.touchMove(results, {touches: touches(107)});
-    expect(search).toHaveFocus();
-    fireEvent.touchMove(results, {touches: touches(108)});
-    expect(search).not.toHaveFocus();
-    fireEvent.touchMove(results, {touches: touches(120)});
-    expect(blur).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not blur on an unowned touch move, tap, or horizontal motion', () => {
-    const {search, results} = setup();
-    fireEvent.touchMove(results, {touches: touches(120)});
-    expect(search).toHaveFocus();
-    fireEvent.touchStart(results, {touches: [{clientY: 100, clientX: 0}]});
-    fireEvent.touchMove(results, {touches: [{clientY: 100, clientX: 100}]});
-    fireEvent.touchEnd(results);
-    fireEvent.touchMove(results, {touches: touches(120)});
-    expect(search).toHaveFocus();
-  });
-
-  it('resets ownership on cancellation and multi-touch without dismissing', () => {
-    const {search, results} = setup();
-    fireEvent.touchStart(results, {touches: touches(100)});
-    fireEvent.touchCancel(results);
-    fireEvent.touchMove(results, {touches: touches(120)});
-    expect(search).toHaveFocus();
-    fireEvent.touchStart(results, {touches: touches(100)});
-    fireEvent.touchMove(results, {touches: [{clientY: 120}, {clientY: 140}]});
-    fireEvent.touchMove(results, {touches: touches(150)});
-    expect(search).toHaveFocus();
-  });
-
-  it('can dismiss either current owned input, but never an unrelated field', () => {
-    const {results} = setup();
-    const secondSearch = screen.getByRole('textbox', {name: 'Second search'});
-    secondSearch.focus();
-    fireEvent.touchStart(results, {touches: touches(100)});
-    fireEvent.touchMove(results, {touches: touches(90)});
-    expect(secondSearch).not.toHaveFocus();
-    const unrelated = screen.getByRole('textbox', {name: 'Unrelated field'});
-    unrelated.focus();
-    fireEvent.touchStart(results, {touches: touches(100)});
-    fireEvent.touchMove(results, {touches: touches(120)});
-    expect(unrelated).toHaveFocus();
-  });
-});

package/src/internal/useDismissSearchOnTouchDrag.ts

@@ -1,57 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file useDismissSearchOnTouchDrag.ts
- * @input Caller-owned search inputs and touch events from a separate results list
- * @output Private touch handlers shared by the Lab mobile search sheets
- * @position One owner for results-drag keyboard dismissal; not a public export
- *
- * A direct vertical touch drag dismisses only a focused caller-owned search.
- * Scroll events are deliberately not observed: filtering can clamp scrollTop
- * and fire scroll while someone is typing. Small moves, taps and multi-touch
- * gestures leave focus alone. The hook acquires no external resource.
- */
-
-import {useRef, type TouchEvent} from 'react';
-
-const DRAG_THRESHOLD_PX = 8;
-
-type SearchInput = HTMLInputElement | null | undefined;
-
-export function useDismissSearchOnTouchDrag(
-  getSearchInputs: () => readonly SearchInput[],
-) {
-  const startYRef = useRef<number | null>(null);
-  const reset = () => {
-    startYRef.current = null;
-  };
-
-  return {
-    onTouchStart: (event: TouchEvent<HTMLElement>) => {
-      startYRef.current =
-        event.touches.length === 1 ? event.touches[0].clientY : null;
-    },
-    onTouchMove: (event: TouchEvent<HTMLElement>) => {
-      if (event.touches.length !== 1) {
-        reset();
-        return;
-      }
-      const startY = startYRef.current;
-      if (
-        startY == null ||
-        Math.abs(event.touches[0].clientY - startY) < DRAG_THRESHOLD_PX
-      ) {
-        return;
-      }
-      reset();
-      const focusedSearch = getSearchInputs().find(
-        input => input != null && input === document.activeElement,
-      );
-      focusedSearch?.blur();
-    },
-    onTouchEnd: reset,
-    onTouchCancel: reset,
-  };
-}