@dhis2/analytics 24.9.0-alpha.1 → 24.9.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [24.9.1](https://github.com/dhis2/analytics/compare/v24.9.0...v24.9.1) (2023-03-10)
+
+
+### Bug Fixes
+
+* spacing in Rename and SaveAs dialogs ([#1447](https://github.com/dhis2/analytics/issues/1447)) ([35e1872](https://github.com/dhis2/analytics/commit/35e18724ff88a09d13deedb54e897ad2506c4f08))
+
+# [24.9.0](https://github.com/dhis2/analytics/compare/v24.8.0...v24.9.0) (2023-02-24)
+
+
+### Features
+
+* merge multi-calendar support from alpha to master ([#1434](https://github.com/dhis2/analytics/issues/1434)) ([3cdac8f](https://github.com/dhis2/analytics/commit/3cdac8fdefc7a15a3fef0940183ca92f03b0f57c))
+
 # [24.9.0-alpha.1](https://github.com/dhis2/analytics/compare/v24.8.0...v24.9.0-alpha.1) (2023-02-23)
 
 

package/build/cjs/components/FileMenu/FileMenu.styles.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fileMenuStyles = void 0;
+exports.modalStyles = exports.fileMenuStyles = void 0;
 
 var _ui = require("@dhis2/ui");
 
 const fileMenuStyles = [".menu-toggle.jsx-2670121391{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:14px;font-weight:400;text-transform:none;padding:6px ".concat(_ui.spacers.dp12, ";border-radius:3px;color:").concat(_ui.colors.grey900, ";box-sizing:border-box;line-height:1.75;background:none;border:none;-webkit-transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;cursor:pointer;}"), ".menu-toggle.jsx-2670121391:hover.jsx-2670121391:enabled{background-color:".concat(_ui.colors.grey200, ";}"), ".menu-toggle.jsx-2670121391:disabled{color:".concat(_ui.colors.grey400, ";cursor:not-allowed;}"), ".menu-toggle.jsx-2670121391:active{background-color:".concat(_ui.colors.grey300, ";}"), ".menuButton.jsx-2670121391:focus{outline:2px solid ".concat(_ui.colors.blue600, ";}"), ".menuButton.jsx-2670121391:focus.jsx-2670121391:not(:focus-visible){outline:none;}"];
 exports.fileMenuStyles = fileMenuStyles;
-fileMenuStyles.__hash = "2670121391";
+fileMenuStyles.__hash = "2670121391";
+const modalStyles = [".modal-content.jsx-3091623050{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:".concat(_ui.spacers.dp12, ";}")];
+exports.modalStyles = modalStyles;
+modalStyles.__hash = "3091623050";

package/build/cjs/components/FileMenu/RenameDialog.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RenameDialog = void 0;
 
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
 var _appRuntime = require("@dhis2/app-runtime");
 
 var _ui = require("@dhis2/ui");
@@ -15,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _index = _interopRequireDefault(require("../../locales/index.js"));
 
+var _FileMenuStyles = require("./FileMenu.styles.js");
+
 var _utils = require("./utils.js");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -55,7 +59,7 @@ const RenameDialog = _ref3 => {
   } = _ref3;
   const [name, setName] = (0, _react.useState)(object.name);
   const [description, setDescription] = (0, _react.useState)(object.description);
-  const mutation = (0, _react.useMemo)(() => getMutation(type), []);
+  const mutation = (0, _react.useMemo)(() => getMutation(type), [type]);
   const [mutate, {
     loading
   }] = (0, _appRuntime.useDataMutation)(mutation, {
@@ -82,9 +86,13 @@ const RenameDialog = _ref3 => {
 
   return /*#__PURE__*/_react.default.createElement(_ui.Modal, {
     onClose: onClose
-  }, /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _index.default.t('Rename {{fileType}}', {
+  }, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _FileMenuStyles.modalStyles.__hash
+  }, _FileMenuStyles.modalStyles), /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _index.default.t('Rename {{fileType}}', {
     fileType: (0, _utils.labelForFileType)(type)
-  })), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
+  })), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_FileMenuStyles.modalStyles.__hash) + " " + "modal-content"
+  }, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
     label: _index.default.t('Name'),
     disabled: loading,
     required: true,
@@ -106,7 +114,7 @@ const RenameDialog = _ref3 => {
       } = _ref5;
       return setDescription(value);
     }
-  })), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+  }))), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     onClick: onClose,
     disabled: loading,
     secondary: true

