@synerise/ds-factors 0.21.8 → 0.22.0

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 (13) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/FactorValue/DynamicKey/DynamicKey.js +13 -7
  3. package/dist/FactorValue/FactorValue.js +2 -0
  4. package/dist/FactorValue/FactorValue.style.d.ts +2 -0
  5. package/dist/FactorValue/FactorValue.style.js +31 -2
  6. package/dist/FactorValue/Parameter/Parameter.d.ts +1 -2
  7. package/dist/FactorValue/Parameter/Parameter.js +16 -16
  8. package/dist/FactorValue/Text/Text.js +2 -0
  9. package/dist/FactorValue/Text/Text.styles.js +1 -1
  10. package/dist/Factors.d.ts +2 -2
  11. package/dist/Factors.types.d.ts +2 -4
  12. package/dist/style/Factors.style.js +4 -1
  13. package/package.json +21 -21
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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
+ # [0.22.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.21.8...@synerise/ds-factors@0.22.0) (2024-03-05)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **factors:** change debounce logic in DynamicKey ([81d09b2](https://github.com/Synerise/synerise-design/commit/81d09b23e6dba125ffaca838f4b428c90d66a9ba))
12
+
13
+
14
+ ### Features
15
+
16
+ * **input:** support autoresize to stretch to parent ([329c866](https://github.com/Synerise/synerise-design/commit/329c866cb54921ad1260ae217cb8c471e43b986e))
17
+
18
+
19
+
20
+
21
+
6
22
  ## [0.21.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.21.7...@synerise/ds-factors@0.21.8) (2024-03-04)
7
23
 
8
24
  **Note:** Version bump only for package @synerise/ds-factors
package/dist/FactorValue/DynamicKey/DynamicKey.js CHANGED
@@ -32,19 +32,17 @@ var DynamicKey = function DynamicKey(_ref) {
32
32
  localError = _React$useState2[0],
33
33
  setLocalError = _React$useState2[1];
34
34
 
35
- var onChangeDebounce = React.useRef(debounce(onChange, 300)).current;
36
- React.useEffect(function () {
37
- return function () {
38
- onChangeDebounce.cancel();
39
- };
40
- }, [onChangeDebounce]);
35
+ var onChangeRef = React.useRef(onChange);
36
+ var debouncedOnChange = React.useRef(debounce(function (inputValue) {
37
+ onChangeRef.current && onChangeRef.current(inputValue);
38
+ }, 300)).current;
41
39
 
42
40
  var handleChange = function handleChange(event) {
43
41
  var newValue = _objectSpread({}, value);
44
42
 
45
43
  newValue[event.target.name] = event.target.value;
46
44
  setLocalValue(newValue);
47
- onChangeDebounce(newValue);
45
+ debouncedOnChange(newValue);
48
46
 
49
47
  if (!event.target.value.length) {
50
48
  setLocalError(true);
@@ -53,9 +51,17 @@ var DynamicKey = function DynamicKey(_ref) {
53
51
  }
54
52
  };
55
53
 
54
+ React.useEffect(function () {
55
+ onChangeRef.current = onChange;
56
+ }, [localValue, onChange]);
56
57
  React.useEffect(function () {
57
58
  setLocalValue(value);
58
59
  }, [value]);
60
+ React.useEffect(function () {
61
+ return function () {
62
+ debouncedOnChange.cancel();
63
+ };
64
+ }, [debouncedOnChange]);
59
65
  var trigger = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RawInput, {
60
66
  placeholder: texts.dynamicKey.keyPlaceholder,
61
67
  value: localValue.key,
package/dist/FactorValue/FactorValue.js CHANGED
@@ -54,6 +54,8 @@ var FactorValue = function FactorValue(_ref) {
54
54
  });
55
55
  }, [selectedFactor.input, selectedFactor.name, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, inputProps, readOnly, getMenuEntryProps]);
56
56
  return /*#__PURE__*/React.createElement(S.FactorInput, {
57
+ inputType: selectedFactorType,
58
+ inputTextType: textType,
57
59
  withoutTypeSelector: withoutTypeSelector
58
60
  }, inputType);
59
61
  };
package/dist/FactorValue/FactorValue.style.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  export declare const FactorInput: import("styled-components").StyledComponent<"div", any, {
2
2
  withoutTypeSelector: boolean;
3
+ inputTextType?: string | undefined;
4
+ inputType?: string | undefined;
3
5
  }, never>;
package/dist/FactorValue/FactorValue.style.js CHANGED
@@ -1,9 +1,38 @@
1
- import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
1
+ import styled, { css } from 'styled-components';
2
+ var DEFAULT_WIDTH = {
3
+ 'text-autocomplete': '147px',
4
+ 'text-default': '147px',
5
+ 'text-expansible': '123px'
6
+ }; // eslint-disable-next-line import/prefer-default-export
2
7
 
3
8
  export var FactorInput = styled.div.withConfig({
4
9
  displayName: "FactorValuestyle__FactorInput",
5
10
  componentId: "sc-17jtnx3-0"
6
- })([".ds-autocomplete{min-width:144px;width:100%;.ant-select{width:100%;}.ant-select-selection-placeholder{padding:0;}.ant-select-selector{border-radius:", ";}}.ant-dropdown-trigger{input{border-radius:", ";}}"], function (props) {
11
+ })(["&&{", ";.ds-autocomplete{display:flex;> *{min-width:0;flex-grow:1;}.ant-select{width:100%;}.ant-select-selection-placeholder{padding:0;}.ant-select-selector{border-radius:", ";}}.ant-dropdown-trigger{input{border-radius:", ";}}}"], function (props) {
12
+ var inputType = props.inputType,
13
+ _props$inputTextType = props.inputTextType,
14
+ inputTextType = _props$inputTextType === void 0 ? 'default' : _props$inputTextType;
15
+
16
+ if (inputType) {
17
+ if (inputType === 'array') {
18
+ return css(["&&&{min-width:173px;input{min-width:123px;}}"]);
19
+ }
20
+
21
+ if (inputType === 'date') {
22
+ return css(["&&&{width:173px;.ant-input{width:173px;}}"]);
23
+ }
24
+
25
+ if (inputType === 'dateRange') {
26
+ return css(["&&&{min-width:173px;}"]);
27
+ }
28
+
29
+ if (inputType === 'text' && DEFAULT_WIDTH[inputType + "-" + inputTextType]) {
30
+ return css(["&&&{input{min-width:", ";}}"], DEFAULT_WIDTH[inputType + "-" + inputTextType]);
31
+ }
32
+ }
33
+
34
+ return false;
35
+ }, function (props) {
7
36
  return props.withoutTypeSelector ? '3px' : '0 3px 3px 0';
8
37
  }, function (props) {
9
38
  return props.withoutTypeSelector ? '3px' : '0 3px 3px 0';
package/dist/FactorValue/Parameter/Parameter.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as React from 'react';
2
1
  import { InputProps } from '../../Factors.types';
3
- declare const ParameterInput: React.FC<InputProps>;
2
+ declare const ParameterInput: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: InputProps) => JSX.Element;
4
3
  export default ParameterInput;
package/dist/FactorValue/Parameter/Parameter.js CHANGED
@@ -10,8 +10,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
10
10
 
11
11
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
12
12
 
13
+ import React, { useCallback, useMemo, useState, useEffect } from 'react';
13
14
  import Dropdown from '@synerise/ds-dropdown';
14
- import * as React from 'react';
15
15
  import Button from '@synerise/ds-button';
16
16
  import Menu from '@synerise/ds-menu';
17
17
  import Icon, { AngleDownS } from '@synerise/ds-icon';
@@ -42,32 +42,32 @@ var ParameterInput = function ParameterInput(_ref) {
42
42
  loading = parameters.loading,
43
43
  restParameters = _objectWithoutPropertiesLoose(parameters, _excluded);
44
44
 
45
- var _React$useState = React.useState(false),
46
- dropdownVisible = _React$useState[0],
47
- setDropdownVisible = _React$useState[1];
45
+ var _useState = useState(false),
46
+ dropdownVisible = _useState[0],
47
+ setDropdownVisible = _useState[1];
48
48
 
49
- var parameter = React.useMemo(function () {
49
+ var parameter = useMemo(function () {
50
50
  return value;
51
51
  }, [value]);
52
52
 
53
- var _React$useMemo = React.useMemo(function () {
53
+ var _useMemo = useMemo(function () {
54
54
  return {
55
55
  parameterIcon: (parameter == null ? void 0 : parameter.icon) || buttonIcon,
56
56
  parameterName: (parameter == null ? void 0 : parameter.name) || buttonLabel
57
57
  };
58
58
  }, [parameter, buttonIcon, buttonLabel]),
59
- parameterIcon = _React$useMemo.parameterIcon,
60
- parameterName = _React$useMemo.parameterName;
59
+ parameterIcon = _useMemo.parameterIcon,
60
+ parameterName = _useMemo.parameterName;
61
61
 
62
- var handleChange = React.useCallback(function (val) {
62
+ var handleChange = useCallback(function (val) {
63
63
  onChange(val);
64
64
  }, [onChange]);
65
- var handleOnClick = React.useCallback(function () {
65
+ var handleOnClick = useCallback(function () {
66
66
  onParamsClick && onParamsClick();
67
67
  setDropdownVisible(true);
68
68
  onActivate && onActivate();
69
69
  }, [onParamsClick, onActivate]);
70
- React.useEffect(function () {
70
+ useEffect(function () {
71
71
  setDropdownVisible(Boolean(opened));
72
72
 
73
73
  if (opened) {
@@ -76,10 +76,10 @@ var ParameterInput = function ParameterInput(_ref) {
76
76
  } // eslint-disable-next-line
77
77
 
78
78
  }, [opened]);
79
- React.useEffect(function () {
79
+ useEffect(function () {
80
80
  !preventAutoloadData && onParamsClick && onParamsClick(); // eslint-disable-next-line
81
81
  }, []);
82
- var onDropdownVisibilityChange = React.useCallback(function (newValue) {
82
+ var onDropdownVisibilityChange = useCallback(function (newValue) {
83
83
  newValue && onActivate && onActivate();
84
84
 
85
85
  if (!newValue) {
@@ -87,13 +87,13 @@ var ParameterInput = function ParameterInput(_ref) {
87
87
  setDropdownVisible(false);
88
88
  }
89
89
  }, [onActivate, onDeactivate]);
90
- var triggerMode = React.useMemo(function () {
91
- if (value) {
90
+ var triggerMode = useMemo(function () {
91
+ if (parameterIcon) {
92
92
  return readOnly ? 'icon-label' : 'two-icons';
93
93
  }
94
94
 
95
95
  return readOnly ? 'simple' : 'label-icon';
96
- }, [value, readOnly]);
96
+ }, [parameterIcon, readOnly]);
97
97
  var triggerButton = /*#__PURE__*/React.createElement(Button, {
98
98
  error: error,
99
99
  type: "secondary",
package/dist/FactorValue/Text/Text.js CHANGED
@@ -21,6 +21,7 @@ var TextInput = function TextInput(_ref) {
21
21
  onDeactivate = _ref.onDeactivate,
22
22
  error = _ref.error,
23
23
  inputProps = _ref.inputProps,
24
+ getPopupContainerOverride = _ref.getPopupContainerOverride,
24
25
  _ref$readOnly = _ref.readOnly,
25
26
  readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
26
27
 
@@ -95,6 +96,7 @@ var TextInput = function TextInput(_ref) {
95
96
  error: localError || error,
96
97
  handleInputRef: setInputRef,
97
98
  defaultOpen: true,
99
+ getPopupContainer: getPopupContainerOverride,
98
100
  readOnly: readOnly
99
101
  }), autocompleteOptions == null ? void 0 : autocompleteOptions.map(function (option) {
100
102
  return /*#__PURE__*/React.createElement(Autocomplete.Option, {
package/dist/FactorValue/Text/Text.styles.js CHANGED
@@ -11,7 +11,7 @@ export var IconWrapper = styled.span.withConfig({
11
11
  export var InputWrapper = styled.div.withConfig({
12
12
  displayName: "Textstyles__InputWrapper",
13
13
  componentId: "rjr8p0-1"
14
- })(["input{padding:0;&:before{display:none;}input{max-height:30px;}}"]);
14
+ })(["&{position:relative;display:flex;> *{min-width:0;}input{padding:0;&:before{display:none;}input{max-height:30px;}}}"]);
15
15
  export var TextWrapper = styled.div.withConfig({
16
16
  displayName: "Textstyles__TextWrapper",
17
17
  componentId: "rjr8p0-2"
package/dist/Factors.d.ts CHANGED
@@ -14,12 +14,12 @@ export declare const factorTypes: {
14
14
  parameter: {
15
15
  icon: JSX.Element;
16
16
  name: string;
17
- input: React.FC<import("./Factors.types").InputProps>;
17
+ input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: import("./Factors.types").InputProps) => JSX.Element;
18
18
  };
19
19
  contextParameter: {
20
20
  icon: JSX.Element;
21
21
  name: string;
22
- input: React.FC<import("./Factors.types").InputProps>;
22
+ input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: import("./Factors.types").InputProps) => JSX.Element;
23
23
  };
24
24
  dynamicKey: {
25
25
  icon: JSX.Element;
package/dist/Factors.types.d.ts CHANGED
@@ -2,6 +2,7 @@ import * as React from 'react';
2
2
  import { DateFilter } from '@synerise/ds-date-range-picker/dist/date.types';
3
3
  import { Texts as DateRangeTexts } from '@synerise/ds-date-range-picker/dist/DateRangePicker.types';
4
4
  import type { MenuItemProps } from '@synerise/ds-menu';
5
+ import type { AutoResizeProp } from '@synerise/ds-input';
5
6
  export declare const ALL_FACTOR_TYPES: readonly ["text", "number", "parameter", "contextParameter", "dynamicKey", "formula", "array", "date", "dateRange"];
6
7
  export type FactorType = typeof ALL_FACTOR_TYPES[number] | string;
7
8
  export type DefinedFactorTypes = typeof ALL_FACTOR_TYPES[number];
@@ -86,10 +87,7 @@ export type FactorsProps = {
86
87
  onChangeValue: (value: FactorValueType) => void;
87
88
  value: FactorValueType;
88
89
  textType?: 'autocomplete' | 'expansible' | 'default' | string;
89
- autoResize?: boolean | {
90
- minWidth: string;
91
- maxWidth: string;
92
- };
90
+ autoResize?: AutoResizeProp;
93
91
  autocompleteText?: {
94
92
  options: string[];
95
93
  };
package/dist/style/Factors.style.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import styled from 'styled-components';
2
2
  import { InputGroup } from '@synerise/ds-input';
3
3
  import { OuterWrapper } from '@synerise/ds-input/dist/Input.styles';
4
+ import { InputGroupWrapper, InputGroupItem } from '@synerise/ds-input/dist/InputGroup.styles';
4
5
  import { FactorInput } from '../FactorValue/FactorValue.style'; // eslint-disable-next-line import/prefer-default-export
5
6
 
6
7
  export var Group = styled(InputGroup).withConfig({
7
8
  displayName: "Factorsstyle__Group",
8
9
  componentId: "sc-1kkuis0-0"
9
- })(["&&&{display:flex;", "{margin:0;}", "{width:auto;> *{border-radius:", ";}}}"], OuterWrapper, FactorInput, function (props) {
10
+ })(["&&&{display:flex;> ", "{flex-grow:1;min-width:0;> .ds-input-group-item-0{", "}}&.ds-factors-parameter,&.ds-factors-contextParameter,&.ds-factors-formula{", "{&.ds-input-group-item-1{flex-grow:0;}}}&.ds-factors-text,&.ds-factors-array{", "{&.ds-input-group-item-1{min-width:0;}}}", "{margin:0;}", "{> *{border-radius:", ";}}}"], InputGroupWrapper, function (props) {
11
+ return props.withoutTypeSelector ? '' : 'flex: 0 0 auto';
12
+ }, InputGroupItem, InputGroupItem, OuterWrapper, FactorInput, function (props) {
10
13
  return props.withoutTypeSelector ? '3px' : '0 3px 3px 0';
11
14
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-factors",
3
- "version": "0.21.8",
3
+ "version": "0.22.0",
4
4
  "description": "Factors UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -33,25 +33,25 @@
33
33
  ],
34
34
  "types": "dist/index.d.ts",
35
35
  "dependencies": {
36
- "@synerise/ds-autocomplete": "^0.6.4",
37
- "@synerise/ds-badge": "^0.6.51",
38
- "@synerise/ds-button": "^0.19.2",
39
- "@synerise/ds-date-picker": "^0.10.37",
40
- "@synerise/ds-date-range-picker": "^0.26.13",
41
- "@synerise/ds-dropdown": "^0.17.98",
42
- "@synerise/ds-icon": "^0.60.2",
43
- "@synerise/ds-information-card": "^0.3.60",
44
- "@synerise/ds-inline-edit": "^0.6.98",
45
- "@synerise/ds-input": "^0.19.19",
46
- "@synerise/ds-input-number": "^0.9.6",
47
- "@synerise/ds-menu": "^0.18.14",
48
- "@synerise/ds-modal": "^0.17.20",
49
- "@synerise/ds-result": "^0.6.46",
50
- "@synerise/ds-scrollbar": "^0.8.2",
51
- "@synerise/ds-skeleton": "^0.5.0",
52
- "@synerise/ds-tabs": "^0.13.96",
53
- "@synerise/ds-tooltip": "^0.14.19",
54
- "@synerise/ds-utils": "^0.24.26",
36
+ "@synerise/ds-autocomplete": "^0.7.0",
37
+ "@synerise/ds-badge": "^0.6.52",
38
+ "@synerise/ds-button": "^0.19.3",
39
+ "@synerise/ds-date-picker": "^0.10.38",
40
+ "@synerise/ds-date-range-picker": "^0.27.0",
41
+ "@synerise/ds-dropdown": "^0.17.99",
42
+ "@synerise/ds-icon": "^0.60.3",
43
+ "@synerise/ds-information-card": "^0.3.61",
44
+ "@synerise/ds-inline-edit": "^0.6.99",
45
+ "@synerise/ds-input": "^0.20.0",
46
+ "@synerise/ds-input-number": "^0.9.7",
47
+ "@synerise/ds-menu": "^0.18.15",
48
+ "@synerise/ds-modal": "^0.17.21",
49
+ "@synerise/ds-result": "^0.6.47",
50
+ "@synerise/ds-scrollbar": "^0.8.3",
51
+ "@synerise/ds-skeleton": "^0.5.1",
52
+ "@synerise/ds-tabs": "^0.13.97",
53
+ "@synerise/ds-tooltip": "^0.14.20",
54
+ "@synerise/ds-utils": "^0.25.0",
55
55
  "lodash": "^4.17.19",
56
56
  "react-intl": "3.12.0",
57
57
  "react-window": "1.8.5",
@@ -67,5 +67,5 @@
67
67
  "@testing-library/react": "10.0.1",
68
68
  "@testing-library/user-event": "^10.3.1"
69
69
  },
70
- "gitHead": "d249737414ed45f95fa21a77e30f47f0eb14d534"
70
+ "gitHead": "6b8da853a2bb4e993d89e9b0b3041216f0c9c976"
71
71
  }