@pie-lib/mask-markup 3.1.5 → 3.1.6-beta.10

package/src/choices/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import Choice from '../choice';
 import { choice } from '../../__tests__/utils';
 import Choices from '../index';
@@ -65,48 +65,6 @@ describe('index', () => {
       const { container } = render(<Choices {...defaultProps} duplicates={true} value={{ 0: '0', 1: '1' }} />);
       expect(container.firstChild).toBeInTheDocument();
     });
-
-    describe('click-to-place into the pool', () => {
-      it('places the selection into the pool when clicking the pool background', () => {
-        const onPlacementClick = jest.fn();
-        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
-        const { container } = render(
-          <Choices {...defaultProps} selectedItem={selectedItem} onPlacementClick={onPlacementClick} />,
-        );
-
-        fireEvent.click(container.firstChild);
-
-        expect(onPlacementClick).toHaveBeenCalledWith(undefined);
-      });
-
-      it('does nothing when clicking the pool background with nothing selected', () => {
-        const onPlacementClick = jest.fn();
-        const { container } = render(<Choices {...defaultProps} onPlacementClick={onPlacementClick} />);
-
-        fireEvent.click(container.firstChild);
-
-        expect(onPlacementClick).not.toHaveBeenCalled();
-      });
-
-      it('clicking a specific choice selects it, not the pool background handler', () => {
-        const onPlacementClick = jest.fn();
-        const onSelectClick = jest.fn();
-        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
-        render(
-          <Choices
-            {...defaultProps}
-            selectedItem={selectedItem}
-            onSelectClick={onSelectClick}
-            onPlacementClick={onPlacementClick}
-          />,
-        );
-
-        fireEvent.click(screen.getByText('Jumped'));
-
-        expect(onSelectClick).toHaveBeenCalled();
-        expect(onPlacementClick).not.toHaveBeenCalled();
-      });
-    });
   });
 
   describe('Choice', () => {
@@ -147,66 +105,5 @@ describe('index', () => {
         expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
       });
     });
-
-    describe('click-to-select', () => {
-      it('selects this choice on click when nothing else is selected', () => {
-        const onSelectClick = jest.fn();
-        const { container } = render(<Choice {...defaultProps} selectedItem={null} onSelectClick={onSelectClick} />);
-
-        fireEvent.click(container.firstChild);
-
-        expect(onSelectClick).toHaveBeenCalledWith({
-          choice: defaultProps.choice,
-          instanceId: defaultProps.instanceId,
-          fromChoice: true,
-          type: 'MaskBlank',
-        });
-      });
-
-      it('toggles off (calls onSelectClick again) when clicking the already-selected choice', () => {
-        const onSelectClick = jest.fn();
-        const selectedItem = { choice: defaultProps.choice, instanceId: defaultProps.instanceId, fromChoice: true, type: 'MaskBlank' };
-        const { container } = render(
-          <Choice {...defaultProps} selectedItem={selectedItem} onSelectClick={onSelectClick} />,
-        );
-
-        fireEvent.click(container.firstChild);
-
-        expect(onSelectClick).toHaveBeenCalledWith({
-          choice: defaultProps.choice,
-          instanceId: defaultProps.instanceId,
-          fromChoice: true,
-          type: 'MaskBlank',
-        });
-      });
-
-      it('selects this choice even while a different item is already selected (pool items are never placement targets)', () => {
-        const onSelectClick = jest.fn();
-        const selectedItem = { id: 'some-blank', fromChoice: false, type: 'MaskBlank' };
-        const { container } = render(
-          <Choice {...defaultProps} selectedItem={selectedItem} onSelectClick={onSelectClick} />,
-        );
-
-        fireEvent.click(container.firstChild);
-
-        expect(onSelectClick).toHaveBeenCalledWith({
-          choice: defaultProps.choice,
-          instanceId: defaultProps.instanceId,
-          fromChoice: true,
-          type: 'MaskBlank',
-        });
-      });
-
-      it('does nothing on click when disabled', () => {
-        const onSelectClick = jest.fn();
-        const { container } = render(
-          <Choice {...defaultProps} disabled={true} selectedItem={null} onSelectClick={onSelectClick} />,
-        );
-
-        fireEvent.click(container.firstChild);
-
-        expect(onSelectClick).not.toHaveBeenCalled();
-      });
-    });
   });
 });

package/src/choices/choice.jsx

@@ -8,12 +8,12 @@ import { color } from '@pie-lib/render-ui';
 
 export const DRAG_TYPE = 'MaskBlank';
 
