@synerise/ds-date-picker 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.2.1...@synerise/ds-date-picker@1.2.2) (2025-07-24)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **date-picker:** center picker and quick picks ([06f9301](https://github.com/Synerise/synerise-design/commit/06f930140ea450c6b28f6fbe72792fb7295fcd35))
12
+
13
+
14
+
15
+
16
+
17
+ ## [1.2.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.2.0...@synerise/ds-date-picker@1.2.1) (2025-07-17)
18
+
19
+ **Note:** Version bump only for package @synerise/ds-date-picker
20
+
21
+
22
+
23
+
24
+
6
25
  # [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.1.12...@synerise/ds-date-picker@1.2.0) (2025-07-15)
7
26
 
8
27
 
@@ -1,4 +1,6 @@
1
1
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
2
- export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {
3
+ withQuickPicks?: boolean;
4
+ }, never>;
3
5
  export declare const PickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
6
  export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -10,7 +10,9 @@ export var Container = styled.div.withConfig({
10
10
  export var ContentWrapper = styled.div.withConfig({
11
11
  displayName: "DatePickerstyles__ContentWrapper",
12
12
  componentId: "sc-1kprsne-1"
13
- })(["display:flex;"]);
13
+ })(["", ""], function (props) {
14
+ return props.withQuickPicks && "\n display: flex;\n justify-content: center;\n ";
15
+ });
14
16
  export var PickerWrapper = styled.div.withConfig({
15
17
  displayName: "DatePickerstyles__PickerWrapper",
16
18
  componentId: "sc-1kprsne-2"
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { type WrappedComponentProps } from 'react-intl';
3
2
  import { type Texts } from '../../DatePicker.types';
4
3
  export type Props = {
@@ -1,11 +1,12 @@
1
1
  import Button from '@synerise/ds-button';
2
+ import { type ThemeProps } from '@synerise/ds-core';
2
3
  export declare const NavButton: import("styled-components").StyledComponent<typeof Button, any, {
3
- hidden?: boolean | undefined;
4
+ hidden?: boolean;
4
5
  }, never>;
5
6
  export declare const ArrowPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
6
7
  export declare const ArrowContainer: import("styled-components").StyledComponent<"div", any, {
7
- hidden?: boolean | undefined;
8
+ hidden?: boolean;
8
9
  }, never>;
9
10
  export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
10
11
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
11
- export declare const Link: import("styled-components").StyledComponent<"span", any, {}, never>;
12
+ export declare const Link: import("styled-components").StyledComponent<"span", any, ThemeProps, never>;
@@ -4,6 +4,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
4
4
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
5
5
  import React, { useCallback, useMemo, useState } from 'react';
6
6
  import { legacyParse } from '@date-fns/upgrade/v2';
7
+ import { useTheme } from '@synerise/ds-core';
7
8
  import { getDefaultDataTimeOptions, useDataFormat } from '@synerise/ds-data-format';
8
9
  import Icon, { CalendarM, Close3S } from '@synerise/ds-icon';
9
10
  import Tooltip from '@synerise/ds-tooltip';
@@ -28,6 +29,7 @@ var PickerInput = function PickerInput(_ref) {
28
29
  rest = _objectWithoutPropertiesLoose(_ref, _excluded);
29
30
  var _useDataFormat = useDataFormat(),
30
31
  formatValue = _useDataFormat.formatValue;
32
+ var theme = useTheme();
31
33
  var _useState = useState(false),
32
34
  hovered = _useState[0],
33
35
  setHovered = _useState[1];
@@ -65,9 +67,10 @@ var PickerInput = function PickerInput(_ref) {
65
67
  component: /*#__PURE__*/React.createElement(Close3S, null),
66
68
  onClick: handleIconClick
67
69
  }))) : /*#__PURE__*/React.createElement(S.DefaultIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
68
- component: /*#__PURE__*/React.createElement(CalendarM, null)
70
+ component: /*#__PURE__*/React.createElement(CalendarM, null),
71
+ color: theme.palette['grey-400']
69
72
  }));
70
- }, [hovered, highlight, allowClear, readOnly, value, clearTooltip, handleIconClick]);
73
+ }, [hovered, highlight, allowClear, readOnly, value, theme, clearTooltip, handleIconClick]);
71
74
  var _ref2 = triggerHTMLAttributes != null ? triggerHTMLAttributes : {},
