@mobilestockweb/search 0.0.8 → 1.0.0

package/index.d.ts

@@ -1,13 +1,63 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react';
 
-interface SearchProps extends InputHTMLAttributes<HTMLInputElement> {
-    fetchSuggestions(query: string): Promise<string[]> | string[];
-    onSearch(query: string): void;
+type EventType = 'SEARCHING' | 'SEARCHED' | 'CLEARED' | 'SELECTED' | 'DESELECTED' | 'TYPING';
+interface CommonTypes {
+    disableSuggestions?: boolean;
+    iconSearchButton?: 'Search' | 'ChevronRight' | 'ArrowRight';
+    searchWhenTyping?: boolean;
     placeholder?: string;
-    isSticky?: boolean;
-    isLoading?: boolean;
+    onChange?(data: {
+        value: unknown;
+        event: EventType;
+    }): void;
+    format?(value: string): string;
 }
-declare function Search({ placeholder, fetchSuggestions, onSearch, isSticky, isLoading, ...rest }: SearchProps): react_jsx_runtime.JSX.Element;
+interface SearchProviderProps<T extends DataType> extends CommonTypes {
+    valueSuggestionKey?: T extends object ? LeafObjectKeyPath<T> : never;
+    disableSuggestions?: boolean;
+    defaultData?: T[];
+    children: React.ReactNode;
+    fetchOnQuery?(query?: string, signal?: AbortSignal): Promise<T[]>;
+}
+
+type DataType = object | string;
+type PrimitiveValue = string | number;
+type JoinDotPath<Prefix extends string, Key extends string> = Prefix extends '' ? Key : `${Prefix}.${Key}`;
+type JoinArrayIndexPath<Prefix extends string> = `${Prefix}[${number}]`;
+type JoinArrayWildcardPath<Prefix extends string> = `${Prefix}[*]`;
+type DepthDecrementMap = {
+    0: 0;
+    1: 0;
+    2: 1;
+    3: 2;
+    4: 3;
+    5: 4;
+    6: 5;
+    7: 6;
+    8: 7;
+    9: 8;
+    10: 9;
+};
+type DecrementDepth<Depth extends number> = Depth extends keyof DepthDecrementMap ? DepthDecrementMap[Depth] : 0;
+type LeafObjectKeyPath<typeObject, Prefix extends string = '', Depth extends number = 8> = Depth extends 0 ? never : typeObject extends PrimitiveValue ? Prefix extends '' ? never : Prefix : typeObject extends readonly (infer typeElement)[] ? typeElement extends PrimitiveValue ? never : LeafObjectKeyPath<typeElement, JoinArrayIndexPath<Prefix>, DecrementDepth<Depth>> | LeafObjectKeyPath<typeElement, JoinArrayWildcardPath<Prefix>, DecrementDepth<Depth>> : typeObject extends object ? {
+    [key in Extract<keyof typeObject, string>]: LeafObjectKeyPath<typeObject[key], JoinDotPath<Prefix, key>, DecrementDepth<Depth>>;
+}[Extract<keyof typeObject, string>] : never;
+type NormalizeSearchItem<typeItem> = typeItem extends string ? string : typeItem;
+type FetchOnQueryFunction<typeItem> = (query?: string, signal?: AbortSignal) => Promise<NormalizeSearchItem<typeItem>[]>;
+type InferItemFromArray<typeArray> = typeArray extends readonly (infer typeItem)[] ? typeItem : never;
+type InferItemFromFetchOnQuery<typeFetchOnQuery> = Awaited<typeFetchOnQuery extends (...args: any[]) => any ? ReturnType<typeFetchOnQuery> : never> extends readonly (infer typeItem)[] ? typeItem : never;
+type ValueSuggestionKeyForItem<typeItem> = NormalizeSearchItem<typeItem> extends object ? '' | LeafObjectKeyPath<NormalizeSearchItem<typeItem>> : never;
+interface PropsSearchBase<typeItem> {
+    variant?: 'ATTACHED' | 'DETACHED' | 'NO_BUTTON';
+    valueSuggestionKey?: ValueSuggestionKeyForItem<typeItem>;
+}
+declare function Search<typeDefaultData extends readonly unknown[]>(props: PropsSearchBase<InferItemFromArray<typeDefaultData>> & {
+    defaultData: typeDefaultData;
+    fetchOnQuery?: FetchOnQueryFunction<InferItemFromArray<typeDefaultData>>;
+} & Omit<SearchProviderProps<DataType>, 'valueSuggestionKey' | 'defaultData' | 'children'>): JSX.Element;
+declare function Search<typeFetchOnQuery extends (query?: string, signal?: AbortSignal) => Promise<any[]>>(props: PropsSearchBase<InferItemFromFetchOnQuery<typeFetchOnQuery>> & {
+    defaultData?: undefined;
+    fetchOnQuery: typeFetchOnQuery;
+} & Omit<SearchProviderProps<DataType>, 'valueSuggestionKey' | 'defaultData' | 'children'>): JSX.Element;
 
-export { Search, type SearchProps };
+export { type DataType, type LeafObjectKeyPath, Search };

package/index.js

@@ -1,26 +1 @@
-"use strict";var B=Object.create;var p=Object.defineProperty,O=Object.defineProperties,W=Object.getOwnPropertyDescriptor,F=Object.getOwnPropertyDescriptors,J=Object.getOwnPropertyNames,f=Object.getOwnPropertySymbols,X=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var H=(e,t,n)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,E=(e,t)=>{for(var n in t||(t={}))I.call(t,n)&&H(e,n,t[n]);if(f)for(var n of f(t))L.call(t,n)&&H(e,n,t[n]);return e},$=(e,t)=>O(e,F(t));var z=(e,t)=>{var n={};for(var r in e)I.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&f)for(var r of f(e))t.indexOf(r)<0&&L.call(e,r)&&(n[r]=e[r]);return n};var _=(e,t)=>{for(var n in t)p(e,n,{get:t[n],enumerable:!0})},R=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of J(t))!I.call(e,a)&&a!==n&&p(e,a,{get:()=>t[a],enumerable:!(r=W(t,a))||r.enumerable});return e};var w=(e,t,n)=>(n=e!=null?B(X(e)):{},R(t||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e)),G=e=>R(p({},"__esModule",{value:!0}),e);var x=(e,t,n)=>new Promise((r,a)=>{var h=i=>{try{d(n.next(i))}catch(c){a(c)}},y=i=>{try{d(n.throw(i))}catch(c){a(c)}},d=i=>i.done?r(i.value):Promise.resolve(i.value).then(h,y);d((n=n.apply(e,t)).next())});var ee={};_(ee,{Search:()=>Q});module.exports=G(ee);var g=require("react"),l=w(require("styled-components")),M=require("@mobilestockweb/button"),T=require("@mobilestockweb/container"),m=require("@mobilestockweb/list"),k=w(require("@mobilestockweb/tools"));var s=require("react/jsx-runtime");function Q(y){var d=y,{placeholder:e="ID, Nome e/ou tamanho do produto",fetchSuggestions:t,onSearch:n,isSticky:r=!1,isLoading:a=!1}=d,h=z(d,["placeholder","fetchSuggestions","onSearch","isSticky","isLoading"]);let i=(0,g.useRef)(null),c=(0,g.useRef)(null),[v,D]=(0,g.useState)([]),[N,b]=(0,g.useState)(!1),C=3,K=500;function P(o){return x(this,null,function*(){if(o.trim().length<C){b(!1);return}let A=yield t(o);D(A),b(!0)})}function S(o){let u=o.trim();u.length>=C&&(b(!1),n(u))}function V(o){i.current&&(i.current.value=o),S(o)}function q(o){c.current&&clearTimeout(c.current),c.current=setTimeout(()=>P(o.target.value),K)}return(0,s.jsxs)(U,{$isSticky:r,children:[(0,s.jsxs)(Y,{align:"CENTER",overflow:"HIDDEN",children:[(0,s.jsx)(Z,$(E({},h),{ref:i,onChange:q,placeholder:e,onKeyDown:o=>{var u;o.key==="Enter"&&S((u=i.current)==null?void 0:u.value)}})),(0,s.jsx)(j,{icon:"Search",size:"SM",onClick:()=>{var o;return S((o=i.current)==null?void 0:o.value)},isLoading:a})]}),N&&(0,s.jsx)(T.Container.Horizontal,{children:(0,s.jsx)(m.List,{data:v,renderItem:o=>(0,s.jsx)(m.List.Item.Horizontal,{padding:"2XS",onClick:()=>V(o),children:(0,s.jsx)(m.List.Item.Text,{children:o})}),itemKey:(o,u)=>`${o}-${u}`,isLoading:a,whenEmptyList:(0,s.jsx)(m.List.Item.Horizontal,{padding:"MD_SM",align:"CENTER",children:(0,s.jsx)(m.List.Item.Text,{size:"MD",children:"Nenhum resultado encontrado"})})})})]})}var U=l.default.div`
-  width: 100%;
-  border-radius: ${({theme:e})=>e.borderRadius.default};
-  box-shadow: 0 0.125rem 0.25rem ${({theme:e})=>e.colors.container.shadow};
-  ${({$isSticky:e})=>e&&l.css`
-      position: sticky;
-      top: 4.5rem;
-    `}
-`,Y=(0,l.default)(T.Container.Horizontal)`
-  height: 3rem;
-  border-radius: ${({theme:e})=>e.borderRadius.default};
-`,Z=l.default.input`
-  padding: 0 1rem;
-  width: 100%;
-  height: 100%;
-  background-color: ${({theme:e})=>e.colors.input.default};
-  font-size: ${({theme:e})=>e.font.size.md};
-  color: ${({theme:e})=>k.default.defineTextColor(e.colors.input.default)};
-  border: none;
-  outline: none;
-`,j=(0,l.default)(M.Button)`
-  flex: none;
-  height: 100%;
-  width: 4rem;
-  border-radius: ${({theme:e})=>e.borderRadius.none};
-`;0&&(module.exports={Search});
+"use strict";var we=Object.create;var E=Object.defineProperty,Fe=Object.defineProperties,Ke=Object.getOwnPropertyDescriptor,Ne=Object.getOwnPropertyDescriptors,je=Object.getOwnPropertyNames,ee=Object.getOwnPropertySymbols,Be=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty,Xe=Object.prototype.propertyIsEnumerable;var te=(t,r,e)=>r in t?E(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,L=(t,r)=>{for(var e in r||(r={}))re.call(r,e)&&te(t,e,r[e]);if(ee)for(var e of ee(r))Xe.call(r,e)&&te(t,e,r[e]);return t},V=(t,r)=>Fe(t,Ne(r));var We=(t,r)=>{for(var e in r)E(t,e,{get:r[e],enumerable:!0})},ne=(t,r,e,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of je(r))!re.call(t,n)&&n!==e&&E(t,n,{get:()=>r[n],enumerable:!(o=Ke(r,n))||o.enumerable});return t};var M=(t,r,e)=>(e=t!=null?we(Be(t)):{},ne(r||!t||!t.__esModule?E(e,"default",{value:t,enumerable:!0}):e,t)),Me=t=>ne(E({},"__esModule",{value:!0}),t);var oe=(t,r,e)=>new Promise((o,n)=>{var d=i=>{try{u(e.next(i))}catch(g){n(g)}},l=i=>{try{u(e.throw(i))}catch(g){n(g)}},u=i=>i.done?o(i.value):Promise.resolve(i.value).then(d,l);u((e=e.apply(t,r)).next())});var $e={};We($e,{Search:()=>Qe});module.exports=Me($e);var Ce=require("styled-components"),N=require("@mobilestockweb/container");var c=require("react"),le=require("@mobilestockweb/container");var ae=M(require("fuse.js")),H=require("lodash"),ie="[*]";function z(t){return["string","number","boolean"].includes(typeof t)}function se(t,r=""){let e=[],o=t;for(let n in o){let d=r?isNaN(Number(n))?`${r}.${n}`:`${r}`:n;e.push(d),typeof o[n]=="object"&&o[n]!==null&&(e=e.concat(se(o[n],d)))}return e}function ce(t){if(z(t))return String(t);let r=t;for(let e in r){let o=r[e];if(z(o))return String(o);if(typeof o=="object"&&o!==null){let n=ce(o);if(n)return n}}return String(t)}function Je(t,r,e){if(t.length===0)return[];if(r.trim().length===0)return[];let o=t[0];return new ae.default(t,{threshold:.4,ignoreLocation:!0,ignoreDiacritics:!0,minMatchCharLength:4,keys:e?[String(e).replace(/\[\d+\]/g,"").replace(/\[\*\]/g,"")]:typeof o=="string"?[]:se(o)}).search(r.trim()).map(l=>l.item)}var R={filterDataWithFuse:Je,getValueBySuggestionKeyPath(t,r){if(!r.includes(ie)){let l=(0,H.get)(t,r);return z(l)?String(l):void 0}let e=r.indexOf(ie),o=r.slice(0,e),n=r.slice(e+3).replace(/^\./,""),d=(0,H.get)(t,o);if(Array.isArray(d))for(let l of d){let u=n?(0,H.get)(l,n):l;if(z(u))return String(u)}},getFirstPrimitiveKeyRecursively:ce};var J=require("react/jsx-runtime"),ue=(0,c.createContext)(null);function de({valueSuggestionKey:t,disableSuggestions:r,searchWhenTyping:e,iconSearchButton:o,defaultData:n=[],placeholder:d,children:l,fetchOnQuery:u,onChange:i,format:g}){let[j,s]=(0,c.useState)(!1),[b,Ae]=(0,c.useState)(n),[q,Oe]=(0,c.useState)(null),[ke,v]=(0,c.useState)([]),B=(0,c.useRef)(null),X=(0,c.useRef)(null),W=(0,c.useRef)(null),Le=(0,c.useRef)("");(0,c.useEffect)(()=>(document.addEventListener("mousedown",G),()=>{document.removeEventListener("mousedown",G)}),[]);let G=(0,c.useCallback)(a=>{W.current&&(W.current.contains(a.target)||v([]))},[]);function Ve(){v([])}function _(a){let{v4:S}=require("uuid"),P=a.map(D=>{var Z;return{id:S(),item:D,value:t?(Z=R.getValueBySuggestionKeyPath(D,String(t)))!=null?Z:R.getFirstPrimitiveKeyRecursively(D):R.getFirstPrimitiveKeyRecursively(D)}});i==null||i({value:P.map(D=>D.item),event:"SEARCHED"}),v(P)}function Y(){var a;B.current&&((a=X.current)==null||a.abort(),clearTimeout(B.current))}function He(a){Y(),!(a.trim().length<=2)&&(B.current=setTimeout(()=>{U(a)},300))}function U(a){return oe(this,null,function*(){try{if(v([]),s(!0),i==null||i({value:{query:a,cachedData:b},event:"SEARCHING"}),b.length>0){let P=R.filterDataWithFuse(b,a);if(P.length>0){_(P);return}}if(!u)return;Ae([]);let S;if(u.length===2?(X.current=new AbortController,S=yield u(a,X.current.signal)):S=yield u(a),!S){v([]);return}_(S)}finally{s(!1)}})}function ze(a){Oe(a),a!==q&&(a===null?i==null||i({value:null,event:"DESELECTED"}):(v([]),i==null||i({value:a,event:"SELECTED"})))}return(0,J.jsx)(ue.Provider,{value:{configureSelectedItem:ze,cancelOngoingRequest:Y,debounceSearch:He,clearResults:Ve,onChange:i,search:U,format:g,disableSuggestions:r,iconSearchButton:o,searchWhenTyping:e,inputContentRef:Le,searchResults:ke,selectedItem:q,placeholder:d,isLoading:j},children:(0,J.jsx)(le.Container.Vertical,{ref:W,children:l})})}function p(){let t=(0,c.useContext)(ue);if(!t)throw new Error("useSearch must be used within a SearchProvider");return t}var T=require("react"),pe=require("styled-components"),fe=require("@mobilestockweb/clickable"),Q=require("@mobilestockweb/container"),me=require("@mobilestockweb/icons"),he=require("@mobilestockweb/loading-spinner"),ye=M(require("@mobilestockweb/tools"));var m=require("react/jsx-runtime");function C({hiddenLoadingIndicator:t=!1}){let r=(0,pe.useTheme)(),e=p(),[o,n]=(0,T.useState)(!1),[d,l]=(0,T.useState)(""),u=(0,T.useRef)(null);(0,T.useEffect)(()=>{e.selectedItem&&(l(String(e.selectedItem)),n(!0))},[e.selectedItem]);function i(){typeof e.onChange=="function"&&e.onChange({value:null,event:"CLEARED"}),e.clearResults(),e.configureSelectedItem(null),e.cancelOngoingRequest(),l(""),n(!1),e.debounceSearch("")}function g(s){e.format&&(s=e.format(s)),l(s),n(s.length>0),e.searchWhenTyping&&s.length>0?e.debounceSearch(s):e.inputContentRef.current=s,e.configureSelectedItem(null),typeof e.onChange=="function"&&e.onChange({value:s,event:"TYPING"})}function j(s){var b;s.key==="Enter"&&(s.preventDefault(),(b=u.current)==null||b.blur(),!e.searchWhenTyping&&e.inputContentRef.current&&e.inputContentRef.current.length>0&&e.debounceSearch(e.inputContentRef.current))}return(0,m.jsxs)(Q.Container.Horizontal,{full:!0,style:{backgroundColor:r.colors.search.backgroundColor},padding:"NONE_XS",align:"CENTER",gap:"XS",children:[(0,m.jsx)("input",{ref:u,value:d,style:{height:40,flex:1,outline:"none",border:"none",backgroundColor:"transparent",color:ye.default.defineTextColor(r.colors.search.backgroundColor)},onChange:s=>g(s.target.value),onFocus:s=>!!e.selectedItem&&s.target.select(),onKeyDown:j,placeholder:e.placeholder}),!t&&e.isLoading&&(0,m.jsx)(he.LoadingSpinner,{color:r.colors.search.borderColor}),o&&(0,m.jsx)(Q.Container.Horizontal,{align:"CENTER",children:(0,m.jsx)(fe.Clickable,{onClick:i,children:(0,m.jsx)(me.Icon,{name:"X",size:"XS"})})})]})}var ge=require("styled-components"),Se=require("@mobilestockweb/clickable"),Te=require("@mobilestockweb/icons"),be=require("@mobilestockweb/loading-spinner"),$=M(require("@mobilestockweb/tools"));var w=require("react/jsx-runtime");function F(t){let r=p(),e=(0,ge.useTheme)();return(0,w.jsx)(Se.Clickable,V(L({onClick:()=>r.search(r.inputContentRef.current||""),disabled:r.isLoading,style:{backgroundColor:e.colors.button.default,padding:12,borderRadius:6},"data-testid":"search-button"},t),{children:r.isLoading?(0,w.jsx)(be.LoadingSpinner,{size:"SM","data-testid":"activity-indicator",color:$.default.defineTextColor(e.colors.button.default)}):(0,w.jsx)(Te.Icon,{name:r.iconSearchButton||"Search",size:"SM",color:$.default.defineTextColor(e.colors.button.default)})}))}var ve=require("styled-components"),De=require("@mobilestockweb/container"),K=require("@mobilestockweb/list");var A=require("react/jsx-runtime");function I(){let t=p(),r=(0,ve.useTheme)();return t.disableSuggestions?null:(0,A.jsx)(De.Container.Vertical,{style:{position:"absolute",top:48,left:0,right:0,borderWidth:2,borderColor:r.colors.search.borderColor,borderStyle:"solid",borderRadius:8,maxHeight:150,backgroundColor:r.colors.search.backgroundColor,overflow:"hidden",display:t.searchResults.length>0?"flex":"none"},"data-testid":"suggestion-container",children:(0,A.jsx)(K.List,{itemKey:"id",data:t.searchResults,renderItem:({value:e})=>(0,A.jsx)(K.List.Item.Horizontal,{padding:"XS",align:"START_CENTER",onClick:()=>t.configureSelectedItem(e),children:(0,A.jsx)(K.List.Item.Text,{children:e})})})})}var h=require("react/jsx-runtime");function Ie(){let t=p(),r=(0,Ce.useTheme)();return(0,h.jsx)(N.Container.Vertical,{style:{position:"relative",zIndex:t.searchResults.length>0?1e3:void 0},"data-testid":"container-vertical-zindex",children:(0,h.jsxs)(N.Container.Vertical,{gap:"2XS",style:{position:"relative"},children:[(0,h.jsxs)(N.Container.Horizontal,{style:{backgroundColor:r.colors.search.backgroundColor,borderColor:r.colors.search.borderColor,borderWidth:2,borderRadius:8,borderStyle:"solid",overflow:"hidden"},children:[(0,h.jsx)(C,{hiddenLoadingIndicator:!0}),(0,h.jsx)(F,{})]}),(0,h.jsx)(I,{})]})})}var xe=require("styled-components"),x=require("@mobilestockweb/container");var f=require("react/jsx-runtime");function Pe(){let t=p(),r=(0,xe.useTheme)();return(0,f.jsx)(x.Container.Vertical,{style:{position:"relative",zIndex:t.searchResults.length>0?1e3:void 0},"data-testid":"container-vertical-zindex",children:(0,f.jsxs)(x.Container.Horizontal,{gap:"2XS",children:[(0,f.jsxs)(x.Container.Vertical,{full:!0,gap:"2XS",style:{position:"relative"},children:[(0,f.jsx)(x.Container.Horizontal,{style:{borderColor:r.colors.search.borderColor,borderWidth:2,borderRadius:8,borderStyle:"solid",overflow:"hidden"},children:(0,f.jsx)(C,{hiddenLoadingIndicator:!0})}),(0,f.jsx)(I,{})]}),(0,f.jsx)(x.Container.Vertical,{children:(0,f.jsx)(F,{})})]})})}var Ee=require("styled-components"),O=require("@mobilestockweb/container");var y=require("react/jsx-runtime");function Re(){let t=p(),r=(0,Ee.useTheme)();return(0,y.jsx)(O.Container.Vertical,{style:{position:"relative",zIndex:t.searchResults.length>0?1e3:void 0},"data-testid":"container-vertical-zindex",children:(0,y.jsx)(O.Container.Horizontal,{gap:"2XS",children:(0,y.jsxs)(O.Container.Vertical,{full:!0,gap:"2XS",style:{position:"relative"},children:[(0,y.jsx)(O.Container.Horizontal,{style:{borderColor:r.colors.search.borderColor,borderWidth:2,borderRadius:8,borderStyle:"solid",overflow:"hidden"},children:(0,y.jsx)(C,{})}),(0,y.jsx)(I,{})]})})})}var k=require("react/jsx-runtime");function Qe(t){return(0,k.jsx)(de,V(L({searchWhenTyping:!["ATTACHED","DETACHED"].includes(t.variant||"")},t),{children:t.variant==="ATTACHED"?(0,k.jsx)(Ie,{}):t.variant==="DETACHED"?(0,k.jsx)(Pe,{}):(0,k.jsx)(Re,{})}))}0&&(module.exports={Search});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobilestockweb/search",
-  "version": "0.0.8",
+  "version": "1.0.0",
   "main": "index.js",
   "peerDependencies": {
     "react": "18.2.0",
@@ -8,9 +8,16 @@
     "styled-components": "^6.1.8"
   },
   "dependencies": {
+    "fuse.js": "7.1.0",
+    "lodash": "^4.17.21",
+    "uuid": "^13.0.0",
     "@mobilestockweb/button": "^1.0.12",
     "@mobilestockweb/container": "^1.0.0",
-    "@mobilestockweb/list": "^0.0.10",
-    "@mobilestockweb/tools": "^0.0.16"
+    "@mobilestockweb/tools": "^0.0.16",
+    "@mobilestockweb/clickable": "^1.0.7",
+    "@mobilestockweb/list": "^0.0.10"
+  },
+  "devDependencies": {
+    "@types/lodash": "4.17.21"
   }
 }