scorer-ui-kit 2.8.1 → 2.8.3

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

@@ -6087,7 +6087,7 @@ var FilterButton = function FilterButton(_ref8) {
 
 var _excluded$p = ["title", "value", "optionType", "selected", "disabled", "onClick"];
 var _templateObject$J, _templateObject2$C, _templateObject3$y, _templateObject4$u, _templateObject5$r, _templateObject6$m, _templateObject7$l, _templateObject8$i, _templateObject9$e, _templateObject10$9;
-var Title$1 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  display: block;\n  color: var(--grey-12);\n  font-size: 14px;\n  font-weight: 500;\n  user-select: none;\n  pointer-events: none;\n"])));
+var Title$1 = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  display: block;\n  color: var(--grey-12);\n  font-size: 14px;\n  font-weight: 500;\n  user-select: none;\n  pointer-events: none;\n  white-space: nowrap;\n"])));
 var FakeCheckbox = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  position: relative;\n  width: 18px;\n  height: 18px;\n  border-radius: 5px;\n  border-width: 2px;\n  border-style: solid;\n"])));
 var FakeCheckboxInner = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  box-sizing: border-box;\n"])));
 var CheckMarkWrapper = styled__default.div(_templateObject4$u || (_templateObject4$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    display: block;\n    [stroke]{\n      stroke: transparent;\n    }\n    [fill] {\n      fill: var(--inverse);\n    }\n  }\n"])));
@@ -12322,13 +12322,14 @@ var UtilityHeader = function UtilityHeader(_ref) {
     showHomeIcon = _ref$showHomeIcon === void 0 ? true : _ref$showHomeIcon,
     back = _ref.back,
     share = _ref.share,
-    _ref$$iconInGutter = _ref.$iconInGutter,
-    $iconInGutter = _ref$$iconInGutter === void 0 ? true : _ref$$iconInGutter;
+    $iconInGutter = _ref.$iconInGutter;
+  var _useBreakpoints = useBreakpoints(),
+    isLarge = _useBreakpoints.isLarge;
+  var iconInGutter = $iconInGutter !== undefined ? $iconInGutter : isLarge;
   var hasBreadcrumbs = showBreadcrumbs && breadcrumbs.length > 0;
   return React__default.createElement(Container$Y, null, React__default.createElement(LeftArea, null, back && React__default.createElement(UtilityHeaderBack, Object.assign({
-    "$showDivider": hasBreadcrumbs
-  }, {
-    $iconInGutter: $iconInGutter
+    "$showDivider": hasBreadcrumbs,
+    "$iconInGutter": iconInGutter
   }, back)), hasBreadcrumbs ? React__default.createElement(Breadcrumbs, null, breadcrumbs.map(function (breadcrumb, index) {
     var text = breadcrumb.text,
       href = breadcrumb.href;
@@ -12488,7 +12489,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 +12519,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 +12531,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 +12569,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 +12608,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() {