@hitachivantara/uikit-react-lab 3.38.0

package/dist/Tag/Tag.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HvTag = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["id", "semantic", "children", "disabled", "variant", "color", "shape", "showcancelicon"];
+
+/**
+ * The tag is a component used to notify the user about the labelled ,categorised, or organised item , in the app context.
+ */
+var useStyles = (0, _core.makeStyles)(_styles.default, {
+  name: "HvTag"
+});
+
+var getColor = function getColor(theme, color, defaultColor) {
+  return theme.palette[color] || color || defaultColor;
+};
+
+var HvTag = function HvTag(props) {
+  var id = props.id,
+      semantic = props.semantic,
+      children = props.children,
+      disabled = props.disabled,
+      variant = props.variant,
+      color = props.color,
+      shape = props.shape,
+      _props$showcancelicon = props.showcancelicon,
+      showcancelicon = _props$showcancelicon === void 0 ? false : _props$showcancelicon,
+      others = (0, _objectWithoutProperties2.default)(props, _excluded);
+  (0, _uikitReactCore.useDeprecated)("Tag", "Please use the Tag component in Core");
+  var classes = useStyles();
+  var isDisabled = disabled || false;
+  var Tagshape = shape || classes.square;
+  var theme = (0, _core.useTheme)();
+  var inlineStyle = {};
+
+  if (semantic) {
+    var _theme$palette;
+
+    inlineStyle.backgroundColor = getColor(theme, (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette[semantic], theme.hv.palette.accent.acce1);
+  }
+  /**
+   * Renders the content for the tag elements.
+   */
+
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    id: id,
+    role: "button",
+    className: (0, _clsx.default)(classes.root, classes[variant], others, isDisabled && classes.disabled, Tagshape && classes["".concat(shape)]),
+    style: inlineStyle,
+    disabled: isDisabled
+  }, others), /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.label
+  }, children), showcancelicon && /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Close, {
+    className: (0, _clsx.default)(classes.deleteIcon, isDisabled && classes.disabled),
+    color: "atmo5"
+  }));
+};
+
+exports.HvTag = HvTag;
+HvTag.propTypes = {
+  /**
+   * Id to be applied to the root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   *   A Jss Object used to override or extend the styles applied to the tag.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the component label.
+     */
+    label: _propTypes.default.string,
+
+    /**
+     * Styles applied to the component when it is tag.
+     */
+    square: _propTypes.default.string,
+
+    /**
+     * Styles applied to the component when it is chip.
+     */
+    round: _propTypes.default.string,
+
+    /**
+     * Styles applied to the component when shows label.
+     */
+    deleteIcon: _propTypes.default.string,
+
+    /**
+     * Styles applied to the component when disabled.
+     */
+    disabled: _propTypes.default.string,
+
+    /**
+     * Styles applied to the button if keyboard focused.
+     */
+    focusVisible: _propTypes.default.string
+  }),
+
+  /**
+   * A String representing the background color of the tag.
+   * You can use either an HEX or color name from the palette.
+   */
+  backgroundColor: _propTypes.default.string,
+
+  /**
+   * Category of tag to use
+   */
+  variant: _propTypes.default.oneOf(["informational", "success", "warning", "error", "categorical"]),
+
+  /**
+   * A String or Array of strings representing the colors to override in the icon.
+   * Each element inside the array will override a diferent color.
+   * You can use either an HEX or color name from the palette.
+   */
+  color: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+
+  /**
+   * Sets one of the standard semantic palette colors of the icon
+   */
+  semantic: _propTypes.default.oneOf(["sema1", "sema2", "sema3", "sema4", "sema5", "sema6", "sema7", "sema8", "sema9", "sema10", "sema11", "sema12", "sema13", "sema14", "sema15", "sema16", "sema17", "sema18", "sema19", "sema20"]),
+  shape: _propTypes.default.string,
+
+  /**
+   * The content of the Tag.
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * The disabled property of the Tag.
+   */
+  disabled: _propTypes.default.string,
+
+  /**
+   * The cancel icon is shown based on this property
+   */
+  showcancelicon: _propTypes.default.bool
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvTag"
+})(HvTag);
+
+exports.default = _default;
+//# sourceMappingURL=Tag.js.map

