@synerise/ds-time-picker 1.2.23 → 1.2.25

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@1.2.24...@synerise/ds-time-picker@1.2.25) (2026-04-01)
+
+**Note:** Version bump only for package @synerise/ds-time-picker
+
+## [1.2.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@1.2.23...@synerise/ds-time-picker@1.2.24) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-time-picker
+
 ## [1.2.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@1.2.22...@synerise/ds-time-picker@1.2.23) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-time-picker

package/dist/TimePicker.d.ts

@@ -1,6 +1,6 @@
-import dayjs from 'dayjs';
-import React from 'react';
-import { type TimePickerProps } from './types/TimePicker.types';
+import { default as dayjs } from 'dayjs';
+import { default as React } from 'react';
+import { TimePickerProps } from './types/TimePicker.types';
 declare const TimePicker: {
     ({ placement, placeholder, trigger, value, units, defaultOpen, onChange, containerStyle, timeFormat, valueFormatOptions, use12HourClock, alwaysOpen, dropdownProps, inputProps, disabled, disabledHours, disabledMinutes, disabledSeconds, overlayClassName, className, clearTooltip, raw, onClockModeChange, errorText, }: TimePickerProps): React.JSX.Element;
     defaultProps: {

package/dist/TimePicker.js

@@ -1,81 +1,76 @@
-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 dayjs from 'dayjs';
-import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
-import range from 'lodash.range';
-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';
-import * as S from './TimePicker.styles';
-import Unit from './Unit';
-import { AM, CLOCK_MODES, DISABLE_CLOCK_MODE_HOUR, HOUR, HOUR_12, MINUTE, PM, SECOND } from './constants/timePicker.constants';
-import { getClockModeFromDate, getOppositeClockMode } from './utils/clockMode.utils';
-import { handleTimeChange } from './utils/timePicker.utils';
+import { jsxs, jsx } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import customParseFormatPlugin from "dayjs/plugin/customParseFormat";
+import range from "lodash.range";
+import { useState, useMemo, useCallback, Fragment } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useDataFormat } from "@synerise/ds-core";
+import DSDropdown from "@synerise/ds-dropdown";
+import Icon, { Close3S, ClockM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { OverlayContainer, UnitSeperator, ClearIcon, Container, TimePickerInput, Unit as Unit$1, Cell, CellText } from "./TimePicker.styles.js";
+import Unit from "./Unit.js";
+import { HOUR, MINUTE, SECOND, AM, PM, HOUR_12, DISABLE_CLOCK_MODE_HOUR, CLOCK_MODES } from "./constants/timePicker.constants.js";
+import { getClockModeFromDate, getOppositeClockMode } from "./utils/clockMode.utils.js";
+import { handleTimeChange } from "./utils/timePicker.utils.js";
 dayjs.extend(customParseFormatPlugin);
-var defaultUnits = [HOUR, MINUTE, SECOND];
-var TimePicker = function TimePicker(_ref) {
-  var placement = _ref.placement,
-    placeholder = _ref.placeholder,
-    trigger = _ref.trigger,
-    value = _ref.value,
-    units = _ref.units,
-    defaultOpen = _ref.defaultOpen,
-    onChange = _ref.onChange,
-    _ref$containerStyle = _ref.containerStyle,
-    containerStyle = _ref$containerStyle === void 0 ? {} : _ref$containerStyle,
-    timeFormat = _ref.timeFormat,
-    valueFormatOptions = _ref.valueFormatOptions,
-    use12HourClock = _ref.use12HourClock,
-    alwaysOpen = _ref.alwaysOpen,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    _ref$inputProps = _ref.inputProps,
-    inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
-    disabled = _ref.disabled,
-    disabledHours = _ref.disabledHours,
-    disabledMinutes = _ref.disabledMinutes,
-    disabledSeconds = _ref.disabledSeconds,
-    overlayClassName = _ref.overlayClassName,
-    className = _ref.className,
-    _ref$clearTooltip = _ref.clearTooltip,
-    clearTooltip = _ref$clearTooltip === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.TIME-PICKER.CLEAR-TOOLTIP",
-      defaultMessage: "Clear"
-    }) : _ref$clearTooltip,
-    raw = _ref.raw,
-    onClockModeChange = _ref.onClockModeChange,
-    errorText = _ref.errorText;
-  var _useDataFormat = useDataFormat(),
-    formatValue = _useDataFormat.formatValue,
-    is12HoursClockFromDataFormat = _useDataFormat.is12HoursClock;
-  var _useState = useState(defaultOpen || false),
-    open = _useState[0],
-    setOpen = _useState[1];
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var is12HourClock = useMemo(function () {
-    if (use12HourClock === undefined) {
+const defaultUnits = [HOUR, MINUTE, SECOND];
+const TimePicker = ({
+  placement,
+  placeholder,
+  trigger,
+  value,
+  units,
+  defaultOpen,
+  onChange,
+  containerStyle = {},
+  timeFormat,
+  valueFormatOptions,
+  use12HourClock,
+  alwaysOpen,
+  dropdownProps = {},
+  inputProps = {},
+  disabled,
+  disabledHours,
+  disabledMinutes,
+  disabledSeconds,
+  overlayClassName,
+  className,
+  clearTooltip = /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TIME-PICKER.CLEAR-TOOLTIP", defaultMessage: "Clear" }),
+  raw,
+  onClockModeChange,
+  errorText
+}) => {
+  const {
+    formatValue,
+    is12HoursClock: is12HoursClockFromDataFormat
+  } = useDataFormat();
+  const [open, setOpen] = useState(defaultOpen || false);
+  const {
+    formatMessage
+  } = useIntl();
+  const is12HourClock = useMemo(() => {
+    if (use12HourClock === void 0) {
       return is12HoursClockFromDataFormat;
     }
     return use12HourClock;
   }, [is12HoursClockFromDataFormat, use12HourClock]);
-  var timeFormatByClockMode = useMemo(function () {
-    return timeFormat != null ? timeFormat : is12HourClock ? 'hh:mm:ss A' : 'HH:mm:ss';
-  }, [timeFormat, is12HourClock]);
-  var getTimeString = useCallback(function (date) {
-    if (timeFormat) {
-      return dayjs(date).format(timeFormatByClockMode);
-    }
-    return formatValue(date, _extends({
-      targetFormat: 'time',
-      second: 'numeric'
-    }, valueFormatOptions));
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [timeFormat, timeFormatByClockMode, formatValue]);
-  var unitConfig = [{
+  const timeFormatByClockMode = useMemo(() => timeFormat ?? (is12HourClock ? "hh:mm:ss A" : "HH:mm:ss"), [timeFormat, is12HourClock]);
+  const getTimeString = useCallback(
+    (date) => {
+      if (timeFormat) {
+        return dayjs(date).format(timeFormatByClockMode);
+      }
+      return formatValue(date, {
+        targetFormat: "time",
+        second: "numeric",
+        ...valueFormatOptions
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [timeFormat, timeFormatByClockMode, formatValue]
+  );
+  const unitConfig = [{
     unit: HOUR,
     options: is12HourClock ? range(1, 13) : range(24),
     disabled: disabledHours,
@@ -91,30 +86,25 @@ var TimePicker = function TimePicker(_ref) {
     disabled: disabledSeconds,
     insertSeperator: is12HourClock
   }];
-  var availableUnits = units != null && units.length ? units : defaultUnits;
-  var unitsToRender = unitConfig.filter(function (u) {
-    return availableUnits && availableUnits.includes(u.unit);
-  });
-  var onVisibleChange = function onVisibleChange(visible) {
+  const availableUnits = units?.length ? units : defaultUnits;
+  const unitsToRender = unitConfig.filter((u) => availableUnits && availableUnits.includes(u.unit));
+  const onVisibleChange = (visible) => {
     setOpen(visible);
     !visible && onChange && onChange(value, getTimeString(value));
   };
-  var handleChange = function handleChange(unit, newValue, clockModeChanged) {
-    if (clockModeChanged === void 0) {
-      clockModeChanged = false;
-    }
-    var clockMode = getClockModeFromDate(value);
+  const handleChange = (unit, newValue, clockModeChanged = false) => {
+    let clockMode = getClockModeFromDate(value);
     if (clockModeChanged) {
       clockMode = getOppositeClockMode(clockMode);
     }
-    var newDate = handleTimeChange(value, unit, newValue, clockModeChanged, is12HourClock, clockMode, unitConfig);
+    const newDate = handleTimeChange(value, unit, newValue, clockModeChanged, is12HourClock, clockMode, unitConfig);
     onChange && onChange(newDate, getTimeString(newDate));
   };
-  var toggleClockModeChange = function toggleClockModeChange() {
-    handleChange(undefined, undefined, true);
+  const toggleClockModeChange = () => {
+    handleChange(void 0, void 0, true);
   };
-  var isAmOrPmModeDisabled = useCallback(function (mode) {
-    var clockMode = getClockModeFromDate(value);
+  const isAmOrPmModeDisabled = useCallback((mode) => {
+    const clockMode = getClockModeFromDate(value);
     if (!is12HourClock) {
       return false;
     }
@@ -124,102 +114,57 @@ var TimePicker = function TimePicker(_ref) {
     if (mode === PM && clockMode === PM) {
       return false;
     }
-    if (mode === AM && (disabledHours != null && disabledHours.includes(HOUR_12) || disabledHours != null && disabledHours.includes(DISABLE_CLOCK_MODE_HOUR))) {
+    if (mode === AM && (disabledHours?.includes(HOUR_12) || disabledHours?.includes(DISABLE_CLOCK_MODE_HOUR))) {
       return true;
     }
-    if (mode === PM && disabledHours != null && disabledHours.includes(DISABLE_CLOCK_MODE_HOUR)) {
+    if (mode === PM && disabledHours?.includes(DISABLE_CLOCK_MODE_HOUR)) {
       return true;
     }
     return false;
   }, [value, disabledHours, is12HourClock]);
-  var renderClockSwitch = function renderClockSwitch() {
-    var currentClockMode = getClockModeFromDate(value);
-    return /*#__PURE__*/React.createElement(S.Unit, null, Object.values(CLOCK_MODES).map(function (mode) {
-      return /*#__PURE__*/React.createElement(S.Cell, {
-        key: mode,
-        active: currentClockMode === mode,
-        onClick: function onClick() {
-          if (currentClockMode !== mode) {
-            toggleClockModeChange();
-            onClockModeChange && onClockModeChange(mode);
-          }
-        },
-        disabled: isAmOrPmModeDisabled(mode)
-      }, /*#__PURE__*/React.createElement(S.CellText, null, mode));
-    }));
+  const renderClockSwitch = () => {
+    const currentClockMode = getClockModeFromDate(value);
+    return /* @__PURE__ */ jsx(Unit$1, { children: Object.values(CLOCK_MODES).map((mode) => /* @__PURE__ */ jsx(Cell, { active: currentClockMode === mode, onClick: () => {
+      if (currentClockMode !== mode) {
+        toggleClockModeChange();
+        onClockModeChange && onClockModeChange(mode);
+      }
+    }, disabled: isAmOrPmModeDisabled(mode), children: /* @__PURE__ */ jsx(CellText, { children: mode }) }, mode)) });
   };
-  var overlay = /*#__PURE__*/React.createElement(S.OverlayContainer, {
-    "data-testid": "tp-overlay-container",
-    className: overlayClassName
-  }, unitsToRender.map(function (u, index) {
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: u.unit
-    }, /*#__PURE__*/React.createElement(Unit, _extends({}, u, {
-      value: value,
-      onSelect: function onSelect(newValue) {
-        return handleChange(u.unit, newValue);
-      },
-      use12HourClock: is12HourClock
-    })), (index !== unitsToRender.length - 1 || is12HourClock) && /*#__PURE__*/React.createElement(S.UnitSeperator, null));
-  }), is12HourClock && renderClockSwitch());
-  var localValue = value;
-  var dateString = localValue && getTimeString(localValue);
-  var clear = useCallback(function () {
+  const overlay = /* @__PURE__ */ jsxs(OverlayContainer, { "data-testid": "tp-overlay-container", className: overlayClassName, children: [
+    unitsToRender.map((u, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Unit, { ...u, value, onSelect: (newValue) => handleChange(u.unit, newValue), use12HourClock: is12HourClock }),
+      (index !== unitsToRender.length - 1 || is12HourClock) && /* @__PURE__ */ jsx(UnitSeperator, {})
+    ] }, u.unit)),
+    is12HourClock && renderClockSwitch()
+  ] });
+  const localValue = value;
+  const dateString = localValue && getTimeString(localValue);
+  const clear = useCallback(() => {
     setOpen(false);
-    onChange && onChange(undefined, '');
+    onChange && onChange(void 0, "");
   }, [setOpen, onChange]);
-  var timePickerIcon = useMemo(function () {
-    return (alwaysOpen || open) && dateString ? /*#__PURE__*/React.createElement(S.ClearIcon, {
-      component: /*#__PURE__*/React.createElement(Tooltip, {
-        title: clearTooltip
-      }, /*#__PURE__*/React.createElement(Close3S, null)),
-      onClick: clear
-    }) : /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(ClockM, null),
-      size: 24,
-      onClick: disabled ? undefined : function () {
-        return setOpen(true);
-      }
-    });
+  const timePickerIcon = useMemo(() => {
+    return (alwaysOpen || open) && dateString ? /* @__PURE__ */ jsx(ClearIcon, { component: /* @__PURE__ */ jsx(Tooltip, { title: clearTooltip, children: /* @__PURE__ */ jsx(Close3S, {}) }), onClick: clear }) : /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ClockM, {}), size: 24, onClick: disabled ? void 0 : () => setOpen(true) });
   }, [open, dateString, clear, clearTooltip, alwaysOpen, disabled]);
-  var placeholderValue = useMemo(function () {
+  const placeholderValue = useMemo(() => {
     if (value) {
       return getTimeString(value);
     }
     return placeholder || formatMessage({
-      id: 'DS.TIME-PICKER.PLACEHOLDER'
+      id: "DS.TIME-PICKER.PLACEHOLDER"
     });
   }, [placeholder, formatMessage, value, getTimeString]);
   if (raw) {
     return overlay;
   }
-  return /*#__PURE__*/React.createElement(S.Container, {
-    className: "ds-time-picker " + (className || ''),
-    "data-testid": "tp-container",
-    style: containerStyle
-  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
-    trigger: trigger,
-    open: alwaysOpen || open,
-    onOpenChange: onVisibleChange,
-    placement: placement,
-    overlay: overlay,
-    disabled: disabled,
-    asChild: true,
-    size: "match-trigger"
-  }, dropdownProps), /*#__PURE__*/React.createElement(S.TimePickerInput, _extends({
-    errorText: !open && errorText,
-    disabled: disabled,
-    className: "" + (alwaysOpen || open ? 'active' : ''),
-    "data-testid": "tp-input",
-    value: dateString,
-    placeholder: placeholderValue,
-    readOnly: true,
-    icon1: timePickerIcon
-  }, inputProps))));
+  return /* @__PURE__ */ jsx(Container, { className: `ds-time-picker ${className || ""}`, "data-testid": "tp-container", style: containerStyle, children: /* @__PURE__ */ jsx(DSDropdown, { trigger, open: alwaysOpen || open, onOpenChange: onVisibleChange, placement, overlay, disabled, asChild: true, size: "match-trigger", ...dropdownProps, children: /* @__PURE__ */ jsx(TimePickerInput, { errorText: !open && errorText, disabled, className: `${alwaysOpen || open ? "active" : ""}`, "data-testid": "tp-input", value: dateString, placeholder: placeholderValue, readOnly: true, icon1: timePickerIcon, ...inputProps }) }) });
 };
 TimePicker.defaultProps = {
-  placement: 'bottomLeft',
-  trigger: ['click'],
+  placement: "bottomLeft",
+  trigger: ["click"],
   units: defaultUnits
 };
-export default TimePicker;
+export {
+  TimePicker as default
+};

package/dist/TimePicker.styles.d.ts

@@ -1,8 +1,8 @@
-import { type ForwardRefExoticComponent } from 'react';
-import { type StyledComponent } from 'styled-components';
-import { type DropdownProps } from '@synerise/ds-dropdown';
-import { type StyledIcon } from '@synerise/ds-icon';
-import { type StyledInput } from '@synerise/ds-input';
+import { ForwardRefExoticComponent } from 'react';
+import { StyledComponent } from 'styled-components';
+import { DropdownProps } from '@synerise/ds-dropdown';
+import { StyledIcon } from '@synerise/ds-icon';
+import { StyledInput } from '@synerise/ds-input';
 export declare const Dropdown: StyledComponent<ForwardRefExoticComponent<DropdownProps>, object, object, never>;
 export declare const Container: StyledComponent<"div", any, {}, never>;
 export declare const OverlayContainer: StyledComponent<"div", any, {}, never>;

package/dist/TimePicker.styles.js

@@ -1,77 +1,69 @@
-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({
+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";
+const Dropdown = /* @__PURE__ */ styled(DSDropdown).withConfig({
   displayName: "TimePickerstyles__Dropdown",
   componentId: "sc-5k0z0v-0"
 })(["margin:0;"]);
-export var Container = styled.div.withConfig({
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TimePickerstyles__Container",
   componentId: "sc-5k0z0v-1"
 })(["min-width:104px;max-width:208px;width:inherit;position:relative;"]);
-export var OverlayContainer = styled.div.withConfig({
+const OverlayContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TimePickerstyles__OverlayContainer",
   componentId: "sc-5k0z0v-2"
-})(["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({
+})(["background-color:", ";border-radius:3px;display:flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;"], (props) => props.theme.palette.white);
+const Unit = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TimePickerstyles__Unit",
   componentId: "sc-5k0z0v-3"
 })(["display:flex;flex-direction:column;width:100%;overflow:hidden;.scrollbar-container{margin-right:-11px;}"]);
-export var UnitSeperator = styled.div.withConfig({
+const UnitSeperator = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TimePickerstyles__UnitSeperator",
   componentId: "sc-5k0z0v-4"
-})(["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({
+})(["width:1px;height:inherit;display:flex;flex-shrink:0;background-color:", ";"], (props) => props.theme.palette["grey-200"]);
+const CellText = /* @__PURE__ */ styled(Label).withConfig({
   displayName: "TimePickerstyles__CellText",
   componentId: "sc-5k0z0v-5"
-})(["&&{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({
+})(["&&{width:22px;height:18px;text-align:center;color:", ";transition:color 0.3s;}"], (props) => props.theme.palette["grey-600"]);
+const Cell = /* @__PURE__ */ styled.button.withConfig({
   displayName: "TimePickerstyles__Cell",
   componentId: "sc-5k0z0v-6"
-})(["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) {
-  return props.theme.palette['grey-050'];
-}, CellText, function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.active && "\n          background-color: " + props.theme.palette['blue-600'] + ";\n          opacity: 0.2;\n          " + CellText + CellText + " {\n            opacity: 1;\n            color: " + props.theme.palette.white + ";\n          }\n      ";
-}, CellText, function (props) {
-  return props.active && css(["&&{cursor:initial;background-color:", ";}", "", "{cursor:initial;color:", ";}"], props.theme.palette['blue-600'], CellText, CellText, props.theme.palette.white);
-});
-export var ClearIcon = styled(Icon).withConfig({
+})(["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;}}", ";"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-050"], CellText, (props) => props.theme.palette["blue-600"], (props) => props.theme.palette.white, (props) => props.active && `
+          background-color: ${props.theme.palette["blue-600"]};
+          opacity: 0.2;
+          ${CellText}${CellText} {
+            opacity: 1;
+            color: ${props.theme.palette.white};
+          }
+      `, CellText, (props) => props.active && css(["&&{cursor:initial;background-color:", ";}", "", "{cursor:initial;color:", ";}"], props.theme.palette["blue-600"], CellText, CellText, props.theme.palette.white));
+const ClearIcon = /* @__PURE__ */ styled(Icon).withConfig({
   displayName: "TimePickerstyles__ClearIcon",
   componentId: "sc-5k0z0v-7"
-})(["&&,&&: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({
+})(["&&,&&:hover{svg{color:", ";fill:", ";}}"], (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-600"]);
+const TimePickerInput = /* @__PURE__ */ styled(Input).withConfig({
   displayName: "TimePickerstyles__TimePickerInput",
   componentId: "sc-5k0z0v-8"
-})(["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({
+})(["margin-bottom:0;&:not(.active){input{&:focus{box-shadow:none;background-color:", ";border-color:", ";}}}"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-300"]);
+const PlaceholderWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TimePickerstyles__PlaceholderWrapper",
   componentId: "sc-5k0z0v-9"
 })(["width:100%;position:relative;"]);
-export var Placeholder = styled.div.withConfig({
+const Placeholder = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TimePickerstyles__Placeholder",
   componentId: "sc-5k0z0v-10"
-})(["height:", "px;"], function (props) {
-  return props.height;
-});
+})(["height:", "px;"], (props) => props.height);
+export {
+  Cell,
+  CellText,
+  ClearIcon,
+  Container,
+  Dropdown,
+  OverlayContainer,
+  Placeholder,
+  PlaceholderWrapper,
+  TimePickerInput,
+  Unit,
+  UnitSeperator
+};

package/dist/Unit.d.ts

@@ -1,5 +1,5 @@
-import type dayjs from 'dayjs';
-import React from 'react';
+import { default as dayjs } from 'dayjs';
+import { default as React } from 'react';
 export type UnitConfig = {
     unit: dayjs.UnitType;
     options: number[];

package/dist/Unit.js

@@ -1,32 +1,26 @@
-import { debounce } from 'debounce';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import Scrollbar from '@synerise/ds-scrollbar';
-import * as S from './TimePicker.styles';
-import { getUnitSelectedNumber } from './utils/unit.utils';
-var CELL_HEIGHT = 32;
-var DEBOUNCE_DELAY = 150;
-var Unit = function Unit(_ref) {
-  var options = _ref.options,
-    disabled = _ref.disabled,
-    value = _ref.value,
-    unit = _ref.unit,
-    onSelect = _ref.onSelect,
-    use12HourClock = _ref.use12HourClock;
-  var selected = useMemo(function () {
-    return getUnitSelectedNumber(value, unit, use12HourClock);
-  }, [unit, use12HourClock, value]);
-  var _useState = useState(false),
-    forceUpdate = _useState[0],
-    setForceUpdate = _useState[1];
-  var selectedCellRef = useRef(null);
-  var unitContainerRef = useRef(null);
-  var _useState2 = useState(300),
-    containerHeight = _useState2[0],
-    setContainerHeight = _useState2[1];
-  var _useState3 = useState(true),
-    isFirstRender = _useState3[0],
-    setFirstRender = _useState3[1];
-  useEffect(function () {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { debounce } from "debounce";
+import { useMemo, useState, useRef, useEffect } from "react";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { Unit as Unit$1, Cell, CellText, PlaceholderWrapper, Placeholder } from "./TimePicker.styles.js";
+import { getUnitSelectedNumber } from "./utils/unit.utils.js";
+const CELL_HEIGHT = 32;
+const DEBOUNCE_DELAY = 150;
+const Unit = ({
+  options,
+  disabled,
+  value,
+  unit,
+  onSelect,
+  use12HourClock
+}) => {
+  const selected = useMemo(() => getUnitSelectedNumber(value, unit, use12HourClock), [unit, use12HourClock, value]);
+  const [forceUpdate, setForceUpdate] = useState(false);
+  const selectedCellRef = useRef(null);
+  const unitContainerRef = useRef(null);
+  const [containerHeight, setContainerHeight] = useState(300);
+  const [isFirstRender, setFirstRender] = useState(true);
+  useEffect(() => {
     if (isFirstRender) {
       setFirstRender(false);
       if (unitContainerRef.current) {
@@ -34,27 +28,27 @@ var Unit = function Unit(_ref) {
       }
     }
   }, [isFirstRender, unitContainerRef]);
-  var scrollHandler = function scrollHandler() {
+  const scrollHandler = () => {
     if (!!unitContainerRef && !!unitContainerRef.current) {
-      var pixelsScrolled = unitContainerRef.current.scrollTop;
-      var isScrollBetweenTwoCells = pixelsScrolled % CELL_HEIGHT !== 0;
-      pixelsScrolled !== 0 && isScrollBetweenTwoCells && typeof unitContainerRef.current.scrollTo === 'function' && unitContainerRef.current.scrollTo({
+      const pixelsScrolled = unitContainerRef.current.scrollTop;
+      const isScrollBetweenTwoCells = pixelsScrolled % CELL_HEIGHT !== 0;
+      pixelsScrolled !== 0 && isScrollBetweenTwoCells && typeof unitContainerRef.current.scrollTo === "function" && unitContainerRef.current.scrollTo({
         top: Math.round(pixelsScrolled / CELL_HEIGHT) * CELL_HEIGHT,
-        behavior: 'smooth'
+        behavior: "smooth"
       });
     }
   };
-  var debouncedScrollHandler = debounce(scrollHandler, DEBOUNCE_DELAY);
-  useEffect(function () {
-    return function () {
+  const debouncedScrollHandler = debounce(scrollHandler, DEBOUNCE_DELAY);
+  useEffect(() => {
+    return () => {
       debouncedScrollHandler.clear();
     };
   }, [debouncedScrollHandler]);
-  useEffect(function () {
+  useEffect(() => {
     if (selectedCellRef.current && unitContainerRef.current) {
-      var offsetToParent = selectedCellRef.current.offsetTop - unitContainerRef.current.offsetTop;
-      var scrollBehaviour = isFirstRender || !containerHeight ? 'auto' : 'smooth';
-      if (typeof unitContainerRef.current.scrollTo === 'function') {
+      const offsetToParent = selectedCellRef.current.offsetTop - unitContainerRef.current.offsetTop;
+      const scrollBehaviour = isFirstRender || !containerHeight ? "auto" : "smooth";
+      if (typeof unitContainerRef.current.scrollTo === "function") {
         unitContainerRef.current.scrollTo({
           top: offsetToParent,
           behavior: scrollBehaviour
@@ -63,32 +57,21 @@ var Unit = function Unit(_ref) {
       setContainerHeight(unitContainerRef.current.offsetHeight);
     }
   }, [selectedCellRef, unitContainerRef, isFirstRender, forceUpdate, containerHeight]);
-  return /*#__PURE__*/React.createElement(S.Unit, {
-    "data-testid": "ds-time-picker-unit-" + unit
-  }, /*#__PURE__*/React.createElement(Scrollbar, {
-    confineScroll: true,
-    ref: unitContainerRef,
-    onScroll: debouncedScrollHandler,
-    maxHeight: 192
-  }, options.map(function (option) {
-    var normalizedStringValue = option < 10 ? "0" + option : option.toString();
-    var isDisabled = disabled && disabled.includes(option);
-    var isSelected = selected === option;
-    return /*#__PURE__*/React.createElement(S.Cell, {
-      key: unit + "-" + option,
-      disabled: isDisabled,
-      onClick: function onClick() {
+  return /* @__PURE__ */ jsx(Unit$1, { "data-testid": `ds-time-picker-unit-${unit}`, children: /* @__PURE__ */ jsxs(Scrollbar, { confineScroll: true, ref: unitContainerRef, onScroll: debouncedScrollHandler, maxHeight: 192, children: [
+    options.map((option) => {
+      const normalizedStringValue = option < 10 ? `0${option}` : option.toString();
+      const isDisabled = disabled && disabled.includes(option);
+      const isSelected = selected === option;
+      return /* @__PURE__ */ jsx(Cell, { disabled: isDisabled, onClick: () => {
         onSelect(option);
-        setTimeout(function () {
-          // timeout is required to make sure that the ref is updated
+        setTimeout(() => {
           setForceUpdate(!forceUpdate);
         }, 50);
-      },
-      active: isSelected,
-      ref: isSelected ? selectedCellRef : null
-    }, /*#__PURE__*/React.createElement(S.CellText, null, normalizedStringValue));
-  }), !!containerHeight && /*#__PURE__*/React.createElement(S.PlaceholderWrapper, null, /*#__PURE__*/React.createElement(S.Placeholder, {
-    height: containerHeight - CELL_HEIGHT
-  }))));
+      }, active: isSelected, ref: isSelected ? selectedCellRef : null, children: /* @__PURE__ */ jsx(CellText, { children: normalizedStringValue }) }, `${unit}-${option}`);
+    }),
+    !!containerHeight && /* @__PURE__ */ jsx(PlaceholderWrapper, { children: /* @__PURE__ */ jsx(Placeholder, { height: containerHeight - CELL_HEIGHT }) })
+  ] }) });
+};
+export {
+  Unit as default
 };
-export default Unit;

package/dist/constants/timePicker.constants.d.ts

@@ -1,5 +1,5 @@
-import type dayjs from 'dayjs';
-import { type ClockModes } from '../types/TimePicker.types';
+import { default as dayjs } from 'dayjs';
+import { ClockModes } from '../types/TimePicker.types';
 export declare const HOUR: dayjs.UnitType;
 export declare const MINUTE: dayjs.UnitType;
 export declare const SECOND: dayjs.UnitType;

package/dist/constants/timePicker.constants.js

@@ -1,12 +1,12 @@
-export var HOUR = 'hour';
-export var MINUTE = 'minute';
-export var SECOND = 'second';
-export var CLOCK_MODES = ['AM', 'PM'];
-export var PM = 'PM';
-export var AM = 'AM';
-export var HOUR_12 = 12;
-export var DISABLE_CLOCK_MODE_HOUR = -1;
-export var MAP_12_AM_TO_24_HOUR = {
+const HOUR = "hour";
+const MINUTE = "minute";
+const SECOND = "second";
+const CLOCK_MODES = ["AM", "PM"];
+const PM = "PM";
+const AM = "AM";
+const HOUR_12 = 12;
+const DISABLE_CLOCK_MODE_HOUR = -1;
+const MAP_12_AM_TO_24_HOUR = {
   0: 12,
   1: 1,
   2: 2,
@@ -33,7 +33,7 @@ export var MAP_12_AM_TO_24_HOUR = {
   23: 11,
   24: 0
 };
-export var MAP_12_PM_TO_24_HOUR = {
+const MAP_12_PM_TO_24_HOUR = {
   0: 12,
   1: 13,
   2: 14,
@@ -60,7 +60,7 @@ export var MAP_12_PM_TO_24_HOUR = {
   23: 23,
   24: 24
 };
-export var MAP_24_HOUR_TO_12 = {
+const MAP_24_HOUR_TO_12 = {
   0: 12,
   1: 1,
   2: 2,
@@ -86,4 +86,17 @@ export var MAP_24_HOUR_TO_12 = {
   22: 10,
   23: 11,
   24: 12
-};
+};
+export {
+  AM,
+  CLOCK_MODES,
+  DISABLE_CLOCK_MODE_HOUR,
+  HOUR,
+  HOUR_12,
+  MAP_12_AM_TO_24_HOUR,
+  MAP_12_PM_TO_24_HOUR,
+  MAP_24_HOUR_TO_12,
+  MINUTE,
+  PM,
+  SECOND
+};

package/dist/constants/timePicker.spec.constants.d.ts

@@ -0,0 +1,17 @@
+export declare const TEST_CASES_FOR_12_HOUR_CLOCK: {
+    '00:00:00': string;
+    '00:11:22': string;
+    '01:00:00': string;
+    '02:00:00': string;
+    '10:00:00': string;
+    '11:00:00': string;
+    '11:59:59': string;
+    '12:00:00': string;
+    '12:11:22': string;
+    '13:00:00': string;
+    '14:00:00': string;
+    '22:00:00': string;
+    '23:00:00': string;
+    '23:59:59': string;
+    '24:00:00': string;
+};

package/dist/constants/timePicker.spec.constants.js

@@ -0,0 +1,20 @@
+const TEST_CASES_FOR_12_HOUR_CLOCK = {
+  "00:00:00": "12:00:00 AM",
+  "00:11:22": "12:11:22 AM",
+  "01:00:00": "1:00:00 AM",
+  "02:00:00": "2:00:00 AM",
+  "10:00:00": "10:00:00 AM",
+  "11:00:00": "11:00:00 AM",
+  "11:59:59": "11:59:59 AM",
+  "12:00:00": "12:00:00 PM",
+  "12:11:22": "12:11:22 PM",
+  "13:00:00": "1:00:00 PM",
+  "14:00:00": "2:00:00 PM",
+  "22:00:00": "10:00:00 PM",
+  "23:00:00": "11:00:00 PM",
+  "23:59:59": "11:59:59 PM",
+  "24:00:00": "12:00:00 AM"
+};
+export {
+  TEST_CASES_FOR_12_HOUR_CLOCK
+};

package/dist/index.js

@@ -1,2 +1,14 @@
-export { default } from './TimePicker';
-export { AM, PM, HOUR_12, HOUR, CLOCK_MODES, MAP_12_AM_TO_24_HOUR, MAP_12_PM_TO_24_HOUR, MAP_24_HOUR_TO_12, DISABLE_CLOCK_MODE_HOUR } from './constants/timePicker.constants';
+import { default as default2 } from "./TimePicker.js";
+import { AM, CLOCK_MODES, DISABLE_CLOCK_MODE_HOUR, HOUR, HOUR_12, MAP_12_AM_TO_24_HOUR, MAP_12_PM_TO_24_HOUR, MAP_24_HOUR_TO_12, PM } from "./constants/timePicker.constants.js";
+export {
+  AM,
+  CLOCK_MODES,
+  DISABLE_CLOCK_MODE_HOUR,
+  HOUR,
+  HOUR_12,
+  MAP_12_AM_TO_24_HOUR,
+  MAP_12_PM_TO_24_HOUR,
+  MAP_24_HOUR_TO_12,
+  PM,
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

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

@@ -1,9 +1,9 @@
-import type dayjs from 'dayjs';
-import type { CSSProperties, ReactNode } from 'react';
-import type { DateToFormatOptions } from '@synerise/ds-core';
-import type { DropdownSharedProps } from '@synerise/ds-dropdown';
-import type { InputProps } from '@synerise/ds-input';
-import { type PopoverTriggerType } from '@synerise/ds-popover';
+import { default as dayjs } from 'dayjs';
+import { CSSProperties, ReactNode } from 'react';
+import { DateToFormatOptions } from '@synerise/ds-core';
+import { DropdownSharedProps } from '@synerise/ds-dropdown';
+import { InputProps } from '@synerise/ds-input';
+import { PopoverTriggerType } from '@synerise/ds-popover';
 export type ClockModes = 'AM' | 'PM';
 export type TimePickerDisabledUnits = {
     disabledSeconds?: number[];

package/dist/types/TimePicker.types.js

@@ -1 +1 @@
-export {};
+

package/dist/utils/clockMode.utils.js

@@ -1,10 +1,14 @@
-import dayjs from 'dayjs';
-import { AM, HOUR, HOUR_12, PM } from '../constants/timePicker.constants';
-export var getClockModeFromDate = function getClockModeFromDate(date) {
-  var initialDate = dayjs(date);
-  var initialHour = initialDate.get(HOUR);
+import dayjs from "dayjs";
+import { HOUR, PM, AM, HOUR_12 } from "../constants/timePicker.constants.js";
+const getClockModeFromDate = (date) => {
+  const initialDate = dayjs(date);
+  const initialHour = initialDate.get(HOUR);
   return initialHour >= HOUR_12 ? PM : AM;
 };
-export var getOppositeClockMode = function getOppositeClockMode(clockMode) {
+const getOppositeClockMode = (clockMode) => {
   return clockMode === PM ? AM : PM;
-};
+};
+export {
+  getClockModeFromDate,
+  getOppositeClockMode
+};

package/dist/utils/timePicker.utils.d.ts

@@ -1,3 +1,3 @@
-import dayjs from 'dayjs';
-import { type UnitConfig } from '../Unit';
+import { default as dayjs } from 'dayjs';
+import { UnitConfig } from '../Unit';
 export declare const handleTimeChange: (value: Date | undefined, unit: dayjs.UnitType | undefined, newValue: number | undefined, clockModeChanged: boolean | undefined, use12HourClock: boolean | undefined, clockMode: string, unitConfig: UnitConfig[]) => Date;

package/dist/utils/timePicker.utils.js

@@ -1,16 +1,12 @@
-import dayjs from 'dayjs';
-import { AM, HOUR, HOUR_12, MAP_12_AM_TO_24_HOUR, MAP_12_PM_TO_24_HOUR, PM } from '../constants/timePicker.constants';
-export var handleTimeChange = function handleTimeChange(value, unit, newValue, clockModeChanged, use12HourClock, clockMode, unitConfig) {
-  if (clockModeChanged === void 0) {
-    clockModeChanged = false;
-  }
-  var wasUndefined = value === undefined;
-  var dateBuilder = dayjs(value);
+import dayjs from "dayjs";
+import { HOUR, MAP_12_AM_TO_24_HOUR, MAP_12_PM_TO_24_HOUR, AM, PM, HOUR_12 } from "../constants/timePicker.constants.js";
+const handleTimeChange = (value, unit, newValue, clockModeChanged = false, use12HourClock, clockMode, unitConfig) => {
+  const wasUndefined = value === void 0;
+  let dateBuilder = dayjs(value);
   if (unit) {
-    // @ts-expect-error - `unit` const maps to dayjs method
     dateBuilder = dateBuilder[unit](newValue);
   }
-  var hourToMap = dateBuilder.get(HOUR);
+  let hourToMap = dateBuilder.get(HOUR);
   if (use12HourClock) {
     hourToMap = clockMode === AM ? MAP_12_AM_TO_24_HOUR[hourToMap] : MAP_12_PM_TO_24_HOUR[hourToMap];
     if (unit === HOUR || clockModeChanged) {
@@ -18,17 +14,16 @@ export var handleTimeChange = function handleTimeChange(value, unit, newValue, c
     }
   }
   if (wasUndefined) {
-    // set remaining time fields to 0, HH:00:00, 00:mm:00, 00:00:ss
-    unitConfig.filter(function (unitDefinition) {
-      return unitDefinition.unit !== unit;
-    }).forEach(
-    // @ts-expect-error - `unit` const maps to dayjs method
-    function (unitDefinition) {
-      return dateBuilder = dateBuilder[unitDefinition.unit](0);
-    });
+    unitConfig.filter((unitDefinition) => unitDefinition.unit !== unit).forEach(
+      // @ts-expect-error - `unit` const maps to dayjs method
+      (unitDefinition) => dateBuilder = dateBuilder[unitDefinition.unit](0)
+    );
     if (use12HourClock && clockMode === PM && unit !== HOUR) {
       dateBuilder = dateBuilder.set(HOUR, HOUR_12);
     }
   }
   return dateBuilder.toDate();
-};
+};
+export {
+  handleTimeChange
+};

package/dist/utils/unit.utils.d.ts

@@ -1,2 +1,2 @@
-import dayjs from 'dayjs';
+import { default as dayjs } from 'dayjs';
 export declare const getUnitSelectedNumber: (value: Date | undefined, unit: dayjs.UnitType, use12HourClock: boolean | undefined) => number | undefined;

package/dist/utils/unit.utils.js

@@ -1,10 +1,10 @@
-import dayjs from 'dayjs';
-import { HOUR, HOUR_12, MAP_24_HOUR_TO_12 } from '../constants/timePicker.constants';
-export var getUnitSelectedNumber = function getUnitSelectedNumber(value, unit, use12HourClock) {
-  if (value === undefined) {
-    return undefined;
+import dayjs from "dayjs";
+import { HOUR, MAP_24_HOUR_TO_12, HOUR_12 } from "../constants/timePicker.constants.js";
+const getUnitSelectedNumber = (value, unit, use12HourClock) => {
+  if (value === void 0) {
+    return void 0;
   }
-  var result = value && dayjs(value).get(unit);
+  let result = value && dayjs(value).get(unit);
   if (unit === HOUR && use12HourClock) {
     if (!result) {
       result = HOUR_12;
@@ -12,4 +12,7 @@ export var getUnitSelectedNumber = function getUnitSelectedNumber(value, unit, u
     result = MAP_24_HOUR_TO_12[result];
   }
   return result;
-};
+};
+export {
+  getUnitSelectedNumber
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "1.2.23",
+  "version": "1.2.25",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx' --ignore '**/*.spec.ts' --ignore '**/*.spec.tsx' --ignore '**/*.spec.constants.ts' --ignore '**/*.spec.constants.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,13 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-dropdown": "^1.3.1",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-input": "^1.6.9",
-    "@synerise/ds-popover": "^1.5.2",
-    "@synerise/ds-scrollbar": "^1.2.16",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-typography": "^1.1.12",
+    "@synerise/ds-dropdown": "^1.3.3",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-input": "^1.6.11",
+    "@synerise/ds-popover": "^1.5.3",
+    "@synerise/ds-scrollbar": "^1.2.18",
+    "@synerise/ds-tooltip": "^1.4.11",
+    "@synerise/ds-typography": "^1.1.14",
     "dayjs": "^1.8.19",
     "debounce": "^1.2.0",
     "lodash.range": "^3.2.0"
@@ -56,5 +56,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }