@synerise/ds-factors 0.21.7 → 0.22.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* **factors:** change debounce logic in DynamicKey ([81d09b2](https://github.com/Synerise/synerise-design/commit/81d09b23e6dba125ffaca838f4b428c90d66a9ba))
+
+
+### Features
+
+* **input:** support autoresize to stretch to parent ([329c866](https://github.com/Synerise/synerise-design/commit/329c866cb54921ad1260ae217cb8c471e43b986e))
+
+
+
+
+
+## [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)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
 ## [0.21.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.21.6...@synerise/ds-factors@0.21.7) (2024-02-23)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/dist/FactorValue/DynamicKey/DynamicKey.js

@@ -32,19 +32,17 @@ var DynamicKey = function DynamicKey(_ref) {
       localError = _React$useState2[0],
       setLocalError = _React$useState2[1];
 
-  var onChangeDebounce = React.useRef(debounce(onChange, 300)).current;
-  React.useEffect(function () {
-    return function () {
-      onChangeDebounce.cancel();
-    };
-  }, [onChangeDebounce]);
+  var onChangeRef = React.useRef(onChange);
+  var debouncedOnChange = React.useRef(debounce(function (inputValue) {
+    onChangeRef.current && onChangeRef.current(inputValue);
+  }, 300)).current;
 
   var handleChange = function handleChange(event) {
     var newValue = _objectSpread({}, value);
 
     newValue[event.target.name] = event.target.value;
     setLocalValue(newValue);
-    onChangeDebounce(newValue);
+    debouncedOnChange(newValue);
 
     if (!event.target.value.length) {
       setLocalError(true);
@@ -53,9 +51,17 @@ var DynamicKey = function DynamicKey(_ref) {
     }
   };
 
+  React.useEffect(function () {
+    onChangeRef.current = onChange;
+  }, [localValue, onChange]);
   React.useEffect(function () {
     setLocalValue(value);
   }, [value]);
+  React.useEffect(function () {
+    return function () {
+      debouncedOnChange.cancel();
+    };
+  }, [debouncedOnChange]);
   var trigger = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RawInput, {
     placeholder: texts.dynamicKey.keyPlaceholder,
     value: localValue.key,

package/dist/FactorValue/FactorValue.js

@@ -54,6 +54,8 @@ var FactorValue = function FactorValue(_ref) {
     });
   }, [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]);
   return /*#__PURE__*/React.createElement(S.FactorInput, {
+    inputType: selectedFactorType,
+    inputTextType: textType,
     withoutTypeSelector: withoutTypeSelector
   }, inputType);
 };

package/dist/FactorValue/FactorValue.style.d.ts

@@ -1,3 +1,5 @@
 export declare const FactorInput: import("styled-components").StyledComponent<"div", any, {
     withoutTypeSelector: boolean;
+    inputTextType?: string | undefined;
+    inputType?: string | undefined;
 }, never>;

package/dist/FactorValue/FactorValue.style.js

@@ -1,9 +1,38 @@
-import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
+import styled, { css } from 'styled-components';
+var DEFAULT_WIDTH = {
+  'text-autocomplete': '147px',
+  'text-default': '147px',
+  'text-expansible': '123px'
+}; // eslint-disable-next-line import/prefer-default-export
 
 export var FactorInput = styled.div.withConfig({
   displayName: "FactorValuestyle__FactorInput",
   componentId: "sc-17jtnx3-0"
-})([".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) {
+})(["&&{", ";.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) {
+  var inputType = props.inputType,
+      _props$inputTextType = props.inputTextType,
+      inputTextType = _props$inputTextType === void 0 ? 'default' : _props$inputTextType;
+
+  if (inputType) {
+    if (inputType === 'array') {
+      return css(["&&&{min-width:173px;input{min-width:123px;}}"]);
+    }
+
+    if (inputType === 'date') {
+      return css(["&&&{width:173px;.ant-input{width:173px;}}"]);
+    }
+
+    if (inputType === 'dateRange') {
+      return css(["&&&{min-width:173px;}"]);
+    }
+
+    if (inputType === 'text' && DEFAULT_WIDTH[inputType + "-" + inputTextType]) {
+      return css(["&&&{input{min-width:", ";}}"], DEFAULT_WIDTH[inputType + "-" + inputTextType]);
+    }
+  }
+
+  return false;
+}, function (props) {
   return props.withoutTypeSelector ? '3px' : '0 3px 3px 0';
 }, function (props) {
   return props.withoutTypeSelector ? '3px' : '0 3px 3px 0';

package/dist/FactorValue/Parameter/Parameter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { InputProps } from '../../Factors.types';
-declare const ParameterInput: React.FC<InputProps>;
+declare const ParameterInput: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: InputProps) => JSX.Element;
 export default ParameterInput;

package/dist/FactorValue/Parameter/Parameter.js

@@ -10,8 +10,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 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; }
 
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
-import * as React from 'react';
 import Button from '@synerise/ds-button';
 import Menu from '@synerise/ds-menu';
 import Icon, { AngleDownS } from '@synerise/ds-icon';
@@ -42,32 +42,32 @@ var ParameterInput = function ParameterInput(_ref) {
       loading = parameters.loading,
       restParameters = _objectWithoutPropertiesLoose(parameters, _excluded);
 
-  var _React$useState = React.useState(false),
-      dropdownVisible = _React$useState[0],
-      setDropdownVisible = _React$useState[1];
+  var _useState = useState(false),
+      dropdownVisible = _useState[0],
+      setDropdownVisible = _useState[1];
 
-  var parameter = React.useMemo(function () {
+  var parameter = useMemo(function () {
     return value;
   }, [value]);
 
-  var _React$useMemo = React.useMemo(function () {
+  var _useMemo = useMemo(function () {
     return {
       parameterIcon: (parameter == null ? void 0 : parameter.icon) || buttonIcon,
       parameterName: (parameter == null ? void 0 : parameter.name) || buttonLabel
     };
   }, [parameter, buttonIcon, buttonLabel]),
-      parameterIcon = _React$useMemo.parameterIcon,
-      parameterName = _React$useMemo.parameterName;
+      parameterIcon = _useMemo.parameterIcon,
+      parameterName = _useMemo.parameterName;
 
-  var handleChange = React.useCallback(function (val) {
+  var handleChange = useCallback(function (val) {
     onChange(val);
   }, [onChange]);
-  var handleOnClick = React.useCallback(function () {
+  var handleOnClick = useCallback(function () {
     onParamsClick && onParamsClick();
     setDropdownVisible(true);
     onActivate && onActivate();
   }, [onParamsClick, onActivate]);
-  React.useEffect(function () {
+  useEffect(function () {
     setDropdownVisible(Boolean(opened));
 
     if (opened) {
@@ -76,10 +76,10 @@ var ParameterInput = function ParameterInput(_ref) {
     } // eslint-disable-next-line
 
   }, [opened]);
-  React.useEffect(function () {
+  useEffect(function () {
     !preventAutoloadData && onParamsClick && onParamsClick(); // eslint-disable-next-line
   }, []);
-  var onDropdownVisibilityChange = React.useCallback(function (newValue) {
+  var onDropdownVisibilityChange = useCallback(function (newValue) {
     newValue && onActivate && onActivate();
 
     if (!newValue) {
@@ -87,13 +87,13 @@ var ParameterInput = function ParameterInput(_ref) {
       setDropdownVisible(false);
     }
   }, [onActivate, onDeactivate]);
-  var triggerMode = React.useMemo(function () {
-    if (value) {
+  var triggerMode = useMemo(function () {
+    if (parameterIcon) {
       return readOnly ? 'icon-label' : 'two-icons';
     }
 
     return readOnly ? 'simple' : 'label-icon';
-  }, [value, readOnly]);
+  }, [parameterIcon, readOnly]);
   var triggerButton = /*#__PURE__*/React.createElement(Button, {
     error: error,
     type: "secondary",

package/dist/FactorValue/Text/Text.js

@@ -21,6 +21,7 @@ var TextInput = function TextInput(_ref) {
       onDeactivate = _ref.onDeactivate,
       error = _ref.error,
       inputProps = _ref.inputProps,
+      getPopupContainerOverride = _ref.getPopupContainerOverride,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
 
@@ -95,6 +96,7 @@ var TextInput = function TextInput(_ref) {
         error: localError || error,
         handleInputRef: setInputRef,
         defaultOpen: true,
+        getPopupContainer: getPopupContainerOverride,
         readOnly: readOnly
       }), autocompleteOptions == null ? void 0 : autocompleteOptions.map(function (option) {
         return /*#__PURE__*/React.createElement(Autocomplete.Option, {

package/dist/FactorValue/Text/Text.styles.js

@@ -11,7 +11,7 @@ export var IconWrapper = styled.span.withConfig({
 export var InputWrapper = styled.div.withConfig({
   displayName: "Textstyles__InputWrapper",
   componentId: "rjr8p0-1"
-})(["input{padding:0;&:before{display:none;}input{max-height:30px;}}"]);
+})(["&{position:relative;display:flex;> *{min-width:0;}input{padding:0;&:before{display:none;}input{max-height:30px;}}}"]);
 export var TextWrapper = styled.div.withConfig({
   displayName: "Textstyles__TextWrapper",
   componentId: "rjr8p0-2"

package/dist/Factors.d.ts

@@ -14,12 +14,12 @@ export declare const factorTypes: {
     parameter: {
         icon: JSX.Element;
         name: string;
-        input: React.FC<import("./Factors.types").InputProps>;
+        input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: import("./Factors.types").InputProps) => JSX.Element;
     };
     contextParameter: {
         icon: JSX.Element;
         name: string;
-        input: React.FC<import("./Factors.types").InputProps>;
+        input: ({ value, onChange, onParamsClick, parameters, texts, opened, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, readOnly, error, getMenuEntryProps, }: import("./Factors.types").InputProps) => JSX.Element;
     };
     dynamicKey: {
         icon: JSX.Element;

package/dist/Factors.types.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { DateFilter } from '@synerise/ds-date-range-picker/dist/date.types';
 import { Texts as DateRangeTexts } from '@synerise/ds-date-range-picker/dist/DateRangePicker.types';
 import type { MenuItemProps } from '@synerise/ds-menu';
+import type { AutoResizeProp } from '@synerise/ds-input';
 export declare const ALL_FACTOR_TYPES: readonly ["text", "number", "parameter", "contextParameter", "dynamicKey", "formula", "array", "date", "dateRange"];
 export type FactorType = typeof ALL_FACTOR_TYPES[number] | string;
 export type DefinedFactorTypes = typeof ALL_FACTOR_TYPES[number];
@@ -86,10 +87,7 @@ export type FactorsProps = {
     onChangeValue: (value: FactorValueType) => void;
     value: FactorValueType;
     textType?: 'autocomplete' | 'expansible' | 'default' | string;
-    autoResize?: boolean | {
-        minWidth: string;
-        maxWidth: string;
-    };
+    autoResize?: AutoResizeProp;
     autocompleteText?: {
         options: string[];
     };

package/dist/style/Factors.style.js

@@ -1,11 +1,14 @@
 import styled from 'styled-components';
 import { InputGroup } from '@synerise/ds-input';
 import { OuterWrapper } from '@synerise/ds-input/dist/Input.styles';
+import { InputGroupWrapper, InputGroupItem } from '@synerise/ds-input/dist/InputGroup.styles';
 import { FactorInput } from '../FactorValue/FactorValue.style'; // eslint-disable-next-line import/prefer-default-export
 
 export var Group = styled(InputGroup).withConfig({
   displayName: "Factorsstyle__Group",
   componentId: "sc-1kkuis0-0"
-})(["&&&{display:flex;", "{margin:0;}", "{width:auto;> *{border-radius:", ";}}}"], OuterWrapper, FactorInput, function (props) {
+})(["&&&{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) {
+  return props.withoutTypeSelector ? '' : 'flex: 0 0 auto';
+}, InputGroupItem, InputGroupItem, OuterWrapper, FactorInput, function (props) {
   return props.withoutTypeSelector ? '3px' : '0 3px 3px 0';
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "0.21.7",
+  "version": "0.22.0",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,25 +33,25 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-autocomplete": "^0.6.4",
-    "@synerise/ds-badge": "^0.6.51",
-    "@synerise/ds-button": "^0.19.2",
-    "@synerise/ds-date-picker": "^0.10.37",
-    "@synerise/ds-date-range-picker": "^0.26.12",
-    "@synerise/ds-dropdown": "^0.17.98",
-    "@synerise/ds-icon": "^0.60.2",
-    "@synerise/ds-information-card": "^0.3.60",
-    "@synerise/ds-inline-edit": "^0.6.98",
-    "@synerise/ds-input": "^0.19.19",
-    "@synerise/ds-input-number": "^0.9.6",
-    "@synerise/ds-menu": "^0.18.14",
-    "@synerise/ds-modal": "^0.17.20",
-    "@synerise/ds-result": "^0.6.46",
-    "@synerise/ds-scrollbar": "^0.8.2",
-    "@synerise/ds-skeleton": "^0.4.3",
-    "@synerise/ds-tabs": "^0.13.96",
-    "@synerise/ds-tooltip": "^0.14.19",
-    "@synerise/ds-utils": "^0.24.26",
+    "@synerise/ds-autocomplete": "^0.7.0",
+    "@synerise/ds-badge": "^0.6.52",
+    "@synerise/ds-button": "^0.19.3",
+    "@synerise/ds-date-picker": "^0.10.38",
+    "@synerise/ds-date-range-picker": "^0.27.0",
+    "@synerise/ds-dropdown": "^0.17.99",
+    "@synerise/ds-icon": "^0.60.3",
+    "@synerise/ds-information-card": "^0.3.61",
+    "@synerise/ds-inline-edit": "^0.6.99",
+    "@synerise/ds-input": "^0.20.0",
+    "@synerise/ds-input-number": "^0.9.7",
+    "@synerise/ds-menu": "^0.18.15",
+    "@synerise/ds-modal": "^0.17.21",
+    "@synerise/ds-result": "^0.6.47",
+    "@synerise/ds-scrollbar": "^0.8.3",
+    "@synerise/ds-skeleton": "^0.5.1",
+    "@synerise/ds-tabs": "^0.13.97",
+    "@synerise/ds-tooltip": "^0.14.20",
+    "@synerise/ds-utils": "^0.25.0",
     "lodash": "^4.17.19",
     "react-intl": "3.12.0",
     "react-window": "1.8.5",
@@ -67,5 +67,5 @@
     "@testing-library/react": "10.0.1",
     "@testing-library/user-event": "^10.3.1"
   },
-  "gitHead": "751dc6640206153c0d4ab08107743bc816df532c"
+  "gitHead": "6b8da853a2bb4e993d89e9b0b3041216f0c9c976"
 }