@activecollab/components 2.0.196 → 2.0.198

package/dist/esm/utils/types.d.ts

@@ -41,11 +41,12 @@ export interface FormatNumberArgs {
     decimalSeparator?: "," | ".";
     trimDecimals?: boolean;
     decimalSpaces?: number;
-    format?: "long" | "short";
+    format?: FormatType;
 }
 export interface FormatCurrencyArgs extends FormatNumberArgs {
     currencyCode?: string;
     currencyCodePosition?: "right" | "left";
 }
+export type FormatType = "short" | "long";
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,OAAO,CACjB,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAC1E,GAAG,CAAC,wBAAwB,CAAC,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEvE,KAAK,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,eAAe,CACzB,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvC,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IACrC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,aAAa,CAAC,CAAC;AAE7D;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,CACjC,CAAC,SAAS,KAAK,CAAC,WAAW,EAC3B,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC7B,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAEvC;;;GAGG;AACH,MAAM,MAAM,yBAAyB,CACnC,CAAC,SAAS,KAAK,CAAC,WAAW,EAC3B,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC7B,uBAAuB,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IACpD,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AACxC;;;GAGG;AACH,MAAM,MAAM,gCAAgC,CAC1C,CAAC,SAAS,KAAK,CAAC,WAAW,EAC3B,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC7B,yBAAyB,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAEtE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACpC,gBAAgB,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,OAAO,CACjB,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,IAC1E,GAAG,CAAC,wBAAwB,CAAC,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEvE,KAAK,MAAM,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,eAAe,CACzB,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvC,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IACrC,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE,MAAM,aAAa,CAAC,CAAC;AAE7D;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,CACjC,CAAC,SAAS,KAAK,CAAC,WAAW,EAC3B,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC7B,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;AAEvC;;;GAGG;AACH,MAAM,MAAM,yBAAyB,CACnC,CAAC,SAAS,KAAK,CAAC,WAAW,EAC3B,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC7B,uBAAuB,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IACpD,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;AACxC;;;GAGG;AACH,MAAM,MAAM,gCAAgC,CAC1C,CAAC,SAAS,KAAK,CAAC,WAAW,EAC3B,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAC7B,yBAAyB,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC;AAEtE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACpC,gBAAgB,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzC;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC"}

