@hitachivantara/uikit-react-lab 4.0.3 → 4.0.4

package/dist/modern/StepNavigation/StepNavigation.js

@@ -1,14 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["className", "classes", "width", "steps", "stepSize", "showTitles", "type"],
-      _excluded2 = ["state", "title", "separatorClassName"],
-      _excluded3 = ["stepsWidth", "navWidth"];
-import "core-js/modules/web.dom-collections.iterator.js";
-
+  _excluded2 = ["state", "title", "separatorClassName"],
+  _excluded3 = ["stepsWidth", "navWidth"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
@@ -19,6 +15,7 @@ import HvDefaultNavigation from "./DefaultNavigation";
 import HvSimpleNavigation from "./SimpleNavigation";
 import { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from "./utils";
 import styles from "./styles";
+
 /**
  * Navigation page with steps.
  *
@@ -40,38 +37,32 @@ import styles from "./styles";
  * displayed above, the width of the separator element will be 100px.
  * If the step component has titles, each one will have 215px of width by default.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const HvStepNavigation = _ref => {
   let {
-    className,
-    classes,
-    width,
-    steps,
-    stepSize,
-    showTitles,
-    type = "Default"
-  } = _ref,
-      others = _objectWithoutProperties(_ref, _excluded);
-
-  const theme = useTheme(); // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-  const breakpoint = useWidth(); // step configurations
-
+      className,
+      classes,
+      width,
+      steps,
+      stepSize,
+      showTitles,
+      type = "Default"
+    } = _ref,
+    others = _objectWithoutProperties(_ref, _excluded);
+  const theme = useTheme();
+  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  const breakpoint = useWidth();
+  // step configurations
   const stepSizeKey = stepSize !== null && stepSize !== void 0 ? stepSize : ["xs", "sm"].includes(breakpoint) ? "SM" : "MD";
   const hasTitles = showTitles !== null && showTitles !== void 0 ? showTitles : !["xs", "sm"].includes(breakpoint);
-
   const styledLi = containerSize => styled("li")({
     width: containerSize,
     height: containerSize
   });
-
   const styledDiv = containerSize => styled("div")({
     width: containerSize,
     height: containerSize
   });
-
   const styledSeparatorElement = (title, separatorClassName, separatorHeight, separatorWidth, backgroundColor) => {
     const Separator = withStyles({
       separatorElement: {
@@ -93,7 +84,6 @@ const HvStepNavigation = _ref => {
       children: /*#__PURE__*/_jsx(Separator, {})
     }, `separator-${title}`);
   };
-
   const drawItems = ({
     separatorValues: {
       minWidth,
@@ -109,23 +99,20 @@ const HvStepNavigation = _ref => {
   }) => {
     const items = steps.reduce((acc, _ref2, index) => {
       let {
-        state,
-        title,
-        separatorClassName
-      } = _ref2,
-          props = _objectWithoutProperties(_ref2, _excluded2);
-
+          state,
+          title,
+          separatorClassName
+        } = _ref2,
+        props = _objectWithoutProperties(_ref2, _excluded2);
       const containerSize = state === "Current" ? maxSize : minSize;
       const StepContainer = styledLi(containerSize);
       const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));
-
       const stepProps = _objectSpread({}, _objectSpread({
         size: stepSizeKey,
         state,
         title,
         number: index + 1
       }, props));
-
       const stepElement = /*#__PURE__*/_jsx(StepContainer, {
         className: classes.li,
         children: hasTitles ? /*#__PURE__*/_jsx(StepComponent, _objectSpread({
@@ -146,12 +133,10 @@ const HvStepNavigation = _ref => {
           })
         })
       }, `step-${title}`);
-
       if (index < steps.length - 1) {
         const separatorElement = styledSeparatorElement(title, separatorClassName, height, [steps[index + 1].state, state].includes("Current") ? minWidth : maxWidth, getColor(steps[index + 1].state === "Disabled" ? "Disabled" : state, theme));
         return [...acc, stepElement, separatorElement];
       }
-
       return [...acc, stepElement];
     }, []);
     return /*#__PURE__*/_jsx("ol", {
@@ -159,10 +144,8 @@ const HvStepNavigation = _ref => {
       children: items
     });
   };
-
   const getDynamicValues = stepsWidth => {
     var _width$breakpoint, _theme$breakpoints$va, _theme$breakpoints$va2;
-
     const maxWidth = (_width$breakpoint = width === null || width === void 0 ? void 0 : width[breakpoint]) !== null && _width$breakpoint !== void 0 ? _width$breakpoint : Math.max(Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN, SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth);
     const next = theme.breakpoints.keys.find((_, index, self) => index - 1 >= 0 ? self[index - 1] === breakpoint : false);
     const navWidth = Math.min(maxWidth, (_theme$breakpoints$va = (_theme$breakpoints$va2 = theme.breakpoints.values) === null || _theme$breakpoints$va2 === void 0 ? void 0 : _theme$breakpoints$va2[next]) !== null && _theme$breakpoints$va !== void 0 ? _theme$breakpoints$va : maxWidth);
@@ -174,7 +157,6 @@ const HvStepNavigation = _ref => {
       separatorWidth
     };
   };
