@zonos/amino 5.3.5 → 5.3.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.
|
@@ -2,7 +2,7 @@ import { type ReactNode, type TextareaHTMLAttributes } from 'react';
|
|
|
2
2
|
type TextareaAdjustableHeightType = {
|
|
3
3
|
/**
|
|
4
4
|
* @param expandable
|
|
5
|
-
* @desc if set to true, the textarea will expand to fit the content
|
|
5
|
+
* @desc if set to true, the textarea will expand to fit the content.
|
|
6
6
|
*/
|
|
7
7
|
expandable?: boolean;
|
|
8
8
|
/**
|
|
@@ -13,6 +13,11 @@ type TextareaAdjustableHeightType = {
|
|
|
13
13
|
maxRows?: number;
|
|
14
14
|
};
|
|
15
15
|
type TextareaType = {
|
|
16
|
+
/**
|
|
17
|
+
* @param actions
|
|
18
|
+
* @desc actions to be displayed in a footer within the textarea
|
|
19
|
+
*/
|
|
20
|
+
actions?: ReactNode;
|
|
16
21
|
error?: boolean;
|
|
17
22
|
helpText?: ReactNode;
|
|
18
23
|
label?: string;
|
|
@@ -21,6 +26,11 @@ type TextareaType = {
|
|
|
21
26
|
} & TextareaAdjustableHeightType;
|
|
22
27
|
export type TextareaProps = TextareaType & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'>;
|
|
23
28
|
export declare const Textarea: import("react").ForwardRefExoticComponent<{
|
|
29
|
+
/**
|
|
30
|
+
* @param actions
|
|
31
|
+
* @desc actions to be displayed in a footer within the textarea
|
|
32
|
+
*/
|
|
33
|
+
actions?: ReactNode;
|
|
24
34
|
error?: boolean | undefined;
|
|
25
35
|
helpText?: ReactNode;
|
|
26
36
|
label?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../../_tslib-bd4862e8.js"),a=require("react/jsx-runtime"),o=require("react"),
|
|
1
|
+
"use strict";var e=require("../../_tslib-bd4862e8.js"),a=require("react/jsx-runtime"),o=require("react"),t=require("clsx"),r=require("../flex/Flex.js"),i=require("../help-text/HelpText.js"),l=require("../../utils/hooks/useHeightAdjustTextarea.js"),n=require("../../style-inject.es-d4ddeae4.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../text/Text.js"),require("../../styles/constants/theme.js");var s=d(t),_="Amino_Textarea-module__fields--z7afT",u="Amino_Textarea-module__styledBorder--yOPdL",m="Amino_Textarea-module__styledLabelInput--Q6-k8",x="Amino_Textarea-module__styledTextarea--Mk9DH",T="Amino_Textarea-module__hasLabel--qqvuZ",p="Amino_Textarea-module__hasContent--xpSft",c="Amino_Textarea-module__hasError--LdKr8",b="Amino_Textarea-module__actions--2J3kv",f="Amino_Textarea-module__aminoInputWrapper--h9Y-6",h="Amino_Textarea-module__disabled--YH6dm";n.styleInject('.Amino_Textarea-module__fields--z7afT{border:var(--amino-border);border-radius:var(--amino-radius-12);position:relative}.Amino_Textarea-module__fields--z7afT:hover{border:1px solid var(--amino-gray-300)}.Amino_Textarea-module__styledBorder--yOPdL:after{border-radius:var(--amino-radius-12);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.Amino_Textarea-module__styledLabelInput--Q6-k8{color:var(--amino-gray-800);filter:blur(0);font-size:var(--amino-font-size-base);left:16px;line-height:var(--amino-font-size-base);position:absolute;top:calc(var(--amino-font-size-base) + 6px);transform-origin:left top;transition:var(--amino-transition);z-index:3}.Amino_Textarea-module__styledTextarea--Mk9DH{background:var(--amino-input-background);border:0;border-radius:var(--amino-radius-6);box-sizing:border-box;display:block;font-size:var(--amino-font-size-base);font-weight:500;order:2;outline:none;padding:8px 16px 0;position:relative;width:100%;z-index:2}.Amino_Textarea-module__styledTextarea--Mk9DH :-internal-autofill-selected{border-radius:var(--amino-radius-6) 0 0 var(--amino-radius-6)}.Amino_Textarea-module__styledTextarea--Mk9DH :-internal-autofill-selected+label+div{background-color:#e8f0fe}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ{margin-top:24px;padding:0 4px 8px 16px}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ::placeholder{opacity:0}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ.Amino_Textarea-module__hasContent--xpSft::placeholder,.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ:focus::placeholder{opacity:.6}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ.Amino_Textarea-module__hasContent--xpSft+.Amino_Textarea-module__styledLabelInput--Q6-k8,.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ:focus+.Amino_Textarea-module__styledLabelInput--Q6-k8{top:11px;transform:scale(.8)}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ.Amino_Textarea-module__hasContent--xpSft+.Amino_Textarea-module__styledLabelInput--Q6-k8+.Amino_Textarea-module__styledBorder--yOPdL:before,.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasLabel--qqvuZ:focus+.Amino_Textarea-module__styledLabelInput--Q6-k8+.Amino_Textarea-module__styledBorder--yOPdL:before{background:var(--amino-input-background);border-radius:var(--amino-radius-6);content:"";height:25px;left:0;position:absolute;right:0;top:0;z-index:2}.Amino_Textarea-module__styledTextarea--Mk9DH::placeholder{color:var(--amino-gray-400);font-weight:400;opacity:.6;transition:var(--amino-transition)}.Amino_Textarea-module__styledTextarea--Mk9DH:focus{outline:none}.Amino_Textarea-module__styledTextarea--Mk9DH:focus~.Amino_Textarea-module__styledBorder--yOPdL:after{box-shadow:var(--amino-glow-blue)}.Amino_Textarea-module__styledTextarea--Mk9DH.Amino_Textarea-module__hasError--LdKr8~.Amino_Textarea-module__styledBorder--yOPdL:after{box-shadow:var(--amino-glow-error)}.Amino_Textarea-module__actions--2J3kv{background:var(--amino-page-background);border-bottom-left-radius:16px;border-bottom-right-radius:16px;bottom:1px;height:58px;left:1px;padding:0 16px;position:absolute;right:1px;text-align:right;z-index:3}.Amino_Textarea-module__aminoInputWrapper--h9Y-6{position:relative;width:var(--amino-textarea-width)}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm *{cursor:not-allowed}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm .Amino_Textarea-module__fields--z7afT{opacity:var(--amino-opacity-disabled)}.Amino_Textarea-module__aminoInputWrapper--h9Y-6.Amino_Textarea-module__disabled--YH6dm .Amino_Textarea-module__styledTextarea--Mk9DH{-webkit-user-select:none;user-select:none}');var v=o.forwardRef((function(t,n){var d,v,A=t.actions,y=t.className,g=t.disabled,k=t.error,q=t.expandable,H=t.helpText,L=t.label,w=t.maxRows,j=t.rows,M=t.style,D=t.value,z=t.width,I=e.__rest(t,["actions","className","disabled","error","expandable","helpText","label","maxRows","rows","style","value","width"]),Y=!!D,Z=o.useRef(null),N=o.useRef(null);return l.useHeightAdjustTextarea({additionalHeight:A?null===(d=N.current)||void 0===d?void 0:d.clientHeight:0,maxRows:w,ref:Z,shouldExpand:!!q,textareaValue:(null==D?void 0:D.toString())||""}),a.jsxs("div",{className:s.default(y,f,"amino-input-wrapper",g&&h),style:e.__assign(e.__assign({},M),{"--amino-textarea-width":z||"100%"}),children:[a.jsxs("div",{className:_,onClick:function(){var e;return null===(e=null==Z?void 0:Z.current)||void 0===e?void 0:e.focus()},role:"button",tabIndex:0,children:[a.jsx("textarea",e.__assign({ref:function(e){n&&"function"==typeof n?n(e):n&&(n.current=e),Z.current=e},className:s.default(x,k&&c,L&&T,Y&&p),disabled:g,rows:j,value:D},I)),a.jsx("label",{className:m,"data-label":L,htmlFor:null===(v=null==Z?void 0:Z.current)||void 0===v?void 0:v.id,onClick:function(){var e;return null===(e=null==Z?void 0:Z.current)||void 0===e?void 0:e.focus()},children:L}),a.jsx("div",{className:u})]}),a.jsx(i.HelpText,{error:k,helpText:H}),A&&a.jsx("div",{ref:N,className:b,children:a.jsx(r.Flex,{alignItems:"center",fullHeight:!0,justifyContent:"flex-end",children:A})})]})}));exports.Textarea=v;
|
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type MutableRefObject } from 'react';
|
|
2
2
|
type TextareaParams = {
|
|
3
|
+
additionalHeight?: number;
|
|
3
4
|
initialRows?: number;
|
|
4
5
|
maxRows?: number;
|
|
5
6
|
ref: MutableRefObject<HTMLTextAreaElement | null>;
|
|
@@ -10,5 +11,5 @@ type TextareaParams = {
|
|
|
10
11
|
* This hook is used to adjust the height of textarea to the defined `maxRows`. It will
|
|
11
12
|
* expand the height of textarea up to `maxRows` and then it will add scroll bar.
|
|
12
13
|
*/
|
|
13
|
-
export declare const useHeightAdjustTextarea: ({ initialRows, maxRows, ref, shouldExpand, textareaValue, }: TextareaParams) => void;
|
|
14
|
+
export declare const useHeightAdjustTextarea: ({ additionalHeight, initialRows, maxRows, ref, shouldExpand, textareaValue, }: TextareaParams) => void;
|
|
14
15
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../../_tslib-bd4862e8.js"),t=require("react"),a=function(e,t){return window.getComputedStyle(e)[t]};exports.useHeightAdjustTextarea=function(
|
|
1
|
+
"use strict";var e=require("../../_tslib-bd4862e8.js"),t=require("react"),a=function(e,t){return window.getComputedStyle(e)[t]};exports.useHeightAdjustTextarea=function(i){var o=i.additionalHeight,r=void 0===o?0:o,s=i.initialRows,l=void 0===s?2:s,n=i.maxRows,d=void 0===n?5:n,h=i.ref,u=i.shouldExpand,c=i.textareaValue,g=e.__read(t.useState(0),2),p=g[0],v=g[1];t.useEffect((function(){var e=h.current;if(e&&u){var t=parseFloat(a(e,"height")),i=parseFloat(a(e,"lineHeight")),o=parseFloat(a(e,"paddingTop"))||0,s=parseFloat(a(e,"paddingBottom"))||0;p||v(t);var l=i*d+o+s;if(e.style.height="0",e.scrollHeight+r<=l){var n=Math.max(p,e.scrollHeight+r);e.style.height="".concat(n,"px"),e.style.overflow="hidden"}else e.style.height="".concat(l+r,"px"),e.style.overflow="auto"}}),[h,d,c,u,p,l,r])};
|