@pie-lib/mask-markup 3.0.4-next.0 → 3.0.4-next.104

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

@@ -0,0 +1,129 @@
+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

@@ -0,0 +1,102 @@
+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/components/blank.jsx

@@ -0,0 +1,431 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { renderMath } from '@pie-lib/math-rendering';
+import debug from 'debug';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
+import classnames from 'classnames';
+import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
+
+const log = debug('pie-lib:mask-markup:blank');
+
+const StyledContent = styled('span')(({ dragged, over }) => ({
+  border: `solid 0px ${color.primary()}`,
+  minWidth: '200px',
+  touchAction: 'none',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  opacity: 1,
+  ...(over && {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  }),
+  ...(dragged && {
+    opacity: 0.5,
+  }),
+}));
+
+const StyledChip = styled(Chip)(() => ({
+  backgroundColor: color.background(),
+  border: `2px dashed ${color.text()}`,
+  touchAction: 'none',
+  color: color.text(),
+  fontSize: 'inherit',
+  maxWidth: '374px',
+  position: 'relative',
+  borderRadius: '3px',
+  '&.over': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  },
+  '&.parentOver': {
+    border: `1px solid ${grey[500]}`,
+    backgroundColor: `${grey[300]}`,
+  },
+  '&.correct': {
+    border: `solid 1px ${color.correct()}`,
+  },
+  '&.incorrect': {
+    border: `solid 1px ${color.incorrect()}`,
+  },
+  '&.Mui-disabled': {
+    opacity: 1,
+  },
+}));
+
+const StyledChipLabel = styled('span')(() => ({
+  whiteSpace: 'normal',
+  // Added for touch devices, for image content.
+  // This will prevent the context menu from appearing and not allowing other interactions with the image.
+  // If interactions with the image in the token will be requested we should handle only the context Menu.
+  pointerEvents: 'none',
+  '& img': {
+    display: 'block',
+    padding: '2px 0',
+  },
+  // Remove default <p> margins to ensure consistent spacing across all wrapped content (p, span, div, math)
+  // Padding for top and bottom will instead be controlled by the container for consistent layout
+  // Ensures consistent behavior with pie-api-browser, where marginTop is already removed by a Bootstrap stylesheet
+  '& p': {
+    marginTop: '0',
+    marginBottom: '0',
+  },
+  '& mjx-frac': {
+    fontSize: '120% !important',
+  },
+  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {
+    fontSize: '120% !important',
+  },
+  '&.over': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  },
+  '&.hidden': {
+    color: 'transparent',
+    opacity: 0,
+  },
+  '&.dragged': {
+    position: 'absolute',
+    left: 16,
+    maxWidth: '60px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+}));
+
+function BlankContent({
+  disabled,
+  choice,
+  isOver,
+  isDragging,
+  dragItem,
+  correct,
+  emptyResponseAreaWidth,
+  emptyResponseAreaHeight,
+}) {
+  const rootRef = useRef(null);
+  const spanRef = useRef(null);
+  const frozenRef = useRef(null); // to use during dragging to prevent flickering
+  const measuringRef = useRef(false); // guard against ResizeObserver feedback loops
+  const [dimensions, setDimensions] = useState({ height: 0, width: 0 });
+
+  const handleImageLoad = () => {
+    updateDimensions();
+  };
+
+  const handleElements = () => {
+    const imageElement = spanRef.current?.querySelector('img');
+    if (imageElement) {
+      imageElement.onload = handleImageLoad;
+    } else {
+      setTimeout(() => {
+        updateDimensions();
+      }, 300);
+    }
+  };
+
+  const getMeasureNode = () => {
+    if (!spanRef.current) {
+      return null;
+    }
+
+    const mjx = spanRef.current.querySelector('mjx-container');
+
+    if (mjx && spanRef.current.parentElement) {
+      return spanRef.current.parentElement;
+    }
+
+    const img = spanRef.current.querySelector('img');
+
+    if (img) {
+      // If there's text alongside the image, measure the full span to capture both dimensions
+      const hasTextContent = spanRef.current.textContent.trim().length > 0;
+
+      return hasTextContent ? spanRef.current : img;
+    }
+
+    return spanRef.current;
+  };
+
+  const updateDimensions = () => {
+    if (spanRef.current && rootRef.current && !measuringRef.current) {
+      measuringRef.current = true;
+      // Temporarily set rootRef width to 'auto' for natural measurement
+      rootRef.current.style.width = 'auto';
+      rootRef.current.style.height = 'auto';
+      rootRef.current.offsetHeight;
+
+      const measureNode = getMeasureNode();
+      const node = measureNode || spanRef.current;
+      const rect = node.getBoundingClientRect();
+      const width = node.offsetWidth || rect.width || 0;
+      const height = Math.max(
+        node.offsetHeight || 0,
+        rect.height || 0,
+        node.scrollHeight || 0,
+        spanRef.current.scrollHeight || 0,
+      );
+
+      const PADDING = 12;
+      const BORDER_WIDTH = 2;
+      const ADDITIONAL_SPACE = 1;
+      // padding and border on each side
+      const widthWithPadding = width + 2 * PADDING + 2 * BORDER_WIDTH + ADDITIONAL_SPACE;
+      // padding and border on top and bottom
+      const heightWithPadding = height + 2 * PADDING + 2 * BORDER_WIDTH + ADDITIONAL_SPACE;
+
+      const responseAreaWidth = parseFloat(emptyResponseAreaWidth) || 0;
+      const responseAreaHeight = parseFloat(emptyResponseAreaHeight) || 0;
+
+      const adjustedWidth = widthWithPadding <= responseAreaWidth ? responseAreaWidth : widthWithPadding;
+      const adjustedHeight = heightWithPadding <= responseAreaHeight ? responseAreaHeight : heightWithPadding;
+
+      setDimensions((prevState) => ({
+        width: adjustedWidth > responseAreaWidth ? adjustedWidth : prevState.width,
+        height: adjustedHeight > responseAreaHeight ? adjustedHeight : prevState.height,
+      }));
+
+      const nextWidth = `${adjustedWidth}px`;
+      const nextHeight = `${adjustedHeight}px`;
+      if (rootRef.current.style.width !== nextWidth) {
+        rootRef.current.style.width = nextWidth;
+      }
+      if (rootRef.current.style.height !== nextHeight) {
+        rootRef.current.style.height = nextHeight;
+      }
+      measuringRef.current = false;
+    }
+  };
+
+  const getRootDimensions = () => {
+    // Handle potential non-numeric values
+    const responseAreaWidth = !isNaN(parseFloat(emptyResponseAreaWidth)) ? parseFloat(emptyResponseAreaWidth) : 0;
+    const responseAreaHeight = !isNaN(parseFloat(emptyResponseAreaHeight)) ? parseFloat(emptyResponseAreaHeight) : 0;
+
+    const rootStyle = {
+      height: dimensions.height || responseAreaHeight,
+      width: dimensions.width || responseAreaWidth,
+    };
+
+    // add minWidth, minHeight if width and height are not defined
+    return {
+      ...rootStyle,
+      ...(responseAreaWidth ? {} : { minWidth: 90 }),
+      ...(responseAreaHeight ? {} : { minHeight: 32 }),
+    };
+  };
+
+  useEffect(() => {
+    handleElements();
+  }, []);
+
+  // Re-measure when the element first becomes visible — covers the tabbed-view case
+  // where the initial measurement happened while the tab was hidden (size 0).
+  useEffect(() => {
+    if (typeof IntersectionObserver === 'undefined' || !rootRef.current) return undefined;
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) updateDimensions();
+      },
+      { threshold: 0 },
+    );
+    io.observe(rootRef.current);
+    return () => io.disconnect();
+  }, []);
+
+  // Render math for the placeholder/preview when dragging over
+  useEffect(() => {
+    if (rootRef.current) {
+      renderMath(rootRef.current);
+    }
+  }, [correct, isOver, dragItem?.choice?.value]);
+
+  useEffect(() => {
+    if (!choice) {
+      setDimensions({ height: 0, width: 0 });
+      return;
+    }
+    handleElements();
+  }, [choice?.value]);
+
+  useEffect(() => {
+    if (!isOver && !isDragging) {
+      frozenRef.current = {
+        width: rootRef.current.offsetWidth,
+        height: rootRef.current.offsetHeight,
+      };
+    }
+  }, [choice, isOver, isDragging]);
+
+  const draggedLabel = dragItem && isOver && dragItem.choice && dragItem.choice.value;
+  const label = choice && choice.value;
+  const style =
+    isOver || isDragging
+      ? {
+          width: frozenRef.current?.width,
+          height: frozenRef.current?.height,
+        }
+      : getRootDimensions();
+
+  return (
+    <StyledChip
+      clickable={false}
+      disabled={disabled}
+      ref={rootRef}
+      component="span"
+      label={
+        <React.Fragment>
+          <StyledChipLabel
+            ref={spanRef}
+            draggable={true}
+            className={classnames({
+              over: isOver,
+              hidden: draggedLabel,
+            })}
+            dangerouslySetInnerHTML={{ __html: label || '' }}
+          />
+          {draggedLabel && (
+            <StyledChipLabel
+              draggable={true}
+              className={classnames({
+                over: isOver,
+                dragged: true,
+              })}
+              dangerouslySetInnerHTML={{ __html: draggedLabel || '' }}
+            />
+          )}
+        </React.Fragment>
+      }
+      className={classnames({
+        over: isOver,
+        parentOver: isOver,
+        correct: correct !== undefined && correct,
+        incorrect: correct !== undefined && !correct,
+      })}
+      variant={disabled ? 'outlined' : undefined}
+      style={style}
+    />
+  );
+}
+
+BlankContent.defaultProps = {
+  emptyResponseAreaWidth: 0,
+  emptyResponseAreaHeight: 0,
+};
+
+BlankContent.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  duplicates: PropTypes.bool,
+  choice: PropTypes.object,
+  isOver: PropTypes.bool,
+  dragItem: PropTypes.object,
+  correct: PropTypes.bool,
+  onChange: PropTypes.func,
+  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  instanceId: PropTypes.string,
+};
+
+// New functional component using @dnd-kit hooks
+function DragDropBlank({
+  id,
+  disabled,
+  duplicates,
+  choice,
+  correct,
+  onChange,
+  emptyResponseAreaWidth,
+  emptyResponseAreaHeight,
+  instanceId,
+}) {
+  // Setup draggable functionality
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef: setDragNodeRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: `mask-blank-drag-${id}`,
+    disabled: disabled || !choice,
+    data: {
+      id: id,
+      choice: choice,
+      instanceId: instanceId,
+      fromChoice: false, // This is from a blank, not from choices
+      type: 'MaskBlank',
+    },
+  });
+
+  // Setup droppable functionality
+  const {
+    setNodeRef: setDropNodeRef,
+    isOver,
+    active: dragItem,
+  } = useDroppable({
+    id: `mask-blank-drop-${id}`,
+    data: {
+      id: id,
+      accepts: ['MaskBlank'],
+      instanceId: instanceId,
+    },
+  });
+
+  // Combine refs for both drag and drop
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
+  };
+
+  const style = {
+    transform: CSS.Translate.toString(transform),
+  };
+
+  return (
+    <StyledContent
+      ref={setNodeRef}
+      style={style}
+      dragged={isDragging}
+      over={isOver}
+      {...dragAttributes}
+      {...dragListeners}
+    >
+      <BlankContent
+        id={id}
+        disabled={disabled}
+        duplicates={duplicates}
+        choice={choice}
+        isOver={isOver}
+        dragItem={dragItem?.data?.current}
+        correct={correct}
+        onChange={onChange}
+        emptyResponseAreaWidth={emptyResponseAreaWidth}
+        emptyResponseAreaHeight={emptyResponseAreaHeight}
+        instanceId={instanceId}
+      />
+    </StyledContent>
+  );
+}
+
+DragDropBlank.defaultProps = {
+  emptyResponseAreaWidth: 0,
+  emptyResponseAreaHeight: 0,
+};
+
+DragDropBlank.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disabled: PropTypes.bool,
+  duplicates: PropTypes.bool,
+  choice: PropTypes.object,
+  correct: PropTypes.bool,
+  onChange: PropTypes.func,
+  emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  instanceId: PropTypes.string,
+};
+
+export default DragDropBlank;