-
   const styledTitle = (titleClassName, variant, title, titleWidth) => withStyles({
     stepTitle: {
       textAlign: "center",
@@ -190,7 +172,6 @@ const HvStepNavigation = _ref => {
     className: clsx(stepTitle, titleClassName),
     children: title
   }) : null);
-
   const getTitles = getTitleProps => hasTitles ? /*#__PURE__*/_jsx("div", {
     className: classes.titles,
     children: steps.map(({
@@ -211,7 +192,6 @@ const HvStepNavigation = _ref => {
       return /*#__PURE__*/_jsx(Title, {}, `step-title-${rawTitle}`);
     })
   }) : null;
-
   const StepNavigation = {
     Default: HvDefaultNavigation,
     Simple: HvSimpleNavigation
@@ -225,11 +205,10 @@ const HvStepNavigation = _ref => {
   }, others)), {}, {
     children: _ref3 => {
       let {
-        stepsWidth,
-        navWidth
-      } = _ref3,
-          itemsProps = _objectWithoutProperties(_ref3, _excluded3);
-
+          stepsWidth,
+          navWidth
+        } = _ref3,
+        itemsProps = _objectWithoutProperties(_ref3, _excluded3);
       return /*#__PURE__*/_jsx(Typography, {
         component: "nav",
         style: {
@@ -241,13 +220,11 @@ const HvStepNavigation = _ref => {
     }
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * A Jss Object used to override or extend the styles applied.
    */
@@ -256,33 +233,27 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
      * Styles applied to the component root class.
      */
     root: PropTypes.string,
-
     /**
      * Styles applied to the li element.
      */
     li: PropTypes.string,
-
     /**
      *  Styles applied to the ol element.
      */
     ol: PropTypes.string,
-
     /**
      * Styles applied to the separator element.
      */
     separator: PropTypes.string,
-
     /**
      * Styles applied to the titles container element.
      */
     titles: PropTypes.string
   }).isRequired,
-
   /**
    * Type of step navigation. Values = {"Simple", "Default"}.
    */
   type: PropTypes.oneOf(["Simple", "Default"]),
-
   /**
    * Steps to show on the component.
    */
@@ -291,39 +262,32 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
      * Class names to override styles on the step component.
      */
     className: PropTypes.string,
-
     /**
      * Class names to override styles on the separator component after the step.
      */
     separatorClassName: PropTypes.string,
-
     /**
      * Class names to override styles on the title component above the step.
      */
     titleClassName: PropTypes.string,
-
     /**
      * Title of the step.
      */
     title: PropTypes.string.isRequired,
-
     /**
      * State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"}.
      */
     state: PropTypes.oneOf(["Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"]).isRequired,
-
     /**
      * Define if a step is disabled/enabled.
      * If this property is not defined and the step is on state "Disabled", the step component will be disabled
      */
     disabled: PropTypes.bool
   })).isRequired,
-
   /**
    * Sets one of the standard sizes of the steps. Values = {"XS", "SM", "MD", "LG", "XL"}
    */
   stepSize: PropTypes.oneOf(["XS", "SM", "MD", "LG", "XL"]),
-
   /**
    * Width of the component element on each breakpoint screen resolution.
    */
@@ -334,7 +298,6 @@ process.env.NODE_ENV !== "production" ? HvStepNavigation.propTypes = {
     lg: PropTypes.number,
     xl: PropTypes.number
   }),
-
   /**
    * Defines either show a title or only a tooltip on each step component
    */

