@pie-element/placement-ordering 14.1.2-next.5 → 14.1.3

package/lib/tile.js

@@ -0,0 +1,259 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tile = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _debug = _interopRequireDefault(require("debug"));
+var _core = require("@dnd-kit/core");
+var _styles = require("@mui/material/styles");
+var _drag = require("@pie-lib/drag");
+var _renderUi = require("@pie-lib/render-ui");
+const log = (0, _debug.default)('pie-elements:placement-ordering:tile');
+const StyledNumberContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  width: '100%',
+  fontSize: theme.typography.fontSize + 4,
+  textAlign: 'center',
+  color: `rgba(${theme.palette.common.black}, 0.6)`
+}));
+const Holder = ({
+  type,
+  index,
+  isOver,
+  disabled
+}) => /*#__PURE__*/_react.default.createElement(_drag.PlaceHolder, {
+  type: type,
+  isOver: isOver,
+  disabled: disabled
+}, type === 'target' && index !== undefined && /*#__PURE__*/_react.default.createElement(StyledNumberContainer, null, index));
+Holder.propTypes = {
+  type: _propTypes.default.string,
+  index: _propTypes.default.number,
+  isOver: _propTypes.default.bool,
+  disabled: _propTypes.default.bool
+};
+const StyledTileContent = (0, _styles.styled)('div')(({
+  theme,
+  isDragging,
+  isOver,
+  disabled,
+  outcome,
+  label,
+  type
+}) => ({
+  cursor: disabled ? 'not-allowed' : 'grab',
+  width: '100%',
+  height: '100%',
+  padding: '10px',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  border: type === 'choice' || type === 'target' ? `1px solid ${theme.palette.grey[400]}` : '1px solid transparent',
+  backgroundColor: type === 'choice' || type === 'target' ? _renderUi.color.background() : 'transparent',
+  transition: type === 'choice' || type === 'target' ? 'background-color 150ms ease, border-color 150ms ease, opacity 150ms ease' : 'none',
+  pointerEvents: 'none',
+  userSelect: 'none',
+  ...((type === 'choice' || type === 'target') && {
+    '&:hover': {
+      backgroundColor: disabled ? _renderUi.color.background() : _renderUi.color.secondary(),
+      borderColor: disabled ? theme.palette.grey[400] : theme.palette.primary.main,
+      transform: disabled ? 'none' : 'scale(1.02)'
+    }
+  }),
+  // Apply conditional styles based on props (only if not empty spacing tile)
+  ...((type === 'choice' || type === 'target') && isOver && !disabled && {
+    opacity: 0.4,
+    backgroundColor: _renderUi.color.primaryLight(),
+    borderColor: theme.palette.primary.main,
+    borderStyle: 'dashed',
+    transform: 'scale(1.05)'
+  }),
+  ...((type === 'choice' || type === 'target') && isDragging && !disabled && {
+    opacity: 0.6,
+    backgroundColor: _renderUi.color.secondaryLight(),
+    transform: 'scale(1.05) rotate(2deg)',
+    boxShadow: '0 8px 16px rgba(0,0,0,0.2)',
+    cursor: 'grabbing'
+  }),
+  ...((type === 'choice' || type === 'target') && disabled && {
+    cursor: 'not-allowed',
+    '&:hover': {
+      backgroundColor: _renderUi.color.background(),
+      transform: 'none'
+    }
+  }),
+  ...((type === 'choice' || type === 'target') && outcome === 'incorrect' && {
+    border: `1px solid ${_renderUi.color.incorrect()}`
+  }),
+  ...((type === 'choice' || type === 'target') && outcome === 'correct' && {
+    border: `1px solid ${_renderUi.color.correct()}`
+  }),
+  ...(!label && {
+    border: 'none',
+    '&:hover': {
+      backgroundColor: 'unset'
+    }
+  })
+}));
+const TileContent = props => {
+  const {
+    type,
+    isDragging,
+    empty,
+    isOver,
+    label,
+    disabled,
+    outcome,
+    guideIndex
+  } = props;
+  if (empty) {
+    return /*#__PURE__*/_react.default.createElement(Holder, {
+      type: type,
+      index: guideIndex,
+      isOver: isOver,
+      disabled: disabled
+    });
+  } else {
+    return /*#__PURE__*/_react.default.createElement(StyledTileContent, {
+      type: type,
+      isDragging: isDragging,
+      isOver: isOver,
+      disabled: disabled,
+      outcome: outcome,
+      label: label,
+      dangerouslySetInnerHTML: {
+        __html: label
+      }
+    });
+  }
+};
+const Tile = props => {
+  const {
+    label,
+    type,
+    id,
+    empty,
+    disabled,
+    outcome,
+    index,
+    guideIndex,
+    instanceId,
+    draggable,
+    tileIndex
+  } = props;
+
+  // Use type + tileIndex in the IDs to guarantee uniqueness in all modes.
+  // In includeTargets mode, a choice (id:'c1', type:'choice') and a target (id:'c1', type:'target')
+  // can coexist — the type differentiates them.
+  // tileIndex (array position from tiler) ensures empty placeholders are also unique.
+  const dragId = `tile-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;
+  const dropId = `drop-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    transform,
+    isDragging
+  } = (0, _core.useDraggable)({
+    id: dragId,
+    data: {
+      id,
+      type,
+      instanceId,
+      value: label,
+      index
+    },
+    disabled: !draggable || disabled
+  });
+  const {
+    setNodeRef: setDropRef,
+    isOver: dropIsOver
+  } = (0, _core.useDroppable)({
+    id: dropId,
+    data: {
+      id,
+      type,
+      instanceId,
+      value: label,
+      index
+    },
+    // Disable droppable on the tile currently being dragged so closestCenter
+    // cannot pick it as the drop target (prevents self-collision and wrong matches).
+    disabled: isDragging
+  });
+  const ref = _react.default.useRef(null);
+  _react.default.useEffect(() => {
+    const currentRef = ref.current;
+    const handleTouchStart = e => {
+      e.preventDefault(); // Prevent the default touch event behavior
+    };
+    if (currentRef) {
+      currentRef.addEventListener('touchstart', handleTouchStart, {
+        passive: false
+      });
+    }
+    return () => {
+      if (currentRef) {
+        currentRef.removeEventListener('touchstart', handleTouchStart);
+      }
+    };
+  }, []);
+  const setRefs = element => {
+    ref.current = element;
+    setDragRef(element);
+    setDropRef(element);
+  };
+  log('[render], props: ', props);
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+    boxSizing: 'border-box',
+    overflow: 'visible',
+    padding: 0,
+    margin: 0,
+    textAlign: 'center',
+    pointerEvents: 'auto',
+    cursor: disabled ? 'not-allowed' : isDragging ? 'grabbing' : 'grab',
+    zIndex: isDragging ? 1000 : 'auto',
+    willChange: isDragging ? 'transform' : 'auto'
+  };
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: setRefs,
+    style: style
+  }, draggable && !disabled ? {
+    ...listeners,
+    ...attributes
+  } : {}), /*#__PURE__*/_react.default.createElement(TileContent, {
+    label: label,
+    id: id,
+    empty: empty,
+    index: index,
+    guideIndex: guideIndex,
+    isOver: dropIsOver,
+    isDragging: isDragging,
+    disabled: disabled,
+    outcome: outcome,
+    type: type
+  }));
+};
+exports.Tile = Tile;
+Tile.propTypes = {
+  id: _propTypes.default.any,
+  label: _propTypes.default.string,
+  isOver: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  empty: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  outcome: _propTypes.default.string,
+  index: _propTypes.default.number,
+  guideIndex: _propTypes.default.number,
+  instanceId: _propTypes.default.any,
+  draggable: _propTypes.default.bool,
+  tileIndex: _propTypes.default.number
+};
+var _default = exports.default = Tile;
+//# sourceMappingURL=tile.js.map

