@pie-lib/mask-markup 3.0.4-next.31 → 3.0.4-next.32

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/components/blank.jsx

@@ -1,386 +0,0 @@
-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',
-  },
-  '&.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 [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) return img;
-    return spanRef.current;
-  };
-
-  const updateDimensions = () => {
-    if (spanRef.current && rootRef.current) {
-      // 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 = rect.width || node.offsetWidth || 0;
-      const height = Math.max(
-        rect.height || 0,
-        node.offsetHeight || 0,
-        node.scrollHeight || 0,
-        spanRef.current.scrollHeight || 0,
-      );
-
-      const widthWithPadding = width + 24; // 12px padding on each side
-      const heightWithPadding = height + 24; // 12px padding on top and bottom
-
-      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,
-      }));
-
-      rootRef.current.style.width = `${adjustedWidth}px`;
-      rootRef.current.style.height = `${adjustedHeight}px`;
-    }
-  };
-
-  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();
-  }, []);
-
-  // 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]);
-
-  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;

package/src/components/correct-input.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import classnames from 'classnames';
-import { styled } from '@mui/material/styles';
-import { color } from '@pie-lib/render-ui';
-
-const StyledOutlinedInput = styled(OutlinedInput)(() => ({
-  padding: '2px',
-  borderRadius: '4px',
-  fontSize: 'inherit',
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  '& fieldset': {
-    border: 0,
-  },
-  '& .MuiOutlinedInput-input': {
-    color: color.text(),
-    backgroundColor: color.background(),
-    borderRadius: '4px !important',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    padding: '10px 20px 10px 10px',
-    '&:disabled': {
-      opacity: 0.8,
-      cursor: 'not-allowed !important',
-    },
-    '&:hover': {
-      borderColor: color.primary(),
-      '&:disabled': {
-        borderColor: 'initial',
-      },
-    },
-    '&.Mui-focused': {
-      borderColor: color.primaryDark(),
-    },
-    '&.crInput': {
-      padding: '8px !important',
-    },
-    '&.correct': {
-      borderColor: `${color.correct()} !important`,
-    },
-    '&.incorrect': {
-      borderColor: `${color.incorrect()} !important`,
-    },
-  },
-}));
-
-const CorrectInput = (props) => {
-  const { correct, charactersLimit, disabled, isBox, isConstructedResponse, width, spellCheck, ...rest } = props;
-
-  const label = typeof correct === 'boolean' ? (correct ? 'correct' : 'incorrect') : undefined;
-  const inputProps = charactersLimit
-    ? { maxLength: charactersLimit, 'aria-label': 'Enter answer' }
-    : { 'aria-label': 'Enter answer' };
-
-  if (width) {
-    inputProps.style = {
-      width: `${width + Math.round(width / 10) + 1}ch`, // added some extra space for capital letters
-    };
-  }
-
-  return (
-    <StyledOutlinedInput
-      className={classnames({
-        disabledInput: disabled,
-        box: isBox,
-      })}
-      classes={{
-        input: classnames({
-          [label]: label,
-          crInput: isConstructedResponse,
-        }),
-      }}
-      inputProps={inputProps}
-      disabled={disabled}
-      spellCheck={spellCheck}
-      {...rest}
-    />
-  );
-};
-
-export default CorrectInput;