package/dist/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tag/Tag.js"],"names":["useStyles","styles","name","getColor","theme","color","defaultColor","palette","HvTag","props","id","semantic","children","disabled","variant","shape","showcancelicon","others","classes","isDisabled","Tagshape","square","inlineStyle","backgroundColor","hv","accent","acce1","root","label","deleteIcon","propTypes","PropTypes","string","round","focusVisible","oneOf","oneOfType","arrayOf","node","isRequired","bool"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDeprecated } from \"@hitachivantara/uikit-react-core\";\n\nimport clsx from \"clsx\";\nimport { withStyles, makeStyles, useTheme } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\n/**\n * The tag is a component used to notify the user about the labelled ,categorised, or organised item , in the app context.\n */\nconst useStyles = makeStyles(styles, { name: \"HvTag\" });\n\nconst getColor = (theme, color, defaultColor) => theme.palette[color] || color || defaultColor;\nexport const HvTag = (props) => {\n  const {\n    id,\n    semantic,\n    children,\n    disabled,\n    variant,\n    color,\n    shape,\n    showcancelicon = false,\n    ...others\n  } = props;\n\n  useDeprecated(\"Tag\", \"Please use the Tag component in Core\");\n  const classes = useStyles();\n  const isDisabled = disabled || false;\n  const Tagshape = shape || classes.square;\n  const theme = useTheme();\n  const inlineStyle = {};\n\n  if (semantic) {\n    inlineStyle.backgroundColor = getColor(\n      theme,\n      theme.palette?.[semantic],\n      theme.hv.palette.accent.acce1\n    );\n  }\n\n  /**\n   * Renders the content for the tag elements.\n   */\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={clsx(\n        classes.root,\n        classes[variant],\n        { ...others },\n        {\n          [classes.disabled]: isDisabled,\n          [classes[`${shape}`]]: Tagshape,\n        }\n      )}\n      style={inlineStyle}\n      disabled={isDisabled}\n      {...others}\n    >\n      <span className={classes.label}>{children}</span>\n      {showcancelicon && (\n        <Close\n          className={clsx(classes.deleteIcon, {\n            [classes.disabled]: isDisabled,\n          })}\n          color=\"atmo5\"\n        />\n      )}\n    </div>\n  );\n};\n\nHvTag.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   *   A Jss Object used to override or extend the styles applied to the tag.\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 component label.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the component when it is tag.\n     */\n    square: PropTypes.string,\n    /**\n     * Styles applied to the component when it is chip.\n     */\n    round: PropTypes.string,\n\n    /**\n     * Styles applied to the component when shows label.\n     */\n    deleteIcon: PropTypes.string,\n    /**\n     * Styles applied to the component when disabled.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the button if keyboard focused.\n     */\n    focusVisible: PropTypes.string,\n  }),\n  /**\n   * A String representing the background color of the tag.\n   * You can use either an HEX or color name from the palette.\n   */\n  backgroundColor: PropTypes.string,\n  /**\n   * Category of tag to use\n   */\n  variant: PropTypes.oneOf([\"informational\", \"success\", \"warning\", \"error\", \"categorical\"]),\n  /**\n   * A String or Array of strings representing the colors to override in the icon.\n   * Each element inside the array will override a diferent color.\n   * You can use either an HEX or color name from the palette.\n   */\n  color: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  /**\n   * Sets one of the standard semantic palette colors of the icon\n   */\n  semantic: PropTypes.oneOf([\n    \"sema1\",\n    \"sema2\",\n    \"sema3\",\n    \"sema4\",\n    \"sema5\",\n    \"sema6\",\n    \"sema7\",\n    \"sema8\",\n    \"sema9\",\n    \"sema10\",\n    \"sema11\",\n    \"sema12\",\n    \"sema13\",\n    \"sema14\",\n    \"sema15\",\n    \"sema16\",\n    \"sema17\",\n    \"sema18\",\n    \"sema19\",\n    \"sema20\",\n  ]),\n  shape: PropTypes.string,\n  /**\n   * The content of the Tag.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * The disabled property of the Tag.\n   */\n  disabled: PropTypes.string,\n  /**\n   * The cancel icon is shown based on this property\n   */\n  showcancelicon: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"file":"Tag.js"}

package/dist/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Tag";
+export * from "./Tag";

package/dist/Tag/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
+
+var _Tag = _interopRequireDefault(require("./Tag"));
+//# sourceMappingURL=index.js.map

package/dist/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tag/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./Tag\";\n"],"file":"index.js"}

package/dist/Tag/styles.js