package/lib/tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile.js","names":["_react","_interopRequireDefault","require","_propTypes","_debug","_core","_styles","_drag","_renderUi","log","debug","StyledNumberContainer","styled","theme","width","fontSize","typography","textAlign","color","palette","common","black","Holder","type","index","isOver","disabled","default","createElement","PlaceHolder","undefined","propTypes","PropTypes","string","number","bool","StyledTileContent","isDragging","outcome","label","cursor","height","padding","boxSizing","overflow","border","grey","backgroundColor","background","transition","pointerEvents","userSelect","secondary","borderColor","primary","main","transform","opacity","primaryLight","borderStyle","secondaryLight","boxShadow","incorrect","correct","TileContent","props","empty","guideIndex","dangerouslySetInnerHTML","__html","Tile","id","instanceId","draggable","tileIndex","dragId","dropId","attributes","listeners","setNodeRef","setDragRef","useDraggable","data","value","setDropRef","dropIsOver","useDroppable","ref","React","useRef","useEffect","currentRef","current","handleTouchStart","e","preventDefault","addEventListener","passive","removeEventListener","setRefs","element","style","x","y","margin","zIndex","willChange","_extends2","exports","any","_default"],"sources":["../src/tile.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debug from 'debug';\nimport { useDraggable, useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\nimport { PlaceHolder } from '@pie-lib/drag';\nimport { color } from '@pie-lib/render-ui';\n\nconst log = debug('pie-elements:placement-ordering:tile');\n\nconst StyledNumberContainer = styled('div')(({ theme }) => ({\n  width: '100%',\n  fontSize: theme.typography.fontSize + 4,\n  textAlign: 'center',\n  color: `rgba(${theme.palette.common.black}, 0.6)`,\n}));\n\nconst Holder = ({ type, index, isOver, disabled }) => (\n  <PlaceHolder type={type} isOver={isOver} disabled={disabled}>\n    {type === 'target' && index !== undefined && <StyledNumberContainer>{index}</StyledNumberContainer>}\n  </PlaceHolder>\n);\n\nHolder.propTypes = {\n  type: PropTypes.string,\n  index: PropTypes.number,\n  isOver: PropTypes.bool,\n  disabled: PropTypes.bool,\n};\n\nconst StyledTileContent = styled('div')(({ theme, isDragging, isOver, disabled, outcome, label, type }) => ({\n  cursor: disabled ? 'not-allowed' : 'grab',\n  width: '100%',\n  height: '100%',\n  padding: '10px',\n  boxSizing: 'border-box',\n  overflow: 'hidden',\n  border: (type === 'choice' || type === 'target') ? `1px solid ${theme.palette.grey[400]}` : '1px solid transparent',\n  backgroundColor: (type === 'choice' || type === 'target') ? color.background() : 'transparent',\n  transition: (type === 'choice' || type === 'target') ? 'background-color 150ms ease, border-color 150ms ease, opacity 150ms ease' : 'none',\n  pointerEvents: 'none',\n  userSelect: 'none',\n\n  ...((type === 'choice' || type === 'target') && {\n    '&:hover': {\n      backgroundColor: disabled ? color.background() : color.secondary(),\n      borderColor: disabled ? theme.palette.grey[400] : theme.palette.primary.main,\n      transform: disabled ? 'none' : 'scale(1.02)',\n    },\n  }),\n\n  // Apply conditional styles based on props (only if not empty spacing tile)\n  ...((type === 'choice' || type === 'target') && isOver && !disabled && {\n    opacity: 0.4,\n    backgroundColor: color.primaryLight(),\n    borderColor: theme.palette.primary.main,\n    borderStyle: 'dashed',\n    transform: 'scale(1.05)',\n  }),\n\n  ...((type === 'choice' || type === 'target') && isDragging && !disabled && {\n    opacity: 0.6,\n    backgroundColor: color.secondaryLight(),\n    transform: 'scale(1.05) rotate(2deg)',\n    boxShadow: '0 8px 16px rgba(0,0,0,0.2)',\n    cursor: 'grabbing',\n  }),\n\n  ...((type === 'choice' || type === 'target') && disabled && {\n    cursor: 'not-allowed',\n    '&:hover': {\n      backgroundColor: color.background(),\n      transform: 'none',\n    },\n  }),\n\n  ...((type === 'choice' || type === 'target') && outcome === 'incorrect' && {\n    border: `1px solid ${color.incorrect()}`,\n  }),\n\n  ...((type === 'choice' || type === 'target') && outcome === 'correct' && {\n    border: `1px solid ${color.correct()}`,\n  }),\n\n  ...(!label && {\n    border: 'none',\n    '&:hover': {\n      backgroundColor: 'unset',\n    },\n  }),\n}));\n\nconst TileContent = (props) => {\n  const { type, isDragging, empty, isOver, label, disabled, outcome, guideIndex } = props;\n\n  if (empty) {\n    return <Holder type={type} index={guideIndex} isOver={isOver} disabled={disabled} />;\n  } else {\n    return (\n      <StyledTileContent\n        type={type}\n        isDragging={isDragging}\n        isOver={isOver}\n        disabled={disabled}\n        outcome={outcome}\n        label={label}\n        dangerouslySetInnerHTML={{ __html: label }}\n      />\n    );\n  }\n};\n\nexport const Tile = (props) => {\n  const {\n    label,\n    type,\n    id,\n    empty,\n    disabled,\n    outcome,\n    index,\n    guideIndex,\n    instanceId,\n    draggable,\n    tileIndex,\n  } = props;\n\n  // Use type + tileIndex in the IDs to guarantee uniqueness in all modes.\n  // In includeTargets mode, a choice (id:'c1', type:'choice') and a target (id:'c1', type:'target')\n  // can coexist — the type differentiates them.\n  // tileIndex (array position from tiler) ensures empty placeholders are also unique.\n  const dragId = `tile-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n  const dropId = `drop-${type}-${id != null ? id : 'empty'}-${tileIndex}-${instanceId}`;\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef: setDragRef,\n    transform,\n    isDragging,\n  } = useDraggable({\n    id: dragId,\n    data: {\n      id,\n      type,\n      instanceId,\n      value: label,\n      index\n    },\n    disabled: !draggable || disabled,\n  });\n\n  const {\n    setNodeRef: setDropRef,\n    isOver: dropIsOver,\n  } = useDroppable({\n    id: dropId,\n    data: {\n      id,\n      type,\n      instanceId,\n      value: label,\n      index\n    },\n    // Disable droppable on the tile currently being dragged so closestCenter\n    // cannot pick it as the drop target (prevents self-collision and wrong matches).\n    disabled: isDragging,\n  });\n\n  const ref = React.useRef(null);\n\n  React.useEffect(() => {\n    const currentRef = ref.current;\n\n    const handleTouchStart = (e) => {\n      e.preventDefault(); // Prevent the default touch event behavior\n    };\n\n    if (currentRef) {\n      currentRef.addEventListener('touchstart', handleTouchStart, { passive: false });\n    }\n\n    return () => {\n      if (currentRef) {\n        currentRef.removeEventListener('touchstart', handleTouchStart);\n      }\n    };\n  }, []);\n\n  const setRefs = (element) => {\n    ref.current = element;\n    setDragRef(element);\n    setDropRef(element);\n  };\n\n  log('[render], props: ', props);\n\n  const style = {\n    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,\n    boxSizing: 'border-box',\n    overflow: 'visible',\n    padding: 0,\n    margin: 0,\n    textAlign: 'center',\n    pointerEvents: 'auto',\n    cursor: disabled ? 'not-allowed' : (isDragging ? 'grabbing' : 'grab'),\n    zIndex: isDragging ? 1000 : 'auto',\n    willChange: isDragging ? 'transform' : 'auto',\n  };\n\n  return (\n    <div\n      ref={setRefs}\n      style={style}\n      {...(draggable && !disabled ? { ...listeners, ...attributes } : {})}\n    >\n      <TileContent\n        label={label}\n        id={id}\n        empty={empty}\n        index={index}\n        guideIndex={guideIndex}\n        isOver={dropIsOver}\n        isDragging={isDragging}\n        disabled={disabled}\n        outcome={outcome}\n        type={type}\n      />\n    </div>\n  );\n};\n\nTile.propTypes = {\n  id: PropTypes.any,\n  label: PropTypes.string,\n  isOver: PropTypes.bool,\n  type: PropTypes.string,\n  empty: PropTypes.bool,\n  disabled: PropTypes.bool,\n  outcome: PropTypes.string,\n  index: PropTypes.number,\n  guideIndex: PropTypes.number,\n  instanceId: PropTypes.any,\n  draggable: PropTypes.bool,\n  tileIndex: PropTypes.number,\n};\n\nexport default Tile;\n"],"mappings":"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","ignoreList":[]}

package/lib/tiler.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerticalTiler = exports.HorizontalTiler = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@mui/material/styles");
+var _tile = _interopRequireDefault(require("./tile"));
+const types = {
+  choiceLabel: _propTypes.default.string,
+  targetLabel: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  tiles: _propTypes.default.array.isRequired,
+  tileSize: _propTypes.default.string,
+  addGuide: _propTypes.default.bool
+};
+const defaults = {
+  tileSize: '1fr',
+  disabled: false,
+  addGuide: false
+};
+const buildTiles = props => {
+  const T = (tile, index) => {
+    tile.instanceId = props.instanceId;
+    tile.disabled = props.disabled;
+    tile.guideIndex = props.addGuide ? tile.index + 1 : undefined;
+    // unique key for dnd-kit IDs
+    tile.tileIndex = index;
+    if (props.includeTargets) {
+      return /*#__PURE__*/_react.default.createElement(_tile.default, (0, _extends2.default)({}, tile, {
+        key: index
+      }));
+    } else {
+      return tile.type === 'choice' ? /*#__PURE__*/_react.default.createElement(_tile.default, (0, _extends2.default)({}, tile, {
+        key: index
+      })) : /*#__PURE__*/_react.default.createElement(_tile.default, (0, _extends2.default)({}, tile, {
+        label: "",
+        key: index
+      }));
+    }
+  };
+  T.propTypes = {
+    ...types
+  };
+  return T;
+};
+const StyledHTilerContainer = (0, _styles.styled)('div')(({
+  theme,
+  includeTargets
+}) => ({
+  display: 'grid',
+  paddingBottom: theme.spacing(2),
+  ...(includeTargets && {
+    gridGap: '10px'
+  })
+}));
+const StyledChoiceLabel = (0, _styles.styled)('div')({
+  textAlign: 'center'
+});
+const StyledTargetLabel = (0, _styles.styled)('div')({
+  textAlign: 'center',
+  gridRow: '3/4'
+});
+const StyledVTilerContainer = (0, _styles.styled)('div')(({
+  includeTargets
+}) => ({
+  gridAutoFlow: 'column',
+  display: 'grid',
+  ...(includeTargets && {
+    gridGap: '10px'
+  })
+}));
+const StyledVChoiceLabel = (0, _styles.styled)('div')({
+  gridColumn: '1/2',
+  textAlign: 'center'
+});
+const StyledVTargetLabel = (0, _styles.styled)('div')({
+  gridColumn: '2/3',
+  textAlign: 'center'
+});
+class HorizontalTiler extends _react.default.Component {
+  render() {
+    const {
+      includeTargets,
+      choiceLabelEnabled,
+      choiceLabel,
+      targetLabel,
+      tiles,
+      tileSize
+    } = this.props;
+    const rows = includeTargets ? `auto ${tileSize} auto ${tileSize}` : `auto ${tileSize} auto`;
+    const columns = includeTargets ? tiles.length / 2 : tiles.length;
+    const style = {
+      gridTemplateColumns: includeTargets ? `repeat(${columns}, ${tileSize})` : `auto repeat(${Math.floor(columns / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,
+      gridTemplateRows: rows
+    };
+    const labelStyle = {
+      gridColumn: `1/${columns + 1}`
+    };
+    return /*#__PURE__*/_react.default.createElement(StyledHTilerContainer, {
+      includeTargets: includeTargets,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(StyledChoiceLabel, {
+      style: labelStyle,
+      dangerouslySetInnerHTML: {
+        __html: choiceLabelEnabled ? choiceLabel : ''
+      }
+    }), includeTargets && /*#__PURE__*/_react.default.createElement(StyledTargetLabel, {
+      style: labelStyle,
+      dangerouslySetInnerHTML: {
+        __html: targetLabel
+      }
+    }), tiles.map(buildTiles(this.props)));
+  }
+}
+exports.HorizontalTiler = HorizontalTiler;
+(0, _defineProperty2.default)(HorizontalTiler, "propTypes", {
+  ...types
+});
+(0, _defineProperty2.default)(HorizontalTiler, "defaultProps", {
+  ...defaults
+});
+class VerticalTiler extends _react.default.Component {
+  render() {
+    const {
+      includeTargets,
+      choiceLabelEnabled,
+      choiceLabel,
+      targetLabel,
+      tiles,
+      tileSize
+    } = this.props;
+    const columns = includeTargets ? 2 : 1;
+    const rows = includeTargets ? tiles.length / 2 : tiles.length;
+    const style = {
+      gridTemplateColumns: `repeat(${columns}, ${tileSize})`,
+      gridTemplateRows: includeTargets ? `auto repeat(${rows}, ${tileSize})` : `auto auto repeat(${Math.floor(rows / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`
+    };
+    return /*#__PURE__*/_react.default.createElement(StyledVTilerContainer, {
+      includeTargets: includeTargets,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement(StyledVChoiceLabel, {
+      dangerouslySetInnerHTML: {
+        __html: choiceLabelEnabled ? choiceLabel : ''
+      }
+    }), includeTargets && /*#__PURE__*/_react.default.createElement(StyledVTargetLabel, {
+      dangerouslySetInnerHTML: {
+        __html: targetLabel
+      }
+    }), tiles.map(buildTiles(this.props)));
+  }
+}
+exports.VerticalTiler = VerticalTiler;
+(0, _defineProperty2.default)(VerticalTiler, "propTypes", {
+  ...types
+});
+(0, _defineProperty2.default)(VerticalTiler, "defaultProps", {
+  ...defaults
+});
+//# sourceMappingURL=tiler.js.map

package/lib/tiler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tiler.js","names":["_propTypes","_interopRequireDefault","require","_react","_styles","_tile","types","choiceLabel","PropTypes","string","targetLabel","disabled","bool","tiles","array","isRequired","tileSize","addGuide","defaults","buildTiles","props","T","tile","index","instanceId","guideIndex","undefined","tileIndex","includeTargets","default","createElement","_extends2","key","type","label","propTypes","StyledHTilerContainer","styled","theme","display","paddingBottom","spacing","gridGap","StyledChoiceLabel","textAlign","StyledTargetLabel","gridRow","StyledVTilerContainer","gridAutoFlow","StyledVChoiceLabel","gridColumn","StyledVTargetLabel","HorizontalTiler","React","Component","render","choiceLabelEnabled","rows","columns","length","style","gridTemplateColumns","Math","floor","gridTemplateRows","labelStyle","dangerouslySetInnerHTML","__html","map","exports","_defineProperty2","VerticalTiler"],"sources":["../src/tiler.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport { styled } from '@mui/material/styles';\n\nimport Tile from './tile';\n\nconst types = {\n  choiceLabel: PropTypes.string,\n  targetLabel: PropTypes.string,\n  disabled: PropTypes.bool,\n  tiles: PropTypes.array.isRequired,\n  tileSize: PropTypes.string,\n  addGuide: PropTypes.bool,\n};\n\nconst defaults = {\n  tileSize: '1fr',\n  disabled: false,\n  addGuide: false,\n};\n\nconst buildTiles = (props) => {\n  const T = (tile, index) => {\n    tile.instanceId = props.instanceId;\n    tile.disabled = props.disabled;\n    tile.guideIndex = props.addGuide ? tile.index + 1 : undefined;\n    // unique key for dnd-kit IDs\n    tile.tileIndex = index;\n\n    if (props.includeTargets) {\n      return <Tile {...tile} key={index} />;\n    } else {\n      return tile.type === 'choice' ? <Tile {...tile} key={index} /> : <Tile {...tile} label=\"\" key={index} />;\n    }\n  };\n\n  T.propTypes = { ...types };\n  return T;\n};\n\nconst StyledHTilerContainer = styled('div')(({ theme, includeTargets }) => ({\n  display: 'grid',\n  paddingBottom: theme.spacing(2),\n  ...(includeTargets && {\n    gridGap: '10px',\n  }),\n}));\n\nconst StyledChoiceLabel = styled('div')({\n  textAlign: 'center',\n});\n\nconst StyledTargetLabel = styled('div')({\n  textAlign: 'center',\n  gridRow: '3/4',\n});\n\nconst StyledVTilerContainer = styled('div')(({ includeTargets }) => ({\n  gridAutoFlow: 'column',\n  display: 'grid',\n  ...(includeTargets && {\n    gridGap: '10px',\n  }),\n}));\n\nconst StyledVChoiceLabel = styled('div')({\n  gridColumn: '1/2',\n  textAlign: 'center',\n});\n\nconst StyledVTargetLabel = styled('div')({\n  gridColumn: '2/3',\n  textAlign: 'center',\n});\n\nexport class HorizontalTiler extends React.Component {\n  static propTypes = { ...types };\n  static defaultProps = { ...defaults };\n  render() {\n    const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, tileSize } = this.props;\n\n    const rows = includeTargets ? `auto ${tileSize} auto ${tileSize}` : `auto ${tileSize} auto`;\n    const columns = includeTargets ? tiles.length / 2 : tiles.length;\n\n    const style = {\n      gridTemplateColumns: includeTargets\n        ? `repeat(${columns}, ${tileSize})`\n        : `auto repeat(${Math.floor(columns / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n      gridTemplateRows: rows,\n    };\n\n    const labelStyle = {\n      gridColumn: `1/${columns + 1}`,\n    };\n\n    return (\n      <StyledHTilerContainer includeTargets={includeTargets} style={style}>\n        <StyledChoiceLabel\n          style={labelStyle}\n          dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n        />\n        {includeTargets && (\n          <StyledTargetLabel style={labelStyle} dangerouslySetInnerHTML={{ __html: targetLabel }} />\n        )}\n        {tiles.map(buildTiles(this.props))}\n      </StyledHTilerContainer>\n    );\n  }\n}\n\nexport class VerticalTiler extends React.Component {\n  static propTypes = { ...types };\n  static defaultProps = { ...defaults };\n  render() {\n    const { includeTargets, choiceLabelEnabled, choiceLabel, targetLabel, tiles, tileSize } = this.props;\n\n    const columns = includeTargets ? 2 : 1;\n    const rows = includeTargets ? tiles.length / 2 : tiles.length;\n\n    const style = {\n      gridTemplateColumns: `repeat(${columns}, ${tileSize})`,\n      gridTemplateRows: includeTargets\n        ? `auto repeat(${rows}, ${tileSize})`\n        : `auto auto repeat(${Math.floor(rows / 2) - 1}, ${tileSize} 10px) ${tileSize} auto`,\n    };\n\n    return (\n      <StyledVTilerContainer includeTargets={includeTargets} style={style}>\n        <StyledVChoiceLabel\n          dangerouslySetInnerHTML={{ __html: choiceLabelEnabled ? choiceLabel : '' }}\n        />\n\n        {includeTargets && <StyledVTargetLabel dangerouslySetInnerHTML={{ __html: targetLabel }} />}\n        {tiles.map(buildTiles(this.props))}\n      </StyledVTilerContainer>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.haveSameValuesButDifferentOrder = void 0;
+const haveSameValuesButDifferentOrder = (arr1, arr2) => {
+  if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
+  if (arr1.length !== arr2.length) return false;
+  const toSortedJson = arr => arr.map(item => JSON.stringify(item)).sort();
+  const sortedArr1 = toSortedJson(arr1);
+  const sortedArr2 = toSortedJson(arr2);
+  const hasSameValues = sortedArr1.every((val, i) => val === sortedArr2[i]);
+  const hasSameOrder = arr1.every((item, i) => JSON.stringify(item) === JSON.stringify(arr2[i]));
+  return hasSameValues && !hasSameOrder;
+};
+exports.haveSameValuesButDifferentOrder = haveSameValuesButDifferentOrder;
+//# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["haveSameValuesButDifferentOrder","arr1","arr2","Array","isArray","length","toSortedJson","arr","map","item","JSON","stringify","sort","sortedArr1","sortedArr2","hasSameValues","every","val","i","hasSameOrder","exports"],"sources":["../src/utils.js"],"sourcesContent":["export const haveSameValuesButDifferentOrder = (arr1, arr2) => {\n    if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;\n    if (arr1.length !== arr2.length) return false;\n\n    const toSortedJson = (arr) =>\n        arr\n            .map((item) => JSON.stringify(item))\n            .sort();\n\n    const sortedArr1 = toSortedJson(arr1);\n    const sortedArr2 = toSortedJson(arr2);\n\n    const hasSameValues = sortedArr1.every((val, i) => val === sortedArr2[i]);\n    const hasSameOrder = arr1.every((item, i) =>\n        JSON.stringify(item) === JSON.stringify(arr2[i])\n    );\n\n    return hasSameValues && !hasSameOrder;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,+BAA+B,GAAGA,CAACC,IAAI,EAAEC,IAAI,KAAK;EAC3D,IAAI,CAACC,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,IAAI,CAACE,KAAK,CAACC,OAAO,CAACF,IAAI,CAAC,EAAE,OAAO,KAAK;EAC9D,IAAID,IAAI,CAACI,MAAM,KAAKH,IAAI,CAACG,MAAM,EAAE,OAAO,KAAK;EAE7C,MAAMC,YAAY,GAAIC,GAAG,IACrBA,GAAG,CACEC,GAAG,CAAEC,IAAI,IAAKC,IAAI,CAACC,SAAS,CAACF,IAAI,CAAC,CAAC,CACnCG,IAAI,CAAC,CAAC;EAEf,MAAMC,UAAU,GAAGP,YAAY,CAACL,IAAI,CAAC;EACrC,MAAMa,UAAU,GAAGR,YAAY,CAACJ,IAAI,CAAC;EAErC,MAAMa,aAAa,GAAGF,UAAU,CAACG,KAAK,CAAC,CAACC,GAAG,EAAEC,CAAC,KAAKD,GAAG,KAAKH,UAAU,CAACI,CAAC,CAAC,CAAC;EACzE,MAAMC,YAAY,GAAGlB,IAAI,CAACe,KAAK,CAAC,CAACP,IAAI,EAAES,CAAC,KACpCR,IAAI,CAACC,SAAS,CAACF,IAAI,CAAC,KAAKC,IAAI,CAACC,SAAS,CAACT,IAAI,CAACgB,CAAC,CAAC,CACnD,CAAC;EAED,OAAOH,aAAa,IAAI,CAACI,YAAY;AACzC,CAAC;AAACC,OAAA,CAAApB,+BAAA,GAAAA,+BAAA","ignoreList":[]}

package/package.json

@@ -1,104 +1,37 @@
 {
   "name": "@pie-element/placement-ordering",
-  "version": "14.1.2-next.5",
+  "repository": "pie-framework/pie-elements",
+  "version": "14.1.3",
   "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/correct-answer-toggle": "4.0.3-next.38",
-    "@pie-lib/drag": "4.0.3-next.38",
-    "@pie-lib/render-ui": "6.1.1-next.38",
-    "@pie-lib/translator": "4.0.3-next.1",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/correct-answer-toggle": "4.0.4",
+    "@pie-lib/drag": "4.0.4",
+    "@pie-lib/math-rendering": "5.0.2",
+    "@pie-lib/render-ui": "6.1.2",
+    "@pie-lib/translator": "4.0.2",
     "debug": "^4.1.1",
     "decimal.js": "^10.0.0",
+    "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
-    "react-transition-group": "^4.4.5",
-    "@pie-element/shared-lodash": "0.1.1-next.1",
-    "@pie-lib/config-ui": "13.0.4-next.31",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.31",
-    "nested-property": "^4.0.0",
-    "pluralize": "^8.0.0",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "@pie-element/shared-feedback": "0.1.0",
-    "@pie-element/shared-controller-utils": "0.1.1-next.1",
-    "js-combinatorics": "^2.1.2",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "@pie-element/shared-player-events": "0.1.0"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./delivery": {
-      "types": "./dist/delivery/index.d.ts",
-      "default": "./dist/delivery/index.js"
-    },
-    "./browser/delivery": {
-      "default": "./dist/browser/delivery/index.js"
-    },
-    "./author": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./browser/author": {
-      "default": "./dist/browser/author/index.js"
-    },
-    "./configure": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./controller": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./controller.js": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./browser/controller": {
-      "default": "./dist/browser/controller/index.js"
-    },
-    "./runtime-support": {
-      "types": "./dist/runtime-support.d.ts",
-      "default": "./dist/runtime-support.js"
-    }
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "configure.js",
-    "controller.js",
-    "dist"
-  ],
-  "sideEffects": false,
-  "devDependencies": {
-    "vite": "^8.0.1",
-    "typescript": "^5.9.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-transition-group": "^4.4.5"
   },
+  "author": "",
+  "license": "ISC",
+  "gitHead": "213c3a293da2591ffaf2ba5c5fb50f0fe7577cfa",
   "scripts": {
-    "build": "bun x vite build && bun x vite build --config ../../../tools/vite/element-browser.config.ts && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
-    "dev": "bun x vite",
-    "demo": "bun x vite --mode demo",
-    "test": "bun x vitest run"
+    "postpublish": "../../scripts/postpublish"
   },
-  "pie": {
-    "controller": "@pie-element/placement-ordering/controller",
-    "configure": "@pie-element/placement-ordering/configure",
-    "browserSharedDependencies": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
-    }
-  }
+  "main": "lib/index.js",
+  "module": "src/index.js"
 }

package/configure.js

@@ -1,2 +0,0 @@
-export { default } from './dist/author/index.js';
-export * from './dist/author/index.js';

package/controller.js

@@ -1 +0,0 @@
-export * from './dist/controller/index.js';