@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

package/configure/node_modules/@pie-lib/drag/src/droppable-placeholder.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import PlaceHolder from './placeholder';
-import PropTypes from 'prop-types';
-
-const preventInteractionStyle = {
-  flex: 1,
-};
-
-export class DroppablePlaceholder extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    connectDropTarget: PropTypes.func.isRequired,
-    isOver: PropTypes.bool,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    disabled: PropTypes.bool,
-    isVerticalPool: PropTypes.bool,
-    minHeight: PropTypes.number,
-  };
-
-  render() {
-    const { children, connectDropTarget, isOver, disabled, classes, isVerticalPool, minHeight } = this.props;
-
-    return connectDropTarget(
-      <div style={preventInteractionStyle}>
-        <PlaceHolder
-          disabled={disabled}
-          isOver={isOver}
-          choiceBoard={true}
-          className={classes}
-          isVerticalPool={isVerticalPool}
-          minHeight={minHeight}
-        >
-          {children}
-        </PlaceHolder>
-      </div>,
-    );
-  }
-}

package/configure/node_modules/@pie-lib/drag/src/ica-dp.jsx

@@ -1,23 +0,0 @@
-import { DropTarget } from 'react-dnd';
-import { DroppablePlaceholder } from './droppable-placeholder';
-import dragType from './drag-type';
-
-export const spec = {
-  canDrop: (props) => {
-    return !props.disabled;
-  },
-  drop: (props, monitor) => {
-    const item = monitor.getItem();
-
-    if (props.onRemoveAnswer) {
-      props.onRemoveAnswer(item);
-    }
-  },
-};
-
-const WithTarget = DropTarget(dragType.types.ica, spec, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(DroppablePlaceholder);
-
-export default WithTarget;

package/configure/node_modules/@pie-lib/drag/src/index.js

@@ -1,23 +0,0 @@
-import { DragSource, DropTarget } from 'react-dnd';
-
-import PlaceHolder from './placeholder';
-import Choice from './choice';
-import withDragContext from './with-drag-context';
-import swap from './swap';
-import * as uid from './uid-context';
-import MatchDroppablePlaceholder from './match-list-dp';
-import DragDroppablePlaceholder from './drag-in-the-blank-dp';
-import ICADroppablePlaceholder from './ica-dp';
-
-export {
-  PlaceHolder,
-  MatchDroppablePlaceholder,
-  DragDroppablePlaceholder,
-  ICADroppablePlaceholder,
-  withDragContext,
-  Choice,
-  swap,
-  uid,
-  DragSource,
-  DropTarget,
-};

package/configure/node_modules/@pie-lib/drag/src/match-list-dp.jsx

@@ -1,23 +0,0 @@
-import { DropTarget } from 'react-dnd';
-import { DroppablePlaceholder } from './droppable-placeholder';
-import dragType from './drag-type';
-
-export const spec = {
-  canDrop: (props) => {
-    return !props.disabled;
-  },
-  drop: (props, monitor) => {
-    const item = monitor.getItem();
-
-    if (props.onRemoveAnswer) {
-      props.onRemoveAnswer(item.promptId);
-    }
-  },
-};
-
-const WithTarget = DropTarget(dragType.types.ml, spec, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-}))(DroppablePlaceholder);
-
-export default WithTarget;

