@pie-lib/text-select 3.0.3-next.1 → 3.0.3-next.37

package/src/token-select/__tests__/token.test.jsx

@@ -1,236 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Token } from '../token';
-
-describe('token', () => {
-  const defaultProps = {
-    classes: {
-      token: 'token',
-      selectable: 'selectable',
-    },
-    text: 'foo bar',
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('rendering', () => {
-    it('renders with text', () => {
-      const { container } = render(<Token {...defaultProps} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with newlines', () => {
-      const { container } = render(<Token {...defaultProps} text="foo \nbar" />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with multiple newlines', () => {
-      const { container } = render(<Token {...defaultProps} text="line1\nline2\nline3" />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      const { container } = render(<Token {...defaultProps} className="custom-class" />);
-      expect(container.querySelector('.custom-class')).toBeInTheDocument();
-    });
-
-    it('renders with data-indexkey attribute', () => {
-      const { container } = render(<Token {...defaultProps} index={5} />);
-      const token = container.querySelector('[data-indexkey]');
-      expect(token).toHaveAttribute('data-indexkey', '5');
-    });
-
-    it('renders empty text gracefully', () => {
-      const { container } = render(<Token {...defaultProps} text="" />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders null text gracefully', () => {
-      const { container } = render(<Token {...defaultProps} text={null} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('selectable state', () => {
-    it('applies selectable class when selectable is true', () => {
-      const { container } = render(<Token {...defaultProps} selectable={true} />);
-      expect(container.querySelector('.selectable')).toBeInTheDocument();
-    });
-
-    it('does not apply selectable class when selectable is false', () => {
-      const { container } = render(<Token {...defaultProps} selectable={false} />);
-      expect(container.querySelector('.selectable')).not.toBeInTheDocument();
-    });
-
-    it('does not apply selectable class when disabled', () => {
-      const { container } = render(<Token {...defaultProps} selectable={true} disabled={true} />);
-      expect(container.querySelector('.selectable')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('selected state', () => {
-    it('applies selected class when selected is true', () => {
-      const { container } = render(<Token {...defaultProps} selected={true} />);
-      expect(container.querySelector('.selected')).toBeInTheDocument();
-    });
-
-    it('does not apply selected class when selected is false', () => {
-      const { container } = render(<Token {...defaultProps} selected={false} />);
-      expect(container.querySelector('.selected')).not.toBeInTheDocument();
-    });
-
-    it('applies disabledBlack class when selected and disabled without correct prop', () => {
-      const { container } = render(<Token {...defaultProps} selected={true} disabled={true} />);
-      expect(container.querySelector('.disabledBlack')).toBeInTheDocument();
-    });
-  });
-
-  describe('disabled state', () => {
-    it('applies disabled class when disabled is true', () => {
-      const { container } = render(<Token {...defaultProps} disabled={true} />);
-      expect(container.querySelector('.disabled')).toBeInTheDocument();
-    });
-
-    it('does not apply disabled class when disabled is false', () => {
-      const { container } = render(<Token {...defaultProps} disabled={false} />);
-      expect(container.querySelector('.disabled')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('highlight state', () => {
-    it('applies highlight class when highlight is true and selectable', () => {
-      const { container } = render(<Token {...defaultProps} highlight={true} selectable={true} />);
-      expect(container.querySelector('.highlight')).toBeInTheDocument();
-    });
-
-    it('does not apply highlight class when not selectable', () => {
-      const { container } = render(<Token {...defaultProps} highlight={true} selectable={false} />);
-      expect(container.querySelector('.highlight')).not.toBeInTheDocument();
-    });
-
-    it('does not apply highlight class when disabled', () => {
-      const { container } = render(<Token {...defaultProps} highlight={true} selectable={true} disabled={true} />);
-      expect(container.querySelector('.highlight')).not.toBeInTheDocument();
-    });
-
-    it('does not apply highlight class when selected', () => {
-      const { container } = render(<Token {...defaultProps} highlight={true} selectable={true} selected={true} />);
-      expect(container.querySelector('.highlight')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('correct/incorrect state', () => {
-    it('applies custom class when correct is true', () => {
-      const { container } = render(<Token {...defaultProps} correct={true} />);
-      expect(container.querySelector('.custom')).toBeInTheDocument();
-    });
-
-    it('applies custom class when correct is false', () => {
-      const { container } = render(<Token {...defaultProps} correct={false} />);
-      expect(container.querySelector('.custom')).toBeInTheDocument();
-    });
-
-    it('renders check icon when correct is true', () => {
-      const { container } = render(<Token {...defaultProps} correct={true} />);
-      const checkIcon = container.querySelector('svg[data-testid="CheckIcon"]');
-      expect(checkIcon).toBeInTheDocument();
-    });
-
-    it('renders close icon when correct is false', () => {
-      const { container } = render(<Token {...defaultProps} correct={false} />);
-      const closeIcon = container.querySelector('svg[data-testid="CloseIcon"]');
-      expect(closeIcon).toBeInTheDocument();
-    });
-
-    it('wraps token in correct container when correct is true', () => {
-      const { container } = render(<Token {...defaultProps} correct={true} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('wraps token in incorrect container when correct is false', () => {
-      const { container } = render(<Token {...defaultProps} correct={false} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('missing state', () => {
-    it('applies missing class when isMissing is true', () => {
-      const { container } = render(<Token {...defaultProps} isMissing={true} />);
-      expect(container.querySelector('.missing')).toBeInTheDocument();
-    });
-
-    it('renders close icon when isMissing is true', () => {
-      const { container } = render(<Token {...defaultProps} isMissing={true} />);
-      const closeIcon = container.querySelector('svg[data-testid="CloseIcon"]');
-      expect(closeIcon).toBeInTheDocument();
-    });
-
-    it('applies custom class when isMissing is true', () => {
-      const { container } = render(<Token {...defaultProps} isMissing={true} />);
-      expect(container.querySelector('.custom')).toBeInTheDocument();
-    });
-  });
-
-  describe('animations disabled state', () => {
-    it('applies print class when animationsDisabled is true', () => {
-      const { container } = render(<Token {...defaultProps} animationsDisabled={true} />);
-      expect(container.querySelector('.print')).toBeInTheDocument();
-    });
-
-    it('does not apply print class when animationsDisabled is false', () => {
-      const { container } = render(<Token {...defaultProps} animationsDisabled={false} />);
-      expect(container.querySelector('.print')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Wrapper component behavior', () => {
-    it('uses wrapper when correct is defined', () => {
-      const { container } = render(<Token {...defaultProps} correct={true} />);
-      const icon = container.querySelector('svg');
-      expect(icon).toBeInTheDocument();
-    });
-
-    it('uses wrapper when isMissing is true', () => {
-      const { container } = render(<Token {...defaultProps} isMissing={true} />);
-      const icon = container.querySelector('svg');
-      expect(icon).toBeInTheDocument();
-    });
-
-    it('does not use wrapper when correct is undefined and isMissing is false', () => {
-      const { container } = render(<Token {...defaultProps} />);
-      const icon = container.querySelector('svg');
-      expect(icon).not.toBeInTheDocument();
-    });
-  });
-
-  describe('className combinations', () => {
-    it('combines multiple state classes', () => {
-      const { container } = render(<Token {...defaultProps} selectable={true} selected={true} highlight={true} />);
-      expect(container.querySelector('.selected')).toBeInTheDocument();
-    });
-
-    it('applies correct precedence for disabled and selected', () => {
-      const { container } = render(<Token {...defaultProps} selectable={true} selected={true} disabled={true} />);
-      expect(container.querySelector('.disabledBlack')).toBeInTheDocument();
-    });
-
-    it('applies tokenRootClass to all tokens', () => {
-      const { container } = render(<Token {...defaultProps} />);
-      expect(container.querySelector('.tokenRootClass')).toBeInTheDocument();
-    });
-  });
-
-  describe('prop defaults', () => {
-    it('uses default value for selectable', () => {
-      const { container } = render(<Token text="test" />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('uses default value for text', () => {
-      const { container } = render(<Token />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});

package/src/token-select/index.jsx

@@ -1,242 +0,0 @@
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import PropTypes from 'prop-types';
-import Token, { TokenTypes } from './token';
-import { styled } from '@mui/material/styles';
-import { clone, isEqual } from 'lodash-es';
-import debug from 'debug';
-import { noSelect } from '@pie-lib/style-utils';
-
-const log = debug('@pie-lib:text-select:token-select');
-
-const StyledTokenSelect = styled('div')(() => ({
-  backgroundColor: 'none',
-  whiteSpace: 'pre',
-  ...noSelect(),
-  '& p': {
-    whiteSpace: 'break-spaces',
-  },
-}));
-
-// Invisible container whose only job is to make Emotion inject CSS for all Token variants.
-// renderToString produces correct class names but never triggers Emotion's DOM-side injection,
-// so without this the class names exist in the HTML but have no matching CSS rules.
-const HiddenCssPrimer = styled('div')(() => ({
-  display: 'none',
-  position: 'absolute',
-  visibility: 'hidden',
-  pointerEvents: 'none',
-}));
-
-const normalizeCommonEntities = (text = '') => text.replace(/ /gi, '\u00a0');
-
-const normalizeSelectableText = (text = '') =>
-  normalizeCommonEntities(text)
-    .replace(/<\/p>\s*<p[^>]*>/gi, '\n\n')
-    .replace(/<br\s*\/?>/gi, '\n')
-    .replace(/<\/?(table|tbody|tr|td|p)[^>]*>/gi, '');
-
-export class TokenSelect extends React.Component {
-  static propTypes = {
-    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
-    className: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    disabled: PropTypes.bool,
-    highlightChoices: PropTypes.bool,
-    animationsDisabled: PropTypes.bool,
-    maxNoOfSelections: PropTypes.number,
-  };
-
-  static defaultProps = {
-    highlightChoices: false,
-    maxNoOfSelections: 0,
-    tokens: [],
-  };
-
-  selectedCount = () => this.props.tokens.filter((t) => t.selected).length;
-
-  canSelectMore = (selectedCount) => {
-    const { maxNoOfSelections } = this.props;
-
-    if (maxNoOfSelections === 1) return true;
-
-    log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);
-    return maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);
-  };
-
-  toggleToken = (event) => {
-    const { target } = event;
-    const { tokens, animationsDisabled } = this.props;
-    const tokensCloned = clone(tokens);
-
-    const targetSpanWrapper = target.closest?.(`.${Token.rootClassName}`);
-    const targetedTokenIndex = targetSpanWrapper?.dataset?.indexkey;
-    const t = targetedTokenIndex !== undefined ? tokensCloned[targetedTokenIndex] : undefined;
-
-    // don't toggle if in print mode, correctness is defined, or is missing
-    if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
-      const { onChange, maxNoOfSelections } = this.props;
-      const selected = !t.selected;
-
-      if (maxNoOfSelections === 1 && this.selectedCount() === 1) {
-        const selectedToken = (tokens || []).filter((tk) => tk.selected);
-        const updatedTokens = tokensCloned.map((token) => {
-          if (isEqual(token, selectedToken[0])) {
-            return { ...token, selected: false };
-          }
-          return { ...token, selectable: true };
-        });
-
-        const update = { ...t, selected };
-        updatedTokens.splice(targetedTokenIndex, 1, update);
-        onChange(updatedTokens);
-      } else {
-        if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {
-          log('skip toggle max reached');
-          return;
-        }
-        const update = { ...t, selected };
-        tokensCloned.splice(targetedTokenIndex, 1, update);
-        onChange(tokensCloned);
-      }
-    }
-  };
-
-  /**
-   * Build an HTML string so that non-selectable token text (which may contain arbitrary or even
-   * *partial* HTML — e.g. just an opening <table><tbody><tr><td> in one token and the matching
-   * closing tags in another) is preserved exactly as-is.  Selectable Token components are
-   * serialised via renderToString; their Emotion class names are stable hashes so they match the
-   * CSS that the HiddenCssPrimer forces Emotion to inject into the document.
-   */
-  generateTokensInHtml = () => {
-    const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
-    const selectedCount = this.selectedCount();
-
-    const reducer = (accumulator, t, index) => {
-      const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));
-      const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
-
-      if (t.text === '\n\n') return `${accumulator}</p><p>`;
-
-      if (t.text === '\n') return `${accumulator}<br>`;
-
-      if (
-        (selectable && !disabled) ||
-        showCorrectAnswer ||
-        t.selected ||
-        t.isMissing ||
-        (animationsDisabled && t.predefined)
-      ) {
-        return (
-          accumulator +
-          renderToString(
-            <Token
-              key={index}
-              disabled={disabled}
-              index={index}
-              {...t}
-              text={normalizeSelectableText(t.text)}
-              selectable={selectable}
-              highlight={highlightChoices}
-              animationsDisabled={animationsDisabled}
-            />,
-          )
-        );
-      }
-
-      // Non-selectable: emit raw HTML unchanged (may contain partial tags, tables, lists, etc.)
-      return accumulator + normalizeCommonEntities(t.text);
-    };
-
-    return (tokens || []).reduce(reducer, '<p>') + '</p>';
-  };
-
-  render() {
-    const { className: classNameProp } = this.props;
-    const html = this.generateTokensInHtml();
-
-    // Render one invisible Token per visual variant so Emotion injects all CSS rules into the
-    // document before the browser paints the dangerouslySetInnerHTML content.
-    const primerText = ' ';
-    return (
-      <>
-        <HiddenCssPrimer aria-hidden="true">
-          {/* base / selectable */}
-          <Token
-            text={primerText}
-            index={-1}
-            selectable
-            disabled={false}
-            highlight={false}
-            animationsDisabled={false}
-          />
-          {/* highlight */}
-          <Token text={primerText} index={-1} selectable disabled={false} highlight animationsDisabled={false} />
-          {/* selected */}
-          <Token
-            text={primerText}
-            index={-1}
-            selectable
-            selected
-            disabled={false}
-            highlight={false}
-            animationsDisabled={false}
-          />
-          {/* disabled + selected */}
-          <Token
-            text={primerText}
-            index={-1}
-            selectable
-            selected
-            disabled
-            highlight={false}
-            animationsDisabled={false}
-          />
-          {/* print / animationsDisabled */}
-          <Token
-            text={primerText}
-            index={-1}
-            selectable
-            disabled={false}
-            highlight={false}
-            animationsDisabled
-            predefined
-          />
-          {/* correct */}
-          <Token
-            text={primerText}
-            index={-1}
-            selectable
-            selected
-            correct
-            disabled={false}
-            highlight={false}
-            animationsDisabled={false}
-          />
-          {/* incorrect */}
-          <Token
-            text={primerText}
-            index={-1}
-            selectable
-            selected
-            correct={false}
-            disabled={false}
-            highlight={false}
-            animationsDisabled={false}
-          />
-          {/* missing */}
-          <Token text={primerText} index={-1} isMissing disabled={false} highlight={false} animationsDisabled={false} />
-        </HiddenCssPrimer>
-
-        <StyledTokenSelect
-          className={classNameProp}
-          onClick={this.toggleToken}
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
-      </>
-    );
-  }
-}
-
-export default TokenSelect;

package/src/token-select/token.jsx

@@ -1,223 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import classNames from 'classnames';
-import Check from '@mui/icons-material/Check';
-import Close from '@mui/icons-material/Close';
-
-import { color } from '@pie-lib/render-ui';
-
-// we need to use a larger line height for the token to be more readable
-const LINE_HEIGHT_MULTIPLIER = 3.2;
-// we need a bit more space for correctness indicators
-const CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;
-const CORRECTNESS_PADDING = 2;
-
-// Styled components for different token states
-const StyledToken = styled('span')(({ theme }) => ({
-  cursor: 'pointer',
-  textIndent: 0,
-  '&.disabled': {
-    cursor: 'inherit',
-    color: color.disabled(),
-  },
-  '&.disabledBlack': {
-    cursor: 'inherit',
-    pointerEvents: 'none',
-  },
-  '&.disabledAndSelected': {
-    backgroundColor: color.blueGrey100(),
-  },
-  [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {
-    '&.selectable:hover': {
-      backgroundColor: color.blueGrey300(),
-      color: theme.palette.common.black,
-      '& > *': {
-        backgroundColor: color.blueGrey300(),
-      },
-    },
-  },
-  '&.selected': {
-    backgroundColor: color.blueGrey100(),
-    color: theme.palette.common.black,
-    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
-    border: `solid 2px ${color.blueGrey900()}`,
-    borderRadius: '4px',
-    '& > *': {
-      backgroundColor: color.blueGrey100(),
-    },
-  },
-  '&.highlight': {
-    border: `dashed 2px ${color.blueGrey600()}`,
-    borderRadius: '4px',
-    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
-  },
-  '&.print': {
-    border: `dashed 2px ${color.blueGrey600()}`,
-    borderRadius: '4px',
-    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
-    color: color.text(),
-  },
-  '&.custom': {
-    display: 'initial',
-  },
-}));
-
-const StyledCommonTokenStyle = styled('span')(({ theme }) => ({
-  position: 'relative',
-  borderRadius: '4px',
-  color: theme.palette.common.black,
-  lineHeight: `${parseFloat(theme.spacing(1)) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
-  padding: `${CORRECTNESS_PADDING}px`,
-}));
-
-const StyledCorrectContainer = styled(StyledCommonTokenStyle)(() => ({
-  border: `${color.correctTertiary()} solid 2px`,
-}));
-
-const StyledIncorrectContainer = styled(StyledCommonTokenStyle)(() => ({
-  border: `${color.incorrectWithIcon()} solid 2px`,
-}));
-
-const StyledMissingContainer = styled(StyledCommonTokenStyle)(() => ({
-  border: `${color.incorrectWithIcon()} dashed 2px`,
-}));
-
-const baseIconStyles = {
-  color: color.white(),
-  position: 'absolute',
-  top: '-8px',
-  left: '-8px',
-  borderRadius: '50%',
-  fontSize: '12px',
-  padding: '2px',
-  display: 'inline-block',
-};
-
-const StyledCorrectCheckIcon = styled(Check)(() => ({
-  ...baseIconStyles,
-  backgroundColor: color.correctTertiary(),
-}));
-
-const StyledIncorrectCloseIcon = styled(Close)(() => ({
-  ...baseIconStyles,
-  backgroundColor: color.incorrectWithIcon(),
-}));
-
-const Wrapper = ({ useWrapper, children, Container, Icon }) =>
-  useWrapper ? (
-    <Container>
-      {children}
-      {Icon ? <Icon /> : null}
-    </Container>
-  ) : (
-    children
-  );
-
-Wrapper.propTypes = {
-  useWrapper: PropTypes.bool,
-  Container: PropTypes.elementType,
-  Icon: PropTypes.elementType,
-  children: PropTypes.node,
-};
-
-export const TokenTypes = {
-  text: PropTypes.string,
-  selectable: PropTypes.bool,
-};
-
-export class Token extends React.Component {
-  static rootClassName = 'tokenRootClass';
-
-  static propTypes = {
-    ...TokenTypes,
-    text: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    disabled: PropTypes.bool,
-    highlight: PropTypes.bool,
-    correct: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    selectable: false,
-    text: '',
-  };
-
-  getClassAndIconConfig = () => {
-    const {
-      selectable,
-      selected,
-      className: classNameProp,
-      disabled,
-      highlight,
-      correct,
-      animationsDisabled,
-      isMissing,
-    } = this.props;
-    const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-    const baseClassName = Token.rootClassName;
-    let Container;
-    let Icon;
-
-    if (correct === undefined && selected && disabled) {
-      return {
-        className: classNames(baseClassName, 'selected', 'disabledBlack', classNameProp),
-        Component: StyledToken,
-      };
-    }
-
-    if (correct !== undefined) {
-      const isCorrect = correct === true;
-      return {
-        className: classNames(baseClassName, 'custom', classNameProp),
-        Component: StyledToken,
-        Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,
-        Icon: isCorrect ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon,
-      };
-    }
-
-    if (isMissing) {
-      return {
-        className: classNames(baseClassName, 'custom', 'missing', classNameProp),
-        Component: StyledToken,
-        Container: StyledMissingContainer,
-        Icon: StyledIncorrectCloseIcon,
-      };
-    }
-
-    return {
-      className: classNames(
-        baseClassName,
-        disabled && 'disabled',
-        selectable && !disabled && !isTouchEnabled && 'selectable',
-        selected && !disabled && 'selected',
-        selected && disabled && 'disabledAndSelected',
-        highlight && selectable && !disabled && !selected && 'highlight',
-        animationsDisabled && 'print',
-        classNameProp,
-      ),
-      Component: StyledToken,
-      Container,
-      Icon,
-    };
-  };
-
-  render() {
-    const { text, index, correct, isMissing } = this.props;
-    const { className, Component, Container, Icon } = this.getClassAndIconConfig();
-
-    const TokenComponent = Component || StyledToken;
-
-    return (
-      <Wrapper useWrapper={correct !== undefined || isMissing} Container={Container} Icon={Icon}>
-        <TokenComponent
-          className={className}
-          dangerouslySetInnerHTML={{ __html: (text || '').replace(/\n/g, '<br>') }}
-          data-indexkey={index}
-        />
-      </Wrapper>
-    );
-  }
-}
-
-export default Token;