scorer-ui-kit 2.8.0 → 2.8.2

package/dist/index.modern.js

@@ -2339,7 +2339,7 @@ var Input = function Input(_ref4) {
 
 var _excluded$5 = ["htmlFor", "labelText", "direction", "rightAlign", "required", "children"];
 var _templateObject$i, _templateObject2$c, _templateObject3$b, _templateObject4$a, _templateObject5$8;
-var LabelText = styled.span(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var LabelText = styled.span(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  align-items: center;\n  gap: 8px;\n  \n  ", "\n"])), function (_ref) {
   var required = _ref.required;
   return required && css(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n    &::after {\n      content: '';\n      display: var(--input-required-dot-display);\n      height: 8px;\n      width: 8px;\n      background-color: var(--primary-9);\n      border-radius: 4px;\n    }\n  "])));
 });
@@ -7484,7 +7484,7 @@ var ToggleButton = function ToggleButton(_ref) {
     }
   }, {
     design: design
-  }, props), categoryLabel + " : " + options[selectedIndex].text);
+  }, props), categoryLabel && categoryLabel + ": ", "" + options[selectedIndex].text);
 };
 
 var _templateObject$U, _templateObject2$M, _templateObject3$H;
@@ -12485,7 +12485,7 @@ var MainArea = styled.div(_templateObject2$1j || (_templateObject2$1j = _taggedT
   return $layout === 'vertical' ? css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
 });
 var SideAreaInner = styled.div(_templateObject5$Z || (_templateObject5$Z = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex: 1;\n  height: 100%;\n  transition: opacity 0.2s cubic-bezier(0.85, 0, 0.15, 1);\n"])));
-var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex: 0 0 ", "px;\n  display: ", ";\n  transition: \n    min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n    min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n  \n  ", "\n\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"])), function (_ref2) {
+var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  flex: 0 0 ", "px;\n  display: ", ";\n  transition:\n    min-width 0.65s cubic-bezier(0, 0.55, 0.45, 1),\n    min-height 0.65s cubic-bezier(0, 0.55, 0.45, 1);\n\n  ", "\n\n\n  ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"])), function (_ref2) {
   var $defaultSize = _ref2.$defaultSize;
   return $defaultSize;
 }, function (_ref3) {
@@ -12515,7 +12515,7 @@ var SideArea = styled.div(_templateObject6$J || (_templateObject6$J = _taggedTem
     $minDimension = _ref8.$minDimension;
   return $collapseState === 'opening' ? css(_templateObject12$a || (_templateObject12$a = _taggedTemplateLiteralLoose(["\n    ", ";\n\n    ", "{\n      min-width: ", "px;\n    }\n    "])), $layout === 'horizontal' ? 'min-width: 0' : 'min-height: 0', SideAreaInner, $minDimension) : null;
 });
-var DragContainer = styled.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: col-resize;\n  \n  > div {\n    transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n  }\n\n  &:hover > div {\n    opacity: 1;\n  }\n\n  ", "\n\n"])), function (_ref9) {
+var DragContainer = styled.div(_templateObject13$9 || (_templateObject13$9 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: col-resize;\n\n  > div {\n    transition: opacity 0.15s cubic-bezier(0.45, 0, 0.55, 1);\n  }\n\n  &:hover > div {\n    opacity: 1;\n  }\n\n  ", "\n\n"])), function (_ref9) {
   var $size = _ref9.$size;
   return $size;
 }, function (_ref10) {
@@ -12527,7 +12527,7 @@ var Container$$ = styled.section(_templateObject16$5 || (_templateObject16$5 = _
   return $initialised === 'true' ? css(_templateObject17$5 || (_templateObject17$5 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "]))) : null;
 }, function (_ref12) {
   var $layout = _ref12.$layout;
-  return $layout === 'vertical' ? css(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n    flex-direction: column;\n    ", "{}\n    ", "{  \n      cursor: row-resize;\n    }\n  "])), MainArea, DragContainer) : null;
+  return $layout === 'vertical' ? css(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n    flex-direction: column;\n    ", "{}\n    ", "{\n      cursor: row-resize;\n    }\n  "])), MainArea, DragContainer) : null;
 }, function (_ref13) {
   var $reverse = _ref13.$reverse;
   return $reverse === 'true' ? css(_templateObject19$3 || (_templateObject19$3 = _taggedTemplateLiteralLoose(["\n    ", "{ order: 2; }\n    ", "{ order: 1; }\n  "])), MainArea, DragContainer) : null;
@@ -12565,7 +12565,7 @@ var SplitLayout = forwardRef(function (_ref14, controlRef) {
   var _useState4 = useState(),
     resizing = _useState4[0],
     setResizing = _useState4[1];
-  var _useState5 = useState('open'),
+  var _useState5 = useState(sideArea.defaultCollapsed ? 'collapsed' : 'open'),
     sideAreaState = _useState5[0],
     setSideAreaState = _useState5[1];
   var _useState6 = useState(sideDefaultSize),
@@ -12604,6 +12604,12 @@ var SplitLayout = forwardRef(function (_ref14, controlRef) {
       setInitialised(true);
     }
   }, [initialised, persist, savedCollapsedState, savedSize, savedLastOpenSize]);
+  useEffect(function () {
+    if (!initialised || !sideArea.onSideAreaStateChange) {
+      return;
+    }
+    sideArea.onSideAreaStateChange(sideAreaState);
+  }, [initialised, sideArea, sideAreaState]);
   useImperativeHandle(controlRef, function () {
     return {
       open: function open() {