@synerise/ds-date-range-picker 1.1.5 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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-range-picker@1.1.5...@synerise/ds-date-range-picker@1.2.0) (2025-04-16)
+
+
+### Bug Fixes
+
+* **date-range-picker:** fix clearing local value ([dc04ce0](https://github.com/Synerise/synerise-design/commit/dc04ce02685cf9fb15b22482f86a8a6065911dc1))
+
+
+### Features
+
+* **form-field:** add form-field component ([7f6b191](https://github.com/Synerise/synerise-design/commit/7f6b191132a3b0d694c21fb4d649f4deea6acb89))
+
+
+
+
+
 ## [1.1.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@1.1.4...@synerise/ds-date-range-picker@1.1.5) (2025-04-04)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

package/dist/RangePickerInput/RangePickerInput.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { RangePickerInputProps } from './RangePickerInput.types';
-declare const RangePickerInput: ({ value, valueFormatOptions, showTime, onChange, onClick, highlight, texts, active, label, description, tooltip, disabled, readOnly, onFocus, allowClear, onBlur, error, errorText, preferRelativeDesc, }: RangePickerInputProps) => React.JSX.Element;
+declare const RangePickerInput: ({ value, valueFormatOptions, showTime, onChange, onClick, highlight, texts, active, label, description, tooltip, tooltipConfig, disabled, readOnly, onFocus, allowClear, onBlur, error, errorText, preferRelativeDesc, }: RangePickerInputProps) => React.JSX.Element;
 export default RangePickerInput;

package/dist/RangePickerInput/RangePickerInput.js

@@ -1,9 +1,10 @@
 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); }
 import React, { useCallback, useMemo, useState } from 'react';
 import Icon, { ArrowRightS, CalendarM, Close3S } from '@synerise/ds-icon';
-import { theme } from '@synerise/ds-core';
+import { useTheme } from '@synerise/ds-core';
 import Tooltip from '@synerise/ds-tooltip';
 import { getDefaultDataTimeOptions, useDataFormat } from '@synerise/ds-data-format';
+import FormField from '@synerise/ds-form-field';
 import * as S from './RangePickerInput.styles';
 import { normalizeRange } from '../utils';
 import { isLifetime } from '../RelativeRangePicker/Elements/RangeDropdown/RangeDropdown';
@@ -19,6 +20,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
     label = _ref.label,
     description = _ref.description,
     tooltip = _ref.tooltip,
+    tooltipConfig = _ref.tooltipConfig,
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     onFocus = _ref.onFocus,
@@ -29,6 +31,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
     errorText = _ref.errorText,
     _ref$preferRelativeDe = _ref.preferRelativeDesc,
     preferRelativeDesc = _ref$preferRelativeDe === void 0 ? false : _ref$preferRelativeDe;
+  var theme = useTheme();
   var _useDataFormat = useDataFormat(),
     formatValue = _useDataFormat.formatValue;
   var dateRangeValue = value ? normalizeRange(value) : value;
@@ -74,15 +77,19 @@ var RangePickerInput = function RangePickerInput(_ref) {
       component: /*#__PURE__*/React.createElement(ArrowRightS, null),
       color: theme.palette['grey-400']
     }), renderEndDate(), preferRelativeDesc && (dateRangeValue == null ? void 0 : dateRangeValue.translationKey) && value && ')');
-  }, [dateRangeValue, renderFromDate, renderEndDate, preferRelativeDesc, texts, value]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(S.Label, {
+  }, [value, preferRelativeDesc, dateRangeValue == null ? void 0 : dateRangeValue.translationKey, texts, renderFromDate, theme.palette, renderEndDate]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormField, {
+    errorText: errorText,
     label: label,
-    tooltip: tooltip
-  }), /*#__PURE__*/React.createElement(S.Container, {
+    tooltip: tooltip,
+    tooltipConfig: tooltipConfig,
+    description: description
+  }, /*#__PURE__*/React.createElement(S.Container, {
     tabIndex: 0,
     onFocus: onFocus,
     onClick: !disabled ? onClick : undefined,
     onBlur: onBlur,
+    "data-testid": "date-range-picker-input-wrapper",
     onMouseEnter: handleIconMouseEnter,
     onMouseLeave: handleIconMouseLeave
   }, /*#__PURE__*/React.createElement(S.RangeInputWrapper, {
@@ -95,10 +102,11 @@ var RangePickerInput = function RangePickerInput(_ref) {
     title: texts == null ? void 0 : texts.clear
   }, /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(Close3S, null),
+    "data-testid": "date-range-picker-input-clear",
     onClick: handleClear
   }))) : /*#__PURE__*/React.createElement(S.DefaultIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CalendarM, null),
     color: theme.palette['grey-600']
