linear-react-components-ui 1.1.20-beta.33 → 1.1.20-beta.34

package/lib/spinner/SpinnerLoading.js

@@ -0,0 +1,219 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SpinnerLoading = _ref => {
+  let {
+    color = '#3B3B3B',
+    size = '50px'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    "data-testid": "spinner",
+    className: "lds-spinner spinnerloading",
+    fill: color,
+    width: size,
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid",
+    style: {
+      background: 'none',
+      float: 'right'
+    }
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(0 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.9166666666666666s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(30 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.8333333333333334s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(60 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.75s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(90 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.6666666666666666s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(120 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.5833333333333334s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(150 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.5s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(180 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.4166666666666667s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(210 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.3333333333333333s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(240 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.25s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(270 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.16666666666666666s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(300 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "-0.08333333333333333s",
+    repeatCount: "indefinite"
+  }))), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(330 50 50)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "47",
+    y: "24",
+    rx: "9.4",
+    ry: "4.8",
+    width: "6",
+    height: "12"
+  }, /*#__PURE__*/_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0",
+    keyTimes: "0;1",
+    dur: "1s",
+    begin: "0s",
+    repeatCount: "indefinite"
+  }))));
+};
+var _default = exports.default = SpinnerLoading;

package/lib/spinner/index.d.ts

@@ -0,0 +1,7 @@
+import { ISpinnerProps } from './types.js';
+import 'react';
+import '../@types/Align.js';
+
+declare const Spinner: (props: ISpinnerProps) => JSX.Element | null;
+
+export { Spinner as default };

package/lib/spinner/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SpinnerLoading = _interopRequireDefault(require("./SpinnerLoading"));
+require("../assets/styles/spinner.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Spinner = props => {
+  const {
+    align = 'center',
+    customClass,
+    style,
+    text,
+    visible = true,
+    delayTime = 1000,
+    heightAuto,
+    color = '#3B3B3B',
+    size = '50px'
+  } = props;
+  const [delay, setDelay] = (0, _react.useState)(!!delayTime);
+  const delayTimeout = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (delayTime) {
+      delayTimeout.current = setTimeout(() => {
+        setDelay(false);
+      }, delayTime);
+    }
+    return () => {
+      if (delayTimeout.current) {
+        clearTimeout(delayTimeout.current);
+      }
+    };
+  }, []);
+  const getCssClass = () => {
+    let css = `spinner-component -${align} ${customClass} `;
+    if (heightAuto) css = `${css} -heightauto`;
+    return css;
+  };
+  if (delay) return null;
+  if (!visible) return null;
+  if (align !== 'none') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: style,
+      className: getCssClass()
+    }, align === 'right' && text, /*#__PURE__*/_react.default.createElement(_SpinnerLoading.default, {
+      color: color,
+      size: size
+    }), align === 'left' && text, align === 'center' && text);
+  }
+  return /*#__PURE__*/_react.default.createElement(_SpinnerLoading.default, {
+    color: color,
+    size: size
+  });
+};
+var _default = exports.default = Spinner;

package/lib/spinner/types.d.ts

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+import { Align } from '../@types/Align.js';
+
+interface ISpinnerProps {
+    align?: Exclude<Align, 'top' | 'bottom'>;
+    customClass?: string;
+    text?: string;
+    style?: CSSProperties;
+    visible?: boolean;
+    delayTime?: number;
+    heightAuto?: boolean;
+    color?: string;
+    size?: string;
+}
+interface ISpinnerLoadingProps {
+    color?: string;
+    size: string;
+}
+
+export { ISpinnerLoadingProps, ISpinnerProps };

package/lib/spinner/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/split/Split.d.ts

@@ -0,0 +1,6 @@
+import { ISplitProps } from './types.js';
+import 'react';
+
+declare const Split: ({ hotKey, secondaryInitialSize, onSecondaryPaneSizeChange, vertical, primaryIndex, percentage, primaryMinSize, secondaryMinSize, customClass, children, hideSplitSideOnToggleClick, style, nodeParameter, }: ISplitProps) => JSX.Element;
+
+export { Split as default };

