@qoretechnologies/reqore 0.30.11 → 0.30.12

package/dist/components/Textarea/index.js

@@ -60,6 +60,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var sizes_1 = require("../../constants/sizes");
 var colors_1 = require("../../helpers/colors");
 var useCombinedRefs_1 = require("../../hooks/useCombinedRefs");
+var useTextareaAutoSize_1 = __importDefault(require("../../hooks/useTextareaAutoSize"));
 var useTheme_1 = require("../../hooks/useTheme");
 var useTooltip_1 = require("../../hooks/useTooltip");
 var styles_1 = require("../../styles");
@@ -75,7 +76,7 @@ exports.StyledTextareaWrapper = styled_components_1["default"].div(templateObjec
     var fluid = _a.fluid;
     return (fluid ? '1' : undefined);
 });
-exports.StyledTextarea = (0, styled_components_1["default"])(Effect_1.StyledEffect)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  font-size: ", "px;\n  margin: 0;\n  padding: 5px 7px;\n  resize: none;\n\n  background-color: ", ";\n  color: ", ";\n\n  transition: all 0.2s ease-out;\n\n  &:active,\n  &:focus {\n    background-color: ", ";\n  }\n\n  border-radius: ", "px;\n  border: ", ";\n  border-bottom: ", ";\n\n  transition: all 0.2s ease-out;\n\n  ", "\n\n  &::placeholder {\n    transition: all 0.2s ease-out;\n    color: ", ";\n  }\n\n  &:focus {\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  font-size: ", "px;\n  margin: 0;\n  padding: 5px 7px;\n  resize: none;\n\n  background-color: ", ";\n  color: ", ";\n\n  transition: all 0.2s ease-out;\n\n  &:active,\n  &:focus {\n    background-color: ", ";\n  }\n\n  border-radius: ", "px;\n  border: ", ";\n  border-bottom: ", ";\n\n  transition: all 0.2s ease-out;\n\n  ", "\n\n  &::placeholder {\n    transition: all 0.2s ease-out;\n    color: ", ";\n  }\n\n  &:focus {\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n"])), function (_a) {
+exports.StyledTextarea = (0, styled_components_1["default"])(Effect_1.StyledEffect)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  font-size: ", "px;\n  margin: 0;\n  padding: 5px 7px;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:active,\n  &:focus {\n    background-color: ", ";\n  }\n\n  border-radius: ", "px;\n  border: ", ";\n  border-bottom: ", ";\n\n  ", "\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n"], ["\n  width: 100%;\n  font-size: ", "px;\n  margin: 0;\n  padding: 5px 7px;\n\n  background-color: ", ";\n  color: ", ";\n\n  &:active,\n  &:focus {\n    background-color: ", ";\n  }\n\n  border-radius: ", "px;\n  border: ", ";\n  border-bottom: ", ";\n\n  ", "\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  ", ";\n\n  &:disabled {\n    ", ";\n  }\n"])), function (_a) {
     var _size = _a._size;
     return sizes_1.TEXT_FROM_SIZE[_size];
 }, function (_a) {
@@ -101,7 +102,7 @@ exports.StyledTextarea = (0, styled_components_1["default"])(Effect_1.StyledEffe
     return !disabled && !readOnly
         ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          &:active,\n          &:focus,\n          &:hover {\n            outline: none;\n            border-color: ", ";\n          }\n        "], ["\n          &:active,\n          &:focus,\n          &:hover {\n            outline: none;\n            border-color: ", ";\n          }\n        "])), function (_a) {
             var theme = _a.theme;
-            return (0, colors_1.changeLightness)(theme.main, 0.25);
+            return (0, colors_1.changeLightness)(theme.main, 0.35);
         }) : undefined;
 }, function (_a) {
     var theme = _a.theme;
@@ -114,12 +115,19 @@ exports.StyledTextarea = (0, styled_components_1["default"])(Effect_1.StyledEffe
     return readOnly && styles_1.ReadOnlyElement;
 }, styles_1.DisabledElement);
 var ReqoreInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var width = _a.width, height = _a.height, scaleWithContent = _a.scaleWithContent, _c = _a.size, size = _c === void 0 ? 'normal' : _c, className = _a.className, onClearClick = _a.onClearClick, fluid = _a.fluid, tooltip = _a.tooltip, customTheme = _a.customTheme, intent = _a.intent, _d = _a.rounded, rounded = _d === void 0 ? true : _d, wrapperStyle = _a.wrapperStyle, rest = __rest(_a, ["width", "height", "scaleWithContent", "size", "className", "onClearClick", "fluid", "tooltip", "customTheme", "intent", "rounded", "wrapperStyle"]);
