@bigbinary/neeto-molecules 3.16.86 → 3.16.87

package/README.md

@@ -81,6 +81,7 @@ https://neeto-molecules.neeto.com/
 - [Taxonomy](./docs/components/Taxonomy.md)
 - [TimezoneMismatchModal](./docs/components/TimezoneMismatchModal.md)
 - [ToggleFeatureCard](./docs/components/ToggleFeatureCard.md)
+- [VersionHistory](./docs/components/VersionHistory.md)
 
 ## Installation Instructions
 

package/dist/VersionHistory.js

@@ -0,0 +1,215 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { isNotEmpty } from '@bigbinary/neeto-cist';
+import withT$1 from '@bigbinary/neeto-commons-frontend/react-utils/withT';
+import Refresh from '@bigbinary/neeto-icons/Refresh';
+import Button from '@bigbinary/neetoui/Button';
+import Typography from '@bigbinary/neetoui/Typography';
+import Pane from '@bigbinary/neetoui/Pane';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import { t } from 'i18next';
+import classnames from 'classnames';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import Tag from '@bigbinary/neetoui/Tag';
+import Avatar from '@bigbinary/neetoui/Avatar';
+import DateFormat from './DateFormat.js';
+import MoreDropdown from './MoreDropdown.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import '@bigbinary/neeto-commons-frontend/react-utils/useTimer';
+import '@bigbinary/neeto-commons-frontend/utils/datetime';
+import '@bigbinary/neetoui/Tooltip';
+import 'ramda';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@bigbinary/neeto-icons/MenuHorizontal';
+import '@bigbinary/neeto-icons/MenuVertical';
+import '@bigbinary/neetoui/Dropdown';
+import 'react-i18next';
+import './inject-css-DmrvuTKK.js';
+
+var REFRESH_BUTTON_TOOLTIP_PROPS = Object.freeze({
+  content: t("neetoMolecules.versionHistory.refreshButtonTooltip"),
+  position: "bottom"
+});
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Version = withT(function (_ref) {
+  var t = _ref.t,
+    id = _ref.id,
+    date = _ref.date,
+    user = _ref.user,
+    onClick = _ref.onClick,
+    _ref$isDraft = _ref.isDraft,
+    isDraft = _ref$isDraft === void 0 ? false : _ref$isDraft,
+    _ref$isPublished = _ref.isPublished,
+    isPublished = _ref$isPublished === void 0 ? false : _ref$isPublished,
+    _ref$showMoreDropdown = _ref.showMoreDropdown,
+    showMoreDropdown = _ref$showMoreDropdown === void 0 ? false : _ref$showMoreDropdown,
+    _ref$moreDropdownProp = _ref.moreDropdownProps,
+    moreDropdownProps = _ref$moreDropdownProp === void 0 ? {} : _ref$moreDropdownProp,
+    _ref$isLast = _ref.isLast,
+    isLast = _ref$isLast === void 0 ? false : _ref$isLast;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex w-full gap-2",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "relative mt-2.5 flex flex-col items-center",
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames("neeto-ui-rounded-full neeto-ui-bg-gray-300 relative z-10 h-2 w-2", {
+          "neeto-ui-bg-warning-500": isDraft
+        }, {
+          "neeto-ui-bg-primary-500": isPublished
+        })
+      }), !isLast && /*#__PURE__*/jsx("span", {
+        "aria-hidden": "true",
+        className: "neeto-ui-bg-gray-300 absolute left-1/2 top-[9px] z-0 h-full w-px -translate-x-1/2"
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      onClick: onClick,
+      className: classnames("w-full", {
+        "pb-3": !isDraft
+      }),
+      children: /*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-rounded hover:neeto-ui-bg-gray-100 flex flex-grow cursor-pointer justify-between gap-4 px-1.5 pb-1.5 pt-1 transition-all duration-300",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex flex-grow flex-col gap-2",
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [/*#__PURE__*/jsx(Typography, {
+              style: "h5",
+              weight: "medium",
+              children: /*#__PURE__*/jsx(DateFormat.DateWeekTime, {
+                date: date,
+                typographyProps: {
+                  style: "body3",
+                  lineHeight: "snug"
+                }
+              })
+            }), isDraft && /*#__PURE__*/jsx(Tag, {
+              className: "float-left",
+              "data-testid": "version-history-draft-tag",
+              label: t("neetoMolecules.common.actions.draft"),
+              size: "small",
+              style: "warning"
+            })]
+          }), /*#__PURE__*/jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [/*#__PURE__*/jsx(Avatar, {
+              size: "small",
+              user: {
+                name: user
+              }
+            }), /*#__PURE__*/jsx(Typography, {
+              style: "body3",
+              children: user
+            })]
+          })]
+        }), showMoreDropdown && /*#__PURE__*/jsx("div", {
+          className: "flex-shrink-0",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          },
+          children: /*#__PURE__*/jsx(MoreDropdown, _objectSpread$1({
+            dropdownButtonProps: {
+              className: "m-1",
+              size: "small",
+              disabled: moreDropdownProps.disabled
+            },
+            dropdownProps: {
+              strategy: "fixed",
+              appendTo: function appendTo() {
+                return document.body;
+              }
+            }
+          }, moreDropdownProps))
+        })]
+      })
+    })]
+  }, id);
+});
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var VersionHistory = withT$1(function (_ref) {
+  var t = _ref.t,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    isLoading = _ref.isLoading,
+    _ref$draftVersions = _ref.draftVersions,
+    draftVersions = _ref$draftVersions === void 0 ? [] : _ref$draftVersions,
+    _ref$publishedVersion = _ref.publishedVersions,
+    publishedVersions = _ref$publishedVersion === void 0 ? [] : _ref$publishedVersion,
+    paneTitle = _ref.paneTitle,
+    _ref$showRefreshButto = _ref.showRefreshButton,
+    showRefreshButton = _ref$showRefreshButto === void 0 ? false : _ref$showRefreshButto,
+    onRefreshClick = _ref.onRefreshClick;
+  return /*#__PURE__*/jsx(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: isLoading ? /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs(Pane.Header, {
+        className: "flex justify-between",
+        children: [/*#__PURE__*/jsx(Typography, {
+          "data-testid": "version-history-pane-header",
+          lineHeight: "normal",
+          style: "h2",
+          weight: "semibold",
+          children: paneTitle || t("neetoMolecules.versionHistory.paneTitle")
+        }), showRefreshButton && /*#__PURE__*/jsx(Button, {
+          "data-testid": "version-history-refresh-button",
+          icon: Refresh,
+          iconSize: 18,
+          size: "small",
+          style: "text",
+          tooltipProps: REFRESH_BUTTON_TOOLTIP_PROPS,
+          onClick: onRefreshClick
+        })]
+      }), /*#__PURE__*/jsx(Pane.Body, {
+        children: /*#__PURE__*/jsxs("div", {
+          className: "w-full space-y-4",
+          children: [isNotEmpty(draftVersions) && /*#__PURE__*/jsx("div", {
+            className: "flex flex-col",
+            children: draftVersions.map(function (version, index) {
+              var isLast = index === draftVersions.length - 1;
+              return /*#__PURE__*/createElement(Version, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, version), {}, {
+                isLast: isLast
+              })), {}, {
+                key: version.id
+              }));
+            })
+          }), isNotEmpty(publishedVersions) && /*#__PURE__*/jsxs("div", {
+            className: "flex items-center",
+            children: [/*#__PURE__*/jsx("hr", {
+              className: "neeto-ui-border-gray-200 flex-grow"
+            }), /*#__PURE__*/jsx(Typography, {
+              className: "neeto-ui-bg-gray-200 neeto-ui-text-gray-800 neeto-ui-rounded inline-block px-3 py-1",
+              "data-cy": "version-history-published-title",
+              "data-testid": "version-history-published-title",
+              lineHeight: "normal",
+              style: "body3",
+              weight: "medium",
+              children: t("neetoMolecules.versionHistory.publishedVersions")
+            }), /*#__PURE__*/jsx("hr", {
+              className: "neeto-ui-border-gray-200 flex-grow"
+            })]
+          }), /*#__PURE__*/jsx("div", {
+            className: "flex flex-col",
+            children: publishedVersions.map(function (version, index) {
+              var isLast = index === publishedVersions.length - 1;
+              return /*#__PURE__*/createElement(Version, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, version), {}, {
+                isLast: isLast
+              })), {}, {
+                key: version.id
+              }));
+            })
+          })]
+        })
+      })]
+    })
+  });
+});
+
+export { VersionHistory as default };
+//# sourceMappingURL=VersionHistory.js.map

