@synerise/ds-date-picker 0.8.11 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.8.11...@synerise/ds-date-picker@0.9.0) (2023-03-08)
+
+
+### Features
+
+* **data-format:** using data format tools in ds components ([ee52cba](https://github.com/Synerise/synerise-design/commit/ee52cbac5e798e048722aefb2e47a7058e0f4c9c))
+
+
+
+
+
 ## [0.8.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.8.10...@synerise/ds-date-picker@0.8.11) (2023-03-06)
 
 **Note:** Version bump only for package @synerise/ds-date-picker

package/dist/DatePicker.js

@@ -1,4 +1,4 @@
-var _excluded = ["autoFocus", "disabled", "texts", "format", "value", "onApply", "showTime", "onValueChange", "onClear", "errorText", "popoverPlacement", "prefixel", "error", "onDropdownVisibleChange", "dropdownProps", "suffixel", "hideNow", "readOnly"];
+var _excluded = ["autoFocus", "disabled", "texts", "format", "valueFormatOptions", "value", "onApply", "showTime", "onValueChange", "onClear", "errorText", "popoverPlacement", "prefixel", "error", "onDropdownVisibleChange", "dropdownProps", "suffixel", "hideNow", "readOnly"];
 
 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); }
 
@@ -16,6 +16,7 @@ var DatePicker = function DatePicker(_ref) {
       disabled = _ref.disabled,
       texts = _ref.texts,
       format = _ref.format,
+      valueFormatOptions = _ref.valueFormatOptions,
       value = _ref.value,
       onApply = _ref.onApply,
       showTime = _ref.showTime,
@@ -70,6 +71,7 @@ var DatePicker = function DatePicker(_ref) {
       setDropVisible(!dropVisible);
     } : undefined,
     format: format,
+    valueFormatOptions: valueFormatOptions,
     onClear: handleClear,
     placeholder: texts.inputPlaceholder,
     prefixel: prefixel,

package/dist/DatePicker.types.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IntlShape } from 'react-intl';
 import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