+    var width = _a.width, height = _a.height, scaleWithContent = _a.scaleWithContent, _b = _a.size, size = _b === void 0 ? 'normal' : _b, className = _a.className, onClearClick = _a.onClearClick, fluid = _a.fluid, tooltip = _a.tooltip, customTheme = _a.customTheme, intent = _a.intent, _c = _a.rounded, rounded = _c === void 0 ? true : _c, wrapperStyle = _a.wrapperStyle, value = _a.value, onChange = _a.onChange, rest = __rest(_a, ["width", "height", "scaleWithContent", "size", "className", "onClearClick", "fluid", "tooltip", "customTheme", "intent", "rounded", "wrapperStyle", "value", "onChange"]);
     var targetRef = (0, useCombinedRefs_1.useCombinedRefs)(ref).targetRef;
     var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent);
+    var _d = (0, react_1.useState)(value || ''), _value = _d[0], setValue = _d[1];
+    (0, react_1.useEffect)(function () {
+        setValue(value || '');
+    }, [value]);
     (0, useTooltip_1.useTooltip)(targetRef === null || targetRef === void 0 ? void 0 : targetRef.current, tooltip);
-    return ((0, jsx_runtime_1.jsxs)(exports.StyledTextareaWrapper, __assign({ className: "".concat(className || '', " reqore-control-wrapper"), width: width, height: height, fluid: fluid, _size: size, theme: theme, style: wrapperStyle }, { children: [(0, jsx_runtime_1.jsx)(exports.StyledTextarea, __assign({}, rest, { effect: __assign({ interactive: !(rest === null || rest === void 0 ? void 0 : rest.disabled) && !rest.readOnly }, rest === null || rest === void 0 ? void 0 : rest.effect), as: 'textarea', className: "".concat(className || '', " reqore-control reqore-textarea"), _size: size, ref: targetRef, theme: theme, rounded: rounded, rows: scaleWithContent ? ((_b = rest === null || rest === void 0 ? void 0 : rest.value) === null || _b === void 0 ? void 0 : _b.split(/\r\n|\r|\n/).length) || 1 : rest.rows })), !rest.readOnly && ((0, jsx_runtime_1.jsx)(InputClearButton_1["default"], { enabled: !(rest === null || rest === void 0 ? void 0 : rest.disabled) && !!(onClearClick && (rest === null || rest === void 0 ? void 0 : rest.onChange)), show: (rest === null || rest === void 0 ? void 0 : rest.value) && rest.value !== '', onClick: onClearClick, size: size }))] })));
+    (0, useTextareaAutoSize_1["default"])(targetRef === null || targetRef === void 0 ? void 0 : targetRef.current, _value, scaleWithContent);
+    return ((0, jsx_runtime_1.jsxs)(exports.StyledTextareaWrapper, __assign({ className: "".concat(className || '', " reqore-control-wrapper"), width: width, height: height, fluid: fluid, _size: size, theme: theme, style: wrapperStyle }, { children: [(0, jsx_runtime_1.jsx)(exports.StyledTextarea, __assign({}, rest, { effect: __assign({ interactive: !(rest === null || rest === void 0 ? void 0 : rest.disabled) && !rest.readOnly }, rest === null || rest === void 0 ? void 0 : rest.effect), onChange: function (e) {
+                    setValue(e.target.value);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(e);
+                }, as: 'textarea', className: "".concat(className || '', " reqore-control reqore-textarea"), _size: size, ref: targetRef, theme: theme, rounded: rounded, rows: 1, value: _value })), !rest.readOnly && ((0, jsx_runtime_1.jsx)(InputClearButton_1["default"], { enabled: !(rest === null || rest === void 0 ? void 0 : rest.disabled) && !!(onClearClick && onChange), show: _value && _value !== '', onClick: onClearClick, size: size }))] })));
 });
 exports["default"] = ReqoreInput;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Textarea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qCAAgC;AAChC,+BAA0C;AAC1C,qEAAgD;AAChD,+CAAiF;AAEjF,+CAAyE;AACzE,+DAA8D;AAC9D,iDAAsD;AACtD,qDAAoD;AACpD,uCAAgE;AAShE,oCAAyC;AAEzC,yEAAyD;AA+B5C,QAAA,qBAAqB,GAAG,8BAAM,CAAC,GAAG,mKAAsB,cACzD,EAAoD,cACrD,EAAsE,aACvE,EAAwC,iDAGjD,KALW,UAAC,EAAU;QAAR,MAAM,YAAA;IAAO,OAAA,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,SAAS,CAAC;AAApC,CAAoC,EACrD,UAAC,EAAgB;QAAd,KAAK,WAAA,EAAE,KAAK,WAAA;IAAO,OAAA,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAG,KAAK,OAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAAhD,CAAgD,EACvE,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;AAAzB,CAAyB,EAGhD;AAEW,QAAA,cAAc,GAAG,IAAA,8BAAM,EAAC,qBAAY,CAAC,unBAAsB,kDAGzD,EAAoC,iFAK7B,EAC6B,cACxC,EACgE,2FAMnD,EAC8B,6BAGnC,EACkC,iBACzC,EAC+D,sBACxD,EACiE,6CAIhF,EAUa,yEAIJ,EAC2E,4DAKzE,EAC2E,qBAItF,EAA6C,2BAG3C,EAAe,UAEpB,KAzDc,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,sBAAc,CAAC,KAAK,CAAC;AAArB,CAAqB,EAK7B,UAAC,EAAqC;QAAnC,KAAK,WAAA,EAAE,OAAO,aAAA;IACnC,OAAA,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAA,eAAI,EAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC;AAA/C,CAA+C,EACxC,UAAC,EAA4B;QAA1B,KAAK,WAAA;IACf,OAAA,IAAA,yBAAgB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC;AAAvE,CAAuE,EAMnD,UAAC,EAAqC;QAAnC,KAAK,WAAA,EAAE,OAAO,aAAA;IACnC,OAAA,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAA,eAAI,EAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC;AAAhD,CAAgD,EAGnC,UAAC,EAA2B;QAAzB,OAAO,aAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA;IACzC,OAAA,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wBAAgB,CAAC,KAAK,CAAC;AAAjD,CAAiD,EACzC,UAAC,EAAwB;QAAtB,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IAC/B,OAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAa,IAAA,wBAAe,EAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,CAAC;AAAvE,CAAuE,EACxD,UAAC,EAAwB;QAAtB,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,IAAI,UAAA;IACtC,OAAA,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAe,IAAA,wBAAe,EAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAE,CAAC,CAAC,CAAC,SAAS;AAAhF,CAAgF,EAIhF,UAAC,EAAsB;QAApB,QAAQ,cAAA,EAAE,QAAQ,cAAA;IACrB,OAAA,CAAC,QAAQ,IAAI,CAAC,QAAQ;QACpB,CAAC,KAAC,uBAAG,wNAAA,wHAKiB,EAAgD,0BAEnE,KAFmB,UAAC,EAAS;gBAAP,KAAK,WAAA;YAAO,OAAA,IAAA,wBAAe,EAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC;QAAjC,CAAiC,EAGtE,CAAC,CAAC,SAAS;AATb,CASa,EAIJ,UAAC,EAAS;QAAP,KAAK,WAAA;IACf,OAAA,IAAA,eAAI,EAAC,IAAA,yBAAgB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,EAAE,GAAG,CAAC;AAAlF,CAAkF,EAKzE,UAAC,EAAS;QAAP,KAAK,WAAA;IACf,OAAA,IAAA,eAAI,EAAC,IAAA,yBAAgB,EAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAC,EAAE,GAAG,CAAC;AAAlF,CAAkF,EAItF,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,QAAQ,IAAI,wBAAe;AAA3B,CAA2B,EAG3C,wBAAe,EAEnB;AAEF,IAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,UACE,EAcuB,EACvB,GAAQ;;IAdN,IAAA,KAAK,WAAA,EACL,MAAM,YAAA,EACN,gBAAgB,sBAAA,EAChB,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,MAAM,YAAA,EACN,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,YAAY,kBAAA,EACT,IAAI,cAbT,oJAcC,CADQ;IAID,IAAA,SAAS,GAAK,IAAA,iCAAe,EAAC,GAAG,CAAC,UAAzB,CAA0B;IAC3C,IAAM,KAAK,GAAG,IAAA,yBAAc,EAAC,MAAM,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC;IAE1D,IAAA,uBAAU,EAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAExC,OAAO,CACL,wBAAC,6BAAqB,aACpB,SAAS,EAAE,UAAG,SAAS,IAAI,EAAE,4BAAyB,EACtD,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,YAAY,iBAEnB,uBAAC,sBAAc,eACT,IAAI,IACR,MAAM,aACJ,WAAW,EAAE,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAC3C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,GAEjB,EAAE,EAAC,UAAU,EACb,SAAS,EAAE,UAAG,SAAS,IAAI,EAAE,oCAAiC,EAC9D,KAAK,EAAE,IAAI,EACX,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,KAAK,CAAC,YAAY,EAAE,MAAM,KAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IACjF,EACD,CAAC,IAAI,CAAC,QAAQ,IAAI,CACjB,uBAAC,6BAAsB,IACrB,OAAO,EAAE,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAA,IAAI,CAAC,CAAC,CAAC,YAAY,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAA,CAAC,EAC9D,IAAI,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EACtC,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,IAAI,GACV,CACH,KACqB,CACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAe,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"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"}

