@sproutsocial/racine 24.0.0 → 24.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 24.1.0
+
+### Minor Changes
+
+- 25d94a2: Racine now includes a new Duration component. It is a primitive component used to format durations of time according to our date & time formatting guidelines Additionally, the package includes a formatDuration helper, which can be used to get a stringified version of a duration.
+- bd3fc39: ### Deprecation Notice: Flow Type System
+
+  We are officially deprecating the use of the Flow type system in `@sproutsocial/racine`. This change affects all Flow types used in this library. Flow support will be discontinued entirely on **October 24th**.
+
+  To ensure a smooth transition, please migrate your projects away from Flow types and start using TypeScript as soon as possible.
+
+  If you have any questions or need assistance, feel free to reach out to the team.
+
+  Thank you for your understanding and cooperation as we work towards improving our codebase.
+
 ## 24.0.0
 
 ### Major Changes

package/commonjs/Duration/Duration.js

@@ -0,0 +1,129 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatDuration = exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _lruMemoize = _interopRequireDefault(require("lru-memoize"));
+var _constants = require("../utils/constants");
+var _VisuallyHidden = require("../VisuallyHidden");
+var _constants2 = require("./constants");
+var _styles = require("./styles");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var getDivisionAndRemainder = function getDivisionAndRemainder(numerator, denominator) {
+  return [Math.floor(numerator / denominator), numerator % denominator];
+};
+var _createDurationFormatter = function _createDurationFormatter(locale, unitDisplay) {
+  var timeUnitFormatter = function timeUnitFormatter(locale, unit, unitDisplay) {
+    return Intl.NumberFormat(locale, {
+      style: "unit",
+      unit: unit,
+      unitDisplay: unitDisplay
+    }).format;
+  };
+  var formatDays = timeUnitFormatter(locale, "day", unitDisplay);
+  var formatHours = timeUnitFormatter(locale, "hour", unitDisplay);
+  var formatMinutes = timeUnitFormatter(locale, "minute", unitDisplay);
+  var formatSeconds = timeUnitFormatter(locale, "second", unitDisplay);
+  var formatMilliseconds = timeUnitFormatter(locale, "millisecond", unitDisplay);
+  var formatList = new Intl.ListFormat(locale, {
+    style: "narrow",
+    type: "unit"
+  });
+  return function (milliseconds) {
+    if (milliseconds <= 0) {
+      return formatMilliseconds(0);
+    }
+    var days;
+    var hours;
+    var minutes;
+    var seconds;
+    var _getDivisionAndRemain = getDivisionAndRemainder(milliseconds, 86400000);
+    var _getDivisionAndRemain2 = _slicedToArray(_getDivisionAndRemain, 2);
+    days = _getDivisionAndRemain2[0];
+    milliseconds = _getDivisionAndRemain2[1];
+    var _getDivisionAndRemain3 = getDivisionAndRemainder(milliseconds, 3600000);
+    var _getDivisionAndRemain4 = _slicedToArray(_getDivisionAndRemain3, 2);
+    hours = _getDivisionAndRemain4[0];
+    milliseconds = _getDivisionAndRemain4[1];
+    var _getDivisionAndRemain5 = getDivisionAndRemainder(milliseconds, 60000);
+    var _getDivisionAndRemain6 = _slicedToArray(_getDivisionAndRemain5, 2);
+    minutes = _getDivisionAndRemain6[0];
+    milliseconds = _getDivisionAndRemain6[1];
+    var _getDivisionAndRemain7 = getDivisionAndRemainder(milliseconds, 1000);
+    var _getDivisionAndRemain8 = _slicedToArray(_getDivisionAndRemain7, 2);
+    seconds = _getDivisionAndRemain8[0];
+    milliseconds = _getDivisionAndRemain8[1];
+    var list = [days ? formatDays(days) : null, hours ? formatHours(hours) : null, minutes ? formatMinutes(minutes) : null, seconds ? formatSeconds(seconds) : null, milliseconds ? formatMilliseconds(milliseconds) : null].filter(function (listItem) {
+      return listItem !== null;
+    });
+    return formatList.format(list);
+  };
+};
+
+// Memoize to reduce the energy of creating new instances of Intl.NumberFormat
+var memoizer = (0, _lruMemoize.default)(_constants2.MEMO_CACHE_SIZE, _constants2.COMPARE_OBJECTS);
+var createDurationFormatter = memoizer(_createDurationFormatter);
+var isValidNumber = function isValidNumber(value) {
+  return typeof value === "number" && isFinite(value);
+};
+var getDuration = function getDuration(_ref) {
+  var returnType = _ref.returnType,
+    props = _ref.props;
+  var _props$display = props.display,
+    display = _props$display === void 0 ? "long" : _props$display,
+    invalidMillisecondsLabel = props.invalidMillisecondsLabel,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? "en-US" : _props$locale,
+    _props$milliseconds = props.milliseconds,
+    milliseconds = _props$milliseconds === void 0 ? null : _props$milliseconds,
+    qa = props.qa;
+  var isReturnTypeString = returnType === "string";
+  if (!isValidNumber(milliseconds)) {
+    return isReturnTypeString ? _constants.EM_DASH : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [invalidMillisecondsLabel ?
+      /*#__PURE__*/
+      // Give screen readers something useful to read off + hide the em dash
+      (0, _jsxRuntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+        children: invalidMillisecondsLabel
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, _objectSpread(_objectSpread({
+        "aria-hidden": true
+      }, qa), {}, {
+        children: _constants.EM_DASH
+      }))]
+    });
+  }
+  var fullText = createDurationFormatter(locale, display)(milliseconds);
+  return isReturnTypeString ? fullText : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, _objectSpread(_objectSpread({}, qa), {}, {
+    children: fullText
+  }));
+};
+var formatDuration = exports.formatDuration = function formatDuration(props) {
+  return getDuration({
+    returnType: "string",
+    props: props
+  });
+};
+var Duration = function Duration(props) {
+  return getDuration({
+    returnType: "component",
+    props: props
+  });
+};
+var _default = exports.default = Duration;

