@pie-lib/mask-markup 3.1.4 → 3.1.6-beta.1

package/src/components/__tests__/correct-input.test.js

@@ -1,90 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import CorrectInput from '../correct-input';
-
-describe('CorrectInput', () => {
-  const onChange = jest.fn();
-  const defaultProps = {
-    disabled: false,
-    correct: false,
-    variant: 'outlined',
-    value: 'Cow',
-    onChange,
-  };
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders input with default props', () => {
-      render(<CorrectInput {...defaultProps} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-      expect(input).toHaveValue('Cow');
-    });
-
-    it('renders as disabled when disabled prop is true', () => {
-      render(<CorrectInput {...defaultProps} disabled={true} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeDisabled();
-    });
-
-    it('renders with correct state as false', () => {
-      const { container } = render(<CorrectInput {...defaultProps} correct={false} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('renders with correct state as true', () => {
-      const { container } = render(<CorrectInput {...defaultProps} correct={true} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-      // Should show visual indication of correctness
-    });
-
-    it('renders with outlined variant', () => {
-      render(<CorrectInput {...defaultProps} variant="outlined" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange when user types', async () => {
-      const user = userEvent.setup();
-      render(<CorrectInput {...defaultProps} />);
-
-      const input = screen.getByRole('textbox');
-      await user.clear(input);
-      await user.type(input, '1');
-
-      expect(onChange).toHaveBeenCalled();
-    });
-
-    it('calls onChange with event object', async () => {
-      const user = userEvent.setup();
-      render(<CorrectInput {...defaultProps} value="" />);
-
-      const input = screen.getByRole('textbox');
-      await user.type(input, 'test');
-
-      expect(onChange).toHaveBeenCalled();
-      // Check that onChange receives an event-like object
-      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
-      expect(lastCall).toHaveProperty('target');
-    });
-
-    it('updates value when user changes input', async () => {
-      const user = userEvent.setup();
-      render(<CorrectInput {...defaultProps} />);
-
-      const input = screen.getByRole('textbox');
-      await user.clear(input);
-      await user.type(input, 'Dog');
-
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-});

package/src/components/__tests__/dropdown.test.js

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { choice } from '../../__tests__/utils';
-import Dropdown from '../dropdown';
-
-describe('Dropdown', () => {
-  const onChange = jest.fn();
-  const defaultProps = {
-    onChange,
-    id: '1',
-    correct: false,
-    disabled: false,
-    value: 'Jumped',
-    choices: [choice('Jumped'), choice('Laughed'), choice('Smiled')],
-  };
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders dropdown with default props', () => {
-      render(<Dropdown {...defaultProps} />);
-      const button = screen.getByRole('combobox');
-      expect(button).toBeInTheDocument();
-      // Button displays the selected value
-      expect(button).toHaveTextContent('Jumped');
-    });
-
-    it('renders with all choices as options when opened', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} />);
-
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      // Options should now be visible - find them by role
-      const options = screen.getAllByRole('option');
-      expect(options).toHaveLength(3);
-      // Verify the text content of options using specific elements
-      expect(options[0]).toHaveTextContent('Jumped');
-      expect(options[1]).toHaveTextContent('Laughed');
-      expect(options[2]).toHaveTextContent('Smiled');
-    });
-
-    it('focuses the selected option when the menu opens', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} />);
-
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      await waitFor(() => {
-        expect(document.getElementById('dropdown-option-1-0')).toHaveFocus();
-      });
-      expect(button).toHaveAttribute('aria-activedescendant', 'dropdown-option-1-0');
-    });
-
-    it('focuses a non-first selected option when the menu opens', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} value="Laughed" />);
-
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      await waitFor(() => {
-        expect(document.getElementById('dropdown-option-1-1')).toHaveFocus();
-      });
-      expect(button).toHaveAttribute('aria-activedescendant', 'dropdown-option-1-1');
-    });
-
-    it('does not highlight an option when no value is selected', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} value={undefined} />);
-
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      expect(button).not.toHaveAttribute('aria-activedescendant');
-    });
-
-    it('renders as disabled when disabled prop is true', () => {
-      render(<Dropdown {...defaultProps} disabled={true} />);
-      const button = screen.getByRole('combobox');
-      expect(button).toBeDisabled();
-    });
-
-    it('shows correct state when correct is true', () => {
-      const { container } = render(<Dropdown {...defaultProps} correct={true} />);
-      const button = screen.getByRole('combobox');
-      expect(button).toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange when user selects a different option', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} />);
-
-      // Click button to open menu
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      // Find the option by getting all options and selecting the one with "Laughed" text
-      const options = screen.getAllByRole('option');
-      const laughedOption = options.find((opt) => opt.textContent.includes('Laughed'));
-      await user.click(laughedOption);
-
-      expect(onChange).toHaveBeenCalledWith('1', 'Laughed');
-    });
-
-    it('calls onChange with correct value', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} />);
-
-      // Click button to open menu
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      // Find the option by getting all options and selecting the one with "Smiled" text
-      const options = screen.getAllByRole('option');
-      const smiledOption = options.find((opt) => opt.textContent.includes('Smiled'));
-      await user.click(smiledOption);
-
-      expect(onChange).toHaveBeenCalledWith('1', 'Smiled');
-    });
-  });
-});

