@synerise/ds-date-picker 1.1.11 → 1.2.0

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.
 
+# [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)
+
+
+### Features
+
+* **date-picker:** quick picks ([0df17cf](https://github.com/Synerise/synerise-design/commit/0df17cff8b8695cf005970b96c82fffd9b8c8b00))
+
+
+
+
+
+## [1.1.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.1.11...@synerise/ds-date-picker@1.1.12) (2025-07-08)
+
+**Note:** Version bump only for package @synerise/ds-date-picker
+
+
+
+
+
 ## [1.1.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.1.10...@synerise/ds-date-picker@1.1.11) (2025-07-01)
 
 

package/README.md

@@ -28,24 +28,32 @@ import DatePicker from '@synerise/ds-date-picker'
 
 ## API
 
-| Property        | Description                                                 | Type                         | Default    |
-| --------------- | ----------------------------------------------------------- | ---------------------------- | ---------- |
-| autoFocus       | Boolean value to force focus of an input                    | boolean                      | `false`    |
-| showTime        | Boolean value to enable user to choose particular hour      | boolean                      | `false`    |
-| value           | Value of the picker                                         | Date                         | new Date() |
-| onApply         | Callback executed after applying changes                    | (date:Date)=>void            | -          |
-| disabled        | Boolean value to set disabled state of an input             | boolean                      | `false`    |
-| disabledDates   | Function to specify if particular dates are disabled or not | (date:Date)=>boolean         | -          |
-| disabledHours   | Disabled hours for time picker                              | number[]                     | []         |
-| disabledMinutes | Disabled minutes for time picker                            | number[]                     | []         |
-| disabledSeconds | Disabled seconds for time picker                            | number[]                     | []         |
-| useStartOfDay   | Boolean value to set hours to the start of the day          | boolean                      | `false`    |
-| useEndOfDay     | Boolean value to set hours to the start of the day          | boolean                      | `false`    |
-| texts           | Object containing texts                                     | object                       | {}         |
-| prefixel        | String or ReactNode to set prefix                           | string / ReactNode           | -          |
-| suffixel        | String or ReactNode to set suffix                           | string / ReactNode           | -          |
-| hideNow         | Hide now button                                             | boolean / undefined          | -          |
-| renderTrigger   | Function for rendering a custom trigger element             | ()=>ReactElement / undefined | -          |
+| Property        | Description                                                   | Type                         | Default    |
+|-----------------|---------------------------------------------------------------|------------------------------|------------|
+| autoFocus       | Boolean value to force focus of an input                      | boolean                      | `false`    |
+| showTime        | Boolean value to enable user to choose particular hour        | boolean                      | `false`    |
+| value           | Value of the picker                                           | Date                         | new Date() |
+| onApply         | Callback executed after applying changes                      | (date:Date)=>void            | -          |
+| disabled        | Boolean value to set disabled state of an input               | boolean                      | `false`    |
+| disabledDates   | Function to specify if particular dates are disabled or not   | (date:Date)=>boolean         | -          |
+| disabledHours   | Disabled hours for time picker                                | number[]                     | []         |
+| disabledMinutes | Disabled minutes for time picker                              | number[]                     | []         |
+| disabledSeconds | Disabled seconds for time picker                              | number[]                     | []         |
+| useStartOfDay   | Boolean value to set hours to the start of the day            | boolean                      | `false`    |
+| useEndOfDay     | Boolean value to set hours to the start of the day            | boolean                      | `false`    |
+| texts           | Object containing texts                                       | object                       | {}         |
+| prefixel        | String or ReactNode to set prefix                             | string / ReactNode           | -          |
+| suffixel        | String or ReactNode to set suffix                             | string / ReactNode           | -          |
+| hideNow         | Hide now button                                               | boolean / undefined          | -          |
+| renderTrigger   | Function for rendering a custom trigger element               | ()=>ReactElement / undefined | -          |
+| quickPicks      | render buttons for preset dates in left column next to picker | QuickPick[]                  | -          |
+
+### QuickPick
+
+| Property | Description      | Type      | Default |
+|----------|------------------|-----------|---------|
+| label    | Text for button  | ReactNode | -       |
+| value    | value for button | Date      | -       |
 
 ### Texts
 

package/dist/DatePicker.styles.d.ts

@@ -1,2 +1,4 @@
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/DatePicker.styles.js

@@ -2,12 +2,20 @@ import styled from 'styled-components';
 export var Container = styled.div.withConfig({
   displayName: "DatePickerstyles__Container",
   componentId: "sc-1kprsne-0"
-})(["background-color:", ";user-select:none;display:grid;grid-template-rows:48px 300px 1fr;align-items:stretch;justify-content:stretch;min-width:318px;padding-top:12px;> *:not(:last-child){border-bottom:1px solid ", ";}.ds-date-picker-nav{.long-prev,.long-next{display:none;}}"], function (props) {
+})(["background-color:", ";user-select:none;padding-top:12px;> *:not(:last-child){border-bottom:1px solid ", ";}.ds-date-picker-nav{.long-prev,.long-next{display:none;}}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['grey-200'];
 });
+export var ContentWrapper = styled.div.withConfig({
+  displayName: "DatePickerstyles__ContentWrapper",
+  componentId: "sc-1kprsne-1"
+})(["display:flex;"]);
+export var PickerWrapper = styled.div.withConfig({
+  displayName: "DatePickerstyles__PickerWrapper",
+  componentId: "sc-1kprsne-2"
+})(["display:grid;min-width:318px;align-items:stretch;justify-content:stretch;grid-template-rows:48px 300px 1fr;"]);
 export var OverlayContainer = styled.div.withConfig({
   displayName: "DatePickerstyles__OverlayContainer",
-  componentId: "sc-1kprsne-1"
+  componentId: "sc-1kprsne-3"
 })(["overflow:visible;"]);

package/dist/DatePicker.types.d.ts

@@ -4,6 +4,10 @@ import type { DateToFormatOptions } from '@synerise/ds-data-format';
 import type { DropdownProps } from '@synerise/ds-dropdown';
 import type { InputProps } from '@synerise/ds-input';
 import type { DataAttributes } from '@synerise/ds-utils';
+export type QuickPick = {
+    label: ReactNode;
+    value: Date;
+};
 export type DatePickerProps = {
     autoFocus?: boolean;
     disabled?: boolean;
@@ -38,6 +42,7 @@ export type DatePickerProps = {
     useStartOfDay?: boolean;
     useEndOfDay?: boolean;
     hideNow?: boolean;
+    quickPicks?: QuickPick[];
     readOnly?: boolean;
     inputProps?: Pick<InputProps, 'autoResize'>;
     overlayHTMLAttributes?: HTMLAttributes<HTMLDivElement> & DataAttributes;
@@ -66,4 +71,5 @@ export type Texts = {
     now: ReactNode;
     inputPlaceholder: string;
     clearTooltip: ReactNode;
+    quickPicks: ReactNode;
 };

package/dist/Elements/Navbar/Navbar.styles.js

@@ -21,7 +21,9 @@ export var Text = styled.div.withConfig({
 export var Container = styled.div.withConfig({
   displayName: "Navbarstyles__Container",
   componentId: "sc-105m0p0-4"
-})(["display:flex;align-items:center;margin:0 24px;", ":first-of-type{", ",", "{margin-right:8px;}}", ":last-of-type{", ",", "{margin-left:8px;}}"], ArrowContainer, NavButton, ArrowPlaceholder, ArrowContainer, NavButton, ArrowPlaceholder);
+})(["display:flex;align-items:center;padding:0 24px;border-bottom:1px solid ", ";", ":first-of-type{", ",", "{margin-right:8px;}}", ":last-of-type{", ",", "{margin-left:8px;}}"], function (props) {
+  return props.theme.palette['grey-200'];
+}, ArrowContainer, NavButton, ArrowPlaceholder, ArrowContainer, NavButton, ArrowPlaceholder);
 export var Link = styled.span.withConfig({
   displayName: "Navbarstyles__Link",
   componentId: "sc-105m0p0-5"

package/dist/Elements/QuickPicks/QuickPicks.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { QuickPick, Texts } from '../../DatePicker.types';
+type QuickPicksProps = {
+    value?: Date;
+    onChange: (item: QuickPick) => void;
+    items: QuickPick[];
+    texts: Texts;
+};
+export declare const quickPickMatchesValue: (item: QuickPick, value?: Date) => boolean;
+export declare const QuickPicks: ({ value, items, texts, onChange, }: QuickPicksProps) => React.JSX.Element;
+export {};

package/dist/Elements/QuickPicks/QuickPicks.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ButtonToggle } from '@synerise/ds-button';
+import { useDataFormat } from '@synerise/ds-data-format';
+import { Title } from '@synerise/ds-typography';
+import { fnsIsSameDay } from '../../fns';
+import * as S from './QuickPicks.styles';
+export var quickPickMatchesValue = function quickPickMatchesValue(item, value) {
+  return value ? fnsIsSameDay(item.value, value) : false;
+};
+export var QuickPicks = function QuickPicks(_ref) {
+  var value = _ref.value,
+    items = _ref.items,
+    texts = _ref.texts,
+    onChange = _ref.onChange;
+  var _useDataFormat = useDataFormat(),
+    formatValue = _useDataFormat.formatValue;
+  return /*#__PURE__*/React.createElement(S.QuickPicksWrapper, null, /*#__PURE__*/React.createElement(Title, {
+    level: 6
+  }, texts.quickPicks), items.map(function (item) {
+    return /*#__PURE__*/React.createElement(ButtonToggle, {
+      type: "ghost",
+      activated: quickPickMatchesValue(item, value),
+      onClick: function onClick() {
+        return onChange(item);
+      },
+      tooltipProps: {
+        title: /*#__PURE__*/React.createElement(React.Fragment, null, formatValue(item.value))
+      }
+    }, item.label);
+  }));
+};

package/dist/Elements/QuickPicks/QuickPicks.styles.d.ts

@@ -0,0 +1 @@
+export declare const QuickPicksWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Elements/QuickPicks/QuickPicks.styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export var QuickPicksWrapper = styled.div.withConfig({
+  displayName: "QuickPicksstyles__QuickPicksWrapper",
+  componentId: "sc-apfn0i-0"
+})(["display:flex;flex-direction:column;margin-top:47px;align-items:flex-start;gap:8px;padding:16px 16px 16px 24px;border-top:1px solid ", ";"], function (props) {
+  return props.theme.palette['grey-200'];
+});

package/dist/RawDatePicker/RawDatePicker.js

@@ -8,6 +8,7 @@ import DayPicker from '../Elements/DayPicker/DayPicker';
 import { DayBackground, DayForeground, DayText } from '../Elements/DayPicker/DayPicker.styles';
 import Footer from '../Elements/Footer/Footer';
 import MonthPicker from '../Elements/MonthPicker/MonthPicker';
+import { QuickPicks } from '../Elements/QuickPicks/QuickPicks';
 import TimePicker from '../Elements/TimePicker/TimePicker';
 import YearPicker from '../Elements/YearPicker/YearPicker';
 import { fnsAddDays, fnsEndOfDay, fnsSetDate, fnsSetMonth, fnsSetYear, fnsStartOfDay, fnsStartOfMonth } from '../fns';
@@ -238,7 +239,8 @@ var RawDatePicker = /*#__PURE__*/function (_React$Component) {
       texts = _this$state4.texts;
     var _this$props4 = this.props,
       showTime = _this$props4.showTime,
-      hideNow = _this$props4.hideNow;
+      hideNow = _this$props4.hideNow,
+      quickPicks = _this$props4.quickPicks;
     var isValid = !!value;
     var picker;
     switch (mode) {
@@ -258,7 +260,15 @@ var RawDatePicker = /*#__PURE__*/function (_React$Component) {
         picker = null;
         break;
     }
-    return /*#__PURE__*/React.createElement(S.Container, null, picker, /*#__PURE__*/React.createElement(Footer, {
+    return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.ContentWrapper, null, (quickPicks == null ? void 0 : quickPicks.length) && /*#__PURE__*/React.createElement(QuickPicks, {
+      value: value,
+      onChange: function onChange(item) {
+        _this2.handleMonthChange(item.value, 'date');
+        _this2.handleChange(item.value);
+      },
+      items: quickPicks,
+      texts: texts
+    }), /*#__PURE__*/React.createElement(S.PickerWrapper, null, picker)), /*#__PURE__*/React.createElement(Footer, {
       canApply: isValid && changed,
       onApply: this.handleApply,
       dateOnly: !showTime,

package/dist/fns.d.ts

@@ -11,6 +11,8 @@ import fnsGetSeconds from 'date-fns/getSeconds';
 import fnsGetYear from 'date-fns/getYear';
 import fnsIsAfter from 'date-fns/isAfter';
 import fnsIsBefore from 'date-fns/isBefore';
+import fnsIsEqual from 'date-fns/isEqual';
+import fnsIsSameDay from 'date-fns/isSameDay';
 import fnsIsSameMonth from 'date-fns/isSameMonth';
 import fnsIsSameYear from 'date-fns/isSameYear';
 import fnsSetDate from 'date-fns/setDate';
@@ -38,3 +40,5 @@ export { fnsGetYear };
 export { fnsAddDays };
 export { fnsAddSeconds };
 export { fnsDifferenceInYears };
+export { fnsIsEqual };
+export { fnsIsSameDay };

package/dist/fns.js

@@ -11,6 +11,8 @@ import fnsGetSeconds from 'date-fns/getSeconds';
 import fnsGetYear from 'date-fns/getYear';
 import fnsIsAfter from 'date-fns/isAfter';
 import fnsIsBefore from 'date-fns/isBefore';
+import fnsIsEqual from 'date-fns/isEqual';
+import fnsIsSameDay from 'date-fns/isSameDay';
 import fnsIsSameMonth from 'date-fns/isSameMonth';
 import fnsIsSameYear from 'date-fns/isSameYear';
 import fnsSetDate from 'date-fns/setDate';
@@ -37,4 +39,6 @@ export { fnsIsSameYear };
 export { fnsGetYear };
 export { fnsAddDays };
 export { fnsAddSeconds };
-export { fnsDifferenceInYears };
+export { fnsDifferenceInYears };
+export { fnsIsEqual };
+export { fnsIsSameDay };

package/dist/utils/getDefaultTexts.js

@@ -11,6 +11,10 @@ export var getDefaultTexts = function getDefaultTexts(intl, texts) {
       id: "DS.DATE-PICKER.NOW",
       defaultMessage: "Now"
     }),
+    quickPicks: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.DATE-PICKER.QUICK-PICKS",
+      defaultMessage: "Quick picks"
+    }),
     inputPlaceholder: intl.formatMessage({
       id: 'DS.DATE-PICKER.SELECT-DATE'
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-picker",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "description": "DatePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,15 +35,15 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-button": "^1.4.2",
+    "@synerise/ds-button": "^1.4.4",
     "@synerise/ds-data-format": "^1.0.1",
-    "@synerise/ds-dropdown": "^1.0.15",
-    "@synerise/ds-icon": "^1.5.4",
-    "@synerise/ds-input": "^1.3.2",
-    "@synerise/ds-time-picker": "^1.1.10",
-    "@synerise/ds-tooltip": "^1.1.12",
+    "@synerise/ds-dropdown": "^1.0.17",
+    "@synerise/ds-icon": "^1.6.0",
+    "@synerise/ds-input": "^1.3.4",
+    "@synerise/ds-time-picker": "^1.1.12",
+    "@synerise/ds-tooltip": "^1.1.13",
     "@synerise/ds-utils": "^1.3.1",
-    "classnames": "2.3.2",
+    "classnames": "^2.5.1",
     "date-fns": "2.16.1",
     "lodash": "^4.17.21",
     "react-day-picker": "^7.4.8",
@@ -56,5 +56,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "4512641033ba3581a3df208143c547fcfed45895"
+  "gitHead": "f7c362a4f370d86b51df9aba9e91ac8f7fe4ed8f"
 }