package/dist/helpers/utils.d.ts

@@ -6,6 +6,7 @@ export declare const getLineCount: (value: string) => number;
 export declare const calculateStringSizeInPixels: (value: string, fontSize: number) => number;
 export declare const isStringSize: (value: TSizes | string | number) => boolean;
 export declare const getOneLessSize: (size: TSizes) => TSizes;
+export declare const getOneHigherSize: (size: TSizes) => TSizes;
 export declare const isActionShown: (action: IReqorePanelAction) => boolean;
 export declare const alignToFlexAlign: (align: 'left' | 'right' | 'center') => 'flex-start' | 'center' | 'flex-end';
 //# sourceMappingURL=utils.d.ts.map

package/dist/helpers/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/helpers/utils.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAyC,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEnF,eAAO,MAAM,KAAK,OAAc,MAAM,qBAAgD,CAAC;AAEvF,eAAO,MAAM,gBAAgB,EAAE,QA8B9B,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,MAM5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,MAAM,YAAiB,MAAM,KAAG,MAsBlF,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,GAAG,MAAM,GAAG,MAAM,YAE3D,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,MAAM,KAAG,MAO7C,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,kBAAkB,YAA0B,CAAC;AAEnF,eAAO,MAAM,gBAAgB,UACpB,MAAM,GAAG,OAAO,GAAG,QAAQ,KACjC,YAAY,GAAG,QAAQ,GAAG,UAW5B,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/helpers/utils.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAyC,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAEnF,eAAO,MAAM,KAAK,OAAc,MAAM,qBAAgD,CAAC;AAEvF,eAAO,MAAM,gBAAgB,EAAE,QA8B9B,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,MAM5C,CAAC;AAEF,eAAO,MAAM,2BAA2B,UAAW,MAAM,YAAiB,MAAM,KAAG,MAsBlF,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,MAAM,GAAG,MAAM,GAAG,MAAM,YAE3D,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,MAAM,KAAG,MAO7C,CAAC;AAEF,eAAO,MAAM,gBAAgB,SAAU,MAAM,KAAG,MAO/C,CAAC;AAEF,eAAO,MAAM,aAAa,WAAY,kBAAkB,YAA0B,CAAC;AAEnF,eAAO,MAAM,gBAAgB,UACpB,MAAM,GAAG,OAAO,GAAG,QAAQ,KACjC,YAAY,GAAG,QAAQ,GAAG,UAW5B,CAAC"}