package/lib/split/Split.js

@@ -0,0 +1,292 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = _interopRequireDefault(require("./helpers"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const Split = _ref => {
+  let {
+    hotKey,
+    secondaryInitialSize = 0,
+    onSecondaryPaneSizeChange,
+    vertical,
+    primaryIndex = 0,
+    percentage,
+    primaryMinSize = 0,
+    secondaryMinSize = 0,
+    customClass,
+    children = [],
+    hideSplitSideOnToggleClick = 'primary',
+    style,
+    nodeParameter
+  } = _ref;
+  const [state, setState] = (0, _react.useState)({
+    secondaryPaneSize: 0,
+    resizing: false,
+    visibleSplitSide: true,
+    isHidePane: true
+  });
+  const container = (0, _react.useRef)();
+  const splitter = (0, _react.useRef)();
+  const getSecondaryPaneSize = (containerRect, splitterRect, clientPosition, offsetMouse) => {
+    let totalSize = vertical ? containerRect.height : containerRect.width;
+    let splitterSize = vertical ? splitterRect.height : splitterRect.width;
+    let offset = vertical ? clientPosition.top - containerRect.top : clientPosition.left - containerRect.left;
+    if (offsetMouse) {
+      offset -= splitterSize / 2;
+    }
+    if (offset < 0) {
+      offset = 0;
+    } else if (offset > totalSize - splitterSize) {
+      offset = totalSize - splitterSize;
+    }
+    let secondaryPaneSize;
+    secondaryPaneSize = primaryIndex === 1 ? offset : totalSize - splitterSize - offset;
+    let primaryPaneSize = totalSize - splitterSize - secondaryPaneSize;
+    if (percentage) {
+      secondaryPaneSize = secondaryPaneSize * 100 / totalSize;
+      primaryPaneSize = primaryPaneSize * 100 / totalSize;
+      splitterSize = splitterSize * 100 / totalSize;
+      totalSize = 100;
+    }
+    if (primaryPaneSize < primaryMinSize) {
+      secondaryPaneSize = Math.max(secondaryPaneSize - (primaryMinSize - primaryPaneSize), 0);
+    } else if (secondaryPaneSize < secondaryMinSize) {
+      secondaryPaneSize = Math.min(totalSize - splitterSize - primaryMinSize, secondaryMinSize);
+    }
+    return secondaryPaneSize;
+  };
+  const clearSelection = () => {
+    const docuemntSelection = Selection;
+    if (document.createRange() && nodeParameter) {
+      const range = document.createRange();
+      range.collapse();
+      range.selectNode(nodeParameter);
+    } else if (window.getSelection) {
+      const selection = window.getSelection();
+      if (selection && selection.empty) {
+        selection.empty();
+      } else if (selection && selection.removeAllRanges) {
+        selection.removeAllRanges();
+      }
+    } else if (docuemntSelection) {
+      docuemntSelection.empty();
+    }
+  };
+  const handleResize = () => {
+    if (container.current && splitter.current && !percentage) {
+      const containerRect = container.current.getBoundingClientRect();
+      const splitterRect = splitter.current.getBoundingClientRect();
+      const secondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
+        left: splitterRect.left,
+        top: splitterRect.top
+      }, false);
+      setState(_objectSpread(_objectSpread({}, state), {}, {
+        secondaryPaneSize
+      }));
+    }
+  };
+  const handleMouseMove = e => {
+    if (container.current && splitter.current && state.resizing) {
+      const containerRect = container.current.getBoundingClientRect();
+      const splitterRect = splitter.current.getBoundingClientRect();
+      const secondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
+        left: e.clientX,
+        top: e.clientY
+      }, true);
+      clearSelection();
+      setState(_objectSpread(_objectSpread({}, state), {}, {
+        secondaryPaneSize
+      }));
+    }
+  };
+  const handleSplitterMouseDown = () => {
+    clearSelection();
+    setState(_objectSpread(_objectSpread({}, state), {}, {
+      resizing: true
+    }));
+  };
+  const expandAndCollapseSide = event => {
+    const keyCode = event.keyCode || event.which;
+    const secondaryPaneValue = secondaryInitialSize;
+    const arrow = {
+      left: 37,
+      up: 38,
+      right: 39,
+      down: 40
+    };
+    const {
+      isHidePane,
+      visibleSplitSide
+    } = state;
+    if (event.ctrlKey) {
+      setState(_objectSpread(_objectSpread({}, state), {}, {
+        visibleSplitSide: false
+      }));
+      switch (keyCode) {
+        case arrow.left:
+          if (isHidePane) {
+            setState(_objectSpread(_objectSpread({}, state), {}, {
+              visibleSplitSide: !visibleSplitSide,
+              secondaryPaneSize: 100,
+              isHidePane: false
+            }));
+          } else if (state.secondaryPaneSize) {
+            setState(_objectSpread(_objectSpread({}, state), {}, {
+              visibleSplitSide: !visibleSplitSide,
+              secondaryPaneSize: secondaryPaneValue,
+              isHidePane: true
+            }));
+          }
+          break;
+        case arrow.right:
+          if (isHidePane) {
+            setState(_objectSpread(_objectSpread({}, state), {}, {
+              visibleSplitSide: !visibleSplitSide,
+              secondaryPaneSize: 0,
+              isHidePane: false
+            }));
+          } else {
+            setState(_objectSpread(_objectSpread({}, state), {}, {
+              visibleSplitSide: !visibleSplitSide,
+              secondaryPaneSize: secondaryPaneValue,
+              isHidePane: true
+            }));
+          }
+          break;
+        case arrow.up:
+          if (isHidePane) {
+            setState(_objectSpread(_objectSpread({}, state), {}, {
+              visibleSplitSide: !visibleSplitSide,
+              secondaryPaneSize: 100,
+              isHidePane: false
+            }));
+          } else {
+            setState(_objectSpread(_objectSpread({}, state), {}, {
+              visibleSplitSide: !visibleSplitSide,
+              secondaryPaneSize: secondaryPaneValue,
+              isHidePane: true
+            }));
+          }
+          break;
+        case arrow.down:
+          if (isHidePane) {
+            setState(_objectSpread(_objectSpread({}, state), {}, {
+              visibleSplitSide: !visibleSplitSide,
+              secondaryPaneSize: 0,
+              isHidePane: false
+            }));
+          } else {
+            setState(_objectSpread(_objectSpread({}, state), {}, {
+              visibleSplitSide: !visibleSplitSide,
+              secondaryPaneSize: secondaryPaneValue,
+              isHidePane: true
+            }));
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  };
+  (0, _react.useEffect)(() => {
+    let secondaryPaneSize;
+    window.addEventListener('resize', handleResize);
+    if (hotKey) document.addEventListener('keyup', expandAndCollapseSide);
+    if (secondaryInitialSize) {
+      secondaryPaneSize = secondaryInitialSize;
+    } else if (container.current && splitter.current) {
+      const containerRect = container.current.getBoundingClientRect();
+      const splitterRect = splitter.current.getBoundingClientRect();
+      secondaryPaneSize = getSecondaryPaneSize(containerRect, splitterRect, {
+        left: containerRect.left + (containerRect.width - splitterRect.width) / 2,
+        top: containerRect.top + (containerRect.height - splitterRect.height) / 2
+      }, false);
+    }
+    secondaryPaneSize = secondaryPaneSize;
+    // TODO: Ao revisar este componente, encontrar solução melhor
+    setState(_objectSpread(_objectSpread({}, state), {}, {
+      secondaryPaneSize
+    }));
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (hotKey) document.removeEventListener('keyup', expandAndCollapseSide);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (onSecondaryPaneSizeChange) onSecondaryPaneSizeChange(state.secondaryPaneSize);
+  }, [state.secondaryPaneSize]);
+  (0, _react.useEffect)(() => {
+    if (state.resizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+    }
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [state.resizing]);
+  const getChildContext = () => ({
+    size: state.secondaryPaneSize,
+    percentage,
+    vertical,
+    primary: children[1] && false
+  });
+  const {
+    resizing,
+    visibleSplitSide
+  } = state;
+  let containerClasses = 'split-component';
+  if (customClass) {
+    containerClasses += ` ${customClass}`;
+  }
+  if (vertical) {
+    containerClasses += ' splitter-layout-vertical';
+  }
+  if (resizing) {
+    containerClasses += ' layout-changing';
+  }
+  return /*#__PURE__*/_react.default.createElement(_helpers.default.Provider, {
+    value: getChildContext()
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: containerClasses,
+    style: style,
+    ref: r => {
+      container.current = r;
+    }
+  }, hideSplitSideOnToggleClick === 'primary' ? visibleSplitSide && children[0] : children[0], /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    onKeyPress: undefined,
+    tabIndex: -1,
+    className: "layout-splitter",
+    ref: r => {
+      splitter.current = r;
+    },
+    onMouseUp: () => setState(_objectSpread(_objectSpread({}, state), {}, {
+      resizing: false
+    })),
+    onMouseDown: () => {
+      handleSplitterMouseDown();
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "button",
+    tabIndex: -1,
+    onDoubleClick: () => state.secondaryPaneSize === 100 ? setState(_objectSpread(_objectSpread({}, state), {}, {
+      secondaryPaneSize: 50,
+      resizing: false
+    })) : setState(_objectSpread(_objectSpread({}, state), {}, {
+      secondaryPaneSize: 100,
+      resizing: false
+    })),
+    className: vertical ? 'toggler-vertical' : 'toggler-horizontal'
+  })), hideSplitSideOnToggleClick === 'secondary' ? visibleSplitSide && children[1] : children[1]));
+};
+var _default = exports.default = Split;