-  })))), (showError || description) && /*#__PURE__*/React.createElement(S.ContentBelow, null, showError && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, null, description)));
+  }))))));
 };
 export default RangePickerInput;

package/dist/RangePickerInput/RangePickerInput.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ClearIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DefaultIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -15,7 +14,3 @@ export declare const DateWrapper: import("styled-components").StyledComponent<"d
 export declare const DateValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconSeparator: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<({ id, className, label, tooltip, tooltipConfig, style }: import("@synerise/ds-input/dist/Label/Label.types").LabelProps) => import("react").JSX.Element, any, {}, never>;
-export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentBelow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/RangePickerInput/RangePickerInput.styles.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { InputWrapper } from '@synerise/ds-input/dist/InputMultivalue/InputMultivalue.styles';
-import { Label as DSLabel } from '@synerise/ds-input';
 export var Container = styled.div.withConfig({
   displayName: "RangePickerInputstyles__Container",
   componentId: "sc-1b9h1ef-0"
@@ -42,24 +41,4 @@ export var IconSeparator = styled.div.withConfig({
 export var SuffixWrapper = styled.div.withConfig({
   displayName: "RangePickerInputstyles__SuffixWrapper",
   componentId: "sc-1b9h1ef-7"
-})([""]);
-export var Label = styled(DSLabel).withConfig({
-  displayName: "RangePickerInputstyles__Label",
-  componentId: "sc-1b9h1ef-8"
-})(["margin-bottom:8px;"]);
-export var ErrorText = styled.div.withConfig({
-  displayName: "RangePickerInputstyles__ErrorText",
-  componentId: "sc-1b9h1ef-9"
-})(["color:", ";margin-bottom:4px;"], function (props) {
-  return props.theme.palette['red-600'];
-});
-export var Description = styled.div.withConfig({
-  displayName: "RangePickerInputstyles__Description",
-  componentId: "sc-1b9h1ef-10"
-})(["color:", ";"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var ContentBelow = styled.div.withConfig({
-  displayName: "RangePickerInputstyles__ContentBelow",
-  componentId: "sc-1b9h1ef-11"
-})(["margin-top:8px;"]);
+})([""]);

package/dist/RangePickerInput/RangePickerInput.types.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
-import { DateToFormatOptions } from '@synerise/ds-data-format';
-import { DateFilter, DateRange } from '../date.types';
-import { Texts } from '../DateRangePicker.types';
+import type { CSSProperties, MouseEvent as ReactMouseEvent, FocusEventHandler, ReactNode } from 'react';
+import type { DateToFormatOptions } from '@synerise/ds-data-format';
+import type { FormFieldCommonProps } from '@synerise/ds-form-field';
+import type { DateFilter, DateRange } from '../date.types';
+import type { Texts } from '../DateRangePicker.types';
 export type RangePickerInputProps = {
     size?: 'large' | 'default' | 'small';
     /**
@@ -13,25 +14,21 @@ export type RangePickerInputProps = {
     allowClear?: boolean;
     value?: Pick<DateRange, 'from'> & Pick<DateRange, 'to'>;
     onChange?: (value: Partial<DateFilter> | undefined) => void;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
-    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    onClick?: (event?: ReactMouseEvent<HTMLElement, MouseEvent>) => void;
     onClear?: () => void;
-    onFocus?: React.FocusEventHandler;
-    onBlur?: React.FocusEventHandler;
-    clearTooltip?: string | React.ReactNode;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
+    clearTooltip?: ReactNode;
     highlight?: boolean;
     texts?: Texts;
     active?: boolean;
-    label?: string | React.ReactNode;
-    description?: string | React.ReactNode;
-    tooltip?: string | React.ReactNode;
     error?: boolean;
-    errorText?: React.ReactNode | string;
     preferRelativeDesc?: boolean;
-};
+} & FormFieldCommonProps;
 /**
  * @deprecated use `RangePickerInputProps`
  */

package/dist/RawDateRangePicker.js

@@ -1,5 +1,5 @@
 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); }
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { omitBy, isUndefined } from 'lodash';
 import { useIntl } from 'react-intl';
 import fnsIsValid from 'date-fns/isValid';
@@ -121,6 +121,9 @@ export var RawDateRangePicker = function RawDateRangePicker(_ref) {
     setVisibleAddonKey = _useState3[1];
   var intl = useIntl();
   var timeZone = intl.timeZone;
+  useEffect(function () {
+    setLocalValue(normalizeRange(value));
+  }, [value]);
   var allTexts = useMemo(function () {
     return getDefaultTexts(intl, false, texts);
   }, [intl, texts]);

package/dist/RelativeRangePicker/RelativeRangePicker.styles.d.ts

@@ -6,7 +6,10 @@ export declare const Title: import("styled-components").StyledComponent<"div", a
 export declare const Help: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Ranges: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CustomForm: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputSelectGroup: import("styled-components").StyledComponent<({ children, label, errors, description, resetMargin, tooltip, ...antdInputGroupProps }: InputGroupProps) => React.JSX.Element, any, InputGroupProps, never>;
+export declare const InputSelectGroup: import("styled-components").StyledComponent<({ children, label, errors, description, resetMargin, tooltip, tooltipConfig, ...antdInputGroupProps }: InputGroupProps) => React.JSX.Element, any, import("antd/es/input").GroupProps & {
+    errors?: string[] | undefined;
+    resetMargin?: boolean | undefined;
+} & Omit<import("@synerise/ds-form-field").FormFieldCommonProps, "errorText">, never>;
 export declare const ModeDropdownTrigger: import("styled-components").StyledComponent<({ children, ...rest }: any) => React.JSX.Element, any, {}, never>;
 export declare const Range: import("styled-components").StyledComponent<({ children, ...rest }: any) => React.JSX.Element, any, {}, never>;
 export declare const RangeFormColumn: import("styled-components").StyledComponent<"div", any, {}, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,24 +35,25 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-badge": "^1.0.4",
-    "@synerise/ds-button": "^1.1.3",
-    "@synerise/ds-button-group": "^1.0.4",
+    "@synerise/ds-badge": "^1.0.5",
+    "@synerise/ds-button": "^1.1.4",
+    "@synerise/ds-button-group": "^1.0.5",
     "@synerise/ds-data-format": "^1.0.0",
-    "@synerise/ds-date-picker": "^1.0.4",
-    "@synerise/ds-dropdown": "^1.0.4",
-    "@synerise/ds-icon": "^1.3.0",
-    "@synerise/ds-inline-edit": "^1.0.5",
-    "@synerise/ds-input": "^1.0.4",
-    "@synerise/ds-input-number": "^1.0.4",
-    "@synerise/ds-list-item": "^1.0.4",
-    "@synerise/ds-manageable-list": "^1.2.4",
-    "@synerise/ds-scrollbar": "^1.0.4",
-    "@synerise/ds-select": "^1.0.4",
-    "@synerise/ds-slider": "^1.0.4",
-    "@synerise/ds-tag": "^1.1.3",
-    "@synerise/ds-time-picker": "^1.0.4",
-    "@synerise/ds-tooltip": "^1.1.3",
+    "@synerise/ds-date-picker": "^1.1.0",
+    "@synerise/ds-dropdown": "^1.0.5",
+    "@synerise/ds-form-field": "^1.1.0",
+    "@synerise/ds-icon": "^1.4.0",
+    "@synerise/ds-inline-edit": "^1.0.6",
+    "@synerise/ds-input": "^1.1.0",
+    "@synerise/ds-input-number": "^1.1.0",
+    "@synerise/ds-list-item": "^1.0.5",
+    "@synerise/ds-manageable-list": "^1.2.5",
+    "@synerise/ds-scrollbar": "^1.0.5",
+    "@synerise/ds-select": "^1.1.0",
+    "@synerise/ds-slider": "^1.0.5",
+    "@synerise/ds-tag": "^1.1.4",
+    "@synerise/ds-time-picker": "^1.1.0",
+    "@synerise/ds-tooltip": "^1.1.4",
     "@synerise/ds-utils": "^1.0.1",
     "date-fns": "^2.16.1",
     "date-fns-tz": "1.1.4",
@@ -69,5 +70,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "55537c6449492265a1d50c1e055ef7cc03c7935e"
+  "gitHead": "6735f9babfeef53122f54ca86cba5f581e8870d9"
 }