@taikai/rocket-kit 3.0.8 → 3.0.10-beta.1

package/dist/rocket-kit.esm.js

@@ -8,6 +8,7 @@ import ReactPlayer from 'react-player';
 import { v4 } from 'uuid';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import ReactPaginate from 'react-paginate';
+import { InView } from 'react-intersection-observer';
 import throttle from 'lodash.throttle';
 import ReactDOM from 'react-dom';
 import Tabs from 'react-responsive-tabs';
@@ -5396,80 +5397,106 @@ const FieldWidthButton = ({
   })));
 };
 
-const Wrapper$f = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__Wrapper",
-  componentId: "sc-znznmm-0"
-})(["display:flex;align-items:center;ul.menu{width:0;animation:showAnimation 1s forwards;animation-delay:0.5s;overflow:hidden;}@keyframes showAnimation{0%{width:0%;}100%{width:100%;}}ul{margin:0;max-width:max-content;padding:0;&.menu{display:flex;li:not(:last-child){margin-right:", ";}}li{position:relative;list-style:none;a{display:flex;align-items:center;padding:", ";color:", ";text-transform:capitalize;text-decoration:none;white-space:nowrap;transition-duration:", ";svg{margin-right:", ";width:auto;height:", ";min-width:", ";fill:", ";transition-duration:", ";}&:hover{color:", ";svg{fill:", ";}}}&.active{font-weight:", ";a{color:", ";pointer-events:none;svg{fill:", ";}}}}}"], /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('10px'), colors.black, misc.transitionDuration, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), colors.grey200, misc.transitionDuration, props => props.customColor ? props.customColor : colors.purple500, props => props.customColor ? props.customColor : colors.purple500, typography.medium, props => props.customColor ? props.customColor : colors.purple500, props => props.customColor ? props.customColor : colors.purple500);
-const More = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__More",
-  componentId: "sc-znznmm-1"
-})(["position:relative;display:none;&.hide{display:initial;}ul{position:absolute;right:0;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";padding:0;-moz-box-shadow:", ";-webkit-box-shadow:", ";box-shadow:", ";z-index:1;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;&.more{display:none;}&.is-open{display:inherit;}li{list-style:none;transition-duration:", ";&:hover{background-color:", ";cursor:pointer;a{color:", ";svg{fill:", ";}}}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}a{width:100%;height:100%;padding:", ";}}}"], field.borderWidth, field.borderColor, field.borderRadius, field.backgroundColor, /*#__PURE__*/rem('5px'), field.boxShadow, field.boxShadow, field.boxShadow, misc.transitionDuration, field.borderColor, colors.black, colors.black, field.borderRadius, field.borderRadius, field.borderRadius, field.borderRadius, /*#__PURE__*/rem('15px'));
-
-const HorizontalNav = props => {
-  const [showMore, setShowMore] = useState(false);
-  const moreMenu = useRef(null);
-  const visibleMenuRef = useRef(null);
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".styles-module_wrapper__Q2-ac {\n  position: relative;\n  height: 5rem; /* 80px */\n  display: flex;\n  align-items: center;\n}\n\n.styles-module_wrapper__Q2-ac > div {\n  display: flex;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n}\n\n.styles-module_wrapper__Q2-ac > div::-webkit-scrollbar {\n  display: none;\n}\n\n.styles-module_wrapper__Q2-ac ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n}\n\n.styles-module_wrapper__Q2-ac ul li:not(:last-child) {\n  margin-right: 0.625rem; /* 10px */\n}\n\n.styles-module_wrapper__Q2-ac ul li:last-child {\n  margin-right: 0.0625rem; /* 1px */\n}\n\n.styles-module_wrapper__Q2-ac ul li a {\n  display: flex;\n  align-items: center;\n  padding: 0.625rem; /* 10px */\n  color: var(--black);\n  text-transform: capitalize;\n  text-decoration: none;\n  white-space: nowrap;\n  transition-duration: var(--transitionDurationDefault);\n}\n\n.styles-module_wrapper__Q2-ac ul li a svg {\n  margin-right: 0.3125rem; /* 5px */\n  width: auto;\n  height: 1.5rem; /* 24px */\n  min-width: 1.5rem; /* 24px */\n  fill: var(--grey200);\n  transition-duration: var(--transitionDurationDefault);\n}\n\n.styles-module_wrapper__Q2-ac ul li a:hover {\n  color: var(--purple500);\n}\n\n.styles-module_wrapper__Q2-ac ul li a:hover svg {\n  fill: var(--purple500);\n}\n\n.styles-module_wrapper__Q2-ac ul li.styles-module_active__0DuQB {\n  font-weight: var(--fontWeightSemiBold);\n}\n\n.styles-module_wrapper__Q2-ac ul li.styles-module_active__0DuQB a {\n  color: var(--purple500);\n  pointer-events: none;\n}\n\n.styles-module_wrapper__Q2-ac ul li.styles-module_active__0DuQB a svg {\n  fill: var(--purple500);\n}\n\n.styles-module_wrapper__Q2-ac button {\n  position: absolute;\n  top: 0;\n  border-radius: 0;\n  height: 100%;\n  border-style: solid;\n  border-color: var(--grey150);\n}\n\n.styles-module_wrapper__Q2-ac button:hover {\n  background-color: var(--white);\n}\n\n.styles-module_wrapper__Q2-ac button.styles-module_back__AE3bY {\n  left: 0;\n  border-right-width: 0.0625rem; /* 1px */\n}\n\n.styles-module_wrapper__Q2-ac button.styles-module_forward__sOwh3 {\n  right: 0;\n  border-left-width: 0.0625rem; /* 1px */\n}\n";
+var styles = {"wrapper":"styles-module_wrapper__Q2-ac","active":"styles-module_active__0DuQB","back":"styles-module_back__AE3bY","forward":"styles-module_forward__sOwh3"};
+styleInject(css_248z);
+
+function scroll(container, direction, speed, distance, step) {
+  let scrollAmount = 0;
+  const slideTimer = setInterval(function () {
+    if (container && direction === 'left') {
+      container.scrollLeft -= step;
+    } else {
+      container ? container.scrollLeft += step : null;
+    }
+    scrollAmount += step;
+    if (scrollAmount >= distance) {
+      window.clearInterval(slideTimer);
+    }
+  }, speed);
+}
+function HorizontalNav(props) {
   const {
-    className = 'horizontal-nav',
-    customColor = '',
-    items,
-    startsOpen = false
+    id = 'horizontal-nav',
+    items
   } = props;
-  const {
-    ref,
-    isVisible,
-    setIsVisible
-  } = useVisible(startsOpen);
-  useEffect(() => {
-    if (!ref || !ref.current) return;
-    const visible = document.querySelector('ul.menu').getElementsByTagName('li');
-    const more = document.querySelector('.more').getElementsByTagName('li');
-    const moreVisibility = () => more.length > 0 ? setShowMore(true) : setShowMore(false);
-    const removeItem = () => {
-      if (visible.length === 1) return;
-      let last = visible[visible.length - 1];
-      document.querySelector('ul.more').prepend(last);
-    };
-    const addItem = () => {
-      if (more.length === 0) return;
-      let first = more[0];
-      document.querySelector('ul.menu').append(first);
-    };
-    const checkOverflow = () => {
-      moreVisibility();
-      for (let i = 0; i < visible.length + 20; i++) {
-        visibleMenuRef.current.scrollWidth + 50 > ref.current.offsetWidth ? removeItem() : addItem();
-      }
-    };
-    checkOverflow();
-    if (typeof window !== 'undefined') {
-      moreVisibility();
-      window.addEventListener('resize', checkOverflow);
-      return () => window.removeEventListener('resize', checkOverflow);
-    }
-    return;
-  }, [ref]);
-  return /*#__PURE__*/React.createElement(Wrapper$f, {
-    ref: ref,
-    className: className,
-    customColor: customColor
+  const [showBackButton, setShowBackButton] = useState(false);
+  const [showForwardButton, setShowForwardButton] = useState(true);
+  const forward = () => {
+    const container = document.getElementById(id);
+    scroll(container, 'right', 10, 200, 10);
+  };
+  const back = () => {
+    const container = document.getElementById(id);
+    scroll(container, 'left', 10, 200, 10);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper
+  }, showBackButton && /*#__PURE__*/React.createElement(Button, {
+    className: styles.back,
+    variant: "solid",
+    color: "white",
+    txtColor: "black",
+    icon: "caret-left",
+    action: back
+  }), /*#__PURE__*/React.createElement("div", {
+    id: id
   }, /*#__PURE__*/React.createElement("ul", {
-    className: "menu",
-    ref: visibleMenuRef
-  }, items), /*#__PURE__*/React.createElement(More, {
-    className: showMore ? 'hide' : '',
-    ref: moreMenu
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "text",
-    color: "dark",
-    icon: "menuVert",
-    action: () => {
-      setIsVisible(!isVisible);
+    className: "menu"
+  }, items.map((item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore
+  React.createElement(InView, {
+    key: index,
+    as: "li",
+    className: item.active ? styles.active : undefined,
+    threshold: 1,
+    onChange: inView => {
+      if (index === 0 && inView) setShowBackButton(false);
+      if (index === 0 && !inView) setShowBackButton(true);
+      if (index === items.length - 1 && inView) setShowForwardButton(false);
+      if (index === items.length - 1 && !inView) setShowForwardButton(true);
     }
-  }), /*#__PURE__*/React.createElement("ul", {
-    className: isVisible ? 'more is-open' : 'more'
-  })));
-};
+  }, /*#__PURE__*/React.createElement("a", {
+    href: item.url
+  }, item.icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: item.icon
+  }), item.label))))), showForwardButton && /*#__PURE__*/React.createElement(Button, {
+    className: styles.forward,
+    variant: "solid",
+    color: "white",
+    txtColor: "black",
+    icon: "caret-right",
+    action: forward
+  }));
+}
 
 const ModalOverlay = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalOverlay",
