@activecollab/components 2.0.179 → 2.0.181

package/dist/index.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('styled-components'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('date-fns'), require('react-day-picker'), require('moment-timezone'), require('lodash.debounce'), require('react-custom-scrollbars-2'), require('country-explorer'), require('compromise'), require('compromise-dates')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'styled-components', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'date-fns', 'react-day-picker', 'moment-timezone', 'lodash.debounce', 'react-custom-scrollbars-2', 'country-explorer', 'compromise', 'compromise-dates'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.classNames, global.styled, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.PopperJS, global.reactTransitionGroup, global.moment, global.DateFns, global.DayPicker, global["moment-timezone"], global.debounce, global.reactCustomScrollbars, global.countryExplorer, global.compromise, global.compromiseDates));
-})(this, (function (exports, React, classNames, styled, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, dateFns, reactDayPicker, moment$1, debounce, reactCustomScrollbars2, countryExplorer, nlp, plg) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('styled-components'), require('resize-observer-polyfill'), require('react-focus-lock'), require('react-remove-scroll'), require('react-dom'), require('@popperjs/core'), require('react-transition-group'), require('moment'), require('date-fns'), require('react-day-picker'), require('moment-timezone'), require('react-custom-scrollbars-2'), require('country-explorer'), require('compromise'), require('compromise-dates')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', 'styled-components', 'resize-observer-polyfill', 'react-focus-lock', 'react-remove-scroll', 'react-dom', '@popperjs/core', 'react-transition-group', 'moment', 'date-fns', 'react-day-picker', 'moment-timezone', 'react-custom-scrollbars-2', 'country-explorer', 'compromise', 'compromise-dates'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.components = {}, global.React, global.classNames, global.styled, global.ResizeObserver, global.FocusLock, global.reactRemoveScroll, global.ReactDOM, global.PopperJS, global.reactTransitionGroup, global.moment, global.DateFns, global.DayPicker, global["moment-timezone"], global.reactCustomScrollbars, global.countryExplorer, global.compromise, global.compromiseDates));
+})(this, (function (exports, React, classNames, styled, ResizeObserver, FocusLock, reactRemoveScroll, ReactDOM, core, reactTransitionGroup, moment, dateFns, reactDayPicker, moment$1, reactCustomScrollbars2, countryExplorer, nlp, plg) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -14,7 +14,6 @@
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var moment__default$1 = /*#__PURE__*/_interopDefaultLegacy(moment$1);
-  var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var nlp__default = /*#__PURE__*/_interopDefaultLegacy(nlp);
   var plg__default = /*#__PURE__*/_interopDefaultLegacy(plg);
 
@@ -13606,7 +13605,7 @@
   var StyledNav = styled__default["default"].nav.withConfig({
     displayName: "Styles__StyledNav",
     componentId: "sc-1khiypw-0"
-  })(["", " height:100%;overflow:clip visible;", " ", " ", " ", ""], {
+  })(["", " height:100%;width:100%;overflow:clip visible;", " ", " ", " ", ""], {
     "display": "flex"
   }, function (props) {
     return props.$align === "left" && styled.css(["", ""], {
@@ -15677,75 +15676,76 @@
   Select.displayName = "Select";
 
   var Nav = function Nav(_ref) {
+    var _dimensions$width, _childDimensions$widt;
     var children = _ref.children,
       _ref$alignment = _ref.alignment,
       alignment = _ref$alignment === void 0 ? "left" : _ref$alignment,
       onSelect = _ref.onSelect,
-      onMoreOptionSelect = _ref.onMoreOptionSelect,
       className = _ref.className,
       _ref$role = _ref.role,
       role = _ref$role === void 0 ? "bold" : _ref$role,
-      moreLabel = _ref.moreLabel,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "inline" : _ref$type;
+      targetId = _ref.targetId;
     var _useState = React.useState(0),
       _useState2 = _slicedToArray(_useState, 2),
       active = _useState2[0],
       setActive = _useState2[1];
-    var _useState3 = React.useState([]),
+    var _useState3 = React.useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      visibleTabIndexes = _useState4[0],
-      setVisibleTabIndexes = _useState4[1];
-    var _useState5 = React.useState(false),
+      moreOpened = _useState4[0],
+      setMoreOpened = _useState4[1];
+    var _useState5 = React.useState("inline"),
       _useState6 = _slicedToArray(_useState5, 2),
-      measuringRender = _useState6[0],
-      setMeasuringRender = _useState6[1];
-    var _useState7 = React.useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      moreVisible = _useState8[0],
-      setMoreVisible = _useState8[1];
-    var _useState9 = React.useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      renderNavAsSelect = _useState10[0],
-      setRenderNavAsSelect = _useState10[1];
-    var _useState11 = React.useState([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      options = _useState12[0],
-      setOptions = _useState12[1];
-    var _useState13 = React.useState(false),
-      _useState14 = _slicedToArray(_useState13, 2),
-      moreOpened = _useState14[0],
-      setMoreOpened = _useState14[1];
-    var _useState15 = React.useState(false),
-      _useState16 = _slicedToArray(_useState15, 2),
-      isMounted = _useState16[0],
-      setIsMounted = _useState16[1];
+      type = _useState6[0],
+      setType = _useState6[1];
+    var setMoreOpen = React.useCallback(function () {
+      return setMoreOpened(true);
+    }, []);
+    var setMoreClose = React.useCallback(function () {
+      return setMoreOpened(false);
+    }, []);
     var navItemNames = React.useMemo(function () {
-      return children.map(function (item) {
-        return item.props.name;
-      });
+      return children ? React.Children.toArray(children).map(function (item) {
+        var _item$props;
+        return item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.name;
+      }) : [];
     }, [children]);
     var allOptions = React.useMemo(function () {
-      return navItemNames.map(function (name, index) {
+      return navItemNames === null || navItemNames === void 0 ? void 0 : navItemNames.map(function (name, index) {
         return {
           id: index,
           name: name
         };
       });
     }, [navItemNames]);
-
-    // REFS
     var navRef = React.useRef(null);
-    var navItemsRefs = React.useRef({});
-    var moreItemRef = React.useRef(null);
+    var wrapRef = React.useRef(null);
+    var dimensions = useResizeObserver$1(wrapRef);
+    var childDimensions = useResizeObserver$1(navRef);
+    var parentWidth = (_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : 0;
+    var childWidth = (_childDimensions$widt = childDimensions === null || childDimensions === void 0 ? void 0 : childDimensions.width) !== null && _childDimensions$widt !== void 0 ? _childDimensions$widt : 0;
+    var _useState7 = React.useState(childWidth),
+      _useState8 = _slicedToArray(_useState7, 2),
+      childrenWidth = _useState8[0],
+      setChildrenWidth = _useState8[1];
+    React.useLayoutEffect(function () {
+      if (type === "inline") setChildrenWidth(childWidth);
+    }, [childWidth, type]);
     var onClick = React.useCallback(function (e) {
+      if (e.metaKey || e.ctrlKey) {
+        return;
+      }
       if (e.target && e.currentTarget.dataset.index && !e.currentTarget.dataset.disabled) {
         var _index = Number(e.currentTarget.dataset.index);
         setActive(_index);
         if (onSelect) {
           onSelect(_index);
         }
-        setMeasuringRender(true);
+      }
+    }, [onSelect]);
+    var onMoreOptionClick = React.useCallback(function (id) {
+      setActive(id);
+      if (onSelect) {
+        onSelect(id);
       }
     }, [onSelect]);
     React.useMemo(function () {
@@ -15755,190 +15755,54 @@
         }
       });
     }, [children]);
-    React.useLayoutEffect(function () {
-      if (type === "inline" && measuringRender && isMounted) {
-        var _navRef$current;
-        var containerWidth = ((_navRef$current = navRef.current) === null || _navRef$current === void 0 ? void 0 : _navRef$current.offsetWidth) || 0;
-        var itemsWidth = Object.values(navItemsRefs.current).reduce(function (acc, item) {
-          var itemEl = item;
-          return acc + (itemEl ? itemEl.offsetWidth : 0);
-        }, 0);
-
-        // all tabs are visible
-        if (containerWidth >= itemsWidth) {
-          setVisibleTabIndexes(Array.from(navItemNames.keys()));
-          setMoreVisible(false);
-          setRenderNavAsSelect(false);
-          return setMeasuringRender(false);
-        }
-        setMoreVisible(true);
-        if (moreVisible) {
-          var _moreItemRef$current;
-          var moreItemWidth = ((_moreItemRef$current = moreItemRef.current) === null || _moreItemRef$current === void 0 ? void 0 : _moreItemRef$current.offsetWidth) || 0;
-          var firstItemWidth = navItemsRefs.current[0].offsetWidth;
-
-          // collapse Nav to Select, there is no enough room
-          if (containerWidth < moreItemWidth + firstItemWidth) {
-            setVisibleTabIndexes([]);
-            var _options = navItemNames.map(function (name, index) {
-              return {
-                id: index,
-                name: name
-              };
-            });
-            setOptions(_options);
-            setRenderNavAsSelect(true);
-            setMoreVisible(false);
-            return setMeasuringRender(false);
-          }
-
-          // item(s) + More...
-          var visible = [];
-          var allWidth = 0;
-          Object.values(navItemsRefs.current).forEach(function (item, index) {
-            var liItem = item;
-            allWidth += liItem.offsetWidth;
-            if (moreItemWidth + allWidth <= containerWidth) {
-              visible.push(index);
-            }
-          });
-          setVisibleTabIndexes(visible);
-          var _options2 = navItemNames.map(function (name, index) {
-            return {
-              id: index,
-              name: name
-            };
-          }).filter(function (item) {
-            return !visible.includes(item.id);
-          });
-          setOptions(_options2);
-          setRenderNavAsSelect(false);
-          setMeasuringRender(false);
-        }
-      }
-    }, [children, isMounted, measuringRender, moreVisible, navItemNames, type, visibleTabIndexes]);
-    React.useEffect(function () {
-      if (type === "inline") {
-        var handleResize = debounce__default["default"](function () {
-          setMeasuringRender(true);
-        }, 300);
-        window.addEventListener("resize", handleResize);
-        return function () {
-          window.removeEventListener("resize", handleResize);
-        };
-      }
-    }, [type]);
-
-    // we are using observer to solve the problem of the initial rendering
-    React.useEffect(function () {
-      if (type === "inline" && navRef.current) {
-        var resizeObserver = new ResizeObserver__default["default"](function (entries) {
-          for (var entry of entries) {
-            var contentRect = entry.contentRect;
-            var _contentRect$width = contentRect.width,
-              width = _contentRect$width === void 0 ? 0 : _contentRect$width;
-            if (width > 0) {
-              setMeasuringRender(true);
-            }
-          }
-        });
-        resizeObserver.observe(navRef.current);
-        setTimeout(function () {
-          if (navRef.current) {
-            resizeObserver.unobserve(navRef.current);
-          }
-        }, 2000);
-        return function () {
-          resizeObserver.disconnect();
-        };
-      }
-    }, [type]);
-    React.useEffect(function () {
-      setMeasuringRender(true);
-      setIsMounted(true);
-    }, []);
-    var visibleTabs = React.useMemo(function () {
-      var tabs = React.Children.toArray(children);
-      if (measuringRender || !isMounted) {
-        return tabs;
-      } else {
-        return tabs.filter(function (child, index) {
-          return visibleTabIndexes.includes(index);
-        });
-      }
-    }, [children, isMounted, measuringRender, visibleTabIndexes]);
-    var onMoreOptionClick = React.useCallback(function (id) {
-      setActive(id);
-      if (onMoreOptionSelect) {
-        onMoreOptionSelect(id);
-      }
-      setMeasuringRender(true);
-    }, [onMoreOptionSelect]);
     var navAsSelect = React.useMemo(function () {
-      return /*#__PURE__*/React__default["default"].createElement(StyledNavAsSelect, null, /*#__PURE__*/React__default["default"].createElement("span", null, navItemNames[active]), /*#__PURE__*/React__default["default"].createElement(ExpandSingle, {
+      return /*#__PURE__*/React__default["default"].createElement(StyledNavAsSelect, {
+        id: targetId
+      }, /*#__PURE__*/React__default["default"].createElement("span", null, navItemNames[active]), /*#__PURE__*/React__default["default"].createElement(ExpandSingle, {
         expanded: moreOpened,
         fill: "currentColor"
       }));
-    }, [active, moreOpened, navItemNames]);
-    var setMoreOpen = React.useCallback(function () {
-      return setMoreOpened(true);
-    }, []);
-    var setMoreClose = React.useCallback(function () {
-      return setMoreOpened(false);
-    }, []);
+    }, [active, moreOpened, navItemNames, targetId]);
+    React.useEffect(function () {
+      if (!navRef.current || !wrapRef.current) return;
+      if (childrenWidth >= parentWidth) {
+        setType("dropdown");
+      } else {
+        setType("inline");
+      }
+    }, [childrenWidth, parentWidth]);
+    if (!children) return;
     return /*#__PURE__*/React__default["default"].createElement(StyledNav, {
       className: classNames__default["default"]("c-nav", className),
       $align: alignment,
-      $role: role
+      $role: role,
+      ref: wrapRef
     }, /*#__PURE__*/React__default["default"].createElement(StyledNavList, {
       ref: navRef
-    }, type === "inline" && visibleTabs.map(function (child, index) {
+    }, type === "inline" && React.Children.toArray(children).map(function (child, index) {
       var element = child;
       return /*#__PURE__*/React.cloneElement(element, {
         active: index === active,
         role,
-        ref: function ref(el) {
-          navItemsRefs.current[index] = el;
-        },
         onClick,
         "data-index": index,
         "data-disabled": element.props.disabled
       });
-    }), type === "inline" && moreVisible ? /*#__PURE__*/React__default["default"].createElement(StyledNavListItemMore, {
-      ref: moreItemRef,
-      name: "More",
-      active: visibleTabIndexes.indexOf(active) === -1,
-      role: role
-    }, /*#__PURE__*/React__default["default"].createElement(Select, {
-      selected: active,
-      target: /*#__PURE__*/React__default["default"].createElement(StyledNavAsMoreTarget, {
-        $role: role
-      }, moreLabel),
-      disabledInternalSort: true,
-      onChange: onMoreOptionClick,
-      options: options,
-      type: "single",
-      mode: "normal",
-      forceCloseMenu: true,
-      disableSearch: true,
-      keepSameOptionsOrder: true,
-      onSelectOpen: setMoreOpen,
-      onSelectClose: setMoreClose
-    })) : null, type === "dropdown" || renderNavAsSelect ? /*#__PURE__*/React__default["default"].createElement(StyledNavListItemMore, {
+    }), type === "dropdown" ? /*#__PURE__*/React__default["default"].createElement(StyledNavListItemMore, {
       name: "More",
-      active: visibleTabIndexes.indexOf(active) === -1,
+      active: Array.from(navItemNames.keys()).indexOf(active) === -1,
       role: role
     }, /*#__PURE__*/React__default["default"].createElement(Select, {
       selected: active,
       target: navAsSelect,
       disabledInternalSort: true,
-      onChange: onMoreOptionClick,
       options: allOptions,
       type: "single",
       mode: "normal",
       forceCloseMenu: true,
       disableSearch: true,
       keepSameOptionsOrder: true,
+      onChange: onMoreOptionClick,
       onSelectOpen: setMoreOpen,
       onSelectClose: setMoreClose
     })) : null));