package/src/components/__tests__/input.test.js

@@ -1,102 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Input from '../input';
-
-// Mock CorrectInput to simplify testing
-jest.mock('../correct-input', () => {
-  return function CorrectInput({ value, onChange, disabled, correct, variant }) {
-    return (
-      <input
-        data-testid="correct-input"
-        value={value || ''}
-        onChange={onChange}
-        disabled={disabled}
-        data-correct={correct}
-        data-variant={variant}
-      />
-    );
-  };
-});
-
-describe('Input', () => {
-  const onChange = jest.fn();
-  const defaultProps = {
-    disabled: false,
-    correct: false,
-    value: 'Cow',
-    id: '1',
-    onChange,
-  };
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders with default props', () => {
-      render(<Input {...defaultProps} />);
-      const input = screen.getByTestId('correct-input');
-
-      expect(input).toBeInTheDocument();
-      expect(input).toHaveValue('Cow');
-      expect(input).not.toBeDisabled();
-      expect(input).toHaveAttribute('data-correct', 'false');
-    });
-
-    it('renders as disabled when disabled prop is true', () => {
-      render(<Input {...defaultProps} disabled={true} />);
-      const input = screen.getByTestId('correct-input');
-
-      expect(input).toBeDisabled();
-    });
-
-    it('renders with correct state', () => {
-      render(<Input {...defaultProps} correct={true} />);
-      const input = screen.getByTestId('correct-input');
-
-      expect(input).toHaveAttribute('data-correct', 'true');
-    });
-
-    it('shows correct answer when showCorrectAnswer is true', () => {
-      render(<Input {...defaultProps} showCorrectAnswer={true} />);
-      const input = screen.getByTestId('correct-input');
-
-      expect(input).toHaveAttribute('data-correct', 'true');
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange with id and value when user types', async () => {
-      const user = userEvent.setup();
-      render(<Input {...defaultProps} value="" />);
-
-      const input = screen.getByTestId('correct-input');
-      await user.type(input, '20');
-
-      // userEvent.type types character by character, so onChange is called for each character
-      expect(onChange).toHaveBeenCalled();
-      expect(onChange).toHaveBeenCalledTimes(2);
-      // Check the last call has both characters
-      expect(onChange).toHaveBeenLastCalledWith('1', '0');
-    });
-
-    it('calls onChange with updated value', async () => {
-      const user = userEvent.setup();
-      render(<Input {...defaultProps} />);
-
-      const input = screen.getByTestId('correct-input');
-      await user.clear(input);
-      await user.type(input, 'New Value');
-
-      // userEvent.type types character by character
-      // After clear, we start with empty string, and each character is typed
-      // The last call should have the full accumulated value up to the last character
-      expect(onChange).toHaveBeenCalled();
-      // With clear + "New Value", onChange is called for clearing ("") and each typed character
-      // The value accumulated in the input element after typing will be "CowNew Value"
-      // because the component starts with value="Cow" and we clear then type
-      expect(onChange.mock.calls.length).toBeGreaterThan(0);
-    });
-  });
-});

package/src/keyboard-coordinates.js