package/dist/VersionHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VersionHistory.js","sources":["../src/components/VersionHistory/constants.js","../src/components/VersionHistory/Version.jsx","../src/components/VersionHistory/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\n\nexport const REFRESH_BUTTON_TOOLTIP_PROPS = Object.freeze({\n  content: t(\"neetoMolecules.versionHistory.refreshButtonTooltip\"),\n  position: \"bottom\",\n});\n","import classnames from \"classnames\";\nimport { withT } from \"neetocommons/react-utils\";\nimport { Typography, Tag, Avatar } from \"neetoui\";\n\nimport DateFormat from \"components/DateFormat\";\nimport MoreDropdown from \"components/MoreDropdown\";\n\nconst Version = withT(\n  ({\n    t,\n    id,\n    date,\n    user,\n    onClick,\n    isDraft = false,\n    isPublished = false,\n    showMoreDropdown = false,\n    moreDropdownProps = {},\n    isLast = false,\n  }) => (\n    <div className=\"flex w-full gap-2\" key={id}>\n      <div className=\"relative mt-2.5 flex flex-col items-center\">\n        <span\n          className={classnames(\n            \"neeto-ui-rounded-full neeto-ui-bg-gray-300 relative z-10 h-2 w-2\",\n            { \"neeto-ui-bg-warning-500\": isDraft },\n            { \"neeto-ui-bg-primary-500\": isPublished }\n          )}\n        />\n        {!isLast && (\n          <span\n            aria-hidden=\"true\"\n            className=\"neeto-ui-bg-gray-300 absolute left-1/2 top-[9px] z-0 h-full w-px -translate-x-1/2\"\n          />\n        )}\n      </div>\n      <div\n        {...{ onClick }}\n        className={classnames(\"w-full\", { \"pb-3\": !isDraft })}\n      >\n        <div className=\"neeto-ui-rounded hover:neeto-ui-bg-gray-100 flex flex-grow cursor-pointer justify-between gap-4 px-1.5 pb-1.5 pt-1 transition-all duration-300\">\n          <div className=\"flex flex-grow flex-col gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <Typography style=\"h5\" weight=\"medium\">\n                <DateFormat.DateWeekTime\n                  {...{ date }}\n                  typographyProps={{ style: \"body3\", lineHeight: \"snug\" }}\n                />\n              </Typography>\n              {isDraft && (\n                <Tag\n                  className=\"float-left\"\n                  data-testid=\"version-history-draft-tag\"\n                  label={t(\"neetoMolecules.common.actions.draft\")}\n                  size=\"small\"\n                  style=\"warning\"\n                />\n              )}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Avatar size=\"small\" user={{ name: user }} />\n              <Typography style=\"body3\">{user}</Typography>\n            </div>\n          </div>\n          {showMoreDropdown && (\n            <div className=\"flex-shrink-0\" onClick={e => e.stopPropagation()}>\n              <MoreDropdown\n                dropdownButtonProps={{\n                  className: \"m-1\",\n                  size: \"small\",\n                  disabled: moreDropdownProps.disabled,\n                }}\n                dropdownProps={{\n                  strategy: \"fixed\",\n                  appendTo: () => document.body,\n                }}\n                {...moreDropdownProps}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n);\n\nexport default Version;\n","import { isNotEmpty } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Refresh } from \"neetoicons\";\nimport { Button, Typography, Pane, Spinner } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport { REFRESH_BUTTON_TOOLTIP_PROPS } from \"./constants\";\nimport Version from \"./Version\";\n\nconst VersionHistory = withT(\n  ({\n    t,\n    isOpen,\n    onClose,\n    isLoading,\n    draftVersions = [],\n    publishedVersions = [],\n    paneTitle,\n    showRefreshButton = false,\n    onRefreshClick,\n  }) => (\n    <Pane {...{ isOpen, onClose }}>\n      {isLoading ? (\n        <div className=\"flex h-full w-full items-center justify-center\">\n          <Spinner />\n        </div>\n      ) : (\n        <>\n          <Pane.Header className=\"flex justify-between\">\n            <Typography\n              data-testid=\"version-history-pane-header\"\n              lineHeight=\"normal\"\n              style=\"h2\"\n              weight=\"semibold\"\n            >\n              {paneTitle || t(\"neetoMolecules.versionHistory.paneTitle\")}\n            </Typography>\n            {showRefreshButton && (\n              <Button\n                data-testid=\"version-history-refresh-button\"\n                icon={Refresh}\n                iconSize={18}\n                size=\"small\"\n                style=\"text\"\n                tooltipProps={REFRESH_BUTTON_TOOLTIP_PROPS}\n                onClick={onRefreshClick}\n              />\n            )}\n          </Pane.Header>\n          <Pane.Body>\n            <div className=\"w-full space-y-4\">\n              {isNotEmpty(draftVersions) && (\n                <div className=\"flex flex-col\">\n                  {draftVersions.map((version, index) => {\n                    const isLast = index === draftVersions.length - 1;\n\n                    return (\n                      <Version {...{ ...version, isLast }} key={version.id} />\n                    );\n                  })}\n                </div>\n              )}\n              {isNotEmpty(publishedVersions) && (\n                <div className=\"flex items-center\">\n                  <hr className=\"neeto-ui-border-gray-200 flex-grow\" />\n                  <Typography\n                    className=\"neeto-ui-bg-gray-200 neeto-ui-text-gray-800 neeto-ui-rounded inline-block px-3 py-1\"\n                    data-cy=\"version-history-published-title\"\n                    data-testid=\"version-history-published-title\"\n                    lineHeight=\"normal\"\n                    style=\"body3\"\n                    weight=\"medium\"\n                  >\n                    {t(\"neetoMolecules.versionHistory.publishedVersions\")}\n                  </Typography>\n                  <hr className=\"neeto-ui-border-gray-200 flex-grow\" />\n                </div>\n              )}\n              <div className=\"flex flex-col\">\n                {publishedVersions.map((version, index) => {\n                  const isLast = index === publishedVersions.length - 1;\n\n                  return (\n                    <Version {...{ ...version, isLast }} key={version.id} />\n                  );\n                })}\n              </div>\n            </div>\n          </Pane.Body>\n        </>\n      )}\n    </Pane>\n  )\n);\n\nVersionHistory.propTypes = {\n  /**\n   * To specify whether the version history pane should be opened or closed.\n   */\n  isOpen: PropTypes.bool.isRequired,\n  /**\n   * Handler function that is triggered when the close button is clicked.\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Boolean flag to show loading state with spinner.\n   */\n  isLoading: PropTypes.bool,\n  /**\n   * Array of draft version objects to be displayed in the version history.\n   */\n  draftVersions: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      date: PropTypes.instanceOf(Date).isRequired,\n      user: PropTypes.string.isRequired,\n      onClick: PropTypes.func,\n      isDraft: PropTypes.bool,\n      isPublished: PropTypes.bool,\n      showMoreDropdown: PropTypes.bool,\n      moreDropdownProps: PropTypes.object,\n    })\n  ),\n  /**\n   * Array of published version objects to be displayed in the version history.\n   */\n  publishedVersions: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      date: PropTypes.instanceOf(Date).isRequired,\n      user: PropTypes.string.isRequired,\n      onClick: PropTypes.func,\n      isDraft: PropTypes.bool,\n      isPublished: PropTypes.bool,\n      showMoreDropdown: PropTypes.bool,\n      moreDropdownProps: PropTypes.object,\n    })\n  ),\n  /**\n   * Custom title to be displayed in the pane header. If not provided, a default title will be used.\n   */\n  paneTitle: PropTypes.string,\n  /**\n   * Boolean flag to show or hide the refresh button in the pane header.\n   */\n  showRefreshButton: PropTypes.bool,\n  /**\n   * Handler function that is triggered when the refresh button is clicked.\n   */\n  onRefreshClick: PropTypes.func,\n};\n\nexport default VersionHistory;\n"],"names":["REFRESH_BUTTON_TOOLTIP_PROPS","Object","freeze","content","t","position","Version","withT","_ref","id","date","user","onClick","_ref$isDraft","isDraft","_ref$isPublished","isPublished","_ref$showMoreDropdown","showMoreDropdown","_ref$moreDropdownProp","moreDropdownProps","_ref$isLast","isLast","_jsxs","className","children","_jsx","classnames","Typography","style","weight","DateFormat","DateWeekTime","typographyProps","lineHeight","Tag","label","size","Avatar","name","e","stopPropagation","MoreDropdown","_objectSpread","dropdownButtonProps","disabled","dropdownProps","strategy","appendTo","document","body","VersionHistory","isOpen","onClose","isLoading","_ref$draftVersions","draftVersions","_ref$publishedVersion","publishedVersions","paneTitle","_ref$showRefreshButto","showRefreshButton","onRefreshClick","Pane","Spinner","_Fragment","Header","Button","icon","Refresh","iconSize","tooltipProps","Body","isNotEmpty","map","version","index","length","_createElement","key"],"mappings":"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"}

package/dist/cjs/VersionHistory.js

@@ -0,0 +1,217 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var neetoCist = require('@bigbinary/neeto-cist');
+var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
+var Refresh = require('@bigbinary/neeto-icons/Refresh');
+var Button = require('@bigbinary/neetoui/Button');
+var Typography = require('@bigbinary/neetoui/Typography');
+var Pane = require('@bigbinary/neetoui/Pane');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var i18next = require('i18next');
+var classnames = require('classnames');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var Tag = require('@bigbinary/neetoui/Tag');
+var Avatar = require('@bigbinary/neetoui/Avatar');
+var DateFormat = require('./DateFormat.js');
+var MoreDropdown = require('./MoreDropdown.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+require('@bigbinary/neeto-commons-frontend/react-utils/useTimer');
+require('@bigbinary/neeto-commons-frontend/utils/datetime');
+require('@bigbinary/neetoui/Tooltip');
+require('ramda');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('@bigbinary/neeto-icons/MenuHorizontal');
+require('@bigbinary/neeto-icons/MenuVertical');
+require('@bigbinary/neetoui/Dropdown');
+require('react-i18next');
+require('./inject-css-vQvjPR2x.js');
+
+var REFRESH_BUTTON_TOOLTIP_PROPS = Object.freeze({
+  content: i18next.t("neetoMolecules.versionHistory.refreshButtonTooltip"),
+  position: "bottom"
+});
+
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Version = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    id = _ref.id,
+    date = _ref.date,
+    user = _ref.user,
+    onClick = _ref.onClick,
+    _ref$isDraft = _ref.isDraft,
+    isDraft = _ref$isDraft === void 0 ? false : _ref$isDraft,
+    _ref$isPublished = _ref.isPublished,
+    isPublished = _ref$isPublished === void 0 ? false : _ref$isPublished,
+    _ref$showMoreDropdown = _ref.showMoreDropdown,
+    showMoreDropdown = _ref$showMoreDropdown === void 0 ? false : _ref$showMoreDropdown,
+    _ref$moreDropdownProp = _ref.moreDropdownProps,
+    moreDropdownProps = _ref$moreDropdownProp === void 0 ? {} : _ref$moreDropdownProp,
+    _ref$isLast = _ref.isLast,
+    isLast = _ref$isLast === void 0 ? false : _ref$isLast;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex w-full gap-2",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "relative mt-2.5 flex flex-col items-center",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: classnames("neeto-ui-rounded-full neeto-ui-bg-gray-300 relative z-10 h-2 w-2", {
+          "neeto-ui-bg-warning-500": isDraft
+        }, {
+          "neeto-ui-bg-primary-500": isPublished
+        })
+      }), !isLast && /*#__PURE__*/jsxRuntime.jsx("span", {
+        "aria-hidden": "true",
+        className: "neeto-ui-bg-gray-300 absolute left-1/2 top-[9px] z-0 h-full w-px -translate-x-1/2"
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      onClick: onClick,
+      className: classnames("w-full", {
+        "pb-3": !isDraft
+      }),
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-ui-rounded hover:neeto-ui-bg-gray-100 flex flex-grow cursor-pointer justify-between gap-4 px-1.5 pb-1.5 pt-1 transition-all duration-300",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-grow flex-col gap-2",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+              style: "h5",
+              weight: "medium",
+              children: /*#__PURE__*/jsxRuntime.jsx(DateFormat.DateWeekTime, {
+                date: date,
+                typographyProps: {
+                  style: "body3",
+                  lineHeight: "snug"
+                }
+              })
+            }), isDraft && /*#__PURE__*/jsxRuntime.jsx(Tag, {
+              className: "float-left",
+              "data-testid": "version-history-draft-tag",
+              label: t("neetoMolecules.common.actions.draft"),
+              size: "small",
+              style: "warning"
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [/*#__PURE__*/jsxRuntime.jsx(Avatar, {
+              size: "small",
+              user: {
+                name: user
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+              style: "body3",
+              children: user
+            })]
+          })]
+        }), showMoreDropdown && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex-shrink-0",
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, _objectSpread$1({
+            dropdownButtonProps: {
+              className: "m-1",
+              size: "small",
+              disabled: moreDropdownProps.disabled
+            },
+            dropdownProps: {
+              strategy: "fixed",
+              appendTo: function appendTo() {
+                return document.body;
+              }
+            }
+          }, moreDropdownProps))
+        })]
+      })
+    })]
+  }, id);
+});
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var VersionHistory = withT(function (_ref) {
+  var t = _ref.t,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    isLoading = _ref.isLoading,
+    _ref$draftVersions = _ref.draftVersions,
+    draftVersions = _ref$draftVersions === void 0 ? [] : _ref$draftVersions,
+    _ref$publishedVersion = _ref.publishedVersions,
+    publishedVersions = _ref$publishedVersion === void 0 ? [] : _ref$publishedVersion,
+    paneTitle = _ref.paneTitle,
+    _ref$showRefreshButto = _ref.showRefreshButton,
+    showRefreshButton = _ref$showRefreshButto === void 0 ? false : _ref$showRefreshButto,
+    onRefreshClick = _ref.onRefreshClick;
+  return /*#__PURE__*/jsxRuntime.jsx(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    children: isLoading ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsxRuntime.jsx(Spinner, {})
+    }) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(Pane.Header, {
+        className: "flex justify-between",
+        children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+          "data-testid": "version-history-pane-header",
+          lineHeight: "normal",
+          style: "h2",
+          weight: "semibold",
+          children: paneTitle || t("neetoMolecules.versionHistory.paneTitle")
+        }), showRefreshButton && /*#__PURE__*/jsxRuntime.jsx(Button, {
+          "data-testid": "version-history-refresh-button",
+          icon: Refresh,
+          iconSize: 18,
+          size: "small",
+          style: "text",
+          tooltipProps: REFRESH_BUTTON_TOOLTIP_PROPS,
+          onClick: onRefreshClick
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "w-full space-y-4",
+          children: [neetoCist.isNotEmpty(draftVersions) && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex flex-col",
+            children: draftVersions.map(function (version, index) {
+              var isLast = index === draftVersions.length - 1;
+              return /*#__PURE__*/React.createElement(Version, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, version), {}, {
+                isLast: isLast
+              })), {}, {
+                key: version.id
+              }));
+            })
+          }), neetoCist.isNotEmpty(publishedVersions) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "flex items-center",
+            children: [/*#__PURE__*/jsxRuntime.jsx("hr", {
+              className: "neeto-ui-border-gray-200 flex-grow"
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
+              className: "neeto-ui-bg-gray-200 neeto-ui-text-gray-800 neeto-ui-rounded inline-block px-3 py-1",
+              "data-cy": "version-history-published-title",
+              "data-testid": "version-history-published-title",
+              lineHeight: "normal",
+              style: "body3",
+              weight: "medium",
+              children: t("neetoMolecules.versionHistory.publishedVersions")
+            }), /*#__PURE__*/jsxRuntime.jsx("hr", {
+              className: "neeto-ui-border-gray-200 flex-grow"
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex flex-col",
+            children: publishedVersions.map(function (version, index) {
+              var isLast = index === publishedVersions.length - 1;
+              return /*#__PURE__*/React.createElement(Version, _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, version), {}, {
+                isLast: isLast
+              })), {}, {
+                key: version.id
+              }));
+            })
+          })]
+        })
+      })]
+    })
+  });
+});
+
+module.exports = VersionHistory;
+//# sourceMappingURL=VersionHistory.js.map