package/dist/helpers/utils.js

@@ -36,7 +36,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 exports.__esModule = true;
-exports.alignToFlexAlign = exports.isActionShown = exports.getOneLessSize = exports.isStringSize = exports.calculateStringSizeInPixels = exports.getLineCount = exports.getTypeFromValue = exports.sleep = void 0;
+exports.alignToFlexAlign = exports.isActionShown = exports.getOneHigherSize = exports.getOneLessSize = exports.isStringSize = exports.calculateStringSizeInPixels = exports.getLineCount = exports.getTypeFromValue = exports.sleep = void 0;
 var lodash_1 = require("lodash");
 var sizes_1 = require("../constants/sizes");
 var sleep = function (ms) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
@@ -115,6 +115,15 @@ var getOneLessSize = function (size) {
     return sizes_1.NUMBER_TO_SIZE[oneLessSizeNumber];
 };
 exports.getOneLessSize = getOneLessSize;
+var getOneHigherSize = function (size) {
+    // Get the initial sizes number
+    var initialSizeNumber = sizes_1.SIZE_TO_NUMBER[size];
+    // Reduce the size number by one
+    var oneHigherSizeNumber = initialSizeNumber + 1 === 6 ? 5 : initialSizeNumber + 1;
+    // Get the size name from the number
+    return sizes_1.NUMBER_TO_SIZE[oneHigherSizeNumber];
+};
+exports.getOneHigherSize = getOneHigherSize;
 var isActionShown = function (action) { return action.show !== false; };
 exports.isActionShown = isActionShown;
 var alignToFlexAlign = function (align) {

package/dist/helpers/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/helpers/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/helpers/utils.ts"],"names":[],"mappings":"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"}

package/dist/hooks/useTextareaAutoSize.d.ts

@@ -0,0 +1,3 @@
+declare const useAutosizeTextArea: (textAreaRef: HTMLTextAreaElement | null, value: string, scaleWithContent?: boolean) => void;
+export default useAutosizeTextArea;
+//# sourceMappingURL=useTextareaAutoSize.d.ts.map

package/dist/hooks/useTextareaAutoSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextareaAutoSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useTextareaAutoSize.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,mBAAmB,gBACV,mBAAmB,GAAG,IAAI,SAChC,MAAM,qBACM,OAAO,SAa3B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/hooks/useTextareaAutoSize.js

@@ -0,0 +1,18 @@
+"use strict";
+exports.__esModule = true;
+var react_1 = require("react");
+// Updates the height of a <textarea> when the value changes.
+var useAutosizeTextArea = function (textAreaRef, value, scaleWithContent) {
+    (0, react_1.useEffect)(function () {
+        if (textAreaRef && scaleWithContent) {
+            // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+            textAreaRef.style.height = '0px';
+            var scrollHeight = textAreaRef.scrollHeight;
+            // We then set the height directly, outside of the render loop
+            // Trying to set this with state or a ref will product an incorrect value.
+            textAreaRef.style.height = scrollHeight + 'px';
+        }
+    }, [textAreaRef, value]);
+};
+exports["default"] = useAutosizeTextArea;
+//# sourceMappingURL=useTextareaAutoSize.js.map

package/dist/hooks/useTextareaAutoSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextareaAutoSize.js","sourceRoot":"","sources":["../../src/hooks/useTextareaAutoSize.ts"],"names":[],"mappings":";;AAAA,+BAAkC;AAElC,6DAA6D;AAC7D,IAAM,mBAAmB,GAAG,UAC1B,WAAuC,EACvC,KAAa,EACb,gBAA0B;IAE1B,IAAA,iBAAS,EAAC;QACR,IAAI,WAAW,IAAI,gBAAgB,EAAE;YACnC,2FAA2F;YAC3F,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;YACjC,IAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC;YAE9C,8DAA8D;YAC9D,0EAA0E;YAC1E,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,IAAI,CAAC;SAChD;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,qBAAe,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.30.11",
+  "version": "0.30.12",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Button/index.tsx

@@ -42,7 +42,7 @@ import {
   TReqoreHexColor,
 } from '../Effect';
 import ReqoreIcon from '../Icon';
-import { ReqoreSpacer } from '../Spacer';
+import { ReqoreHorizontalSpacer, ReqoreSpacer } from '../Spacer';
 import ReqoreTag, { IReqoreTagProps } from '../Tag';
 import ReqoreTagGroup from '../Tag/group';
 
@@ -225,7 +225,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
                   undefined
                 )};
               border-color: ${({ flat, theme, color }) =>
-                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.25)};
+                flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.35)};
 
               ${animate &&
               css`
@@ -292,7 +292,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
   }
 
   .reqore-button-description {
-    padding-bottom: ${({ size }) => PADDING_FROM_SIZE[getOneLessSize(size)]}px;
+    padding-bottom: ${({ size }) => PADDING_FROM_SIZE[size] / 2}px;
   }
 `;
 
@@ -443,7 +443,7 @@ const ReqoreButton = memo(
           className={`${className || ''} reqore-control reqore-button`}
         >
           <StyledButtonContent size={size} wrap={wrap} description={description} flat={_flat}>
-            {icon && (
+            {icon ? (
               <>
                 <ReqoreIcon
                   icon={icon}
@@ -455,9 +455,17 @@ const ReqoreButton = memo(
                   <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
                 ) : null}
               </>
-            )}
+            ) : children ? (
+              <ReqoreHorizontalSpacer
+                width={1}
+                style={textAlign !== 'left' ? { marginRight: 'auto' } : undefined}
+              />
+            ) : null}
             {children && (
-              <StyledAnimatedTextWrapper textAlign={textAlign}>
+              <StyledAnimatedTextWrapper
+                textAlign={textAlign}
+                style={textAlign === 'center' ? { margin: 'auto' } : undefined}
+              >
                 <StyledActiveContent wrap={wrap} effect={labelEffect}>
                   {children}
                 </StyledActiveContent>
@@ -475,7 +483,14 @@ const ReqoreButton = memo(
             {(badge || badge === 0) && !wrap ? (
               <ButtonBadge content={badge} size={size} color={color} />
             ) : null}
-            {rightIcon && (
+            {!rightIcon ? (
+              children ? (
+                <ReqoreHorizontalSpacer
+                  width={1}
+                  style={textAlign !== 'right' ? { marginLeft: 'auto' } : undefined}
+                />
+              ) : null
+            ) : (
               <>
                 {children || badge ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
                 <ReqoreIcon

package/src/components/Checkbox/index.tsx

@@ -8,7 +8,7 @@ import {
   changeLightness,
   getNthGradientColor,
   getReadableColor,
-  getReadableColorFrom,
+  getReadableColorFrom
 } from '../../helpers/colors';
 import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
@@ -21,7 +21,7 @@ import {
   IReqoreReadOnly,
   IWithReqoreCustomTheme,
   IWithReqoreEffect,
-  TReqoreTooltipProp,
+  TReqoreTooltipProp
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreEffect, ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
@@ -97,7 +97,7 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size] * 1.8}px;
 
-  border: 1px solid ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.25 : 0.2)};
+  border: 1px solid ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.35 : 0.2)};
   border-radius: 50px;
 
   background-color: ${({ theme }) => rgba(changeLightness(theme.main, 0.3), 0.1)};
@@ -160,7 +160,7 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
       getReadableColor(theme, undefined, undefined, false, theme.originalMain)};
 
     > ${StyledSwitch} {
-      border-color: ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.3 : 0.25)};
+      border-color: ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.4 : 0.35)};
     }
   }
 `;

package/src/components/Dropdown/list.tsx

@@ -79,6 +79,8 @@ const ReqoreDropdownList = memo(
       }
     };
 
+    console.log('Filtered Items', filteredItems);
+
     return (
       <ReqoreMenu
         _insidePopover={!multiSelect}

package/src/components/Effect/index.tsx

@@ -102,8 +102,6 @@ const StyledGradientKeyframes = keyframes`
 `;
 
 export const StyledEffect = styled.span`
