@synerise/ds-date-picker 0.9.6 → 0.9.8

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.9.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.9.7...@synerise/ds-date-picker@0.9.8) (2023-04-19)
+
+**Note:** Version bump only for package @synerise/ds-date-picker
+
+
+
+
+
+## [0.9.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.9.6...@synerise/ds-date-picker@0.9.7) (2023-04-17)
+
+
+### Bug Fixes
+
+* **date-range-picker:** selected date numbers must to be centered ([aeeb9b5](https://github.com/Synerise/synerise-design/commit/aeeb9b5ac9150b177564c885b3bb594e3a7b5f57))
+
+
+
+
+
 ## [0.9.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.9.5...@synerise/ds-date-picker@0.9.6) (2023-04-14)
 
 **Note:** Version bump only for package @synerise/ds-date-picker

package/dist/Elements/DayPicker/DayPicker.styles.js

@@ -27,7 +27,7 @@ export var DayTooltip = styled.div.withConfig({
 export var DayPicker = styled(DayPickerBase).withConfig({
   displayName: "DayPickerstyles__DayPicker",
   componentId: "oi7l9r-4"
-})(["display:inline-block;font-size:12px;.DayPicker-wrapper{position:relative;flex-direction:row;}.DayPicker-Months{display:flex;flex-wrap:wrap;justify-content:center;}.DayPicker-Month{display:table;margin:8px;border-spacing:0;border-collapse:collapse;}.DayPicker-Weekdays{display:table-header-group;}.DayPicker-WeekdaysRow{display:table-row;}.DayPicker-Weekday{min-width:39px;height:32px;display:table-cell;vertical-align:middle;text-align:center;font-weight:500;}.DayPicker-Weekday abbr[title]{border-bottom:none;text-decoration:none;}.DayPicker-Body{display:table-row-group;}.DayPicker-Week{display:table-row;}.DayPicker--interactionDisabled ", "{cursor:default;}", "{width:40px;height:40px;display:table-cell;cursor:pointer;position:relative;box-sizing:border-box;> div{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin:4px;min-width:32px;}&--start > ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;}&--end > ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;}&--today{font-weight:500;}&--today", "{& > ", "{font-weight:400;}}&--entered", ":not(", "){& > ", "{border-color:", ";margin-right:0;margin-left:4px;}& > ", "{margin-right:0;background-color:", ";}}&--entered", ":not(", "){& > ", "{border-color:", ";margin-right:4px;margin-left:4px;}& > ", "{margin-right:4px;background-color:", ";}}&--entered:not(", "):not(", "){& > ", "{background-color:", ";}}&--today", ":not(", "){& >  ", "{background-color:", ";}}&--today", ":not(", "){& > ", "{background-color:transparent;font-weight:400;color:", ";}& >  ", "{background-color:", ";}& > ", "{border:2px solid transparent;}}&--today:not(", "){& > ", "{background-color:", ";color:", ";}& > ", "{border:2px solid ", ";}}&--entered > ", "{background-color:", ";}&--entered > ", "{color:", ";}&--entered-start:not(", ") > ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;}&--entered-end:not(", ") > ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;}&--outside{& > ", "{color:", ";}}&--disabled{cursor:default;& > ", "{color:", ";}}}", ":not(", "):not(", "):not(", "),", ":not(", "):not(", "):not(", "){&:last-child  > ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;margin-right:4px;padding-right:0;}&:first-child  > ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;margin-left:4px;padding-left:0;}}", ":not(", "):not(", "){& > div{padding-left:4px;margin-left:0;padding-right:4px;margin-right:0;}& > ", "{background-color:", ";}& > ", "{color:", ";}&", "{& > ", "{background-color:", ";}& > ", "{color:inherit;}}}", ":not(", "):not(", "){& > div{padding-left:4px;margin-left:0;padding-right:4px;margin-right:0;text-align:center;}&& > ", "{background-color:", ";}&& > ", "{color:", ";}&", "{&& > ", "{background-color:", ";}&& > ", "{color:inherit;}}}", ":not(", "):not(", "){& > ", "{border-radius:50%;font-weight:500;color:", ";background-color:", ";margin-right:4px;padding-left:4px;}& > ", "{background-color:", ";}& > div{padding-left:0px;margin-left:4px;}}", ":not(", "):not(", "):last-child,", ":not(", "):not(", "):first-child{& > div{margin-right:4px;}& > ", "{background-color:", ";}}", ":not(", "):not(", "){& > ", "{border-radius:50%;font-weight:500;background-color:", ";color:", ";margin-left:4px;padding-left:4px;}& > div{padding-right:4px;margin-right:4px;}}", ":not(", "):not(", "){& > div{padding-right:4px;}}", ":not(", "):hover{position:relative;", "{height:24px;position:absolute;top:-30px;margin-left:calc(-50% + 16px);display:block;white-space:nowrap;background-color:rgba(56,67,80,0.9);padding:3px 8px;border-radius:3px;z-index:9;font-weight:400;color:", ";}}", ":not(", "):not(", "),", ":not(", "){& > ", "{background:transparent;}}", "{& > ", "{border-radius:50%;}}&.relative{", ":not(", "):not(", "){& > ", "{font-weight:500;}", ":not(", "):not(", "){& > ", "{background-color:", ";}& > ", "{color:", ";}}}"], DaySelectorPrefix, DaySelectorPrefix, DayBackground, DayBackground, daySelector('selected'), DayText, daySelector('entered-start'), daySelector('entered-end'), DayForeground, function (props) {
+})(["display:inline-block;font-size:12px;.DayPicker-wrapper{position:relative;flex-direction:row;}.DayPicker-Months{display:flex;flex-wrap:wrap;justify-content:center;}.DayPicker-Month{display:table;margin:8px;border-spacing:0;border-collapse:collapse;}.DayPicker-Weekdays{display:table-header-group;}.DayPicker-WeekdaysRow{display:table-row;}.DayPicker-Weekday{min-width:39px;height:32px;display:table-cell;vertical-align:middle;text-align:center;font-weight:500;}.DayPicker-Weekday abbr[title]{border-bottom:none;text-decoration:none;}.DayPicker-Body{display:table-row-group;}.DayPicker-Week{display:table-row;}.DayPicker--interactionDisabled ", "{cursor:default;}", "{width:40px;height:40px;display:table-cell;cursor:pointer;position:relative;box-sizing:border-box;> div{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin:4px;min-width:32px;}&--start > ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;}&--end > ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;}&--today{font-weight:500;}&--today", "{& > ", "{font-weight:400;}}&--entered", ":not(", "){& > ", "{border-color:", ";margin-right:0;margin-left:4px;}& > ", "{margin-right:0;background-color:", ";}}&--entered", ":not(", "){& > ", "{border-color:", ";margin-right:4px;margin-left:4px;}& > ", "{margin-right:4px;background-color:", ";}}&--entered:not(", "):not(", "){& > ", "{background-color:", ";}}&--today", ":not(", "){& >  ", "{background-color:", ";}}&--today", ":not(", "){& > ", "{background-color:transparent;font-weight:400;color:", ";}& >  ", "{background-color:", ";}& > ", "{border:2px solid transparent;}}&--today:not(", "){& > ", "{background-color:", ";color:", ";}& > ", "{border:2px solid ", ";}}&--entered > ", "{background-color:", ";}&--entered > ", "{color:", ";}&--entered-start:not(", ") > ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;}&--entered-end:not(", ") > ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;}&--outside{& > ", "{color:", ";}}&--disabled{cursor:default;& > ", "{color:", ";}}}", ":not(", "):not(", "):not(", "),", ":not(", "):not(", "):not(", "){&:last-child  > ", "{border-top-right-radius:50%;border-bottom-right-radius:50%;margin-right:4px;padding-right:0;}&:first-child  > ", "{border-top-left-radius:50%;border-bottom-left-radius:50%;margin-left:4px;padding-left:0;}}", ":not(", "):not(", "){& > div{padding-left:4px;margin-left:0;padding-right:4px;margin-right:0;}& > ", "{background-color:", ";}& > ", "{color:", ";}&", "{& > ", "{background-color:", ";}& > ", "{color:inherit;}}}", ":not(", "):not(", "){& > div{padding-left:4px;margin-left:0;padding-right:4px;margin-right:0;text-align:center;}&& > ", "{background-color:", ";}&& > ", "{color:", ";}&", "{&& > ", "{background-color:", ";}&& > ", "{color:inherit;}}}", ":not(", "):not(", "){& > ", "{border-radius:50%;font-weight:500;color:", ";background-color:", ";margin-right:4px;padding-left:0px;padding-right:0px;}& > ", "{background-color:", ";}& > div{padding-left:0px;margin-left:4px;}}", ":not(", "):not(", "):last-child,", ":not(", "):not(", "):first-child{& > div{margin-right:4px;}& > ", "{background-color:", ";}}", ":not(", "):not(", "){& > ", "{border-radius:50%;font-weight:500;background-color:", ";color:", ";margin-left:4px;padding-left:4px;}& > div{padding-right:4px;margin-right:4px;}}", ":not(", "):not(", "){& > div{padding-right:4px;}}", ":not(", "):hover{position:relative;", "{height:24px;position:absolute;top:-30px;margin-left:calc(-50% + 16px);display:block;white-space:nowrap;background-color:rgba(56,67,80,0.9);padding:3px 8px;border-radius:3px;z-index:9;font-weight:400;color:", ";}}", ":not(", "):not(", "),", ":not(", "){& > ", "{background:transparent;}}", "{& > ", "{border-radius:50%;}}&.relative{", ":not(", "):not(", "){& > ", "{font-weight:500;}", ":not(", "):not(", "){& > ", "{background-color:", ";}& > ", "{color:", ";}}}"], DaySelectorPrefix, DaySelectorPrefix, DayBackground, DayBackground, daySelector('selected'), DayText, daySelector('entered-start'), daySelector('entered-end'), DayForeground, function (props) {
   return props.theme.palette['blue-300'];
 }, DayBackground, function (props) {
   return props.theme.palette['blue-100'];

package/dist/Elements/MonthPicker/MonthPicker.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { MonthPickerProps, MonthPickerState } from './MonthPicker.types';
-export default class MonthPicker extends React.PureComponent<MonthPickerProps, MonthPickerState> {
-    state: MonthPickerState;
-    getSnapshotBeforeUpdate(prevProps: Readonly<MonthPickerProps>): null;
-    handleLongPrev: () => void;
-    handleLongNext: () => void;
-    render(): React.ReactNode;
-}
+import { MonthPickerProps } from './MonthPicker.types';
+declare const _default: React.ForwardRefExoticComponent<Pick<MonthPickerProps, "max" | "min" | "onChange" | "value"> & {
+    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+} & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<MonthPickerProps>;
+};
+export default _default;

package/dist/Elements/MonthPicker/MonthPicker.js

@@ -5,6 +5,7 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import * as React from 'react';
+import { injectIntl } from 'react-intl';
 import { range } from 'lodash';
 import { legacyParse } from '@date-fns/upgrade/v2';
 import { fnsStartOfMonth, fnsEndOfMonth, fnsSetMonth, fnsIsBefore, fnsAddYears, fnsIsAfter, fnsIsSameMonth } from '../../fns';
@@ -20,14 +21,14 @@ function getInitialState(props) {
   };
 }
 
-function getCells(cursor, min, max) {
+function getCells(cursor, min, max, locale) {
   var minDate = min ? fnsStartOfMonth(min) : fnsSetMonth(cursor, 0);
   var maxDate = max ? fnsEndOfMonth(max) : fnsSetMonth(cursor, 12);
   return range(0, 12).map(function (index) {
     var date = fnsSetMonth(cursor, index);
     return {
       key: date.toISOString(),
-      text: fnsFormat(date, 'MMM'),
+      text: fnsFormat(date, 'MMM', locale),
       disabled: fnsIsAfter(date, maxDate) || fnsIsBefore(date, minDate)
     };
   });
@@ -88,8 +89,9 @@ var MonthPicker = /*#__PURE__*/function (_React$PureComponent) {
         min = _this$props.min,
         max = _this$props.max,
         value = _this$props.value,
+        intl = _this$props.intl,
         onChange = _this$props.onChange;
-    var cells = getCells(cursor, min, max);
+    var cells = getCells(cursor, min, max, intl == null ? void 0 : intl.locale);
     var valueCell = value ? cells.find(function (cell) {
       return fnsIsSameMonth(value, legacyParse(cell.key));
     }) : null;
@@ -130,4 +132,4 @@ var MonthPicker = /*#__PURE__*/function (_React$PureComponent) {
   return MonthPicker;
 }(React.PureComponent);
 
-export { MonthPicker as default };
+export default injectIntl(MonthPicker);

package/dist/Elements/MonthPicker/MonthPicker.types.d.ts

@@ -1,8 +1,10 @@
+import { IntlShape } from 'react-intl';
 export declare type MonthPickerProps = {
     min?: Date;
     max?: Date;
     value: Date;
     onChange: (date: Date) => void;
+    intl: IntlShape;
 };
 export declare type MonthPickerState = {
     cursor: Date;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-picker",
-  "version": "0.9.6",
+  "version": "0.9.8",
   "description": "DatePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,11 +33,11 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-button": "^0.17.12",
+    "@synerise/ds-button": "^0.17.13",
     "@synerise/ds-core": "^0.39.7",
-    "@synerise/ds-icon": "^0.54.0",
-    "@synerise/ds-time-picker": "^0.7.5",
-    "@synerise/ds-tooltip": "^0.13.0",
+    "@synerise/ds-icon": "^0.55.0",
+    "@synerise/ds-time-picker": "^0.7.6",
+    "@synerise/ds-tooltip": "^0.13.1",
     "classnames": "^2.2.6",
     "date-fns": "2.16.1",
     "lodash": "^4.17.20",
@@ -48,5 +48,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "a81aad1ee5bb7249f069115cab0ec06b66ab12b0"
+  "gitHead": "3b8c3b1437ecbdda775a790ac3c27d6b1b6cbf26"
 }