@synerise/ds-completed-within 0.4.0 → 0.5.2

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.5.1...@synerise/ds-completed-within@0.5.2) (2022-05-15)
+
+
+### Bug Fixes
+
+* **completed-within:** set max width of dropdown ([49c881e](https://github.com/Synerise/synerise-design/commit/49c881e27b8a2cb22c1770645d987a55d03a05cb))
+
+
+
+
+
+## [0.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.5.0...@synerise/ds-completed-within@0.5.1) (2022-05-13)
+
+
+### Bug Fixes
+
+* **completed-within:** fixes clearing tooltip ([b9e0520](https://github.com/Synerise/synerise-design/commit/b9e05208d75069b03e9671981ea061f0e6183c99))
+* **completed-within:** fixes maxValues in btn label ([46c73ad](https://github.com/Synerise/synerise-design/commit/46c73ad326737bd355ba949fcfeceb58b0035d3e))
+
+
+
+
+
+# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.4.0...@synerise/ds-completed-within@0.5.0) (2022-04-29)
+
+
+### Features
+
+* **completed-within:** adds maxValue prop ([cc20e27](https://github.com/Synerise/synerise-design/commit/cc20e2788e2840a9d78bd51cb43a1928fb64e958))
+* **completed-within:** adds tooltip for trigger button ([694812e](https://github.com/Synerise/synerise-design/commit/694812e9179e79c8f8fa4d12054d2704d7abcab3))
+* **completed-within:** replace || by ?? in maxValue ([d36c970](https://github.com/Synerise/synerise-design/commit/d36c970832fcc835881a15a0d013b5c5225c4c72))
+
+
+
+
+
 # [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.3.15...@synerise/ds-completed-within@0.4.0) (2022-04-05)
 
 

package/README.md

@@ -33,9 +33,11 @@ import CompletedWithin from '@synerise/ds-completed-within'
 | ---         | ---                                                                          | ---                          | ---                                  |
 | text        | Custom labels and tooltips                                                   | CompletedWithinTexts         | -                                    |
 | value       | Selected value                                                               | PeriodValue                  | { value: undefined, period: 'YEARS'} |
+| maxValue    | Max value                                                                    | PeriodValue[value]           | Number.MAX_SAFE_INTEGER              |
 | onSetValue  | Function called when user has closed the settings with set value, and period | (value: PeriodValue) => void | -                                    |
 | periods     | Custom list of periods                                                       | CustomPeriod[]               | -                                    |
 | placeholder | Trigger button label                                                         | string                       | -                                    |
+| tooltip     | Content of tooltip                                                           | string                       | -                                    |
 
 ### CompletedWithinTexts
 

package/dist/CompletedWithin.js

@@ -12,14 +12,15 @@ import Tooltip from '@synerise/ds-tooltip';
 import Settings from './Settings/Settings';
 import * as S from './CompleteWithin.styles';
 export var DEFAULT_PERIODS = ['SECONDS', 'MINUTES', 'HOURS', 'DAYS', 'MONTHS', 'YEARS'];
-var DEFAULT_PERIOD = 'DAYS';
 
 var CompletedWithin = function CompletedWithin(_ref) {
   var value = _ref.value,
+      maxValue = _ref.maxValue,
       onSetValue = _ref.onSetValue,
       text = _ref.text,
       periods = _ref.periods,
-      placeholder = _ref.placeholder;
+      placeholder = _ref.placeholder,
+      tooltip = _ref.tooltip;
   var intl = useIntl();
   var texts = React.useMemo(function () {
     return _objectSpread({
@@ -61,21 +62,33 @@ var CompletedWithin = function CompletedWithin(_ref) {
       innerValue = _React$useState[0],
       setInnerValue = _React$useState[1];
 
-  var _React$useState2 = React.useState(value.period || DEFAULT_PERIOD),
+  var _React$useState2 = React.useState(value.period),
       innerPeriod = _React$useState2[0],
       setInnerPeriod = _React$useState2[1];
 
+  var _React$useState3 = React.useState(false),
+      tooltipVisible = _React$useState3[0],
+      setTooltipVisible = _React$useState3[1];
+
+  var _React$useState4 = React.useState(false),
+      settingsVisible = _React$useState4[0],
+      setSettingsVisible = _React$useState4[1];
+
   var hasValue = React.useMemo(function () {
     return value.value !== undefined && value.value > 0;
   }, [value]);
   var handleVisibleChange = React.useCallback(function (visible) {
+    setSettingsVisible(visible);
+    setTooltipVisible(false);
+
     if (!visible && innerValue && innerPeriod) {
+      var newValue = maxValue && maxValue < innerValue ? maxValue : innerValue;
       onSetValue({
-        value: Number(innerValue),
+        value: Number(newValue),
         period: innerPeriod
       });
     }
-  }, [innerPeriod, innerValue, onSetValue]);
+  }, [innerPeriod, innerValue, maxValue, onSetValue]);
   var handleClear = React.useCallback(function () {
     setInnerPeriod(undefined);
     setInnerValue(undefined);
@@ -100,9 +113,10 @@ var CompletedWithin = function CompletedWithin(_ref) {
   }, /*#__PURE__*/React.createElement(Dropdown, {
     overlay: /*#__PURE__*/React.createElement(Settings, {
       value: {
-        value: innerValue !== undefined ? Number(innerValue) : 0,
+        value: innerValue !== undefined ? Number(innerValue) : undefined,
         period: innerPeriod
       },
+      maxValue: maxValue,
       onValueChange: setInnerValue,
       onPeriodChange: setInnerPeriod,
       text: texts,
@@ -110,14 +124,24 @@ var CompletedWithin = function CompletedWithin(_ref) {
     }),
     trigger: ['click'],
     onVisibleChange: handleVisibleChange,
-    placement: "topLeft"
+    placement: "topLeft",
+    overlayStyle: {
+      maxWidth: '238px',
+      minWidth: '238px'
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    type: "largeSimple",
+    description: tooltip,
+    trigger: ['hover'],
+    onVisibleChange: setTooltipVisible,
+    visible: !settingsVisible && tooltipVisible
   }, /*#__PURE__*/React.createElement(S.TriggerButton, {
     className: "ds-completed-within",
     type: "tertiary",
     mode: triggerMode
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(ClockM, null)
-  }), triggerLabel)), hasValue && /*#__PURE__*/React.createElement(Tooltip, {
+  }), triggerLabel))), hasValue && /*#__PURE__*/React.createElement(Tooltip, {
     title: texts.clear
   }, /*#__PURE__*/React.createElement(S.ClearButton, {
     mode: "single-icon",

package/dist/CompletedWithin.types.d.ts

@@ -17,7 +17,9 @@ export declare type PeriodValue = {
 export declare type CompletedWithinProps = {
     text?: CompletedWithinTexts;
     value: PeriodValue;
+    maxValue?: PeriodValue['value'];
     onSetValue: (value: PeriodValue) => void;
     periods?: CustomPeriod[];
     placeholder?: string | undefined;
+    tooltip?: string;
 };

package/dist/Settings/Settings.js

@@ -9,7 +9,8 @@ var Settings = function Settings(_ref) {
       text = _ref.text,
       onPeriodChange = _ref.onPeriodChange,
       onValueChange = _ref.onValueChange,
-      periods = _ref.periods;
+      periods = _ref.periods,
+      maxValue = _ref.maxValue;
   return /*#__PURE__*/React.createElement(S.Settings, null, /*#__PURE__*/React.createElement(InputGroup, {
     size: "default",
     label: text.header,
@@ -20,7 +21,8 @@ var Settings = function Settings(_ref) {
     raw: true,
     value: value.value,
     onChange: onValueChange,
-    min: 0
+    min: 0,
+    max: maxValue != null ? maxValue : Number.MAX_SAFE_INTEGER
   }), /*#__PURE__*/React.createElement(Select, {
     size: 'default',
     value: value.period,

package/dist/Settings/Settings.types.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import InputNumber from '@synerise/ds-input-number';
-import { CompletedWithinProps, CompletedWithinTexts, CustomPeriod, Period } from '../CompletedWithin.types';
+import { CompletedWithinProps, CompletedWithinTexts, CustomPeriod, Period, PeriodValue } from '../CompletedWithin.types';
 declare type InputProps = React.ComponentProps<typeof InputNumber>;
 export declare type SettingsProps = Omit<CompletedWithinProps, 'onClear' | 'onSetValue' | 'periods' | 'text'> & {
     onValueChange: InputProps['onChange'];
     onPeriodChange: (period: Period) => void;
     periods: CustomPeriod[];
     text: CompletedWithinTexts;
+    maxValue: PeriodValue['value'];
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-completed-within",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "description": "CompletedWithin UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,7 +33,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^0.17.2",
-    "@synerise/ds-dropdown": "^0.17.16",
+    "@synerise/ds-dropdown": "^0.17.17",
     "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-input-number": "^0.3.45",
     "@synerise/ds-select": "^0.14.11",
@@ -43,5 +43,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "5793ce09feb88b36cc8ca1923ddfcb272b889cb0"
+  "gitHead": "8f33e32ba9432243d34d588baab19d394596bbaa"
 }