@synerise/ds-date-picker 1.2.17 → 1.3.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.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.2.18...@synerise/ds-date-picker@1.3.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
+## [1.2.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.2.17...@synerise/ds-date-picker@1.2.18) (2025-10-31)
+
+**Note:** Version bump only for package @synerise/ds-date-picker
+
+
+
+
+
 ## [1.2.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-picker@1.2.16...@synerise/ds-date-picker@1.2.17) (2025-10-22)
 
 **Note:** Version bump only for package @synerise/ds-date-picker

package/dist/DatePicker.const.d.ts

@@ -0,0 +1,5 @@
+export declare const TRIGGER_PROPS: {
+    style: {
+        display: string;
+    };
+};

package/dist/DatePicker.const.js

@@ -0,0 +1,5 @@
+export var TRIGGER_PROPS = {
+  style: {
+    display: 'block'
+  }
+};

package/dist/DatePicker.js

@@ -1,10 +1,10 @@
 var _excluded = ["autoFocus", "disabled", "texts", "format", "valueFormatOptions", "value", "onApply", "showTime", "onValueChange", "onClear", "errorText", "popoverPlacement", "prefixel", "error", "onDropdownVisibleChange", "dropdownProps", "suffixel", "hideNow", "readOnly", "renderTrigger", "inputProps", "allowClear", "overlayHTMLAttributes", "triggerHTMLAttributes"];
 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); }
 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; }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Dropdown from '@synerise/ds-dropdown';
-import { useOnClickOutside } from '@synerise/ds-utils';
+import { TRIGGER_PROPS } from './DatePicker.const';
 import * as S from './DatePicker.styles';
 import PickerInput from './Elements/PickerInput/PickerInput';
 import RawDatePicker from './RawDatePicker/RawDatePicker';
@@ -42,12 +42,8 @@ var DatePicker = function DatePicker(_ref) {
   var _useState2 = useState(value),
     selectedDate = _useState2[0],
     setSelectedDate = _useState2[1];
-  var ref = useRef(null);
   var intl = useIntl();
   var allTexts = getDefaultTexts(intl, texts);
-  useOnClickOutside(ref, function () {
-    !!dropVisible && setDropVisible(false);
-  });
   useEffect(function () {
     setSelectedDate(value);
   }, [value]);
@@ -59,6 +55,11 @@ var DatePicker = function DatePicker(_ref) {
     setSelectedDate(val);
     setDropVisible(false);
   }, [onApply]);
+  var handleOpenChange = useCallback(function (newOpen) {
+    onDropdownVisibleChange == null || onDropdownVisibleChange(newOpen);
+    dropdownProps == null || dropdownProps.onOpenChange == null || dropdownProps.onOpenChange(newOpen);
+    setDropVisible(newOpen);
+  }, [dropdownProps, onDropdownVisibleChange]);
   var handleClear = useCallback(function () {
     setDropVisible(false);
     setSelectedDate(undefined);
@@ -88,8 +89,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
   return readOnly ? trigger : /*#__PURE__*/React.createElement(Dropdown, _extends({
     overlay: /*#__PURE__*/React.createElement(S.OverlayContainer, _extends({
-      "data-testid": "date-picker-overlay-container",
-      ref: ref
+      "data-testid": "date-picker-overlay-container"
     }, overlayHTMLAttributes), /*#__PURE__*/React.createElement(RawDatePicker, _extends({}, rest, {
       showTime: showTime,
       texts: allTexts,
@@ -98,14 +98,18 @@ var DatePicker = function DatePicker(_ref) {
       value: selectedDate,
       hideNow: hideNow
     }))),
-    overlayStyle: {
-      boxShadow: '0 4px 12px 0 rgba(35, 41, 54, 0.07)'
-    },
-    onVisibleChange: onDropdownVisibleChange,
     trigger: ['click'],
     placement: popoverPlacement,
-    visible: !!dropVisible && !disabled,
-    disabled: disabled
-  }, dropdownProps), trigger);
+    disabled: disabled,
+    size: "min-match-trigger",
+    asChild: false
+  }, dropdownProps, {
+    onOpenChange: handleOpenChange,
+    open: (dropVisible || (dropdownProps == null ? void 0 : dropdownProps.open)) && !disabled,
+    popoverProps: _extends({
+      testId: 'date-picker'
+    }, dropdownProps == null ? void 0 : dropdownProps.popoverProps),
+    popoverTriggerProps: _extends({}, TRIGGER_PROPS, dropdownProps == null ? void 0 : dropdownProps.popoverTriggerProps)
+  }), trigger);
 };
 export default DatePicker;

package/dist/DatePicker.styles.js

@@ -20,4 +20,4 @@ export var PickerWrapper = styled.div.withConfig({
 export var OverlayContainer = styled.div.withConfig({
   displayName: "DatePickerstyles__OverlayContainer",
   componentId: "sc-1kprsne-3"
-})(["overflow:visible;"]);
+})(["overflow:visible;min-width:318px;"]);

package/dist/DatePicker.types.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import type { IntlShape } from 'react-intl';
 import type { DateToFormatOptions } from '@synerise/ds-core';