package/dist/esm/utils/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/utils/types.ts"],"sourcesContent":["import React from \"react\";\n\n// Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts\n// A more precise version of just React.ComponentPropsWithoutRef on its own\nexport type PropsOf<\n  C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<unknown>\n> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;\n\ntype AsProp<C extends React.ElementType> = {\n  /**\n   * An override of the default HTML tag.\n   * Can also be another React component.\n   */\n  as?: C;\n};\n\n/**\n * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props\n * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding\n * set of props.\n */\nexport type ExtendableProps<\n  ExtendedProps = Record<string, unknown>,\n  OverrideProps = Record<string, unknown>\n> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;\n\n/**\n * Allows for inheriting the props from the specified element type so that\n * props like children, className & style work, as well as element-specific\n * attributes like aria roles. The component (`C`) must be passed in.\n */\nexport type InheritableElementProps<\n  C extends React.ElementType,\n  Props = Record<string, unknown>\n> = ExtendableProps<PropsOf<C>, Props>;\n\n/**\n * A more sophisticated version of `InheritableElementProps` where\n * the passed in `as` prop will determine which props can be included\n */\nexport type PolymorphicComponentProps<\n  C extends React.ElementType,\n  Props = Record<string, unknown>\n> = InheritableElementProps<C, Props & AsProp<C>>;\n\n/**\n * Utility type to extract the `ref` prop from a polymorphic component\n */\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n/**\n * A wrapper of `PolymorphicComponentProps` that also includes the `ref`\n * prop for the polymorphic component\n */\nexport type PolymorphicComponentPropsWithRef<\n  C extends React.ElementType,\n  Props = Record<string, unknown>\n> = PolymorphicComponentProps<C, Props> & { ref?: PolymorphicRef<C> };\n\nexport interface FormatNumberArgs {\n  value: string | number;\n  thousandSeparator?: \",\" | \".\" | \" \";\n  decimalSeparator?: \",\" | \".\";\n  trimDecimals?: boolean;\n  decimalSpaces?: number;\n  format?: \"long\" | \"short\";\n}\n\nexport interface FormatCurrencyArgs extends FormatNumberArgs {\n  currencyCode?: string;\n  currencyCodePosition?: \"right\" | \"left\";\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/utils/types.ts"],"sourcesContent":["import React from \"react\";\n\n// Source: https://github.com/emotion-js/emotion/blob/master/packages/styled-base/types/helper.d.ts\n// A more precise version of just React.ComponentPropsWithoutRef on its own\nexport type PropsOf<\n  C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<unknown>\n> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithoutRef<C>>;\n\ntype AsProp<C extends React.ElementType> = {\n  /**\n   * An override of the default HTML tag.\n   * Can also be another React component.\n   */\n  as?: C;\n};\n\n/**\n * Allows for extending a set of props (`ExtendedProps`) by an overriding set of props\n * (`OverrideProps`), ensuring that any duplicates are overridden by the overriding\n * set of props.\n */\nexport type ExtendableProps<\n  ExtendedProps = Record<string, unknown>,\n  OverrideProps = Record<string, unknown>\n> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;\n\n/**\n * Allows for inheriting the props from the specified element type so that\n * props like children, className & style work, as well as element-specific\n * attributes like aria roles. The component (`C`) must be passed in.\n */\nexport type InheritableElementProps<\n  C extends React.ElementType,\n  Props = Record<string, unknown>\n> = ExtendableProps<PropsOf<C>, Props>;\n\n/**\n * A more sophisticated version of `InheritableElementProps` where\n * the passed in `as` prop will determine which props can be included\n */\nexport type PolymorphicComponentProps<\n  C extends React.ElementType,\n  Props = Record<string, unknown>\n> = InheritableElementProps<C, Props & AsProp<C>>;\n\n/**\n * Utility type to extract the `ref` prop from a polymorphic component\n */\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n/**\n * A wrapper of `PolymorphicComponentProps` that also includes the `ref`\n * prop for the polymorphic component\n */\nexport type PolymorphicComponentPropsWithRef<\n  C extends React.ElementType,\n  Props = Record<string, unknown>\n> = PolymorphicComponentProps<C, Props> & { ref?: PolymorphicRef<C> };\n\nexport interface FormatNumberArgs {\n  value: string | number;\n  thousandSeparator?: \",\" | \".\" | \" \";\n  decimalSeparator?: \",\" | \".\";\n  trimDecimals?: boolean;\n  decimalSpaces?: number;\n  format?: FormatType;\n}\n\nexport interface FormatCurrencyArgs extends FormatNumberArgs {\n  currencyCode?: string;\n  currencyCodePosition?: \"right\" | \"left\";\n}\n\nexport type FormatType = \"short\" | \"long\";\n"],"mappings":""}

package/dist/index.js

@@ -723,6 +723,19 @@
     }
     return currencyCodePosition === "right" ? "".concat(formattedNum, " ").concat(currencyCode) : "".concat(currencyCode, " ").concat(formattedNum);
   };