package/lib/split/SplitSide.d.ts

@@ -0,0 +1,6 @@
+import { ISplitSideProps } from './types.js';
+import 'react';
+
+declare const SplitSide: ({ primary, children, customClass, style }: ISplitSideProps) => JSX.Element;
+
+export { SplitSide as default };

package/lib/split/SplitSide.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = _interopRequireDefault(require("./helpers"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SplitSide = _ref => {
+  let {
+    primary,
+    children,
+    customClass,
+    style
+  } = _ref;
+  const {
+    size,
+    percentage,
+    vertical
+  } = (0, _react.useContext)(_helpers.default);
+  const sizeSplitSide = size || 0;
+  const unit = percentage ? '%' : 'px';
+  let classes = 'layout-pane';
+  const splitSideStyle = {};
+  if (!primary) {
+    if (vertical) {
+      splitSideStyle.height = `${sizeSplitSide}${unit}`;
+    } else {
+      splitSideStyle.width = `${sizeSplitSide}${unit}`;
+    }
+  } else {
+    classes += ' layout-pane-primary';
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: `${classes} ${customClass}`,
+    style: Object.assign({}, splitSideStyle, style)
+  }, children);
+};
+var _default = exports.default = SplitSide;

package/lib/split/helpers.d.ts

@@ -0,0 +1,10 @@
+import React__default from 'react';
+
+type ISplitContext = {
+    size?: number;
+    percentage?: number | string;
+    vertical?: boolean;
+};
+declare const SplitContext: React__default.Context<ISplitContext>;
+
+export { ISplitContext, SplitContext as default };

package/lib/split/helpers.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SplitContext = /*#__PURE__*/_react.default.createContext({});
+var _default = exports.default = SplitContext;