package/dist/cjs/VersionHistory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VersionHistory.js","sources":["../../src/components/VersionHistory/constants.js","../../src/components/VersionHistory/Version.jsx","../../src/components/VersionHistory/index.jsx"],"sourcesContent":["import { t } from \"i18next\";\n\nexport const REFRESH_BUTTON_TOOLTIP_PROPS = Object.freeze({\n  content: t(\"neetoMolecules.versionHistory.refreshButtonTooltip\"),\n  position: \"bottom\",\n});\n","import classnames from \"classnames\";\nimport { withT } from \"neetocommons/react-utils\";\nimport { Typography, Tag, Avatar } from \"neetoui\";\n\nimport DateFormat from \"components/DateFormat\";\nimport MoreDropdown from \"components/MoreDropdown\";\n\nconst Version = withT(\n  ({\n    t,\n    id,\n    date,\n    user,\n    onClick,\n    isDraft = false,\n    isPublished = false,\n    showMoreDropdown = false,\n    moreDropdownProps = {},\n    isLast = false,\n  }) => (\n    <div className=\"flex w-full gap-2\" key={id}>\n      <div className=\"relative mt-2.5 flex flex-col items-center\">\n        <span\n          className={classnames(\n            \"neeto-ui-rounded-full neeto-ui-bg-gray-300 relative z-10 h-2 w-2\",\n            { \"neeto-ui-bg-warning-500\": isDraft },\n            { \"neeto-ui-bg-primary-500\": isPublished }\n          )}\n        />\n        {!isLast && (\n          <span\n            aria-hidden=\"true\"\n            className=\"neeto-ui-bg-gray-300 absolute left-1/2 top-[9px] z-0 h-full w-px -translate-x-1/2\"\n          />\n        )}\n      </div>\n      <div\n        {...{ onClick }}\n        className={classnames(\"w-full\", { \"pb-3\": !isDraft })}\n      >\n        <div className=\"neeto-ui-rounded hover:neeto-ui-bg-gray-100 flex flex-grow cursor-pointer justify-between gap-4 px-1.5 pb-1.5 pt-1 transition-all duration-300\">\n          <div className=\"flex flex-grow flex-col gap-2\">\n            <div className=\"flex items-center gap-2\">\n              <Typography style=\"h5\" weight=\"medium\">\n                <DateFormat.DateWeekTime\n                  {...{ date }}\n                  typographyProps={{ style: \"body3\", lineHeight: \"snug\" }}\n                />\n              </Typography>\n              {isDraft && (\n                <Tag\n                  className=\"float-left\"\n                  data-testid=\"version-history-draft-tag\"\n                  label={t(\"neetoMolecules.common.actions.draft\")}\n                  size=\"small\"\n                  style=\"warning\"\n                />\n              )}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Avatar size=\"small\" user={{ name: user }} />\n              <Typography style=\"body3\">{user}</Typography>\n            </div>\n          </div>\n          {showMoreDropdown && (\n            <div className=\"flex-shrink-0\" onClick={e => e.stopPropagation()}>\n              <MoreDropdown\n                dropdownButtonProps={{\n                  className: \"m-1\",\n                  size: \"small\",\n                  disabled: moreDropdownProps.disabled,\n                }}\n                dropdownProps={{\n                  strategy: \"fixed\",\n                  appendTo: () => document.body,\n                }}\n                {...moreDropdownProps}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n);\n\nexport default Version;\n","import { isNotEmpty } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { Refresh } from \"neetoicons\";\nimport { Button, Typography, Pane, Spinner } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nimport { REFRESH_BUTTON_TOOLTIP_PROPS } from \"./constants\";\nimport Version from \"./Version\";\n\nconst VersionHistory = withT(\n  ({\n    t,\n    isOpen,\n    onClose,\n    isLoading,\n    draftVersions = [],\n    publishedVersions = [],\n    paneTitle,\n    showRefreshButton = false,\n    onRefreshClick,\n  }) => (\n    <Pane {...{ isOpen, onClose }}>\n      {isLoading ? (\n        <div className=\"flex h-full w-full items-center justify-center\">\n          <Spinner />\n        </div>\n      ) : (\n        <>\n          <Pane.Header className=\"flex justify-between\">\n            <Typography\n              data-testid=\"version-history-pane-header\"\n              lineHeight=\"normal\"\n              style=\"h2\"\n              weight=\"semibold\"\n            >\n              {paneTitle || t(\"neetoMolecules.versionHistory.paneTitle\")}\n            </Typography>\n            {showRefreshButton && (\n              <Button\n                data-testid=\"version-history-refresh-button\"\n                icon={Refresh}\n                iconSize={18}\n                size=\"small\"\n                style=\"text\"\n                tooltipProps={REFRESH_BUTTON_TOOLTIP_PROPS}\n                onClick={onRefreshClick}\n              />\n            )}\n          </Pane.Header>\n          <Pane.Body>\n            <div className=\"w-full space-y-4\">\n              {isNotEmpty(draftVersions) && (\n                <div className=\"flex flex-col\">\n                  {draftVersions.map((version, index) => {\n                    const isLast = index === draftVersions.length - 1;\n\n                    return (\n                      <Version {...{ ...version, isLast }} key={version.id} />\n                    );\n                  })}\n                </div>\n              )}\n              {isNotEmpty(publishedVersions) && (\n                <div className=\"flex items-center\">\n                  <hr className=\"neeto-ui-border-gray-200 flex-grow\" />\n                  <Typography\n                    className=\"neeto-ui-bg-gray-200 neeto-ui-text-gray-800 neeto-ui-rounded inline-block px-3 py-1\"\n                    data-cy=\"version-history-published-title\"\n                    data-testid=\"version-history-published-title\"\n                    lineHeight=\"normal\"\n                    style=\"body3\"\n                    weight=\"medium\"\n                  >\n                    {t(\"neetoMolecules.versionHistory.publishedVersions\")}\n                  </Typography>\n                  <hr className=\"neeto-ui-border-gray-200 flex-grow\" />\n                </div>\n              )}\n              <div className=\"flex flex-col\">\n                {publishedVersions.map((version, index) => {\n                  const isLast = index === publishedVersions.length - 1;\n\n                  return (\n                    <Version {...{ ...version, isLast }} key={version.id} />\n                  );\n                })}\n              </div>\n            </div>\n          </Pane.Body>\n        </>\n      )}\n    </Pane>\n  )\n);\n\nVersionHistory.propTypes = {\n  /**\n   * To specify whether the version history pane should be opened or closed.\n   */\n  isOpen: PropTypes.bool.isRequired,\n  /**\n   * Handler function that is triggered when the close button is clicked.\n   */\n  onClose: PropTypes.func.isRequired,\n  /**\n   * Boolean flag to show loading state with spinner.\n   */\n  isLoading: PropTypes.bool,\n  /**\n   * Array of draft version objects to be displayed in the version history.\n   */\n  draftVersions: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      date: PropTypes.instanceOf(Date).isRequired,\n      user: PropTypes.string.isRequired,\n      onClick: PropTypes.func,\n      isDraft: PropTypes.bool,\n      isPublished: PropTypes.bool,\n      showMoreDropdown: PropTypes.bool,\n      moreDropdownProps: PropTypes.object,\n    })\n  ),\n  /**\n   * Array of published version objects to be displayed in the version history.\n   */\n  publishedVersions: PropTypes.arrayOf(\n    PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      date: PropTypes.instanceOf(Date).isRequired,\n      user: PropTypes.string.isRequired,\n      onClick: PropTypes.func,\n      isDraft: PropTypes.bool,\n      isPublished: PropTypes.bool,\n      showMoreDropdown: PropTypes.bool,\n      moreDropdownProps: PropTypes.object,\n    })\n  ),\n  /**\n   * Custom title to be displayed in the pane header. If not provided, a default title will be used.\n   */\n  paneTitle: PropTypes.string,\n  /**\n   * Boolean flag to show or hide the refresh button in the pane header.\n   */\n  showRefreshButton: PropTypes.bool,\n  /**\n   * Handler function that is triggered when the refresh button is clicked.\n   */\n  onRefreshClick: PropTypes.func,\n};\n\nexport default VersionHistory;\n"],"names":["REFRESH_BUTTON_TOOLTIP_PROPS","Object","freeze","content","t","position","Version","withT","_ref","id","date","user","onClick","_ref$isDraft","isDraft","_ref$isPublished","isPublished","_ref$showMoreDropdown","showMoreDropdown","_ref$moreDropdownProp","moreDropdownProps","_ref$isLast","isLast","_jsxs","className","children","_jsx","classnames","Typography","style","weight","DateFormat","DateWeekTime","typographyProps","lineHeight","Tag","label","size","Avatar","name","e","stopPropagation","MoreDropdown","_objectSpread","dropdownButtonProps","disabled","dropdownProps","strategy","appendTo","document","body","VersionHistory","isOpen","onClose","isLoading","_ref$draftVersions","draftVersions","_ref$publishedVersion","publishedVersions","paneTitle","_ref$showRefreshButto","showRefreshButton","onRefreshClick","Pane","Spinner","_Fragment","Header","Button","icon","Refresh","iconSize","tooltipProps","Body","isNotEmpty","map","version","index","length","_createElement","key"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.16.86",
+  "version": "3.16.87",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/src/translations/en.json

@@ -847,6 +847,11 @@
     },
     "statusDropdown": {
       "placeholder": "Select a status"
+    },
+    "versionHistory": {
+      "paneTitle": "Version history",
+      "publishedVersions": "Published versions",
+      "refreshButtonTooltip": "Refresh version history"
     }
   }
 }