+  var parseValueToNumber = function parseValueToNumber(value, thousandSeparator, decimalSeparator) {
+    var stringValue = String(value).trim();
+    if (stringValue.includes(":")) {
+      var _stringValue$split = stringValue.split(":"),
+        _stringValue$split2 = _slicedToArray(_stringValue$split, 2),
+        hoursPart = _stringValue$split2[0],
+        minutesPart = _stringValue$split2[1];
+      var hours = parseFloat(hoursPart) || 0;
+      var minutes = parseFloat(minutesPart) || 0;
+      return hours + minutes / 60;
+    }
+    return +stringValue.replaceAll(thousandSeparator, "").replace(decimalSeparator, ".");
+  };
 
   var validateStopwatchTime = function validateStopwatchTime(value) {
     return /^([0-9]{0,2})?(((:([0-5][0-9])?)|(:[0-5]?))|(\.[0-9]{0,2})|(,[0-9]{0,2}))?$/g.test(value);
@@ -795,29 +808,36 @@
   /**
    * @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.
+   * Formats a decimal number representing hours into a formatted string (HH:MM) or a short form if needed.
+   * The input can be a number, string, or undefined. It handles various formats and can optionally add a
+   * leading zero to the hours component. With the new "format" argument, if set to "short" and the value is
+   * greater than or equal to 1000, it will return a shortened format (e.g., 1K) similar to formatNumber.
    *
-   * @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.
+   * @param {number | string | undefined} num - The input representing the hours.
+   * @param {boolean} [withLeadingZeroHours=false] - Whether to add a leading zero to the hours part.
    * @param {boolean} [trimZeroMinutes=false] - Whether to remove minutes if they are zero.
+   * @param {"long" | "short"} [format="long"] - The format type, either "long" for full numbers or "short" for abbreviated output.
    *
-   * @returns {string} - A formatted time string in HH:MM format.
+   * @returns {string} - A formatted time string or a shortened string.
    *
    * @example
    * formatHours(1.5) // "1:30"
    * formatHours("3.5", true) // "03:30"
+   * formatHours(1500, false, false, "short") // "1K" (using formatNumber)
    */
   var formatHours = function formatHours(num) {
     var withLeadingZeroHours = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var trimZeroMinutes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var format = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "long";
+    // Handle the explicit zero case.
     if (num === 0 || num === "0") {
       return trimZeroMinutes ? "0" : withLeadingZeroHours ? "00:00" : "0:00";
     }
     if (!num) {
       return "";
     }
+
+    // If the input is in colon format, process it as before.
     if (typeof num === "string" && num.indexOf(":") >= 0) {
       // eslint-disable-next-line prefer-const
       var _num$split = num.split(":"),
@@ -841,16 +861,27 @@
       }
       return withLeadingZeroHours ? "00:".concat(_minutes) : "0:".concat(_minutes);
     }
+
+    // Replace comma with dot if needed.
     if (typeof num === "string" && num.indexOf(",") >= 0) {
       num = num.replace(",", ".");
     }
     var input = typeof num === "string" ? parseFloat(num) : num;
+
+    // Use short formatting if specified and the value is >= 1000.
+    if (format === "short" && input >= 1000) {
+      return formatNumber(input, ",", ".", true, 2, "short");
+    }
+
+    // For whole numbers.
     if (!isDecimal(input)) {
       if (trimZeroMinutes) {
         return withLeadingZeroHours ? withLeadingZero(input) : String(Number(input));
       }
       return withLeadingZeroHours ? "".concat(withLeadingZero(input), ":00") : "".concat(input, ":00");
     }
+
+    // Process decimal hours.
     var decimal = input.toFixed(2);
     var time = decimal.toString().split(".");
     var hours = time[0];
@@ -858,11 +889,11 @@
       hours = withLeadingZero(hours);
     }
     var minutes = time[1];