@@ -5512,7 +5539,7 @@ const Modal = props => {
       return;
     }
   }, []);
-  return isShowing ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalOverlay, {
+  return isShowing ? ( /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalOverlay, {
     zIndex: zIndex
   }), /*#__PURE__*/React.createElement(ModalWrapper, {
     "aria-modal": true,
@@ -5534,7 +5561,7 @@ const Modal = props => {
   })), children, footer && /*#__PURE__*/React.createElement(ModalFooter, {
     closeAction: hide,
     closeValue: closeValue
-  })))), document.body) : /*#__PURE__*/React.createElement(React.Fragment, null);
+  })))), document.body)) : /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 
 const slideInLeft = keyframes`
@@ -5557,7 +5584,7 @@ const ModalWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
 const ModalContainer$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalContainer",
   componentId: "sc-46huls-2"
-})(["position:fixed;right:0;background:", ";width:100%;height:100vh;height:calc(var(--vh,1vh) * 100);display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translateX(100%);animation-name:", ";overflow-y:auto;@media ", "{max-width:", ";padding:", ";}"], colors.white, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
+})(["margin-left:auto;background:", ";width:100%;min-height:100vh;display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translateX(100%);animation-name:", ";@media ", "{max-width:", ";padding:", ";}"], colors.white, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
 const ModalHeader$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalHeader",
   componentId: "sc-46huls-3"
@@ -5602,7 +5629,7 @@ const ModalDrawer = props => {
     }
     return;
   }, []);
-  return isShowing ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalOverlay$1, {
+  return isShowing ? ( /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalOverlay$1, {
     zIndex: zIndex
   }), /*#__PURE__*/React.createElement(ModalWrapper$1, {
     "aria-modal": true,
@@ -5615,10 +5642,10 @@ const ModalDrawer = props => {
   }, /*#__PURE__*/React.createElement(ModalHeader$1, null, title && /*#__PURE__*/React.createElement("h2", null, title)), /*#__PURE__*/React.createElement(ModalContent, null, children), !footerHidden && (footer ? footer : /*#__PURE__*/React.createElement(ModalFooter, {
     closeAction: hide,
     closeValue: closeValue
-  }))))), document.body) : /*#__PURE__*/React.createElement(React.Fragment, null);
+  }))))), document.body)) : /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 
-const Wrapper$g = _styled.div`
+const Wrapper$f = _styled.div`
   div {
     width: 100%;
     height: 100%;
@@ -5781,12 +5808,12 @@ const LoadingState = props => {
         className: "subtitle"
       }), paragraphs));
   }
-  return /*#__PURE__*/React.createElement(Wrapper$g, {
+  return /*#__PURE__*/React.createElement(Wrapper$f, {
     type: type
   }, loadingType);
 };
 
-const Wrapper$h = _styled.div`
+const Wrapper$g = _styled.div`
   .tab {
     border-color: ${field.borderColor};
 
@@ -5964,7 +5991,7 @@ const TabsPanel = props => {
       getContent: () => tab.renderer
     }));
   };
-  return /*#__PURE__*/React.createElement(Wrapper$h, null, /*#__PURE__*/React.createElement(Tabs, {
+  return /*#__PURE__*/React.createElement(Wrapper$g, null, /*#__PURE__*/React.createElement(Tabs, {
     transform: false,
     unmountOnExit: unmountOnExit,
     selectedTabKey: selectedTabKey,
@@ -5974,7 +6001,7 @@ const TabsPanel = props => {
   }));
 };
 
-const Wrapper$i = _styled.div`
+const Wrapper$h = _styled.div`
   display: flex;
   flex-direction: column;
 `;
@@ -5994,7 +6021,7 @@ const TabsPanel$1 = props => {
     className = 'grid-container',
     children
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$i, {
+  return /*#__PURE__*/React.createElement(Wrapper$h, {
     className: className
   }, children);
 };