package/types/VersionHistory.d.ts

@@ -0,0 +1,205 @@
+import React from 'react';
+
+type Version = {
+  id: string;
+  date: Date;
+  user: string;
+  onClick?: () => void;
+  isDraft?: boolean;
+  isPublished?: boolean;
+  showMoreDropdown?: boolean;
+  moreDropdownProps?: MoreDropdownProps;
+};
+type MoreDropdownProps = {
+  menuItems: MenuItem[];
+  disabled?: boolean;
+  dropdownButtonProps?: Record<string, any>;
+  dropdownProps?: Record<string, any>;
+};
+type MenuItem = {
+  key: string;
+  label: string;
+  onClick: () => void;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  disabled?: boolean;
+  [key: string]: any;
+};
+/**
+ *
+ * A React component that displays a timeline of versions with user information,
+ *
+ * dates, and status indicators. Each version can be a draft, published, or regular
+ *
+ * version with optional dropdown actions.
+ *
+ * undefined
+ *
+ * undefined
+ *
+ * Each version object in draftVersions and publishedVersions should have the
+ *
+ * following properties:
+ *
+ * @example 
+ *
+ * {
+ *   id: string,                    // Required: Unique identifier for the version
+ *   date: Date,                    // Required: Date when the version was created
+ *   user: string,                  // Required: Name of the user who created this version
+ *   onClick: function,             // Optional: Function called when version is clicked
+ *   isDraft: boolean,              // Optional: Whether this is a draft version
+ *   isPublished: boolean,          // Optional: Whether this is a published version
+ *   showMoreDropdown: boolean,     // Optional: Whether to show more dropdown menu
+ *   moreDropdownProps: object,     // Optional: Props for MoreDropdown component
+ * }
+ * @endexample
+ * @example 
+ *
+ * import VersionHistory from "@bigbinary/neeto-molecules/VersionHistory";
+ * 
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   const draftVersions = [
+ *     {
+ *       id: "draft-1",
+ *       date: new Date("2024-01-15T10:30:00"),
+ *       user: "Oliver Smith",
+ *       isDraft: true,
+ *     },
+ *   ];
+ * 
+ *   const publishedVersions = [
+ *     {
+ *       id: "pub-1",
+ *       date: new Date("2024-01-14T15:45:00"),
+ *       user: "Sam Smith",
+ *       isPublished: true,
+ *     },
+ *   ];
+ * 
+ *   return (
+ *     <VersionHistory
+ *       isOpen={isOpen}
+ *       onClose={() => setIsOpen(false)}
+ *       draftVersions={draftVersions}
+ *       publishedVersions={publishedVersions}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * @example 
+ *
+ * import VersionHistory from "@bigbinary/neeto-molecules/VersionHistory";
+ * import { Refresh } from "neetoicons";
+ * 
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   const draftVersions = [
+ *     {
+ *       id: "draft-1",
+ *       date: new Date("2024-01-15T10:30:00"),
+ *       user: "Oliver Smith",
+ *       isDraft: true,
+ *     },
+ *   ];
+ * 
+ *   const publishedVersions = [
+ *     {
+ *       id: "pub-1",
+ *       date: new Date(),
+ *       user: "Sam Smith",
+ *       isPublished: true,
+ *       showMoreDropdown: true,
+ *       moreDropdownProps: {
+ *         menuItems: [
+ *           {
+ *             key: "revert",
+ *             label: "Revert to this version",
+ *             onClick: () => handleRevert("version-1"),
+ *             prefix: <Refresh size={16} />,
+ *           },
+ *         ],
+ *       },
+ *     },
+ *   ];
+ * 
+ *   return (
+ *     <VersionHistory
+ *       isOpen={isOpen}
+ *       onClose={() => setIsOpen(false)}
+ *       draftVersions={draftVersions}
+ *       publishedVersions={publishedVersions}
+ *     />
+ *   );
+ * };
+ * @endexample
+ * @example 
+ *
+ * import VersionHistory from "@bigbinary/neeto-molecules/VersionHistory";
+ * 
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ * 
+ *   const handleRefresh = () => {
+ *     // Fetch updated versions
+ *     fetchVersions();
+ *   };
+ * 
+ *   const draftVersions = [
+ *     {
+ *       id: "draft-1",
+ *       date: new Date("2024-01-15T10:30:00"),
+ *       user: "Oliver Smith",
+ *       isDraft: true,
+ *     },
+ *   ];
+ * 
+ *   const publishedVersions = [
+ *     {
+ *       id: "version-1",
+ *       date: new Date(),
+ *       user: "Sam Smith",
+ *       isPublished: true,
+ *       showMoreDropdown: true,
+ *       moreDropdownProps: {
+ *         menuItems: [
+ *           {
+ *             key: "revert",
+ *             label: "Revert to this version",
+ *             onClick: () => handleRevert("version-1"),
+ *             prefix: <Refresh size={16} />,
+ *           },
+ *         ],
+ *       },
+ *     },
+ *   ];
+ * 
+ *   return (
+ *     <VersionHistory
+ *       isOpen={isOpen}
+ *       onClose={() => setIsOpen(false)}
+ *       paneTitle="Article Version History"
+ *       showRefreshButton={true}
+ *       onRefreshClick={handleRefresh}
+ *       draftVersions={draftVersions}
+ *       publishedVersions={publishedVersions}
+ *     />
+ *   );
+ * };
+ * @endexample
+*/
+declare const VersionHistory: React.FC<{
+  isOpen: boolean;
+  onClose: () => void;
+  isLoading?: boolean;
+  draftVersions?: Version[];
+  publishedVersions?: Version[];
+  paneTitle?: string;
+  showRefreshButton?: boolean;
+  onRefreshClick?: () => void;
+}>;
+
+export { VersionHistory as default };