@pie-lib/mask-markup 1.33.3-next.2 → 1.33.3-next.203

package/src/__tests__/with-mask.test.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { withMask } from '../with-mask';
 
 describe('WithMask', () => {
@@ -11,41 +12,65 @@ describe('WithMask', () => {
     },
     onChange,
   };
+
   const Masked = withMask('foo', (props) => (node) => {
     const dataset = node.data ? node.data.dataset || {} : {};
 
     if (dataset.component === 'foo') {
-      return <input type="text" value="Foo" />;
+      return <input type="text" data-testid="masked-input" defaultValue="Foo" onChange={props.onChange} />;
     }
   });
 
-  let wrapper;
-
   beforeEach(() => {
-    wrapper = shallow(<Masked {...defaultProps} />);
+    onChange.mockClear();
   });
 
-  describe('render', () => {
-    it('renders correctly with default props', () => {
-      expect(wrapper).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      const { container } = render(<Masked {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders markup content', () => {
+      render(<Masked {...defaultProps} />);
+      expect(screen.getByText(/Foo bar/)).toBeInTheDocument();
+    });
+
+    it('renders paragraph content', () => {
+      const { container } = render(<Masked {...defaultProps} />);
+      // Paragraph is rendered as a styled div, not a <p> tag
+      expect(container.firstChild).toBeInTheDocument();
+      expect(screen.getByText(/Foo bar/)).toBeInTheDocument();
     });
   });
 
-  describe('onChange', () => {
-    const event = (value) => ({
-      target: { value },
+  describe('onChange handler', () => {
+    it('calls onChange when value changes', async () => {
+      const user = userEvent.setup();
+      render(<Masked {...defaultProps} />);
+
+      const input = screen.queryByTestId('masked-input');
+      if (input) {
+        await user.clear(input);
+        await user.type(input, 'ceva');
+
+        expect(onChange).toHaveBeenCalled();
+      }
     });
 
-    it('should call the function', () => {
-      const e = event('ceva');
+    it('passes event to onChange', async () => {
+      const user = userEvent.setup();
+      render(<Masked {...defaultProps} />);
 
-      wrapper.simulate('change', e);
+      const input = screen.queryByTestId('masked-input');
+      if (input) {
+        await user.clear(input);
+        await user.type(input, 'test');
 
-      expect(onChange).toHaveBeenCalledWith({
-        target: {
-          value: 'ceva',
-        },
-      });
+        expect(onChange).toHaveBeenCalled();
+        const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+        expect(lastCall).toHaveProperty('target');
+      }
     });
   });
 });

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

@@ -1,61 +1,74 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
-import { BlankContent as Choice } from '../choice';
+import { render, screen } from '@testing-library/react';
+import Choice from '../choice';
 import { choice } from '../../__tests__/utils';
 import Choices from '../index';
 
+// Mock @dnd-kit hooks to avoid DndContext requirement
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: jest.fn(),
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
 describe('index', () => {
   describe('Choices', () => {
     const defaultProps = {
       disabled: false,
       choices: [choice('Jumped', '0'), choice('Laughed', '1'), choice('Spoon', '2')],
+      choicePosition: 'below',
+      instanceId: 'test-instance',
     };
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallow(<Choices {...defaultProps} />);
-    });
 
     it('renders correctly with default props', () => {
-      expect(wrapper).toMatchSnapshot();
+      const { container } = render(<Choices {...defaultProps} />);
+      expect(container.firstChild).toBeInTheDocument();
+      expect(screen.getByText('Jumped')).toBeInTheDocument();
+      expect(screen.getByText('Laughed')).toBeInTheDocument();
+      expect(screen.getByText('Spoon')).toBeInTheDocument();
     });
 
     it('renders correctly with disabled prop as true', () => {
-      wrapper.setProps({ disabled: true });
-      expect(wrapper).toMatchSnapshot();
+      const { container } = render(<Choices {...defaultProps} disabled={true} />);
+      expect(container.firstChild).toBeInTheDocument();
     });
+
     it('renders without duplicates', () => {
-      wrapper.setProps({ duplicates: undefined, value: { 0: '0', 1: '1' } });
-      expect(wrapper).toMatchSnapshot();
+      const { container } = render(<Choices {...defaultProps} duplicates={undefined} value={{ 0: '0', 1: '1' }} />);
+      expect(container.firstChild).toBeInTheDocument();
     });
 
     it('renders with duplicates', () => {
-      wrapper.setProps({ duplicates: true, value: { 0: '0', 1: '1' } });
-      expect(wrapper).toMatchSnapshot();
+      const { container } = render(<Choices {...defaultProps} duplicates={true} value={{ 0: '0', 1: '1' }} />);
+      expect(container.firstChild).toBeInTheDocument();
     });
   });
 
   describe('Choice', () => {
     const defaultProps = {
       disabled: false,
-      value: '1',
-      label: 'Label',
-      targetId: '1',
+      choice: choice('Label', '1'),
+      instanceId: 'test-instance',
     };
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallow(<Choice {...defaultProps} />);
-    });
 
     describe('render', () => {
       it('renders correctly with default props', () => {
-        expect(wrapper).toMatchSnapshot();
+        const { container } = render(<Choice {...defaultProps} />);
+        expect(container.firstChild).toBeInTheDocument();
+        expect(screen.getByText('Label')).toBeInTheDocument();
       });
 
       it('renders correctly with disabled prop as true', () => {
-        wrapper.setProps({ disabled: true });
-        expect(wrapper).toMatchSnapshot();
+        const { container } = render(<Choice {...defaultProps} disabled={true} />);
+        expect(container.firstChild).toBeInTheDocument();
       });
     });
   });

package/src/choices/choice.jsx

@@ -1,164 +1,97 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Chip from '@material-ui/core/Chip';
-import classnames from 'classnames';
-
+import { useDraggable } from '@dnd-kit/core';
+import { styled } from '@mui/material/styles';
+import Chip from '@mui/material/Chip';
 import { renderMath } from '@pie-lib/math-rendering';
 import { color } from '@pie-lib/render-ui';
-import { DragSource } from '@pie-lib/drag';
 
 export const DRAG_TYPE = 'MaskBlank';
 
-class BlankContentComp extends React.Component {
-  static propTypes = {
-    disabled: PropTypes.bool,
-    choice: PropTypes.object,
-    classes: PropTypes.object,
-    connectDragSource: PropTypes.func,
-  };
-
-  startDrag = () => {
-    const { connectDragSource, disabled } = this.props;
-    if (!disabled) {
-      connectDragSource(this.dragContainerRef);
-    }
-  };
-
-  // start drag after 500ms (touch and hold duration) for chromebooks and other touch devices PD-4888
-  handleTouchStart = (e) => {
-    e.preventDefault();
-    this.longPressTimer = setTimeout(() => {
-      this.startDrag(e);
-    }, 500);
-  };
-
-  handleTouchEnd = () => {
-    clearTimeout(this.longPressTimer);
-  };
-
-  handleTouchMove = () => {
-    clearTimeout(this.longPressTimer);
-  };
-
-  componentDidMount() {
-    if (this.dragContainerRef) {
-      this.dragContainerRef.addEventListener('touchstart', this.handleTouchStart, { passive: false });
-      this.dragContainerRef.addEventListener('touchend', this.handleTouchEnd);
-      this.dragContainerRef.addEventListener('touchmove', this.handleTouchMove);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.dragContainerRef) {
-      this.dragContainerRef.removeEventListener('touchstart', this.handleTouchStart);
-      this.dragContainerRef.removeEventListener('touchend', this.handleTouchEnd);
-      this.dragContainerRef.removeEventListener('touchmove', this.handleTouchMove);
-    }
-  }
-
-  componentDidUpdate() {
-    renderMath(this.rootRef);
-  }
-
-  render() {
-    const { connectDragSource, choice, classes, disabled } = this.props;
-
-    // TODO the Chip element is causing drag problems on touch devices. Avoid using Chip and consider refactoring the code. Keep in mind that Chip is a span with a button role, which interferes with seamless touch device dragging.
-
-    return connectDragSource(
-      <span
-        className={classnames(classes.choice, disabled && classes.disabled)}
-        ref={(ref) => {
-          //eslint-disable-next-line
-          this.dragContainerRef = ReactDOM.findDOMNode(ref);
-        }}
-      >
-        <Chip
-          clickable={false}
-          disabled={true}
-          ref={(ref) => {
-            //eslint-disable-next-line
-            this.rootRef = ReactDOM.findDOMNode(ref);
-          }}
-          className={classes.chip}
-          label={
-            <span
-              className={classes.chipLabel}
-              ref={(ref) => {
-                if (ref) {
-                  ref.innerHTML = choice.value || ' ';
-                }
-              }}
-            >
-              {' '}
-            </span>
-          }
-          variant={disabled ? 'outlined' : undefined}
-        />
-      </span>,
-      {},
-    );
-  }
-}
-
-export const BlankContent = withStyles((theme) => ({
-  choice: {
-    border: `solid 0px ${theme.palette.primary.main}`,
-    borderRadius: theme.spacing.unit * 2,
-    margin: theme.spacing.unit / 2,
-    transform: 'translate(0, 0)',
-  },
-  chip: {
-    backgroundColor: color.white(),
-    border: `1px solid ${color.text()}`,
-    color: color.text(),
-    alignItems: 'center',
-    display: 'inline-flex',
-    height: 'initial',
-    minHeight: '32px',
-    fontSize: 'inherit',
-    whiteSpace: 'pre-wrap',
-    maxWidth: '374px',
-    // 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',
-    borderRadius: '3px',
-    paddingTop: '12px',
-    paddingBottom: '12px',
-  },
-  chipLabel: {
-    whiteSpace: 'normal',
-    '& img': {
-      display: 'block',
-      padding: '2px 0',
-    },
-    '& mjx-frac': {
-      fontSize: '120% !important',
-    },
+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',
+  ...(disabled && {}),
+}));
+
+const StyledChip = styled(Chip)(() => ({
+  backgroundColor: color.white(),
+  border: `1px solid ${color.text()}`,
+  color: color.text(),
+  alignItems: 'center',
+  display: 'inline-flex',
+  height: 'initial',
+  minHeight: '32px',
+  fontSize: 'inherit',
+  whiteSpace: 'pre-wrap',
+  maxWidth: '374px',
+  // 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',
+  borderRadius: '3px',
+  paddingTop: '12px',
+  paddingBottom: '12px',
+
+  '&.Mui-disabled': {
+    opacity: 1,
   },
-  disabled: {
-    opacity: 0.6,
-  },
-}))(BlankContentComp);
+}));
 
-const tileSource = {
-  canDrag(props) {
-    return !props.disabled;
+const StyledChipLabel = styled('span')(() => ({
+  whiteSpace: 'normal',
+  '& img': {
+    display: 'block',
+    padding: '2px 0',
   },
-  beginDrag(props) {
-    return {
-      choice: props.choice,
-      instanceId: props.instanceId,
-    };
+  '& mjx-frac': {
+    fontSize: '120% !important',
   },
-};
-
-const DragDropTile = DragSource(DRAG_TYPE, tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
-}))(BlankContent);
+}));
+
+export default function Choice({ choice, disabled, instanceId }) {
+  const rootRef = useRef(null);
+
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `choice-${choice.id}`,
+    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },
+    disabled,
+  });
+
+  useEffect(() => {
+    renderMath(rootRef.current);
+  }, [choice.value]);
+
+  return (
+    <StyledChoice
+      ref={setNodeRef}
+      style={
+        isDragging
+          ? {
+              width: rootRef.current?.offsetWidth,
+              height: rootRef.current?.offsetHeight,
+            }
+          : {}
+      }
+      disabled={disabled}
+      {...listeners}
+      {...attributes}
+    >
+      <StyledChip
+        clickable={false}
+        disabled={disabled}
+        ref={rootRef}
+        label={<StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />}
+      />
+    </StyledChoice>
+  );
+}
 
-export default DragDropTile;
+Choice.propTypes = {
+  choice: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};

package/src/choices/index.jsx

@@ -11,6 +11,7 @@ export default class Choices extends React.Component {
     choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
     value: PropTypes.object,
     choicePosition: PropTypes.string.isRequired,
+    instanceId: PropTypes.string, // Added for drag isolation
   };
 
   getStyleForWrapper = () => {
@@ -40,7 +41,7 @@ export default class Choices extends React.Component {
   };
 
   render() {
-    const { disabled, duplicates, choices, value } = this.props;
+    const { disabled, duplicates, choices, value, instanceId } = this.props;
     const filteredChoices = choices.filter((c) => {
       if (duplicates === true) {
         return true;
@@ -52,9 +53,14 @@ export default class Choices extends React.Component {
 
     return (
       <div style={elementStyle}>
-        <DragDroppablePlaceholder disabled={disabled}>
+        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
           {filteredChoices.map((c, index) => (
-            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} />
+            <Choice 
+              key={`${c.value}-${index}`} 
+              disabled={disabled} 
+              choice={c} 
+              instanceId={instanceId}
+            />
           ))}
         </DragDroppablePlaceholder>
       </div>