-  transition: all 0.2s ease-in-out;
-
   // If gradient was supplied
   ${({ effect, theme, minimal, active, isText }: IReqoreTextEffectProps) => {
     if (!effect || !effect.gradient) {

package/src/components/Header/index.tsx

@@ -23,6 +23,25 @@ export const StyledHeader = styled(StyledTextEffect)`
   margin: 0;
   padding: 0;
   color: ${({ theme, intent }) => (intent ? theme.intents[intent] : 'inherit')};
+
+  font-size: ${({ _size }) => {
+    switch (_size) {
+      case 1:
+        return '30px';
+      case 2:
+        return '24px';
+      case 3:
+        return '19px';
+      case 4:
+        return '14px';
+      case 5:
+        return '11px';
+      case 6:
+        return '8px';
+      default:
+        return 'inherit';
+    }
+  }};
 `;
 
 export const ReqoreHeading = memo(
@@ -34,7 +53,7 @@ export const ReqoreHeading = memo(
     }, [_size]);
 
     return (
-      <StyledHeader as={HTMLheaderElement} theme={theme} intent={intent} {...props}>
+      <StyledHeader as={HTMLheaderElement} theme={theme} intent={intent} {...props} _size={_size}>
         {children}
       </StyledHeader>
     );

package/src/components/Input/index.tsx

@@ -105,7 +105,7 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
           &:focus,
           &:hover {
             outline: none;
-            border-color: ${({ theme }) => changeLightness(theme.main, 0.25)};
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.35)};
           }
         `
       : undefined}

package/src/components/Menu/index.tsx

@@ -88,7 +88,7 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
                   _insidePopover,
                   _popoverId,
                   customTheme: child.props?.customTheme || theme,
-                  wrap: wrapText,
+                  wrap: 'wrap' in (child.props || {}) ? child.props.wrap : wrapText,
                   flat: 'flat' in (child.props || {}) ? child.props.flat : flat,
                   minimal: 'minimal' in (child.props || {}) ? child.props.minimal : minimal,
                 })

package/src/components/Notifications/notification.tsx

@@ -195,6 +195,7 @@ export const StyledNotificationContent = styled.div`
   padding: 0;
   flex: 1;
   font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
+  overflow-wrap: anywhere;
 
   ${({ hasTitle, size = 'normal' }) =>
     hasTitle &&

package/src/components/Panel/index.tsx

@@ -19,7 +19,7 @@ import {
   getMainBackgroundColor,
   getReadableColor,
 } from '../../helpers/colors';
-import { isActionShown } from '../../helpers/utils';
+import { getOneHigherSize, isActionShown } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
@@ -244,6 +244,7 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
     minimal && padded ? `${PADDING_FROM_SIZE[size]}px` : undefined};
   flex: 1;
   overflow: auto;
+  overflow-wrap: anywhere;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 `;
 
@@ -562,7 +563,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                   <>
                     <ButtonBadge
                       color={changeLightness(theme.main, 0.18)}
-                      size={panelSize}
+                      size={getOneHigherSize(panelSize)}
                       content={badge}
                     />
                     <ReqoreSpacer width={PADDING_FROM_SIZE.normal} />

package/src/components/Textarea/index.tsx

@@ -1,10 +1,11 @@
 import { rgba } from 'polished';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import useAutosizeTextArea from '../../hooks/useTextareaAutoSize';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import { DisabledElement, ReadOnlyElement } from '../../styles';
@@ -58,20 +59,16 @@ export const StyledTextareaWrapper = styled.div<IReqoreTextareaStyle>`
 `;
 
 export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
-  height: 100%;
   width: 100%;
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   margin: 0;
   padding: 5px 7px;
-  resize: none;
 
   background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
     minimal ? 'transparent' : rgba(theme.main, 0.1)};
   color: ${({ theme }: IReqoreInputStyle) =>
     getReadableColor(theme, undefined, undefined, true, theme.originalMain)};
 
-  transition: all 0.2s ease-out;
-
   &:active,
   &:focus {
     background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
@@ -85,8 +82,6 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
   border-bottom: ${({ minimal, theme, flat }) =>
     minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.2)}` : undefined};
 
