@synerise/ds-factors 1.7.4 → 1.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/FactorValue/Array/Array.const.d.ts +2 -0
  3. package/dist/FactorValue/Array/Array.const.js +3 -1
  4. package/dist/FactorValue/Array/Array.styles.d.ts +1 -5
  5. package/dist/FactorValue/Array/Array.styles.js +3 -4
  6. package/dist/FactorValue/Array/components/ArrayCollector.js +2 -1
  7. package/dist/FactorValue/Array/components/ArrayModal.js +18 -20
  8. package/dist/FactorValue/Array/components/ArrayRaw.js +20 -6
  9. package/dist/Factors.types.d.ts +2 -1
  10. package/dist/hooks/useTexts.js +16 -2
  11. package/package.json +31 -30
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.7.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.7.5...@synerise/ds-factors@1.7.6) (2026-01-12)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-factors
9
+
10
+ ## [1.7.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.7.4...@synerise/ds-factors@1.7.5) (2026-01-07)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-factors
13
+
6
14
  ## [1.7.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.7.3...@synerise/ds-factors@1.7.4) (2025-12-19)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-factors
package/dist/FactorValue/Array/Array.const.d.ts CHANGED
@@ -1 +1,3 @@
1
1
  export declare const MODAL_VIEWPORT_HEIGHT = 80;
