@taikai/rocket-kit 3.0.8 → 3.0.9

package/dist/organisms/horizontal-nav/index.d.ts

@@ -1,9 +1,3 @@
 import React from 'react';
-export interface HorizontalNavInterface {
-    className?: string;
-    customColor?: string;
-    items: any;
-    startsOpen?: boolean;
-}
-declare const HorizontalNav: (props: HorizontalNavInterface) => React.JSX.Element;
-export default HorizontalNav;
+import { HorizontalNavInterface } from './types';
+export default function HorizontalNav(props: HorizontalNavInterface): React.JSX.Element;

package/dist/organisms/horizontal-nav/types.d.ts

@@ -0,0 +1,10 @@
+export interface ItemInterface {
+    icon?: string;
+    label: string;
+    url: string;
+    active?: boolean;
+}
+export interface HorizontalNavInterface {
+    id?: string;
+    items: ItemInterface[];
+}

package/dist/rocket-kit.cjs.development.css

@@ -0,0 +1,97 @@
+.styles-module_wrapper__Q2-ac {
+  position: relative;
+  height: 5rem; /* 80px */
+  display: flex;
+  align-items: center;
+}
+
+.styles-module_wrapper__Q2-ac > div {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+.styles-module_wrapper__Q2-ac > div::-webkit-scrollbar {
+  display: none;
+}
+
+.styles-module_wrapper__Q2-ac ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.styles-module_wrapper__Q2-ac ul li:not(:last-child) {
+  margin-right: 0.625rem; /* 10px */
+}
+
+.styles-module_wrapper__Q2-ac ul li:last-child {
+  margin-right: 0.0625rem; /* 1px */
+}
+
+.styles-module_wrapper__Q2-ac ul li a {
+  display: flex;
+  align-items: center;
+  padding: 0.625rem; /* 10px */
+  color: var(--black);
+  text-transform: capitalize;
+  text-decoration: none;
+  white-space: nowrap;
+  transition-duration: var(--transitionDurationDefault);
+}
+
+.styles-module_wrapper__Q2-ac ul li a svg {
+  margin-right: 0.3125rem; /* 5px */
+  width: auto;
+  height: 1.5rem; /* 24px */
+  min-width: 1.5rem; /* 24px */
+  fill: var(--grey200);
+  transition-duration: var(--transitionDurationDefault);
+}
+
+.styles-module_wrapper__Q2-ac ul li a:hover {
+  color: var(--purple500);
+}
+
+.styles-module_wrapper__Q2-ac ul li a:hover svg {
+  fill: var(--purple500);
+}
+
+.styles-module_wrapper__Q2-ac ul li.styles-module_active__0DuQB {
+  font-weight: var(--fontWeightSemiBold);
+}
+
+.styles-module_wrapper__Q2-ac ul li.styles-module_active__0DuQB a {
+  color: var(--purple500);
+  pointer-events: none;
+}
+
+.styles-module_wrapper__Q2-ac ul li.styles-module_active__0DuQB a svg {
+  fill: var(--purple500);
+}
+
+.styles-module_wrapper__Q2-ac button {
+  position: absolute;
+  top: 0;
+  border-radius: 0;
+  height: 100%;
+  border-style: solid;
+  border-color: var(--grey150);
+}
+
+.styles-module_wrapper__Q2-ac button:hover {
+  background-color: var(--white);
+}
+
+.styles-module_wrapper__Q2-ac button.styles-module_back__AE3bY {
+  left: 0;
+  border-right-width: 0.0625rem; /* 1px */
+}
+
+.styles-module_wrapper__Q2-ac button.styles-module_forward__sOwh3 {
+  right: 0;
+  border-left-width: 0.0625rem; /* 1px */
+}

package/dist/rocket-kit.cjs.development.js

@@ -17,6 +17,7 @@ var ReactPlayer = _interopDefault(require('react-player'));
 var uuid = require('uuid');
 var reactBeautifulDnd = require('react-beautiful-dnd');
 var ReactPaginate = _interopDefault(require('react-paginate'));
+var reactIntersectionObserver = require('react-intersection-observer');
 var throttle = _interopDefault(require('lodash.throttle'));
 var ReactDOM = _interopDefault(require('react-dom'));
 var Tabs = _interopDefault(require('react-responsive-tabs'));
@@ -5405,80 +5406,77 @@ const FieldWidthButton = ({
   })));
 };
 
