@synerise/ds-time-picker 1.1.29 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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-time-picker@1.1.29...@synerise/ds-time-picker@1.2.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
 ## [1.1.29](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@1.1.28...@synerise/ds-time-picker@1.1.29) (2025-10-31)
 
 **Note:** Version bump only for package @synerise/ds-time-picker

package/README.md

@@ -45,5 +45,5 @@ import TimePicker from '@synerise/ds-time-picker'
 | use12HourClock   | use 12 hour clock instead of 24                                                                                                          | boolean                                                                              | -                            |
 | placeholder      | Placeholder of Timepicker input                                                                                                          | `string`                                                                             | `Select time`                |
 | timeFormat       | format of date displayed in input (see: https://github.com/iamkun/dayjs/blob/dev/docs/en/API-reference.md#list-of-all-available-formats) | string                                                                               | `'HH:mm:ss'`                 |
-| trigger          | trigger that opens the dropdown                                                                                                          | ['click'] / ['hover'] / ['contextMenu']                                              | ['click']                    |
+| trigger          | trigger that opens the dropdown                                                                                                          | ['click'] / ['hover']                                              | ['click']                    |
 | value            | selected value                                                                                                                           | Date                                                                                 | -                            |

package/dist/TimePicker.js

@@ -5,6 +5,7 @@ import { range } from 'lodash';
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useDataFormat } from '@synerise/ds-core';
+import Dropdown from '@synerise/ds-dropdown';
 import Icon, { ClockM, Close3S } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
 import * as S from './TimePicker.styles';