package/commonjs/Duration/DurationTypes.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/commonjs/Duration/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MEMO_CACHE_SIZE = exports.COMPARE_OBJECTS = void 0;
+var MEMO_CACHE_SIZE = exports.MEMO_CACHE_SIZE = 10;
+var COMPARE_OBJECTS = exports.COMPARE_OBJECTS = true;

package/commonjs/Duration/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Duration: true,
+  formatDuration: true
+};
+Object.defineProperty(exports, "Duration", {
+  enumerable: true,
+  get: function get() {
+    return _Duration.default;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "formatDuration", {
+  enumerable: true,
+  get: function get() {
+    return _Duration.formatDuration;
+  }
+});
+var _Duration = _interopRequireWildcard(require("./Duration"));
+var _DurationTypes = require("./DurationTypes");
+Object.keys(_DurationTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DurationTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _DurationTypes[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _Duration.default;

package/commonjs/Duration/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _seedsReactText = _interopRequireDefault(require("@sproutsocial/seeds-react-text"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Container = exports.Container = (0, _styledComponents.default)(_seedsReactText.default).withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-6o8ar7-0"
+})(["font-variant-numeric:tabular-nums;"]);

package/commonjs/index.js

@@ -264,6 +264,18 @@ Object.keys(_Drawer).forEach(function (key) {
     }
   });
 });
+var _Duration = require("./Duration");
+Object.keys(_Duration).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Duration[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Duration[key];
+    }
+  });
+});
 var _EmptyState = require("./EmptyState");
 Object.keys(_EmptyState).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/types/Duration/Duration.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { TypeDurationProps } from "./DurationTypes";
+export declare const formatDuration: (props: TypeDurationProps) => string;
+declare const Duration: (props: TypeDurationProps) => React.ReactNode;
+export default Duration;
+//# sourceMappingURL=Duration.d.ts.map

package/dist/types/Duration/Duration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Duration.d.ts","sourceRoot":"","sources":["../../../src/Duration/Duration.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AA+GzD,eAAO,MAAM,cAAc,UAAW,iBAAiB,KAAG,MAEzD,CAAC;AAEF,QAAA,MAAM,QAAQ,UAAW,iBAAiB,oBAEzC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/Duration/DurationTypes.d.ts

@@ -0,0 +1,14 @@
+import { TypeTextProps } from "@sproutsocial/seeds-react-text";
+import { TypeQaProps } from "../types/shared";
+export interface TypeDurationProps extends Omit<TypeTextProps, "children"> {
+    /** The style of the formatted milliseconds */
+    milliseconds: number | null;
+    /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
+    locale?: Intl.LocalesArgument;
+    /** The style of the formatted duration */
+    display?: "long" | "narrow";
+    /** Text to be read off by screen readers for invalid values (i.e., any value rendered as '—' (em dash)) */
+    invalidMillisecondsLabel?: string;
+    qa?: TypeQaProps;
+}
+//# sourceMappingURL=DurationTypes.d.ts.map

package/dist/types/Duration/DurationTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurationTypes.d.ts","sourceRoot":"","sources":["../../../src/Duration/DurationTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IACxE,8CAA8C;IAC9C,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,mIAAmI;IACnI,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC;IAE9B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAE5B,2GAA2G;IAC3G,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB"}

package/dist/types/Duration/__tests__/Duration.typetest.d.ts

@@ -0,0 +1,2 @@
+export declare const DurationTypeTest: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Duration.typetest.d.ts.map

