@licklist/design 0.44.506 → 0.44.507

package/dist/typeahead/Typeahead.d.ts

@@ -11,7 +11,8 @@ export interface TypeaheadProps {
     name: string;
     isMultipleChoise?: boolean;
     noOptionsMessage: string;
+    isInvalid?: boolean;
 }
-declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, noOptionsMessage, }: TypeaheadProps): JSX.Element;
+declare function Typeahead({ options, placeholder, isRequired, isMultipleChoise, name, noOptionsMessage, isInvalid, }: TypeaheadProps): JSX.Element;
 export { Typeahead };
 //# sourceMappingURL=Typeahead.d.ts.map

package/dist/typeahead/Typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":";AAIA,oBAAY,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,gBAAqB,GACtB,EAAE,cAAc,eAwBhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":";AAIA,oBAAY,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,iBAAS,SAAS,CAAC,EACjB,OAAO,EACP,WAAW,EACX,UAAkB,EAClB,gBAAgB,EAChB,IAAS,EACT,gBAAqB,EACrB,SAAS,GACV,EAAE,cAAc,eAgChB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/typeahead/Typeahead.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("react")),t=require("react-hook-form"),n=e(require("react-select"));exports.Typeahead=function(e){var o=e.options,l=e.placeholder,a=e.isRequired,i=void 0!==a&&a,u=e.isMultipleChoise,s=e.name,c=void 0===s?"":s,d=e.noOptionsMessage,p=void 0===d?"":d,f=t.useFormContext().control;return r.createElement(r.Fragment,null,r.createElement(t.Controller,{name:c,control:f,rules:{required:i},render:function(e){var t=e.field;return r.createElement(n,{placeholder:l,value:t.value,isMulti:u,onChange:function(e){t.onChange(e)},options:o,noOptionsMessage:function(){return r.createElement("span",null,p)}})}}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("tslib"),n=e(require("react")),t=require("react-hook-form"),o=e(require("react-select"));exports.Typeahead=function(e){var i=e.options,l=e.placeholder,a=e.isRequired,u=void 0!==a&&a,s=e.isMultipleChoise,c=e.name,d=void 0===c?"":c,p=e.noOptionsMessage,f=void 0===p?"":p,v=e.isInvalid,m=t.useFormContext().control;return n.createElement(n.Fragment,null,n.createElement(t.Controller,{name:d,control:m,rules:{required:u},render:function(e){var t=e.field;return n.createElement(o,{placeholder:l,value:t.value,isMulti:s,styles:{control:function(e){return r.__assign(r.__assign({},e),v?{borderColor:"red"}:{})}},onChange:function(e){t.onChange(e)},options:i,noOptionsMessage:function(){return n.createElement("span",null,f)}})}}))};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.506",
+  "version": "0.44.507",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/typeahead/Typeahead.tsx

@@ -15,6 +15,7 @@ export interface TypeaheadProps {
   name: string;
   isMultipleChoise?: boolean;
   noOptionsMessage: string;
+  isInvalid?: boolean;
 }
 
 function Typeahead({
@@ -24,9 +25,12 @@ function Typeahead({
   isMultipleChoise,
   name = "",
   noOptionsMessage = "",
+  isInvalid,
 }: TypeaheadProps) {
   const { control } = useFormContext();
 
+  const getErrorStyle = () => (isInvalid ? { borderColor: "red" } : {});
+
   return (
     <>
       <Controller
@@ -38,6 +42,12 @@ function Typeahead({
             placeholder={placeholder}
             value={field.value}
             isMulti={isMultipleChoise}
+            styles={{
+              control: (base) => ({
+                ...base,
+                ...getErrorStyle(),
+              }),
+            }}
             onChange={(value) => {
               field.onChange(value);
             }}