@@ -0,0 +1,128 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.outlineStyles = exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var outlineStyles = {
+  outlineColor: "#52A8EC",
+  outlineStyle: "solid",
+  outlineWidth: "0px",
+  outlineOffset: "-1px",
+  boxShadow: "0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)"
+};
+exports.outlineStyles = outlineStyles;
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      position: "relative",
+      cursor: "pointer",
+      display: "flex",
+      justifyContent: "center",
+      flexWrap: "wrap",
+      backgroundColor: theme.hv.palette.semantic.sema7,
+      margin: "0 8px 8px 0",
+      float: "left",
+      minWidth: 70,
+      padding: theme.hvSpacing(0, "xs"),
+      height: 20,
+      minHeight: 20,
+      textAlign: "center",
+      " &:hover": {
+        "&:not(disabled)": {
+          "& > div svg": _objectSpread({
+            backgroundColor: theme.hv.palette.atmosphere.atmo4
+          }, outlineStyles),
+          "&:focus": {
+            "& > div svg": _objectSpread({
+              backgroundColor: theme.hv.palette.atmosphere.atmo4
+            }, outlineStyles)
+          }
+        }
+      }
+    },
+
+    /* Styles applied to the label `span` element. */
+    label: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      paddingLeft: 12,
+      paddingRight: 12,
+      whiteSpace: "nowrap",
+      maxWidth: 200,
+      minHeight: 20
+    },
+    square: {
+      borderRadius: 2
+    },
+    round: {
+      borderRadius: 28
+    },
+    deleteIcon: {
+      WebkitTapHighlightColor: "transparent",
+      height: 10,
+      width: 12,
+      cursor: "pointer",
+      color: "white",
+      "&:hover": {
+        "& *": _objectSpread({
+          backgroundColor: theme.palette.atmo3
+        }, outlineStyles)
+      }
+    },
+    focusVisible: {},
+    disabled: {
+      color: theme.hv.palette.atmosphere.atmo5,
+      cursor: "not-allowed",
+      PointerEvent: "none",
+      opacity: 1,
+      "&:hover": {
+        color: theme.hv.palette.atmosphere.atmo5,
+        border: "transparent"
+      },
+      "&$focusVisible": _objectSpread({
+        backgroundColor: theme.palette.atmo3
+      }, outlineStyles)
+    },
+    informational: {
+      backgroundColor: theme.hv.palette.semantic.sema7
+    },
+    success: {
+      backgroundColor: theme.hv.palette.semantic.sema8
+    },
+    warning: {
+      backgroundColor: theme.hv.palette.semantic.sema20
+    },
+    error: {
+      backgroundColor: theme.hv.palette.semantic.sema9
+    }
+  };
+};
+
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/Tag/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tag/styles.js"],"names":["outlineStyles","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","styles","theme","root","position","cursor","display","justifyContent","flexWrap","backgroundColor","hv","palette","semantic","sema7","margin","float","minWidth","padding","hvSpacing","height","minHeight","textAlign","atmosphere","atmo4","label","overflow","textOverflow","paddingLeft","paddingRight","whiteSpace","maxWidth","square","borderRadius","round","deleteIcon","WebkitTapHighlightColor","width","color","atmo3","focusVisible","disabled","atmo5","PointerEvent","opacity","border","informational","success","sema8","warning","sema20","error","sema9"],"mappings":"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","sourcesContent":["export const outlineStyles = {\n  outlineColor: \"#52A8EC\",\n  outlineStyle: \"solid\",\n  outlineWidth: \"0px\",\n  outlineOffset: \"-1px\",\n  boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n};\n\nconst styles = (theme) => ({\n  root: {\n    position: \"relative\",\n    cursor: \"pointer\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    flexWrap: \"wrap\",\n    backgroundColor: theme.hv.palette.semantic.sema7,\n    margin: \"0 8px 8px 0\",\n    float: \"left\",\n    minWidth: 70,\n    padding: theme.hvSpacing(0, \"xs\"),\n    height: 20,\n    minHeight: 20,\n    textAlign: \"center\",\n    \" &:hover\": {\n      \"&:not(disabled)\": {\n        \"& > div svg\": {\n          backgroundColor: theme.hv.palette.atmosphere.atmo4,\n          ...outlineStyles,\n        },\n        \"&:focus\": {\n          \"& > div svg\": {\n            backgroundColor: theme.hv.palette.atmosphere.atmo4,\n            ...outlineStyles,\n          },\n        },\n      },\n    },\n  },\n  /* Styles applied to the label `span` element. */\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    paddingLeft: 12,\n    paddingRight: 12,\n    whiteSpace: \"nowrap\",\n    maxWidth: 200,\n    minHeight: 20,\n  },\n  square: {\n    borderRadius: 2,\n  },\n  round: {\n    borderRadius: 28,\n  },\n\n  deleteIcon: {\n    WebkitTapHighlightColor: \"transparent\",\n    height: 10,\n    width: 12,\n    cursor: \"pointer\",\n    color: \"white\",\n    \"&:hover\": {\n      \"& *\": {\n        backgroundColor: theme.palette.atmo3,\n        ...outlineStyles,\n      },\n    },\n  },\n  focusVisible: {},\n  disabled: {\n    color: theme.hv.palette.atmosphere.atmo5,\n    cursor: \"not-allowed\",\n    PointerEvent: \"none\",\n    opacity: 1,\n    \"&:hover\": {\n      color: theme.hv.palette.atmosphere.atmo5,\n      border: `transparent`,\n    },\n    \"&$focusVisible\": {\n      backgroundColor: theme.palette.atmo3,\n      ...outlineStyles,\n    },\n  },\n  informational: {\n    backgroundColor: theme.hv.palette.semantic.sema7,\n  },\n  success: {\n    backgroundColor: theme.hv.palette.semantic.sema8,\n  },\n  warning: {\n    backgroundColor: theme.hv.palette.semantic.sema20,\n  },\n  error: {\n    backgroundColor: theme.hv.palette.semantic.sema9,\n  },\n});\nexport default styles;\n"],"file":"styles.js"}

