@pie-element/multiple-choice 13.1.1-next.0 → 13.2.0-next.1

package/src/delivery/choice-input.tsx

@@ -1,413 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/src/choice-input.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import FormControlLabel from '@mui/material/FormControlLabel';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-import Checkbox from '@mui/material/Checkbox';
-import { Feedback as FeedbackImport, color, PreviewPrompt as PreviewPromptImport } from '@pie-lib/render-ui';
-
-function isRenderableReactInteropType(value: any) {
-  return (
-    typeof value === 'function' ||
-    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
-  );
-}
-
-function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
-  if (!maybeSymbol) return maybeSymbol;
-  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
-  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
-  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
-    return maybeSymbol[namedExport];
-  }
-  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
-    return maybeSymbol[namedExport].default;
-  }
-  return maybeSymbol;
-}
-const PreviewPrompt = unwrapReactInteropSymbol(PreviewPromptImport, 'PreviewPrompt') || unwrapReactInteropSymbol(renderUi.PreviewPrompt, 'PreviewPrompt');
-const Feedback = unwrapReactInteropSymbol(FeedbackImport, 'Feedback') || unwrapReactInteropSymbol(renderUi.Feedback, 'Feedback');
-import * as RenderUiNamespace from '@pie-lib/render-ui';
-const renderUiNamespaceAny = RenderUiNamespace as any;
-const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
-const renderUi =
-  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
-    ? renderUiDefaultMaybe
-    : renderUiNamespaceAny;
-import Radio from '@mui/material/Radio';
-import classNames from 'classnames';
-
-import FeedbackTick from './feedback-tick.js';
-
-const CLASS_NAME = 'multiple-choice-component';
-
-const Row: any = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  backgroundColor: color.background(),
-});
-
-const CheckboxHolder: any = styled(Box)({
-  display: 'flex',
-  alignItems: 'center',
-  backgroundColor: color.background(),
-  flex: 1,
-  '& .MuiFormControlLabel-root': {
-    marginLeft: '-14px', // to be consistent to previous versions before MUI v5 upgrade
-  },
-  '& label': {
-    color: color.text(),
-    '& > span': {
-      fontSize: 'inherit',
-    },
-    '& > .MuiButtonBase-root': {
-      padding: '12px', // to be consistent to previous versions before MUI v5 upgrade
-    },
-  },
-});
-
-const BelowSelectionComponent: any = styled('span')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  '& > span': {
-    // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles
-    marginLeft: `-${theme.spacing(1)}`,
-  },
-}));
-
-const SrOnly: any = styled('span')({
-  position: 'absolute',
-  left: '-10000px',
-  top: 'auto',
-  width: '1px',
-  height: '1px',
-  overflow: 'hidden',
-});
-
-export const StyledFormControlLabel: any = styled(FormControlLabel)({
-  '& .MuiFormControlLabel-label': {
-    color: `${color.text()} !important`,
-    backgroundColor: color.background(),
-    letterSpacing: 'normal',
-  },
-  '&.Mui-disabled *': {
-    cursor: 'not-allowed !important',
-  },
-});
-
-const colorStyle = (varName, fallback) => ({
-  [`&.${CLASS_NAME}`]: {
-    color: `var(--choice-input-${varName}, ${fallback}) !important`,
-  },
-});
-
-const getInputStyles = (correctness) => {
-  const key = (k) => (correctness ? `${correctness}-${k}` : k);
-
-  return {
-    [key('root')]: {
-      ...colorStyle('color', color.text()),
-      ...(correctness ? {} : {
-        '&:hover': { color: `${color.primaryLight()} !important` },
-      }),
-      ...(correctness === 'correct' ? colorStyle('correct-color', color.text()) : {}),
-      ...(correctness === 'incorrect' ? colorStyle('incorrect-color', color.incorrect()) : {}),
-    },
-    [key('checked')]: {
-      ...(correctness === 'correct' ? colorStyle('correct-selected-color', color.correct()) : {}),
-      ...(correctness === 'incorrect' ? colorStyle('incorrect-checked', color.incorrect()) : {}),
-      ...(!correctness ? colorStyle('selected-color', color.primary()) : {}),
-    },
-    [key('disabled')]: {
-      ...colorStyle('disabled-color', color.text()),
-      ...(correctness === 'correct' ? colorStyle('correct-disabled-color', color.disabled()) : {}),
-      ...(correctness === 'incorrect' ? colorStyle('incorrect-disabled-color', color.disabled()) : {}),
-      opacity: 0.6,
-      cursor: 'not-allowed !important',
-      pointerEvents: 'initial !important',
-    },
-    focusVisibleUnchecked: {
-      outline: `2px solid ${color.focusUncheckedBorder()}`,
-      backgroundColor: color.focusUnchecked(),
-    },
-    focusVisibleChecked: {
-      outline: `2px solid ${color.focusCheckedBorder()}`,
-      backgroundColor: color.focusChecked(),
-    },
-  };
-};
-
-const StyledCheckboxBase: any = styled(Checkbox, {
-  shouldForwardProp: (prop) => prop !== 'correctness',
-})(({ correctness }) => {
-  const styles = getInputStyles(correctness);
-  const key = (k) => (correctness ? `${correctness}-${k}` : k);
-
-  return {
-    [`&.${CLASS_NAME}`]: {
-      ...styles[key('root')],
-      '&.Mui-checked': styles[key('checked')],
-      '&.Mui-disabled': correctness ? {} : styles[key('disabled')],
-    },
-    '&.Mui-focusVisible': {
-      '&:not(.Mui-checked)': styles.focusVisibleUnchecked,
-      '&.Mui-checked': styles.focusVisibleChecked,
-    },
-  };
-});
-
-export const StyledCheckbox = (props) => {
-  const { correctness, checked, onChange, disabled, value, id, onKeyDown, inputRef } = props;
-
-  const miniProps = { checked, onChange, disabled, value };
-
-  return (
-    <StyledCheckboxBase
-      id={id}
-      slotProps={{ input: { ref: inputRef } }}
-      onKeyDown={onKeyDown}
-      disableRipple
-      {...miniProps}
-      correctness={correctness}
-      className={CLASS_NAME}
-    />
-  );
-};
-
-const StyledRadioBase: any = styled(Radio, {
-  shouldForwardProp: (prop) => prop !== 'correctness',
-})(({ correctness }) => {
-  const styles = getInputStyles(correctness);
-  const key = (k) => (correctness ? `${correctness}-${k}` : k);
-
-  return {
-    [`&.${CLASS_NAME}`]: {
-      ...styles[key('root')],
-      '&.Mui-checked': styles[key('checked')],
-      '&.Mui-disabled': correctness ? {} : styles[key('disabled')],
-    },
-    '&.Mui-focusVisible': {
-      '&:not(.Mui-checked)': styles.focusVisibleUnchecked,
-      '&.Mui-checked': styles.focusVisibleChecked,
-    },
-  };
-});
-
-export const StyledRadio = (props) => {
-  const { correctness, checked, onChange, disabled, value, id, tagName, inputRef } = props;
-
-  const miniProps = { checked, onChange, disabled, value };
-
-  return (
-    <StyledRadioBase
-      id={id}
-      slotProps={{ input: { ref: inputRef } }}
-      disableRipple
-      {...miniProps}
-      correctness={correctness}
-      className={CLASS_NAME}
-      name={tagName}
-    />
-  );
-};
-
-export class ChoiceInput extends React.Component {
-  static propTypes = {
-    choiceMode: PropTypes.oneOf(['radio', 'checkbox']),
-    displayKey: PropTypes.string,
-    checked: PropTypes.bool.isRequired,
-    correctness: PropTypes.string,
-    disabled: PropTypes.bool.isRequired,
-    feedback: PropTypes.string,
-    label: PropTypes.string.isRequired,
-    rationale: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    tagName: PropTypes.string,
-    hideTick: PropTypes.bool,
-    isEvaluateMode: PropTypes.bool,
-    choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),
-    isSelectionButtonBelow: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    rationale: null,
-    checked: false,
-    isEvaluateMode: false,
-  };
-
-  constructor(props) {
-    super(props);
-    this.onToggleChoice = this.onToggleChoice.bind(this);
-    this.choiceId = this.generateChoiceId();
-    this.descId = `${this.choiceId}-desc`;
-  }
-
-  onToggleChoice(event) {
-    this.props.onChange(event);
-  }
-
-  generateChoiceId() {
-    return 'choice-' + (Math.random() * 10000).toFixed();
-  }
-
-  handleKeyDown: any = (event) => {
-    const { choiceMode } = this.props;
-
-    if (choiceMode !== 'checkbox') return;
-
-    const isArrowDown = event.key === 'ArrowDown';
-    const isArrowUp = event.key === 'ArrowUp';
-
-    if (!isArrowDown && !isArrowUp) return;
-
-    event.preventDefault();
-
-    const currentEl = document.getElementById(this.choiceId);
-    if (!currentEl) return;
-
-    const fieldset = currentEl.closest('fieldset');
-    if (!fieldset) return;
-
-    const groupCheckboxes = Array.from(fieldset.querySelectorAll('input[type="checkbox"]'));
-
-    const currentIndex = groupCheckboxes.findIndex((el) => el === currentEl);
-    if (currentIndex === -1) return;
-
-    const nextIndex = isArrowDown ? currentIndex + 1 : currentIndex - 1;
-    const nextEl = groupCheckboxes[nextIndex];
-
-    if (nextEl) {
-      nextEl.focus();
-    }
-  };
-
-  render() {
-    const {
-      choiceMode,
-      disabled,
-      displayKey,
-      feedback,
-      label,
-      correctness,
-      className,
-      rationale,
-      hideTick,
-      isEvaluateMode,
-      choicesLayout,
-      value,
-      checked,
-      tagName,
-      isSelectionButtonBelow,
-    } = this.props;
-
-    const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
-    const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
-
-    const holderSx = {
-      ...(choicesLayout === 'horizontal' && {
-        [`& .${CLASS_NAME}`]: {
-          padding: '8px',
-          margin: '4px 0 4px 4px',
-        },
-      }),
-      ...(isSelectionButtonBelow && choicesLayout !== 'grid' && {
-        '& > label': {
-          alignItems: 'flex-start',
-        },
-      }),
-      ...(isSelectionButtonBelow && choicesLayout === 'grid' && {
-        justifyContent: 'center',
-        '& > label': {
-          alignItems: 'center',
-        },
-      }),
-    };
-
-    const hasMathOrImage =
-      typeof label === 'string' &&
-      (label.includes('<math') ||
-        label.includes('\\(') ||
-        label.includes('\\[') ||
-        label.includes('<img') ||
-        label.includes('data-latex') ||
-        label.includes('data-raw') ||
-        label.includes('<mjx-container'));
-
-    const screenReaderLabel = displayKey ? (
-      <SrOnly id={this.descId}>
-        {hasMathOrImage ? `Pick the answer below, ${displayKey}` : displayKey}
-      </SrOnly>
-    ) : null;
-
-    const choicelabel = (
-      <>
-        {displayKey && !isSelectionButtonBelow ? (
-          <Row component="span">
-            <span aria-hidden="true">{displayKey}.{'\u00A0'}</span>
-            <PreviewPrompt className="prompt-label" prompt={label} tagName="span" />
-          </Row>
-        ) : (
-          <PreviewPrompt className="prompt-label" prompt={label} tagName="span" />
-        )}
-      </>
-    );
-
-    const tagProps = {
-      disabled,
-      checked,
-      correctness,
-      tagName,
-      value,
-      id: this.choiceId,
-      onChange: this.onToggleChoice,
-      onKeyDown: this.handleKeyDown,
-      ...(screenReaderLabel ? { 'aria-describedby': this.descId } : {}),
-    };
-
-    const control = isSelectionButtonBelow ? (
-      <BelowSelectionComponent>
-        {screenReaderLabel}
-        <Tag {...tagProps} style={{ padding: 0 }} />
-        <span aria-hidden="true">{displayKey ? `${displayKey}.` : ''}</span>
-      </BelowSelectionComponent>
-    ) : (
-      <>
-        {screenReaderLabel}
-        <Tag {...tagProps} slotProps={{ input: { ref: this.props.autoFocusRef } }} />
-      </>
-    );
-
-    return (
-      <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>
-        <Row>
-          {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}
-          <CheckboxHolder className="checkbox-holder" sx={holderSx}>
-            <StyledFormControlLabel
-              label={choicelabel}
-              value={value}
-              htmlFor={this.choiceId}
-              labelPlacement={isSelectionButtonBelow ? 'top' : undefined}
-              control={control}
-            />
-          </CheckboxHolder>
-        </Row>
-        {rationale && <PreviewPrompt className="rationale" defaultClassName="rationale" prompt={rationale} />}
-        <Feedback feedback={feedback} correctness={correctness} />
-      </div>
-    );
-  }
-}
-
-export default ChoiceInput;

