scorer-ui-kit 2.8.0 → 2.8.2

package/dist/Layouts/index.d.ts

@@ -35,12 +35,15 @@ export interface IMainArea {
     content: ReactElement;
     minSize?: number;
 }
+export declare type ISideAreaState = 'open' | 'collapsing' | 'collapsed' | 'peeking' | 'opening';
 export interface ISideArea {
     content: ReactElement;
     defaultSize?: number;
     minSize?: number;
     maxSize?: number;
     collapsable?: boolean;
+    defaultCollapsed?: boolean;
+    onSideAreaStateChange?: (sideAreaState: ISideAreaState) => void;
 }
 export interface ISplitLayoutProps {
     layout: 'horizontal' | 'vertical';

package/dist/index.js

@@ -2342,7 +2342,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__default.span(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var LabelText = styled__default.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 && styled.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  "])));
 });
@@ -7487,7 +7487,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;
@@ -12488,7 +12488,7 @@ var MainArea = styled__default.div(_templateObject2$1j || (_templateObject2$1j =
   return $layout === 'vertical' ? styled.css(_templateObject3$1a || (_templateObject3$1a = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), $minDimension ? "min-height: " + $minDimension + "px;" : null) : styled.css(_templateObject4$13 || (_templateObject4$13 = _taggedTemplateLiteralLoose(["\n    ", ";\n  "])), $minDimension ? "min-width: " + $minDimension + "px;" : null);
 });
 var SideAreaInner = styled__default.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__default.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__default.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) {
@@ -12518,7 +12518,7 @@ var SideArea = styled__default.div(_templateObject6$J || (_templateObject6$J = _
     $minDimension = _ref8.$minDimension;
   return $collapseState === 'opening' ? styled.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__default.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__default.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) {
@@ -12530,7 +12530,7 @@ var Container$$ = styled__default.section(_templateObject16$5 || (_templateObjec
   return $initialised === 'true' ? styled.css(_templateObject17$5 || (_templateObject17$5 = _taggedTemplateLiteralLoose(["\n    opacity: 1;\n  "]))) : null;
 }, function (_ref12) {
   var $layout = _ref12.$layout;
-  return $layout === 'vertical' ? styled.css(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n    flex-direction: column;\n    ", "{}\n    ", "{  \n      cursor: row-resize;\n    }\n  "])), MainArea, DragContainer) : null;
+  return $layout === 'vertical' ? styled.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' ? styled.css(_templateObject19$3 || (_templateObject19$3 = _taggedTemplateLiteralLoose(["\n    ", "{ order: 2; }\n    ", "{ order: 1; }\n  "])), MainArea, DragContainer) : null;
@@ -12568,7 +12568,7 @@ var SplitLayout = React.forwardRef(function (_ref14, controlRef) {
   var _useState4 = React.useState(),
     resizing = _useState4[0],
     setResizing = _useState4[1];
-  var _useState5 = React.useState('open'),
+  var _useState5 = React.useState(sideArea.defaultCollapsed ? 'collapsed' : 'open'),
     sideAreaState = _useState5[0],
     setSideAreaState = _useState5[1];
   var _useState6 = React.useState(sideDefaultSize),
@@ -12607,6 +12607,12 @@ var SplitLayout = React.forwardRef(function (_ref14, controlRef) {
       setInitialised(true);
     }
   }, [initialised, persist, savedCollapsedState, savedSize, savedLastOpenSize]);
+  React.useEffect(function () {
+    if (!initialised || !sideArea.onSideAreaStateChange) {
+      return;
+    }
+    sideArea.onSideAreaStateChange(sideAreaState);
+  }, [initialised, sideArea, sideAreaState]);
   React.useImperativeHandle(controlRef, function () {
     return {
       open: function open() {