@activecollab/components 2.0.163 → 2.0.165

package/dist/index.js

@@ -363,11 +363,11 @@
     componentId: "sc-dv1w0m-1"
   })(["", " ", " display:flex;flex-direction:row;align-items:center;cursor:pointer;padding:0 1rem;margin:0.25rem 0;font-size:0.875rem;user-select:none;color:var(--color-theme-900);line-height:28px;> svg:first-child{margin-right:8px;}&:hover,&:focus-visible{background-color:var(--color-theme-200);outline:none;}"], BoxSizingStyle, FontStyle);
   StyledListItem.displayName = "StyledListItem";
-  var StyledListSeparator = styled__default["default"].div.withConfig({
+  var StyledListSeparator$1 = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledListSeparator",
     componentId: "sc-dv1w0m-2"
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
-  StyledListSeparator.displayName = "StyledListSeparator";
+  StyledListSeparator$1.displayName = "StyledListSeparator";
 
   var _excluded$1u = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -386,7 +386,7 @@
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded$1t);
-    return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator$1, _extends({
       className: classNames__default["default"]("c-list-separator", className)
     }, props));
   };
@@ -16477,8 +16477,8 @@
     componentId: "sc-1lmb5y-0"
   })(["flex-shrink:0"]);
 
-  var _excluded$B = ["size", "disabled", "value", "onChange"];
-  var options = [{
+  var _excluded$B = ["size", "disabled", "value", "onChange", "scheme"];
+  var defaultOptions = [{
     id: "https://",
     name: "https://"
   }, {
@@ -16492,9 +16492,28 @@
       _ref$value = _ref.value,
       defaultValue = _ref$value === void 0 ? "" : _ref$value,
       onChange = _ref.onChange,
+      scheme = _ref.scheme,
       rest = _objectWithoutProperties(_ref, _excluded$B);
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
+    var options = React.useMemo(function () {
+      if (scheme && scheme.length > 0) {
+        if (Array.isArray(scheme)) {
+          return scheme.map(function (i) {
+            return {
+              id: i,
+              name: i
+            };
+          });
+        } else {
+          return [{
+            id: scheme,
+            name: scheme
+          }];
+        }
+      }
+      return defaultOptions;
+    }, [scheme]);
     var _useState = React.useState(options[0].id),
       _useState2 = _slicedToArray(_useState, 2),
       prefix = _useState2[0],
@@ -16543,14 +16562,14 @@
     },
     // eslint-disable-next-line
     [onChange, prefix]);
-    var handleSelectChange = function handleSelectChange(val) {
+    var handleSelectChange = React.useCallback(function (val) {
       setPrefix(val);
       setTimeout(function () {
         var _inputRef$current;
         (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
       }, 200);
       typeof onChange === "function" && onChange(val + value);
-    };
+    }, [onChange, value]);
     var handlePaste = function handlePaste(e) {
       e.preventDefault();
       var paste = e.clipboardData.getData("text");
@@ -16565,6 +16584,29 @@
         onChange(newPrefix + newValue);
       }
     };
+    var startAdornmentComponent = React.useMemo(function () {
+      if (options.length > 1) {
+        return /*#__PURE__*/React__default["default"].createElement(InputSelect, {
+          key: prefix,
+          size: size,
+          onChange: handleSelectChange,
+          options: options,
+          selected: prefix,
+          disabled: disabled
+        });
+      } else {
+        return /*#__PURE__*/React__default["default"].createElement(StyledInputSelectTrigger, {
+          key: prefix,
+          $disabled: disabled,
+          $size: size
+        }, prefix);
+      }
+    }, [disabled, handleSelectChange, options, prefix, size]);
+    React.useEffect(function () {
+      if (options.length > 0) {
+        setPrefix(options[0].id);
+      }
+    }, [options]);
     return /*#__PURE__*/React__default["default"].createElement(Input, _extends({}, rest, {
       ref: handleRef,
       size: size,
@@ -16574,13 +16616,7 @@
       onPaste: handlePaste,
       onChange: handleChange,
       "data-testid": "InputUrl",
-      startAdornment: /*#__PURE__*/React__default["default"].createElement(InputSelect, {
-        size: size,
-        onChange: handleSelectChange,
-        options: options,
-        selected: prefix,
-        disabled: disabled
-      })
+      startAdornment: startAdornmentComponent
     }));
   });
   InputUrl.displayName = "InputUrl";