-const Wrapper$f = /*#__PURE__*/_styled__default.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__*/polished.rem('10px'), /*#__PURE__*/polished.rem('10px'), colors.black, misc.transitionDuration, /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.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__default.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__*/polished.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__*/polished.rem('15px'));
-
-const HorizontalNav = props => {
-  const [showMore, setShowMore] = React.useState(false);
-  const moreMenu = React.useRef(null);
-  const visibleMenuRef = React.useRef(null);
+var styles = {"wrapper":"styles-module_wrapper__Q2-ac","active":"styles-module_active__0DuQB","back":"styles-module_back__AE3bY","forward":"styles-module_forward__sOwh3"};
+
+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);
-  React.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__default.createElement(Wrapper$f, {
-    ref: ref,
-    className: className,
-    customColor: customColor
+  const [showBackButton, setShowBackButton] = React.useState(false);
+  const [showForwardButton, setShowForwardButton] = React.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__default.createElement("div", {
+    className: styles.wrapper
+  }, showBackButton && /*#__PURE__*/React__default.createElement(Button, {
+    className: styles.back,
+    variant: "solid",
+    color: "white",
+    txtColor: "black",
+    icon: "caret-left",
+    action: back
+  }), /*#__PURE__*/React__default.createElement("div", {
+    id: id
   }, /*#__PURE__*/React__default.createElement("ul", {
-    className: "menu",
-    ref: visibleMenuRef
-  }, items), /*#__PURE__*/React__default.createElement(More, {
-    className: showMore ? 'hide' : '',
-    ref: moreMenu
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    variant: "text",
-    color: "dark",
-    icon: "menuVert",
-    action: () => {
-      setIsVisible(!isVisible);
+    className: "menu"
+  }, items.map((item, index) =>
+  /*#__PURE__*/
+  // @ts-ignore
+  React__default.createElement(reactIntersectionObserver.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__default.createElement("ul", {
-    className: isVisible ? 'more is-open' : 'more'
-  })));
-};
+  }, /*#__PURE__*/React__default.createElement("a", {
+    href: item.url
+  }, item.icon && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: item.icon
+  }), item.label))))), showForwardButton && /*#__PURE__*/React__default.createElement(Button, {
+    className: styles.forward,
+    variant: "solid",
+    color: "white",
+    txtColor: "black",
+    icon: "caret-right",
+    action: forward
+  }));
+}
 
 const ModalOverlay = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__ModalOverlay",
@@ -5521,7 +5519,7 @@ const Modal = props => {
       return;
     }
   }, []);
-  return isShowing ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ModalOverlay, {
+  return isShowing ? ( /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ModalOverlay, {
     zIndex: zIndex
   }), /*#__PURE__*/React__default.createElement(ModalWrapper, {
     "aria-modal": true,
@@ -5543,7 +5541,7 @@ const Modal = props => {
   })), children, footer && /*#__PURE__*/React__default.createElement(ModalFooter, {
     closeAction: hide,
     closeValue: closeValue
-  })))), document.body) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  })))), document.body)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
 const slideInLeft = _styled.keyframes`
@@ -5611,7 +5609,7 @@ const ModalDrawer = props => {
     }
     return;
   }, []);
-  return isShowing ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ModalOverlay$1, {
+  return isShowing ? ( /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ModalOverlay$1, {
     zIndex: zIndex
   }), /*#__PURE__*/React__default.createElement(ModalWrapper$1, {
     "aria-modal": true,
@@ -5624,10 +5622,10 @@ const ModalDrawer = props => {
   }, /*#__PURE__*/React__default.createElement(ModalHeader$1, null, title && /*#__PURE__*/React__default.createElement("h2", null, title)), /*#__PURE__*/React__default.createElement(ModalContent, null, children), !footerHidden && (footer ? footer : /*#__PURE__*/React__default.createElement(ModalFooter, {
     closeAction: hide,
     closeValue: closeValue
-  }))))), document.body) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  }))))), document.body)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
-const Wrapper$g = _styled__default.div`
+const Wrapper$f = _styled__default.div`
   div {
     width: 100%;
     height: 100%;
@@ -5790,12 +5788,12 @@ const LoadingState = props => {
         className: "subtitle"
       }), paragraphs));
   }
-  return /*#__PURE__*/React__default.createElement(Wrapper$g, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$f, {
     type: type
   }, loadingType);
 };
 
-const Wrapper$h = _styled__default.div`
+const Wrapper$g = _styled__default.div`
   .tab {
     border-color: ${field.borderColor};
 
@@ -5973,7 +5971,7 @@ const TabsPanel = props => {
       getContent: () => tab.renderer
     }));
   };
-  return /*#__PURE__*/React__default.createElement(Wrapper$h, null, /*#__PURE__*/React__default.createElement(Tabs, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$g, null, /*#__PURE__*/React__default.createElement(Tabs, {
     transform: false,
     unmountOnExit: unmountOnExit,
     selectedTabKey: selectedTabKey,
@@ -5983,7 +5981,7 @@ const TabsPanel = props => {
   }));
 };
 
-const Wrapper$i = _styled__default.div`
+const Wrapper$h = _styled__default.div`
   display: flex;
   flex-direction: column;
 `;
@@ -6003,7 +6001,7 @@ const TabsPanel$1 = props => {
     className = 'grid-container',
     children
   } = props;
-  return /*#__PURE__*/React__default.createElement(Wrapper$i, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$h, {
     className: className
   }, children);
 };