-  transition: all 0.2s ease-out;
-
   ${({ disabled, readOnly }) =>
     !disabled && !readOnly
       ? css`
@@ -94,13 +89,12 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
           &:focus,
           &:hover {
             outline: none;
-            border-color: ${({ theme }) => changeLightness(theme.main, 0.25)};
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.35)};
           }
         `
       : undefined}
 
   &::placeholder {
-    transition: all 0.2s ease-out;
     color: ${({ theme }) =>
       rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.3)};
   }
@@ -134,14 +128,22 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       intent,
       rounded = true,
       wrapperStyle,
+      value,
+      onChange,
       ...rest
     }: IReqoreTextareaProps,
-    ref: any
+    ref
   ) => {
-    const { targetRef } = useCombinedRefs(ref);
+    const { targetRef }: any = useCombinedRefs(ref);
     const theme = useReqoreTheme('main', customTheme, intent);
+    const [_value, setValue] = useState(value || '');
+
+    useEffect(() => {
+      setValue(value || '');
+    }, [value]);
 
     useTooltip(targetRef?.current, tooltip);
+    useAutosizeTextArea(targetRef?.current, _value, scaleWithContent);
 
     return (
       <StyledTextareaWrapper
@@ -159,18 +161,23 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
             interactive: !rest?.disabled && !rest.readOnly,
             ...rest?.effect,
           }}
