@synerise/ds-date-picker 0.11.4 → 0.11.6

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.11.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.11.5...@synerise/ds-date-picker@0.11.6) (2024-07-05)
+
+
+### Bug Fixes
+
+* **date-picker:** fixes of types ([1b09748](https://github.com/Synerise/synerise-design/commit/1b097484782a5dc37e71711d7308511eb8103a45))
+
+
+
+
+
+## [0.11.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.11.4...@synerise/ds-date-picker@0.11.5) (2024-07-02)
+
+
+### Bug Fixes
+
+* **date-picker:** fixed display value in input ([72e58c2](https://github.com/Synerise/synerise-design/commit/72e58c2c3f2eb01f3e24163ba5f821adc1cec9f5))
+
+
+
+
+
 ## [0.11.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@0.11.3...@synerise/ds-date-picker@0.11.4) (2024-06-27)
 
 **Note:** Version bump only for package @synerise/ds-date-picker

package/dist/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { Props } from './DatePicker.types';
-declare const DatePicker: React.FC<Props>;
+import React from 'react';
+import type { DatePickerProps } from './DatePicker.types';
+declare const DatePicker: ({ autoFocus, disabled, texts, format, valueFormatOptions, value, onApply, showTime, onValueChange, onClear, errorText, popoverPlacement, prefixel, error, onDropdownVisibleChange, dropdownProps, suffixel, hideNow, readOnly, renderTrigger, inputProps, ...rest }: DatePickerProps) => React.JSX.Element;
 export default DatePicker;

package/dist/DatePicker.js

@@ -4,12 +4,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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 React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
 import Dropdown from '@synerise/ds-dropdown';
 import { useOnClickOutside } from '@synerise/ds-utils';
 import RawDatePicker from './RawDatePicker/RawDatePicker';
 import PickerInput from './Elements/PickerInput/PickerInput';
 import * as S from './DatePicker.styles';
+import { getDefaultTexts } from './utils/getDefaultTexts';
 
 var DatePicker = function DatePicker(_ref) {
   var autoFocus = _ref.autoFocus,
@@ -35,31 +37,32 @@ var DatePicker = function DatePicker(_ref) {
       inputProps = _ref.inputProps,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var _React$useState = React.useState(autoFocus || false),
-      dropVisible = _React$useState[0],
-      setDropVisible = _React$useState[1];
+  var _useState = useState(autoFocus || false),
+      dropVisible = _useState[0],
+      setDropVisible = _useState[1];
 
-  var _React$useState2 = React.useState(value),
-      selectedDate = _React$useState2[0],
-      setSelectedDate = _React$useState2[1];
+  var _useState2 = useState(value),
+      selectedDate = _useState2[0],
+      setSelectedDate = _useState2[1];
 
-  var ref = React.useRef(null);
+  var ref = useRef(null);
+  var intl = useIntl();
+  var allTexts = getDefaultTexts(intl, texts);
   useOnClickOutside(ref, function () {
     !!dropVisible && setDropVisible(false);
   });
-  React.useEffect(function () {
+  useEffect(function () {
     setSelectedDate(value);
   }, [value]);
-  var onValueChangeCallback = React.useCallback(function (val) {
+  var onValueChangeCallback = useCallback(function (val) {
     onValueChange && onValueChange(val);
-    setSelectedDate(val);
   }, [onValueChange]);
-  var onApplyCallback = React.useCallback(function (val) {
+  var onApplyCallback = useCallback(function (val) {
     onApply && onApply(val);
     setSelectedDate(val);
     setDropVisible(false);
   }, [onApply]);
-  var handleClear = React.useCallback(function () {
+  var handleClear = useCallback(function () {
     setDropVisible(false);
     setSelectedDate(undefined);
     onClear && onClear();
@@ -75,10 +78,10 @@ var DatePicker = function DatePicker(_ref) {
     format: format,
     valueFormatOptions: valueFormatOptions,
     onClear: handleClear,
-    placeholder: texts.inputPlaceholder,
+    placeholder: allTexts.inputPlaceholder,
     prefixel: prefixel,
     suffixel: suffixel,
-    clearTooltip: texts.clearTooltip,
+    clearTooltip: allTexts.clearTooltip,
     highlight: !!dropVisible && !disabled,
     error: error,
     errorText: errorText,
@@ -89,7 +92,7 @@ var DatePicker = function DatePicker(_ref) {
       ref: ref
     }, /*#__PURE__*/React.createElement(RawDatePicker, _extends({}, rest, {
       showTime: showTime,
-      texts: texts,
+      texts: allTexts,
       onApply: onApplyCallback,
       onValueChange: onValueChangeCallback,
       value: selectedDate,

package/dist/DatePicker.types.d.ts

@@ -3,21 +3,21 @@ import type { IntlShape } from 'react-intl';
 import type { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
 import type { DateToFormatOptions } from '@synerise/ds-data-format';
 import type { InputProps } from '@synerise/ds-input';
-export type Props = {
+export type DatePickerProps = {
     autoFocus?: boolean;
     disabled?: boolean;
     disabledDates?: (date?: Date) => boolean;
-    disabledHours: number[];
-    disabledMinutes: number[];
-    disabledSeconds: number[];
+    disabledHours?: number[];
+    disabledMinutes?: number[];
+    disabledSeconds?: number[];
     dropdownProps?: Partial<DropdownProps>;
     /**
      * @deprecated use `valueFormatOptions` instead
      */
     format?: string;
     valueFormatOptions?: DateToFormatOptions;
-    intl?: IntlShape;
-    onApply?: (date?: Date) => void;
+    intl: IntlShape;
+    onApply: (date?: Date) => void;
     onClear?: () => void;
     onDropdownVisibleChange?: (visible: boolean) => void;
     onValueChange?: (date?: Date) => void;
@@ -27,7 +27,7 @@ export type Props = {
     prefixel?: ReactNode;
     suffixel?: ReactNode;
     showTime?: boolean;
-    texts: Texts;
+    texts?: Partial<Texts>;
     renderTrigger?: () => ReactElement;
     value?: Date;
     useStartOfDay?: boolean;
@@ -36,6 +36,7 @@ export type Props = {
     readOnly?: boolean;
     inputProps?: Pick<InputProps, 'autoResize'>;
 };
+export type Props = DatePickerProps;
 export type State = {
     mode: string;
     month: Date;
@@ -56,6 +57,6 @@ export type Modifier = {
 export type Texts = {
     apply: ReactNode;
     now: ReactNode;
-    inputPlaceholder?: string;
-    clearTooltip?: ReactNode;
+    inputPlaceholder: string;
+    clearTooltip: ReactNode;
 };

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { PickerInputProps } from './PickerInput.types';
 declare const PickerInput: ({ autoFocus, size, disabled, readOnly, value, format: dateFormat, valueFormatOptions, onChange, showTime, placeholder, onClear, onClick, clearTooltip, highlight, error, errorText, prefixel, suffixel, ...rest }: PickerInputProps) => React.JSX.Element;
 export default PickerInput;

package/dist/Elements/PickerInput/PickerInput.js

@@ -10,7 +10,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 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 React, { useCallback, useMemo, useState } from 'react';
 import Icon, { CalendarM, Close3S } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import { getDefaultDataTimeOptions, useDataFormat } from '@synerise/ds-data-format';
@@ -42,11 +42,11 @@ var PickerInput = function PickerInput(_ref) {
   var _useDataFormat = useDataFormat(),
       formatValue = _useDataFormat.formatValue;
 
-  var _React$useState = React.useState(false),
-      hovered = _React$useState[0],
-      setHovered = _React$useState[1];
+  var _useState = useState(false),
+      hovered = _useState[0],
+      setHovered = _useState[1];
 
-  var getText = React.useCallback(function () {
+  var getText = useCallback(function () {
     if (!value) return '';
 
     if (dateFormat) {
@@ -59,20 +59,20 @@ var PickerInput = function PickerInput(_ref) {
 
     return formatValue(value, _objectSpread({}, getDefaultDataTimeOptions(showTime), {}, valueFormatOptions));
   }, [value, dateFormat, showTime, formatValue, valueFormatOptions]);
-  var handleApply = React.useCallback(function (date) {
+  var handleApply = useCallback(function (date) {
     if (!onChange) return;
     onChange(date, getText());
   }, [onChange, getText]);
-  var handleIconClick = React.useCallback(function (e) {
-    e.stopPropagation();
+  var handleIconClick = useCallback(function (event) {
+    event.stopPropagation();
     onClear && onClear();
     handleApply(null);
   }, [onClear, handleApply]);
-  var handleInputClick = React.useCallback(function (e) {
-    e.stopPropagation();
+  var handleInputClick = useCallback(function (event) {
+    event.stopPropagation();
     onClick && onClick();
   }, [onClick]);
-  var iconInput = React.useMemo(function () {
+  var iconInput = useMemo(function () {
     return (hovered || highlight) && !readOnly && !!value ? /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
       title: clearTooltip
     }, /*#__PURE__*/React.createElement(Icon, {

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

@@ -2,9 +2,9 @@ export type TimePickerProps = {
     format?: string;
     value?: Date;
     onChange: (date?: Date | undefined) => void;
-    disabledHours: number[];
-    disabledMinutes: number[];
-    disabledSeconds: number[];
+    disabledHours?: number[];
+    disabledMinutes?: number[];
+    disabledSeconds?: number[];
     inactivePrev?: boolean;
     inactiveNext?: boolean;
     onShortNext?: () => void;

package/dist/RawDatePicker/RawDatePicker.d.ts

@@ -1,30 +1,7 @@
-import * as React from 'react';
-import { DayModifiers } from 'react-day-picker';
-import { Props, State, Texts } from '../DatePicker.types';
-import { RawDatePickerProps } from './RawDatePicker.types';
-declare class RawDatePicker extends React.Component<RawDatePickerProps, State> {
-    static defaultProps: {
-        showTime: boolean;
-        disabledHours: never[];
-        disabledMinutes: never[];
-        disabledSeconds: never[];
-    };
-    constructor(props: Props);
-    getTexts(): Texts;
-    getSnapshotBeforeUpdate(prevProps: Readonly<Props>): null;
-    handleChange: (value: Date | undefined) => void;
-    handleDayMouseEnter: (day: Date) => void;
-    handleDayMouseLeave: () => void;
-    handleDayClick: (day: Date, modifiers: DayModifiers) => void;
-    handleModeSwitch: (mode: string) => void;
-    handleApply: (date: Date | undefined) => void;
-    handleMonthChange: (month: Date, mode: string) => void;
-    renderDay: (day: Date) => React.ReactNode;
-    renderYearPicker: () => React.ReactNode;
-    renderMonthPicker: () => React.ReactNode;
-    renderDayPicker: () => React.ReactNode;
-    handleDaySwitch: (day: Date) => void;
-    renderTimePicker: () => React.ReactNode;
-    render(): React.ReactNode;
-}
-export default RawDatePicker;
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<import("../DatePicker.types").DatePickerProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+} & React.RefAttributes<any>> & {
+    WrappedComponent: React.ComponentType<import("../DatePicker.types").DatePickerProps>;
+};
+export default _default;

package/dist/RawDatePicker/RawDatePicker.js

@@ -2,8 +2,8 @@ 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 { FormattedMessage } from 'react-intl';
+import React from 'react';
+import { injectIntl } from 'react-intl';
 import { legacyParse } from '@date-fns/upgrade/v2';
 import Footer from '../Elements/Footer/Footer';
 import * as S from '../DatePicker.styles';
@@ -15,6 +15,7 @@ import TimePicker from '../Elements/TimePicker/TimePicker';
 import { DayBackground, DayText, DayForeground } from '../Elements/DayPicker/DayPicker.styles';
 import { fnsStartOfMonth, fnsSetYear, fnsSetMonth, fnsSetDate, fnsStartOfDay, fnsEndOfDay, fnsAddDays } from '../fns';
 import { changeDayWithHoursPreserved } from '../utils';
+import { getDefaultTexts } from '../utils/getDefaultTexts';
 
 var RawDatePicker = /*#__PURE__*/function (_React$Component) {
   function RawDatePicker(props) {
@@ -236,18 +237,7 @@ var RawDatePicker = /*#__PURE__*/function (_React$Component) {
     var _this$props3 = this.props,
         texts = _this$props3.texts,
         intl = _this$props3.intl;
-    var updatedTexts = {
-      apply: (texts == null ? void 0 : texts.apply) || /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.DATE-PICKER.APPLY"
-      }),
-      now: (texts == null ? void 0 : texts.now) || /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.DATE-PICKER.NOW"
-      }),
-      inputPlaceholder: (texts == null ? void 0 : texts.inputPlaceholder) || (intl == null ? void 0 : intl.formatMessage({
-        id: 'DS.DATE-PICKER.SELECT-DATE'
-      })) || ''
-    };
-    return updatedTexts;
+    return getDefaultTexts(intl, texts);
   };
 
   _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
@@ -326,4 +316,4 @@ _defineProperty(RawDatePicker, "defaultProps", {
   disabledSeconds: []
 });
 
-export default RawDatePicker;
+export default injectIntl(RawDatePicker);

package/dist/utils/getDefaultTexts.d.ts

@@ -0,0 +1,3 @@
+import { IntlShape } from 'react-intl';
+import { Texts } from '../DatePicker.types';
+export declare const getDefaultTexts: (intl: IntlShape, texts?: Partial<Texts>) => Texts;

package/dist/utils/getDefaultTexts.js

@@ -0,0 +1,28 @@
+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; }
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+export var getDefaultTexts = function getDefaultTexts(intl, texts) {
+  var defaultTexts = {
+    apply: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.DATE-PICKER.APPLY",
+      defaultMessage: "Apply"
+    }),
+    now: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.DATE-PICKER.NOW",
+      defaultMessage: "Now"
+    }),
+    inputPlaceholder: intl.formatMessage({
+      id: 'DS.DATE-PICKER.SELECT-DATE'
+    }),
+    clearTooltip: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.DATE-PICKER.CLEAR-TOOLTIP",
+      defaultMessage: "Clear"
+    })
+  };
+  return texts ? _objectSpread({}, defaultTexts, {}, texts) : defaultTexts;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-picker",
-  "version": "0.11.4",
+  "version": "0.11.6",
   "description": "DatePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-button": "^0.21.1",
-    "@synerise/ds-data-format": "^0.5.0",
-    "@synerise/ds-dropdown": "^0.18.2",
-    "@synerise/ds-icon": "^0.63.0",
-    "@synerise/ds-input": "^0.22.1",
-    "@synerise/ds-time-picker": "^0.10.12",
-    "@synerise/ds-tooltip": "^0.14.31",
-    "@synerise/ds-utils": "^0.27.0",
+    "@synerise/ds-button": "^0.21.2",
+    "@synerise/ds-data-format": "^0.5.1",
+    "@synerise/ds-dropdown": "^0.18.4",
+    "@synerise/ds-icon": "^0.64.0",
+    "@synerise/ds-input": "^0.23.1",
+    "@synerise/ds-time-picker": "^0.10.14",
+    "@synerise/ds-tooltip": "^0.14.32",
+    "@synerise/ds-utils": "^0.28.0",
     "classnames": "2.3.2",
     "date-fns": "2.16.1",
     "lodash": "^4.17.20",
@@ -52,8 +52,8 @@
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "antd": "4.7.0",
-    "react": ">=16.9.0 < 17.0.0",
+    "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "587eb113074985ae21e4f0c25ec33c3e3e2e072b"
+  "gitHead": "6e5e5202d6c6f1c2caf6bfef799009813b437b3d"
 }