package/build/cjs/components/FileMenu/SaveAsDialog.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SaveAsDialog = void 0;
 
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
 var _ui = require("@dhis2/ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -13,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _index = _interopRequireDefault(require("../../locales/index.js"));
 
+var _FileMenuStyles = require("./FileMenu.styles.js");
+
 var _utils = require("./utils.js");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -46,9 +50,13 @@ const SaveAsDialog = _ref => {
   return /*#__PURE__*/_react.default.createElement(_ui.Modal, {
     onClose: onClose,
     dataTest: "file-menu-saveas-modal"
-  }, /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _index.default.t('Save {{fileType}} as', {
+  }, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _FileMenuStyles.modalStyles.__hash
+  }, _FileMenuStyles.modalStyles), /*#__PURE__*/_react.default.createElement(_ui.ModalTitle, null, _index.default.t('Save {{fileType}} as', {
     fileType: (0, _utils.labelForFileType)(type)
-  })), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
+  })), /*#__PURE__*/_react.default.createElement(_ui.ModalContent, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "jsx-".concat(_FileMenuStyles.modalStyles.__hash) + " " + "modal-content"
+  }, /*#__PURE__*/_react.default.createElement(_ui.InputField, {
     label: _index.default.t('Name'),
     value: name,
     onChange: _ref2 => {
@@ -69,7 +77,7 @@ const SaveAsDialog = _ref => {
       return setDescription(value);
     },
     dataTest: "file-menu-saveas-modal-description"
-  })), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+  }))), /*#__PURE__*/_react.default.createElement(_ui.ModalActions, null, /*#__PURE__*/_react.default.createElement(_ui.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     onClick: onClose,
     secondary: true,
     dataTest: "file-menu-saveas-modal-cancel"

package/build/cjs/components/PeriodDimension/PeriodDimension.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _appRuntime = require("@dhis2/app-runtime");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -15,6 +17,15 @@ var _PeriodTransfer = _interopRequireDefault(require("./PeriodTransfer.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const userSettingsQuery = {
+  userSettings: {
+    resource: 'userSettings',
+    params: {
+      key: ['keyUiLocale']
+    }
+  }
+};
+
 const PeriodDimension = _ref => {
   let {
     onSelect,
@@ -22,6 +33,24 @@ const PeriodDimension = _ref => {
     rightFooter,
     excludedPeriodTypes
   } = _ref;
+  const {
+    systemInfo
+  } = (0, _appRuntime.useConfig)();
+  const result = (0, _appRuntime.useDataQuery)(userSettingsQuery);
+  const {
+    calendar = 'gregory'
+  } = systemInfo;
+  const {
+    data: {
+      userSettings: {
+        keyUiLocale: locale
+      } = {}
+    } = {}
+  } = result;
+  const periodsSettings = {
+    calendar,
+    locale
+  };
 
   const selectPeriods = periods => {
     onSelect({
@@ -35,7 +64,8 @@ const PeriodDimension = _ref => {
     initialSelectedPeriods: selectedPeriods,
     rightFooter: rightFooter,
     dataTest: 'period-dimension',
-    excludedPeriodTypes: excludedPeriodTypes
+    excludedPeriodTypes: excludedPeriodTypes,
+    periodsSettings: periodsSettings
   });
 };
 

package/build/cjs/components/PeriodDimension/PeriodTransfer.js

@@ -7,8 +7,6 @@ exports.default = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
-var _appRuntime = require("@dhis2/app-runtime");
-
 var _multiCalendarDates = require("@dhis2/multi-calendar-dates");
 
 var _ui = require("@dhis2/ui");
@@ -45,44 +43,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const userSettingsQuery = {
-  userSettings: {
-    resource: 'userSettings',
-    params: {
-      key: ['keyUiLocale']
-    }
-  }
-};
-
 const PeriodTransfer = _ref => {
   let {
     onSelect,
     dataTest,
     initialSelectedPeriods,
     rightFooter,
-    excludedPeriodTypes
+    excludedPeriodTypes,
+    periodsSettings
   } = _ref;
-  const {
-    systemInfo
-  } = (0, _appRuntime.useConfig)();
-  const result = (0, _appRuntime.useDataQuery)(userSettingsQuery);
-  const {
-    calendar = 'gregory'
-  } = systemInfo;
-  const {
-    data: {
-      userSettings: {
-        keyUiLocale: locale
-      } = {}
-    } = {}
-  } = result;
-  const periodsSettings = {
-    calendar,
-    locale
-  };
   const defaultRelativePeriodType = excludedPeriodTypes.includes(_index2.MONTHLY) ? (0, _relativePeriods.getRelativePeriodsOptionsById)(_index2.QUARTERLY) : (0, _relativePeriods.getRelativePeriodsOptionsById)(_index2.MONTHLY);
   const defaultFixedPeriodType = excludedPeriodTypes.includes(_index2.MONTHLY) ? (0, _fixedPeriods.getFixedPeriodsOptionsById)(_index2.QUARTERLY, periodsSettings) : (0, _fixedPeriods.getFixedPeriodsOptionsById)(_index2.MONTHLY, periodsSettings);
-  const now = (0, _multiCalendarDates.getNowInCalendar)(calendar); // use ".eraYear" rather than ".year" because in Ethiopian calendar, eraYear is what our users expect to see (for other calendars, it doesn't matter)
+  const now = (0, _multiCalendarDates.getNowInCalendar)(periodsSettings.calendar); // use ".eraYear" rather than ".year" because in Ethiopian calendar, eraYear is what our users expect to see (for other calendars, it doesn't matter)
   // there is still a pending decision in Temporal regarding which era to use by default: https://github.com/js-temporal/temporal-polyfill/blob/9350ee7dd0d29f329fc097debf923a517c32f813/lib/calendar.ts#L1964
 
   const defaultFixedPeriodYear = now.eraYear || now.year;
@@ -210,7 +182,11 @@ const PeriodTransfer = _ref => {
 
 PeriodTransfer.defaultProps = {
   initialSelectedPeriods: [],
-  excludedPeriodTypes: []
+  excludedPeriodTypes: [],
+  periodsSettings: {
+    calendar: 'gregory',
+    locale: 'en'
+  }
 };
 PeriodTransfer.propTypes = {
   onSelect: _propTypes.default.func.isRequired,
@@ -220,6 +196,10 @@ PeriodTransfer.propTypes = {
     id: _propTypes.default.string,
     name: _propTypes.default.string
   })),
+  periodsSettings: _propTypes.default.shape({
+    calendar: _propTypes.default.string,
+    locale: _propTypes.default.string
+  }),
   rightFooter: _propTypes.default.node
 };
 var _default = PeriodTransfer;

package/build/cjs/components/PeriodDimension/__tests__/PeriodDimension.spec.js

@@ -8,6 +8,19 @@ var _PeriodDimension = _interopRequireDefault(require("../PeriodDimension.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+jest.mock('@dhis2/app-runtime', () => ({
+  useConfig: () => ({
+    systemInfo: {}
+  }),
+  useDataQuery: () => ({
+    data: {
+      userSettings: {
+        keyUiLocale: 'en'
+      }
+    }
+  })
+}));
+afterEach(jest.clearAllMocks);
 describe('The Period Dimension component', () => {
   let props;
   let shallowPeriodDimension;

package/build/cjs/components/PeriodDimension/__tests__/PeriodSelector.spec.js

@@ -8,19 +8,6 @@ var _PeriodTransfer = _interopRequireDefault(require("../PeriodTransfer.js"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-jest.mock('@dhis2/app-runtime', () => ({
-  useConfig: () => ({
-    systemInfo: {}
-  }),
-  useDataQuery: () => ({
-    data: {
-      userSettings: {
-        keyUiLocale: 'en'
-      }
-    }
-  })
-}));
-afterEach(jest.clearAllMocks);
 describe('The Period Selector component', () => {
   let props;
   let shallowPeriodTransfer;

package/build/cjs/components/PeriodDimension/__tests__/__snapshots__/PeriodDimension.spec.js.snap

@@ -6,6 +6,12 @@ exports[`The Period Dimension component matches the snapshot 1`] = `
   excludedPeriodTypes={Array []}
   initialSelectedPeriods={Array []}
   onSelect={[Function]}
+  periodsSettings={
+    Object {
+      "calendar": "gregory",
+      "locale": "en",
+    }
+  }
   rightFooter={<React.Fragment />}
 />
 `;

package/build/es/components/FileMenu/FileMenu.styles.js

@@ -1,3 +1,5 @@
 import { colors, spacers } from '@dhis2/ui';
 export const fileMenuStyles = [".menu-toggle.jsx-2670121391{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:14px;font-weight:400;text-transform:none;padding:6px ".concat(spacers.dp12, ";border-radius:3px;color:").concat(colors.grey900, ";box-sizing:border-box;line-height:1.75;background:none;border:none;-webkit-transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;transition:background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms;cursor:pointer;}"), ".menu-toggle.jsx-2670121391:hover.jsx-2670121391:enabled{background-color:".concat(colors.grey200, ";}"), ".menu-toggle.jsx-2670121391:disabled{color:".concat(colors.grey400, ";cursor:not-allowed;}"), ".menu-toggle.jsx-2670121391:active{background-color:".concat(colors.grey300, ";}"), ".menuButton.jsx-2670121391:focus{outline:2px solid ".concat(colors.blue600, ";}"), ".menuButton.jsx-2670121391:focus.jsx-2670121391:not(:focus-visible){outline:none;}"];
-fileMenuStyles.__hash = "2670121391";
+fileMenuStyles.__hash = "2670121391";
+export const modalStyles = [".modal-content.jsx-3091623050{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:".concat(spacers.dp12, ";}")];
+modalStyles.__hash = "3091623050";

package/build/es/components/FileMenu/RenameDialog.js

@@ -1,8 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
 import { useDataMutation } from '@dhis2/app-runtime';
 import { Modal, ModalTitle, ModalContent, ModalActions, ButtonStrip, Button, InputField, TextAreaField } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useMemo, useState } from 'react';
 import i18n from '../../locales/index.js';
+import { modalStyles } from './FileMenu.styles.js';
 import { supportedFileTypes, endpointFromFileType, labelForFileType } from './utils.js';
 
 const getMutation = type => ({
@@ -37,7 +39,7 @@ export const RenameDialog = _ref3 => {
   } = _ref3;
   const [name, setName] = useState(object.name);
   const [description, setDescription] = useState(object.description);
-  const mutation = useMemo(() => getMutation(type), []);
+  const mutation = useMemo(() => getMutation(type), [type]);
   const [mutate, {
     loading
   }] = useDataMutation(mutation, {
@@ -64,9 +66,13 @@ export const RenameDialog = _ref3 => {
 
   return /*#__PURE__*/React.createElement(Modal, {
     onClose: onClose
-  }, /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Rename {{fileType}}', {
+  }, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: modalStyles.__hash
+  }, modalStyles), /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Rename {{fileType}}', {
     fileType: labelForFileType(type)
-  })), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(InputField, {
+  })), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(modalStyles.__hash) + " " + "modal-content"
+  }, /*#__PURE__*/React.createElement(InputField, {
     label: i18n.t('Name'),
     disabled: loading,
     required: true,
@@ -88,7 +94,7 @@ export const RenameDialog = _ref3 => {
       } = _ref5;
       return setDescription(value);
     }
-  })), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+  }))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
     disabled: loading,
     secondary: true

package/build/es/components/FileMenu/SaveAsDialog.js

@@ -1,7 +1,9 @@
+import _JSXStyle from "styled-jsx/style";
 import { Modal, ModalTitle, ModalContent, ModalActions, ButtonStrip, Button, InputField, TextAreaField } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import i18n from '../../locales/index.js';
+import { modalStyles } from './FileMenu.styles.js';
 import { supportedFileTypes, labelForFileType } from './utils.js';
 const NAME_MAXLENGTH = 230;
 export const SaveAsDialog = _ref => {
@@ -27,9 +29,13 @@ export const SaveAsDialog = _ref => {
   return /*#__PURE__*/React.createElement(Modal, {
     onClose: onClose,
     dataTest: "file-menu-saveas-modal"
-  }, /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Save {{fileType}} as', {
+  }, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: modalStyles.__hash
+  }, modalStyles), /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Save {{fileType}} as', {
     fileType: labelForFileType(type)
-  })), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(InputField, {
+  })), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement("div", {
+    className: "jsx-".concat(modalStyles.__hash) + " " + "modal-content"
+  }, /*#__PURE__*/React.createElement(InputField, {
     label: i18n.t('Name'),
     value: name,
     onChange: _ref2 => {
@@ -50,7 +56,7 @@ export const SaveAsDialog = _ref => {
       return setDescription(value);
     },
     dataTest: "file-menu-saveas-modal-description"
-  })), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+  }))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
     onClick: onClose,
     secondary: true,
     dataTest: "file-menu-saveas-modal-cancel"

