@hitachivantara/uikit-react-core 5.4.0 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Forms/Suggestions/Suggestions.styles.cjs +4 -4
- package/dist/cjs/components/Forms/Suggestions/Suggestions.styles.cjs.map +1 -1
- package/dist/cjs/components/TimeAgo/TimeAgo.cjs +39 -0
- package/dist/cjs/components/TimeAgo/TimeAgo.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/formatUtils.cjs +134 -0
- package/dist/cjs/components/TimeAgo/formatUtils.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/timeAgoClasses.cjs +8 -0
- package/dist/cjs/components/TimeAgo/timeAgoClasses.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/useTimeAgo.cjs +29 -0
- package/dist/cjs/components/TimeAgo/useTimeAgo.cjs.map +1 -0
- package/dist/cjs/components/TimeAgo/useTimeout.cjs +17 -0
- package/dist/cjs/components/TimeAgo/useTimeout.cjs.map +1 -0
- package/dist/cjs/index.cjs +4 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/components/Forms/Suggestions/Suggestions.styles.js +5 -5
- package/dist/esm/components/Forms/Suggestions/Suggestions.styles.js.map +1 -1
- package/dist/esm/components/TimeAgo/TimeAgo.js +37 -0
- package/dist/esm/components/TimeAgo/TimeAgo.js.map +1 -0
- package/dist/esm/components/TimeAgo/formatUtils.js +126 -0
- package/dist/esm/components/TimeAgo/formatUtils.js.map +1 -0
- package/dist/esm/components/TimeAgo/timeAgoClasses.js +8 -0
- package/dist/esm/components/TimeAgo/timeAgoClasses.js.map +1 -0
- package/dist/esm/components/TimeAgo/useTimeAgo.js +29 -0
- package/dist/esm/components/TimeAgo/useTimeAgo.js.map +1 -0
- package/dist/esm/components/TimeAgo/useTimeout.js +17 -0
- package/dist/esm/components/TimeAgo/useTimeout.js.map +1 -0
- package/dist/esm/index.js +22 -18
- package/dist/esm/index.js.map +1 -1
- package/dist/types/index.d.ts +51 -0
- package/package.json +3 -3
|
@@ -20,7 +20,7 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
|
|
|
20
20
|
} : {
|
|
21
21
|
name: "bjn8wh",
|
|
22
22
|
styles: "position:relative",
|
|
23
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
23
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9TdWdnZXN0aW9ucy9TdWdnZXN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQb3BwZXIgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdlNlbGVjdGlvbkxpc3QgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNlbGVjdGlvbkxpc3QgPSBzdHlsZWQoSHZTZWxlY3Rpb25MaXN0KSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBib3hTaGFkb3c6IHRoZW1lLmNvbG9ycy5zaGFkb3csXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnhzLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHBlciA9IHN0eWxlZChQb3BwZXIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlM2QoMCwgLTFweCwgMCkgIWltcG9ydGFudFwiLFxuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnRvb2x0aXAsXG59KTtcbiJdfQ== */",
|
|
24
24
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
25
25
|
});
|
|
26
26
|
const StyledSelectionList = /* @__PURE__ */ _styled__default.default(SelectionList.HvSelectionList, process.env.NODE_ENV === "production" ? {
|
|
@@ -33,8 +33,8 @@ const StyledSelectionList = /* @__PURE__ */ _styled__default.default(SelectionLi
|
|
|
33
33
|
boxShadow: uikitStyles.theme.colors.shadow,
|
|
34
34
|
padding: uikitStyles.theme.space.xs,
|
|
35
35
|
width: "100%"
|
|
36
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
37
|
-
const StyledPopper = /* @__PURE__ */ _styled__default.default(base.
|
|
36
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTbUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9TdWdnZXN0aW9ucy9TdWdnZXN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQb3BwZXIgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdlNlbGVjdGlvbkxpc3QgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNlbGVjdGlvbkxpc3QgPSBzdHlsZWQoSHZTZWxlY3Rpb25MaXN0KSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBib3hTaGFkb3c6IHRoZW1lLmNvbG9ycy5zaGFkb3csXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnhzLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHBlciA9IHN0eWxlZChQb3BwZXIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlM2QoMCwgLTFweCwgMCkgIWltcG9ydGFudFwiLFxuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnRvb2x0aXAsXG59KTtcbiJdfQ== */");
|
|
37
|
+
const StyledPopper = /* @__PURE__ */ _styled__default.default(base.Popper, process.env.NODE_ENV === "production" ? {
|
|
38
38
|
target: "eqrftyh0"
|
|
39
39
|
} : {
|
|
40
40
|
target: "eqrftyh0",
|
|
@@ -44,7 +44,7 @@ const StyledPopper = /* @__PURE__ */ _styled__default.default(base.PopperUnstyle
|
|
|
44
44
|
position: "absolute",
|
|
45
45
|
transform: "translate3d(0, -1px, 0) !important",
|
|
46
46
|
zIndex: uikitStyles.theme.zIndices.tooltip
|
|
47
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
47
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQjRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgUG9wcGVyIH0gZnJvbSBcIkBtdWkvYmFzZVwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZTZWxlY3Rpb25MaXN0IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTZWxlY3Rpb25MaXN0ID0gc3R5bGVkKEh2U2VsZWN0aW9uTGlzdCkoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICBwYWRkaW5nOiB0aGVtZS5zcGFjZS54cyxcbiAgd2lkdGg6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQb3BwZXIgPSBzdHlsZWQoUG9wcGVyKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZTNkKDAsIC0xcHgsIDApICFpbXBvcnRhbnRcIixcbiAgekluZGV4OiB0aGVtZS56SW5kaWNlcy50b29sdGlwLFxufSk7XG4iXX0= */");
|
|
48
48
|
exports.StyledPopper = StyledPopper;
|
|
49
49
|
exports.StyledRoot = StyledRoot;
|
|
50
50
|
exports.StyledSelectionList = StyledSelectionList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Suggestions.styles.cjs","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {
|
|
1
|
+
{"version":3,"file":"Suggestions.styles.cjs","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Popper } from \"@mui/base\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvSelectionList } from \"@core/components\";\n\nexport const StyledRoot = styled(\"div\")({\n position: \"relative\",\n});\n\nexport const StyledSelectionList = styled(HvSelectionList)({\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n padding: theme.space.xs,\n width: \"100%\",\n});\n\nexport const StyledPopper = styled(Popper)({\n width: \"100%\",\n position: \"absolute\",\n transform: \"translate3d(0, -1px, 0) !important\",\n zIndex: theme.zIndices.tooltip,\n});\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSelectionList","HvSelectionList","backgroundColor","theme","colors","atmo1","boxShadow","shadow","padding","space","xs","width","StyledPopper","Popper","position","transform","zIndex","zIndices","tooltip"],"mappings":";;;;;;;;;;;AAKO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAErC;AAEK,MAAMC,sBAA6BC,iCAAAA,QAAAA,cAAAA,iBAAeX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzDQ,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,EAC9BC,WAAWH,YAAAA,MAAMC,OAAOG;AAAAA,EACxBC,SAASL,YAAAA,MAAMM,MAAMC;AAAAA,EACrBC,OAAO;AACT,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,61CAAA;AAEK,MAAMoB,eAAsBC,iCAAAA,QAAAA,KAAAA,QAAMvB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCiB,OAAO;AAAA,EACPG,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,QAAQb,YAAAA,MAAMc,SAASC;AACzB,GAAC5B,QAAAC,IAAAC,aAAC,eAAA,KAAA,61CAAA;;;;"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const clsx = require("clsx");
|
|
4
|
+
const isEmpty = require("lodash/isEmpty");
|
|
5
|
+
const timeAgoClasses = require("./timeAgoClasses.cjs");
|
|
6
|
+
const useTimeAgo = require("./useTimeAgo.cjs");
|
|
7
|
+
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
8
|
+
const Typography = require("../Typography/Typography.cjs");
|
|
9
|
+
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
10
|
+
const isEmpty__default = /* @__PURE__ */ _interopDefault(isEmpty);
|
|
11
|
+
const HvTimeAgo = ({
|
|
12
|
+
classes,
|
|
13
|
+
timestamp,
|
|
14
|
+
locale: localeProp = "en",
|
|
15
|
+
component: Component = Typography.HvTypography,
|
|
16
|
+
emptyElement = "—",
|
|
17
|
+
disableRefresh = false,
|
|
18
|
+
showSeconds = false,
|
|
19
|
+
justText = false,
|
|
20
|
+
...others
|
|
21
|
+
}) => {
|
|
22
|
+
const locale = isEmpty__default.default(localeProp) ? "en" : localeProp;
|
|
23
|
+
const timeAgo = useTimeAgo.default(timestamp, {
|
|
24
|
+
locale,
|
|
25
|
+
disableRefresh,
|
|
26
|
+
showSeconds
|
|
27
|
+
});
|
|
28
|
+
if (justText && timestamp)
|
|
29
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
30
|
+
children: timeAgo
|
|
31
|
+
});
|
|
32
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Component, {
|
|
33
|
+
className: clsx.clsx(classes == null ? void 0 : classes.root, timeAgoClasses.default.root),
|
|
34
|
+
...others,
|
|
35
|
+
children: !timestamp ? emptyElement : timeAgo
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
exports.HvTimeAgo = HvTimeAgo;
|
|
39
|
+
//# sourceMappingURL=TimeAgo.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeAgo.cjs","sources":["../../../../src/components/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport isEmpty from \"lodash/isEmpty\";\nimport timeAgoClasses, { HvTimeAgoClasses } from \"./timeAgoClasses\";\nimport useTimeAgo from \"./useTimeAgo\";\n\nexport interface HvTimeAgoProps extends HvBaseProps<HTMLElement, { children }> {\n /**\n * The timestamp to format, in seconds or milliseconds.\n * Defaults to `emptyElement` if value is null or 0\n */\n timestamp?: number;\n /**\n * The locale to be used. Should be on of the dayjs supported locales and explicitly imported\n * @see https://day.js.org/docs/en/i18n/i18n\n */\n locale?: string;\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to `HvTypography`.\n */\n component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;\n /**\n * The element to render when the timestamp is null or 0\n * Defaults to `—` (Em Dash)\n */\n emptyElement?: React.ReactNode;\n /**\n * Disables periodic date refreshes\n */\n disableRefresh?: boolean;\n /**\n * Whether to show seconds in the rendered time\n */\n showSeconds?: boolean;\n /**\n * Whether the component should render just the string\n * Consider using `useTimeAgo` instead\n */\n justText?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTimeAgoClasses;\n}\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nexport const HvTimeAgo = ({\n classes,\n timestamp,\n locale: localeProp = \"en\",\n component: Component = HvTypography,\n emptyElement = \"—\",\n disableRefresh = false,\n showSeconds = false,\n justText = false,\n ...others\n}: HvTimeAgoProps) => {\n const locale = isEmpty(localeProp) ? \"en\" : localeProp;\n const timeAgo = useTimeAgo(timestamp, {\n locale,\n disableRefresh,\n showSeconds,\n });\n\n if (justText && timestamp) return <>{timeAgo}</>;\n\n return (\n <Component className={clsx(classes?.root, timeAgoClasses.root)} {...others}>\n {!timestamp ? emptyElement : timeAgo}\n </Component>\n );\n};\n"],"names":["HvTimeAgo","classes","timestamp","locale","localeProp","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","isEmpty","timeAgo","useTimeAgo","_Fragment","children","className","clsx","root","timeAgoClasses"],"mappings":";;;;;;;;;;AAgDO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,QAAQC,aAAa;AAAA,EACrBC,WAAWC,YAAYC,WAAAA;AAAAA,EACvBC,eAAe;AAAA,EACfC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,WAAW;AAAA,EACX,GAAGC;AACW,MAAM;AACpB,QAAMT,SAASU,iBAAAA,QAAQT,UAAU,IAAI,OAAOA;AACtCU,QAAAA,UAAUC,mBAAWb,WAAW;AAAA,IACpCC;AAAAA,IACAM;AAAAA,IACAC;AAAAA,EAAAA,CACD;AAED,MAAIC,YAAYT;AAAW,0CAAOc,WAAAA,UAAA;AAAA,MAAAC,UAAGH;AAAAA,IAAAA,CAAW;AAEhD,wCACGR,WAAS;AAAA,IAACY,WAAWC,KAAAA,KAAKlB,mCAASmB,MAAMC,eAAAA,QAAeD,IAAI;AAAA,IAAE,GAAKR;AAAAA,IAAMK,UACvE,CAACf,YAAYM,eAAeM;AAAAA,EAAAA,CACnB;AAEhB;;"}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const dayjs = require("dayjs");
|
|
4
|
+
const calendar = require("dayjs/plugin/calendar");
|
|
5
|
+
const duration = require("dayjs/plugin/duration");
|
|
6
|
+
const localeData = require("dayjs/plugin/localeData");
|
|
7
|
+
const localizedFormat = require("dayjs/plugin/localizedFormat");
|
|
8
|
+
const relativeTime = require("dayjs/plugin/relativeTime");
|
|
9
|
+
const updateLocale = require("dayjs/plugin/updateLocale");
|
|
10
|
+
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
11
|
+
const dayjs__default = /* @__PURE__ */ _interopDefault(dayjs);
|
|
12
|
+
const calendar__default = /* @__PURE__ */ _interopDefault(calendar);
|
|
13
|
+
const duration__default = /* @__PURE__ */ _interopDefault(duration);
|
|
14
|
+
const localeData__default = /* @__PURE__ */ _interopDefault(localeData);
|
|
15
|
+
const localizedFormat__default = /* @__PURE__ */ _interopDefault(localizedFormat);
|
|
16
|
+
const relativeTime__default = /* @__PURE__ */ _interopDefault(relativeTime);
|
|
17
|
+
const updateLocale__default = /* @__PURE__ */ _interopDefault(updateLocale);
|
|
18
|
+
const thresholds = [{
|
|
19
|
+
l: "s",
|
|
20
|
+
r: 119,
|
|
21
|
+
d: "second"
|
|
22
|
+
}, {
|
|
23
|
+
l: "m",
|
|
24
|
+
r: 1
|
|
25
|
+
}, {
|
|
26
|
+
l: "mm",
|
|
27
|
+
r: 59,
|
|
28
|
+
d: "minute"
|
|
29
|
+
}, {
|
|
30
|
+
l: "h",
|
|
31
|
+
r: 1
|
|
32
|
+
}, {
|
|
33
|
+
l: "hh",
|
|
34
|
+
r: 23,
|
|
35
|
+
d: "hour"
|
|
36
|
+
}, {
|
|
37
|
+
l: "d",
|
|
38
|
+
r: 1
|
|
39
|
+
}, {
|
|
40
|
+
l: "dd",
|
|
41
|
+
r: 29,
|
|
42
|
+
d: "day"
|
|
43
|
+
}, {
|
|
44
|
+
l: "M",
|
|
45
|
+
r: 1
|
|
46
|
+
}, {
|
|
47
|
+
l: "MM",
|
|
48
|
+
r: 11,
|
|
49
|
+
d: "month"
|
|
50
|
+
}, {
|
|
51
|
+
l: "y",
|
|
52
|
+
r: 17
|
|
53
|
+
}, {
|
|
54
|
+
l: "yy",
|
|
55
|
+
d: "year"
|
|
56
|
+
}];
|
|
57
|
+
dayjs__default.default.extend(localeData__default.default);
|
|
58
|
+
dayjs__default.default.extend(duration__default.default);
|
|
59
|
+
dayjs__default.default.extend(calendar__default.default);
|
|
60
|
+
dayjs__default.default.extend(localizedFormat__default.default);
|
|
61
|
+
dayjs__default.default.extend(relativeTime__default.default, {
|
|
62
|
+
thresholds
|
|
63
|
+
});
|
|
64
|
+
dayjs__default.default.extend(updateLocale__default.default);
|
|
65
|
+
const secondsUntilNextDay = (date = /* @__PURE__ */ new Date()) => {
|
|
66
|
+
const midnight = new Date(date.getTime());
|
|
67
|
+
midnight.setDate(midnight.getDate() + 1);
|
|
68
|
+
midnight.setHours(0);
|
|
69
|
+
midnight.setMinutes(0);
|
|
70
|
+
midnight.setSeconds(0);
|
|
71
|
+
midnight.setMilliseconds(0);
|
|
72
|
+
return (midnight.getTime() - date.getTime()) / 1e3;
|
|
73
|
+
};
|
|
74
|
+
const secondsUntilNextWeek = (date = /* @__PURE__ */ new Date()) => {
|
|
75
|
+
const firstMonthDayOfWeek = date.getDate() - date.getDay();
|
|
76
|
+
const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7;
|
|
77
|
+
const firstDayNextWeek = new Date(date.getTime());
|
|
78
|
+
firstDayNextWeek.setDate(firstMonthDayOfNextWeek);
|
|
79
|
+
firstDayNextWeek.setHours(0);
|
|
80
|
+
firstDayNextWeek.setMinutes(0);
|
|
81
|
+
firstDayNextWeek.setSeconds(0);
|
|
82
|
+
firstDayNextWeek.setMilliseconds(0);
|
|
83
|
+
return (firstDayNextWeek.getTime() - date.getTime()) / 1e3;
|
|
84
|
+
};
|
|
85
|
+
const formatTimeAgo = (date, locale, showSeconds = false, referenceDate = /* @__PURE__ */ new Date()) => {
|
|
86
|
+
const dayReferenceDate = dayjs__default.default(referenceDate);
|
|
87
|
+
const dayDate = dayjs__default.default(date).locale(locale);
|
|
88
|
+
const dayDiffSeconds = dayReferenceDate.diff(dayDate, "second");
|
|
89
|
+
const formatUseSeconds = showSeconds ? "LTS" : "LT";
|
|
90
|
+
if (date.getTime() > referenceDate.getTime()) {
|
|
91
|
+
return {
|
|
92
|
+
timeAgo: dayDate.format(`L ${formatUseSeconds}`),
|
|
93
|
+
delay: (date.getTime() - referenceDate.getTime()) / 1e3
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
if (dayDiffSeconds < 120) {
|
|
97
|
+
return {
|
|
98
|
+
timeAgo: dayjs__default.default.duration(dayDiffSeconds, "second").locale(locale).humanize(),
|
|
99
|
+
delay: 120 - dayDiffSeconds
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
const dayDiffMinutes = dayReferenceDate.diff(dayDate, "minute");
|
|
103
|
+
if (dayDiffMinutes < 60) {
|
|
104
|
+
return {
|
|
105
|
+
timeAgo: dayjs__default.default.duration(-dayDiffMinutes, "minute").locale(locale).humanize(true),
|
|
106
|
+
delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
if (dayReferenceDate.isSame(dayDate, "day")) {
|
|
110
|
+
return {
|
|
111
|
+
timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
|
|
112
|
+
delay: secondsUntilNextDay(referenceDate)
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
if (dayReferenceDate.subtract(1, "day").isSame(dayDate, "day")) {
|
|
116
|
+
return {
|
|
117
|
+
timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
|
|
118
|
+
delay: secondsUntilNextDay(referenceDate)
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
if (dayDate.isSame(dayReferenceDate, "week")) {
|
|
122
|
+
return {
|
|
123
|
+
timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),
|
|
124
|
+
delay: secondsUntilNextWeek(date)
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
return {
|
|
128
|
+
timeAgo: dayDate.format(`L ${formatUseSeconds}`),
|
|
129
|
+
delay: 0
|
|
130
|
+
};
|
|
131
|
+
};
|
|
132
|
+
exports.formatTimeAgo = formatTimeAgo;
|
|
133
|
+
exports.secondsUntilNextDay = secondsUntilNextDay;
|
|
134
|
+
//# sourceMappingURL=formatUtils.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatUtils.cjs","sources":["../../../../src/components/TimeAgo/formatUtils.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport calendar from \"dayjs/plugin/calendar\";\nimport duration from \"dayjs/plugin/duration\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport updateLocale from \"dayjs/plugin/updateLocale\";\n\n/**\n * Relative time thresholds defined by\n * {@link https://xd.adobe.com/view/1b7df235-5cf8-4b51-a2f0-0be1bb591c55-4e2e/ Design System}\n *\n * Implementation using day.js {@link https://day.js.org/docs/en/customization/relative-time relativeTime}\n */\nconst thresholds = [\n { l: \"s\", r: 119, d: \"second\" },\n { l: \"m\", r: 1 },\n { l: \"mm\", r: 59, d: \"minute\" },\n { l: \"h\", r: 1 },\n { l: \"hh\", r: 23, d: \"hour\" },\n { l: \"d\", r: 1 },\n { l: \"dd\", r: 29, d: \"day\" },\n { l: \"M\", r: 1 },\n { l: \"MM\", r: 11, d: \"month\" },\n { l: \"y\", r: 17 },\n { l: \"yy\", d: \"year\" },\n];\n\ndayjs.extend(localeData);\ndayjs.extend(duration);\ndayjs.extend(calendar);\ndayjs.extend(localizedFormat);\ndayjs.extend(relativeTime, { thresholds });\ndayjs.extend(updateLocale);\n\nexport const secondsUntilNextDay = (date = new Date()) => {\n const midnight = new Date(date.getTime());\n\n midnight.setDate(midnight.getDate() + 1);\n midnight.setHours(0);\n midnight.setMinutes(0);\n midnight.setSeconds(0);\n midnight.setMilliseconds(0);\n\n return (midnight.getTime() - date.getTime()) / 1000;\n};\n\nconst secondsUntilNextWeek = (date = new Date()) => {\n const firstMonthDayOfWeek = date.getDate() - date.getDay();\n const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7; // auto roll over to next month if needed\n\n const firstDayNextWeek = new Date(date.getTime());\n\n firstDayNextWeek.setDate(firstMonthDayOfNextWeek);\n firstDayNextWeek.setHours(0);\n firstDayNextWeek.setMinutes(0);\n firstDayNextWeek.setSeconds(0);\n firstDayNextWeek.setMilliseconds(0);\n\n return (firstDayNextWeek.getTime() - date.getTime()) / 1000;\n};\n\n/**\n * @typedef {Object} TimeAgo\n * @property {string} timeAgo - the formatted date using the \"time ago format\"\n * @property {number} delay - the time until the date needs to be updated\n */\n\n/**\n * Formats a date to the a relative time format using dayjs.\n *\n * @param {Date} date - date to format.\n * @param {String} locale - locale to use.\n * @param {Boolean} [showSeconds=false] - if seconds should be part of the result.\n * @param {Date} referenceDate - reference date to use when formatting (defaults to current date).\n *\n * @return {TimeAgo} the formatted date using the \"time ago format\" and the time until it needs to be updated\n */\nexport const formatTimeAgo = (\n date,\n locale,\n showSeconds = false,\n referenceDate = new Date()\n) => {\n const dayReferenceDate = dayjs(referenceDate);\n const dayDate = dayjs(date).locale(locale);\n\n const dayDiffSeconds = dayReferenceDate.diff(dayDate, \"second\");\n\n const formatUseSeconds = showSeconds ? \"LTS\" : \"LT\";\n\n // check if the date is after the reference date\n if (date.getTime() > referenceDate.getTime()) {\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: (date.getTime() - referenceDate.getTime()) / 1000,\n };\n }\n\n // just now, until the 2 minutes\n if (dayDiffSeconds < 120) {\n return {\n timeAgo: dayjs\n .duration(dayDiffSeconds, \"second\")\n .locale(locale)\n .humanize(),\n delay: 120 - dayDiffSeconds,\n };\n }\n\n // ago in minutes, until the 1 hour mark\n const dayDiffMinutes = dayReferenceDate.diff(dayDate, \"minute\");\n\n if (dayDiffMinutes < 60) {\n return {\n timeAgo: dayjs\n .duration(-dayDiffMinutes, \"minute\")\n .locale(locale)\n .humanize(true),\n delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds,\n };\n }\n\n // formatted date with text description for today\n if (dayReferenceDate.isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with text description for yesterday\n if (dayReferenceDate.subtract(1, \"day\").isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with week during the current week\n if (dayDate.isSame(dayReferenceDate, \"week\")) {\n return {\n timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),\n delay: secondsUntilNextWeek(date),\n };\n }\n\n // formatted without special gimmicks\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: 0,\n };\n};\n"],"names":["thresholds","l","r","d","dayjs","extend","localeData","duration","calendar","localizedFormat","relativeTime","updateLocale","secondsUntilNextDay","date","Date","midnight","getTime","setDate","getDate","setHours","setMinutes","setSeconds","setMilliseconds","secondsUntilNextWeek","firstMonthDayOfWeek","getDay","firstMonthDayOfNextWeek","firstDayNextWeek","formatTimeAgo","locale","showSeconds","referenceDate","dayReferenceDate","dayDate","dayDiffSeconds","diff","formatUseSeconds","timeAgo","format","delay","humanize","dayDiffMinutes","isSame","subtract"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const classes = require("../../utils/classes.cjs");
|
|
4
|
+
const classKeys = ["root"];
|
|
5
|
+
const timeAgoClasses = classes.getClasses(classKeys, "HvTimeAgo");
|
|
6
|
+
const timeAgoClasses$1 = timeAgoClasses;
|
|
7
|
+
exports.default = timeAgoClasses$1;
|
|
8
|
+
//# sourceMappingURL=timeAgoClasses.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"timeAgoClasses.cjs","sources":["../../../../src/components/TimeAgo/timeAgoClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvTimeAgoClasses {\n root?: string;\n}\n\nconst classKeys: string[] = [\"root\"];\n\nconst timeAgoClasses = getClasses<HvTimeAgoClasses>(classKeys, \"HvTimeAgo\");\n\nexport default timeAgoClasses;\n"],"names":["classKeys","timeAgoClasses","getClasses"],"mappings":";;;AAMA,MAAMA,YAAsB,CAAC,MAAM;AAEnC,MAAMC,iBAAiBC,QAA6BF,WAAAA,WAAW,WAAW;AAE1E,MAAA,mBAAeC;;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
const useTimeout = require("./useTimeout.cjs");
|
|
5
|
+
const formatUtils = require("./formatUtils.cjs");
|
|
6
|
+
const fmt = (timestamp, locale, showSeconds) => {
|
|
7
|
+
const timestampMs = String(timestamp).length > 11 ? timestamp : timestamp * 1e3;
|
|
8
|
+
return formatUtils.formatTimeAgo(new Date(timestampMs), locale, showSeconds);
|
|
9
|
+
};
|
|
10
|
+
function useTimeAgo(timestamp, options) {
|
|
11
|
+
const {
|
|
12
|
+
locale,
|
|
13
|
+
disableRefresh = false,
|
|
14
|
+
showSeconds = false
|
|
15
|
+
} = options;
|
|
16
|
+
const [timeAgo, setTimeAgo] = React.useState(fmt(timestamp, locale, showSeconds));
|
|
17
|
+
const refreshTime = disableRefresh ? 0 : timeAgo.delay * 1e3;
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
const newTimeAgo = fmt(timestamp, locale, showSeconds);
|
|
20
|
+
setTimeAgo(newTimeAgo);
|
|
21
|
+
}, [timestamp, locale, showSeconds]);
|
|
22
|
+
useTimeout.default(() => {
|
|
23
|
+
const newTimeAgo = fmt(timestamp, locale, showSeconds);
|
|
24
|
+
setTimeAgo(newTimeAgo);
|
|
25
|
+
}, refreshTime);
|
|
26
|
+
return timeAgo.timeAgo;
|
|
27
|
+
}
|
|
28
|
+
exports.default = useTimeAgo;
|
|
29
|
+
//# sourceMappingURL=useTimeAgo.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTimeAgo.cjs","sources":["../../../../src/components/TimeAgo/useTimeAgo.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport useTimeout from \"./useTimeout\";\nimport { formatTimeAgo } from \"./formatUtils\";\n\n/**\n * Calls `formatTimeAgo` with timestamp conversion\n */\nconst fmt = (timestamp, locale, showSeconds) => {\n const timestampMs =\n String(timestamp).length > 11 ? timestamp : timestamp * 1000;\n return formatTimeAgo(new Date(timestampMs), locale, showSeconds);\n};\n\nexport default function useTimeAgo(timestamp, options) {\n const { locale, disableRefresh = false, showSeconds = false } = options;\n const [timeAgo, setTimeAgo] = useState(fmt(timestamp, locale, showSeconds));\n const refreshTime = disableRefresh ? 0 : timeAgo.delay * 1000;\n\n useEffect(() => {\n const newTimeAgo = fmt(timestamp, locale, showSeconds);\n setTimeAgo(newTimeAgo);\n }, [timestamp, locale, showSeconds]);\n\n useTimeout(() => {\n const newTimeAgo = fmt(timestamp, locale, showSeconds);\n setTimeAgo(newTimeAgo);\n }, refreshTime);\n\n return timeAgo.timeAgo;\n}\n"],"names":["fmt","timestamp","locale","showSeconds","timestampMs","String","length","formatTimeAgo","Date","useTimeAgo","options","disableRefresh","timeAgo","setTimeAgo","useState","refreshTime","delay","useEffect","newTimeAgo","useTimeout"],"mappings":";;;;;AAOA,MAAMA,MAAMA,CAACC,WAAWC,QAAQC,gBAAgB;AAC9C,QAAMC,cACJC,OAAOJ,SAAS,EAAEK,SAAS,KAAKL,YAAYA,YAAY;AAC1D,SAAOM,YAAAA,cAAc,IAAIC,KAAKJ,WAAW,GAAGF,QAAQC,WAAW;AACjE;AAEwBM,SAAAA,WAAWR,WAAWS,SAAS;AAC/C,QAAA;AAAA,IAAER;AAAAA,IAAQS,iBAAiB;AAAA,IAAOR,cAAc;AAAA,EAAUO,IAAAA;AAC1D,QAAA,CAACE,SAASC,UAAU,IAAIC,eAASd,IAAIC,WAAWC,QAAQC,WAAW,CAAC;AAC1E,QAAMY,cAAcJ,iBAAiB,IAAIC,QAAQI,QAAQ;AAEzDC,QAAAA,UAAU,MAAM;AACd,UAAMC,aAAalB,IAAIC,WAAWC,QAAQC,WAAW;AACrDU,eAAWK,UAAU;AAAA,EACpB,GAAA,CAACjB,WAAWC,QAAQC,WAAW,CAAC;AAEnCgB,aAAAA,QAAW,MAAM;AACf,UAAMD,aAAalB,IAAIC,WAAWC,QAAQC,WAAW;AACrDU,eAAWK,UAAU;AAAA,KACpBH,WAAW;AAEd,SAAOH,QAAQA;AACjB;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const React = require("react");
|
|
4
|
+
function useTimeout(callback, delay) {
|
|
5
|
+
const savedCallback = React.useRef(callback);
|
|
6
|
+
React.useEffect(() => {
|
|
7
|
+
savedCallback.current = callback;
|
|
8
|
+
}, [callback]);
|
|
9
|
+
React.useEffect(() => {
|
|
10
|
+
if (!delay)
|
|
11
|
+
return void 0;
|
|
12
|
+
const id = setTimeout(() => savedCallback.current(), delay);
|
|
13
|
+
return () => clearTimeout(id);
|
|
14
|
+
}, [delay]);
|
|
15
|
+
}
|
|
16
|
+
exports.default = useTimeout;
|
|
17
|
+
//# sourceMappingURL=useTimeout.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTimeout.cjs","sources":["../../../../src/components/TimeAgo/useTimeout.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nexport default function useTimeout(callback, delay) {\n const savedCallback = useRef(callback);\n\n useEffect(() => {\n savedCallback.current = callback;\n }, [callback]);\n\n useEffect(() => {\n if (!delay) return undefined;\n\n const id = setTimeout(() => savedCallback.current(), delay);\n return () => clearTimeout(id);\n }, [delay]);\n}\n"],"names":["useTimeout","callback","delay","savedCallback","useRef","useEffect","current","undefined","id","setTimeout","clearTimeout"],"mappings":";;;AAEwBA,SAAAA,WAAWC,UAAUC,OAAO;AAC5CC,QAAAA,gBAAgBC,aAAOH,QAAQ;AAErCI,QAAAA,UAAU,MAAM;AACdF,kBAAcG,UAAUL;AAAAA,EAAAA,GACvB,CAACA,QAAQ,CAAC;AAEbI,QAAAA,UAAU,MAAM;AACd,QAAI,CAACH;AAAcK,aAAAA;AAEnB,UAAMC,KAAKC,WAAW,MAAMN,cAAcG,QAAAA,GAAWJ,KAAK;AACnD,WAAA,MAAMQ,aAAaF,EAAE;AAAA,EAAA,GAC3B,CAACN,KAAK,CAAC;AACZ;;"}
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -242,6 +242,8 @@ const ScrollToHorizontal = require("./components/ScrollTo/Horizontal/ScrollToHor
|
|
|
242
242
|
const useScrollTo = require("./components/ScrollTo/useScrollTo.cjs");
|
|
243
243
|
const inlineEditorClasses = require("./components/InlineEditor/inlineEditorClasses.cjs");
|
|
244
244
|
const InlineEditor = require("./components/InlineEditor/InlineEditor.cjs");
|
|
245
|
+
const timeAgoClasses = require("./components/TimeAgo/timeAgoClasses.cjs");
|
|
246
|
+
const TimeAgo = require("./components/TimeAgo/TimeAgo.cjs");
|
|
245
247
|
const useUniqueId = require("./hooks/useUniqueId.cjs");
|
|
246
248
|
const useIsMounted = require("./hooks/useIsMounted.cjs");
|
|
247
249
|
const useClickOutside = require("./hooks/useClickOutside.cjs");
|
|
@@ -575,6 +577,8 @@ exports.HvScrollToHorizontal = ScrollToHorizontal.HvScrollToHorizontal;
|
|
|
575
577
|
exports.useScrollTo = useScrollTo.useScrollTo;
|
|
576
578
|
exports.inlineEditorClasses = inlineEditorClasses.default;
|
|
577
579
|
exports.HvInlineEditor = InlineEditor.HvInlineEditor;
|
|
580
|
+
exports.timeAgoClasses = timeAgoClasses.default;
|
|
581
|
+
exports.HvTimeAgo = TimeAgo.HvTimeAgo;
|
|
578
582
|
exports.useUniqueId = useUniqueId.default;
|
|
579
583
|
exports.useIsMounted = useIsMounted.default;
|
|
580
584
|
exports.useClickOutside = useClickOutside.useClickOutside;
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _styled from "@emotion/styled/base";
|
|
2
|
-
import {
|
|
2
|
+
import { Popper } from "@mui/base";
|
|
3
3
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
4
4
|
import { HvSelectionList } from "../../SelectionList/SelectionList.js";
|
|
5
5
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() {
|
|
@@ -16,7 +16,7 @@ const StyledRoot = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "prod
|
|
|
16
16
|
} : {
|
|
17
17
|
name: "bjn8wh",
|
|
18
18
|
styles: "position:relative",
|
|
19
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
19
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLMEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9TdWdnZXN0aW9ucy9TdWdnZXN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQb3BwZXIgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdlNlbGVjdGlvbkxpc3QgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNlbGVjdGlvbkxpc3QgPSBzdHlsZWQoSHZTZWxlY3Rpb25MaXN0KSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBib3hTaGFkb3c6IHRoZW1lLmNvbG9ycy5zaGFkb3csXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnhzLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHBlciA9IHN0eWxlZChQb3BwZXIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlM2QoMCwgLTFweCwgMCkgIWltcG9ydGFudFwiLFxuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnRvb2x0aXAsXG59KTtcbiJdfQ== */",
|
|
20
20
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
21
21
|
});
|
|
22
22
|
const StyledSelectionList = /* @__PURE__ */ _styled(HvSelectionList, process.env.NODE_ENV === "production" ? {
|
|
@@ -29,8 +29,8 @@ const StyledSelectionList = /* @__PURE__ */ _styled(HvSelectionList, process.env
|
|
|
29
29
|
boxShadow: theme.colors.shadow,
|
|
30
30
|
padding: theme.space.xs,
|
|
31
31
|
width: "100%"
|
|
32
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
33
|
-
const StyledPopper = /* @__PURE__ */ _styled(
|
|
32
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTbUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9Gb3Jtcy9TdWdnZXN0aW9ucy9TdWdnZXN0aW9ucy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBQb3BwZXIgfSBmcm9tIFwiQG11aS9iYXNlXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgeyBIdlNlbGVjdGlvbkxpc3QgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUm9vdCA9IHN0eWxlZChcImRpdlwiKSh7XG4gIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFNlbGVjdGlvbkxpc3QgPSBzdHlsZWQoSHZTZWxlY3Rpb25MaXN0KSh7XG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICBib3hTaGFkb3c6IHRoZW1lLmNvbG9ycy5zaGFkb3csXG4gIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnhzLFxuICB3aWR0aDogXCIxMDAlXCIsXG59KTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFBvcHBlciA9IHN0eWxlZChQb3BwZXIpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0cmFuc2Zvcm06IFwidHJhbnNsYXRlM2QoMCwgLTFweCwgMCkgIWltcG9ydGFudFwiLFxuICB6SW5kZXg6IHRoZW1lLnpJbmRpY2VzLnRvb2x0aXAsXG59KTtcbiJdfQ== */");
|
|
33
|
+
const StyledPopper = /* @__PURE__ */ _styled(Popper, process.env.NODE_ENV === "production" ? {
|
|
34
34
|
target: "eqrftyh0"
|
|
35
35
|
} : {
|
|
36
36
|
target: "eqrftyh0",
|
|
@@ -40,7 +40,7 @@ const StyledPopper = /* @__PURE__ */ _styled(PopperUnstyled, process.env.NODE_EN
|
|
|
40
40
|
position: "absolute",
|
|
41
41
|
transform: "translate3d(0, -1px, 0) !important",
|
|
42
42
|
zIndex: theme.zIndices.tooltip
|
|
43
|
-
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
43
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQjRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRm9ybXMvU3VnZ2VzdGlvbnMvU3VnZ2VzdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgUG9wcGVyIH0gZnJvbSBcIkBtdWkvYmFzZVwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZTZWxlY3Rpb25MaXN0IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTZWxlY3Rpb25MaXN0ID0gc3R5bGVkKEh2U2VsZWN0aW9uTGlzdCkoe1xuICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vMSxcbiAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICBwYWRkaW5nOiB0aGVtZS5zcGFjZS54cyxcbiAgd2lkdGg6IFwiMTAwJVwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRQb3BwZXIgPSBzdHlsZWQoUG9wcGVyKSh7XG4gIHdpZHRoOiBcIjEwMCVcIixcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgdHJhbnNmb3JtOiBcInRyYW5zbGF0ZTNkKDAsIC0xcHgsIDApICFpbXBvcnRhbnRcIixcbiAgekluZGV4OiB0aGVtZS56SW5kaWNlcy50b29sdGlwLFxufSk7XG4iXX0= */");
|
|
44
44
|
export {
|
|
45
45
|
StyledPopper,
|
|
46
46
|
StyledRoot,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Suggestions.styles.js","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport {
|
|
1
|
+
{"version":3,"file":"Suggestions.styles.js","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Popper } from \"@mui/base\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvSelectionList } from \"@core/components\";\n\nexport const StyledRoot = styled(\"div\")({\n position: \"relative\",\n});\n\nexport const StyledSelectionList = styled(HvSelectionList)({\n backgroundColor: theme.colors.atmo1,\n boxShadow: theme.colors.shadow,\n padding: theme.space.xs,\n width: \"100%\",\n});\n\nexport const StyledPopper = styled(Popper)({\n width: \"100%\",\n position: \"absolute\",\n transform: \"translate3d(0, -1px, 0) !important\",\n zIndex: theme.zIndices.tooltip,\n});\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledSelectionList","HvSelectionList","backgroundColor","theme","colors","atmo1","boxShadow","shadow","padding","space","xs","width","StyledPopper","Popper","position","transform","zIndex","zIndices","tooltip"],"mappings":";;;;;;;AAKO,MAAMA,aAAoB,wBAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAErC;AAEK,MAAMC,sBAA6BC,wBAAAA,iBAAeX,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzDQ,iBAAiBC,MAAMC,OAAOC;AAAAA,EAC9BC,WAAWH,MAAMC,OAAOG;AAAAA,EACxBC,SAASL,MAAMM,MAAMC;AAAAA,EACrBC,OAAO;AACT,GAACrB,QAAAC,IAAAC,aAAC,eAAA,KAAA,61CAAA;AAEK,MAAMoB,eAAsBC,wBAAAA,QAAMvB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCiB,OAAO;AAAA,EACPG,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,QAAQb,MAAMc,SAASC;AACzB,GAAC5B,QAAAC,IAAAC,aAAC,eAAA,KAAA,61CAAA;"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { clsx } from "clsx";
|
|
2
|
+
import isEmpty from "lodash/isEmpty";
|
|
3
|
+
import timeAgoClasses from "./timeAgoClasses.js";
|
|
4
|
+
import useTimeAgo from "./useTimeAgo.js";
|
|
5
|
+
import { jsx, Fragment } from "@emotion/react/jsx-runtime";
|
|
6
|
+
import { HvTypography } from "../Typography/Typography.js";
|
|
7
|
+
const HvTimeAgo = ({
|
|
8
|
+
classes,
|
|
9
|
+
timestamp,
|
|
10
|
+
locale: localeProp = "en",
|
|
11
|
+
component: Component = HvTypography,
|
|
12
|
+
emptyElement = "—",
|
|
13
|
+
disableRefresh = false,
|
|
14
|
+
showSeconds = false,
|
|
15
|
+
justText = false,
|
|
16
|
+
...others
|
|
17
|
+
}) => {
|
|
18
|
+
const locale = isEmpty(localeProp) ? "en" : localeProp;
|
|
19
|
+
const timeAgo = useTimeAgo(timestamp, {
|
|
20
|
+
locale,
|
|
21
|
+
disableRefresh,
|
|
22
|
+
showSeconds
|
|
23
|
+
});
|
|
24
|
+
if (justText && timestamp)
|
|
25
|
+
return /* @__PURE__ */ jsx(Fragment, {
|
|
26
|
+
children: timeAgo
|
|
27
|
+
});
|
|
28
|
+
return /* @__PURE__ */ jsx(Component, {
|
|
29
|
+
className: clsx(classes == null ? void 0 : classes.root, timeAgoClasses.root),
|
|
30
|
+
...others,
|
|
31
|
+
children: !timestamp ? emptyElement : timeAgo
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
export {
|
|
35
|
+
HvTimeAgo
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=TimeAgo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TimeAgo.js","sources":["../../../../src/components/TimeAgo/TimeAgo.tsx"],"sourcesContent":["import { HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport isEmpty from \"lodash/isEmpty\";\nimport timeAgoClasses, { HvTimeAgoClasses } from \"./timeAgoClasses\";\nimport useTimeAgo from \"./useTimeAgo\";\n\nexport interface HvTimeAgoProps extends HvBaseProps<HTMLElement, { children }> {\n /**\n * The timestamp to format, in seconds or milliseconds.\n * Defaults to `emptyElement` if value is null or 0\n */\n timestamp?: number;\n /**\n * The locale to be used. Should be on of the dayjs supported locales and explicitly imported\n * @see https://day.js.org/docs/en/i18n/i18n\n */\n locale?: string;\n /**\n * The component used for the root node. Either a string to use a HTML element or a component.\n * Defaults to `HvTypography`.\n */\n component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;\n /**\n * The element to render when the timestamp is null or 0\n * Defaults to `—` (Em Dash)\n */\n emptyElement?: React.ReactNode;\n /**\n * Disables periodic date refreshes\n */\n disableRefresh?: boolean;\n /**\n * Whether to show seconds in the rendered time\n */\n showSeconds?: boolean;\n /**\n * Whether the component should render just the string\n * Consider using `useTimeAgo` instead\n */\n justText?: boolean;\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvTimeAgoClasses;\n}\n\n/**\n * The HvTimeAgo component implements the Design System relative time format guidelines.\n */\nexport const HvTimeAgo = ({\n classes,\n timestamp,\n locale: localeProp = \"en\",\n component: Component = HvTypography,\n emptyElement = \"—\",\n disableRefresh = false,\n showSeconds = false,\n justText = false,\n ...others\n}: HvTimeAgoProps) => {\n const locale = isEmpty(localeProp) ? \"en\" : localeProp;\n const timeAgo = useTimeAgo(timestamp, {\n locale,\n disableRefresh,\n showSeconds,\n });\n\n if (justText && timestamp) return <>{timeAgo}</>;\n\n return (\n <Component className={clsx(classes?.root, timeAgoClasses.root)} {...others}>\n {!timestamp ? emptyElement : timeAgo}\n </Component>\n );\n};\n"],"names":["HvTimeAgo","classes","timestamp","locale","localeProp","component","Component","HvTypography","emptyElement","disableRefresh","showSeconds","justText","others","isEmpty","timeAgo","useTimeAgo","_Fragment","children","className","clsx","root","timeAgoClasses"],"mappings":";;;;;;AAgDO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC,QAAQC,aAAa;AAAA,EACrBC,WAAWC,YAAYC;AAAAA,EACvBC,eAAe;AAAA,EACfC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,WAAW;AAAA,EACX,GAAGC;AACW,MAAM;AACpB,QAAMT,SAASU,QAAQT,UAAU,IAAI,OAAOA;AACtCU,QAAAA,UAAUC,WAAWb,WAAW;AAAA,IACpCC;AAAAA,IACAM;AAAAA,IACAC;AAAAA,EAAAA,CACD;AAED,MAAIC,YAAYT;AAAW,+BAAOc,UAAA;AAAA,MAAAC,UAAGH;AAAAA,IAAAA,CAAW;AAEhD,6BACGR,WAAS;AAAA,IAACY,WAAWC,KAAKlB,mCAASmB,MAAMC,eAAeD,IAAI;AAAA,IAAE,GAAKR;AAAAA,IAAMK,UACvE,CAACf,YAAYM,eAAeM;AAAAA,EAAAA,CACnB;AAEhB;"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import dayjs from "dayjs";
|
|
2
|
+
import calendar from "dayjs/plugin/calendar";
|
|
3
|
+
import duration from "dayjs/plugin/duration";
|
|
4
|
+
import localeData from "dayjs/plugin/localeData";
|
|
5
|
+
import localizedFormat from "dayjs/plugin/localizedFormat";
|
|
6
|
+
import relativeTime from "dayjs/plugin/relativeTime";
|
|
7
|
+
import updateLocale from "dayjs/plugin/updateLocale";
|
|
8
|
+
const thresholds = [{
|
|
9
|
+
l: "s",
|
|
10
|
+
r: 119,
|
|
11
|
+
d: "second"
|
|
12
|
+
}, {
|
|
13
|
+
l: "m",
|
|
14
|
+
r: 1
|
|
15
|
+
}, {
|
|
16
|
+
l: "mm",
|
|
17
|
+
r: 59,
|
|
18
|
+
d: "minute"
|
|
19
|
+
}, {
|
|
20
|
+
l: "h",
|
|
21
|
+
r: 1
|
|
22
|
+
}, {
|
|
23
|
+
l: "hh",
|
|
24
|
+
r: 23,
|
|
25
|
+
d: "hour"
|
|
26
|
+
}, {
|
|
27
|
+
l: "d",
|
|
28
|
+
r: 1
|
|
29
|
+
}, {
|
|
30
|
+
l: "dd",
|
|
31
|
+
r: 29,
|
|
32
|
+
d: "day"
|
|
33
|
+
}, {
|
|
34
|
+
l: "M",
|
|
35
|
+
r: 1
|
|
36
|
+
}, {
|
|
37
|
+
l: "MM",
|
|
38
|
+
r: 11,
|
|
39
|
+
d: "month"
|
|
40
|
+
}, {
|
|
41
|
+
l: "y",
|
|
42
|
+
r: 17
|
|
43
|
+
}, {
|
|
44
|
+
l: "yy",
|
|
45
|
+
d: "year"
|
|
46
|
+
}];
|
|
47
|
+
dayjs.extend(localeData);
|
|
48
|
+
dayjs.extend(duration);
|
|
49
|
+
dayjs.extend(calendar);
|
|
50
|
+
dayjs.extend(localizedFormat);
|
|
51
|
+
dayjs.extend(relativeTime, {
|
|
52
|
+
thresholds
|
|
53
|
+
});
|
|
54
|
+
dayjs.extend(updateLocale);
|
|
55
|
+
const secondsUntilNextDay = (date = /* @__PURE__ */ new Date()) => {
|
|
56
|
+
const midnight = new Date(date.getTime());
|
|
57
|
+
midnight.setDate(midnight.getDate() + 1);
|
|
58
|
+
midnight.setHours(0);
|
|
59
|
+
midnight.setMinutes(0);
|
|
60
|
+
midnight.setSeconds(0);
|
|
61
|
+
midnight.setMilliseconds(0);
|
|
62
|
+
return (midnight.getTime() - date.getTime()) / 1e3;
|
|
63
|
+
};
|
|
64
|
+
const secondsUntilNextWeek = (date = /* @__PURE__ */ new Date()) => {
|
|
65
|
+
const firstMonthDayOfWeek = date.getDate() - date.getDay();
|
|
66
|
+
const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7;
|
|
67
|
+
const firstDayNextWeek = new Date(date.getTime());
|
|
68
|
+
firstDayNextWeek.setDate(firstMonthDayOfNextWeek);
|
|
69
|
+
firstDayNextWeek.setHours(0);
|
|
70
|
+
firstDayNextWeek.setMinutes(0);
|
|
71
|
+
firstDayNextWeek.setSeconds(0);
|
|
72
|
+
firstDayNextWeek.setMilliseconds(0);
|
|
73
|
+
return (firstDayNextWeek.getTime() - date.getTime()) / 1e3;
|
|
74
|
+
};
|
|
75
|
+
const formatTimeAgo = (date, locale, showSeconds = false, referenceDate = /* @__PURE__ */ new Date()) => {
|
|
76
|
+
const dayReferenceDate = dayjs(referenceDate);
|
|
77
|
+
const dayDate = dayjs(date).locale(locale);
|
|
78
|
+
const dayDiffSeconds = dayReferenceDate.diff(dayDate, "second");
|
|
79
|
+
const formatUseSeconds = showSeconds ? "LTS" : "LT";
|
|
80
|
+
if (date.getTime() > referenceDate.getTime()) {
|
|
81
|
+
return {
|
|
82
|
+
timeAgo: dayDate.format(`L ${formatUseSeconds}`),
|
|
83
|
+
delay: (date.getTime() - referenceDate.getTime()) / 1e3
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
if (dayDiffSeconds < 120) {
|
|
87
|
+
return {
|
|
88
|
+
timeAgo: dayjs.duration(dayDiffSeconds, "second").locale(locale).humanize(),
|
|
89
|
+
delay: 120 - dayDiffSeconds
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
const dayDiffMinutes = dayReferenceDate.diff(dayDate, "minute");
|
|
93
|
+
if (dayDiffMinutes < 60) {
|
|
94
|
+
return {
|
|
95
|
+
timeAgo: dayjs.duration(-dayDiffMinutes, "minute").locale(locale).humanize(true),
|
|
96
|
+
delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
if (dayReferenceDate.isSame(dayDate, "day")) {
|
|
100
|
+
return {
|
|
101
|
+
timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
|
|
102
|
+
delay: secondsUntilNextDay(referenceDate)
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
if (dayReferenceDate.subtract(1, "day").isSame(dayDate, "day")) {
|
|
106
|
+
return {
|
|
107
|
+
timeAgo: `${dayDate.calendar(dayReferenceDate)}`,
|
|
108
|
+
delay: secondsUntilNextDay(referenceDate)
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
if (dayDate.isSame(dayReferenceDate, "week")) {
|
|
112
|
+
return {
|
|
113
|
+
timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),
|
|
114
|
+
delay: secondsUntilNextWeek(date)
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
return {
|
|
118
|
+
timeAgo: dayDate.format(`L ${formatUseSeconds}`),
|
|
119
|
+
delay: 0
|
|
120
|
+
};
|
|
121
|
+
};
|
|
122
|
+
export {
|
|
123
|
+
formatTimeAgo,
|
|
124
|
+
secondsUntilNextDay
|
|
125
|
+
};
|
|
126
|
+
//# sourceMappingURL=formatUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatUtils.js","sources":["../../../../src/components/TimeAgo/formatUtils.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport calendar from \"dayjs/plugin/calendar\";\nimport duration from \"dayjs/plugin/duration\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport relativeTime from \"dayjs/plugin/relativeTime\";\nimport updateLocale from \"dayjs/plugin/updateLocale\";\n\n/**\n * Relative time thresholds defined by\n * {@link https://xd.adobe.com/view/1b7df235-5cf8-4b51-a2f0-0be1bb591c55-4e2e/ Design System}\n *\n * Implementation using day.js {@link https://day.js.org/docs/en/customization/relative-time relativeTime}\n */\nconst thresholds = [\n { l: \"s\", r: 119, d: \"second\" },\n { l: \"m\", r: 1 },\n { l: \"mm\", r: 59, d: \"minute\" },\n { l: \"h\", r: 1 },\n { l: \"hh\", r: 23, d: \"hour\" },\n { l: \"d\", r: 1 },\n { l: \"dd\", r: 29, d: \"day\" },\n { l: \"M\", r: 1 },\n { l: \"MM\", r: 11, d: \"month\" },\n { l: \"y\", r: 17 },\n { l: \"yy\", d: \"year\" },\n];\n\ndayjs.extend(localeData);\ndayjs.extend(duration);\ndayjs.extend(calendar);\ndayjs.extend(localizedFormat);\ndayjs.extend(relativeTime, { thresholds });\ndayjs.extend(updateLocale);\n\nexport const secondsUntilNextDay = (date = new Date()) => {\n const midnight = new Date(date.getTime());\n\n midnight.setDate(midnight.getDate() + 1);\n midnight.setHours(0);\n midnight.setMinutes(0);\n midnight.setSeconds(0);\n midnight.setMilliseconds(0);\n\n return (midnight.getTime() - date.getTime()) / 1000;\n};\n\nconst secondsUntilNextWeek = (date = new Date()) => {\n const firstMonthDayOfWeek = date.getDate() - date.getDay();\n const firstMonthDayOfNextWeek = firstMonthDayOfWeek + 7; // auto roll over to next month if needed\n\n const firstDayNextWeek = new Date(date.getTime());\n\n firstDayNextWeek.setDate(firstMonthDayOfNextWeek);\n firstDayNextWeek.setHours(0);\n firstDayNextWeek.setMinutes(0);\n firstDayNextWeek.setSeconds(0);\n firstDayNextWeek.setMilliseconds(0);\n\n return (firstDayNextWeek.getTime() - date.getTime()) / 1000;\n};\n\n/**\n * @typedef {Object} TimeAgo\n * @property {string} timeAgo - the formatted date using the \"time ago format\"\n * @property {number} delay - the time until the date needs to be updated\n */\n\n/**\n * Formats a date to the a relative time format using dayjs.\n *\n * @param {Date} date - date to format.\n * @param {String} locale - locale to use.\n * @param {Boolean} [showSeconds=false] - if seconds should be part of the result.\n * @param {Date} referenceDate - reference date to use when formatting (defaults to current date).\n *\n * @return {TimeAgo} the formatted date using the \"time ago format\" and the time until it needs to be updated\n */\nexport const formatTimeAgo = (\n date,\n locale,\n showSeconds = false,\n referenceDate = new Date()\n) => {\n const dayReferenceDate = dayjs(referenceDate);\n const dayDate = dayjs(date).locale(locale);\n\n const dayDiffSeconds = dayReferenceDate.diff(dayDate, \"second\");\n\n const formatUseSeconds = showSeconds ? \"LTS\" : \"LT\";\n\n // check if the date is after the reference date\n if (date.getTime() > referenceDate.getTime()) {\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: (date.getTime() - referenceDate.getTime()) / 1000,\n };\n }\n\n // just now, until the 2 minutes\n if (dayDiffSeconds < 120) {\n return {\n timeAgo: dayjs\n .duration(dayDiffSeconds, \"second\")\n .locale(locale)\n .humanize(),\n delay: 120 - dayDiffSeconds,\n };\n }\n\n // ago in minutes, until the 1 hour mark\n const dayDiffMinutes = dayReferenceDate.diff(dayDate, \"minute\");\n\n if (dayDiffMinutes < 60) {\n return {\n timeAgo: dayjs\n .duration(-dayDiffMinutes, \"minute\")\n .locale(locale)\n .humanize(true),\n delay: 60 * (dayDiffMinutes + 1) - dayDiffSeconds,\n };\n }\n\n // formatted date with text description for today\n if (dayReferenceDate.isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with text description for yesterday\n if (dayReferenceDate.subtract(1, \"day\").isSame(dayDate, \"day\")) {\n return {\n timeAgo: `${dayDate.calendar(dayReferenceDate)}`,\n delay: secondsUntilNextDay(referenceDate),\n };\n }\n\n // formatted date with week during the current week\n if (dayDate.isSame(dayReferenceDate, \"week\")) {\n return {\n timeAgo: dayDate.format(`ddd, ${formatUseSeconds}`),\n delay: secondsUntilNextWeek(date),\n };\n }\n\n // formatted without special gimmicks\n return {\n timeAgo: dayDate.format(`L ${formatUseSeconds}`),\n delay: 0,\n };\n};\n"],"names":["thresholds","l","r","d","dayjs","extend","localeData","duration","calendar","localizedFormat","relativeTime","updateLocale","secondsUntilNextDay","date","Date","midnight","getTime","setDate","getDate","setHours","setMinutes","setSeconds","setMilliseconds","secondsUntilNextWeek","firstMonthDayOfWeek","getDay","firstMonthDayOfNextWeek","firstDayNextWeek","formatTimeAgo","locale","showSeconds","referenceDate","dayReferenceDate","dayDate","dayDiffSeconds","diff","formatUseSeconds","timeAgo","format","delay","humanize","dayDiffMinutes","isSame","subtract"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { getClasses } from "../../utils/classes.js";
|
|
2
|
+
const classKeys = ["root"];
|
|
3
|
+
const timeAgoClasses = getClasses(classKeys, "HvTimeAgo");
|
|
4
|
+
const timeAgoClasses$1 = timeAgoClasses;
|
|
5
|
+
export {
|
|
6
|
+
timeAgoClasses$1 as default
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=timeAgoClasses.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"timeAgoClasses.js","sources":["../../../../src/components/TimeAgo/timeAgoClasses.ts"],"sourcesContent":["import { getClasses } from \"@core/utils\";\n\nexport interface HvTimeAgoClasses {\n root?: string;\n}\n\nconst classKeys: string[] = [\"root\"];\n\nconst timeAgoClasses = getClasses<HvTimeAgoClasses>(classKeys, \"HvTimeAgo\");\n\nexport default timeAgoClasses;\n"],"names":["classKeys","timeAgoClasses","getClasses"],"mappings":";AAMA,MAAMA,YAAsB,CAAC,MAAM;AAEnC,MAAMC,iBAAiBC,WAA6BF,WAAW,WAAW;AAE1E,MAAA,mBAAeC;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { useState, useEffect } from "react";
|
|
2
|
+
import useTimeout from "./useTimeout.js";
|
|
3
|
+
import { formatTimeAgo } from "./formatUtils.js";
|
|
4
|
+
const fmt = (timestamp, locale, showSeconds) => {
|
|
5
|
+
const timestampMs = String(timestamp).length > 11 ? timestamp : timestamp * 1e3;
|
|
6
|
+
return formatTimeAgo(new Date(timestampMs), locale, showSeconds);
|
|
7
|
+
};
|
|
8
|
+
function useTimeAgo(timestamp, options) {
|
|
9
|
+
const {
|
|
10
|
+
locale,
|
|
11
|
+
disableRefresh = false,
|
|
12
|
+
showSeconds = false
|
|
13
|
+
} = options;
|
|
14
|
+
const [timeAgo, setTimeAgo] = useState(fmt(timestamp, locale, showSeconds));
|
|
15
|
+
const refreshTime = disableRefresh ? 0 : timeAgo.delay * 1e3;
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
const newTimeAgo = fmt(timestamp, locale, showSeconds);
|
|
18
|
+
setTimeAgo(newTimeAgo);
|
|
19
|
+
}, [timestamp, locale, showSeconds]);
|
|
20
|
+
useTimeout(() => {
|
|
21
|
+
const newTimeAgo = fmt(timestamp, locale, showSeconds);
|
|
22
|
+
setTimeAgo(newTimeAgo);
|
|
23
|
+
}, refreshTime);
|
|
24
|
+
return timeAgo.timeAgo;
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
useTimeAgo as default
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=useTimeAgo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTimeAgo.js","sources":["../../../../src/components/TimeAgo/useTimeAgo.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport useTimeout from \"./useTimeout\";\nimport { formatTimeAgo } from \"./formatUtils\";\n\n/**\n * Calls `formatTimeAgo` with timestamp conversion\n */\nconst fmt = (timestamp, locale, showSeconds) => {\n const timestampMs =\n String(timestamp).length > 11 ? timestamp : timestamp * 1000;\n return formatTimeAgo(new Date(timestampMs), locale, showSeconds);\n};\n\nexport default function useTimeAgo(timestamp, options) {\n const { locale, disableRefresh = false, showSeconds = false } = options;\n const [timeAgo, setTimeAgo] = useState(fmt(timestamp, locale, showSeconds));\n const refreshTime = disableRefresh ? 0 : timeAgo.delay * 1000;\n\n useEffect(() => {\n const newTimeAgo = fmt(timestamp, locale, showSeconds);\n setTimeAgo(newTimeAgo);\n }, [timestamp, locale, showSeconds]);\n\n useTimeout(() => {\n const newTimeAgo = fmt(timestamp, locale, showSeconds);\n setTimeAgo(newTimeAgo);\n }, refreshTime);\n\n return timeAgo.timeAgo;\n}\n"],"names":["fmt","timestamp","locale","showSeconds","timestampMs","String","length","formatTimeAgo","Date","useTimeAgo","options","disableRefresh","timeAgo","setTimeAgo","useState","refreshTime","delay","useEffect","newTimeAgo","useTimeout"],"mappings":";;;AAOA,MAAMA,MAAMA,CAACC,WAAWC,QAAQC,gBAAgB;AAC9C,QAAMC,cACJC,OAAOJ,SAAS,EAAEK,SAAS,KAAKL,YAAYA,YAAY;AAC1D,SAAOM,cAAc,IAAIC,KAAKJ,WAAW,GAAGF,QAAQC,WAAW;AACjE;AAEwBM,SAAAA,WAAWR,WAAWS,SAAS;AAC/C,QAAA;AAAA,IAAER;AAAAA,IAAQS,iBAAiB;AAAA,IAAOR,cAAc;AAAA,EAAUO,IAAAA;AAC1D,QAAA,CAACE,SAASC,UAAU,IAAIC,SAASd,IAAIC,WAAWC,QAAQC,WAAW,CAAC;AAC1E,QAAMY,cAAcJ,iBAAiB,IAAIC,QAAQI,QAAQ;AAEzDC,YAAU,MAAM;AACd,UAAMC,aAAalB,IAAIC,WAAWC,QAAQC,WAAW;AACrDU,eAAWK,UAAU;AAAA,EACpB,GAAA,CAACjB,WAAWC,QAAQC,WAAW,CAAC;AAEnCgB,aAAW,MAAM;AACf,UAAMD,aAAalB,IAAIC,WAAWC,QAAQC,WAAW;AACrDU,eAAWK,UAAU;AAAA,KACpBH,WAAW;AAEd,SAAOH,QAAQA;AACjB;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useRef, useEffect } from "react";
|
|
2
|
+
function useTimeout(callback, delay) {
|
|
3
|
+
const savedCallback = useRef(callback);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
savedCallback.current = callback;
|
|
6
|
+
}, [callback]);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (!delay)
|
|
9
|
+
return void 0;
|
|
10
|
+
const id = setTimeout(() => savedCallback.current(), delay);
|
|
11
|
+
return () => clearTimeout(id);
|
|
12
|
+
}, [delay]);
|
|
13
|
+
}
|
|
14
|
+
export {
|
|
15
|
+
useTimeout as default
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=useTimeout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTimeout.js","sources":["../../../../src/components/TimeAgo/useTimeout.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nexport default function useTimeout(callback, delay) {\n const savedCallback = useRef(callback);\n\n useEffect(() => {\n savedCallback.current = callback;\n }, [callback]);\n\n useEffect(() => {\n if (!delay) return undefined;\n\n const id = setTimeout(() => savedCallback.current(), delay);\n return () => clearTimeout(id);\n }, [delay]);\n}\n"],"names":["useTimeout","callback","delay","savedCallback","useRef","useEffect","current","undefined","id","setTimeout","clearTimeout"],"mappings":";AAEwBA,SAAAA,WAAWC,UAAUC,OAAO;AAC5CC,QAAAA,gBAAgBC,OAAOH,QAAQ;AAErCI,YAAU,MAAM;AACdF,kBAAcG,UAAUL;AAAAA,EAAAA,GACvB,CAACA,QAAQ,CAAC;AAEbI,YAAU,MAAM;AACd,QAAI,CAACH;AAAcK,aAAAA;AAEnB,UAAMC,KAAKC,WAAW,MAAMN,cAAcG,QAAAA,GAAWJ,KAAK;AACnD,WAAA,MAAMQ,aAAaF,EAAE;AAAA,EAAA,GAC3B,CAACN,KAAK,CAAC;AACZ;"}
|
package/dist/esm/index.js
CHANGED
|
@@ -240,8 +240,10 @@ import { HvScrollToHorizontal } from "./components/ScrollTo/Horizontal/ScrollToH
|
|
|
240
240
|
import { useScrollTo } from "./components/ScrollTo/useScrollTo.js";
|
|
241
241
|
import { default as default125 } from "./components/InlineEditor/inlineEditorClasses.js";
|
|
242
242
|
import { HvInlineEditor } from "./components/InlineEditor/InlineEditor.js";
|
|
243
|
-
import { default as default126 } from "./
|
|
244
|
-
import {
|
|
243
|
+
import { default as default126 } from "./components/TimeAgo/timeAgoClasses.js";
|
|
244
|
+
import { HvTimeAgo } from "./components/TimeAgo/TimeAgo.js";
|
|
245
|
+
import { default as default127 } from "./hooks/useUniqueId.js";
|
|
246
|
+
import { default as default128 } from "./hooks/useIsMounted.js";
|
|
245
247
|
import { useClickOutside } from "./hooks/useClickOutside.js";
|
|
246
248
|
import { useControlled } from "./hooks/useControlled.js";
|
|
247
249
|
import { useImageLoaded } from "./hooks/useImageLoaded.js";
|
|
@@ -253,11 +255,11 @@ import { useEnhancedEffect } from "./hooks/useEnhancedEffect.js";
|
|
|
253
255
|
import { HvProvider } from "./providers/Provider.js";
|
|
254
256
|
import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
|
|
255
257
|
import { HvThemeProvider } from "./providers/ThemeProvider.js";
|
|
256
|
-
import { default as
|
|
257
|
-
import { default as
|
|
258
|
-
import { default as
|
|
259
|
-
import { default as
|
|
260
|
-
import { default as
|
|
258
|
+
import { default as default129 } from "./utils/iconVariant.js";
|
|
259
|
+
import { default as default130 } from "./utils/hexToRgbA.js";
|
|
260
|
+
import { default as default131 } from "./utils/browser.js";
|
|
261
|
+
import { default as default132 } from "./utils/multiSelectionEventHandler.js";
|
|
262
|
+
import { default as default133 } from "./utils/getComponentName.js";
|
|
261
263
|
import { outlineStyles } from "./utils/focusUtils.js";
|
|
262
264
|
import { keyboardCodes } from "./utils/keyboardUtils/keyboardCodes.js";
|
|
263
265
|
import { getKeyCodeFromEvent, isKeycode, isKeypress } from "./utils/keyboardUtils/keyCheck.js";
|
|
@@ -268,8 +270,8 @@ import { getClasses } from "./utils/classes.js";
|
|
|
268
270
|
import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./utils/focusableElementFinder.js";
|
|
269
271
|
import { wrapperTooltip } from "./utils/wrapperTooltip.js";
|
|
270
272
|
import { useSavedState } from "./utils/useSavedState.js";
|
|
271
|
-
import { default as
|
|
272
|
-
import { default as
|
|
273
|
+
import { default as default134 } from "./hocs/withTooltip.js";
|
|
274
|
+
import { default as default135 } from "./hocs/withId.js";
|
|
273
275
|
export {
|
|
274
276
|
CellWithCheckBox,
|
|
275
277
|
CellWithExpandButton,
|
|
@@ -387,6 +389,7 @@ export {
|
|
|
387
389
|
HvTextArea,
|
|
388
390
|
HvThemeContext,
|
|
389
391
|
HvThemeProvider,
|
|
392
|
+
HvTimeAgo,
|
|
390
393
|
HvToggleButton,
|
|
391
394
|
HvTooltip,
|
|
392
395
|
HvTypography,
|
|
@@ -459,7 +462,7 @@ export {
|
|
|
459
462
|
default36 as footerClasses,
|
|
460
463
|
default13 as formElementClasses,
|
|
461
464
|
getClasses,
|
|
462
|
-
|
|
465
|
+
default133 as getComponentName,
|
|
463
466
|
getFirstAndLastFocus,
|
|
464
467
|
getFocusableList,
|
|
465
468
|
getHeaderFooterPropsHook,
|
|
@@ -477,7 +480,7 @@ export {
|
|
|
477
480
|
default40 as headerBrandClasses,
|
|
478
481
|
default38 as headerClasses,
|
|
479
482
|
default41 as headerNavigationClasses,
|
|
480
|
-
|
|
483
|
+
default130 as hexToRgbA,
|
|
481
484
|
default124 as horizontalScrollListItemClasses,
|
|
482
485
|
hvDateColumn,
|
|
483
486
|
hvDropdownColumn,
|
|
@@ -490,12 +493,12 @@ export {
|
|
|
490
493
|
hvSwitchColumn,
|
|
491
494
|
hvTagColumn,
|
|
492
495
|
hvTextColumn,
|
|
493
|
-
|
|
496
|
+
default129 as iconVariant,
|
|
494
497
|
increaseSize,
|
|
495
498
|
default15 as infoMessageClasses,
|
|
496
499
|
default125 as inlineEditorClasses,
|
|
497
500
|
default60 as inputClasses,
|
|
498
|
-
|
|
501
|
+
default131 as isBrowser,
|
|
499
502
|
isInvalid,
|
|
500
503
|
isKeycode,
|
|
501
504
|
isKeypress,
|
|
@@ -511,7 +514,7 @@ export {
|
|
|
511
514
|
default44 as loadingClasses,
|
|
512
515
|
default105 as loginClasses,
|
|
513
516
|
default45 as multiButtonClasses,
|
|
514
|
-
|
|
517
|
+
default132 as multiSelectionEventHandler,
|
|
515
518
|
normalizeProgressBar,
|
|
516
519
|
outlineStyles,
|
|
517
520
|
default53 as overflowTooltipClasses,
|
|
@@ -550,6 +553,7 @@ export {
|
|
|
550
553
|
default63 as textAreaClasses,
|
|
551
554
|
theme,
|
|
552
555
|
themes,
|
|
556
|
+
default126 as timeAgoClasses,
|
|
553
557
|
default52 as tooltipClasses,
|
|
554
558
|
default117 as treeViewClasses,
|
|
555
559
|
default118 as treeViewItemClasses,
|
|
@@ -575,13 +579,13 @@ export {
|
|
|
575
579
|
default92 as useHvTableStyles,
|
|
576
580
|
useImageLoaded,
|
|
577
581
|
useInstance,
|
|
578
|
-
|
|
582
|
+
default128 as useIsMounted,
|
|
579
583
|
useLabels,
|
|
580
584
|
useSavedState,
|
|
581
585
|
useScrollTo,
|
|
582
586
|
useSelectionPath,
|
|
583
587
|
useTheme,
|
|
584
|
-
|
|
588
|
+
default127 as useUniqueId,
|
|
585
589
|
useWidth,
|
|
586
590
|
default111 as verticalNavigationClasses,
|
|
587
591
|
default112 as verticalNavigationHeaderClasses,
|
|
@@ -589,8 +593,8 @@ export {
|
|
|
589
593
|
default115 as verticalNavigationTreeClasses,
|
|
590
594
|
default122 as verticalScrollListItemClasses,
|
|
591
595
|
default16 as warningTextClasses,
|
|
592
|
-
|
|
593
|
-
|
|
596
|
+
default135 as withId,
|
|
597
|
+
default134 as withTooltip,
|
|
594
598
|
wrapperTooltip
|
|
595
599
|
};
|
|
596
600
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -6499,6 +6499,55 @@ declare interface HvThemeProviderProps {
|
|
|
6499
6499
|
themeRootId?: string;
|
|
6500
6500
|
}
|
|
6501
6501
|
|
|
6502
|
+
/**
|
|
6503
|
+
* The HvTimeAgo component implements the Design System relative time format guidelines.
|
|
6504
|
+
*/
|
|
6505
|
+
export declare const HvTimeAgo: ({ classes, timestamp, locale: localeProp, component: Component, emptyElement, disableRefresh, showSeconds, justText, ...others }: HvTimeAgoProps) => JSX_2.Element;
|
|
6506
|
+
|
|
6507
|
+
export declare interface HvTimeAgoClasses {
|
|
6508
|
+
root?: string;
|
|
6509
|
+
}
|
|
6510
|
+
|
|
6511
|
+
export declare interface HvTimeAgoProps extends HvBaseProps<HTMLElement, {
|
|
6512
|
+
children: any;
|
|
6513
|
+
}> {
|
|
6514
|
+
/**
|
|
6515
|
+
* The timestamp to format, in seconds or milliseconds.
|
|
6516
|
+
* Defaults to `emptyElement` if value is null or 0
|
|
6517
|
+
*/
|
|
6518
|
+
timestamp?: number;
|
|
6519
|
+
/**
|
|
6520
|
+
* The locale to be used. Should be on of the dayjs supported locales and explicitly imported
|
|
6521
|
+
* @see https://day.js.org/docs/en/i18n/i18n
|
|
6522
|
+
*/
|
|
6523
|
+
locale?: string;
|
|
6524
|
+
/**
|
|
6525
|
+
* The component used for the root node. Either a string to use a HTML element or a component.
|
|
6526
|
+
* Defaults to `HvTypography`.
|
|
6527
|
+
*/
|
|
6528
|
+
component?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
|
|
6529
|
+
/**
|
|
6530
|
+
* The element to render when the timestamp is null or 0
|
|
6531
|
+
* Defaults to `—` (Em Dash)
|
|
6532
|
+
*/
|
|
6533
|
+
emptyElement?: React.ReactNode;
|
|
6534
|
+
/**
|
|
6535
|
+
* Disables periodic date refreshes
|
|
6536
|
+
*/
|
|
6537
|
+
disableRefresh?: boolean;
|
|
6538
|
+
/**
|
|
6539
|
+
* Whether to show seconds in the rendered time
|
|
6540
|
+
*/
|
|
6541
|
+
showSeconds?: boolean;
|
|
6542
|
+
/**
|
|
6543
|
+
* Whether the component should render just the string
|
|
6544
|
+
* Consider using `useTimeAgo` instead
|
|
6545
|
+
*/
|
|
6546
|
+
justText?: boolean;
|
|
6547
|
+
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
6548
|
+
classes?: HvTimeAgoClasses;
|
|
6549
|
+
}
|
|
6550
|
+
|
|
6502
6551
|
export declare const HvToggleButton: ForwardRefExoticComponent<HvToggleButtonProps & RefAttributes<HTMLButtonElement>>;
|
|
6503
6552
|
|
|
6504
6553
|
export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonElement, {
|
|
@@ -7549,6 +7598,8 @@ export { theme }
|
|
|
7549
7598
|
|
|
7550
7599
|
export { themes }
|
|
7551
7600
|
|
|
7601
|
+
export declare const timeAgoClasses: HvTimeAgoClasses;
|
|
7602
|
+
|
|
7552
7603
|
export declare const tooltipClasses: HvTooltipClasses;
|
|
7553
7604
|
|
|
7554
7605
|
export declare const treeViewClasses: HvVerticalNavigationTreeViewClasses;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@emotion/react": "^11.10.5",
|
|
26
26
|
"@emotion/styled": "^11.10.5",
|
|
27
|
-
"@mui/material": "^5.
|
|
27
|
+
"@mui/material": "^5.12.2",
|
|
28
28
|
"react": "^17.0.0 || ^18.0.0",
|
|
29
29
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
30
30
|
},
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"access": "public",
|
|
57
57
|
"directory": "package"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "844a033f2b8388c2ae25bfcc0be710db5ed24b27",
|
|
60
60
|
"main": "dist/cjs/index.cjs",
|
|
61
61
|
"exports": {
|
|
62
62
|
".": {
|