colibri-ui 0.7.89 → 0.7.91

package/Button/index.js

@@ -38,7 +38,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       root_fullWidth: !!fullWidth
     }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
     disabled: disabled,
-    "data-cy": "button",
+    "data-testid": "button",
     type: type || "button",
     role: "button"
   }, props), icon && /*#__PURE__*/React__default.default.createElement("span", {

package/Calendar/components/ContinueButton/index.js

@@ -35,7 +35,7 @@ var ContinueButton = function ContinueButton(_a) {
   }, [isChanged, onContinue, onCancel]);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.root),
-    "data-component": "Calendar__ContinueButton"
+    "data-testid": "continue-button"
   }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
     size: "l",
     onClick: handleClick

package/Calendar/components/Month/Month.js

@@ -63,7 +63,7 @@ var Month = function Month(props) {
   var year = props.startDate.getFullYear();
   var month = leadingZeros.leadingZeros(props.startDate.getMonth() + 1, 2);
   return /*#__PURE__*/React__namespace.createElement("div", {
-    "data-component": "Month",
+    "data-testid": "month",
     className: clx(styles__default.default.root),
     style: {
       left: props.offsetLeft ? "".concat(props.offsetLeft, "px") : undefined

package/Calendar/components/Presets/index.js

@@ -42,7 +42,7 @@ var Presets = function Presets(_a) {
   var presets = _a.presets,
     onPresetSelect = _a.onPresetSelect;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    "data-component": "Calendar_Presets"
+    "data-testid": "presets"
   }, /*#__PURE__*/React__namespace.createElement("div", {
     className: clx(styles__default.default["native-scroll-inner"])
   }, /*#__PURE__*/React__namespace.createElement("div", {

package/Calendar/index.js

@@ -150,7 +150,7 @@ var Calendar = function Calendar(_a) {
   };
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.root),
-    "data-component": "Calendar",
+    "data-testid": "calendar",
     ref: $root
   }, /*#__PURE__*/React__default.default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
     "data-component": "Months",

package/Chip/index.js

@@ -25,7 +25,6 @@ var Chip = function Chip(props) {
     testID = _b === void 0 ? "chip" : _b;
   return /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("root"),
-    "data-component": "Chip",
     "data-testid": testID
   }, /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("inner", {

package/Input/index.js

@@ -24,11 +24,12 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     required = _a.required,
     onChange = _a.onChange,
     inputRef = _a.inputRef,
+    disabled = _a.disabled,
     _b = _a.variant,
     variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
-    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "variant", "size"]);
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "disabled", "variant", "size"]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     className: classNames__default.default(className),
     label: label,
@@ -41,7 +42,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     endIcon: endIcon,
     variant: variant,
     size: size,
-    disabled: !!props.disabled,
+    disabled: !!disabled,
     error: error
   }, /*#__PURE__*/React__default.default.createElement(index$2.default, tslib.__assign({
     ref: inputRef,

package/TextArea/TextArea.module.css

@@ -0,0 +1,16 @@
+.textarea {
+  resize: none;
+  font: inherit;
+  overflow: auto;
+  text-overflow: unset;
+  padding: 7px 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.textarea::placeholder {
+  color: var(--palette-bg-3);
+}

package/TextArea/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ITextAreaProps } from "./index.props";
+declare const TextArea: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<HTMLDivElement>>;
+export default TextArea;

package/TextArea/index.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var TextareaAutosize = require('react-textarea-autosize');
+var classNames = require('classnames/bind');
+var index = require('../base/FormField/index.js');
+var index$1 = require('../base/InputRoot/index.js');
+var styles = require('./TextArea.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var TextArea = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var className = _a.className,
+    _b = _a.value,
+    value = _b === void 0 ? "" : _b,
+    _c = _a.minRows,
+    minRows = _c === void 0 ? 3 : _c,
+    _d = _a.maxRows,
+    maxRows = _d === void 0 ? 6 : _d,
+    onChange = _a.onChange,
+    label = _a.label,
+    required = _a.required,
+    error = _a.error,
+    hint = _a.hint,
+    disabled = _a.disabled,
+    props = tslib.__rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled"]);
+  var onChangeHandler = function onChangeHandler(event) {
+    if (onChange) onChange(event.target.value, event);
+  };
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    ref: ref,
+    className: clx(null, className),
+    required: required,
+    label: label,
+    hint: hint,
+    error: error
+  }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    disabled: !!disabled,
+    error: error
+  }, /*#__PURE__*/React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({
+    "data-testid": "textarea",
+    minRows: minRows,
+    maxRows: maxRows,
+    value: value,
+    className: clx(styles__default.default.textarea, className),
+    onChange: onChangeHandler
+  }, props))));
+});
+
+exports.default = TextArea;