package/build/es/components/PeriodDimension/PeriodDimension.js

@@ -1,7 +1,16 @@
+import { useConfig, useDataQuery } from '@dhis2/app-runtime';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { DIMENSION_ID_PERIOD } from '../../modules/predefinedDimensions.js';
 import PeriodTransfer from './PeriodTransfer.js';
+const userSettingsQuery = {
+  userSettings: {
+    resource: 'userSettings',
+    params: {
+      key: ['keyUiLocale']
+    }
+  }
+};
 
 const PeriodDimension = _ref => {
   let {
@@ -10,6 +19,24 @@ const PeriodDimension = _ref => {
     rightFooter,
     excludedPeriodTypes
   } = _ref;
+  const {
+    systemInfo
+  } = useConfig();
+  const result = useDataQuery(userSettingsQuery);
+  const {
+    calendar = 'gregory'
+  } = systemInfo;
+  const {
+    data: {
+      userSettings: {
+        keyUiLocale: locale
+      } = {}
+    } = {}
+  } = result;
+  const periodsSettings = {
+    calendar,
+    locale
+  };
 
   const selectPeriods = periods => {
     onSelect({
@@ -23,7 +50,8 @@ const PeriodDimension = _ref => {
     initialSelectedPeriods: selectedPeriods,
     rightFooter: rightFooter,
     dataTest: 'period-dimension',
-    excludedPeriodTypes: excludedPeriodTypes
+    excludedPeriodTypes: excludedPeriodTypes,
+    periodsSettings: periodsSettings
   });
 };
 

package/build/es/components/PeriodDimension/PeriodTransfer.js

@@ -2,7 +2,6 @@ import _JSXStyle from "styled-jsx/style";
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { useConfig, useDataQuery } from '@dhis2/app-runtime';
 import { getNowInCalendar } from '@dhis2/multi-calendar-dates';
 import { TabBar, Tab, Transfer } from '@dhis2/ui';
 import PropTypes from 'prop-types';
@@ -18,14 +17,6 @@ import RelativePeriodFilter from './RelativePeriodFilter.js';
 import { getFixedPeriodsOptionsById } from './utils/fixedPeriods.js';
 import { MONTHLY, QUARTERLY } from './utils/index.js';
 import { getRelativePeriodsOptionsById } from './utils/relativePeriods.js';
-const userSettingsQuery = {
-  userSettings: {
-    resource: 'userSettings',
-    params: {
-      key: ['keyUiLocale']
-    }
-  }
-};
 
 const PeriodTransfer = _ref => {
   let {
@@ -33,29 +24,12 @@ const PeriodTransfer = _ref => {
     dataTest,
     initialSelectedPeriods,
     rightFooter,
-    excludedPeriodTypes
+    excludedPeriodTypes,
+    periodsSettings
   } = _ref;
-  const {
-    systemInfo
-  } = useConfig();
-  const result = useDataQuery(userSettingsQuery);
-  const {
-    calendar = 'gregory'
-  } = systemInfo;
-  const {
-    data: {
-      userSettings: {
-        keyUiLocale: locale
-      } = {}
-    } = {}
-  } = result;
-  const periodsSettings = {
-    calendar,
-    locale
-  };
   const defaultRelativePeriodType = excludedPeriodTypes.includes(MONTHLY) ? getRelativePeriodsOptionsById(QUARTERLY) : getRelativePeriodsOptionsById(MONTHLY);
   const defaultFixedPeriodType = excludedPeriodTypes.includes(MONTHLY) ? getFixedPeriodsOptionsById(QUARTERLY, periodsSettings) : getFixedPeriodsOptionsById(MONTHLY, periodsSettings);
-  const now = getNowInCalendar(calendar); // use ".eraYear" rather than ".year" because in Ethiopian calendar, eraYear is what our users expect to see (for other calendars, it doesn't matter)
+  const now = getNowInCalendar(periodsSettings.calendar); // use ".eraYear" rather than ".year" because in Ethiopian calendar, eraYear is what our users expect to see (for other calendars, it doesn't matter)
   // there is still a pending decision in Temporal regarding which era to use by default: https://github.com/js-temporal/temporal-polyfill/blob/9350ee7dd0d29f329fc097debf923a517c32f813/lib/calendar.ts#L1964
 
   const defaultFixedPeriodYear = now.eraYear || now.year;
@@ -183,7 +157,11 @@ const PeriodTransfer = _ref => {
 
 PeriodTransfer.defaultProps = {
   initialSelectedPeriods: [],
-  excludedPeriodTypes: []
+  excludedPeriodTypes: [],
+  periodsSettings: {
+    calendar: 'gregory',
+    locale: 'en'
+  }
 };
 PeriodTransfer.propTypes = {
   onSelect: PropTypes.func.isRequired,
@@ -193,6 +171,10 @@ PeriodTransfer.propTypes = {
     id: PropTypes.string,
     name: PropTypes.string
   })),
+  periodsSettings: PropTypes.shape({
+    calendar: PropTypes.string,
+    locale: PropTypes.string
+  }),
   rightFooter: PropTypes.node
 };
 export default PeriodTransfer;

package/build/es/components/PeriodDimension/__tests__/PeriodDimension.spec.js

@@ -1,6 +1,19 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import PeriodDimension from '../PeriodDimension.js';
+jest.mock('@dhis2/app-runtime', () => ({
+  useConfig: () => ({
+    systemInfo: {}
+  }),
+  useDataQuery: () => ({
+    data: {
+      userSettings: {
+        keyUiLocale: 'en'
+      }
+    }
+  })
+}));
+afterEach(jest.clearAllMocks);
 describe('The Period Dimension component', () => {
   let props;
   let shallowPeriodDimension;

package/build/es/components/PeriodDimension/__tests__/PeriodSelector.spec.js

@@ -1,19 +1,6 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import PeriodTransfer from '../PeriodTransfer.js';
-jest.mock('@dhis2/app-runtime', () => ({
-  useConfig: () => ({
-    systemInfo: {}
-  }),
-  useDataQuery: () => ({
-    data: {
-      userSettings: {
-        keyUiLocale: 'en'
-      }
-    }
-  })
-}));
-afterEach(jest.clearAllMocks);
 describe('The Period Selector component', () => {
   let props;
   let shallowPeriodTransfer;

package/build/es/components/PeriodDimension/__tests__/__snapshots__/PeriodDimension.spec.js.snap

@@ -6,6 +6,12 @@ exports[`The Period Dimension component matches the snapshot 1`] = `
   excludedPeriodTypes={Array []}
   initialSelectedPeriods={Array []}
   onSelect={[Function]}
+  periodsSettings={
+    Object {
+      "calendar": "gregory",
+      "locale": "en",
+    }
+  }
   rightFooter={<React.Fragment />}
 />
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2/analytics",
-    "version": "24.9.0-alpha.1",
+    "version": "24.9.1",
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {