@roqua/quby-frontend 0.10.16 → 0.10.17

package/dist/quby-frontend.es.js

@@ -19,7 +19,7 @@ var __privateAdd = (obj, member, value) => {
 };
 var _flatOptions;
 import * as React$1 from "react";
-import React__default, { createContext, useContext, useState, useRef, useEffect, memo } from "react";
+import React__default, { createContext, useContext, useState, useRef, useEffect, createElement, memo } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import root from "react-shadow";
 const consoleLogger = {
@@ -14049,16 +14049,15 @@ var lib = {};
 var Range$1 = {};
 var utils = {};
 var types = {};
-(function(exports) {
-  Object.defineProperty(exports, "__esModule", { value: true });
-  exports.Direction = void 0;
-  (function(Direction) {
-    Direction["Right"] = "to right";
-    Direction["Left"] = "to left";
-    Direction["Down"] = "to bottom";
-    Direction["Up"] = "to top";
-  })(exports.Direction || (exports.Direction = {}));
-})(types);
+Object.defineProperty(types, "__esModule", { value: true });
+types.Direction = void 0;
+var Direction;
+(function(Direction2) {
+  Direction2["Right"] = "to right";
+  Direction2["Left"] = "to left";
+  Direction2["Down"] = "to bottom";
+  Direction2["Up"] = "to top";
+})(Direction || (types.Direction = Direction = {}));
 (function(exports) {
   var __spreadArray2 = commonjsGlobal && commonjsGlobal.__spreadArray || function(to, from, pack) {
     if (pack || arguments.length === 2)
@@ -14072,7 +14071,7 @@ var types = {};
     return to.concat(ar || Array.prototype.slice.call(from));
   };
   Object.defineProperty(exports, "__esModule", { value: true });
-  exports.useThumbOverlap = exports.assertUnreachable = exports.voidFn = exports.getTrackBackground = exports.replaceAt = exports.schd = exports.translate = exports.getClosestThumbIndex = exports.translateThumbs = exports.getPaddingAndBorder = exports.getMargin = exports.checkInitialOverlap = exports.checkValuesAgainstBoundaries = exports.checkBoundaries = exports.isVertical = exports.relativeValue = exports.normalizeValue = exports.isStepDivisible = exports.isTouchEvent = exports.getStepDecimals = void 0;
+  exports.isIOS = exports.useThumbOverlap = exports.assertUnreachable = exports.voidFn = exports.getTrackBackground = exports.replaceAt = exports.schd = exports.translate = exports.getClosestThumbIndex = exports.translateThumbs = exports.getPaddingAndBorder = exports.getMargin = exports.checkInitialOverlap = exports.checkValuesAgainstBoundaries = exports.checkBoundaries = exports.isVertical = exports.relativeValue = exports.normalizeValue = exports.isStepDivisible = exports.isTouchEvent = exports.getStepDecimals = void 0;
   var react_1 = React__default;
   var types_12 = types;
   var getStepDecimals = function(step) {
@@ -14352,6 +14351,20 @@ var types = {};
     var _a = thumbEl.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
     return isVertical(direction) ? Math.abs(clientY - (top + height / 2)) : Math.abs(clientX - (left + width / 2));
   }
+  var isIOS = function() {
+    var _a;
+    var platform = ((_a = navigator.userAgentData) === null || _a === void 0 ? void 0 : _a.platform) || navigator.platform;
+    return [
+      "iPad Simulator",
+      "iPhone Simulator",
+      "iPod Simulator",
+      "iPad",
+      "iPhone",
+      "iPod"
+    ].includes(platform) || // iPad on iOS 13 detection
+    navigator.userAgent.includes("Mac") && "ontouchend" in document;
+  };
+  exports.isIOS = isIOS;
 })(utils);
 var __extends = commonjsGlobal && commonjsGlobal.__extends || function() {
   var extendStatics = function(d2, b2) {
@@ -14443,6 +14456,10 @@ var Range = (
       _this.getOffsets = function() {
         var _a = _this.props, direction = _a.direction, values = _a.values, min = _a.min, max = _a.max;
         var trackElement = _this.trackRef.current;
+        if (!trackElement) {
+          console.warn("No track element found.");
+          return [];
+        }
         var trackRect = trackElement.getBoundingClientRect();
         var trackPadding = (0, utils_1.getPaddingAndBorder)(trackElement);
         return _this.getThumbs().map(function(thumb, index) {
@@ -14506,7 +14523,7 @@ var Range = (
       };
       _this.onMouseDownTrack = function(e2) {
         var _a;
-        if (e2.button !== 0)
+        if (e2.button !== 0 || (0, utils_1.isIOS)())
           return;
         e2.persist();
         e2.preventDefault();
@@ -14852,7 +14869,7 @@ var Range = (
     };
     Range2.prototype.render = function() {
       var _this = this;
-      var _a = this.props, renderTrack = _a.renderTrack, renderThumb2 = _a.renderThumb, _b = _a.renderMark, renderMark2 = _b === void 0 ? function() {
+      var _a = this.props, label = _a.label, labelledBy = _a.labelledBy, renderTrack = _a.renderTrack, renderThumb2 = _a.renderThumb, _b = _a.renderMark, renderMark2 = _b === void 0 ? function() {
         return null;
       } : _b, values = _a.values, min = _a.min, max = _a.max, allowOverlap = _a.allowOverlap, disabled = _a.disabled;
       var _c = this.state, draggedThumbIndex = _c.draggedThumbIndex, thumbZIndexes = _c.thumbZIndexes, markOffsets = _c.markOffsets;
@@ -14911,6 +14928,8 @@ var Range = (
               "aria-valuenow": value,
               draggable: false,
               ref: _this.thumbRefs[index],
+              "aria-label": label,
+              "aria-labelledby": labelledBy,
               role: "slider",
               onKeyDown: disabled ? utils_1.voidFn : _this.onKeyDown,
               onKeyUp: disabled ? utils_1.voidFn : _this.onKeyUp
@@ -14920,6 +14939,8 @@ var Range = (
       });
     };
     Range2.defaultProps = {
+      label: "Accessibility label",
+      labelledBy: null,
       step: 1,
       direction: types_1.Direction.Right,
       rtl: false,
@@ -15004,12 +15025,13 @@ const SliderQuestion = ({ question, fieldState, setQuestionRef }) => {
 };
 const renderThumb$1 = ({ props, value, isDragged, blank, showTooltip, startThumbHidden, isActiveQuestion, onFocus }) => {
   if (startThumbHidden && blank) {
-    return /* @__PURE__ */ jsx("div", { ...props });
+    return /* @__PURE__ */ createElement("div", { ...props, key: props.key });
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ createElement(
     "div",
     {
       ...props,
+      key: props.key,
       style: {
         ...props.style,
         ...baseThumbStyles$1,
@@ -15017,27 +15039,26 @@ const renderThumb$1 = ({ props, value, isDragged, blank, showTooltip, startThumb
         ...isActiveQuestion && activeThumbStyles,
         ...blank && invalidThumbStyles$1
       },
-      onFocus,
-      children: [
-        /* @__PURE__ */ jsx("div", { style: {
-          margin: "6px auto",
-          width: "6px",
-          height: "14px",
-          border: "1px solid oklch(var(--foreground))",
-          borderWidth: "0 1px 0 1px"
-        } }),
-        showTooltip && isDragged && /* @__PURE__ */ jsx("div", { style: labelStyles$1, children: value })
-      ]
-    }
+      onFocus
+    },
+    /* @__PURE__ */ jsx("div", { style: {
+      margin: "6px auto",
+      width: "6px",
+      height: "14px",
+      border: "1px solid oklch(var(--foreground))",
+      borderWidth: "0 1px 0 1px"
+    } }),
+    showTooltip && isDragged && /* @__PURE__ */ jsx("div", { style: labelStyles$1, children: value })
   );
 };
 const renderMark$1 = (props, label, { info, setRef }) => {
   const top = LABEL_MIN_ARROW_HEIGHT + (info.tops[label.idx] || 0);
   const labelBorderRadius = label.first ? "0 4px 4px" : label.last ? "4px 0 4px 4px" : "4px";
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ createElement(
     "div",
     {
       ...props,
+      key: props.key,
       style: {
         ...props.style,
         top: TRACK_HEIGHT - TRACK_BORDER,
@@ -15045,35 +15066,33 @@ const renderMark$1 = (props, label, { info, setRef }) => {
         // set by react-range
         width: 0
         // important so react-range does not add negative margins to center. 
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: (node) => {
-              if (node) {
-                setRef(label.idx, node);
-              }
-            },
-            style: {
-              position: "absolute",
-              top,
-              left: -TRACK_BORDER,
-              width: "max-content",
-              maxWidth: info.maxWidths[label.idx],
-              backgroundColor: "oklch(var(--slider-track))",
-              borderRadius: labelBorderRadius,
-              border: `${LABEL_BORDER}px solid oklch(var(--foreground))`,
-              padding: "0 4px",
-              textAlign: label.first ? "left" : label.last ? "right" : "center",
-              transform: label.first ? void 0 : label.last ? "translateX(-100%)" : "translateX(-50%)"
-            },
-            dangerouslySetInnerHTML: { __html: label.text }
+      }
+    },
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          if (node) {
+            setRef(label.idx, node);
           }
-        ),
-        /* @__PURE__ */ jsx(LabelArrow, { label, top })
-      ]
-    }
+        },
+        style: {
+          position: "absolute",
+          top,
+          left: -TRACK_BORDER,
+          width: "max-content",
+          maxWidth: info.maxWidths[label.idx],
+          backgroundColor: "oklch(var(--slider-track))",
+          borderRadius: labelBorderRadius,
+          border: `${LABEL_BORDER}px solid oklch(var(--foreground))`,
+          padding: "0 4px",
+          textAlign: label.first ? "left" : label.last ? "right" : "center",
+          transform: label.first ? void 0 : label.last ? "translateX(-100%)" : "translateX(-50%)"
+        },
+        dangerouslySetInnerHTML: { __html: label.text }
+      }
+    ),
+    /* @__PURE__ */ jsx(LabelArrow, { label, top })
   );
 };
 const LabelArrow = ({ top, label }) => {

package/dist/quby-frontend.umd.js

@@ -22,7 +22,10 @@ var __privateAdd = (obj, member, value) => {
   member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 };
 
-  function _interopNamespaceDefault(e2) {
+  const _interopDefault = (e2) => e2 && e2.__esModule ? e2 : { default: e2 };
+  function _interopNamespace(e2) {
+    if (e2 && e2.__esModule)
+      return e2;
     const n2 = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
     if (e2) {
       for (const k2 in e2) {
@@ -38,7 +41,8 @@ var __privateAdd = (obj, member, value) => {
     n2.default = e2;
     return Object.freeze(n2);
   }
-  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React$1);
+  const React__namespace = /* @__PURE__ */ _interopNamespace(React$1);
+  const root__default = /* @__PURE__ */ _interopDefault(root);
   const consoleLogger = {
     type: "logger",
     log(args) {
@@ -13339,7 +13343,7 @@ var __privateAdd = (obj, member, value) => {
     newLayout: true
   };
   const defaultSetQuestionRef = (_key, _ref) => null;
-  const QubyContext = React$1.createContext({
+  const QubyContext = React__namespace.default.createContext({
     questionnaire: defaultQuestionnaire,
     response: defaultResponse,
     setQuestionRef: defaultSetQuestionRef,
@@ -13536,7 +13540,7 @@ var __privateAdd = (obj, member, value) => {
     }
   }
   function useMightBecomeValid(value, handleChange) {
-    const [localValue, setLocalValue] = React$1.useState(value);
+    const [localValue, setLocalValue] = React__namespace.default.useState(value);
     return {
       onChange: (event) => {
         const result = handleChange(event.target.value);
@@ -13578,7 +13582,7 @@ var __privateAdd = (obj, member, value) => {
         }
       }
     };
-    React$1.useEffect(() => {
+    React__namespace.default.useEffect(() => {
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     });
@@ -13622,11 +13626,11 @@ var __privateAdd = (obj, member, value) => {
     ] }) });
   };
   const HtmlItem = ({ item }) => {
-    const interpolateCurlies = React$1.useContext(InterpolateCurliesContext);
+    const interpolateCurlies = React__namespace.default.useContext(InterpolateCurliesContext);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "item", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose text", dangerouslySetInnerHTML: { __html: interpolateCurlies(item.html) } }) });
   };
   const MainLabel = ({ question }) => {
-    const interpolateCurlies = React$1.useContext(InterpolateCurliesContext);
+    const interpolateCurlies = React__namespace.default.useContext(InterpolateCurliesContext);
     if (!question.title)
       return null;
     const titleText = interpolateCurlies(question.title);
@@ -13635,7 +13639,7 @@ var __privateAdd = (obj, member, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${mb} main`, children: /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: labelFor, dangerouslySetInnerHTML: { __html: titleText } }) });
   };
   const QuestionDescription = (props) => {
-    const interpolateCurlies = React$1.useContext(InterpolateCurliesContext);
+    const interpolateCurlies = React__namespace.default.useContext(InterpolateCurliesContext);
     if (!props.question.description)
       return null;
     const description = interpolateCurlies(props.question.description);
@@ -13662,7 +13666,7 @@ var __privateAdd = (obj, member, value) => {
   }
   const QuestionWrapper = (props) => {
     const { question, fieldState, setQuestionRef } = props;
-    const questionRef = React$1.useRef(null);
+    const questionRef = React__namespace.default.useRef(null);
     setQuestionRef(question.key, questionRef);
     const className = classNames("item", "question", question.type, question.presentation, question.questionGroup, question.as, {
       errors: fieldState.showErrors,
@@ -13678,7 +13682,7 @@ var __privateAdd = (obj, member, value) => {
     ] });
   };
   const ContextDescriptionItem = ({ html }) => {
-    const interpolateCurlies = React$1.useContext(InterpolateCurliesContext);
+    const interpolateCurlies = React__namespace.default.useContext(InterpolateCurliesContext);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "context-description prose", dangerouslySetInnerHTML: { __html: interpolateCurlies(html) } });
   };
   const StringQuestion = ({ question, fieldState, setQuestionRef }) => {
@@ -13775,7 +13779,7 @@ var __privateAdd = (obj, member, value) => {
     ] });
   };
   const ShowDescription$1 = ({ option }) => {
-    const interpolateCurlies = React$1.useContext(InterpolateCurliesContext);
+    const interpolateCurlies = React__namespace.default.useContext(InterpolateCurliesContext);
     const description = option.label || option.description;
     if (!description)
       return null;
@@ -13858,7 +13862,7 @@ var __privateAdd = (obj, member, value) => {
     ] });
   };
   const ShowDescription = ({ option }) => {
-    const interpolateCurlies = React$1.useContext(InterpolateCurliesContext);
+    const interpolateCurlies = React__namespace.default.useContext(InterpolateCurliesContext);
     if (!option.label && !option.description)
       return null;
     const label = option.label || option.description;
@@ -14066,16 +14070,15 @@ var __privateAdd = (obj, member, value) => {
   var Range$1 = {};
   var utils = {};
   var types = {};
-  (function(exports3) {
-    Object.defineProperty(exports3, "__esModule", { value: true });
-    exports3.Direction = void 0;
-    (function(Direction) {
-      Direction["Right"] = "to right";
-      Direction["Left"] = "to left";
-      Direction["Down"] = "to bottom";
-      Direction["Up"] = "to top";
-    })(exports3.Direction || (exports3.Direction = {}));
-  })(types);
+  Object.defineProperty(types, "__esModule", { value: true });
+  types.Direction = void 0;
+  var Direction;
+  (function(Direction2) {
+    Direction2["Right"] = "to right";
+    Direction2["Left"] = "to left";
+    Direction2["Down"] = "to bottom";
+    Direction2["Up"] = "to top";
+  })(Direction || (types.Direction = Direction = {}));
   (function(exports3) {
     var __spreadArray2 = commonjsGlobal && commonjsGlobal.__spreadArray || function(to, from, pack) {
       if (pack || arguments.length === 2)
@@ -14089,8 +14092,8 @@ var __privateAdd = (obj, member, value) => {
       return to.concat(ar || Array.prototype.slice.call(from));
     };
     Object.defineProperty(exports3, "__esModule", { value: true });
-    exports3.useThumbOverlap = exports3.assertUnreachable = exports3.voidFn = exports3.getTrackBackground = exports3.replaceAt = exports3.schd = exports3.translate = exports3.getClosestThumbIndex = exports3.translateThumbs = exports3.getPaddingAndBorder = exports3.getMargin = exports3.checkInitialOverlap = exports3.checkValuesAgainstBoundaries = exports3.checkBoundaries = exports3.isVertical = exports3.relativeValue = exports3.normalizeValue = exports3.isStepDivisible = exports3.isTouchEvent = exports3.getStepDecimals = void 0;
-    var react_1 = React$1;
+    exports3.isIOS = exports3.useThumbOverlap = exports3.assertUnreachable = exports3.voidFn = exports3.getTrackBackground = exports3.replaceAt = exports3.schd = exports3.translate = exports3.getClosestThumbIndex = exports3.translateThumbs = exports3.getPaddingAndBorder = exports3.getMargin = exports3.checkInitialOverlap = exports3.checkValuesAgainstBoundaries = exports3.checkBoundaries = exports3.isVertical = exports3.relativeValue = exports3.normalizeValue = exports3.isStepDivisible = exports3.isTouchEvent = exports3.getStepDecimals = void 0;
+    var react_1 = React__namespace.default;
     var types_12 = types;
     var getStepDecimals = function(step) {
       var decimals = step.toString().split(".")[1];
@@ -14369,6 +14372,20 @@ var __privateAdd = (obj, member, value) => {
       var _a = thumbEl.getBoundingClientRect(), left = _a.left, top = _a.top, width = _a.width, height = _a.height;
       return isVertical(direction) ? Math.abs(clientY - (top + height / 2)) : Math.abs(clientX - (left + width / 2));
     }
+    var isIOS = function() {
+      var _a;
+      var platform = ((_a = navigator.userAgentData) === null || _a === void 0 ? void 0 : _a.platform) || navigator.platform;
+      return [
+        "iPad Simulator",
+        "iPhone Simulator",
+        "iPod Simulator",
+        "iPad",
+        "iPhone",
+        "iPod"
+      ].includes(platform) || // iPad on iOS 13 detection
+      navigator.userAgent.includes("Mac") && "ontouchend" in document;
+    };
+    exports3.isIOS = isIOS;
   })(utils);
   var __extends = commonjsGlobal && commonjsGlobal.__extends || function() {
     var extendStatics = function(d2, b2) {
@@ -14435,7 +14452,7 @@ var __privateAdd = (obj, member, value) => {
     return to.concat(ar || Array.prototype.slice.call(from));
   };
   Object.defineProperty(Range$1, "__esModule", { value: true });
-  var React = __importStar(React$1);
+  var React = __importStar(React__namespace.default);
   var utils_1 = utils;
   var types_1 = types;
   var INCREASE_KEYS = ["ArrowRight", "ArrowUp", "k", "PageUp"];
@@ -14460,6 +14477,10 @@ var __privateAdd = (obj, member, value) => {
         _this.getOffsets = function() {
           var _a = _this.props, direction = _a.direction, values = _a.values, min = _a.min, max = _a.max;
           var trackElement = _this.trackRef.current;
+          if (!trackElement) {
+            console.warn("No track element found.");
+            return [];
+          }
           var trackRect = trackElement.getBoundingClientRect();
           var trackPadding = (0, utils_1.getPaddingAndBorder)(trackElement);
           return _this.getThumbs().map(function(thumb, index) {
@@ -14523,7 +14544,7 @@ var __privateAdd = (obj, member, value) => {
         };
         _this.onMouseDownTrack = function(e2) {
           var _a;
-          if (e2.button !== 0)
+          if (e2.button !== 0 || (0, utils_1.isIOS)())
             return;
           e2.persist();
           e2.preventDefault();
@@ -14869,7 +14890,7 @@ var __privateAdd = (obj, member, value) => {
       };
       Range2.prototype.render = function() {
         var _this = this;
-        var _a = this.props, renderTrack = _a.renderTrack, renderThumb2 = _a.renderThumb, _b = _a.renderMark, renderMark2 = _b === void 0 ? function() {
+        var _a = this.props, label = _a.label, labelledBy = _a.labelledBy, renderTrack = _a.renderTrack, renderThumb2 = _a.renderThumb, _b = _a.renderMark, renderMark2 = _b === void 0 ? function() {
           return null;
         } : _b, values = _a.values, min = _a.min, max = _a.max, allowOverlap = _a.allowOverlap, disabled = _a.disabled;
         var _c = this.state, draggedThumbIndex = _c.draggedThumbIndex, thumbZIndexes = _c.thumbZIndexes, markOffsets = _c.markOffsets;
@@ -14928,6 +14949,8 @@ var __privateAdd = (obj, member, value) => {
                 "aria-valuenow": value,
                 draggable: false,
                 ref: _this.thumbRefs[index],
+                "aria-label": label,
+                "aria-labelledby": labelledBy,
                 role: "slider",
                 onKeyDown: disabled ? utils_1.voidFn : _this.onKeyDown,
                 onKeyUp: disabled ? utils_1.voidFn : _this.onKeyUp
@@ -14937,6 +14960,8 @@ var __privateAdd = (obj, member, value) => {
         });
       };
       Range2.defaultProps = {
+        label: "Accessibility label",
+        labelledBy: null,
         step: 1,
         direction: types_1.Direction.Right,
         rtl: false,
@@ -14986,7 +15011,7 @@ var __privateAdd = (obj, member, value) => {
     const handleChange = (newValues) => {
       fieldState.setValue(newValues[0]);
     };
-    const parentRef = React$1.useRef(null);
+    const parentRef = React__namespace.default.useRef(null);
     const labelPositioning = useLabelPositioning(question.labels, parentRef);
     const blank = fieldState.value == null;
     const value = fieldState.value ?? question.defaultPosition;
@@ -15021,12 +15046,13 @@ var __privateAdd = (obj, member, value) => {
   };
   const renderThumb$1 = ({ props, value, isDragged, blank, showTooltip, startThumbHidden, isActiveQuestion, onFocus }) => {
     if (startThumbHidden && blank) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props });
+      return /* @__PURE__ */ React$1.createElement("div", { ...props, key: props.key });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ React$1.createElement(
       "div",
       {
         ...props,
+        key: props.key,
         style: {
           ...props.style,
           ...baseThumbStyles$1,
@@ -15034,27 +15060,26 @@ var __privateAdd = (obj, member, value) => {
           ...isActiveQuestion && activeThumbStyles,
           ...blank && invalidThumbStyles$1
         },
-        onFocus,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-            margin: "6px auto",
-            width: "6px",
-            height: "14px",
-            border: "1px solid oklch(var(--foreground))",
-            borderWidth: "0 1px 0 1px"
-          } }),
-          showTooltip && isDragged && /* @__PURE__ */ jsxRuntime.jsx("div", { style: labelStyles$1, children: value })
-        ]
-      }
+        onFocus
+      },
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        margin: "6px auto",
+        width: "6px",
+        height: "14px",
+        border: "1px solid oklch(var(--foreground))",
+        borderWidth: "0 1px 0 1px"
+      } }),
+      showTooltip && isDragged && /* @__PURE__ */ jsxRuntime.jsx("div", { style: labelStyles$1, children: value })
     );
   };
   const renderMark$1 = (props, label, { info, setRef }) => {
     const top = LABEL_MIN_ARROW_HEIGHT + (info.tops[label.idx] || 0);
     const labelBorderRadius = label.first ? "0 4px 4px" : label.last ? "4px 0 4px 4px" : "4px";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ React$1.createElement(
       "div",
       {
         ...props,
+        key: props.key,
         style: {
           ...props.style,
           top: TRACK_HEIGHT - TRACK_BORDER,
@@ -15062,35 +15087,33 @@ var __privateAdd = (obj, member, value) => {
           // set by react-range
           width: 0
           // important so react-range does not add negative margins to center. 
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: (node) => {
-                if (node) {
-                  setRef(label.idx, node);
-                }
-              },
-              style: {
-                position: "absolute",
-                top,
-                left: -TRACK_BORDER,
-                width: "max-content",
-                maxWidth: info.maxWidths[label.idx],
-                backgroundColor: "oklch(var(--slider-track))",
-                borderRadius: labelBorderRadius,
-                border: `${LABEL_BORDER}px solid oklch(var(--foreground))`,
-                padding: "0 4px",
-                textAlign: label.first ? "left" : label.last ? "right" : "center",
-                transform: label.first ? void 0 : label.last ? "translateX(-100%)" : "translateX(-50%)"
-              },
-              dangerouslySetInnerHTML: { __html: label.text }
+        }
+      },
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: (node) => {
+            if (node) {
+              setRef(label.idx, node);
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(LabelArrow, { label, top })
-        ]
-      }
+          },
+          style: {
+            position: "absolute",
+            top,
+            left: -TRACK_BORDER,
+            width: "max-content",
+            maxWidth: info.maxWidths[label.idx],
+            backgroundColor: "oklch(var(--slider-track))",
+            borderRadius: labelBorderRadius,
+            border: `${LABEL_BORDER}px solid oklch(var(--foreground))`,
+            padding: "0 4px",
+            textAlign: label.first ? "left" : label.last ? "right" : "center",
+            transform: label.first ? void 0 : label.last ? "translateX(-100%)" : "translateX(-50%)"
+          },
+          dangerouslySetInnerHTML: { __html: label.text }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(LabelArrow, { label, top })
     );
   };
   const LabelArrow = ({ top, label }) => {
@@ -15151,14 +15174,14 @@ var __privateAdd = (obj, member, value) => {
     padding: "0 4px"
   };
   const useLabelPositioning = (labels, parentRef) => {
-    const labelRefs = React$1.useRef([]);
-    const [info, setInfo] = React$1.useState({ maxWidths: [], rowHeights: [], tops: [], twoRows: false });
-    const [step, setStep] = React$1.useState("getRefs");
+    const labelRefs = React__namespace.default.useRef([]);
+    const [info, setInfo] = React__namespace.default.useState({ maxWidths: [], rowHeights: [], tops: [], twoRows: false });
+    const [step, setStep] = React__namespace.default.useState("getRefs");
     let height = LABEL_MIN_ARROW_HEIGHT + info.rowHeights[0] || 18;
     if (info.rowHeights.length == 2) {
       height += LABEL_ROW_SPACING + info.rowHeights[1];
     }
-    React$1.useLayoutEffect(() => {
+    React__namespace.default.useLayoutEffect(() => {
       if (step === "resize") {
         setInfo({ ...info, twoRows: false, maxWidths: Array(labelRefs.current.length).fill(999) });
         setStep("setWidths");
@@ -15170,7 +15193,7 @@ var __privateAdd = (obj, member, value) => {
         setStep("done");
       }
     }, [step, labels, parentRef, info]);
-    React$1.useLayoutEffect(() => {
+    React__namespace.default.useLayoutEffect(() => {
       if (step !== "done")
         return;
       const oldRef = parentRef.current;
@@ -15425,7 +15448,7 @@ var __privateAdd = (obj, member, value) => {
     ] });
   };
   const Option$1 = ({ question, option, fieldState }) => {
-    const interpolateCurlies = React$1.useContext(InterpolateCurliesContext);
+    const interpolateCurlies = React__namespace.default.useContext(InterpolateCurliesContext);
     const value = fieldState.value || /* @__PURE__ */ new Set();
     const checked = value.has(option.key) || false;
     if (option.hidden && !checked)
@@ -18405,7 +18428,7 @@ var __privateAdd = (obj, member, value) => {
       /* @__PURE__ */ jsxRuntime.jsx(MainLabel, { question }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "description-and-fields", children: [
         /* @__PURE__ */ jsxRuntime.jsx(QuestionDescription, { question }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fields", id: htmlId(question), children: question.units.map((unit) => /* @__PURE__ */ jsxRuntime.jsxs(React$1.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fields", id: htmlId(question), children: question.units.map((unit) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.default.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -18446,7 +18469,7 @@ var __privateAdd = (obj, member, value) => {
     return `answer_${question.key}_input`;
   }
   const QuestionItem = ({ fieldKey }) => {
-    const { questionnaire, response, setQuestionRef, displayOptions } = React$1.useContext(QubyContext);
+    const { questionnaire, response, setQuestionRef, displayOptions } = React__namespace.default.useContext(QubyContext);
     const question = questionnaire.getField(fieldKey);
     switch (question.as) {
       case "string": {
@@ -18697,15 +18720,15 @@ var __privateAdd = (obj, member, value) => {
     return result;
   }
   const InfoItem = ({ item }) => {
-    const [open, setOpen] = React$1.useState(item.startOpen);
-    const [opening, setOpening] = React$1.useState(false);
+    const [open, setOpen] = React__namespace.default.useState(item.startOpen);
+    const [opening, setOpening] = React__namespace.default.useState(false);
     const { ref, inView } = useInView({
       initialInView: true,
       // prevents showing margin animation when it starts visible.
       fallbackInView: false
       // act as stuck when not supported, instead of raising an error.
     });
-    const { response } = React$1.useContext(QubyContext);
+    const { response } = React__namespace.default.useContext(QubyContext);
     const iconClick = (e2) => {
       if ("key" in e2 && e2.key !== "Enter")
         return;
@@ -18784,8 +18807,8 @@ var __privateAdd = (obj, member, value) => {
   };
   const buttonsClassName = "buttons bg-slate-100 dark:bg-slate-700 p-panel-padding";
   const Paginator = (props) => {
-    const [activeIndex, setActiveIndex] = React$1.useState(props.panelLogic.firstPanelIndexToActivate());
-    const topRef = React$1.useRef(null);
+    const [activeIndex, setActiveIndex] = React__namespace.default.useState(props.panelLogic.firstPanelIndexToActivate());
+    const topRef = React__namespace.default.useRef(null);
     const prevIndex = props.panelLogic.previousPanelIndexToActivate(activeIndex);
     const nextIndex = props.panelLogic.nextPanelIndexToActivate(activeIndex);
     const navigate = {
@@ -18815,9 +18838,9 @@ var __privateAdd = (obj, member, value) => {
         ] });
       }
       case "single_page": {
-        return /* @__PURE__ */ jsxRuntime.jsxs(React$1.Fragment, { children: [
+        return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.default.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { ref: topRef, tabIndex: -1 }),
-          props.panelLogic.panels.map((panel, index) => !props.panelLogic.allQuestionsHidden(index) && /* @__PURE__ */ jsxRuntime.jsxs(React$1.Fragment, { children: [
+          props.panelLogic.panels.map((panel, index) => !props.panelLogic.allQuestionsHidden(index) && /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.default.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: "panel", children: [
               /* @__PURE__ */ jsxRuntime.jsx(PanelContent, { panel }),
               props.panelLogic.isLastPanel(index) ? /* @__PURE__ */ jsxRuntime.jsx(Buttons, { firstPanel: false, lastPanel: true, navigate }) : null
@@ -18864,11 +18887,11 @@ var __privateAdd = (obj, member, value) => {
   const Hotkeys = () => {
     return null;
   };
-  const InterpolateCurliesContext = React$1.createContext((str) => str);
+  const InterpolateCurliesContext = React__namespace.default.createContext((str) => str);
   const AnswerPage = ({ questionnaire, response, displayOptions, allowSkipValidation, onSave, onAbort, onPreviousQuestionnaire }) => {
     useRerenderOnResponseChange(response);
     const [nextSavePressWillOnlyRunMinimalValidations, setNextSavePressWillOnlyRunMinimalValidations] = useNextSavePressWillOnlyRunMinimalValidations(response);
-    const qubyRef = React$1.useRef(null);
+    const qubyRef = React__namespace.default.useRef(null);
     useQuestionShortkeys(response, questionnaire, qubyRef);
     const displayMode = displayOptions.displayMode;
     const questionRefs = /* @__PURE__ */ new Map();
@@ -18938,16 +18961,16 @@ var __privateAdd = (obj, member, value) => {
     ] }) }) });
   };
   const useRerenderOnResponseChange = (response) => {
-    const [_2, setCounter] = React$1.useState(0);
-    React$1.useEffect(() => {
+    const [_2, setCounter] = React__namespace.default.useState(0);
+    React__namespace.default.useEffect(() => {
       const handleChange = (_response) => setCounter((number) => number + 1);
       response.onChange(handleChange);
       return () => response.offChange(handleChange);
     });
   };
   const useNextSavePressWillOnlyRunMinimalValidations = (response) => {
-    const [nextSavePressWillOnlyRunMinimalValidations, setNextSavePressWillOnlyRunMinimalValidations] = React$1.useState(false);
-    React$1.useEffect(() => {
+    const [nextSavePressWillOnlyRunMinimalValidations, setNextSavePressWillOnlyRunMinimalValidations] = React__namespace.default.useState(false);
+    React__namespace.default.useEffect(() => {
       const handleChange = (_response, type) => {
         if (nextSavePressWillOnlyRunMinimalValidations && type === "valueChanged")
           setNextSavePressWillOnlyRunMinimalValidations(false);
@@ -18972,10 +18995,10 @@ var __privateAdd = (obj, member, value) => {
   const Quby = (props) => {
     var _a;
     const questionnaire = new Questionnaire(props.questionnaireJson);
-    const [response, _2] = React$1.useState(() => {
+    const [response, _2] = React__namespace.default.useState(() => {
       return new Response(questionnaire, convertDefaultAndValidateResponseJson(props.responseJson, questionnaire));
     });
-    const leavePageNag = React$1.useRef(null);
+    const leavePageNag = React__namespace.default.useRef(null);
     const newLayout = props.newLayout ?? questionnaire.layoutVersion === "v2";
     const darkMode = props.darkMode === void 0 ? (_a = window.matchMedia("(prefers-color-scheme: dark)")) == null ? void 0 : _a.matches : props.darkMode;
     const displayOptions = {
@@ -18996,7 +19019,7 @@ var __privateAdd = (obj, member, value) => {
       callback(response);
     } : void 0;
     instance.changeLanguage(props.questionnaireJson.language);
-    React$1.useEffect(() => {
+    React__namespace.default.useEffect(() => {
       if (props.unsavedResponseWarning) {
         leavePageNag.current = (e2) => {
           if (response.valueHasChanged()) {
@@ -19011,7 +19034,7 @@ var __privateAdd = (obj, member, value) => {
         };
       }
     }, [props.unsavedResponseWarning]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(root.qubyRoot, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(root__default.default.qubyRoot, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: newLayout ? styles : oldStyles }),
       /* @__PURE__ */ jsxRuntime.jsx(
         AnswerPage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roqua/quby-frontend",
-  "version": "0.10.16",
+  "version": "0.10.17",
   "main": "./dist/quby-frontend.umd.js",
   "module": "./dist/quby-frontend.es.js",
   "types": "./dist/index.d.ts",