@synerise/ds-time-picker 0.9.19 → 0.10.1

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.
 
+## [0.10.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.10.0...@synerise/ds-time-picker@0.10.1) (2024-04-02)
+
+**Note:** Version bump only for package @synerise/ds-time-picker
+
+
+
+
+
+# [0.10.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.9.19...@synerise/ds-time-picker@0.10.0) (2024-03-29)
+
+
+### Features
+
+* **scrollbar:** added prop to control wheel event bubbling ([ef0b8e9](https://github.com/Synerise/synerise-design/commit/ef0b8e939a5293b62b99f01553b6d78350957360))
+
+
+
+
+
 ## [0.9.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.9.18...@synerise/ds-time-picker@0.9.19) (2024-03-20)
 
 **Note:** Version bump only for package @synerise/ds-time-picker

package/dist/TimePicker.d.ts

@@ -1,8 +1,11 @@
-import * as React from 'react';
+import dayjs from 'dayjs';
 import { TimePickerProps } from './types/TimePicker.types';
-declare const _default: React.ForwardRefExoticComponent<import("react-intl").Omit<TimePickerProps, "intl"> & {
-    forwardedRef?: React.Ref<any> | undefined;
-} & React.RefAttributes<any>> & {
-    WrappedComponent: React.ComponentType<TimePickerProps>;
+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): JSX.Element;
+    defaultProps: {
+        placement: string;
+        trigger: string[];
+        units: dayjs.UnitType[];
+    };
 };
-export default _default;
+export default TimePicker;

package/dist/TimePicker.js

@@ -6,9 +6,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import * as React from 'react';
-import { useCallback } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { range } from 'lodash';
 import dayjs from 'dayjs';
 import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
@@ -54,25 +53,27 @@ var TimePicker = function TimePicker(_ref) {
   }) : _ref$clearTooltip,
       raw = _ref.raw,
       onClockModeChange = _ref.onClockModeChange,
-      intl = _ref.intl,
       errorText = _ref.errorText;
 
   var _useDataFormat = useDataFormat(),
       formatValue = _useDataFormat.formatValue,
       is12HoursClockFromDataFormat = _useDataFormat.is12HoursClock;
 