package/dist/modern/StepNavigation/StepNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","Typography","styled","useTheme","withStyles","HvTooltip","HvTypography","useWidth","HvDefaultNavigation","HvSimpleNavigation","SEPARATOR_WIDTH","TITLE_MARGIN","TITLE_WIDTH","styles","HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","breakpoint","stepSizeKey","includes","hasTitles","styledLi","containerSize","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","separatorElement","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","Simple","numSteps","root","itemsProps","margin","propTypes","string","shape","isRequired","oneOf","arrayOf","disabled","bool","xs","sm","md","lg","xl","name"],"sources":["../../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { Typography, styled, useTheme } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state, theme)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width?.[breakpoint] ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.isRequired,\n      /**\n       * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"}.\n       */\n      state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"])\n        .isRequired,\n      /**\n       * Define if a step is disabled/enabled.\n       * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n       */\n      disabled: PropTypes.bool,\n    })\n  ).isRequired,\n  /**\n   * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n   */\n  stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * Width of the component element on each breakpoint screen resolution.\n   */\n  width: PropTypes.shape({\n    xs: PropTypes.number,\n    sm: PropTypes.number,\n    md: PropTypes.number,\n    lg: PropTypes.number,\n    xl: PropTypes.number,\n  }),\n  /**\n   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}
+{"version":3,"file":"StepNavigation.js","names":["React","PropTypes","clsx","Typography","styled","useTheme","withStyles","HvTooltip","HvTypography","useWidth","HvDefaultNavigation","HvSimpleNavigation","SEPARATOR_WIDTH","TITLE_MARGIN","TITLE_WIDTH","styles","HvStepNavigation","className","classes","width","steps","stepSize","showTitles","type","others","theme","breakpoint","stepSizeKey","includes","hasTitles","styledLi","containerSize","height","styledDiv","styledSeparatorElement","title","separatorClassName","separatorHeight","separatorWidth","backgroundColor","Separator","separatorElement","separator","drawItems","separatorValues","minWidth","maxWidth","getColor","stepValues","minSize","maxSize","StepComponent","items","reduce","acc","index","state","props","StepContainer","Step","Math","max","stepProps","size","number","stepElement","li","length","ol","getDynamicValues","stepsWidth","Number","next","breakpoints","keys","find","_","self","navWidth","min","values","titleWidth","ceil","styledTitle","titleClassName","variant","stepTitle","textAlign","marginRight","getTitles","getTitleProps","titles","map","rawTitle","Title","StepNavigation","Default","Simple","numSteps","root","itemsProps","margin","propTypes","string","shape","isRequired","oneOf","arrayOf","disabled","bool","xs","sm","md","lg","xl","name"],"sources":["../../../src/StepNavigation/StepNavigation.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport { Typography, styled, useTheme } from \"@mui/material\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvTooltip, HvTypography, useWidth } from \"@hitachivantara/uikit-react-core\";\n\nimport HvDefaultNavigation from \"./DefaultNavigation\";\nimport HvSimpleNavigation from \"./SimpleNavigation\";\nimport { SEPARATOR_WIDTH, TITLE_MARGIN, TITLE_WIDTH } from \"./utils\";\nimport styles from \"./styles\";\n\n/**\n * Navigation page with steps.\n *\n * You need to define the <b>steps<b/> displayed on the component so that itself can be drawn on the UI.\n * On each step, you need to define a <b>state</b> - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -\n * and a <b>title</b> to be shown as a tooltip or a text above of the step. You can also:\n * * Define a <b>className</b> on each step element;\n * * Define a <b>separatorClassName</b> to specify a className for the separator element. The default height\n * values of the separator element are 2px/3px on 'Simple'/'Default' layouts respectively;\n * * Define a <b>titleClassName</b> to specify a className for the title above each step element.\n *\n * For the root element, you can:\n * * Define a <b>className</b>;\n * * Choose a <b>type</b> of layout: 'Simple' or 'Default';\n * * Choose the <b>stepSize</b> of the step component: \"XS\", \"SM\", \"MD\", \"LG\", \"XL\". The default size will be\n * correspondent to the current media breakpoint;\n * * Choose either you want to <b>showTitles</b> near to each step component or a tootlip on hover;\n * * Define a <b>width</b> of the component. If you don't define any value and the step component has no title\n * displayed above, the width of the separator element will be 100px.\n * If the step component has titles, each one will have 215px of width by default.\n */\nconst HvStepNavigation = ({\n  className,\n  classes,\n  width,\n  steps,\n  stepSize,\n  showTitles,\n  type = \"Default\",\n  ...others\n}) => {\n  const theme = useTheme();\n  // current breakpoint 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  const breakpoint = useWidth();\n  // step configurations\n  const stepSizeKey = stepSize ?? ([\"xs\", \"sm\"].includes(breakpoint) ? \"SM\" : \"MD\");\n  const hasTitles = showTitles ?? ![\"xs\", \"sm\"].includes(breakpoint);\n\n  const styledLi = (containerSize) =>\n    styled(\"li\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledDiv = (containerSize) =>\n    styled(\"div\")({\n      width: containerSize,\n      height: containerSize,\n    });\n\n  const styledSeparatorElement = (\n    title,\n    separatorClassName,\n    separatorHeight,\n    separatorWidth,\n    backgroundColor\n  ) => {\n    const Separator = withStyles({\n      separatorElement: {\n        height: separatorHeight,\n        width: separatorWidth,\n        backgroundColor,\n      },\n    })(({ classes: { separatorElement } }) => (\n      <div\n        aria-label={`separator-${title}`}\n        className={clsx(separatorElement, separatorClassName)}\n      />\n    ));\n    return (\n      <li aria-hidden key={`separator-${title}`} className={classes.separator}>\n        <Separator />\n      </li>\n    );\n  };\n\n  const drawItems = ({\n    separatorValues: { minWidth, maxWidth, getColor, height },\n    stepValues: { minSize, maxSize, StepComponent },\n  }) => {\n    const items = steps.reduce((acc, { state, title, separatorClassName, ...props }, index) => {\n      const containerSize = state === \"Current\" ? maxSize : minSize;\n      const StepContainer = styledLi(containerSize);\n      const Step = styledDiv(Math.max(containerSize, 30), Math.max(containerSize, 30));\n      const stepProps = {\n        ...{\n          size: stepSizeKey,\n          state,\n          title,\n          number: index + 1,\n          ...props,\n        },\n      };\n      const stepElement = (\n        <StepContainer key={`step-${title}`} className={classes.li}>\n          {hasTitles ? (\n            <StepComponent aria-label={`step-${title}`} {...stepProps} />\n          ) : (\n            <HvTooltip\n              placement=\"bottom\"\n              title={<HvTypography>{`${index + 1}. ${title}`}</HvTypography>}\n            >\n              <div aria-label={`step-container-${title}`}>\n                <Step className={classes.li}>\n                  <StepComponent aria-label={`step-${title}`} {...stepProps} />\n                </Step>\n              </div>\n            </HvTooltip>\n          )}\n        </StepContainer>\n      );\n      if (index < steps.length - 1) {\n        const separatorElement = styledSeparatorElement(\n          title,\n          separatorClassName,\n          height,\n          [steps[index + 1].state, state].includes(\"Current\") ? minWidth : maxWidth,\n          getColor(steps[index + 1].state === \"Disabled\" ? \"Disabled\" : state, theme)\n        );\n        return [...acc, stepElement, separatorElement];\n      }\n      return [...acc, stepElement];\n    }, []);\n\n    return <ol className={classes.ol}>{items}</ol>;\n  };\n\n  const getDynamicValues = (stepsWidth) => {\n    const maxWidth =\n      width?.[breakpoint] ??\n      Math.max(\n        Number(hasTitles) * (TITLE_WIDTH + TITLE_MARGIN) * steps.length - TITLE_MARGIN,\n        SEPARATOR_WIDTH * (steps.length - 1) + stepsWidth\n      );\n    const next = theme.breakpoints.keys.find((_, index, self) =>\n      index - 1 >= 0 ? self[index - 1] === breakpoint : false\n    );\n    const navWidth = Math.min(maxWidth, theme.breakpoints.values?.[next] ?? maxWidth);\n    const titleWidth = Number(hasTitles) * Math.ceil((navWidth + TITLE_MARGIN) / steps.length);\n    const separatorWidth =\n      Number(!hasTitles) * Math.ceil((navWidth - stepsWidth) / (steps.length - 1));\n    return { width: navWidth, titleWidth, separatorWidth };\n  };\n\n  const styledTitle = (titleClassName, variant, title, titleWidth) =>\n    withStyles({\n      stepTitle: {\n        textAlign: \"center\",\n        width: titleWidth - TITLE_MARGIN,\n        marginRight: TITLE_MARGIN,\n      },\n    })(({ classes: { stepTitle } }) =>\n      title ? (\n        <HvTypography variant={variant} className={clsx(stepTitle, titleClassName)}>\n          {title}\n        </HvTypography>\n      ) : null\n    );\n\n  const getTitles = (getTitleProps) =>\n    hasTitles ? (\n      <div className={classes.titles}>\n        {steps.map(({ title: rawTitle, state, titleClassName }, index) => {\n          const {\n            variant = \"highlightText\",\n            title = rawTitle,\n            titleWidth = 0,\n          } = getTitleProps({\n            state,\n            rawTitle,\n            number: index + 1,\n          });\n          const Title = styledTitle(titleClassName, variant, title, titleWidth);\n          return <Title key={`step-title-${rawTitle}`} />;\n        })}\n      </div>\n    ) : null;\n\n  const StepNavigation = {\n    Default: HvDefaultNavigation,\n    Simple: HvSimpleNavigation,\n  }[type];\n\n  return (\n    <StepNavigation\n      {...{\n        stepSize: stepSizeKey,\n        numSteps: steps.length,\n        getTitles,\n        getDynamicValues,\n        className: clsx(className, classes.root),\n        ...others,\n      }}\n    >\n      {({ stepsWidth, navWidth, ...itemsProps }) => (\n        <Typography\n          component=\"nav\"\n          style={{\n            width: `${navWidth}px`,\n            margin: 0,\n          }}\n        >\n          {drawItems(itemsProps)}\n        </Typography>\n      )}\n    </StepNavigation>\n  );\n};\n\nHvStepNavigation.propTypes = {\n  /**\n   * Class names to be applied.\n   */\n  className: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the li element.\n     */\n    li: PropTypes.string,\n    /**\n     *  Styles applied to the ol element.\n     */\n    ol: PropTypes.string,\n    /**\n     * Styles applied to the separator element.\n     */\n    separator: PropTypes.string,\n    /**\n     * Styles applied to the titles container element.\n     */\n    titles: PropTypes.string,\n  }).isRequired,\n  /**\n   * Type of step navigation. Values = {\"Simple\", \"Default\"}.\n   */\n  type: PropTypes.oneOf([\"Simple\", \"Default\"]),\n  /**\n   * Steps to show on the component.\n   */\n  steps: PropTypes.arrayOf(\n    PropTypes.shape({\n      /**\n       * Class names to override styles on the step component.\n       */\n      className: PropTypes.string,\n      /**\n       * Class names to override styles on the separator component after the step.\n       */\n      separatorClassName: PropTypes.string,\n      /**\n       * Class names to override styles on the title component above the step.\n       */\n      titleClassName: PropTypes.string,\n      /**\n       * Title of the step.\n       */\n      title: PropTypes.string.isRequired,\n      /**\n       * State of the step. Values = {\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"}.\n       */\n      state: PropTypes.oneOf([\"Pending\", \"Failed\", \"Completed\", \"Current\", \"Disabled\", \"Enabled\"])\n        .isRequired,\n      /**\n       * Define if a step is disabled/enabled.\n       * If this property is not defined and the step is on state \"Disabled\", the step component will be disabled\n       */\n      disabled: PropTypes.bool,\n    })\n  ).isRequired,\n  /**\n   * Sets one of the standard sizes of the steps. Values = {\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"}\n   */\n  stepSize: PropTypes.oneOf([\"XS\", \"SM\", \"MD\", \"LG\", \"XL\"]),\n  /**\n   * Width of the component element on each breakpoint screen resolution.\n   */\n  width: PropTypes.shape({\n    xs: PropTypes.number,\n    sm: PropTypes.number,\n    md: PropTypes.number,\n    lg: PropTypes.number,\n    xl: PropTypes.number,\n  }),\n  /**\n   * Defines either show a title or only a tooltip on each step component\n   */\n  showTitles: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvStepNavigation\" })(HvStepNavigation);\n"],"mappings":"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"}

package/dist/modern/StepNavigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/StepNavigation/index.js"],"sourcesContent":["export { default } from \"./StepNavigation\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,kBAAxB"}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/StepNavigation/index.js"],"sourcesContent":["export { default } from \"./StepNavigation\";\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,kBAAkB"}