+import { DateToFormatOptions } from '@synerise/ds-data-format';
 export declare type Props = {
     autoFocus?: boolean;
     disabled?: boolean;
@@ -9,7 +10,11 @@ export declare type Props = {
     disabledMinutes: number[];
     disabledSeconds: number[];
     dropdownProps?: Partial<DropdownProps>;
+    /**
+     * @deprecated use `valueFormatOptions` instead
+     */
     format?: string;
+    valueFormatOptions?: DateToFormatOptions;
     intl?: IntlShape;
     onApply?: (date?: Date) => void;
     onClear?: () => void;

package/dist/Elements/DayPicker/DayPicker.js

@@ -6,9 +6,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
+import { useDataFormat } from '@synerise/ds-data-format';
 import fnsFormat from '../../format';
 import Navbar from '../Navbar/Navbar';
-import { fnsAddYears, fnsAddMonths } from '../../fns';
+import { fnsAddMonths, fnsAddYears } from '../../fns';
 import localeUtils from '../../localeUtils';
 import { DayPicker } from './DayPicker.styles';
 import * as S from '../Navbar/Navbar.styles';
@@ -31,6 +32,9 @@ var Picker = function Picker(props) {
       modifiers = props.modifiers,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
 
+  var _useDataFormat = useDataFormat(),
+      firstDayOfWeek = _useDataFormat.firstDayOfWeek;
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, renderNavbar ? renderNavbar(props) : /*#__PURE__*/React.createElement(Navbar, {
     title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Link, {
       onClick: onMonthNameClick
@@ -52,7 +56,7 @@ var Picker = function Picker(props) {
     key: "head"
   }), /*#__PURE__*/React.createElement(DayPicker, _extends({
     month: month,
-    firstDayOfWeek: 1,
+    firstDayOfWeek: firstDayOfWeek,
     captionElement: captionElement,
     key: "body",
     locale: intl.locale,

package/dist/Elements/PickerInput/PickerInput.js

@@ -1,12 +1,19 @@
-var _excluded = ["autoFocus", "size", "disabled", "readOnly", "value", "format", "onChange", "showTime", "style", "placeholder", "onClear", "onClick", "clearTooltip", "highlight", "error", "errorText", "prefixel", "suffixel"];
+var _excluded = ["autoFocus", "size", "disabled", "readOnly", "value", "format", "valueFormatOptions", "onChange", "showTime", "style", "placeholder", "onClear", "onClick", "clearTooltip", "highlight", "error", "errorText", "prefixel", "suffixel"];
 
 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); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import * as React from 'react';
 import Icon, { CalendarM, Close3S } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
+import { getDefaultDataTimeOptions, useDataFormat } from '@synerise/ds-data-format';
 import { legacyParse } from '@date-fns/upgrade/v2';
 import * as S from './PickerInput.styles';
 import format from '../../format';
@@ -18,6 +25,7 @@ var PickerInput = function PickerInput(_ref) {
       readOnly = _ref.readOnly,
       value = _ref.value,
       dateFormat = _ref.format,
+      valueFormatOptions = _ref.valueFormatOptions,
       onChange = _ref.onChange,
       showTime = _ref.showTime,
       style = _ref.style,
@@ -32,6 +40,9 @@ var PickerInput = function PickerInput(_ref) {
       suffixel = _ref.suffixel,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var _useDataFormat = useDataFormat(),
+      formatValue = _useDataFormat.formatValue;
+
   var _React$useState = React.useState(false),
       hovered = _React$useState[0],
       setHovered = _React$useState[1];
@@ -43,8 +54,12 @@ var PickerInput = function PickerInput(_ref) {
       return format(legacyParse(value), dateFormat);
     }
 
-    return format(legacyParse(value), dateFormat || showTime ? 'MMM d, yyyy, HH:mm' : 'MMM d, yyyy');
-  }, [value, dateFormat, showTime]);
+    if (typeof value === 'string') {
+      return format(legacyParse(value), dateFormat || showTime ? 'MMM d, yyyy, HH:mm' : 'MMM d, yyyy');
+    }
+
+    return formatValue(value, _objectSpread({}, getDefaultDataTimeOptions(showTime), {}, valueFormatOptions));
+  }, [value, dateFormat, showTime, formatValue, valueFormatOptions]);
   var handleApply = React.useCallback(function (date) {
     if (!onChange) return;
     onChange(date, getText());

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

@@ -1,8 +1,13 @@
 import * as React from 'react';
+import { DateToFormatOptions } from '@synerise/ds-data-format';
 export declare type Props = {
     autoFocus?: boolean;
     size?: 'large' | 'default' | 'small';
+    /**
+     * @deprecated use `valueFormatOptions` instead
+     */
     format?: string;
+    valueFormatOptions?: DateToFormatOptions;
     showTime?: boolean;
     allowClear?: boolean;
     value?: Date | string;

package/dist/Elements/TimePicker/TimePicker.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useIntl } from 'react-intl';
+import { useDataFormat } from '@synerise/ds-data-format';
 import fnsFormat from '../../format';
 import Navbar from '../Navbar/Navbar';
 import * as S from './TimePicker.styles';
@@ -17,6 +18,10 @@ var TimePicker = function TimePicker(_ref) {
       onShortNext = _ref.onShortNext,
       onShortPrev = _ref.onShortPrev;
   var intl = useIntl();
+
+  var _useDataFormat = useDataFormat(),
+      is12HoursClock = _useDataFormat.is12HoursClock;
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, !!value && /*#__PURE__*/React.createElement(Navbar, {
     title: fnsFormat(value, 'iii d, yyyy', intl.locale),
     key: "head",
@@ -31,6 +36,7 @@ var TimePicker = function TimePicker(_ref) {
     disabledHours: disabledHours,
     disabledMinutes: disabledMinutes,
     disabledSeconds: disabledSeconds,
+    use12HourClock: is12HoursClock,
     raw: true
   })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-picker",
-  "version": "0.8.11",
+  "version": "0.9.0",
   "description": "DatePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,9 +34,9 @@
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
     "@synerise/ds-button": "^0.17.12",
-    "@synerise/ds-core": "^0.39.1",
+    "@synerise/ds-core": "^0.39.2",
     "@synerise/ds-icon": "^0.54.0",
-    "@synerise/ds-time-picker": "^0.6.57",
+    "@synerise/ds-time-picker": "^0.6.58",
     "@synerise/ds-tooltip": "^0.13.0",
     "classnames": "^2.2.6",
     "date-fns": "2.16.1",
@@ -48,5 +48,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "a9c9628df732abd42421880fd1aa61b7f7c580ee"
+  "gitHead": "55d4a4dfa9230bea883b887e4457ca86f8509d83"
 }