-    var minutes_formatted = Math.round(parseInt(minutes, 10) / 100 * 60);
-    if (trimZeroMinutes && minutes_formatted === 0) {
+    var minutesFormatted = Math.round(parseInt(minutes, 10) / 100 * 60);
+    if (trimZeroMinutes && minutesFormatted === 0) {
       return hours;
     }
-    return "".concat(hours, ":").concat(withLeadingZero(minutes_formatted));
+    return "".concat(hours, ":").concat(withLeadingZero(minutesFormatted));
   };
   var withLeadingZero = function withLeadingZero(num) {
     var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
@@ -14632,7 +14663,8 @@
       validation = _ref$validation === void 0 ? validateNumberInput : _ref$validation,
       min = _ref.min,
       max = _ref.max,
-      onBlur = _ref.onBlur;
+      onBlur = _ref.onBlur,
+      update = _ref.update;
     var isMaxValid = max === undefined || min === undefined || Number(max) >= Number(min);
     if (!isMaxValid) {
       console.warn("Warning: The maximum value is set to be lower than the minimum value. The maximum value will be ignored.");
@@ -14661,19 +14693,19 @@
       _useState8 = _slicedToArray(_useState7, 2),
       unformattedPrevValue = _useState8[0],
       setUnformattedPrevValue = _useState8[1];
+    var _useState9 = React.useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      focused = _useState10[0],
+      setFocused = _useState10[1];
     React.useEffect(function () {
-      if (value !== prevValue && document.activeElement !== (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) {
+      if (value !== prevValue && (!focused || update)) {
         setCurrentValue(formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short"));
         setPrevValue(formatNumber(value, thousandSeparator, decimalSeparator, trimDecimals, decimalLength, disableAbbreviation ? "long" : "short"));
         setUnformattedValue(formatNumber(value, "", decimalSeparator, false, decimalLength, "long"));
         setUnformattedPrevValue(formatNumber(value, "", decimalSeparator, false, decimalLength, "long"));
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [disableAbbreviation, thousandSeparator, decimalSeparator, decimalLength, trimDecimals, value]);
-    var _useState9 = React.useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      focused = _useState10[0],
-      setFocused = _useState10[1];
+    }, [disableAbbreviation, thousandSeparator, decimalSeparator, decimalLength, trimDecimals, value, focused]);
     var escapeRef = React.useRef(false);
     var handleBlur = React.useCallback(function (e) {
       if (escapeRef.current) {
@@ -16170,7 +16202,7 @@
   });
   InputHours.displayName = "InputHours";
 
-  var _excluded$J = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "invalid", "step", "thousandSeparator", "value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "onChange", "onClick", "limit", "placeholder", "trimDecimals", "min", "max", "onBlur"];
+  var _excluded$J = ["decimalLength", "decimalSeparator", "disableAbbreviation", "disabled", "disableMacros", "invalid", "step", "thousandSeparator", "value", "onCancel", "onSave", "onEnterKeyPress", "allowEmptyValue", "onChange", "onClick", "limit", "placeholder", "trimDecimals", "min", "max", "onBlur", "update"];
   var InputNumber = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$decimalLength = _ref.decimalLength,
       decimalLength = _ref$decimalLength === void 0 ? 2 : _ref$decimalLength,
@@ -16200,6 +16232,8 @@
       min = _ref.min,
       max = _ref.max,
       externalOnBlur = _ref.onBlur,
+      _ref$update = _ref.update,
+      update = _ref$update === void 0 ? false : _ref$update,
       rest = _objectWithoutProperties(_ref, _excluded$J);
     var inputRef = React.useRef(null);
     var handleRef = useForkRef(ref, inputRef);
@@ -16221,7 +16255,8 @@
         trimDecimals,
         min,
         max,
-        onBlur: externalOnBlur
+        onBlur: externalOnBlur,
+        update
       }, inputRef),
       value = _useInputNumber.value,
       onBlur = _useInputNumber.onBlur,
@@ -17676,27 +17711,27 @@
       _ref$as = _ref.as,
       as = _ref$as === void 0 ? "span" : _ref$as,
       rest = _objectWithoutProperties(_ref, _excluded$y);
-    var numberValue = +String(value).replaceAll(thousandSeparator, "").replace(decimalSeparator, ".");
-    var formattedValue = formatNumber(numberValue, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, "short");
-    var formattedLongValue = formatHours(numberValue, withLeadingZero, trimZeroMinutes);
-    var showShortVersion = numberValue > 1000;
-    if (format === "short" && showShortVersion) {
+    var numberValue = parseValueToNumber(value, thousandSeparator, decimalSeparator);
+    var shouldDisplayShort = format === "short" && numberValue >= 1000;
+    var longValue = formatHours(numberValue, withLeadingZero, trimZeroMinutes, "long");
+    var shortValue = formatNumber(numberValue, thousandSeparator, decimalSeparator, trimDecimals, decimalSpaces, "short");
+    if (shouldDisplayShort) {
       return /*#__PURE__*/React__default["default"].createElement(Tooltip, {
-        title: formattedLongValue,
+        title: formatHours(numberValue),
         disable: disableTooltip
       }, /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
         as: as,
         variant: variant,
         className: className,
         ref: ref
-      }, rest), formattedValue));
+      }, rest), shortValue));
     }
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       as: as,
       variant: variant,
       className: className,
       ref: ref
-    }, rest), formattedLongValue);
+    }, rest), longValue);
   });
   DisplayHours.displayName = "DisplayHours";