@activecollab/components 2.0.117 → 2.0.119

package/dist/index.js

@@ -767,38 +767,23 @@
   };
   var useResizeObserver$1 = useResizeObserver;
 
-  // export const decimalToHours = (decimal: string) => {
-  //   // we round it on two decimals first, to eliminate quirks, eg, 5.99999999 will return 5:59 instead of 6:00
-  //   decimal = parseFloat(decimal).toFixed(2);
-  //   decimal = decimal + "";
-  //   let hours;
-  //   let minutes_decimal;
-  //
-  //   if (decimal.indexOf(".") < 0) {
-  //     hours = parseInt(decimal);
-  //     minutes_decimal = 0;
-  //   } else {
-  //     hours = parseInt(decimal.substring(0, decimal.indexOf(".")));
-  //     minutes_decimal = decimal.substring(decimal.indexOf(".") + 1);
-  //     minutes_decimal = minutes_decimal.substring(0, 2);
-  //     if (minutes_decimal.length === 1) {
-  //       minutes_decimal += "0";
-  //     } // if
-  //     minutes_decimal = parseInt(minutes_decimal);
-  //   } // if
-  //
-  //   const minutes = Math.round((minutes_decimal / 100) * 60);
-  //
-  //   if (hours < 10) {
-  //     hours = `0${hours}`;
-  //   }
-  //   return {
-  //     hours: hours,
-  //     minutes: minutes,
-  //   };
-  // };
-
-  var decimalToHours = function decimalToHours(num) {
+  /**
+   * @function formatHours
+   * @description
+   * Formats a decimal number representing hours into a formatted string (HH:MM).
+   * The input can be a number, string, or undefined. The function handles various formats
+   * and can optionally add a leading zero to the hours component.
+   *
+   * @param {number | string | undefined} num - The input representing the hours, which can be in decimal format, a time string, or undefined.
+   * @param {boolean} [withLeadingZeroHours=false] - Whether to add a leading zero to the hours part of the output.
+   *
+   * @returns {string} - A formatted time string in HH:MM format.
+   *
+   * @example
+   * formatHours(1.5) // "1:30"
+   * formatHours("3.5", true) // "03:30"
+   */
+  var formatHours = function formatHours(num) {
     var withLeadingZeroHours = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (!num) {
       return "";
@@ -848,6 +833,75 @@
     var minutes_formatted = Math.round(parseInt(minutes, 10) / 100 * 60);
     return "".concat(hours, ":").concat(withLeadingZero(minutes_formatted));
   };
+
+  /**
+   * @function decimalToHours
+   * @deprecated
+   * @description
+   * Converts a decimal number representing hours into a formatted string (HH:MM).
+   * The input can be a number, string, or undefined. The function handles various formats
+   * and can optionally add a leading zero to the hours component.
+   *
+   * @param {number | string | undefined} num - The input representing the hours, which can be in decimal format, a time string, or undefined.
+   * @param {boolean} [withLeadingZeroHours=false] - Whether to add a leading zero to the hours part of the output.
+   *
+   * @returns {string} - A formatted time string in HH:MM format.
+   *
+   * @example
+   * decimalToHours(1.5) // "1:30"
+   * decimalToHours("3.5", true) // "03:30"
+   */
+  var decimalToHours = function decimalToHours(num) {
+    var withLeadingZeroHours = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    console.warn("Deprecated. Please use formatHours from @activecollab/components.");
+    if (!num) {
+      return "";
+    }
+    if (typeof num === "string" && !num) {
+      return withLeadingZeroHours ? "00:00" : "0:00";
+    }
+    if (typeof num === "string" && num.indexOf(":") >= 0) {
+      //eslint-disable-next-line
+      var _num$split3 = num.split(":"),
+        _num$split4 = _slicedToArray(_num$split3, 2),
+        _hours = _num$split4[0],
+        _minutes = _num$split4[1];
+      if (_minutes && _minutes.length === 1 && Number(_minutes) < 10) {
+        _minutes = "".concat(Number(_minutes), "0");
+      }
+      if (_hours && _minutes) {
+        if (withLeadingZeroHours) {
+          return "".concat(withLeadingZero(_hours), ":").concat(_minutes);
+        }
+        return "".concat(_hours, ":").concat(_minutes);
+      } else if (!_hours && _minutes) {
+        return withLeadingZeroHours ? "00:".concat(_minutes) : "0:".concat(_minutes);
+      } else if (!_minutes && _hours) {
+        return withLeadingZeroHours ? "".concat(withLeadingZero(_hours), ":00") : "".concat(_hours, ":00");
+      } else {
+        return withLeadingZeroHours ? "00:00" : "0:00";
+      }
+    }
+    if (typeof num === "string" && num.indexOf(",") >= 0) {
+      num = num.replace(",", ".");
+    }
+    var input = typeof num === "string" ? parseFloat(num) : num;
+    if (!isDecimal(input)) {
+      if (withLeadingZeroHours) {
+        return "".concat(withLeadingZero(input), ":00");
+      }
+      return "".concat(input, ":00");
+    }
+    var decimal = input.toFixed(2);
+    var time = decimal.toString().split(".");
+    var hours = time[0];
+    if (withLeadingZeroHours) {
+      hours = withLeadingZero(hours);
+    }
+    var minutes = time[1];
+    var minutes_formatted = Math.round(parseInt(minutes, 10) / 100 * 60);
+    return "".concat(hours, ":").concat(withLeadingZero(minutes_formatted));
+  };
   var withLeadingZero = function withLeadingZero(num) {
     var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
     var s = "".concat(num);
@@ -1405,6 +1459,43 @@
   ArrowRefreshIcon.displayName = "ArrowRefreshIcon";
   var ArrowRefreshIcon$1 = ArrowRefreshIcon;
 
+  /**
+   * @component ArrowRestoreIcon
+   * @description
+   *
+   * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+   * The Icon component is
+   * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+   *
+   *
+   * @example
+   * return (
+   *   <ArrowRestoreIcon className="mr-2" />
+   * )
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+   * @see
+   * https://design.activecollab.com/docs/foundations/icons
+   */
+  var ArrowRestoreIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 24,
+      height: 24,
+      "data-testid": "ArrowRestoreIcon",
+      fill: "var(--color-theme-600)",
+      focusable: false,
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      d: "M17.026 19.796a9 9 0 01-12.294-3.294l-1.732 1 .653-4.87 4.543 1.87-1.732 1a7 7 0 102.562-9.563 6.944 6.944 0 00-3.248 4.254l-1.94-.52a8.896 8.896 0 014.188-5.466 9 9 0 019 15.589z",
+      clipRule: "evenodd"
+    }));
+  });
+  ArrowRestoreIcon.displayName = "ArrowRestoreIcon";
+  var ArrowRestoreIcon$1 = ArrowRestoreIcon;
+
   /**
    * @component ArrowRightIcon
    * @description
@@ -13561,13 +13652,13 @@
       onChange = _ref.onChange,
       onClick = _ref.onClick;
     var _useState = React.useState(function () {
-        return decimalToHours(value, withLeadingZero);
+        return formatHours(value, withLeadingZero);
       }),
       _useState2 = _slicedToArray(_useState, 2),
       currentValue = _useState2[0],
       setCurrentValue = _useState2[1];
     var _useState3 = React.useState(function () {
-        return decimalToHours(value, withLeadingZero);
+        return formatHours(value, withLeadingZero);
       }),
       _useState4 = _slicedToArray(_useState3, 2),
       prevValue = _useState4[0],
@@ -13578,7 +13669,7 @@
         setCurrentValue(prevValue);
       } else {
         if (e.target.value.trim().length > 0 && prevValue !== e.target.value) {
-          var _value = decimalToHours(e.target.value, withLeadingZero);
+          var _value = formatHours(e.target.value, withLeadingZero);
           setPrevValue(_value);
           setCurrentValue(_value);
           typeof onSave === "function" && onSave(e);
@@ -16549,7 +16640,7 @@
   var StyledSelectTrigger = styled__default["default"](Trigger).withConfig({
     displayName: "Styles__StyledSelectTrigger",
     componentId: "sc-9799p2-0"
-  })(["display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:transparent;border:none;", " ", " ", " ", " ", " ", " ", ";"], function (_ref) {
+  })(["display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;width:300px;transition:border-color 0.3s ease;background-color:transparent;border:none;", " ", " ", " ", " ", " ", " ", ";", ";"], function (_ref) {
     var $mode = _ref.$mode;
     return $mode === "outlined" && styled.css(["border:1px solid var(--color-theme-500);background-color:var(--input-background-color);"]);
   }, function (_ref2) {
@@ -16577,13 +16668,16 @@
   }, function (_ref7) {
     var $size = _ref7.$size;
     return $size === "big" && styled.css(["height:40px;border-radius:var(--ac-br-8);"]);
+  }, function (_ref8) {
+    var $size = _ref8.$size;
+    return $size === "biggest" && styled.css(["height:48px;border-radius:var(--ac-br-8);"]);
   });
   StyledSelectTrigger.displayName = "StyledSelectTrigger";
   var StyledCaretIcon = styled__default["default"](CollapseExpandSingleIcon$1).withConfig({
     displayName: "Styles__StyledCaretIcon",
     componentId: "sc-9799p2-1"
-  })(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (_ref8) {
-    var $open = _ref8.$open;
+  })(["margin-left:8px;flex-shrink:0;transition:transform 200ms ease;", ""], function (_ref9) {
+    var $open = _ref9.$open;
     return !$open && styled.css(["transform:rotate(180deg);"]);
   });
   StyledCaretIcon.displayName = "StyledCaretIcon";
@@ -16604,6 +16698,15 @@
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
       rest = _objectWithoutProperties(_ref, _excluded$n);
+    var variant = React.useMemo(function () {
+      if (size === "big") {
+        return "Body 1";
+      }
+      if (size === "biggest") {
+        return "Header 2";
+      }
+      return "Body 2";
+    }, [size]);
     return /*#__PURE__*/React__default["default"].createElement(StyledSelectTrigger, _extends({
       ref: ref,
       role: "button",
@@ -16616,7 +16719,8 @@
       as: "div",
       overflow: "truncate",
       whitespace: "no-wrap",
-      variant: size === "small" || size === "regular" ? "Body 2" : "Body 1",
+      variant: variant,
+      weight: size === "biggest" ? "bold" : "regular",
       color: mode === "flat" && invalid ? "alert" : undefined
     }, typographyProps), children), endAdornment ? endAdornment : /*#__PURE__*/React__default["default"].createElement(StyledCaretIcon, {
       $open: open
@@ -18073,7 +18177,7 @@
     React.useEffect(function () {
       var _value;
       if (defaultValue !== undefined) {
-        _value = decimalToHours(defaultValue, withLeadingZero);
+        _value = formatHours(defaultValue, withLeadingZero);
       }
       setCurrentValue(function (prevState) {
         if (prevState !== _value) {
@@ -19659,6 +19763,7 @@
   exports.ArrowLeftBoxIcon = ArrowLeftBoxIcon$1;
   exports.ArrowLeftIcon = ArrowLeftIcon$1;
   exports.ArrowRefreshIcon = ArrowRefreshIcon$1;
+  exports.ArrowRestoreIcon = ArrowRestoreIcon$1;
   exports.ArrowRightIcon = ArrowRightIcon$1;
   exports.ArrowUpIcon = ArrowUpIcon$1;
   exports.ArrowUpLongIcon = ArrowUpLongIcon$1;
@@ -19963,6 +20068,7 @@
   exports.colors = colors$1;
   exports.decimalToHours = decimalToHours;
   exports.formatCurrency = formatCurrency;
+  exports.formatHours = formatHours;
   exports.formatNumber = formatNumber;
   exports.getNumberFromString = getNumberFromString;
   exports.isOptionGroup = isOptionGroup;