@synerise/ds-completed-within 0.5.82 → 0.6.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.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.5.82...@synerise/ds-completed-within@0.6.0) (2024-01-24)
+
+
+### Features
+
+* **completed-within:** added readonly prop ([b5dd622](https://github.com/Synerise/synerise-design/commit/b5dd622fc077ae212cc3302bee88d82651d300b3))
+
+
+
+
+
 ## [0.5.82](https://github.com/Synerise/synerise-design/compare/@synerise/ds-completed-within@0.5.81...@synerise/ds-completed-within@0.5.82) (2024-01-17)
 
 **Note:** Version bump only for package @synerise/ds-completed-within

package/README.md

@@ -38,6 +38,7 @@ import CompletedWithin from '@synerise/ds-completed-within'
 | periods     | Custom list of periods                                                       | CustomPeriod[]               | -                                    |
 | placeholder | Trigger button label                                                         | string                       | -                                    |
 | tooltip     | Content of tooltip                                                           | string                       | -                                    |
+| readOnly    | Whether value is editable                                                    | boolean                      | -                                    |
 
 ### CompletedWithinTexts
 

package/dist/CompleteWithin.styles.d.ts

@@ -3,4 +3,5 @@ export declare const TriggerButton: import("styled-components").StyledComponent<
 export declare const ClearButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 export declare const CompletedWithinWrapper: import("styled-components").StyledComponent<"div", any, {
     withValue: boolean;
+    readOnly?: boolean | undefined;
 }, never>;

package/dist/CompleteWithin.styles.js

@@ -21,5 +21,5 @@ export var CompletedWithinWrapper = styled.div.withConfig({
   displayName: "CompleteWithinstyles__CompletedWithinWrapper",
   componentId: "sc-1hcip2f-2"
 })(["display:flex;align-items:center;justify-content:flex-start;height:32px;position:relative;", ";"], function (props) {
-  return Boolean(props.withValue) && css(["&&&{", "{padding-right:32px;}", "{background-color:transparent !important;position:absolute;right:0;opacity:1;pointer-events:all;}}"], TriggerButton, ClearButton);
+  return Boolean(props.withValue) && !props.readOnly && css(["&&&{", "{padding-right:32px;}", "{background-color:transparent !important;position:absolute;right:0;opacity:1;pointer-events:all;}}"], TriggerButton, ClearButton);
 });

package/dist/CompletedWithin.js

@@ -20,7 +20,8 @@ var CompletedWithin = function CompletedWithin(_ref) {
       text = _ref.text,
       periods = _ref.periods,
       placeholder = _ref.placeholder,
-      tooltip = _ref.tooltip;
+      tooltip = _ref.tooltip,
+      readOnly = _ref.readOnly;
   var intl = useIntl();
   var texts = React.useMemo(function () {
     return _objectSpread({
@@ -108,9 +109,25 @@ var CompletedWithin = function CompletedWithin(_ref) {
       return singlePeriod.value === value.period;
     })) == null ? void 0 : _getPeriods$find.label) : placeholder;
   }, [getPeriods, hasValue, texts, value, placeholder]);
+  var trigger = /*#__PURE__*/React.createElement(Tooltip, {
+    type: "largeSimple",
+    description: tooltip,
+    trigger: ['hover'],
+    onVisibleChange: setTooltipVisible,
+    visible: !settingsVisible && tooltipVisible
+  }, /*#__PURE__*/React.createElement(S.TriggerButton, {
+    "data-testid": "completed-within-trigger",
+    readOnly: readOnly,
+    className: "ds-completed-within",
+    type: "tertiary",
+    mode: triggerMode
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(ClockM, null)
+  }), triggerLabel));
   return /*#__PURE__*/React.createElement(S.CompletedWithinWrapper, {
+    readOnly: readOnly,
     withValue: hasValue
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+  }, readOnly ? trigger : /*#__PURE__*/React.createElement(Dropdown, {
     overlay: /*#__PURE__*/React.createElement(Settings, {
       value: {
         value: innerValue !== undefined ? Number(innerValue) : undefined,
@@ -120,6 +137,7 @@ var CompletedWithin = function CompletedWithin(_ref) {
       onValueChange: setInnerValue,
       onPeriodChange: setInnerPeriod,
       text: texts,
+      readOnly: readOnly,
       periods: getPeriods
     }),
     trigger: ['click'],
@@ -129,19 +147,7 @@ var CompletedWithin = function CompletedWithin(_ref) {
       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, {
+  }, trigger), hasValue && !readOnly && /*#__PURE__*/React.createElement(Tooltip, {
     title: texts.clear
   }, /*#__PURE__*/React.createElement(S.ClearButton, {
     mode: "single-icon",

package/dist/CompletedWithin.types.d.ts

@@ -22,4 +22,5 @@ export type CompletedWithinProps = {
     periods?: CustomPeriod[];
     placeholder?: string | undefined;
     tooltip?: string;
+    readOnly?: boolean;
 };

package/dist/Settings/Settings.js

@@ -10,8 +10,11 @@ var Settings = function Settings(_ref) {
       onPeriodChange = _ref.onPeriodChange,
       onValueChange = _ref.onValueChange,
       periods = _ref.periods,
-      maxValue = _ref.maxValue;
-  return /*#__PURE__*/React.createElement(S.Settings, null, /*#__PURE__*/React.createElement(InputGroup, {
+      maxValue = _ref.maxValue,
+      readOnly = _ref.readOnly;
+  return /*#__PURE__*/React.createElement(S.Settings, {
+    "data-testid": "completed-within-dropdown"
+  }, /*#__PURE__*/React.createElement(InputGroup, {
     size: "default",
     label: text.header,
     resetMargin: true,
@@ -19,11 +22,13 @@ var Settings = function Settings(_ref) {
   }, /*#__PURE__*/React.createElement(InputNumber, {
     size: "small",
     raw: true,
+    readOnly: readOnly,
     value: value.value,
     onChange: onValueChange,
     min: 0,
     max: maxValue != null ? maxValue : Number.MAX_SAFE_INTEGER
   }), /*#__PURE__*/React.createElement(Select, {
+    readOnly: readOnly,
     size: 'default',
     value: value.period,
     placeholder: text.periodPlaceholder // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-completed-within",
-  "version": "0.5.82",
+  "version": "0.6.0",
   "description": "CompletedWithin UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,13 +33,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.18.11",
-    "@synerise/ds-dropdown": "^0.17.93",
-    "@synerise/ds-icon": "^0.59.1",
-    "@synerise/ds-input": "^0.19.14",
-    "@synerise/ds-input-number": "^0.9.1",
-    "@synerise/ds-select": "^0.15.32",
-    "@synerise/ds-tooltip": "^0.14.15",
+    "@synerise/ds-button": "^0.19.0",
+    "@synerise/ds-dropdown": "^0.17.94",
+    "@synerise/ds-icon": "^0.60.0",
+    "@synerise/ds-input": "^0.19.15",
+    "@synerise/ds-input-number": "^0.9.2",
+    "@synerise/ds-select": "^0.15.33",
+    "@synerise/ds-tooltip": "^0.14.16",
     "react-intl": "3.12.0"
   },
   "peerDependencies": {
@@ -53,5 +53,5 @@
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/user-event": "^10.3.1"
   },
-  "gitHead": "16918244eff3f4e37db24ae3d90687d4e6a233a4"
+  "gitHead": "9e7d97fc5f8a9fd938b38e9d1678e050e0478e0e"
 }