package/src/delivery/choice.tsx

@@ -1,203 +0,0 @@
-// @ts-nocheck
-/**
- * @synced-from pie-elements/packages/multiple-choice/src/choice.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
-
-import ChoiceInput from './choice-input.js';
-
-const ChoiceContainer: any = styled(Box, {
-  shouldForwardProp: (prop) => prop !== 'noBorder' && prop !== 'horizontalLayout',
-})(({ theme, noBorder, horizontalLayout }) => ({
-  paddingTop: theme.spacing(2.5),
-  paddingBottom: `calc(${theme.spacing(1)} + 2px)`,
-  paddingLeft: `calc(${theme.spacing(1)} + 2px)`,
-  paddingRight: `calc(${theme.spacing(1)} + 2px)`,
-  borderBottom: noBorder ? 'none' : `1px solid ${theme.palette.grey[300]}`,
-  ...(horizontalLayout && {
-    paddingRight: theme.spacing(2.5),
-    '& label': {
-      marginRight: theme.spacing(1),
-    },
-  }),
-}));
-
-export class Choice extends React.Component {
-  static propTypes = {};
-
-  state = {
-    isHovered: false,
-  };
-
-  handleMouseEnter: any = () => {
-    const { disabled, checked } = this.props;
-
-    if (!disabled && !checked) {
-      this.setState({ isHovered: true });
-    }
-  };
-
-  handleMouseLeave: any = () => {
-    this.setState({ isHovered: false });
-  };
-
-  onChange: any = (choice) => {
-    const { disabled, onChoiceChanged } = this.props;
-
-    if (!disabled) {
-      onChoiceChanged(choice);
-    }
-  };
-
-  render() {
-    const {
-      choice,
-      index,
-      choicesLength,
-      showCorrect,
-      isEvaluateMode,
-      choiceMode,
-      disabled,
-      checked,
-      correctness,
-      displayKey,
-      choicesLayout,
-      gridColumns,
-      isSelectionButtonBelow,
-      selectedAnswerBackgroundColor,
-      selectedAnswerStrokeColor,
-      selectedAnswerStrokeWidth,
-      hoverAnswerBackgroundColor,
-      hoverAnswerStrokeColor,
-      hoverAnswerStrokeWidth,
-      autoFocusRef,
-      tagName
-    } = this.props;
-    
-    const { isHovered } = this.state;
-    const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
-
-    const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
-
-    const choiceProps = {
-      ...choice,
-      checked,
-      choiceMode,
-      disabled,
-      feedback,
-      correctness,
-      displayKey,
-      index,
-      choicesLayout,
-      gridColumns,
-      onChange: this.onChange,
-      isEvaluateMode,
-      isSelectionButtonBelow,
-      selectedAnswerStrokeColor,
-      selectedAnswerStrokeWidth,
-      tagName,
-    };
-
-    const normalizeStrokeWidth = (width) => {
-      if (!width) return '2px'; // default
-      const trimmed = String(width).trim();
-    
-      // add 'px' if the value is a number
-      if (/^\d+(\.\d+)?$/.test(trimmed)) {
-        return `${trimmed}px`;
-      }
-
-      return trimmed;
-    };
-
-    const hasSelectedStroke = selectedAnswerStrokeColor && selectedAnswerStrokeColor !== 'initial';
-    const hasHoverStroke = hoverAnswerStrokeColor && hoverAnswerStrokeColor !== 'initial';
-    
-    let currentStrokeColor = 'transparent';
-    let currentStrokeWidth = '2px';
-    let currentBackgroundColor = 'initial';
-    
-    if ((hasSelectedStroke || hasHoverStroke)) {
-      if (checked && hasSelectedStroke) {
-        // selected state takes priority when selected stroke is configured
-        currentStrokeColor = selectedAnswerStrokeColor;
-        currentStrokeWidth = selectedAnswerStrokeWidth;
-      } else if (isHovered && !disabled && hasHoverStroke) {
-        // hover state when not selected and not disabled, and hover stroke is configured
-        currentStrokeColor = hoverAnswerStrokeColor;
-        currentStrokeWidth = hoverAnswerStrokeWidth;
-      }
-    }
-    
-    if (checked && selectedAnswerBackgroundColor && selectedAnswerBackgroundColor !== 'initial') {
-      currentBackgroundColor = selectedAnswerBackgroundColor;
-    } else if (isHovered && !disabled && hoverAnswerBackgroundColor && hoverAnswerBackgroundColor !== 'initial') {
-      currentBackgroundColor = hoverAnswerBackgroundColor;
-    }
-
-    const hasStroke = hasSelectedStroke || hasHoverStroke;
-    const strokeStyle = hasStroke ? {
-      border: `${normalizeStrokeWidth(currentStrokeWidth)} solid ${currentStrokeColor}`,
-      borderRadius: '8px',
-    } : {};
-
-    const noBorder = index === choicesLength - 1 || choicesLayout !== 'vertical' || hasStroke;
-    const horizontalLayout = choicesLayout === 'horizontal';
-
-    const choiceBackground = currentBackgroundColor !== 'initial' ? currentBackgroundColor : 'initial';
-
-    return (
-      <div 
-        className={choiceClass} 
-        key={index} 
-        style={{ backgroundColor: choiceBackground, ...strokeStyle }}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-      >
-        <ChoiceContainer 
-          component="div"
-          noBorder={noBorder}
-          horizontalLayout={horizontalLayout}
-        >
-          <ChoiceInput {...choiceProps} autoFocusRef={autoFocusRef} />
-        </ChoiceContainer>
-      </div>
-    );
-  }
-}
-
-Choice.propTypes = {
-  choiceMode: PropTypes.oneOf(['radio', 'checkbox']),
-  choice: PropTypes.object,
-  disabled: PropTypes.bool.isRequired,
-  onChoiceChanged: PropTypes.func,
-  index: PropTypes.number,
-  choicesLength: PropTypes.number,
-  showCorrect: PropTypes.bool,
-  isEvaluateMode: PropTypes.bool,
-  checked: PropTypes.bool,
-  correctness: PropTypes.string,
-  displayKey: PropTypes.string,
-  choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),
-  gridColumns: PropTypes.string,
-  selectedAnswerBackgroundColor: PropTypes.string,
-  selectedAnswerStrokeColor: PropTypes.string,
-  selectedAnswerStrokeWidth: PropTypes.string,
-  hoverAnswerBackgroundColor: PropTypes.string,
-  hoverAnswerStrokeColor: PropTypes.string,
-  hoverAnswerStrokeWidth: PropTypes.string,
-  tagName: PropTypes.string,
-  isSelectionButtonBelow: PropTypes.bool,
-  autoFocusRef: PropTypes.object,
-};
-
-export default Choice;