-const StyledChoice = styled('span')(({ theme, disabled, selected }) => ({
+const StyledChoice = styled('span')(({ theme, disabled }) => ({
   border: `solid 0px ${theme.palette.primary.main}`,
+  borderRadius: theme.spacing(2),
   margin: theme.spacing(0.5),
   transform: 'translate(0, 0)',
   display: 'inline-flex',
-  opacity: selected ? 0.7 : 1,
   ...(disabled && {}),
 }));
 
@@ -55,7 +55,7 @@ const StyledChipLabel = styled('span')(() => ({
   },
 }));
 
-export default function Choice({ choice, disabled, instanceId, selectedItem, onSelectClick }) {
+export default function Choice({ choice, disabled, instanceId }) {
   const rootRef = useRef(null);
 
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
@@ -68,15 +68,6 @@ export default function Choice({ choice, disabled, instanceId, selectedItem, onS
     renderMath(rootRef.current);
   }, [choice.value]);
 
-  const isSelected = !!selectedItem && selectedItem.fromChoice === true && selectedItem.choice.id === choice.id;
-
-  const handleClick = (e) => {
-    if (disabled) return;
-
-    e.stopPropagation();
-    onSelectClick?.({ choice, instanceId, fromChoice: true, type: DRAG_TYPE });
-  };
-
   return (
     <StyledChoice
       ref={setNodeRef}
@@ -89,8 +80,6 @@ export default function Choice({ choice, disabled, instanceId, selectedItem, onS
           : {}
       }
       disabled={disabled}
-      selected={isSelected}
-      onClick={handleClick}
       {...listeners}
       {...attributes}
     >
@@ -108,6 +97,4 @@ Choice.propTypes = {
   choice: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
   instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  selectedItem: PropTypes.object,
-  onSelectClick: PropTypes.func,
 };

package/src/choices/index.jsx

@@ -12,9 +12,6 @@ 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 = () => {
@@ -43,22 +40,8 @@ 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, selectedItem, onSelectClick } = this.props;
+    const { disabled, duplicates, choices, value, instanceId } = this.props;
     const filteredChoices = choices.filter((c) => {
       if (duplicates === true) {
         return true;
@@ -69,17 +52,10 @@ export default class Choices extends React.Component {
     const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
 
     return (
-      <div style={elementStyle} onClick={this.handlePoolClick}>
+      <div style={elementStyle}>
         <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
           {filteredChoices.map((c, index) => (
-            <Choice
-              key={`${c.value}-${index}`}
-              disabled={disabled}
-              choice={c}
-              instanceId={instanceId}
-              selectedItem={selectedItem}
-              onSelectClick={onSelectClick}
-            />
+            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} instanceId={instanceId} />
           ))}
         </DragDroppablePlaceholder>
       </div>

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { render, screen, act, fireEvent } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import Blank from '../blank';
 
 // Mock @dnd-kit hooks to avoid DndContext requirement
 jest.mock('@dnd-kit/core', () => ({
-  useDraggable: jest.fn((options) => ({
-    attributes: options?.attributes || {},
+  useDraggable: jest.fn(() => ({
+    attributes: {},
     listeners: {},
     setNodeRef: jest.fn(),
     transform: null,
@@ -163,9 +163,8 @@ describe('Blank', () => {
         jest.runAllTimers();
       });
 
-      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)
+      const wrapper = container.firstChild; // StyledContent
+      const chip = wrapper && wrapper.firstChild; // StyledChip (rootRef)
 
       // Width and height should include padding (24px) around measured content
       expect(chip.style.width).toBe('129px');
@@ -230,184 +229,4 @@ 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,6 +3,7 @@ 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';
@@ -11,32 +12,22 @@ import { grey } from '@mui/material/colors';
 
 const log = debug('pie-lib:mask-markup:blank');
 
-const StyledContent = styled('span')(({ dragged, over, selected, showsPointerCursor }) => ({
+const StyledContent = styled('span')(({ dragged, over }) => ({
   border: `solid 0px ${color.primary()}`,
   minWidth: '200px',
+  touchAction: 'none',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   opacity: 1,
-  cursor: 'default',
   ...(over && {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
   }),
-  ...((dragged || selected) && {
+  ...(dragged && {
     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()}`,
@@ -350,40 +341,23 @@ 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: 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,
+    data: {
+      id: id,
+      choice: choice,
+      instanceId: instanceId,
+      fromChoice: false, // This is from a blank, not from choices
+      type: 'MaskBlank',
     },
   });
 
@@ -401,82 +375,38 @@ function DragDropBlank({
     },
   });
 
-  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.
+  // Combine refs for both drag and drop
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
   };
 
-  // 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 style = {
+    transform: CSS.Translate.toString(transform),
   };
 
-  const hasSelection = !!selectedItem;
-  const showsHoverEffect = isOver || (hasSelection && isHovered && !disabled);
-
   return (
     <StyledContent
-      ref={setDropNodeRef}
-      role={isNativeTabStop ? 'button' : undefined}
-      tabIndex={isNativeTabStop ? 0 : -1}
-      onClick={handleClick}
-      onKeyDown={isNativeTabStop ? handleKeyDown : undefined}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      ref={setNodeRef}
+      style={style}
       dragged={isDragging}
-      over={showsHoverEffect}
-      selected={isSelected}
-      showsPointerCursor={hasSelection && !disabled}
+      over={isOver}
+      {...dragAttributes}
+      {...dragListeners}
     >
-      <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>
+      <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>
   );
 }
@@ -496,9 +426,6 @@ 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

@@ -13,8 +13,6 @@ import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 
-const pieVar = color.v('pie');
-
 const StyledButton = styled(Button)(() => ({
   color: color.text(),
   border: `1px solid ${color.borderGray()}`,
@@ -55,11 +53,15 @@ const StyledButton = styled(Button)(() => ({
 }));
 
 const StyledMenu = styled(Menu)(() => ({
-  '& .MuiPaper-root': {
-    // honour the host's --pie-background, but stay opaque when it is undefined:
-    // color.background() falls back to rgba(255,255,255,0), which makes the open
-    // menu transparent and unreadable over the item content (PIE-1008)
-    backgroundColor: pieVar('background', color.defaults.WHITE),
+  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',
   },
   // remove default padding on the inner list
   '& .MuiList-root': {