package/dist/TimeAgo/TimeAgo.d.ts

@@ -0,0 +1,42 @@
+import { StandardProps } from "@material-ui/core";
+
+export type HvTimeAgoClassKey = "root";
+
+export interface HvTimeAgoProps
+  extends StandardProps<React.HTMLAttributes<HTMLElement>, HvTimeAgoClassKey> {
+  /**
+   * The timestamp to format, in seconds or milliseconds.
+   * Defaults to `emptyElement` if value is null or 0
+   */
+  timestamp?: number;
+  /**
+   * The locale to be used. Should be on of the dayjs supported locales and explicitly imported
+   * @see https://day.js.org/docs/en/i18n/i18n
+   */
+  locale?: string;
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `HvTypography`.
+   */
+  component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+  /**
+   * The element to render when the timestamp is null or 0
+   * Defaults to `—` (Em Dash)
+   */
+  emptyElement?: React.ReactNode;
+  /**
+   * Disables periodic date refreshes
+   */
+  disableRefresh?: boolean;
+  /**
+   * Whether to show seconds in the rendered time
+   */
+  showSeconds?: boolean;
+  /**
+   * Whether the component should render just the string
+   * Consider using `useTimeAgo` instead
+   */
+  justText?: boolean;
+}
+
+export default function HvTimeAgo(props: HvTimeAgoProps): JSX.Element | null;

package/dist/TimeAgo/TimeAgo.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _useTimeAgo = _interopRequireDefault(require("./useTimeAgo"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["classes", "timestamp", "locale", "component", "emptyElement", "disableRefresh", "showSeconds", "justText"];
+
+/**
+ * The HvTimeAgo component implements the Design System relative time format guidelines.
+ */
+var HvTimeAgo = function HvTimeAgo(_ref) {
+  var classes = _ref.classes,
+      timestamp = _ref.timestamp,
+      localeProp = _ref.locale,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? _uikitReactCore.HvTypography : _ref$component,
+      _ref$emptyElement = _ref.emptyElement,
+      emptyElement = _ref$emptyElement === void 0 ? "—" : _ref$emptyElement,
+      _ref$disableRefresh = _ref.disableRefresh,
+      disableRefresh = _ref$disableRefresh === void 0 ? false : _ref$disableRefresh,
+      _ref$showSeconds = _ref.showSeconds,
+      showSeconds = _ref$showSeconds === void 0 ? false : _ref$showSeconds,
+      _ref$justText = _ref.justText,
+      justText = _ref$justText === void 0 ? false : _ref$justText,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var contextLocale = (0, _uikitReactCore.useLocale)();
+  var locale = localeProp || contextLocale;
+  var timeAgo = (0, _useTimeAgo.default)(timestamp, {
+    locale: locale,
+    disableRefresh: disableRefresh,
+    showSeconds: showSeconds
+  });
+  if (justText && timestamp) return timeAgo;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    className: classes.root
+  }, others), !timestamp ? emptyElement : timeAgo);
+};
+
+HvTimeAgo.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the component root class.
+     */
+    root: _propTypes.default.string
+  }),
+
+  /**
+   * The timestamp to format, in seconds
+   */
+  timestamp: _propTypes.default.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.default.string,
+
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `div`.
+   */
+  component: _propTypes.default.elementType,
+
+  /**
+   * The element to render when the timestamp is null or 0
+   * Defaults to `—` (Em Dash)
+   */
+  emptyElement: _propTypes.default.node,
+
+  /**
+   * Disables periodic date refreshes
+   */
+  disableRefresh: _propTypes.default.bool,
+
+  /**
+   * Whether to show seconds in the rendered time
+   */
+  showSeconds: _propTypes.default.bool,
+
+  /**
+   * Whether the component should render just the string
+   * Consider using `useTimeAgo` instead
+   */
+  justText: _propTypes.default.bool
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvTimeAgo"
+})(HvTimeAgo);
+
+exports.default = _default;
+//# sourceMappingURL=TimeAgo.js.map