package/configure/node_modules/@pie-lib/drag/src/placeholder.jsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import grey from '@material-ui/core/colors/grey';
-import { color } from '@pie-lib/render-ui';
-
-export const PlaceHolder = (props) => {
-  const {
-    children,
-    classes,
-    className,
-    isOver,
-    type,
-    grid,
-    disabled,
-    choiceBoard,
-    isCategorize,
-    isVerticalPool,
-    minHeight,
-  } = props;
-
-  const names = classNames(
-    classes.placeholder,
-    disabled && classes.disabled,
-    isOver && classes.over,
-    classes[type],
-    className,
-  );
-
-  const style = {};
-
-  if (grid && grid.columns) {
-    style.gridTemplateColumns = `repeat(${grid.columns}, 1fr)`;
-  }
-
-  if (grid && grid.rows) {
-    const repeatValue = grid.rowsRepeatValue || '1fr';
-
-    style.gridTemplateRows = `repeat(${grid.rows}, ${repeatValue})`;
-  }
-
-  // The "type" is only sent through placement-ordering / placeholder
-  // It can be "choice" or "target"
-  // We apply a different style for the "choice" type
-  // For any other type, use a dashed black border and a white fill
-  if (type === 'choice') {
-    style.border = `1px solid ${color.borderLight()}`;
-    style.background = color.backgroundDark();
-  }
-
-  const boardStyle = isCategorize ? classes.categorizeBoard : classes.board;
-
-  return (
-    <div
-      style={{ ...style, minHeight: minHeight }}
-      className={classNames(
-        classes.noSelectStyles,
-        choiceBoard ? boardStyle : names,
-        isVerticalPool && classes.verticalPool,
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-PlaceHolder.propTypes = {
-  classes: PropTypes.object.isRequired,
-  choiceBoard: PropTypes.bool,
-  grid: PropTypes.shape({
-    columns: PropTypes.number,
-    rows: PropTypes.number,
-    // if a different value then 1fr is wanted
-    rowsRepeatValue: PropTypes.string,
-  }),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  className: PropTypes.string,
-  isOver: PropTypes.bool,
-  index: PropTypes.number,
-  type: PropTypes.string,
-  disabled: PropTypes.bool,
-  isCategorize: PropTypes.bool,
-  isVerticalPool: PropTypes.bool,
-  minHeight: PropTypes.number,
-};
-
-const styles = (theme) => ({
-  noSelectStyles: {
-    WebkitTouchCallout: 'none',
-    WebkitUserSelect: 'none',
-    KhtmlUserSelect: 'none',
-    MozUserSelect: 'none',
-    MsUserSelect: 'none',
-    userSelect: 'none',
-  },
-  placeholder: {
-    width: '100%',
-    height: '100%',
-    background: color.white(),
-    transition: 'background-color 200ms linear, border-color 200ms linear',
-    boxSizing: 'border-box',
-    display: 'grid',
-    gridRowGap: `${theme.spacing.unit}px`,
-    gridColumnGap: `${theme.spacing.unit}px`,
-    padding: theme.spacing.unit * 1,
-    border: `2px dashed ${color.black()}`,
-  },
-  disabled: {
-    boxShadow: 'none',
-    background: theme.palette.background.paper,
-  },
-  over: {
-    border: `1px solid ${grey[500]}`,
-    backgroundColor: `${grey[300]}`,
-  },
-  board: {
-    padding: theme.spacing.unit,
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    minHeight: '100px',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    touchAction: 'none',
-    backgroundColor: color.backgroundDark(),
-  },
-  categorizeBoard: {
-    padding: theme.spacing.unit / 2,
-    display: 'flex',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    minHeight: '100px',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    touchAction: 'none',
-    backgroundColor: color.backgroundDark(),
-  },
-  verticalPool: {
-    display: 'flex',
-    flexFlow: 'column wrap',
-  },
-});
-
-export default withStyles(styles)(PlaceHolder);

package/configure/node_modules/@pie-lib/drag/src/preview-component.jsx

@@ -1,153 +0,0 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { usePreview } from 'react-dnd-multi-backend';
-import { PreviewPrompt, color } from '@pie-lib/render-ui';
-import { renderMath } from '@pie-lib/math-rendering';
-
-const styles = {
-  maskBlank: {
-    // this style is applied only on small screens and for touch devices when dragging, for drag-in-the-blank.
-    // It is styled to be identical to the drag-in-the-blank 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',
-    borderRadius: '3px',
-    padding: '12px',
-  },
-  ica: {
-    backgroundColor: color.background(),
-    border: `1px solid ${color.borderDark()}`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: '28px',
-    padding: '0 3px',
-    marginLeft: 2,
-    marginTop: 2,
-    width: 'fit-content',
-  },
-  categorize: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    padding: '16px',
-    borderRadius: '4px',
-    border: '1px solid',
-  },
-  matchList: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    padding: '10px',
-    boxSizing: 'border-box',
-    border: '1px solid #D1D1D1',
-  },
-  placementOrdering: {
-    padding: '10px',
-    boxSizing: 'border-box',
-    border: '1px solid #D1D1D1',
-    backgroundColor: color.background(),
-  },
-};
-
-const getPrompt = (itemType, item) => {
-  switch (itemType) {
-    // DRAG-IN-THE-BLANK
-    case 'MaskBlank':
-      return item?.choice?.value;
-    // IMAGE-CLOZE-ASSOCIATION
-    case 'react-dnd-response':
-      return item?.value;
-    // MATCH-LIST
-    case 'Answer':
-      return item?.value;
-    // PLACEMENT-ORDERING
-    case 'Tile':
-      return item?.value;
-    default:
-      return item?.itemType === 'categorize' ? item?.value : undefined;
-  }
-};
-
-const getCustomStyle = (itemType, item, touchPosition, style) => {
-  const transform = `translate(${touchPosition.x}px, ${touchPosition.y}px)`;
-  const top = style?.top || 0;
-  const left = style?.left || 0;
-  const position = style?.position || 'fixed';
-
-  return {
-    position,
-    top,
-    left,
-    transform,
-    ...(itemType === 'MaskBlank' ? styles.maskBlank : {}),
-    ...(item?.itemType === 'categorize' ? styles.categorize : {}),
-    ...(itemType === 'Answer' ? styles.matchList : {}),
-    ...(itemType === 'Tile' ? styles.placementOrdering : {}),
-    ...(itemType === 'react-dnd-response' ? styles.ica : {}),
-  };
-};
-
-const PreviewComponent = () => {
-  const preview = usePreview();
-  const { itemType, item, style, display } = preview;
-  const [touchPosition, setTouchPosition] = useState({ x: 0, y: 0 });
-  const [zoomLevel, setZoomLevel] = useState(1);
-
-  const handleTouchMove = useCallback(
-    (event) => {
-      if (event.touches.length > 0) {
-        const touch = event.touches[0];
-        const touchOffset = 1;
-        setTouchPosition({
-          x: (touch.clientX + touchOffset) / zoomLevel,
-          y: (touch.clientY + touchOffset) / zoomLevel,
-        });
-      }
-    },
-    [zoomLevel],
-  );
-
-  const root = useRef(null);
-
-  useEffect(() => {
-    if (display && root.current) {
-      renderMath(root.current);
-
-      // Adjusted for precise zoom level calculation in Online Testing, targeting the specific class pattern .asmt-zoomable.asmt-zoom-NR .asmt-question .padding
-      const zoomAffectedElement = document.querySelector('.padding') || document.body;
-
-      setZoomLevel(parseFloat(getComputedStyle(zoomAffectedElement).zoom) || 1);
-    }
-  }, [display, item?.choice?.value, item?.value, itemType, item]);
-
-  useEffect(() => {
-    const touchMoveListener = (event) => handleTouchMove(event);
-    if (display) {
-      window.addEventListener('touchmove', touchMoveListener);
-    }
-    return () => {
-      window.removeEventListener('touchmove', touchMoveListener);
-    };
-  }, [display, handleTouchMove]);
-
-  if (!display) {
-    return null;
-  }
-
-  const customStyle = getCustomStyle(itemType, item, touchPosition, style);
-
-  const prompt = getPrompt(itemType, item);
-
-  return (
-    <div ref={root} style={customStyle}>
-      <PreviewPrompt className="label" prompt={prompt} tagName="span" />
-    </div>
-  );
-};
-
-export default PreviewComponent;

package/configure/node_modules/@pie-lib/drag/src/swap.js

@@ -1,14 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep';
-
-export default (arr, fromIndex, toIndex) => {
-  if (!arr || arr.length <= 1 || fromIndex === undefined || toIndex === undefined) {
-    throw new Error(`swap requires a non-empty array, fromIndex, toIndex: ${arr}, ${fromIndex} ${toIndex}`);
-  }
-
-  const update = cloneDeep(arr);
-  const tmp = arr[toIndex];
-  update[toIndex] = update[fromIndex];
-  update[fromIndex] = tmp;
-
-  return update;
-};

package/configure/node_modules/@pie-lib/drag/src/uid-context.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-const { Consumer, Provider } = React.createContext(-1);
-
-export { Provider, Consumer };
-
-export const generateId = () => (Math.random() * 1000001).toFixed(0);
-
-export const withUid = (Component) => {
-  const Wrapped = (props) => <Consumer>{(uid) => <Component {...props} uid={uid} />}</Consumer>;
-
-  return Wrapped;
-};

package/configure/node_modules/@pie-lib/drag/src/with-drag-context.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import MultiBackend, { TouchTransition, MouseTransition } from 'react-dnd-multi-backend';
-import { DndProvider } from 'react-dnd';
-import { TouchBackend } from 'react-dnd-touch-backend';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-
-import PreviewComponent from './preview-component';
-
-const backends = [
-  {
-    backend: HTML5Backend,
-    transition: MouseTransition,
-  },
-  {
-    backend: TouchBackend,
-    options: { enableMouseEvents: true, enableTouchEvents: true },
-    preview: true,
-    transition: TouchTransition,
-    skipDispatchOnTransition: true,
-  },
-];
-
-export default (Component) => (props) => {
-  const isClient = typeof window !== 'undefined';
-
-  return (
-    <DndProvider backend={MultiBackend} options={{ backends }} {...(isClient && { context: window })}>
-      <Component {...props} />
-      <PreviewComponent />
-    </DndProvider>
-  );
-};

package/configure/node_modules/@pie-lib/editable-html/CHANGELOG.json

@@ -1,32 +0,0 @@
-[
-  {
-    "type": "feat",
-    "scope": null,
-    "subject": "made sure editor is waiting for image and sound upload before finishes editing PD-2950 (#948)",
-    "merge": null,
-    "header": "feat: made sure editor is waiting for image and sound upload before finishes editing PD-2950 (#948)",
-    "body": "feat: made sure editor is waiting for image and sound upload before finishes editing PD-2950",
-    "footer": null,
-    "notes": [],
-    "hash": "bd16707f13f824dfe2c2db7f395e58fa25eb2ffb",
-    "gitTags": "",
-    "committerDate": "2023-10-16 11:14:31 +0300",
-    "isTagged": true,
-    "tag": "@pie-lib/editable-html@11.1.0"
-  },
-  {
-    "type": "feat",
-    "scope": "mask-markup",
-    "subject": "merging with the develop branch",
-    "merge": null,
-    "header": "feat(mask-markup): merging with the develop branch",
-    "body": null,
-    "footer": null,
-    "notes": [],
-    "hash": "0153c1aba8a08ba6c974fcc69476a87b9086f6c5",
-    "gitTags": "",
-    "committerDate": "2019-05-02 07:12:59 +0300",
-    "isTagged": true,
-    "tag": "@pie-lib/editable-html@10.0.0"
-  }
-]