+          onChange={(e) => {
+            setValue(e.target.value);
+            onChange?.(e);
+          }}
           as='textarea'
           className={`${className || ''} reqore-control reqore-textarea`}
           _size={size}
           ref={targetRef}
           theme={theme}
           rounded={rounded}
-          rows={scaleWithContent ? rest?.value?.split(/\r\n|\r|\n/).length || 1 : rest.rows}
+          rows={1}
+          value={_value}
         />
         {!rest.readOnly && (
           <ReqoreInputClearButton
-            enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
-            show={rest?.value && rest.value !== ''}
+            enabled={!rest?.disabled && !!(onClearClick && onChange)}
+            show={_value && _value !== ''}
             onClick={onClearClick}
             size={size}
           />

package/src/helpers/utils.ts

@@ -90,6 +90,15 @@ export const getOneLessSize = (size: TSizes): TSizes => {
   return NUMBER_TO_SIZE[oneLessSizeNumber];
 };
 
+export const getOneHigherSize = (size: TSizes): TSizes => {
+  // Get the initial sizes number
+  const initialSizeNumber: number = SIZE_TO_NUMBER[size];
+  // Reduce the size number by one
+  const oneHigherSizeNumber: number = initialSizeNumber + 1 === 6 ? 5 : initialSizeNumber + 1;
+  // Get the size name from the number
+  return NUMBER_TO_SIZE[oneHigherSizeNumber];
+};
+
 export const isActionShown = (action: IReqorePanelAction) => action.show !== false;
 
 export const alignToFlexAlign = (

package/src/hooks/useTextareaAutoSize.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+// Updates the height of a <textarea> when the value changes.
+const useAutosizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: string,
+  scaleWithContent?: boolean
+) => {
+  useEffect(() => {
+    if (textAreaRef && scaleWithContent) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = '0px';
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + 'px';
+    }
+  }, [textAreaRef, value]);
+};
+
+export default useAutosizeTextArea;

package/src/mock/multiSelect.ts

@@ -7,7 +7,9 @@ export const MultiSelectItems: TReqoreMultiSelectItem[] = [
     icon: 'SunCloudyLine',
   },
   {
-    label: 'Existing item 2',
+    label:
+      'Existing item 2 this is a really long item that needs to wrap and if it does not wrap then its bugged because we supplied the wrap prop so it should wrap',
+    wrap: true,
     value: 'Existing item 2',
     icon: 'BatteryChargeFill',
   },

package/src/stories/Button/Button.stories.tsx

@@ -76,6 +76,8 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps}>Left text</ReqoreButton>
         <ReqoreButton
           {...buttonProps}
+          icon={undefined}
+          rightIcon={undefined}
           textAlign='center'
           maxWidth='250px'
           badge='10'

package/src/stories/Panel/Panel.stories.tsx

@@ -116,7 +116,7 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
             ...actions.map((action) => ({ ...action, position: 'right' })),
           ]}
         >
-          This is not a fluid panel
+          Thisisnotafluidpanelbutapanelthathasalongstringwithoutspacesthatneedstobewrapperotherwiseitwilladdahorizontalscrollbar
         </ReqorePanel>
         <ReqoreVerticalSpacer height={10} />
         <ReqorePanel