@@ -1,147 +0,0 @@
-import { defaultKeyboardCoordinateGetter, KeyboardCode } from '@dnd-kit/core';
-
-// Matches the id `drag-in-the-blank-dp.jsx` registers for the choice board's droppable.
-const CHOICE_BOARD_ID = 'drag-in-the-blank-droppable';
-
-/**
- * Custom keyboard coordinate getter for drag-in-the-blank's Tab-based placement.
- *
- * Tab/Shift+Tab cycle the dragged item directly onto the next/previous enabled
- * droppable — a blank (`mask-blank-drop-{id}`), sorted by on-screen position
- * (top-to-bottom, then left-to-right, since blanks sit inline in flowing text rather
- * than a simple list) — followed by the choice board as a fixed last stop (see below
- * for why the board isn't sorted alongside the blanks).
- *
- * Arrow keys are delegated to dnd-kit's own `defaultKeyboardCoordinateGetter`, leaving
- * the existing free-form arrow-key dragging behavior completely unchanged.
- */
-export const closestDroppableKeyboardCoordinates = (event, { active, context, currentCoordinates }) => {
-  const { code } = event;
-  const isTab = code === KeyboardCode.Tab;
-  const isArrow =
-    code === KeyboardCode.Down || code === KeyboardCode.Up || code === KeyboardCode.Left || code === KeyboardCode.Right;
-
-  if (!isTab && !isArrow) {
-    return undefined;
-  }
-
-  if (isArrow) {
-    return defaultKeyboardCoordinateGetter(event, { context, currentCoordinates });
-  }
-
-  event.preventDefault();
-
-  const { droppableRects, droppableContainers, collisionRect } = context;
-
-  if (!droppableRects || droppableRects.size === 0) {
-    return currentCoordinates;
-  }
-
-  // A blank is itself a droppable for its own slot ("mask-blank-drop-{id}"), and
-  // simultaneously draggable from that same slot — the same shape as match-list's
-  // placed "target" tiles. That self drop-zone must never be treated as a navigable
-  // target: exclude it outright rather than relying on a distance threshold.
-  const draggedData = active?.data?.current;
-  const ownDropId =
-    draggedData && draggedData.fromChoice === false && draggedData.id != null
-      ? `mask-blank-drop-${draggedData.id}`
-      : undefined;
-
-  const targets = [];
-  let boardTarget;
-
-  for (const [id, container] of droppableContainers) {
-    if (container?.disabled) continue;
-    if (id === ownDropId) continue;
-
-    const rect = droppableRects.get(id);
-    if (!rect) continue;
-
-    const center = {
-      x: rect.left + rect.width / 2,
-      y: rect.top + rect.height / 2,
-    };
-    // Land the dragged item's own top-left corner at the target's center-left point,
-    // rather than at the target's own top-left corner (avoids overshooting into a
-    // neighboring droppable when the target is much wider than the dragged item).
-    const dropPosition = {
-      x: rect.left,
-      y: rect.top + rect.height / 2,
-    };
-
-    const target = { id, rect, dropPosition, center };
-
-    if (id === CHOICE_BOARD_ID) {
-      boardTarget = target;
-    } else {
-      targets.push(target);
-    }
-  }
-
-  if (targets.length === 0 && !boardTarget) {
-    return currentCoordinates;
-  }
-
-  const reverse = event.shiftKey;
-
-  targets.sort((a, b) => {
-    if (Math.abs(a.center.y - b.center.y) > 10) return a.center.y - b.center.y;
-    return a.center.x - b.center.x;
-  });
-
-  // The choice board can be an arbitrarily large container — e.g. several choices
-  // stacked beside the markup (`choicePosition: 'right'`/`'left'`) — so its own center
-  // can land anywhere relative to the blanks it sits beside, including numerically
-  // between two of them. Sorting it by position the same way as a blank would then
-  // interleave it into the middle of the cycle, making a single Tab press jump over
-  // more than one blank (confirmed live: with 3 stacked choices beside wrapped text,
-  // the board's center fell between blank 2 and blank 3, so the very first Tab press
-  // from the pool landed on blank 3, skipping blanks 1 and 2 entirely). Anchor it as a
-  // fixed stop after every blank, in every layout, instead of trusting its own bounds.
-  if (boardTarget) {
-    targets.push(boardTarget);
-  }
-
-  // Find the current target: whichever target's rect actually contains the dragged
-  // item's own center. This holds regardless of how the dragged item's size compares
-  // to the target's — a compact chip landed (per `dropPosition` above) at a much wider
-  // target's left edge is still contained within that target's rect. Comparing
-  // distances between reconstructed centers instead breaks down for exactly that shape
-  // (a small item in a much wider target): the reconstructed center can end up closer
-  // to a completely different droppable than to the one the item is actually sitting
-  // on, so the *next* press re-matches the wrong target and looks like it does nothing.
-  const draggedCenter = collisionRect
-    ? { x: collisionRect.left + collisionRect.width / 2, y: collisionRect.top + collisionRect.height / 2 }
-    : currentCoordinates;
-
-  let currentIndex = targets.findIndex(
-    (t) =>
-      draggedCenter.x >= t.rect.left &&
-      draggedCenter.x <= t.rect.right &&
-      draggedCenter.y >= t.rect.top &&
-      draggedCenter.y <= t.rect.bottom,
-  );
-
-  // Fall back to nearest-by-dropPosition if the dragged item's center isn't strictly
-  // inside any target (e.g. mid-flight after a free arrow-key move).
-  if (currentIndex === -1) {
-    let minDist = Infinity;
-
-    for (let i = 0; i < targets.length; i++) {
-      const dist = distance(currentCoordinates, targets[i].dropPosition);
-
-      if (dist < minDist) {
-        minDist = dist;
-        currentIndex = i;
-      }
-    }
-  }
-
-  const nextIndex = reverse
-    ? (currentIndex - 1 + targets.length) % targets.length
-    : (currentIndex + 1) % targets.length;
-
-  return targets[nextIndex].dropPosition;
-};
-
-const distance = (a, b) => Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);