@@ -16868,13 +16904,15 @@
   var StyledSheetIcons = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSheetIcons",
     componentId: "sc-144eyxd-0"
-  })(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}"]);
+  })(["display:flex;height:0;position:relative;span{position:relative;background-color:var(--page-paper-main);box-shadow:var(--shadow-secondary);cursor:pointer;border-radius:100%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;& > *{height:40px;width:40px;padding:8px;fill:var(--color-theme-600);}}@media (max-width:768px){display:none;}"]);
   StyledSheetIcons.displayName = "StyledSheetIcons";
   var StyledSheetWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledSheetWrapper",
     componentId: "sc-144eyxd-1"
-  })(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, function (props) {
+  })(["", " ", " position:relative;max-width:95vw;display:flex;flex-direction:row;", " ", " ", " ", " ", " ", " ", ""], BoxSizingStyle, FontStyle, function (props) {
     return props.$mode === "stretch" ? styled.css(["margin-top:8px;height:calc(100vh - 16px);width:calc(100vw - 100px);max-width:1000px;", "{flex-direction:column;width:0;height:calc(100vh - 32px);& > *{margin-bottom:8px;animation-fill-mode:both;}span{top:8px;}}"], StyledSheetIcons) : styled.css(["max-height:calc(100vh - 156px);margin-top:126px;margin-bottom:30px;width:540px;flex-direction:column;", "{flex-direction:row-reverse;& > *{margin-left:8px;animation-fill-mode:both;}span{top:-48px;right:8px;}}"], StyledSheetIcons);
+  }, function (props) {
+    return props.$mode === "stretch" && styled.css(["@media (max-width:768px){width:100%;height:100%;}"]);
   }, function (props) {
     return props.$position === "center" && styled.css(["", ""], {
       "marginLeft": "auto",
@@ -16914,10 +16952,12 @@
   var StyledAnimatedSpan = styled__default["default"].span.withConfig({
     displayName: "Styles__StyledAnimatedSpan",
     componentId: "sc-144eyxd-3"
-  })(["background:red;", " ", " ", " ", ""], function (props) {
+  })(["background:red;", " ", " ", " ", " ", ""], function (props) {
     return props.$state === "entering" && styled.css(["opacity:1;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsTop, "".concat(props.$durationIn, "s"), "".concat(props.$durationIn, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0s;"], StyledSheetControlsCenterIn, "".concat(props.$maxDurationIn, "s")));
   }, function (props) {
     return props.$state === "entered" && styled.css(["opacity:1;"]);
+  }, function (props) {
+    return props.$disabled && styled.css(["pointer-events:none;svg{opacity:0.5;}"]);
   }, function (props) {
     return props.$state === "exiting" && styled.css(["opacity:0;", ""], props.$mode === "stretch" ? styled.css(["animation-name:", ";animation-duration:", ";animation-delay:", ";"], StyledSheetControlsBottom, "".concat(props.$durationOut, "s"), "".concat(props.$durationOut, "s")) : styled.css(["animation-name:", ";animation-duration:", ";animation-delay:0;"], StyledSheetControlsCenterOut, "".concat(props.$maxDurationOut, "s")));
   }, function (props) {
@@ -16937,6 +16977,21 @@
     return props.$direction === "right" && styled.css(["&.c-sheet__animation-enter{opacity:0;transform:translateX(100%);}&.c-sheet__animation-enter-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-appear{opacity:0;transform:translateX(100%);}&.c-sheet__animation-appear-active{opacity:1;transform:translateX(0);transition:opacity 400ms,transform 400ms;}&.c-sheet__animation-exit{opacity:1;}&.c-sheet__animation-exit-active{opacity:0;transform:translateX(100%);transition:opacity 200ms,transform 200ms;}"]);
   });
   StyledCssTransition.displayName = "StyledCssTransition";
+  var StyledListSeparator = styled__default["default"](ListSeparator).withConfig({
+    displayName: "Styles__StyledListSeparator",
+    componentId: "sc-144eyxd-5"
+  })(["margin:0;"]);
+  StyledListSeparator.displayName = "StyledListSeparator";
+  var StyledIconsWrapperSmall = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledIconsWrapperSmall",
+    componentId: "sc-144eyxd-6"
+  })(["height:40px;display:flex;gap:8px;padding-left:16px;padding-right:16px;align-items:center;place-content:end;flex-direction:row-reverse;"]);
+  StyledIconsWrapperSmall.displayName = "StyledIconsWrapperSmall";
+  var StyledHeader$1 = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledHeader",
+    componentId: "sc-144eyxd-7"
+  })(["@media (min-width:768px){display:none;}"]);
+  StyledHeader$1.displayName = "StyledHeader";
 
   var _excluded$x = ["children", "onClose", "controls", "open", "animation", "position", "mode", "disableFocusLock", "disableScrollLock", "disableBackgroundColor", "bodyStyle", "bodyClassName", "disableBackgroundClick"];
   var Sheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -16979,7 +17034,7 @@
     }, []);
     var handleExited = React.useCallback(function () {
       setExited(true);
-      typeof onClose === "function" && onClose();
+      onClose === null || onClose === void 0 || onClose();
     }, [onClose]);
     var handleClose = React.useCallback(function () {
       setOpen(false);
@@ -17002,36 +17057,47 @@
       onClose: handleClose,
       disableFocusLock: disableFocusLock,
       disableScrollLock: disableScrollLock
-    }), open ? /*#__PURE__*/React__default["default"].createElement(Overlay, {
+    }), open && /*#__PURE__*/React__default["default"].createElement(Overlay, {
       onClick: handleBackgroundClick,
       disableBackgroundColor: disableBackgroundColor
-    }) : null, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapper, {
       className: classNames__default["default"]("c-sheet__wrapper", bodyClassName),
       style: bodyStyle,
       $position: position,
       $mode: mode
-    }, controls.length ? /*#__PURE__*/React__default["default"].createElement(StyledSheetIcons, null, controls.map(function (item, index) {
-      var maxDurationIn = 4; // max duration 4 for 400ms, shorten .4s
-      var maxDurationOut = 2; // max duration 2 for 200ms, shorten .2s
+    }, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledSheetIcons, null, controls.map(function (_ref2, index) {
+      var IconComponent = _ref2.icon,
+        tooltip = _ref2.tooltip,
+        onClick = _ref2.onClick,
+        disabled = _ref2.disabled,
+        className = _ref2.className;
+      var maxDurationIn = 4;
+      var maxDurationOut = 2;
       var control = index + 1;
-      var durationOut = controls.length > maxDurationOut ? maxDurationOut : maxDurationOut - control;
-      var durationIn = control >= maxDurationIn ? 1 : control;
+      var durationOut = Math.max(0, maxDurationOut - control);
+      var durationIn = Math.min(control, maxDurationIn);
       return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.Transition, {
         appear: true,
         in: open,
         timeout: maxDurationIn * 100,
         key: "c-sheet-control-".concat(index)
       }, function (state) {
-        return /*#__PURE__*/React__default["default"].createElement(StyledAnimatedSpan, {
-          $state: state,
+        return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+          title: tooltip,
+          disable: !tooltip || disabled
+        }, /*#__PURE__*/React__default["default"].createElement(StyledAnimatedSpan, {
+          onClick: onClick,
+          $disabled: disabled,
           $mode: mode,
+          $state: state,
+          className: className,
           $maxDurationIn: maxDurationIn / 10,
           $maxDurationOut: maxDurationOut / 10,
           $durationOut: durationOut / 10,
           $durationIn: durationIn / 10
-        }, item);
+        }, IconComponent));
       });
-    })) : null, /*#__PURE__*/React__default["default"].createElement(StyledCssTransition, {
+    })), /*#__PURE__*/React__default["default"].createElement(StyledCssTransition, {
       appear: true,
       in: open,
       timeout: 400,
@@ -17041,7 +17107,23 @@
       onExited: handleExited
     }, /*#__PURE__*/React__default["default"].createElement(StyledSheetWrapperPaper, {
       paperClass: "c-sheet__wrapper__paper"
-    }, children))));
+    }, controls.length > 0 && /*#__PURE__*/React__default["default"].createElement(StyledHeader$1, null, /*#__PURE__*/React__default["default"].createElement(StyledIconsWrapperSmall, null, controls.map(function (_ref3, index) {
+      var IconComponent = _ref3.icon,
+        tooltip = _ref3.tooltip,
+        onClick = _ref3.onClick,
+        disabled = _ref3.disabled,
+        className = _ref3.className;
+      return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
+        title: tooltip,
+        disable: !tooltip || disabled,
+        key: index
+      }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+        onClick: onClick,
+        disabled: disabled,
+        className: className,
+        variant: "text gray"
+      }, IconComponent));
+    })), /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, null)), children))));
   });
   Sheet.displayName = "Sheet";