@dhis2-ui/calendar 9.11.3 → 9.11.5

package/build/cjs/calendar/calendar.js

@@ -22,10 +22,10 @@ const Calendar = _ref => {
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize
+    width = '240px',
+    cellSize = '32px'
   } = _ref;
   const wrapperBorderColor = _uiConstants.colors.grey300;
   const backgroundColor = 'none';
@@ -74,11 +74,6 @@ const Calendar = _ref => {
   }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
 };
 exports.Calendar = Calendar;
-Calendar.defaultProps = {
-  cellSize: '32px',
-  width: '240px',
-  weekDayFormat: 'narrow'
-};
 const CalendarProps = exports.CalendarProps = {
   /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
   calendar: _propTypes.default.any.isRequired,

package/build/cjs/calendar-input/calendar-input.js

@@ -37,6 +37,7 @@ const CalendarInput = function () {
     width,
     cellSize,
     clearable,
+    dataTest = 'dhis2-uiwidgets-calendar-inputfield',
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = (0, _react.useRef)();
@@ -68,6 +69,7 @@ const CalendarInput = function () {
   }, /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({
     label: _index.default.t('Pick a date')
   }, rest, {
+    dataTest: dataTest,
     type: "text",
     onFocus: onFocus,
     value: date
@@ -100,9 +102,6 @@ const CalendarInput = function () {
   }, [".calendar-input-wrapper.jsx-862452676{position:relative;}", ".calendar-clear-button.jsx-862452676{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-862452676{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-862452676{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
 };
 exports.CalendarInput = CalendarInput;
-CalendarInput.defaultProps = {
-  dataTest: 'dhis2-uiwidgets-calendar-inputfield'
-};
 CalendarInput.propTypes = {
   ..._calendar.CalendarProps,
   ..._input.InputFieldProps

package/build/cjs/stories/calendar-story-wrapper.js

@@ -19,13 +19,13 @@ const {
 const CalendarStoryWrapper = props => {
   var _selectedDate$calenda;
   const {
-    calendar,
+    calendar = 'gregory',
     locale,
     timeZone,
     dir,
-    component: Component,
+    component: Component = _calendar.Calendar,
     date,
-    weekDayFormat
+    weekDayFormat = 'narrow'
   } = props;
   const [selectedCalendar, setSelectedCalendar] = (0, _react.useState)(calendar);
   const [selectedNumberingSystem, setSelectedNumberingSystem] = (0, _react.useState)();
@@ -165,11 +165,6 @@ const CalendarStoryWrapper = props => {
   }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
 };
 exports.CalendarStoryWrapper = CalendarStoryWrapper;
-CalendarStoryWrapper.defaultProps = {
-  calendar: 'gregorian',
-  component: _calendar.Calendar,
-  weekDayFormat: 'narrow'
-};
 CalendarStoryWrapper.propTypes = {
   calendar: _propTypes.default.string.isRequired,
   component: _propTypes.default.elementType.isRequired,

package/build/cjs/stories/calendar.prod.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithAnyCalendar = exports.Nepali = exports.Ethiopic = void 0;
+exports.default = exports.WithAnyCalendar = exports.Nepali = exports.Ethiopic = exports.Basic = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _calendar = require("../calendar/calendar.js");
 var _calendarStoryWrapper = require("./calendar-story-wrapper.js");
@@ -29,8 +29,35 @@ var _default = exports.default = {
         component: description
       }
     }
+  },
+  argTypes: {
+    calendar: {
+      control: 'select',
+      options: ['gregory', 'islamic', 'nepali', 'ethiopic', 'persian', 'indian']
+    },
+    weekDayFormat: {
+      control: 'select',
+      options: ['long', 'short', 'narrow']
+    },
+    locale: {
+      control: 'text'
+    },
+    numberingSystem: {
+      control: 'select',
+      options: ['latn', 'arab', 'ethi']
+    }
   }
 };
+const Basic = args => {
+  return /*#__PURE__*/_react.default.createElement(_calendar.Calendar, args);
+};
+exports.Basic = Basic;
+Basic.args = {
+  onDateSelect: date => console.log(date),
+  calendar: 'gregory',
+  weekDayFormat: 'narrow',
+  locale: 'en'
+};
 const Ethiopic = args => {
   return /*#__PURE__*/_react.default.createElement(_calendarStoryWrapper.CalendarStoryWrapper, _extends({
     calendar: "ethiopic",

package/build/es/calendar/calendar.js

@@ -13,10 +13,10 @@ export const Calendar = _ref => {
     dir,
     locale,
     numberingSystem,
-    weekDayFormat,
+    weekDayFormat = 'narrow',
     timeZone,
-    width,
-    cellSize
+    width = '240px',
+    cellSize = '32px'
   } = _ref;
   const wrapperBorderColor = colors.grey300;
   const backgroundColor = 'none';
@@ -64,11 +64,6 @@ export const Calendar = _ref => {
     dynamic: [backgroundColor, wrapperBorderColor, width]
   }, [`.calendar-wrapper.__jsx-style-dynamic-selector{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;background-color:${backgroundColor};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:1px solid ${wrapperBorderColor};border-radius:3px;min-width:${width};width:-webkit-max-content;width:-moz-max-content;width:max-content;box-shadow:0px 4px 6px -2px #2129340d;box-shadow:0px 10px 15px -3px #2129341a;}`]));
 };
-Calendar.defaultProps = {
-  cellSize: '32px',
-  width: '240px',
-  weekDayFormat: 'narrow'
-};
 export const CalendarProps = {
   /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
   calendar: PropTypes.any.isRequired,

package/build/es/calendar-input/calendar-input.js

@@ -28,6 +28,7 @@ export const CalendarInput = function () {
     width,
     cellSize,
     clearable,
+    dataTest = 'dhis2-uiwidgets-calendar-inputfield',
     ...rest
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const ref = useRef();
@@ -59,6 +60,7 @@ export const CalendarInput = function () {
   }, /*#__PURE__*/React.createElement(InputField, _extends({
     label: i18n.t('Pick a date')
   }, rest, {
+    dataTest: dataTest,
     type: "text",
     onFocus: onFocus,
     value: date
@@ -90,9 +92,6 @@ export const CalendarInput = function () {
     id: "862452676"
   }, [".calendar-input-wrapper.jsx-862452676{position:relative;}", ".calendar-clear-button.jsx-862452676{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-862452676{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-862452676{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
 };
-CalendarInput.defaultProps = {
-  dataTest: 'dhis2-uiwidgets-calendar-inputfield'
-};
 CalendarInput.propTypes = {
   ...CalendarProps,
   ...InputFieldProps

package/build/es/stories/calendar-story-wrapper.js

@@ -10,13 +10,13 @@ const {
 export const CalendarStoryWrapper = props => {
   var _selectedDate$calenda;
   const {
-    calendar,
+    calendar = 'gregory',
     locale,
     timeZone,
     dir,
-    component: Component,
+    component: Component = Calendar,
     date,
-    weekDayFormat
+    weekDayFormat = 'narrow'
   } = props;
   const [selectedCalendar, setSelectedCalendar] = useState(calendar);
   const [selectedNumberingSystem, setSelectedNumberingSystem] = useState();
@@ -155,11 +155,6 @@ export const CalendarStoryWrapper = props => {
     dateStyle: 'long'
   }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "callback:"), JSON.stringify(selectedDate, null, 2))))));
 };
-CalendarStoryWrapper.defaultProps = {
-  calendar: 'gregorian',
-  component: Calendar,
-  weekDayFormat: 'narrow'
-};
 CalendarStoryWrapper.propTypes = {
   calendar: PropTypes.string.isRequired,
   component: PropTypes.elementType.isRequired,

package/build/es/stories/calendar.prod.stories.js

@@ -22,8 +22,34 @@ export default {
         component: description
       }
     }
+  },
+  argTypes: {
+    calendar: {
+      control: 'select',
+      options: ['gregory', 'islamic', 'nepali', 'ethiopic', 'persian', 'indian']
+    },
+    weekDayFormat: {
+      control: 'select',
+      options: ['long', 'short', 'narrow']
+    },
+    locale: {
+      control: 'text'
+    },
+    numberingSystem: {
+      control: 'select',
+      options: ['latn', 'arab', 'ethi']
+    }
   }
 };
+export const Basic = args => {
+  return /*#__PURE__*/React.createElement(Calendar, args);
+};
+Basic.args = {
+  onDateSelect: date => console.log(date),
+  calendar: 'gregory',
+  weekDayFormat: 'narrow',
+  locale: 'en'
+};
 export const Ethiopic = args => {
   return /*#__PURE__*/React.createElement(CalendarStoryWrapper, _extends({
     calendar: "ethiopic",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "9.11.3",
+    "version": "9.11.5",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -33,15 +33,15 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "9.11.3",
-        "@dhis2-ui/card": "9.11.3",
-        "@dhis2-ui/input": "9.11.3",
-        "@dhis2-ui/layer": "9.11.3",
-        "@dhis2-ui/popper": "9.11.3",
+        "@dhis2-ui/button": "9.11.5",
+        "@dhis2-ui/card": "9.11.5",
+        "@dhis2-ui/input": "9.11.5",
+        "@dhis2-ui/layer": "9.11.5",
+        "@dhis2-ui/popper": "9.11.5",
         "@dhis2/multi-calendar-dates": "^1.2.3",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.3",
-        "@dhis2/ui-icons": "9.11.3",
+        "@dhis2/ui-constants": "9.11.5",
+        "@dhis2/ui-icons": "9.11.5",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },