@synerise/ds-time-picker 0.8.11 → 0.9.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.
 
+# [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.8.11...@synerise/ds-time-picker@0.9.0) (2023-10-17)
+
+
+### Features
+
+* **date-range-picker:** display errors in daily / weekly / monthly scheduler ([1bc8695](https://github.com/Synerise/synerise-design/commit/1bc8695af46628b30492fb247a2ddbe5785711b0))
+
+
+
+
+
 ## [0.8.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-time-picker@0.8.10...@synerise/ds-time-picker@0.8.11) (2023-10-11)
 
 **Note:** Version bump only for package @synerise/ds-time-picker

package/dist/TimePicker.js

@@ -13,7 +13,6 @@ import { range } from 'lodash';
 import dayjs from 'dayjs';
 import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
 import Icon, { ClockM, Close3S } from '@synerise/ds-icon';
-import Dropdown from '@synerise/ds-dropdown';
 import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
 import { useDataFormat } from '@synerise/ds-data-format';
 import Unit from './Unit';
@@ -55,7 +54,8 @@ var TimePicker = function TimePicker(_ref) {
   }) : _ref$clearTooltip,
       raw = _ref.raw,
       onClockModeChange = _ref.onClockModeChange,
-      intl = _ref.intl;
+      intl = _ref.intl,
+      errorText = _ref.errorText;
 
   var _useDataFormat = useDataFormat(),
       formatValue = _useDataFormat.formatValue,
@@ -223,7 +223,7 @@ var TimePicker = function TimePicker(_ref) {
     className: "ds-time-picker " + (className || ''),
     "data-testid": "tp-container",
     style: containerStyle
-  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
+  }, /*#__PURE__*/React.createElement(S.Dropdown, _extends({
     trigger: trigger,
     visible: alwaysOpen || open,
     onVisibleChange: onVisibleChange,
@@ -231,6 +231,7 @@ var TimePicker = function TimePicker(_ref) {
     overlay: overlay,
     disabled: disabled
   }, dropdownProps), /*#__PURE__*/React.createElement(S.TimePickerInput, _extends({
+    errorText: !open && errorText,
     disabled: disabled,
     className: "" + (alwaysOpen || open ? 'active' : ''),
     "data-testid": "tp-input",

package/dist/TimePicker.styles.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
+import DSDropdown from '@synerise/ds-dropdown';
+export declare const Dropdown: import("styled-components").StyledComponent<typeof DSDropdown, any, {
+    children?: ReactNode;
+}, never>;
 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>;

package/dist/TimePicker.styles.js

@@ -2,35 +2,40 @@ import styled, { css } from 'styled-components';
 import { Label } from '@synerise/ds-typography';
 import Icon from '@synerise/ds-icon';
 import { Input } from '@synerise/ds-input';
+import DSDropdown from '@synerise/ds-dropdown';
+export var Dropdown = styled(DSDropdown).withConfig({
+  displayName: "TimePickerstyles__Dropdown",
+  componentId: "yk19n0-0"
+})(["margin:0;"]);
 export var Container = styled.div.withConfig({
   displayName: "TimePickerstyles__Container",
-  componentId: "yk19n0-0"
-})(["min-width:104px;max-width:208px;width:inherit;height:32px;position:relative;"]);
+  componentId: "yk19n0-1"
+})(["min-width:104px;max-width:208px;width:inherit;position:relative;"]);
 export var OverlayContainer = styled.div.withConfig({
   displayName: "TimePickerstyles__OverlayContainer",
-  componentId: "yk19n0-1"
+  componentId: "yk19n0-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({
   displayName: "TimePickerstyles__Unit",
-  componentId: "yk19n0-2"
+  componentId: "yk19n0-3"
 })(["display:flex;flex-direction:column;width:100%;overflow:hidden;.scrollbar-container{margin-right:-11px;}"]);
 export var UnitSeperator = styled.div.withConfig({
   displayName: "TimePickerstyles__UnitSeperator",
-  componentId: "yk19n0-3"
+  componentId: "yk19n0-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({
   displayName: "TimePickerstyles__CellText",
-  componentId: "yk19n0-4"
+  componentId: "yk19n0-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({
   displayName: "TimePickerstyles__Cell",
-  componentId: "yk19n0-5"
+  componentId: "yk19n0-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) {
@@ -44,7 +49,7 @@ export var Cell = styled.button.withConfig({
 });
 export var ClearIcon = styled(Icon).withConfig({
   displayName: "TimePickerstyles__ClearIcon",
-  componentId: "yk19n0-6"
+  componentId: "yk19n0-7"
 })(["&&,&&:hover{svg{color:", ";fill:", ";}}"], function (props) {
   return props.theme.palette['red-600'];
 }, function (props) {
@@ -52,7 +57,7 @@ export var ClearIcon = styled(Icon).withConfig({
 });
 export var TimePickerInput = styled(Input).withConfig({
   displayName: "TimePickerstyles__TimePickerInput",
-  componentId: "yk19n0-7"
+  componentId: "yk19n0-8"
 })(["&:not(.active){input{&:focus{box-shadow:none;background-color:", ";border-color:", ";}}}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
@@ -60,11 +65,11 @@ export var TimePickerInput = styled(Input).withConfig({
 });
 export var PlaceholderWrapper = styled.div.withConfig({
   displayName: "TimePickerstyles__PlaceholderWrapper",
-  componentId: "yk19n0-8"
+  componentId: "yk19n0-9"
 })(["width:100%;position:relative;"]);
 export var Placeholder = styled.div.withConfig({
   displayName: "TimePickerstyles__Placeholder",
-  componentId: "yk19n0-9"
+  componentId: "yk19n0-10"
 })(["height:", "px;"], function (props) {
   return props.height;
 });

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import dayjs from 'dayjs';
 import { IntlShape } from 'react-intl';
 import { InputProps } from 'antd/es/input/Input';
@@ -14,8 +14,8 @@ export type TimePickerDisabledUnits = {
 export type TimePickerProps = TimePickerDisabledUnits & {
     alwaysOpen?: boolean;
     className?: string;
-    clearTooltip?: string | React.ReactNode;
-    containerStyle?: React.CSSProperties;
+    clearTooltip?: string | ReactNode;
+    containerStyle?: CSSProperties;
     defaultOpen?: boolean;
     disabled?: boolean;
     dropdownProps?: Partial<DropdownProps>;
@@ -39,4 +39,5 @@ export type TimePickerProps = TimePickerDisabledUnits & {
     use12HourClock?: boolean;
     valueFormatOptions?: DateToFormatOptions;
     value?: Date;
+    errorText?: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-time-picker",
-  "version": "0.8.11",
+  "version": "0.9.0",
   "description": "TimePicker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -55,5 +55,5 @@
     "@testing-library/react": "10.0.1",
     "@types/debounce": "^1.2.1"
   },
-  "gitHead": "8eb4a3e304406a8dbb9258803c48952461fc5a55"
+  "gitHead": "02f0a1dad6df5acf89b3d3defa6993716ba992fb"
 }