-  var _React$useState = React.useState(defaultOpen || false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+  var _useState = useState(defaultOpen || false),
+      open = _useState[0],
+      setOpen = _useState[1];
 
-  var is12HourClock = React.useMemo(function () {
+  var _useIntl = useIntl(),
+      formatMessage = _useIntl.formatMessage;
+
+  var is12HourClock = useMemo(function () {
     if (use12HourClock === undefined) return is12HoursClockFromDataFormat;
     return use12HourClock;
   }, [is12HoursClockFromDataFormat, use12HourClock]);
-  var timeFormatByClockMode = React.useMemo(function () {
+  var timeFormatByClockMode = useMemo(function () {
     return timeFormat != null ? timeFormat : is12HourClock ? 'hh:mm:ss A' : 'HH:mm:ss';
   }, [timeFormat, is12HourClock]);
-  var getTimeString = React.useCallback(function (date) {
+  var getTimeString = useCallback(function (date) {
     if (timeFormat) {
       return dayjs(date).format(timeFormatByClockMode);
     }
@@ -175,7 +176,7 @@ var TimePicker = function TimePicker(_ref) {
     "data-testid": "tp-overlay-container",
     className: overlayClassName
   }, unitsToRender.map(function (u, index) {
-    return /*#__PURE__*/React.createElement(React.Fragment, {
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: u.unit
     }, /*#__PURE__*/React.createElement(Unit, _extends({}, u, {
       value: value,
@@ -187,11 +188,11 @@ var TimePicker = function TimePicker(_ref) {
   }), is12HourClock && renderClockSwitch());
   var localValue = value;
   var dateString = localValue && getTimeString(localValue);
-  var clear = React.useCallback(function () {
+  var clear = useCallback(function () {
     setOpen(false);
     onChange && onChange(undefined, '');
   }, [setOpen, onChange]);
-  var timePickerIcon = React.useMemo(function () {
+  var timePickerIcon = useMemo(function () {
     return (alwaysOpen || open) && dateString ? /*#__PURE__*/React.createElement(S.ClearIcon, {
       component: /*#__PURE__*/React.createElement(Tooltip, {
         title: clearTooltip
@@ -205,15 +206,15 @@ var TimePicker = function TimePicker(_ref) {
       }
     });
   }, [open, dateString, clear, clearTooltip, alwaysOpen, disabled]);
-  var placeholderValue = React.useMemo(function () {
+  var placeholderValue = useMemo(function () {
     if (value) {
       return getTimeString(value);
     }
 
-    return placeholder || intl.formatMessage({
+    return placeholder || formatMessage({
       id: 'DS.TIME-PICKER.PLACEHOLDER'
     });
-  }, [placeholder, intl, value, getTimeString]);
+  }, [placeholder, formatMessage, value, getTimeString]);
 
   if (raw) {
     return overlay;
@@ -247,4 +248,4 @@ TimePicker.defaultProps = {
   trigger: ['click'],
   units: defaultUnits
 };
-export default injectIntl(TimePicker);
+export default TimePicker;

package/dist/Unit.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useRef, useMemo, useState, useEffect } from 'react';
 import { debounce } from 'debounce';
 import Scrollbar from '@synerise/ds-scrollbar';
 import * as S from './TimePicker.styles';
@@ -13,26 +13,26 @@ var Unit = function Unit(_ref) {
       unit = _ref.unit,
       onSelect = _ref.onSelect,
       use12HourClock = _ref.use12HourClock;
-  var selected = React.useMemo(function () {
+  var selected = useMemo(function () {
     return getUnitSelectedNumber(value, unit, use12HourClock);
   }, [unit, use12HourClock, value]);
 
-  var _React$useState = React.useState(false),
-      forceUpdate = _React$useState[0],
-      setForceUpdate = _React$useState[1];
+  var _useState = useState(false),
+      forceUpdate = _useState[0],
+      setForceUpdate = _useState[1];
 
-  var selectedCellRef = React.useRef(null);
-  var unitContainerRef = React.useRef(null);
+  var selectedCellRef = useRef(null);
+  var unitContainerRef = useRef(null);
 
-  var _React$useState2 = React.useState(300),
-      containerHeight = _React$useState2[0],
-      setContainerHeight = _React$useState2[1];
+  var _useState2 = useState(300),
+      containerHeight = _useState2[0],
+      setContainerHeight = _useState2[1];
 
-  var _React$useState3 = React.useState(true),
-      isFirstRender = _React$useState3[0],
-      setFirstRender = _React$useState3[1];
+  var _useState3 = useState(true),
+      isFirstRender = _useState3[0],
+      setFirstRender = _useState3[1];
 
-  React.useEffect(function () {
+  useEffect(function () {
     if (isFirstRender) {
       setFirstRender(false);
 
@@ -54,12 +54,12 @@ var Unit = function Unit(_ref) {
   };
 
   var debouncedScrollHandler = debounce(scrollHandler, DEBOUNCE_DELAY);
-  React.useEffect(function () {
+  useEffect(function () {
     return function () {
       debouncedScrollHandler.clear();
     };
   }, [debouncedScrollHandler]);
-  React.useEffect(function () {
+  useEffect(function () {
     if (selectedCellRef.current && unitContainerRef.current) {
       var offsetToParent = selectedCellRef.current.offsetTop - unitContainerRef.current.offsetTop;
       var scrollBehaviour = isFirstRender || !containerHeight ? 'auto' : 'smooth';
@@ -77,6 +77,7 @@ var Unit = function Unit(_ref) {
   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

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

@@ -1,6 +1,5 @@
 import { ReactNode, CSSProperties } from 'react';
 import dayjs from 'dayjs';
-import { IntlShape } from 'react-intl';
 import { InputProps } from 'antd/es/input/Input';
 import { DropdownProps } from '@synerise/ds-dropdown/dist/Dropdown';
 import { DateToFormatOptions } from '@synerise/ds-data-format';
@@ -20,7 +19,6 @@ export type TimePickerProps = TimePickerDisabledUnits & {
     disabled?: boolean;
     dropdownProps?: Partial<DropdownProps>;
     inputProps?: Partial<InputProps>;
-    intl: IntlShape;
     onChange?: (value: Date | undefined, timeString: string) => void;
     onClockModeChange?: (mode: string) => void;
     overlayClassName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "0.9.19",
+  "version": "0.10.1",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,13 +34,13 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-data-format": "^0.4.8",
-    "@synerise/ds-dropdown": "^0.17.101",
-    "@synerise/ds-icon": "^0.60.4",
-    "@synerise/ds-input": "^0.20.2",
-    "@synerise/ds-scrollbar": "^0.9.0",
-    "@synerise/ds-tooltip": "^0.14.21",
+    "@synerise/ds-dropdown": "^0.17.103",
+    "@synerise/ds-icon": "^0.60.6",
+    "@synerise/ds-input": "^0.20.4",
+    "@synerise/ds-scrollbar": "^0.10.1",
+    "@synerise/ds-tooltip": "^0.14.23",
     "@synerise/ds-typography": "^0.14.3",
-    "@synerise/ds-utils": "^0.26.0",
+    "@synerise/ds-utils": "^0.26.2",
     "dayjs": "^1.8.19",
     "debounce": "^1.2.0",
     "lodash": "^4.17.19",
@@ -55,5 +55,5 @@
     "@testing-library/react": "10.0.1",
     "@types/debounce": "^1.2.1"
   },
-  "gitHead": "2df913352aa96e8aed75894489afb3a4ee303370"
+  "gitHead": "67108cb227db0024b189fa289840cfb5a5d0de8c"
 }