package/dist/types/Duration/__tests__/Duration.typetest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Duration.typetest.d.ts","sourceRoot":"","sources":["../../../../src/Duration/__tests__/Duration.typetest.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB,+CAoB5B,CAAC"}

package/dist/types/Duration/__tests__/features/testDuration.d.ts

@@ -0,0 +1,3 @@
+declare const testDuration: (milliseconds: any, options: {} | undefined, texts: any) => void;
+export default testDuration;
+//# sourceMappingURL=testDuration.d.ts.map

package/dist/types/Duration/__tests__/features/testDuration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testDuration.d.ts","sourceRoot":"","sources":["../../../../../src/Duration/__tests__/features/testDuration.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,YAAY,kEAsBjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/types/Duration/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const MEMO_CACHE_SIZE = 10;
+export declare const COMPARE_OBJECTS = true;
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/Duration/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/Duration/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,eAAe,OAAO,CAAC"}

package/dist/types/Duration/index.d.ts

@@ -0,0 +1,6 @@
+import Duration, { formatDuration } from "./Duration";
+export default Duration;
+export { Duration };
+export { formatDuration };
+export * from "./DurationTypes";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Duration/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Duration/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,EAAE,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEtD,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}

package/dist/types/Duration/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const Container: import("styled-components").StyledComponent<{
+    ({ fontSize, children, qa, color, ...rest }: import("@sproutsocial/seeds-react-text").TypeTextProps): import("react/jsx-runtime").JSX.Element;
+    Headline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    SubHeadline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    SmallSubHeadline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    Byline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    SmallByline: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    BodyCopy: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+    SmallBodyCopy: import("styled-components").StyledComponent<"span", any, import("@sproutsocial/seeds-react-text").TypeTextProps, never>;
+}, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/types/Duration/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Duration/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;uDAErB,CAAC"}

package/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export * from "@sproutsocial/seeds-react-checkbox";
 export * from "./Collapsible";
 export * from "./DatePicker";
 export * from "./Drawer";
+export * from "./Duration";
 export * from "./EmptyState";
 export * from "./Fieldset";
 export * from "./FormField";

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/E,YAAY,EAAE,4BAA4B,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvG,OAAO,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/F,OAAO,EAAE,wBAAwB,IAAI,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGjG,cAAc,wCAAwC,CAAC;AACvD,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,MAAM,iCAAiC,CAAC;AACzC,cAAc,kCAAkC,CAAC;AAGjD,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,kCAAkC,CAAC;AACjD,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oCAAoC,CAAC;AACnD,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iCAAiC,CAAC;AAChD,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,kCAAkC,CAAC;AACjD,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,gCAAgC,CAAC;AAC/C,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AAEjC;;GAEG;AACH,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC/D,YAAY,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/E,YAAY,EAAE,4BAA4B,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAEvG,OAAO,EAAE,iBAAiB,IAAI,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC/F,OAAO,EAAE,wBAAwB,IAAI,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGjG,cAAc,wCAAwC,CAAC;AACvD,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAGpF,OAAO,EACL,SAAS,EACT,cAAc,EACd,cAAc,EACd,UAAU,EACV,mBAAmB,GACpB,MAAM,iCAAiC,CAAC;AACzC,cAAc,kCAAkC,CAAC;AAGjD,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,kCAAkC,CAAC;AACjD,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,oCAAoC,CAAC;AACnD,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,gCAAgC,CAAC;AAC/C,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iCAAiC,CAAC;AAChD,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,kCAAkC,CAAC;AACjD,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,gCAAgC,CAAC;AAC/C,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AAEjC;;GAEG;AACH,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,MAAM,UAAU,CAAC"}

package/lib/Duration/Duration.js

