@activecollab/components 1.0.11 → 1.0.15

package/dist/index.js

@@ -1106,7 +1106,7 @@
   var StyledMonth = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledMonth",
     componentId: "sc-1owijsg-3"
-  })(["width:26%;transition-duration:0.3s;", " ", " ", " ", ""], {
+  })(["width:26%;transition-duration:0.3s;", " ", " ", " ", " ", ""], {
     "margin": "auto",
     "cursor": "pointer",
     "borderRadius": "1rem",
@@ -1118,9 +1118,11 @@
       "color": "var(--color-theme-100)"
     });
   }, function (props) {
-    return props.$isCurrent && styled.css(["", ""], {
+    return props.$isCurrent && !props.$isSelected && styled.css(["", ""], {
       "color": "var(--color-primary)"
     });
+  }, function (props) {
+    return props.$isCurrent && props.$isSelected && styled.css(["color:var(--color-theme-100);"]);
   }, function (props) {
     return props.$isCurrentQuarter && styled.css(["background-color:var(--color-primary-300);"]);
   });
@@ -1138,7 +1140,7 @@
   var StyledYearMonthPickerNavBarItem = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledYearMonthPickerNavBarItem",
     componentId: "sc-1owijsg-6"
-  })(["", " transition-duration:0.3s;&:hover{background-color:var(--color-primary-300);border-radius:15px;}"], {
+  })(["", " transition-duration:0.3s;margin-top:1px;display:inline-block;height:24px;&:hover{background-color:var(--color-primary-300);border-radius:15px;}"], {
     "paddingLeft": "1rem",
     "paddingRight": "1rem",
     "cursor": "pointer"
@@ -1872,6 +1874,7 @@
         _ref$position = _ref.position,
         position = _ref$position === void 0 ? "bottom-start" : _ref$position,
         target = _ref.target,
+        className = _ref.className,
         menuClassName = _ref.menuClassName,
         popperClassName = _ref.popperClassName,
         backgroundElementClass = _ref.backgroundElementClass,
@@ -1933,7 +1936,7 @@
       className: popperClassName,
       tabIndex: -1
     }, /*#__PURE__*/React__default["default"].createElement(StyledMenu$1, {
-      className: classnames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName),
+      className: classnames__default["default"]("c-simple-menu__paper", "c-simple-menu__".concat(mode), menuClassName, className),
       $mode: mode,
       onMouseDown: onMenuClick
     }, /*#__PURE__*/React__default["default"].createElement(MenuContextProvider, {
@@ -1990,7 +1993,7 @@
   var StyledButton = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledButton",
     componentId: "sc-1v8h7mt-0"
-  })(["", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:auto;height:auto;border:none;height:32px;transition:all 0.3s ease;", " svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
+  })(["", " ", " color:var(--color-theme-700);margin:0;padding:0;background:none;width:100%;height:auto;border:none;height:30px;transition:all 0.3s ease;", " svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}"], FontStyle, BoxSizingStyle, {
     "position": "relative",
     "WebkitFontSmoothing": "antialiased",
     "MozOsxFontSmoothing": "grayscale",
@@ -2027,7 +2030,7 @@
   var StyledDiv = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledDiv",
     componentId: "sc-1v8h7mt-4"
-  })(["", " ", " ", " height:32px;transition:all 0.3s ease;padding:0 16px;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
+  })(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
     return props.$isTargetable && styled.css(["", ""], {
       "pointerEvents": "none"
     });
@@ -8363,10 +8366,10 @@
     componentId: "sc-1jkx994-2"
   })([".modal-header{padding:16px 30px;h1{margin:0;font-size:16px;}}.modal-body{padding:10px 30px;}.modal-divider{border-top:1px solid var(--border-primary);height:1px;}.modal-footer{padding:16px 30px;}"]);
   StyledConfirmDialog.displayName = "StyledConfirmDialog";
-  var StyledSelectDateDatePicker = styled__default["default"](DatePicker).withConfig({
+  var StyledSelectDateDatePicker = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSelectDateDatePicker",
     componentId: "sc-1jkx994-3"
-  })(["", ""], {
+  })(["", " color:red;"], {
     "paddingTop": "1rem",
     "paddingBottom": "0.5rem"
   });
@@ -8457,7 +8460,7 @@
       onKeyDown: handleOnKeyDown,
       tabIndex: -1,
       className: "date-picker-form"
