@pie-lib/mask-markup 3.1.0-beta.5 → 3.1.0

package/src/choices/index.jsx

@@ -12,6 +12,9 @@ export default class Choices extends React.Component {
     value: PropTypes.object,
     choicePosition: PropTypes.string.isRequired,
     instanceId: PropTypes.string, // Added for drag isolation
+    selectedItem: PropTypes.object,
+    onSelectClick: PropTypes.func,
+    onPlacementClick: PropTypes.func,
   };
 
   getStyleForWrapper = () => {
@@ -40,8 +43,22 @@ export default class Choices extends React.Component {
     }
   };
 
+  handlePoolClick = () => {
+    const { disabled, selectedItem, onPlacementClick } = this.props;
+
+    if (disabled) return;
+
+    if (selectedItem) {
+      // `undefined` targetId means "the choice board" — drag-in-the-blank.jsx's
+      // commitPlacement routes it to removing the item from wherever it currently is.
+      onPlacementClick?.(undefined);
+    }
+
+    // Pool background clicked with nothing selected: nothing to place.
+  };
+
   render() {
-    const { disabled, duplicates, choices, value, instanceId } = this.props;
+    const { disabled, duplicates, choices, value, instanceId, selectedItem, onSelectClick } = this.props;
     const filteredChoices = choices.filter((c) => {
       if (duplicates === true) {
         return true;
@@ -52,10 +69,17 @@ export default class Choices extends React.Component {
     const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
 
     return (
-      <div style={elementStyle}>
+      <div style={elementStyle} onClick={this.handlePoolClick}>
         <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
           {filteredChoices.map((c, index) => (
-            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} instanceId={instanceId} />
+            <Choice
+              key={`${c.value}-${index}`}
+              disabled={disabled}
+              choice={c}
+              instanceId={instanceId}
+              selectedItem={selectedItem}
+              onSelectClick={onSelectClick}
+            />
           ))}
         </DragDroppablePlaceholder>
       </div>

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, fireEvent } from '@testing-library/react';
 import Blank from '../blank';
 
 // Mock @dnd-kit hooks to avoid DndContext requirement
 jest.mock('@dnd-kit/core', () => ({
-  useDraggable: jest.fn(() => ({
-    attributes: {},
+  useDraggable: jest.fn((options) => ({
+    attributes: options?.attributes || {},
     listeners: {},
     setNodeRef: jest.fn(),
     transform: null,
@@ -163,8 +163,9 @@ describe('Blank', () => {
         jest.runAllTimers();
       });
 
-      const wrapper = container.firstChild; // StyledContent
-      const chip = wrapper && wrapper.firstChild; // StyledChip (rootRef)
+      const wrapper = container.firstChild; // StyledContent (outer droppable/click node)
+      const dragHandle = wrapper && wrapper.firstChild; // StyledDragHandle (inner draggable node)
+      const chip = dragHandle && dragHandle.firstChild; // StyledChip (rootRef)
 
       // Width and height should include padding (24px) around measured content
       expect(chip.style.width).toBe('129px');
@@ -229,4 +230,184 @@ describe('Blank', () => {
       // Should show visual feedback for drag over
     });
   });
+
+  describe('click-to-select and click-to-place', () => {
+    const { useDroppable } = require('@dnd-kit/core');
+
+    afterEach(() => {
+      useDroppable.mockReturnValue({ setNodeRef: jest.fn(), isOver: false, active: null });
+    });
+
+    it('is a native tab stop (role=button, tabIndex=0) when empty and not disabled', () => {
+      const { container } = render(<Blank {...defaultProps} choice={undefined} />);
+      const outer = container.firstChild;
+
+      expect(outer.getAttribute('role')).toBe('button');
+      expect(outer.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('is not a tab stop when it already holds a choice (relies on the inner draggable node)', () => {
+      const { container } = render(<Blank {...defaultProps} />);
+      const outer = container.firstChild;
+
+      expect(outer.getAttribute('role')).toBeNull();
+      expect(outer.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('is not a tab stop when disabled, even if empty', () => {
+      const { container } = render(<Blank {...defaultProps} choice={undefined} disabled={true} />);
+      const outer = container.firstChild;
+
+      expect(outer.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('does not make the inner draggable node a second tab stop when the blank is empty', () => {
+      const { container } = render(<Blank {...defaultProps} choice={undefined} selectedItem={null} />);
+      const outer = container.firstChild;
+      const inner = outer.firstElementChild;
+
+      expect(outer.getAttribute('tabindex')).toBe('0');
+      // dragAttributes (which carries tabIndex) is only spread onto the inner node when
+      // it's the live tab stop (filled and not disabled) — otherwise it's omitted
+      // entirely, so no tabindex attribute is present at all here.
+      expect(inner.getAttribute('tabindex')).toBeNull();
+    });
+
+    it('makes the inner draggable node the tab stop when the blank is filled and not disabled', () => {
+      const { container } = render(<Blank {...defaultProps} selectedItem={null} />);
+      const outer = container.firstChild;
+      const inner = outer.firstElementChild;
+
+      expect(inner.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('selects this blank\'s content on click when nothing else is selected', () => {
+      const onSelectClick = jest.fn();
+      const { container } = render(
+        <Blank {...defaultProps} id="3" selectedItem={null} onSelectClick={onSelectClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectClick).toHaveBeenCalledWith({
+        id: '3',
+        choice: defaultProps.choice,
+        instanceId: undefined,
+        fromChoice: false,
+        type: 'MaskBlank',
+      });
+    });
+
+    it('toggles off when clicking its own already-selected content', () => {
+      const onSelectClick = jest.fn();
+      const selectedItem = { id: '3', choice: defaultProps.choice, instanceId: undefined, fromChoice: false, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} id="3" selectedItem={selectedItem} onSelectClick={onSelectClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectClick).toHaveBeenCalledWith(selectedItem);
+    });
+
+    it('places the current selection here when clicking a different, already-filled blank', () => {
+      const onPlacementClick = jest.fn();
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} id="3" selectedItem={selectedItem} onPlacementClick={onPlacementClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onPlacementClick).toHaveBeenCalledWith('3');
+    });
+
+    it('places the current selection here on Space/Enter when empty', () => {
+      const onPlacementClick = jest.fn();
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} id="3" choice={undefined} selectedItem={selectedItem} onPlacementClick={onPlacementClick} />,
+      );
+
+      fireEvent.keyDown(container.firstChild, { code: 'Space' });
+
+      expect(onPlacementClick).toHaveBeenCalledWith('3');
+    });
+
+    it('does nothing on click when empty and nothing is selected', () => {
+      const onSelectClick = jest.fn();
+      const onPlacementClick = jest.fn();
+      const { container } = render(
+        <Blank {...defaultProps} choice={undefined} selectedItem={null} onSelectClick={onSelectClick} onPlacementClick={onPlacementClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectClick).not.toHaveBeenCalled();
+      expect(onPlacementClick).not.toHaveBeenCalled();
+    });
+
+    it('does nothing on click when disabled', () => {
+      const onSelectClick = jest.fn();
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} disabled={true} selectedItem={selectedItem} onSelectClick={onSelectClick} />,
+      );
+
+      fireEvent.click(container.firstChild);
+
+      expect(onSelectClick).not.toHaveBeenCalled();
+    });
+
+    it('folds click-selection hover into the same highlight a live drag-over shows', () => {
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(<Blank {...defaultProps} id="3" selectedItem={selectedItem} />);
+      const outer = container.firstChild;
+
+      fireEvent.mouseEnter(outer);
+      // The "over" prop drives the same CSS the real isOver-driven highlight uses —
+      // assert via the rendered chip's className, since StyledContent forwards `over`.
+      // Re-render check: BlankContent receives the folded isOver as true while hovered
+      // with a selection active — verified indirectly via the "over" chip class it sets.
+      expect(screen.getByText('Cow').closest('.over')).not.toBeNull();
+
+      fireEvent.mouseLeave(outer);
+      expect(screen.getByText('Cow').closest('.over')).toBeNull();
+    });
+
+    it('shows a pointer cursor on hover when something is selected', () => {
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(<Blank {...defaultProps} id="3" selectedItem={selectedItem} />);
+      const outer = container.firstChild;
+      const className = Array.from(outer.classList).find((c) => c.startsWith('css-'));
+
+      const hoverRule = collectEmotionRules().find((r) => r.includes(`.${className}:hover`));
+
+      expect(hoverRule).toBeDefined();
+      expect(hoverRule).toMatch(/cursor:\s*pointer/);
+    });
+
+    it('keeps the default cursor on hover when nothing is selected', () => {
+      const { container } = render(<Blank {...defaultProps} id="3" selectedItem={null} />);
+      const outer = container.firstChild;
+      const className = Array.from(outer.classList).find((c) => c.startsWith('css-'));
+
+      const hoverRule = collectEmotionRules().find((r) => r.includes(`.${className}:hover`));
+
+      expect(hoverRule).toBeUndefined();
+    });
+
+    it('keeps the default cursor on hover when disabled, even with something selected', () => {
+      const selectedItem = { choice: { value: 'Other' }, instanceId: undefined, fromChoice: true, type: 'MaskBlank' };
+      const { container } = render(
+        <Blank {...defaultProps} id="3" disabled={true} selectedItem={selectedItem} />,
+      );
+      const outer = container.firstChild;
+      const className = Array.from(outer.classList).find((c) => c.startsWith('css-'));
+
+      const hoverRule = collectEmotionRules().find((r) => r.includes(`.${className}:hover`));
+
+      expect(hoverRule).toBeUndefined();
+    });
+  });
 });

package/src/components/blank.jsx

@@ -3,7 +3,6 @@ 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';
@@ -12,22 +11,32 @@ import { grey } from '@mui/material/colors';
 
 const log = debug('pie-lib:mask-markup:blank');
 
-const StyledContent = styled('span')(({ dragged, over }) => ({
+const StyledContent = styled('span')(({ dragged, over, selected, showsPointerCursor }) => ({
   border: `solid 0px ${color.primary()}`,
   minWidth: '200px',
-  touchAction: 'none',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   opacity: 1,
+  cursor: 'default',
   ...(over && {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
   }),
-  ...(dragged && {
+  ...((dragged || selected) && {
     opacity: 0.5,
   }),
+  ...(showsPointerCursor && {
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  }),
 }));
 
+const StyledDragHandle = styled('span')({
+  display: 'inline-flex',
+  touchAction: 'none',
+});
+
 const StyledChip = styled(Chip)(() => ({
   backgroundColor: color.background(),
   border: `2px dashed ${color.text()}`,
@@ -341,23 +350,40 @@ function DragDropBlank({
   emptyResponseAreaWidth,
   emptyResponseAreaHeight,
   instanceId,
+  selectedItem,
+  onSelectClick,
+  onPlacementClick,
 }) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const dragData = {
+    id,
+    choice,
+    instanceId,
+    fromChoice: false, // This is from a blank, not from choices
+    type: 'MaskBlank',
+  };
+
   // 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',
+    data: dragData,
+    // dnd-kit's own `attributes` default tabIndex to 0 unconditionally, even when
+    // `disabled` — so a non-draggable (empty) blank stays a native Tab stop of its own.
+    // For a drop-zone (droppable blank), that duplicates the outer wrapper's own tab stop
+    // (see isNativeTabStop below) at the exact same position, so Tab/Shift+Tab has to
+    // pass through both to move anywhere visibly, making every other press look like a
+    // no-op. Drop it out of the tab order here whenever it isn't independently
+    // reachable/interactive, leaving the outer wrapper (for an empty blank) or
+    // nothing (for a disabled blank) as the sole stop.
+    attributes: {
+      tabIndex: choice && !disabled ? 0 : -1,
     },
   });
 
@@ -375,38 +401,82 @@ function DragDropBlank({
     },
   });
 
-  // Combine refs for both drag and drop
-  const setNodeRef = (node) => {
-    setDragNodeRef(node);
-    setDropNodeRef(node);
+  const isSelected = !!selectedItem && selectedItem.fromChoice === false && selectedItem.id === id;
+
+  const handleClick = () => {
+    if (disabled) return;
+
+    if (isSelected) {
+      // Clicking this blank's already-selected content again deselects it.
+      onSelectClick?.(dragData);
+    } else if (selectedItem) {
+      // Something else is selected — place it here, whether this blank is currently
+      // empty or already filled (the same commitPlacement logic drag-and-drop uses).
+      onPlacementClick?.(id);
+    } else if (choice) {
+      // Nothing selected yet, and this blank holds an answer — select it for moving
+      // elsewhere, the same way Tab+Space/Enter does.
+      onSelectClick?.(dragData);
+    }
+
+    // Empty blank clicked with nothing selected: nothing to place or select.
   };
 
-  const style = {
-    transform: CSS.Translate.toString(transform),
+  // An empty blank isn't draggable, so dnd-kit's own attributes (only applied to the
+  // inner node, and only when draggable) never make it tabbable — this outer wrapper
+  // needs its own focus/activation handling so "select a choice, then Tab to a blank
+  // and press Space/Enter" works even when the blank is empty. This is independent of,
+  // and doesn't change, the existing in-drag Tab-cycling (that's driven by an active
+  // dnd-kit drag, not native focus).
+  //
+  // Only made a native Tab stop when NOT draggable (i.e. empty): when the blank is
+  // filled, the inner node is already independently tabbable via dnd-kit's own
+  // attributes for the existing pick-up-to-move gesture, and adding a second, outer Tab
+  // stop for the same visual chip would add an extra stop to the existing Tab order —
+  // the same double-tab-stop bug already found and fixed once in match-list/image-
+  // cloze-association's equivalent code.
+  const isNativeTabStop = !choice && !disabled;
+  const isInnerDraggable = !!choice && !disabled;
+
+  const handleKeyDown = (e) => {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
   };
 
+  const hasSelection = !!selectedItem;
+  const showsHoverEffect = isOver || (hasSelection && isHovered && !disabled);
+
   return (
     <StyledContent
-      ref={setNodeRef}
-      style={style}
+      ref={setDropNodeRef}
+      role={isNativeTabStop ? 'button' : undefined}
+      tabIndex={isNativeTabStop ? 0 : -1}
+      onClick={handleClick}
+      onKeyDown={isNativeTabStop ? handleKeyDown : undefined}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       dragged={isDragging}
-      over={isOver}
-      {...dragAttributes}
-      {...dragListeners}
+      over={showsHoverEffect}
+      selected={isSelected}
+      showsPointerCursor={hasSelection && !disabled}
     >
-      <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}
-      />
+      <StyledDragHandle ref={setDragNodeRef} {...(isInnerDraggable ? dragAttributes : {})} {...dragListeners}>
+        <BlankContent
+          id={id}
+          disabled={disabled}
+          duplicates={duplicates}
+          choice={choice}
+          isOver={showsHoverEffect}
+          dragItem={dragItem?.data?.current}
+          correct={correct}
+          onChange={onChange}
+          emptyResponseAreaWidth={emptyResponseAreaWidth}
+          emptyResponseAreaHeight={emptyResponseAreaHeight}
+          instanceId={instanceId}
+        />
+      </StyledDragHandle>
     </StyledContent>
   );
 }
@@ -426,6 +496,9 @@ DragDropBlank.propTypes = {
   emptyResponseAreaWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   emptyResponseAreaHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   instanceId: PropTypes.string,
+  selectedItem: PropTypes.object,
+  onSelectClick: PropTypes.func,
+  onPlacementClick: PropTypes.func,
 };
 
 export default DragDropBlank;

package/src/components/dropdown.jsx

@@ -53,15 +53,8 @@ const StyledButton = styled(Button)(() => ({
 }));
 
 const StyledMenu = styled(Menu)(() => ({
-  backgroundColor: color.background(),
-  border: `1px solid ${color.correct()} !important`,
-  '&:hover': {
-    border: `1px solid ${color.text()} `,
-    borderColor: 'initial',
-  },
-  '&:focus': {
-    border: `1px solid ${color.text()}`,
-    borderColor: 'initial',
+  '& .MuiPaper-root': {
+    backgroundColor: color.background(),
   },
   // remove default padding on the inner list
   '& .MuiList-root': {