-import type { DropdownProps } from '@synerise/ds-dropdown';
+import type { DropdownSharedProps } from '@synerise/ds-dropdown';
 import type { InputProps } from '@synerise/ds-input';
 import type { DataAttributes } from '@synerise/ds-utils';
 export type QuickPick = {
@@ -15,7 +15,7 @@ export type DatePickerProps = {
     disabledHours?: number[];
     disabledMinutes?: number[];
     disabledSeconds?: number[];
-    dropdownProps?: Partial<DropdownProps>;
+    dropdownProps?: Partial<Omit<DropdownSharedProps, 'children' | 'overlay'>>;
     /**
      * @deprecated use `valueFormatOptions` instead
      */

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

@@ -1,5 +1,31 @@
-import Button from '@synerise/ds-button';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Actions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Range: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export declare const Range: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
+    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
+    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+}, any, {}, never>;
 export declare const ActionsPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,6 +1,32 @@
-import Button from '@synerise/ds-button';
 import { type ThemeProps } from '@synerise/ds-core';
-export declare const NavButton: import("styled-components").StyledComponent<typeof Button, any, {
+export declare const NavButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
+    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
+    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+}, any, {
     hidden?: boolean;
 }, never>;
 export declare const ArrowPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,25 @@
 import React from 'react';
-import { type PickerInputProps } from './PickerInput.types';
-declare const PickerInput: ({ disabled, readOnly, value, format: dateFormat, valueFormatOptions, onChange, showTime, onClear, onClick, clearTooltip, highlight, prefixel, suffixel, allowClear, triggerHTMLAttributes, ...rest }: PickerInputProps) => React.JSX.Element;
+declare const PickerInput: React.ForwardRefExoticComponent<Pick<import("@synerise/ds-input").InputProps, "autoResize"> & {
+    autoFocus?: boolean;
+    size?: import("antd/lib/button").ButtonSize;
+    format?: string;
+    valueFormatOptions?: import("@synerise/ds-core").DateToFormatOptions;
+    showTime?: boolean;
+    allowClear?: boolean;
+    value?: Date | string;
+    onChange?: (dateValue: Date | undefined | null, stringifiedDate: string) => void;
+    style?: React.CSSProperties;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onClick?: () => void;
+    onClear?: () => void;
+    clearTooltip?: React.ReactNode;
+    highlight?: boolean;
+    error?: boolean;
+    errorText?: React.ReactNode;
+    prefixel?: React.ReactNode;
+    suffixel?: React.ReactNode;
+    triggerHTMLAttributes?: React.HTMLAttributes<HTMLDivElement> & import("@synerise/ds-utils").DataAttributes;
+} & React.RefAttributes<HTMLDivElement>>;
 export default PickerInput;

package/dist/Elements/PickerInput/PickerInput.js

@@ -2,14 +2,14 @@ var _excluded = ["disabled", "readOnly", "value", "format", "valueFormatOptions"
   _excluded2 = ["className"];
 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); }
 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; }
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import { legacyParse } from '@date-fns/upgrade/v2';
 import { getDefaultDataTimeOptions, useDataFormat, useTheme } from '@synerise/ds-core';
 import Icon, { CalendarM, Close3S } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
 import format from '../../format';
 import * as S from './PickerInput.styles';
-var PickerInput = function PickerInput(_ref) {
+var PickerInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     value = _ref.value,
@@ -74,6 +74,7 @@ var PickerInput = function PickerInput(_ref) {
     className = _ref2.className,
     restAttributes = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement(S.PickerInputWrapper, _extends({
+    ref: ref,
     prefixel: !!prefixel,
     suffixel: !!suffixel,
     className: "ds-date-input " + (className || '')
@@ -94,5 +95,5 @@ var PickerInput = function PickerInput(_ref) {
     readOnly: readOnly,
     disabled: disabled
   }, rest))), !!suffixel && /*#__PURE__*/React.createElement(S.Suffixel, null, suffixel));
-};
+});
 export default PickerInput;

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

@@ -1,8 +1,24 @@
 import { type ThemeProps } from '@synerise/ds-core';
-import { type InputProps } from '@synerise/ds-input';
 export declare const Prefixel: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
 export declare const Suffixel: import("styled-components").StyledComponent<"div", any, ThemeProps, never>;
-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, {
+export declare const Input: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    error?: boolean;
+    className?: string;
+    counterLimit?: number;
+    renderCustomCounter?: (count?: number) => React.ReactNode;
+    icon1?: React.ReactElement;
+    icon1Tooltip?: React.ReactElement;
+    icon2?: React.ReactElement;
+    icon2Tooltip?: React.ReactElement;
+    resetMargin?: boolean;
+    handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
+    prefixel?: React.ReactNode;
+    suffixel?: React.ReactNode;
+    autoResize?: import("@synerise/ds-input").AutoResizeProp;
+    autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
+    expandable?: boolean;
+    expandableTooltip?: React.ReactNode;
+} & Omit<import("@synerise/ds-form-field").ContentAboveProps, "id" | "rightSide"> & import("@synerise/ds-form-field").ContentBelowProps & import("antd/lib/input").InputProps & import("react").RefAttributes<HTMLDivElement>>, any, {
     error?: boolean;
     className?: string;
     counterLimit?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-picker",
-  "version": "1.2.17",
+  "version": "1.3.0",
   "description": "DatePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,12 +36,12 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-button": "^1.4.16",
-    "@synerise/ds-dropdown": "^1.0.33",
-    "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-input": "^1.4.1",
-    "@synerise/ds-time-picker": "^1.1.28",
-    "@synerise/ds-tooltip": "^1.2.1",
+    "@synerise/ds-button": "^1.5.0",
+    "@synerise/ds-dropdown": "^1.1.0",
+    "@synerise/ds-icon": "^1.8.0",
+    "@synerise/ds-input": "^1.5.0",
+    "@synerise/ds-time-picker": "^1.2.0",
+    "@synerise/ds-tooltip": "^1.3.0",
     "@synerise/ds-utils": "^1.5.0",
     "classnames": "^2.5.1",
     "date-fns": "2.16.1",
@@ -56,5 +56,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "a40fca2cc78eda64afa96d18dc4d177538a22404"
+  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
 }