package/TextArea/index.props.d.ts

@@ -0,0 +1,11 @@
+import type { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
+export interface ITextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "style"> {
+    minRows?: number;
+    maxRows?: number;
+    value?: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: boolean;
+    required?: boolean;
+    onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+}

package/TextArea/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/TextArea/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Theme/themes/buenos_aires.js

@@ -29,7 +29,7 @@ var THEME_BA = {
   "palette-success": index.default.SUCCESS,
   "typography-alert": index.default.ALERT,
   "typography-success": index.default.SUCCESS,
-  "typography-secondary": index.default.BG_3,
+  "typography-secondary": "rgba(0, 0, 0, .6)",
   "button-primary-color": index.default.BLACK,
   "button-primary-bg": index.default.PRIMARY_BA_4,
   "button-primary-border-color": index.default.PRIMARY_BA_4,

package/Theme/themes/default.js

@@ -29,7 +29,7 @@ var THEME_DEFAULT = {
   "palette-success": index.default.SUCCESS,
   "typography-alert": index.default.ALERT,
   "typography-success": index.default.SUCCESS,
-  "typography-secondary": index.default.BG_3,
+  "typography-secondary": "rgba(0, 0, 0, .6)",
   "button-primary-color": index.default.WHITE,
   "button-primary-bg": index.default.PRIMARY_DEFAULT_4,
   "button-primary-border-color": index.default.PRIMARY_DEFAULT_4,

package/base/BaseInput/BaseInput.module.css

@@ -7,6 +7,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.base-input ::placeholder {
-  color: var(--palette-bg-2);
+.base-input::placeholder {
+  color: var(--palette-bg-3);
 }

package/esm/Button/index.js

@@ -28,7 +28,7 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
       root_fullWidth: !!fullWidth
     }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
     disabled: disabled,
-    "data-cy": "button",
+    "data-testid": "button",
     type: type || "button",
     role: "button"
   }, props), icon && /*#__PURE__*/React__default.createElement("span", {

package/esm/Calendar/components/ContinueButton/index.js

@@ -27,7 +27,7 @@ var ContinueButton = function ContinueButton(_a) {
   }, [isChanged, onContinue, onCancel]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.root),
-    "data-component": "Calendar__ContinueButton"
+    "data-testid": "continue-button"
   }, /*#__PURE__*/React__default.createElement(Button, {
     size: "l",
     onClick: handleClick

package/esm/Calendar/components/Month/Month.js

@@ -37,7 +37,7 @@ var Month = function Month(props) {
   var year = props.startDate.getFullYear();
   var month = leadingZeros(props.startDate.getMonth() + 1, 2);
   return /*#__PURE__*/React.createElement("div", {
-    "data-component": "Month",
+    "data-testid": "month",
     className: clx(styles.root),
     style: {
       left: props.offsetLeft ? "".concat(props.offsetLeft, "px") : undefined

package/esm/Calendar/components/Presets/index.js

@@ -16,7 +16,7 @@ var Presets = function Presets(_a) {
   var presets = _a.presets,
     onPresetSelect = _a.onPresetSelect;
   return /*#__PURE__*/React.createElement("div", {
-    "data-component": "Calendar_Presets"
+    "data-testid": "presets"
   }, /*#__PURE__*/React.createElement("div", {
     className: clx(styles["native-scroll-inner"])
   }, /*#__PURE__*/React.createElement("div", {

package/esm/Calendar/index.js

@@ -140,7 +140,7 @@ var Calendar = function Calendar(_a) {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.root),
-    "data-component": "Calendar",
+    "data-testid": "calendar",
     ref: $root
   }, /*#__PURE__*/React__default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.createElement("div", {
     "data-component": "Months",

package/esm/Chip/index.js

@@ -15,7 +15,6 @@ var Chip = function Chip(props) {
     testID = _b === void 0 ? "chip" : _b;
   return /*#__PURE__*/React__default.createElement("span", {
     className: clx("root"),
-    "data-component": "Chip",
     "data-testid": testID
   }, /*#__PURE__*/React__default.createElement("span", {
     className: clx("inner", {

package/esm/Input/index.js

@@ -15,11 +15,12 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     required = _a.required,
     onChange = _a.onChange,
     inputRef = _a.inputRef,
+    disabled = _a.disabled,
     _b = _a.variant,
     variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
-    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "variant", "size"]);
+    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "disabled", "variant", "size"]);
   return /*#__PURE__*/React__default.createElement(FormField, {
     className: classNames(className),
     label: label,
@@ -32,7 +33,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     endIcon: endIcon,
     variant: variant,
     size: size,
-    disabled: !!props.disabled,
+    disabled: !!disabled,
     error: error
   }, /*#__PURE__*/React__default.createElement(BaseInput, __assign({
     ref: inputRef,

package/esm/TextArea/TextArea.module.css

@@ -0,0 +1,16 @@
+.textarea {
+  resize: none;
+  font: inherit;
+  overflow: auto;
+  text-overflow: unset;
+  padding: 7px 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.textarea::placeholder {
+  color: var(--palette-bg-3);
+}

package/esm/TextArea/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ITextAreaProps } from "./index.props";
+declare const TextArea: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<HTMLDivElement>>;
+export default TextArea;

package/esm/TextArea/index.js

@@ -0,0 +1,48 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { forwardRef } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import classNames from 'classnames/bind';
+import FormField from '../base/FormField/index.js';
+import InputRoot from '../base/InputRoot/index.js';
+import styles from './TextArea.module.css';
+
+var clx = classNames.bind(styles);
+var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    _b = _a.value,
+    value = _b === void 0 ? "" : _b,
+    _c = _a.minRows,
+    minRows = _c === void 0 ? 3 : _c,
+    _d = _a.maxRows,
+    maxRows = _d === void 0 ? 6 : _d,
+    onChange = _a.onChange,
+    label = _a.label,
+    required = _a.required,
+    error = _a.error,
+    hint = _a.hint,
+    disabled = _a.disabled,
+    props = __rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled"]);
+  var onChangeHandler = function onChangeHandler(event) {
+    if (onChange) onChange(event.target.value, event);
+  };
+  return /*#__PURE__*/React__default.createElement(FormField, {
+    ref: ref,
+    className: clx(null, className),
+    required: required,
+    label: label,
+    hint: hint,
+    error: error
+  }, /*#__PURE__*/React__default.createElement(InputRoot, {
+    disabled: !!disabled,
+    error: error
+  }, /*#__PURE__*/React__default.createElement(TextareaAutosize, __assign({
+    "data-testid": "textarea",
+    minRows: minRows,
+    maxRows: maxRows,
+    value: value,
+    className: clx(styles.textarea, className),
+    onChange: onChangeHandler
+  }, props))));
+});
+
+export { TextArea as default };

package/esm/TextArea/index.props.d.ts

@@ -0,0 +1,11 @@
+import type { ChangeEvent, ReactNode, TextareaHTMLAttributes } from "react";
+export interface ITextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "style"> {
+    minRows?: number;
+    maxRows?: number;
+    value?: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: boolean;
+    required?: boolean;
+    onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+}

package/esm/Theme/themes/buenos_aires.js

@@ -25,7 +25,7 @@ var THEME_BA = {
   "palette-success": Color.SUCCESS,
   "typography-alert": Color.ALERT,
   "typography-success": Color.SUCCESS,
-  "typography-secondary": Color.BG_3,
+  "typography-secondary": "rgba(0, 0, 0, .6)",
   "button-primary-color": Color.BLACK,
   "button-primary-bg": Color.PRIMARY_BA_4,
   "button-primary-border-color": Color.PRIMARY_BA_4,

package/esm/Theme/themes/default.js

@@ -25,7 +25,7 @@ var THEME_DEFAULT = {
   "palette-success": Color.SUCCESS,
   "typography-alert": Color.ALERT,
   "typography-success": Color.SUCCESS,
-  "typography-secondary": Color.BG_3,
+  "typography-secondary": "rgba(0, 0, 0, .6)",
   "button-primary-color": Color.WHITE,
   "button-primary-bg": Color.PRIMARY_DEFAULT_4,
   "button-primary-border-color": Color.PRIMARY_DEFAULT_4,

package/esm/base/BaseInput/BaseInput.module.css

@@ -7,6 +7,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.base-input ::placeholder {
-  color: var(--palette-bg-2);
+.base-input::placeholder {
+  color: var(--palette-bg-3);
 }

package/esm/index.d.ts

@@ -24,6 +24,7 @@ export { default as Status } from "./Status";
 export { default as Switch } from "./Switch";
 export { default as TabsMenu } from "./TabsMenu";
 export { default as TabsPanes } from "./TabsPanes";
+export { default as TextArea } from "./TextArea";
 export { THEMES } from "./Theme";
 export { default as Tooltip } from "./Tooltip";
 export { default as TimeSelect } from "./TimeSelect";

package/esm/index.js

@@ -24,6 +24,7 @@ export { default as Status } from './Status/index.js';
 export { default as Switch } from './Switch/index.js';
 export { default as TabsMenu } from './TabsMenu/index.js';
 export { default as TabsPanes } from './TabsPanes/index.js';
+export { default as TextArea } from './TextArea/index.js';
 export { THEMES } from './Theme/index.js';
 export { default as Tooltip } from './Tooltip/index.js';
 export { default as TimeSelect } from './TimeSelect/index.js';

package/esm/theme_ba_variables.css

@@ -23,7 +23,7 @@
 --palette-success: #4AC99B;
 --typography-alert: #FF564E;
 --typography-success: #4AC99B;
---typography-secondary: #D6D9E0;
+--typography-secondary: rgba(0, 0, 0, .6);
 --button-primary-color: #000;
 --button-primary-bg: #FFCE31;
 --button-primary-border-color: #FFCE31;

package/esm/theme_default_variables.css

@@ -23,7 +23,7 @@
 --palette-success: #4AC99B;
 --typography-alert: #FF564E;
 --typography-success: #4AC99B;
---typography-secondary: #D6D9E0;
+--typography-secondary: rgba(0, 0, 0, .6);
 --button-primary-color: #FFF;
 --button-primary-bg: #067AFF;
 --button-primary-border-color: #067AFF;

package/index.d.ts

@@ -24,6 +24,7 @@ export { default as Status } from "./Status";
 export { default as Switch } from "./Switch";
 export { default as TabsMenu } from "./TabsMenu";
 export { default as TabsPanes } from "./TabsPanes";
+export { default as TextArea } from "./TextArea";
 export { THEMES } from "./Theme";
 export { default as Tooltip } from "./Tooltip";
 export { default as TimeSelect } from "./TimeSelect";

package/index.js

@@ -26,13 +26,14 @@ var index$m = require('./Status/index.js');
 var index$n = require('./Switch/index.js');
 var index$o = require('./TabsMenu/index.js');
 var index$p = require('./TabsPanes/index.js');
-var index$q = require('./Theme/index.js');
-var index$r = require('./Tooltip/index.js');
-var index$s = require('./TimeSelect/index.js');
-var index$t = require('./Typography/index.js');
-var index$u = require('./hooks/useMediaSizes/index.js');
-var index$v = require('./hooks/useOnClickOutside/index.js');
-var index$w = require('./hooks/useScrollLock/index.js');
+var index$q = require('./TextArea/index.js');
+var index$r = require('./Theme/index.js');
+var index$s = require('./Tooltip/index.js');
+var index$t = require('./TimeSelect/index.js');
+var index$u = require('./Typography/index.js');
+var index$v = require('./hooks/useMediaSizes/index.js');
+var index$w = require('./hooks/useOnClickOutside/index.js');
+var index$x = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -80,13 +81,14 @@ exports.Status = index$m.default;
 exports.Switch = index$n.default;
 exports.TabsMenu = index$o.default;
 exports.TabsPanes = index$p.default;
-exports.THEMES = index$q.THEMES;
-exports.Tooltip = index$r.default;
-exports.TimeSelect = index$s.default;
-exports.Typography = index$t.default;
-exports.useMediaSizes = index$u.default;
-exports.useOnClickOutside = index$v.default;
-exports.useScrollLock = index$w.default;
+exports.TextArea = index$q.default;
+exports.THEMES = index$r.THEMES;
+exports.Tooltip = index$s.default;
+exports.TimeSelect = index$t.default;
+exports.Typography = index$u.default;
+exports.useMediaSizes = index$v.default;
+exports.useOnClickOutside = index$w.default;
+exports.useScrollLock = index$x.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.89",
+  "version": "0.7.91",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},
@@ -27,7 +27,8 @@
     "date-fns": "^3.6.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-popper": "^2.3.0"
+    "react-popper": "^2.3.0",
+    "react-textarea-autosize": "^8.5.4"
   },
   "devDependencies": {},
   "peerDependencies": {

package/theme_ba_variables.css

@@ -23,7 +23,7 @@
 --palette-success: #4AC99B;
 --typography-alert: #FF564E;
 --typography-success: #4AC99B;
---typography-secondary: #D6D9E0;
+--typography-secondary: rgba(0, 0, 0, .6);
 --button-primary-color: #000;
 --button-primary-bg: #FFCE31;
 --button-primary-border-color: #FFCE31;

package/theme_default_variables.css

@@ -23,7 +23,7 @@
 --palette-success: #4AC99B;
 --typography-alert: #FF564E;
 --typography-success: #4AC99B;
---typography-secondary: #D6D9E0;
+--typography-secondary: rgba(0, 0, 0, .6);
 --button-primary-color: #FFF;
 --button-primary-bg: #067AFF;
 --button-primary-border-color: #067AFF;