package/dist/modern/StepNavigation/styles.js

@@ -26,6 +26,5 @@ const styles = () => ({
     }
   }
 });
-
 export default styles;
 //# sourceMappingURL=styles.js.map

package/dist/modern/StepNavigation/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","root","display","flexDirection","titles","ol","alignItems","justifyContent","flexWrap","padding","listStyle","li","separator","userSelect"],"sources":["../../../src/StepNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  titles: {\n    display: \"flex\",\n  },\n  ol: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexWrap: \"wrap\",\n    padding: 0,\n    listStyle: \"none\",\n  },\n  li: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  separator: {\n    userSelect: \"none\",\n    \"& > div\": {\n      display: \"flex\",\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG,OAAO;EACpBC,IAAI,EAAE;IACJC,OAAO,EAAE,MADL;IAEJC,aAAa,EAAE;EAFX,CADc;EAKpBC,MAAM,EAAE;IACNF,OAAO,EAAE;EADH,CALY;EAQpBG,EAAE,EAAE;IACFH,OAAO,EAAE,MADP;IAEFI,UAAU,EAAE,QAFV;IAGFC,cAAc,EAAE,QAHd;IAIFC,QAAQ,EAAE,MAJR;IAKFC,OAAO,EAAE,CALP;IAMFC,SAAS,EAAE;EANT,CARgB;EAgBpBC,EAAE,EAAE;IACFT,OAAO,EAAE,MADP;IAEFI,UAAU,EAAE,QAFV;IAGFC,cAAc,EAAE;EAHd,CAhBgB;EAqBpBK,SAAS,EAAE;IACTC,UAAU,EAAE,MADH;IAET,WAAW;MACTX,OAAO,EAAE;IADA;EAFF;AArBS,CAAP,CAAf;;AA6BA,eAAeF,MAAf"}
+{"version":3,"file":"styles.js","names":["styles","root","display","flexDirection","titles","ol","alignItems","justifyContent","flexWrap","padding","listStyle","li","separator","userSelect"],"sources":["../../../src/StepNavigation/styles.js"],"sourcesContent":["const styles = () => ({\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  titles: {\n    display: \"flex\",\n  },\n  ol: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexWrap: \"wrap\",\n    padding: 0,\n    listStyle: \"none\",\n  },\n  li: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  separator: {\n    userSelect: \"none\",\n    \"& > div\": {\n      display: \"flex\",\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAG,OAAO;EACpBC,IAAI,EAAE;IACJC,OAAO,EAAE,MAAM;IACfC,aAAa,EAAE;EACjB,CAAC;EACDC,MAAM,EAAE;IACNF,OAAO,EAAE;EACX,CAAC;EACDG,EAAE,EAAE;IACFH,OAAO,EAAE,MAAM;IACfI,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAE,MAAM;IAChBC,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE;EACb,CAAC;EACDC,EAAE,EAAE;IACFT,OAAO,EAAE,MAAM;IACfI,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDK,SAAS,EAAE;IACTC,UAAU,EAAE,MAAM;IAClB,SAAS,EAAE;MACTX,OAAO,EAAE;IACX;EACF;AACF,CAAC,CAAC;AAEF,eAAeF,MAAM"}

package/dist/modern/StepNavigation/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["TITLE_MARGIN","TITLE_WIDTH","STEP_MARGIN","SEPARATOR_WIDTH"],"sources":["../../../src/StepNavigation/utils.js"],"sourcesContent":["const TITLE_MARGIN = 20;\nconst TITLE_WIDTH = 215;\nconst STEP_MARGIN = 20;\nconst SEPARATOR_WIDTH = 100;\n\nexport { STEP_MARGIN, TITLE_MARGIN, TITLE_WIDTH, SEPARATOR_WIDTH };\n"],"mappings":"AAAA,MAAMA,YAAY,GAAG,EAArB;AACA,MAAMC,WAAW,GAAG,GAApB;AACA,MAAMC,WAAW,GAAG,EAApB;AACA,MAAMC,eAAe,GAAG,GAAxB;AAEA,SAASD,WAAT,EAAsBF,YAAtB,EAAoCC,WAApC,EAAiDE,eAAjD"}
+{"version":3,"file":"utils.js","names":["TITLE_MARGIN","TITLE_WIDTH","STEP_MARGIN","SEPARATOR_WIDTH"],"sources":["../../../src/StepNavigation/utils.js"],"sourcesContent":["const TITLE_MARGIN = 20;\nconst TITLE_WIDTH = 215;\nconst STEP_MARGIN = 20;\nconst SEPARATOR_WIDTH = 100;\n\nexport { STEP_MARGIN, TITLE_MARGIN, TITLE_WIDTH, SEPARATOR_WIDTH };\n"],"mappings":"AAAA,MAAMA,YAAY,GAAG,EAAE;AACvB,MAAMC,WAAW,GAAG,GAAG;AACvB,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,eAAe,GAAG,GAAG;AAE3B,SAASD,WAAW,EAAEF,YAAY,EAAEC,WAAW,EAAEE,eAAe"}

