@proprioo/salatim 19.5.0 → 19.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 ## Changelog
 
+**19.6.0**
+
+    * Fix: use right class to handle disabled mode for PhoneInput component
+    * Feat: add lang and spellCheck attributes to Textarea component
+    * Feat: increase label and value contrasts in disabled mode
+
 **19.5.0**
 
     * Feat: Add an id as an optional prop into <Button /> component for tracking

package/lib/index.js

@@ -371,13 +371,13 @@
       }
 
       ${Fe} {
-        color: ${ne.grey.base60};
+        color: ${ne.grey.base};
       }
 
-      .react-phone-number-input__input,
+      .PhoneInputInput,
       ${Me}, ${Re} {
-        color: ${ne.grey.base60};
-        -webkit-text-fill-color: ${ne.grey.base60};
+        color: ${ne.grey.base};
+        -webkit-text-fill-color: ${ne.grey.base};
         cursor: not-allowed;
         opacity: 1;
       }
@@ -2628,7 +2628,7 @@ function bw(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,
     font-weight: 300;
     color: currentColor;
   }
-`;class tN extends t.Component{constructor(e){super(e),this.reflowRaf=null;const{value:t}=e;this.state={value:t,focused:!1},this.loadRef=this.loadRef.bind(this),this.handleOnChange=this.handleOnChange.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleBlur=this.handleBlur.bind(this),this.reflowTextarea=this.reflowTextarea.bind(this),this.textareaRef=null}componentDidMount(){const{focused:e}=this.props;this.textareaRef&&e&&this.textareaRef.focus(),this.reflowRaf=window.requestAnimationFrame(this.reflowTextarea)}componentDidUpdate(e){const{value:t,focused:r}=this.props;e.value===t&&e.focused===r||this.setState((e=>Object.assign(Object.assign(Object.assign({},e),{value:t}),r?{focused:r}:{focused:!1}))),this.props.value===e.value||this.reflowRaf||(this.reflowRaf=window.requestAnimationFrame(this.reflowTextarea))}componentWillUnmount(){this.reflowRaf&&window.cancelAnimationFrame(this.reflowRaf)}handleOnChange(e){const{target:{value:t}}=e,{onChange:r}=this.props;this.setState({value:t},(()=>{r&&r(t)}))}handleFocus(){this.setState({focused:!0})}handleBlur(){this.setState({focused:!1})}reflowTextarea(){this.reflowRaf=null;const e=this.textareaRef,{autoResize:t,minHeight:r=160,maxHeight:n=300}=this.props;if(!e||!t)return;const{height:o}=e.style,a=o&&"auto"!==o;e.style.minHeight="auto",e.style.height="auto";const i=`${Math.max(r,Math.min(e.scrollHeight,n))}px`,l=a&&o&&parseFloat(o)>n?o:"auto";e.style.minHeight=i,e.style.height=l}loadRef(e){this.textareaRef=e,e&&this.reflowTextarea()}render(){const{autoResize:e,placeholder:t,maxlength:r,borderRadius:n=xe.biggest,error:o=!1,required:a=!1,disabled:i=!1}=this.props,{value:l,focused:u}=this.state;return s.default.createElement(eN,{error:o,placeholder:t,value:l,autoResize:e,disabled:i,focused:u,maxLength:r,onChange:this.handleOnChange,onFocus:this.handleFocus,onBlur:this.handleBlur,required:a,"data-test":"textarea",ref:this.loadRef,borderRadius:n})}}const rN=c.default.div`
+`;class tN extends t.Component{constructor(e){super(e),this.reflowRaf=null;const{value:t}=e;this.state={value:t,focused:!1},this.loadRef=this.loadRef.bind(this),this.handleOnChange=this.handleOnChange.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleBlur=this.handleBlur.bind(this),this.reflowTextarea=this.reflowTextarea.bind(this),this.textareaRef=null}componentDidMount(){const{focused:e}=this.props;this.textareaRef&&e&&this.textareaRef.focus(),this.reflowRaf=window.requestAnimationFrame(this.reflowTextarea)}componentDidUpdate(e){const{value:t,focused:r}=this.props;e.value===t&&e.focused===r||this.setState((e=>Object.assign(Object.assign(Object.assign({},e),{value:t}),r?{focused:r}:{focused:!1}))),this.props.value===e.value||this.reflowRaf||(this.reflowRaf=window.requestAnimationFrame(this.reflowTextarea))}componentWillUnmount(){this.reflowRaf&&window.cancelAnimationFrame(this.reflowRaf)}handleOnChange(e){const{target:{value:t}}=e,{onChange:r}=this.props;this.setState({value:t},(()=>{r&&r(t)}))}handleFocus(){this.setState({focused:!0})}handleBlur(){this.setState({focused:!1})}reflowTextarea(){this.reflowRaf=null;const e=this.textareaRef,{autoResize:t,minHeight:r=160,maxHeight:n=300}=this.props;if(!e||!t)return;const{height:o}=e.style,a=o&&"auto"!==o;e.style.minHeight="auto",e.style.height="auto";const i=`${Math.max(r,Math.min(e.scrollHeight,n))}px`,l=a&&o&&parseFloat(o)>n?o:"auto";e.style.minHeight=i,e.style.height=l}loadRef(e){this.textareaRef=e,e&&this.reflowTextarea()}render(){const{autoResize:e,placeholder:t,maxlength:r,borderRadius:n=xe.biggest,error:o=!1,required:a=!1,disabled:i=!1,spellCheck:l=!1,lang:u="fr-FR"}=this.props,{value:d,focused:c}=this.state;return s.default.createElement(eN,{spellCheck:l,lang:u,error:o,placeholder:t,value:d,autoResize:e,disabled:i,focused:c,maxLength:r,onChange:this.handleOnChange,onFocus:this.handleFocus,onBlur:this.handleBlur,required:a,"data-test":"textarea",ref:this.loadRef,borderRadius:n})}}const rN=c.default.div`
   font-style: ${({fontStyle:e})=>e};
 
   ${({isTruncated:e,contentSize:t})=>e&&n.css`