72
75
  className = _ref2.className,
73
76
  restAttributes = _objectWithoutPropertiesLoose(_ref2, _excluded2);
@@ -1,23 +1,23 @@
1
- /// <reference types="react" />
1
+ import { type ThemeProps } from '@synerise/ds-core';
2
2
  import { type InputProps } from '@synerise/ds-input';
3
- export declare const Prefixel: import("styled-components").StyledComponent<"div", any, {}, never>;
4
- export declare const Suffixel: import("styled-components").StyledComponent<"div", any, {}, never>;
5
- export declare const Input: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: InputProps) => import("react").JSX.Element, any, {
6
- error?: boolean | undefined;
7
- className?: string | undefined;
8
- counterLimit?: number | undefined;
9
- renderCustomCounter?: ((count?: number | undefined) => import("react").ReactNode) | undefined;
10
- icon1?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
11
- icon1Tooltip?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
12
- icon2?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
13
- icon2Tooltip?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
14
- resetMargin?: boolean | undefined;
3
+ export declare const Prefixel: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
4
+ export declare const Suffixel: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
5
+ export declare const Input: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: InputProps) => React.JSX.Element, any, {
6
+ error?: boolean;
7
+ className?: string;
8
+ counterLimit?: number;
9
+ renderCustomCounter?: (count?: number) => import("react").ReactNode;
10
+ icon1?: import("react").ReactElement;
11
+ icon1Tooltip?: import("react").ReactElement;
12
+ icon2?: import("react").ReactElement;
13
+ icon2Tooltip?: import("react").ReactElement;
14
+ resetMargin?: boolean;
15
15
  handleInputRef?: ((ref: import("react").MutableRefObject<HTMLInputElement | null>) => void) | undefined;
16
16
  prefixel?: import("react").ReactNode;
17
17
  suffixel?: import("react").ReactNode;
18
- autoResize?: import("@synerise/ds-input").AutoResizeProp | undefined;
19
- autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "wrapperClassName" | "placeholderIsMinWidth" | "wrapperStyle" | "extraWidth">> | undefined;
20
- expandable?: boolean | undefined;
18
+ autoResize?: import("@synerise/ds-input").AutoResizeProp;
19
+ autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
20
+ expandable?: boolean;
21
21
  expandableTooltip?: import("react").ReactNode;
22
22
  } & Omit<import("@synerise/ds-form-field").ContentAboveProps, "id" | "rightSide"> & import("@synerise/ds-form-field").ContentBelowProps & import("antd/lib/input").InputProps & {
23
23
  active: boolean;
@@ -48,6 +48,8 @@ export var ClearIconWrapper = styled.div.withConfig({
48
48
  export var DefaultIconWrapper = styled.div.withConfig({
49
49
  displayName: "PickerInputstyles__DefaultIconWrapper",
50
50
  componentId: "sc-168pcz5-6"
51
- })(["&&:hover{.ds-icon svg{fill:", ";}}"], function (props) {
51
+ })([".ds-icon svg{fill:", ";}&&:hover{.ds-icon svg{fill:", ";}}"], function (props) {
52
+ return props.theme.palette['grey-400'];
53
+ }, function (props) {
52
54
  return props.theme.palette['grey-600'];
53
55
  });
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { type WrappedComponentProps } from 'react-intl';
3
3
  import { type RawDatePickerProps } from './RawDatePicker.types';
4
- declare const _default: React.FC<import("react-intl").WithIntlProps<RawDatePickerProps & WrappedComponentProps<"intl">>> & {
5
- WrappedComponent: React.ComponentType<RawDatePickerProps & WrappedComponentProps<"intl">>;
4
+ declare const _default: React.FC<import("react-intl").WithIntlProps<RawDatePickerProps & WrappedComponentProps>> & {
5
+ WrappedComponent: React.ComponentType<RawDatePickerProps & WrappedComponentProps>;
6
6
  };
7
7
  export default _default;
@@ -260,7 +260,9 @@ var RawDatePicker = /*#__PURE__*/function (_React$Component) {
260
260
  picker = null;
261
261
  break;
262
262
  }
263
- return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.ContentWrapper, null, (quickPicks == null ? void 0 : quickPicks.length) && /*#__PURE__*/React.createElement(QuickPicks, {
263
+ return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.ContentWrapper, {
264
+ withQuickPicks: !!(quickPicks != null && quickPicks.length)
265
+ }, (quickPicks == null ? void 0 : quickPicks.length) && /*#__PURE__*/React.createElement(QuickPicks, {
264
266
  value: value,
265
267
  onChange: function onChange(item) {
266
268
  _this2.handleMonthChange(item.value, 'date');
package/dist/format.js CHANGED
@@ -6,6 +6,9 @@ var locales = {
6
6
  pl: pl,
7
7
  es: es
8
8
  };
9
+ var isLocaleKey = function isLocaleKey(key) {
10
+ return Object.prototype.hasOwnProperty.call(locales, key);
11
+ };
9
12
  var defaultLocale = 'en';
10
13
  export default function (date, formatStr, locale) {
11
14
  if (locale === void 0) {
@@ -14,7 +17,8 @@ export default function (date, formatStr, locale) {
14
17
  if (!fnsIsValid(date)) {
15
18
  return '';
16
19
  }
20
+ var localeKey = locale.substring(0, 2);
17
21
  return fnsFormat(date, formatStr, {
18
- locale: locales[locale.substring(0, 2)]
22
+ locale: isLocaleKey(localeKey) ? locales[localeKey] : locales[defaultLocale]
19
23
  });
20
24
  }
@@ -1,5 +1,6 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
2
  import MomentLocaleUtils from 'react-day-picker/moment';
3
+ var LOCALES = ['en', 'pl'];
3
4
  var WEEKDAYS_LONG = {
4
5
  en: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
5
6
  pl: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'obota']
@@ -18,8 +19,11 @@ var FIRST_DAY = {
18
19
  };
19
20
  var DEFAULT_LOCALE = 'en';
20
21
  var DEFAULT_FORMAT = 'MMM DD, YYYY';
22
+ var isValidLocale = function isValidLocale(locale) {
23
+ return LOCALES.includes(locale);
24
+ };
21
25
  var getValidLocale = function getValidLocale(locale) {
22
- return Object.keys(MONTHS).includes(locale) ? locale : DEFAULT_LOCALE;
26
+ return isValidLocale(locale) ? locale : DEFAULT_LOCALE;
23
27
  };
24
28
  function formatDay(d, _format, locale) {
25
29
  if (_format === void 0) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-date-picker",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "DatePicker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,14 +35,14 @@
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
37
  "@date-fns/upgrade": "^1.0.3",
38
- "@synerise/ds-button": "^1.4.4",
39
- "@synerise/ds-data-format": "^1.0.1",
40
- "@synerise/ds-dropdown": "^1.0.17",
41
- "@synerise/ds-icon": "^1.6.0",
42
- "@synerise/ds-input": "^1.3.4",
43
- "@synerise/ds-time-picker": "^1.1.12",
44
- "@synerise/ds-tooltip": "^1.1.13",
45
- "@synerise/ds-utils": "^1.3.1",
38
+ "@synerise/ds-button": "^1.4.6",
39
+ "@synerise/ds-data-format": "^1.1.0",
40
+ "@synerise/ds-dropdown": "^1.0.19",
41
+ "@synerise/ds-icon": "^1.6.2",
42
+ "@synerise/ds-input": "^1.3.6",
43
+ "@synerise/ds-time-picker": "^1.1.14",
44
+ "@synerise/ds-tooltip": "^1.1.15",
45
+ "@synerise/ds-utils": "^1.4.0",
46
46
  "classnames": "^2.5.1",
47
47
  "date-fns": "2.16.1",
48
48
  "lodash": "^4.17.21",
@@ -56,5 +56,5 @@
56
56
  "react-intl": ">=3.12.0 <= 6.8",
57
57
  "styled-components": "^5.3.3"
58
58
  },
59
- "gitHead": "f7c362a4f370d86b51df9aba9e91ac8f7fe4ed8f"
59
+ "gitHead": "b35b1875727156fe9f5b3bad55aed5ca447c8c8d"
60
60
  }