-    }, /*#__PURE__*/React__default["default"].createElement(StyledSelectDateDatePicker, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledSelectDateDatePicker, null, /*#__PURE__*/React__default["default"].createElement(DatePicker, {
       month: month,
       onMonthChange: onMonthChange,
       onChange: onChange,
@@ -8469,7 +8472,7 @@
       modifiers: modifiers,
       renderDay: renderDay,
       localeUtils: MomentLocaleUtils__default["default"]
-    }), mode === "atomic" || !dateRequired ? /*#__PURE__*/React__default["default"].createElement(StyledSelectDateFooter, {
+    })), mode === "atomic" || !dateRequired ? /*#__PURE__*/React__default["default"].createElement(StyledSelectDateFooter, {
       className: "date-picker-footer",
       $mode: mode
     }, mode === "atomic" ? /*#__PURE__*/React__default["default"].createElement(StyledSelectDateButtons, {
@@ -9008,17 +9011,18 @@
   };
   Fade.displayName = "Fade";
 
+  var _excluded$3 = ["in", "children", "style", "timeout", "initialDirection"];
   var Slide = function Slide(_ref) {
     var _ref$in = _ref.in,
         inProp = _ref$in === void 0 ? false : _ref$in,
-        onEnter = _ref.onEnter,
-        onExited = _ref.onExited,
         children = _ref.children,
         style = _ref.style,
         _ref$timeout = _ref.timeout,
         timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
         _ref$initialDirection = _ref.initialDirection,
-        initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection;
+        initialDirection = _ref$initialDirection === void 0 ? "left" : _ref$initialDirection,
+        rest = _objectWithoutProperties(_ref, _excluded$3);
+
     var directionSign;
 
     switch (initialDirection) {
@@ -9058,13 +9062,10 @@
         transform: "translate(".concat(directionSign, ")")
       }
     };
-    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
-      appear: true,
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, _extends({
       in: inProp,
-      timeout: timeout,
-      onEnter: onEnter,
-      onExited: onExited
-    }, function (state) {
+      timeout: timeout
+    }, rest), function (state) {
       return /*#__PURE__*/React.cloneElement(children, {
         style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
           visibility: state === "exited" && !inProp ? "hidden" : undefined
@@ -9074,29 +9075,46 @@
   };
   Slide.displayName = "Slide";
 
-  var StyledSlideLeftRightTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
-    displayName: "Styles__StyledSlideLeftRightTransition",
-    componentId: "sc-ewkpq8-0"
-  })(["", " ", ""], function (props) {
-    return props.$direction === "left" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(-100%);transition:all 200ms ease;}"]);
-  }, function (props) {
-    return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
-  });
-  StyledSlideLeftRightTransition.displayName = "StyledSlideLeftRightTransition";
-
-  var _excluded$3 = ["children", "direction"];
   var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
-    var children = _ref.children,
+    var _ref$in = _ref.in,
+        inProp = _ref$in === void 0 ? false : _ref$in,
         _ref$direction = _ref.direction,
         direction = _ref$direction === void 0 ? "left" : _ref$direction,
-        props = _objectWithoutProperties(_ref, _excluded$3);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledSlideLeftRightTransition, _extends({
-      timeout: 200,
-      classNames: "c-slide",
-      unmountOnExit: true,
-      $direction: direction
-    }, props), children);
+        onEnter = _ref.onEnter,
+        onExited = _ref.onExited,
+        _ref$timeout = _ref.timeout,
+        timeout = _ref$timeout === void 0 ? 200 : _ref$timeout,
+        children = _ref.children,
+        style = _ref.style;
+    var transitionStyles = {
+      entering: {
+        position: "absolute",
+        transform: direction === "left" ? "translateX(100%)" : "translateX(-100%)"
+      },
+      entered: {
+        transform: "translateX(0%)",
+        transition: "all ".concat(timeout, "ms ease")
+      },
+      exiting: {
+        position: "absolute"
+      },
+      exited: {
+        transform: direction === "left" ? "translateX(-100%)" : "translateX(100%)",
+        transition: "all ".concat(timeout, "ms ease")
+      }
+    };
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
+      in: inProp,
+      timeout: 0,
+      onEnter: onEnter,
+      onExited: onExited
+    }, function (state) {
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: _objectSpread2(_objectSpread2(_objectSpread2({
+          visibility: state === "exited" && !inProp ? "hidden" : undefined
+        }, transitionStyles[state]), style), children.props.style)
+      });
+    });
   };
   SlideLeftRightTransition.displayName = "SlideLeftRightTransition";