2
+ export declare const BACKTICK = "```";
3
+ export declare const COMMA = ",";
package/dist/FactorValue/Array/Array.const.js CHANGED
@@ -1 +1,3 @@
1
- export var MODAL_VIEWPORT_HEIGHT = 80;
1
+ export var MODAL_VIEWPORT_HEIGHT = 80;
2
+ export var BACKTICK = '```';
3
+ export var COMMA = ',';
package/dist/FactorValue/Array/Array.styles.d.ts CHANGED
@@ -1,8 +1,4 @@
1
- export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/input").TextAreaProps & {
2
- error?: boolean;
3
- } & import("react").RefAttributes<import("antd/lib/input/TextArea").TextAreaRef>>, any, {
4
- error?: boolean;
5
- }, never>;
1
+ export declare const TextArea: import("styled-components").StyledComponent<"textarea", any, {}, never>;
6
2
  export declare const Modal: import("styled-components").StyledComponent<{
7
3
  (props: import("@synerise/ds-modal").ModalProps): React.JSX.Element;
8
4
  info: import("antd/lib/modal/confirm").ModalFunc;
package/dist/FactorValue/Array/Array.styles.js CHANGED
@@ -2,16 +2,15 @@ import styled from 'styled-components';
2
2
  import Button from '@synerise/ds-button';
3
3
  import EmptyStateBase from '@synerise/ds-empty-states';
4
4
  import Icon from '@synerise/ds-icon';
5
- import { RawTextArea } from '@synerise/ds-input';
6
5
  import ModalBase from '@synerise/ds-modal';
7
- export var TextArea = styled(RawTextArea).withConfig({
6
+ export var TextArea = styled.textarea.withConfig({
8
7
  displayName: "Arraystyles__TextArea",
9
8
  componentId: "sc-9atgo7-0"
10
- })([""]);
9
+ })(["width:100%;padding:8px 12px;"]);
11
10
  export var Modal = styled(ModalBase).withConfig({
12
11
  displayName: "Arraystyles__Modal",
13
12
  componentId: "sc-9atgo7-1"
14
- })(["&&{top:50px;.ant-modal-content{height:", "vh;}}", "{height:calc(", "vh - 211px);min-height:auto;resize:none;font-family:'IBM Plex Mono Regular',monospace;&,&:focus{border:0;background:transparent;box-shadow:none;}}"], function (props) {
13
+ })(["&&{top:50px;.ant-modal-content{height:", "vh;}}", "{height:calc(", "vh - 215px);min-height:auto;resize:none;font-family:'IBM Plex Mono Regular',monospace;&,&:focus{border:0;background:transparent;box-shadow:none;}}"], function (props) {
15
14
  return props.viewportHeight;
16
15
  }, TextArea, function (props) {
17
16
  return props.viewportHeight;
package/dist/FactorValue/Array/components/ArrayCollector.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { v4 as uuid } from 'uuid';
3
3
  import Collector from '@synerise/ds-collector';
4
+ import { COMMA } from '../Array.const';
4
5
  import * as S from '../Array.styles';
5
6
  import { isArrayOfNumbersAsString, isNumberAsString, sanitiseValues } from '../Array.utils';
6
7
  import { useCollector } from '../hooks/useCollector';
@@ -75,7 +76,7 @@ export var ArrayCollector = function ArrayCollector(_ref) {
75
76
  setCollectorValues([].concat(collectorValues, items));
76
77
  };
77
78
  return /*#__PURE__*/React.createElement(S.CollectorWrapper, null, /*#__PURE__*/React.createElement(Collector, {
78
- valuesSeparator: ",",
79
+ valuesSeparator: COMMA,
79
80
  error: error,
80
81
  errorText: errorMessage,
81
82
  onConfirm: addEnabled ? handleConfirm : undefined,
package/dist/FactorValue/Array/components/ArrayModal.js CHANGED
@@ -77,26 +77,24 @@ export var ArrayModal = function ArrayModal(_ref) {
77
77
  setArrayValue(updatedArray);
78
78
  setSearchQuery('');
79
79
  }, []);
80
- var mainModalContent = useMemo(function () {
81
- return currentMode === 'creator' ? /*#__PURE__*/React.createElement(ArrayCreator, {
82
- texts: texts,
83
- readOnly: readOnly,
84
- itemType: itemType,
85
- value: arrayValue,
86
- limit: limit,
87
- searchQuery: searchQuery,
88
- onValueChange: handleValueChange,
89
- collectorSuggestions: collectorSuggestions
90
- }) : /*#__PURE__*/React.createElement(ArrayRaw, {
91
- readOnly: readOnly,
92
- onError: handleRawEditorError,
93
- itemType: itemType,
94
- limit: limit,
95
- onValueChange: handleValueChange,
96
- texts: texts,
97
- value: arrayValue
98
- });
99
- }, [currentMode, texts, readOnly, itemType, arrayValue, limit, searchQuery, handleValueChange, collectorSuggestions]);
80
+ var mainModalContent = currentMode === 'creator' ? /*#__PURE__*/React.createElement(ArrayCreator, {
81
+ texts: texts,
82
+ readOnly: readOnly,
83
+ itemType: itemType,
84
+ value: arrayValue,
85
+ limit: limit,
86
+ searchQuery: searchQuery,
87
+ onValueChange: handleValueChange,
88
+ collectorSuggestions: collectorSuggestions
89
+ }) : /*#__PURE__*/React.createElement(ArrayRaw, {
90
+ readOnly: readOnly,
91
+ onError: handleRawEditorError,
92
+ itemType: itemType,
93
+ limit: limit,
94
+ onValueChange: handleValueChange,
95
+ texts: texts,
96
+ value: arrayValue
97
+ });
100
98
  return /*#__PURE__*/React.createElement(S.Modal, {
101
99
  size: "medium",
102
100
  title: texts.array.modalTitle,
package/dist/FactorValue/Array/components/ArrayRaw.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import React, { useEffect, useMemo, useRef, useState } from 'react';
2
+ import { useDelimiterEscape } from '@synerise/ds-utils';
3
+ import { BACKTICK, COMMA } from '../Array.const';
2
4
  import * as S from '../Array.styles';
3
5
  import { arrayWithUUID, isArrayOfNumbersAsString, sanitiseValues } from '../Array.utils';
4
6
  export var ArrayRaw = function ArrayRaw(_ref) {
@@ -10,18 +12,26 @@ export var ArrayRaw = function ArrayRaw(_ref) {
10
12
  texts = _ref.texts,
11
13
  limit = _ref.limit,
12
14
  onError = _ref.onError;
15
+ var _useDelimiterEscape = useDelimiterEscape({
16
+ openTag: BACKTICK,
17
+ closeTag: BACKTICK,
18
+ delimiter: COMMA
19
+ }),
20
+ isValidEscapedString = _useDelimiterEscape.isValidEscapedString,
21
+ joinWithEscape = _useDelimiterEscape.joinWithEscape,
22
+ splitWithEscape = _useDelimiterEscape.splitWithEscape;
13
23
  var ref = useRef(null);
14
24
  var plainValues = useMemo(function () {
15
- return value.map(function (item) {
25
+ var items = value.map(function (item) {
16
26
  return item.value;
17
- }).join(',');
18
- }, [value]);
27
+ });
28
+ return itemType === 'string' ? joinWithEscape(items) : items.join(',');
29
+ }, [itemType, joinWithEscape, value]);
19
30
  var _useState = useState(plainValues || ''),
20
31
  textareaValue = _useState[0],
21
32
  setTextareaValue = _useState[1];
22
33
  useEffect(function () {
23
- var _ref$current;
24
- if (document.activeElement !== ((_ref$current = ref.current) == null || (_ref$current = _ref$current.resizableTextArea) == null ? void 0 : _ref$current.textArea)) {
34
+ if (document.activeElement !== ref.current) {
25
35
  setTextareaValue(plainValues || '');
26
36
  }
27
37
  }, [plainValues]);
@@ -33,7 +43,11 @@ export var ArrayRaw = function ArrayRaw(_ref) {
33
43
  onValueChange([]);
34
44
  return;
35
45
  }
36
- var items = (stringifiedValue == null ? void 0 : stringifiedValue.split(',')) || [];
46
+ if (itemType === 'string' && !isValidEscapedString(stringifiedValue)) {
47
+ onError(texts.array.stringUnclosedBacktickError);
48
+ return;
49
+ }
50
+ var items = (itemType === 'string' ? splitWithEscape(stringifiedValue) : stringifiedValue == null ? void 0 : stringifiedValue.split(',')) || [];
37
51
  var sanitisedItems = items.map(sanitiseValues);
38
52
  var lastItemIsDelimiter = sanitisedItems.at(sanitisedItems.length - 1) === '';
39
53
  var itemsToValidate = lastItemIsDelimiter ? [].concat(sanitisedItems.slice(0, -1)) : sanitisedItems;
package/dist/Factors.types.d.ts CHANGED
@@ -96,7 +96,7 @@ export type FactorsTexts = {
96
96
  searchPlaceholder: string;
97
97
  searchClearTooltip: ReactNode;
98
98
  limitPrefix: ReactNode;
99
- collectorPlaceholder: string;
99
+ collectorPlaceholder: ReactNode;
100
100
  collectorAdd: ReactNode;
101
101
  collectorCancel: ReactNode;
102
102
  creatorButtonLabel: ReactNode;
@@ -104,6 +104,7 @@ export type FactorsTexts = {
104
104
  clearButtonLabel: ReactNode;
105
105
  deleteItemTooltip: ReactNode;
106
106
  numericValidationError: ReactNode;
107
+ stringUnclosedBacktickError: ReactNode;
107
108
  limitReached: ReactNode;
108
109
  limitExceeded: ReactNode;
109
110
  copiedTooltip: ReactNode;
package/dist/hooks/useTexts.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { merge } from 'lodash';
2
- import { useMemo } from 'react';
2
+ import React, { useMemo } from 'react';
3
3
  import { useIntl } from 'react-intl';
4
4
  import { utils as dateRangePickerUtils } from '@synerise/ds-date-range-picker';
5
+ import ShortCuts from '@synerise/ds-short-cuts';
5
6
  export var useTexts = function useTexts(defaultTexts) {
6
7
  var intl = useIntl();
7
8
  var texts = useMemo(function () {
@@ -134,7 +135,16 @@ export var useTexts = function useTexts(defaultTexts) {
134
135
  }),
135
136
  collectorPlaceholder: intl.formatMessage({
136
137
  id: 'DS.FACTORS.ARRAY.COLLECTOR_PLACEHOLDER',
137
- defaultMessage: 'Type value or paste multiple values separated by `,`'
138
+ defaultMessage: 'Separate values by {delimiterShortCut} or type {escapeShortCut} to add string containing comma'
139
+ }, {
140
+ escapeShortCut: /*#__PURE__*/React.createElement(ShortCuts, {
141
+ color: "light",
142
+ size: "L"
143
+ }, "```"),
144
+ delimiterShortCut: /*#__PURE__*/React.createElement(ShortCuts, {
145
+ color: "light",
146
+ size: "L"
147
+ }, ",")
138
148
  }),
139
149
  collectorAdd: intl.formatMessage({
140
150
  id: 'DS.FACTORS.ARRAY.COLLECTOR_ADD',
@@ -176,6 +186,10 @@ export var useTexts = function useTexts(defaultTexts) {
176
186
  id: 'DS.FACTORS.ARRAY.NUMERIC_VALIDATION_ERROR',
177
187
  defaultMessage: 'Some of the values are not a number'
178
188
  }),
189
+ stringUnclosedBacktickError: intl.formatMessage({
190
+ id: 'DS.FACTORS.ARRAY.UNCLOSED_BACKTICK_ERROR',
191
+ defaultMessage: "There's an unclosed backtick sequence in the string"
192
+ }),
179
193
  limitReached: intl.formatMessage({
180
194
  id: 'DS.FACTORS.ARRAY.LIMIT_REACHED',
181
195
  defaultMessage: 'Limit has been reached'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-factors",
3
- "version": "1.7.4",
3
+ "version": "1.7.6",
4
4
  "description": "Factors UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,34 +35,35 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-alert": "^1.1.28",
39
- "@synerise/ds-autocomplete": "^1.2.18",
40
- "@synerise/ds-badge": "^1.0.27",
41
- "@synerise/ds-button": "^1.5.2",
42
- "@synerise/ds-button-group": "^1.1.26",
43
- "@synerise/ds-collector": "^1.4.7",
44
- "@synerise/ds-date-picker": "^1.3.5",
45
- "@synerise/ds-date-range-picker": "^1.4.5",
46
- "@synerise/ds-divider": "^1.2.3",
47
- "@synerise/ds-dropdown": "^1.1.5",
48
- "@synerise/ds-empty-states": "^1.0.23",
49
- "@synerise/ds-icon": "^1.9.1",
50
- "@synerise/ds-information-card": "^1.3.6",
51
- "@synerise/ds-inline-edit": "^1.1.5",
52
- "@synerise/ds-input": "^1.5.3",
53
- "@synerise/ds-input-number": "^1.2.18",
54
- "@synerise/ds-list-item": "^1.2.3",
55
- "@synerise/ds-menu": "^1.2.2",
56
- "@synerise/ds-modal": "^1.2.19",
57
- "@synerise/ds-result": "^1.0.32",
58
- "@synerise/ds-scrollbar": "^1.2.2",
59
- "@synerise/ds-search": "^1.3.12",
60
- "@synerise/ds-select": "^1.3.3",
61
- "@synerise/ds-skeleton": "^1.0.27",
62
- "@synerise/ds-tabs": "^1.1.5",
63
- "@synerise/ds-tag": "^1.4.2",
64
- "@synerise/ds-tooltip": "^1.3.2",
65
- "@synerise/ds-utils": "^1.5.1",
38
+ "@synerise/ds-alert": "^1.1.30",
39
+ "@synerise/ds-autocomplete": "^1.2.20",
40
+ "@synerise/ds-badge": "^1.0.29",
41
+ "@synerise/ds-button": "^1.5.4",
42
+ "@synerise/ds-button-group": "^1.1.28",
43
+ "@synerise/ds-collector": "^1.4.9",
44
+ "@synerise/ds-date-picker": "^1.3.7",
45
+ "@synerise/ds-date-range-picker": "^1.4.7",
46
+ "@synerise/ds-divider": "^1.2.5",
47
+ "@synerise/ds-dropdown": "^1.1.7",
48
+ "@synerise/ds-empty-states": "^1.0.25",
49
+ "@synerise/ds-icon": "^1.9.3",
50
+ "@synerise/ds-information-card": "^1.3.8",
51
+ "@synerise/ds-inline-edit": "^1.1.7",
52
+ "@synerise/ds-input": "^1.5.5",
53
+ "@synerise/ds-input-number": "^1.2.20",
54
+ "@synerise/ds-list-item": "^1.2.5",
55
+ "@synerise/ds-menu": "^1.2.4",
56
+ "@synerise/ds-modal": "^1.2.21",
57
+ "@synerise/ds-result": "^1.0.34",
58
+ "@synerise/ds-scrollbar": "^1.2.4",
59
+ "@synerise/ds-search": "^1.3.14",
60
+ "@synerise/ds-select": "^1.3.5",
61
+ "@synerise/ds-short-cuts": "^1.0.27",
62
+ "@synerise/ds-skeleton": "^1.0.29",
63
+ "@synerise/ds-tabs": "^1.1.7",
64
+ "@synerise/ds-tag": "^1.4.4",
65
+ "@synerise/ds-tooltip": "^1.3.4",
66
+ "@synerise/ds-utils": "^1.5.3",
66
67
  "lodash": "^4.17.21",
67
68
  "react-window": "^1.8.11",
68
69
  "uuid": "^8.3.2"
@@ -78,5 +79,5 @@
78
79
  "react-intl": ">=3.12.0 <= 6.8",
79
80
  "styled-components": "^5.3.3"
80
81
  },
81
- "gitHead": "c638fc7e1af8aea55d466a643329fe499b2b3383"
82
+ "gitHead": "70a5256c87ef38313eedb9a004d1c6980082b2f5"
82
83
  }