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

package/src/delivery/choice-input.tsx

@@ -0,0 +1,413 @@
+// @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

@@ -0,0 +1,203 @@
+// @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;