package/dist/modern/TimeAgo/TimeAgo.js

@@ -1,36 +1,31 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["classes", "timestamp", "locale", "component", "emptyElement", "disableRefresh", "showSeconds", "justText"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from "react";
 import PropTypes from "prop-types";
 import { withStyles } from "@mui/styles";
 import { HvTypography, useLocale } from "@hitachivantara/uikit-react-core";
 import useTimeAgo from "./useTimeAgo";
 import styles from "./styles";
+
 /**
  * The HvTimeAgo component implements the Design System relative time format guidelines.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const HvTimeAgo = _ref => {
   let {
-    classes,
-    timestamp,
-    locale: localeProp,
-    component: Component = HvTypography,
-    emptyElement = "—",
-    disableRefresh = false,
-    showSeconds = false,
-    justText = false
-  } = _ref,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+      classes,
+      timestamp,
+      locale: localeProp,
+      component: Component = HvTypography,
+      emptyElement = "—",
+      disableRefresh = false,
+      showSeconds = false,
+      justText = false
+    } = _ref,
+    others = _objectWithoutProperties(_ref, _excluded);
   const contextLocale = useLocale();
   const locale = localeProp || contextLocale;
   const timeAgo = useTimeAgo(timestamp, {
@@ -45,7 +40,6 @@ const HvTimeAgo = _ref => {
     children: !timestamp ? emptyElement : timeAgo
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvTimeAgo.propTypes = {
   /**
    * A Jss Object used to override or extend the styles applied.
@@ -56,40 +50,33 @@ process.env.NODE_ENV !== "production" ? HvTimeAgo.propTypes = {
      */
     root: PropTypes.string
   }),
