@mobilestockweb/search 0.0.1

package/index.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputHTMLAttributes } from 'react';
+
+interface SearchProps extends InputHTMLAttributes<HTMLInputElement> {
+    fetchSuggestions(query: string): Promise<string[]> | string[];
+    onSearch(query: string): void;
+    placeholder?: string;
+    isSticky?: boolean;
+    isLoading?: boolean;
+}
+declare function Search({ placeholder, fetchSuggestions, onSearch, isSticky, isLoading, ...rest }: SearchProps): react_jsx_runtime.JSX.Element;
+
+export { Search, type SearchProps };

package/index.js

@@ -0,0 +1,26 @@
+"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});

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@mobilestockweb/search",
+  "version": "0.0.1",
+  "main": "index.js",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "^6.1.8"
+  },
+  "dependencies": {
+    "@mobilestockweb/button": "^1.0.7",
+    "@mobilestockweb/container": "^0.0.3",
+    "@mobilestockweb/list": "^0.0.3",
+    "@mobilestockweb/tools": "^0.0.16"
+  }
+}