@@ -0,0 +1,122 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from "react";
+import memoize from "lru-memoize";
+import { EM_DASH } from "../utils/constants";
+import { VisuallyHidden } from "../VisuallyHidden";
+import { MEMO_CACHE_SIZE, COMPARE_OBJECTS } from "./constants";
+import { Container } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var getDivisionAndRemainder = function getDivisionAndRemainder(numerator, denominator) {
+  return [Math.floor(numerator / denominator), numerator % denominator];
+};
+var _createDurationFormatter = function _createDurationFormatter(locale, unitDisplay) {
+  var timeUnitFormatter = function timeUnitFormatter(locale, unit, unitDisplay) {
+    return Intl.NumberFormat(locale, {
+      style: "unit",
+      unit: unit,
+      unitDisplay: unitDisplay
+    }).format;
+  };
+  var formatDays = timeUnitFormatter(locale, "day", unitDisplay);
+  var formatHours = timeUnitFormatter(locale, "hour", unitDisplay);
+  var formatMinutes = timeUnitFormatter(locale, "minute", unitDisplay);
+  var formatSeconds = timeUnitFormatter(locale, "second", unitDisplay);
+  var formatMilliseconds = timeUnitFormatter(locale, "millisecond", unitDisplay);
+  var formatList = new Intl.ListFormat(locale, {
+    style: "narrow",
+    type: "unit"
+  });
+  return function (milliseconds) {
+    if (milliseconds <= 0) {
+      return formatMilliseconds(0);
+    }
+    var days;
+    var hours;
+    var minutes;
+    var seconds;
+    var _getDivisionAndRemain = getDivisionAndRemainder(milliseconds, 86400000);
+    var _getDivisionAndRemain2 = _slicedToArray(_getDivisionAndRemain, 2);
+    days = _getDivisionAndRemain2[0];
+    milliseconds = _getDivisionAndRemain2[1];
+    var _getDivisionAndRemain3 = getDivisionAndRemainder(milliseconds, 3600000);
+    var _getDivisionAndRemain4 = _slicedToArray(_getDivisionAndRemain3, 2);
+    hours = _getDivisionAndRemain4[0];
+    milliseconds = _getDivisionAndRemain4[1];
+    var _getDivisionAndRemain5 = getDivisionAndRemainder(milliseconds, 60000);
+    var _getDivisionAndRemain6 = _slicedToArray(_getDivisionAndRemain5, 2);
+    minutes = _getDivisionAndRemain6[0];
+    milliseconds = _getDivisionAndRemain6[1];
+    var _getDivisionAndRemain7 = getDivisionAndRemainder(milliseconds, 1000);
+    var _getDivisionAndRemain8 = _slicedToArray(_getDivisionAndRemain7, 2);
+    seconds = _getDivisionAndRemain8[0];
+    milliseconds = _getDivisionAndRemain8[1];
+    var list = [days ? formatDays(days) : null, hours ? formatHours(hours) : null, minutes ? formatMinutes(minutes) : null, seconds ? formatSeconds(seconds) : null, milliseconds ? formatMilliseconds(milliseconds) : null].filter(function (listItem) {
+      return listItem !== null;
+    });
+    return formatList.format(list);
+  };
+};
+
+// Memoize to reduce the energy of creating new instances of Intl.NumberFormat
+var memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
+var createDurationFormatter = memoizer(_createDurationFormatter);
+var isValidNumber = function isValidNumber(value) {
+  return typeof value === "number" && isFinite(value);
+};
+var getDuration = function getDuration(_ref) {
+  var returnType = _ref.returnType,
+    props = _ref.props;
+  var _props$display = props.display,
+    display = _props$display === void 0 ? "long" : _props$display,
+    invalidMillisecondsLabel = props.invalidMillisecondsLabel,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? "en-US" : _props$locale,
+    _props$milliseconds = props.milliseconds,
+    milliseconds = _props$milliseconds === void 0 ? null : _props$milliseconds,
+    qa = props.qa;
+  var isReturnTypeString = returnType === "string";
+  if (!isValidNumber(milliseconds)) {
+    return isReturnTypeString ? EM_DASH : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [invalidMillisecondsLabel ?
+      /*#__PURE__*/
+      // Give screen readers something useful to read off + hide the em dash
+      _jsx(VisuallyHidden, {
+        children: invalidMillisecondsLabel
+      }) : null, /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({
+        "aria-hidden": true
+      }, qa), {}, {
+        children: EM_DASH
+      }))]
+    });
+  }
+  var fullText = createDurationFormatter(locale, display)(milliseconds);
+  return isReturnTypeString ? fullText : /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({}, qa), {}, {
+    children: fullText
+  }));
+};
+export var formatDuration = function formatDuration(props) {
+  return getDuration({
+    returnType: "string",
+    props: props
+  });
+};
+var Duration = function Duration(props) {
+  return getDuration({
+    returnType: "component",
+    props: props
+  });
+};
+export default Duration;

package/lib/Duration/DurationTypes.js

@@ -0,0 +1 @@
+export {};

package/lib/Duration/constants.js

@@ -0,0 +1,2 @@
+export var MEMO_CACHE_SIZE = 10;
+export var COMPARE_OBJECTS = true;

package/lib/Duration/index.js

@@ -0,0 +1,5 @@
+import Duration, { formatDuration } from "./Duration";
+export default Duration;
+export { Duration };
+export { formatDuration };
+export * from "./DurationTypes";

package/lib/Duration/styles.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
+export var Container = styled(Text).withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-6o8ar7-0"
+})(["font-variant-numeric:tabular-nums;"]);

package/lib/index.js

@@ -26,6 +26,7 @@ export * from "@sproutsocial/seeds-react-checkbox";
 export * from "./Collapsible";
 export * from "./DatePicker";
 export * from "./Drawer";
+export * from "./Duration";
 export * from "./EmptyState";
 export * from "./Fieldset";
 export * from "./FormField";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "24.0.0",
+  "version": "24.1.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"