@@ -196,13 +197,15 @@ var TimePicker = function TimePicker(_ref) {
     className: "ds-time-picker " + (className || ''),
     "data-testid": "tp-container",
     style: containerStyle
-  }, /*#__PURE__*/React.createElement(S.Dropdown, _extends({
+  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
     trigger: trigger,
     open: alwaysOpen || open,
     onOpenChange: onVisibleChange,
     placement: placement,
     overlay: overlay,
-    disabled: disabled
+    disabled: disabled,
+    asChild: true,
+    size: "match-trigger"
   }, dropdownProps), /*#__PURE__*/React.createElement(S.TimePickerInput, _extends({
     errorText: !open && errorText,
     disabled: disabled,

package/dist/TimePicker.styles.d.ts

@@ -1,14 +1,4 @@
-import { type ReactNode } from 'react';
-export declare const Dropdown: import("styled-components").StyledComponent<import("react").ComponentType<import("@synerise/ds-dropdown").DropdownProps> & {
-    Wrapper: typeof import("@synerise/ds-dropdown/dist/Dropdown.styles").Wrapper;
-    SearchInput: ({ value, className, onSearchChange, onClearInput, placeholder, iconLeft, autofocus, clearTooltip, disabled, borderRadius, handleInputRef, autofocusDelay, clearTooltipProps, valuePrefix, ...htmlAttributes }: import("@synerise/ds-search-bar").SearchBarProps) => React.JSX.Element;
-    BottomAction: ({ onClickAction, children, icon, ...rest }: import("@synerise/ds-dropdown/dist/elements/BottomAction/BottomAction.types").BottomActionProps) => React.JSX.Element;
-    BackAction: ({ label, onClick, tooltip, tooltipProps }: import("@synerise/ds-dropdown/dist/elements/BackAction/BackAction.types").Props) => React.JSX.Element;
-    Button: import("react").ComponentClass<import("antd/lib/dropdown").DropdownButtonProps, any> | import("react").FunctionComponent<import("antd/lib/dropdown").DropdownButtonProps>;
-    TextTrigger: import("react").FC<import("@synerise/ds-dropdown/dist/elements/TextTrigger/TextTrigger.types").TextTriggerProps>;
-}, any, {
-    children?: ReactNode;
-}, never>;
+import React from 'react';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Unit: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -17,8 +7,25 @@ export declare const CellText: import("styled-components").StyledComponent<"labe
 export declare const Cell: import("styled-components").StyledComponent<"button", any, {
     active?: boolean;
 }, never>;
-export declare const ClearIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
-export declare const TimePickerInput: 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 }: import("@synerise/ds-input").InputProps) => React.JSX.Element, any, {}, never>;
+export declare const ClearIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const TimePickerInput: import("styled-components").StyledComponent<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 & React.RefAttributes<HTMLInputElement>>, any, {}, never>;
 export declare const PlaceholderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Placeholder: import("styled-components").StyledComponent<"div", any, {
     height: number;

package/dist/TimePicker.styles.js

@@ -1,41 +1,39 @@
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+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, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import DSDropdown from '@synerise/ds-dropdown';
 import Icon from '@synerise/ds-icon';
 import { Input } from '@synerise/ds-input';
 import { Label } from '@synerise/ds-typography';
-export var Dropdown = styled(DSDropdown).withConfig({
-  displayName: "TimePickerstyles__Dropdown",
-  componentId: "sc-yk19n0-0"
-})(["margin:0;"]);
 export var Container = styled.div.withConfig({
   displayName: "TimePickerstyles__Container",
-  componentId: "sc-yk19n0-1"
+  componentId: "sc-5k0z0v-0"
 })(["min-width:104px;max-width:208px;width:inherit;position:relative;"]);
 export var OverlayContainer = styled.div.withConfig({
   displayName: "TimePickerstyles__OverlayContainer",
-  componentId: "sc-yk19n0-2"
+  componentId: "sc-5k0z0v-1"
 })(["background-color:", ";border-radius:3px;display:flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;"], function (props) {
   return props.theme.palette.white;
 });
 export var Unit = styled.div.withConfig({
   displayName: "TimePickerstyles__Unit",
-  componentId: "sc-yk19n0-3"
+  componentId: "sc-5k0z0v-2"
 })(["display:flex;flex-direction:column;width:100%;overflow:hidden;.scrollbar-container{margin-right:-11px;}"]);
 export var UnitSeperator = styled.div.withConfig({
   displayName: "TimePickerstyles__UnitSeperator",
-  componentId: "sc-yk19n0-4"
+  componentId: "sc-5k0z0v-3"
 })(["width:1px;height:inherit;display:flex;flex-shrink:0;background-color:", ";"], function (props) {
   return props.theme.palette['grey-200'];
 });
 export var CellText = styled(Label).withConfig({
   displayName: "TimePickerstyles__CellText",
-  componentId: "sc-yk19n0-5"
+  componentId: "sc-5k0z0v-4"
 })(["&&{width:22px;height:18px;text-align:center;color:", ";transition:color 0.3s;}"], function (props) {
   return props.theme.palette['grey-600'];
 });
 export var Cell = styled.button.withConfig({
   displayName: "TimePickerstyles__Cell",
-  componentId: "sc-yk19n0-6"
+  componentId: "sc-5k0z0v-5"
 })(["height:32px;width:100%;text-align:center;display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:background-color 0.3s;cursor:pointer;background-color:", ";&&{border:none;padding:0;}&:hover{background-color:", ";", "{color:", ";}}&:disabled{&&{cursor:not-allowed;background-color:", ";", "}", "{cursor:not-allowed;opacity:0.4;}}", ";"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
@@ -51,27 +49,32 @@ export var Cell = styled.button.withConfig({
 });
 export var ClearIcon = styled(Icon).withConfig({
   displayName: "TimePickerstyles__ClearIcon",
-  componentId: "sc-yk19n0-7"
+  componentId: "sc-5k0z0v-6"
 })(["&&,&&:hover{svg{color:", ";fill:", ";}}"], function (props) {
   return props.theme.palette['red-600'];
 }, function (props) {
   return props.theme.palette['red-600'];
 });
-export var TimePickerInput = styled(Input).withConfig({
+export var TimePickerInput = styled(/*#__PURE__*/forwardRef(function (_ref, ref) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props));
+})).withConfig({
   displayName: "TimePickerstyles__TimePickerInput",
-  componentId: "sc-yk19n0-8"
-})(["&:not(.active){input{&:focus{box-shadow:none;background-color:", ";border-color:", ";}}}"], function (props) {
+  componentId: "sc-5k0z0v-7"
+})(["margin-bottom:0;&:not(.active){input{&:focus{box-shadow:none;background-color:", ";border-color:", ";}}}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['grey-300'];
 });
 export var PlaceholderWrapper = styled.div.withConfig({
   displayName: "TimePickerstyles__PlaceholderWrapper",
-  componentId: "sc-yk19n0-9"
+  componentId: "sc-5k0z0v-8"
 })(["width:100%;position:relative;"]);
 export var Placeholder = styled.div.withConfig({
   displayName: "TimePickerstyles__Placeholder",
-  componentId: "sc-yk19n0-10"
+  componentId: "sc-5k0z0v-9"
 })(["height:", "px;"], function (props) {
   return props.height;
 });

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

@@ -1,8 +1,9 @@
 import type dayjs from 'dayjs';
 import type { CSSProperties, ReactNode } from 'react';
 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 PopoverTriggerType } from '@synerise/ds-popover';
 export type ClockModes = 'AM' | 'PM';
 export type TimePickerDisabledUnits = {
     disabledSeconds?: number[];
@@ -16,7 +17,7 @@ export type TimePickerProps = TimePickerDisabledUnits & {
     containerStyle?: CSSProperties;
     defaultOpen?: boolean;
     disabled?: boolean;
-    dropdownProps?: Partial<DropdownProps>;
+    dropdownProps?: Partial<Omit<DropdownSharedProps, 'children' | 'overlay' | 'open' | 'onOpenChange' | 'disabled'>>;
     inputProps?: Partial<InputProps>;
     onChange?: (value: Date | undefined, timeString: string) => void;
     onClockModeChange?: (mode: string) => void;
@@ -28,7 +29,7 @@ export type TimePickerProps = TimePickerDisabledUnits & {
      * @deprecated use `valueFormatOptions` instead
      */
     timeFormat?: string;
-    trigger?: ('click' | 'hover' | 'contextMenu')[];
+    trigger?: PopoverTriggerType[];
     units?: dayjs.UnitType[];
     /**
      * @deprecated use DSProvider::dataFormatConfig instead

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "1.1.29",
+  "version": "1.2.0",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,12 +35,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^1.0.34",
-    "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-input": "^1.4.2",
-    "@synerise/ds-scrollbar": "^1.1.9",
-    "@synerise/ds-tooltip": "^1.2.1",
-    "@synerise/ds-typography": "^1.0.22",
+    "@synerise/ds-dropdown": "^1.1.0",
+    "@synerise/ds-icon": "^1.8.0",
+    "@synerise/ds-input": "^1.5.0",
+    "@synerise/ds-scrollbar": "^1.2.0",
+    "@synerise/ds-tooltip": "^1.3.0",
+    "@synerise/ds-typography": "^1.0.23",
     "dayjs": "^1.8.19",
     "debounce": "^1.2.0",
     "lodash": "^4.17.21"
@@ -52,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "73989f3707121812fcd54f3e89e80f6228298689"
+  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
 }