@activecollab/components 2.0.228 → 2.0.230

package/dist/index.js

@@ -621,7 +621,9 @@
     yellowWarning: {
       name: "Yellow warning",
       color: "#FFCC6B"
-    },
+    }
+  };
+  var aiColors = {
     aiGradient: {
       name: "AI Gradient",
       color: "linear-gradient(135deg, #4da2ed, #9f69e5, #ec43d8, #f72222)",
@@ -19571,7 +19573,7 @@
     componentId: "sc-uvsz9l-4"
   })(["display:flex;justify-content:center;"]);
 
-  var _excluded$B = ["mode", "selected", "min", "max", "onChange", "step", "size", "className", "placeholder", "triggerMode", "disabled", "invalid", "disableVirtualization"];
+  var _excluded$B = ["mode", "selected", "min", "max", "onChange", "step", "size", "className", "placeholder", "triggerMode", "disabled", "invalid", "enableVirtualization", "addCustomTimeLabel"];
   nlp__default["default"].plugin(plg__default["default"]);
   var StyledInputTimeWrapper = styled__default["default"].div.withConfig({
     displayName: "InputTime__StyledInputTimeWrapper",
@@ -19579,7 +19581,8 @@
   })(["max-width:176px;flex:1;& .c-combo-box--list{min-width:176px;}"]);
   var renderOption$1 = function renderOption(option) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      id: option.id
+      id: option.id,
+      "data-testid": "time-option-".concat(option.id)
     }, option.name);
   };
   var InputTime = function InputTime(_ref) {
@@ -19599,12 +19602,19 @@
       triggerMode = _ref.triggerMode,
       disabled = _ref.disabled,
       invalid = _ref.invalid,
-      disableVirtualization = _ref.disableVirtualization,
+      _ref$enableVirtualiza = _ref.enableVirtualization,
+      enableVirtualization = _ref$enableVirtualiza === void 0 ? false : _ref$enableVirtualiza,
+      _ref$addCustomTimeLab = _ref.addCustomTimeLabel,
+      addCustomTimeLabel = _ref$addCustomTimeLab === void 0 ? "Add" : _ref$addCustomTimeLab,
       rest = _objectWithoutProperties(_ref, _excluded$B);
     var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
+    var _useState3 = React.useState(undefined),
+      _useState4 = _slicedToArray(_useState3, 2),
+      search = _useState4[0],
+      setSearch = _useState4[1];
     var generateTimeOptions = function generateTimeOptions() {
       var minTime = moment__default$1["default"](isValidTime(min) ? min : "00:00", "HH:mm");
       var maxTime = moment__default$1["default"](isValidTime(max) ? max : "23:45", "HH:mm");
@@ -19621,15 +19631,22 @@
         return moment__default$1["default"](option.id, "HH:mm").isSameOrAfter(minTime) && moment__default$1["default"](option.id, "HH:mm").isSameOrBefore(maxTime);
       });
     };
-    var timeOptions = generateTimeOptions();
-    var isValidDefaultSelected = defaultSelected ? timeOptions.some(function (opt) {
-      return opt.id === defaultSelected;
-    }) : false;
-    var _useState3 = React.useState(isValidDefaultSelected ? defaultSelected : undefined),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selected = _useState4[0],
-      setSelected = _useState4[1];
+    var _useState5 = React.useState(generateTimeOptions()),
+      _useState6 = _slicedToArray(_useState5, 2),
+      timeOptions = _useState6[0],
+      setTimeOptions = _useState6[1];
+    var isInOptions = React.useCallback(function (option) {
+      return timeOptions.some(function (opt) {
+        return opt.id === option;
+      });
+    }, [timeOptions]);
+    var isValidDefaultSelected = defaultSelected ? isInOptions(defaultSelected) : false;
+    var _useState7 = React.useState(isValidDefaultSelected ? defaultSelected : undefined),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selected = _useState8[0],
+      setSelected = _useState8[1];
     var handleInputChange = React.useCallback(function (text) {
+      setSearch(text);
       if (/\d{1,2}:\d{2}/.test(text.trim())) {
         return;
       }
@@ -19646,6 +19663,27 @@
         }
       }
     }, [onChange, selected, timeOptions]);
+    var handleEmptyAction = function handleEmptyAction(newTime) {
+      var time = String(newTime);
+      if (isValidTime(time)) {
+        var newOption = {
+          id: time,
+          name: mode === "12" ? moment__default$1["default"](time, "HH:mm").format("hh:mm A") : time
+        };
+        var newOptions = [...timeOptions];
+        var index = newOptions.findIndex(function (option) {
+          return moment__default$1["default"](option.id, "HH:mm") > moment__default$1["default"](time, "HH:mm");
+        });
+        if (index === -1) {
+          newOptions.push(newOption);
+        } else {
+          newOptions.splice(index, 0, newOption);
+        }
+        setTimeOptions(newOptions);
+        onChange === null || onChange === void 0 || onChange(time);
+        setSelected(time);
+      }
+    };
     var handleChange = function handleChange(e) {
       setSelected(e);
       onChange === null || onChange === void 0 || onChange(e);
@@ -19672,6 +19710,9 @@
       })) setSelected(defaultSelected);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [defaultSelected, timeOptions]);
+    var isValid = function isValid(time) {
+      return !isInOptions(time) && isValidTime(time);
+    };
     return /*#__PURE__*/React__default["default"].createElement(StyledInputTimeWrapper, {
       className: classNames__default["default"]("c-input-time", className)
     }, /*#__PURE__*/React__default["default"].createElement(ComboBox, _extends({}, rest, {
@@ -19682,6 +19723,8 @@
       keepSameOptionsOrder: true,
       onInputChange: handleInputChange,
       onChange: handleChange,
+      handleEmptyAction: handleEmptyAction,
+      emptyValue: isValid(search) ? "".concat(addCustomTimeLabel, " ").concat(search) : undefined,
       forceCloseMenu: true,
       placeholder: placeholder,
       renderOption: renderOption$1,
@@ -19692,7 +19735,7 @@
       triggerMode: triggerMode,
       disabled: disabled,
       invalid: invalid,
-      disableVirtualization: disableVirtualization
+      disableVirtualization: !enableVirtualization
     })));
   };
 
@@ -23869,7 +23912,7 @@
       note: colors$1.yellowWarning.color,
       default: colors$1.blueSky.color,
       neutral: colors$1.gray.color,
-      ai: colors$1.aiGradient.color
+      ai: aiColors.aiGradient.color
     };
 
     // https://davidwalsh.name/hex-opacity
@@ -24410,6 +24453,7 @@
   exports._CommandPalette = _CommandPalette;
   exports._Dialog = _Dialog;
   exports._List = _List;
+  exports.aiColors = aiColors;
   exports.colors = colors$1;
   exports.formatCurrency = formatCurrency;
   exports.formatHours = formatHours;