package/dist/TimeAgo/TimeAgo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeAgo/TimeAgo.js"],"names":["HvTimeAgo","classes","timestamp","localeProp","locale","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","contextLocale","timeAgo","root","propTypes","PropTypes","shape","string","number","elementType","node","bool","styles","name"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA;AACA;AACA;AACA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAUZ;AAAA,MATJC,OASI,QATJA,OASI;AAAA,MARJC,SAQI,QARJA,SAQI;AAAA,MAPIC,UAOJ,QAPJC,MAOI;AAAA,4BANJC,SAMI;AAAA,MANOC,SAMP,+BANmBC,4BAMnB;AAAA,+BALJC,YAKI;AAAA,MALJA,YAKI,kCALW,GAKX;AAAA,iCAJJC,cAII;AAAA,MAJJA,cAII,oCAJa,KAIb;AAAA,8BAHJC,WAGI;AAAA,MAHJA,WAGI,iCAHU,KAGV;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,KAEP;AAAA,MADDC,MACC;AACJ,MAAMC,aAAa,GAAG,gCAAtB;AACA,MAAMT,MAAM,GAAGD,UAAU,IAAIU,aAA7B;AACA,MAAMC,OAAO,GAAG,yBAAWZ,SAAX,EAAsB;AAAEE,IAAAA,MAAM,EAANA,MAAF;AAAUK,IAAAA,cAAc,EAAdA,cAAV;AAA0BC,IAAAA,WAAW,EAAXA;AAA1B,GAAtB,CAAhB;AAEA,MAAIC,QAAQ,IAAIT,SAAhB,EAA2B,OAAOY,OAAP;AAE3B,sBACE,6BAAC,SAAD;AAAW,IAAA,SAAS,EAAEb,OAAO,CAACc;AAA9B,KAAwCH,MAAxC,GACG,CAACV,SAAD,GAAaM,YAAb,GAA4BM,OAD/B,CADF;AAKD,CAtBD;;AAwBAd,SAAS,CAACgB,SAAV,GAAsB;AACpB;AACF;AACA;AACEf,EAAAA,OAAO,EAAEgB,mBAAUC,KAAV,CAAgB;AACvB;AACJ;AACA;AACIH,IAAAA,IAAI,EAAEE,mBAAUE;AAJO,GAAhB,CAJW;;AAUpB;AACF;AACA;AACEjB,EAAAA,SAAS,EAAEe,mBAAUG,MAbD;;AAcpB;AACF;AACA;AACA;AACEhB,EAAAA,MAAM,EAAEa,mBAAUE,MAlBE;;AAmBpB;AACF;AACA;AACA;AACEd,EAAAA,SAAS,EAAEY,mBAAUI,WAvBD;;AAwBpB;AACF;AACA;AACA;AACEb,EAAAA,YAAY,EAAES,mBAAUK,IA5BJ;;AA6BpB;AACF;AACA;AACEb,EAAAA,cAAc,EAAEQ,mBAAUM,IAhCN;;AAiCpB;AACF;AACA;AACEb,EAAAA,WAAW,EAAEO,mBAAUM,IApCH;;AAqCpB;AACF;AACA;AACA;AACEZ,EAAAA,QAAQ,EAAEM,mBAAUM;AAzCA,CAAtB;;eA4Ce,sBAAWC,eAAX,EAAmB;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAA0CzB,SAA1C,C","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\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"],"file":"TimeAgo.js"}