-
   /**
    * The timestamp to format, in seconds
    */
   timestamp: PropTypes.number,
-
   /**
    * The locale to be used. Should be on of the dayjs supported locales
    * @see https://day.js.org/docs/en/i18n/i18n
    */
   locale: PropTypes.string,
-
   /**
    * The component used for the root node. Either a string to use a HTML element or a component.
    * Defaults to `div`.
    */
   component: PropTypes.elementType,
-
   /**
    * The element to render when the timestamp is null or 0
    * Defaults to `—` (Em Dash)
    */
   emptyElement: PropTypes.node,
-
   /**
    * Disables periodic date refreshes
    */
   disableRefresh: PropTypes.bool,
-
   /**
    * Whether to show seconds in the rendered time
    */
   showSeconds: PropTypes.bool,
-
   /**
    * Whether the component should render just the string
    * Consider using `useTimeAgo` instead

package/dist/modern/TimeAgo/TimeAgo.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeAgo.js","names":["React","PropTypes","withStyles","HvTypography","useLocale","useTimeAgo","styles","HvTimeAgo","classes","timestamp","locale","localeProp","component","Component","emptyElement","disableRefresh","showSeconds","justText","others","contextLocale","timeAgo","root","propTypes","shape","string","number","elementType","node","bool","name"],"sources":["../../../src/TimeAgo/TimeAgo.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvTypography, useLocale } from \"@hitachivantara/uikit-react-core\";\nimport useTimeAgo from \"./useTimeAgo\";\nimport styles from \"./styles\";\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nconst HvTimeAgo = ({\n  classes,\n  timestamp,\n  locale: localeProp,\n  component: Component = HvTypography,\n  emptyElement = \"—\",\n  disableRefresh = false,\n  showSeconds = false,\n  justText = false,\n  ...others\n}) => {\n  const contextLocale = useLocale();\n  const locale = localeProp || contextLocale;\n  const timeAgo = useTimeAgo(timestamp, { locale, disableRefresh, showSeconds });\n\n  if (justText && timestamp) return timeAgo;\n\n  return (\n    <Component className={classes.root} {...others}>\n      {!timestamp ? emptyElement : timeAgo}\n    </Component>\n  );\n};\n\nHvTimeAgo.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }),\n  /**\n   * The timestamp to format, in seconds\n   */\n  timestamp: PropTypes.number,\n  /**\n   * The locale to be used. Should be on of the dayjs supported locales\n   * @see https://day.js.org/docs/en/i18n/i18n\n   */\n  locale: PropTypes.string,\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `div`.\n   */\n  component: PropTypes.elementType,\n  /**\n   * The element to render when the timestamp is null or 0\n   * Defaults to `—` (Em Dash)\n   */\n  emptyElement: PropTypes.node,\n  /**\n   * Disables periodic date refreshes\n   */\n  disableRefresh: PropTypes.bool,\n  /**\n   * Whether to show seconds in the rendered time\n   */\n  showSeconds: PropTypes.bool,\n  /**\n   * Whether the component should render just the string\n   * Consider using `useTimeAgo` instead\n   */\n  justText: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvTimeAgo\" })(HvTimeAgo);\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,QAA2B,aAA3B;AACA,SAASC,YAAT,EAAuBC,SAAvB,QAAwC,kCAAxC;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA;AACA;AACA;;;;AACA,MAAMC,SAAS,GAAG,QAUZ;EAAA,IAVa;IACjBC,OADiB;IAEjBC,SAFiB;IAGjBC,MAAM,EAAEC,UAHS;IAIjBC,SAAS,EAAEC,SAAS,GAAGV,YAJN;IAKjBW,YAAY,GAAG,GALE;IAMjBC,cAAc,GAAG,KANA;IAOjBC,WAAW,GAAG,KAPG;IAQjBC,QAAQ,GAAG;EARM,CAUb;EAAA,IADDC,MACC;;EACJ,MAAMC,aAAa,GAAGf,SAAS,EAA/B;EACA,MAAMM,MAAM,GAAGC,UAAU,IAAIQ,aAA7B;EACA,MAAMC,OAAO,GAAGf,UAAU,CAACI,SAAD,EAAY;IAAEC,MAAF;IAAUK,cAAV;IAA0BC;EAA1B,CAAZ,CAA1B;EAEA,IAAIC,QAAQ,IAAIR,SAAhB,EAA2B,OAAOW,OAAP;EAE3B,oBACE,KAAC,SAAD;IAAW,SAAS,EAAEZ,OAAO,CAACa;EAA9B,GAAwCH,MAAxC;IAAA,UACG,CAACT,SAAD,GAAaK,YAAb,GAA4BM;EAD/B,GADF;AAKD,CAtBD;;AAwBA,wCAAAb,SAAS,CAACe,SAAV,GAAsB;EACpB;AACF;AACA;EACEd,OAAO,EAAEP,SAAS,CAACsB,KAAV,CAAgB;IACvB;AACJ;AACA;IACIF,IAAI,EAAEpB,SAAS,CAACuB;EAJO,CAAhB,CAJW;;EAUpB;AACF;AACA;EACEf,SAAS,EAAER,SAAS,CAACwB,MAbD;;EAcpB;AACF;AACA;AACA;EACEf,MAAM,EAAET,SAAS,CAACuB,MAlBE;;EAmBpB;AACF;AACA;AACA;EACEZ,SAAS,EAAEX,SAAS,CAACyB,WAvBD;;EAwBpB;AACF;AACA;AACA;EACEZ,YAAY,EAAEb,SAAS,CAAC0B,IA5BJ;;EA6BpB;AACF;AACA;EACEZ,cAAc,EAAEd,SAAS,CAAC2B,IAhCN;;EAiCpB;AACF;AACA;EACEZ,WAAW,EAAEf,SAAS,CAAC2B,IApCH;;EAqCpB;AACF;AACA;AACA;EACEX,QAAQ,EAAEhB,SAAS,CAAC2B;AAzCA,CAAtB;AA4CA,eAAe1B,UAAU,CAACI,MAAD,EAAS;EAAEuB,IAAI,EAAE;AAAR,CAAT,CAAV,CAA0CtB,SAA1C,CAAf"}
+{"version":3,"file":"TimeAgo.js","names":["React","PropTypes","withStyles","HvTypography","useLocale","useTimeAgo","styles","HvTimeAgo","classes","timestamp","locale","localeProp","component","Component","emptyElement","disableRefresh","showSeconds","justText","others","contextLocale","timeAgo","root","propTypes","shape","string","number","elementType","node","bool","name"],"sources":["../../../src/TimeAgo/TimeAgo.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@mui/styles\";\nimport { HvTypography, useLocale } from \"@hitachivantara/uikit-react-core\";\nimport useTimeAgo from \"./useTimeAgo\";\nimport styles from \"./styles\";\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nconst HvTimeAgo = ({\n  classes,\n  timestamp,\n  locale: localeProp,\n  component: Component = HvTypography,\n  emptyElement = \"—\",\n  disableRefresh = false,\n  showSeconds = false,\n  justText = false,\n  ...others\n}) => {\n  const contextLocale = useLocale();\n  const locale = localeProp || contextLocale;\n  const timeAgo = useTimeAgo(timestamp, { locale, disableRefresh, showSeconds });\n\n  if (justText && timestamp) return timeAgo;\n\n  return (\n    <Component className={classes.root} {...others}>\n      {!timestamp ? emptyElement : timeAgo}\n    </Component>\n  );\n};\n\nHvTimeAgo.propTypes = {\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n  }),\n  /**\n   * The timestamp to format, in seconds\n   */\n  timestamp: PropTypes.number,\n  /**\n   * The locale to be used. Should be on of the dayjs supported locales\n   * @see https://day.js.org/docs/en/i18n/i18n\n   */\n  locale: PropTypes.string,\n  /**\n   * The component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `div`.\n   */\n  component: PropTypes.elementType,\n  /**\n   * The element to render when the timestamp is null or 0\n   * Defaults to `—` (Em Dash)\n   */\n  emptyElement: PropTypes.node,\n  /**\n   * Disables periodic date refreshes\n   */\n  disableRefresh: PropTypes.bool,\n  /**\n   * Whether to show seconds in the rendered time\n   */\n  showSeconds: PropTypes.bool,\n  /**\n   * Whether the component should render just the string\n   * Consider using `useTimeAgo` instead\n   */\n  justText: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvTimeAgo\" })(HvTimeAgo);\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,UAAU,QAAQ,aAAa;AACxC,SAASC,YAAY,EAAEC,SAAS,QAAQ,kCAAkC;AAC1E,OAAOC,UAAU,MAAM,cAAc;AACrC,OAAOC,MAAM,MAAM,UAAU;;AAE7B;AACA;AACA;AAFA;AAGA,MAAMC,SAAS,GAAG,QAUZ;EAAA,IAVa;MACjBC,OAAO;MACPC,SAAS;MACTC,MAAM,EAAEC,UAAU;MAClBC,SAAS,EAAEC,SAAS,GAAGV,YAAY;MACnCW,YAAY,GAAG,GAAG;MAClBC,cAAc,GAAG,KAAK;MACtBC,WAAW,GAAG,KAAK;MACnBC,QAAQ,GAAG;IAEb,CAAC;IADIC,MAAM;EAET,MAAMC,aAAa,GAAGf,SAAS,EAAE;EACjC,MAAMM,MAAM,GAAGC,UAAU,IAAIQ,aAAa;EAC1C,MAAMC,OAAO,GAAGf,UAAU,CAACI,SAAS,EAAE;IAAEC,MAAM;IAAEK,cAAc;IAAEC;EAAY,CAAC,CAAC;EAE9E,IAAIC,QAAQ,IAAIR,SAAS,EAAE,OAAOW,OAAO;EAEzC,oBACE,KAAC,SAAS;IAAC,SAAS,EAAEZ,OAAO,CAACa;EAAK,GAAKH,MAAM;IAAA,UAC3C,CAACT,SAAS,GAAGK,YAAY,GAAGM;EAAO,GAC1B;AAEhB,CAAC;AAED,wCAAAb,SAAS,CAACe,SAAS,GAAG;EACpB;AACF;AACA;EACEd,OAAO,EAAEP,SAAS,CAACsB,KAAK,CAAC;IACvB;AACJ;AACA;IACIF,IAAI,EAAEpB,SAAS,CAACuB;EAClB,CAAC,CAAC;EACF;AACF;AACA;EACEf,SAAS,EAAER,SAAS,CAACwB,MAAM;EAC3B;AACF;AACA;AACA;EACEf,MAAM,EAAET,SAAS,CAACuB,MAAM;EACxB;AACF;AACA;AACA;EACEZ,SAAS,EAAEX,SAAS,CAACyB,WAAW;EAChC;AACF;AACA;AACA;EACEZ,YAAY,EAAEb,SAAS,CAAC0B,IAAI;EAC5B;AACF;AACA;EACEZ,cAAc,EAAEd,SAAS,CAAC2B,IAAI;EAC9B;AACF;AACA;EACEZ,WAAW,EAAEf,SAAS,CAAC2B,IAAI;EAC3B;AACF;AACA;AACA;EACEX,QAAQ,EAAEhB,SAAS,CAAC2B;AACtB,CAAC;AAED,eAAe1B,UAAU,CAACI,MAAM,EAAE;EAAEuB,IAAI,EAAE;AAAY,CAAC,CAAC,CAACtB,SAAS,CAAC"}

package/dist/modern/TimeAgo/formatUtils.js

@@ -5,13 +5,13 @@ import localeData from "dayjs/plugin/localeData";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import relativeTime from "dayjs/plugin/relativeTime";
 import updateLocale from "dayjs/plugin/updateLocale";
+
 /**
  * Relative time thresholds defined by
  * {@link https://xd.adobe.com/view/1b7df235-5cf8-4b51-a2f0-0be1bb591c55-4e2e/ Design System}
  *
  * Implementation using day.js {@link https://day.js.org/docs/en/customization/relative-time relativeTime}
  */
-
 const thresholds = [{
   l: "s",
   r: 119,
@@ -68,7 +68,6 @@ export const secondsUntilNextDay = (date = new Date()) => {
   midnight.setMilliseconds(0);
   return (midnight.getTime() - date.getTime()) / 1000;
 };
-
 const secondsUntilNextWeek = (date = new Date()) => {
   const firstMonthDayOfWeek = date.getDate() - date.getDay();
   const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7; // auto roll over to next month if needed
@@ -81,6 +80,7 @@ const secondsUntilNextWeek = (date = new Date()) => {
   firstDayNextWeek.setMilliseconds(0);
   return (firstDayNextWeek.getTime() - date.getTime()) / 1000;
 };
+
 /**
  * @typedef {Object} TimeAgo
  * @property {string} timeAgo - the formatted date using the "time ago format"
@@ -97,64 +97,62 @@ const secondsUntilNextWeek = (date = new Date()) => {
  *
  * @return {TimeAgo} the formatted date using the "time ago format" and the time until it needs to be updated
  */
-
-
 export const formatTimeAgo = (date, locale, showSeconds = false, referenceDate = new Date()) => {
   const dayReferenceDate = dayjs(referenceDate);
   const dayDate = dayjs(date).locale(locale);
   const dayDiffSeconds = dayReferenceDate.diff(dayDate, "second");
-  const formatUseSeconds = showSeconds ? "LTS" : "LT"; // check if the date is after the reference date
+  const formatUseSeconds = showSeconds ? "LTS" : "LT";
 
+  // check if the date is after the reference date
   if (date.getTime() > referenceDate.getTime()) {
     return {
       timeAgo: dayDate.format(`L ${formatUseSeconds}`),
       delay: (date.getTime() - referenceDate.getTime()) / 1000
     };
-  } // just now, until the 2 minutes
-
+  }
 
+  // just now, until the 2 minutes
   if (dayDiffSeconds < 120) {
     return {
       timeAgo: dayjs.duration(dayDiffSeconds, "second").locale(locale).humanize(),
       delay: 120 - dayDiffSeconds
     };
-  } // ago in minutes, until the 1 hour mark
-
+  }
 
+  // ago in minutes, until the 1 hour mark
   const dayDiffMinutes = dayReferenceDate.diff(dayDate, "minute");
-
   if (dayDiffMinutes < 60) {
     return {
       timeAgo: dayjs.duration(-dayDiffMinutes, "minute").locale(locale).humanize(true),
       delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds
     };
-  } // formatted date with text description for today
-
+  }
 
+  // formatted date with text description for today
   if (dayReferenceDate.isSame(dayDate, "day")) {
     return {
       timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
       delay: secondsUntilNextDay(referenceDate)
     };
-  } // formatted date with text description for yesterday
-
+  }
 
+  // formatted date with text description for yesterday
   if (dayReferenceDate.subtract(1, "day").isSame(dayDate, "day")) {
     return {
       timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
       delay: secondsUntilNextDay(referenceDate)
     };
-  } // formatted date with week during the current week
-
+  }
 
+  // formatted date with week during the current week
   if (dayDate.isSame(dayReferenceDate, "week")) {
     return {
       timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),
       delay: secondsUntilNextWeek(date)
     };
-  } // formatted without special gimmicks
-
+  }
 
+  // formatted without special gimmicks
   return {
     timeAgo: dayDate.format(`L ${formatUseSeconds}`),
     delay: 0