@arkyn/components 1.3.143 → 1.3.145

package/dist/components/ImageUpload/HasFileContent/index.js

@@ -15,6 +15,6 @@ function HasFileContent(props) {
         };
         input.click();
     }
-    return (_jsxs("div", { className: "arkynImageUploadHasFileContent", style: { backgroundImage: `url(${filePath})` }, children: [reSendImage && (_jsx(Tooltip, { orientation: "bottom", text: "Reenviar imagem", children: _jsx(IconButton, { type: "button", "aria-label": "resend image", variant: "outline", scheme: "danger", size: "sm", isLoading: isLoading, onClick: reSendImage, icon: RefreshCw }) })), _jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "outline", size: "sm", type: "button", children: changeImageButtonText })] }));
+    return (_jsxs("div", { className: "arkynImageUploadHasFileContent", style: { backgroundImage: `url("${filePath}")` }, children: [reSendImage && (_jsx(Tooltip, { orientation: "bottom", text: "Reenviar imagem", children: _jsx(IconButton, { type: "button", "aria-label": "resend image", variant: "outline", scheme: "danger", size: "sm", isLoading: isLoading, onClick: reSendImage, icon: RefreshCw }) })), _jsx(Button, { isLoading: isLoading, onClick: handleClick, variant: "outline", size: "sm", type: "button", children: changeImageButtonText })] }));
 }
 export { HasFileContent };

package/dist/components/Select/getConfig.d.ts

@@ -1,5 +1,7 @@
 import { SelectProps } from "@arkyn/types";
 declare function getConfig(props: SelectProps, isFocused: boolean): {
+    isSearchable?: boolean;
+    onSearch?: (value: string) => void;
     name: string;
     value?: string;
     defaultValue?: string;

package/dist/components/Select/getConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getConfig.d.ts","sourceRoot":"","sources":["../../../src/components/Select/getConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,iBAAS,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CxD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"getConfig.d.ts","sourceRoot":"","sources":["../../../src/components/Select/getConfig.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAK3C,iBAAS,SAAS,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CxD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAQhD,OAAO,cAAc,CAAC;AAGtB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CA4IjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,cAAc,CAAC;AAEtB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAgKjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Select/index.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Check, ChevronDown } from "lucide-react";
+import { Check, ChevronDown, Search } from "lucide-react";
 import { useRef, useState } from "react";
 import { getConfig } from "./getConfig";
-import "./styles.css";
 import { useFormController } from "../../components/Form/FormController";
+import { Input } from "../Input";
+import "./styles.css";
 function Select(props) {
+    const [search, setSearch] = useState("");
     const [isFocused, setIsFocused] = useState(false);
     const { inputRef, id, error } = useFormController();
     const baseRef = useRef(null);
     const ref = inputRef || baseRef;
     const isError = props.isError || !!error;
-    const { disabled, title, style, className, prefix, iconSize, isLoading, LeftIcon, value: baseValue = null, defaultValue = "", onFocus, onBlur, Spinner, name, placeholder, onSelect, options, optionMaxHeight, closeOnSelect, ...rest } = getConfig({ ...props, id, isError }, isFocused);
+    const { disabled, title, style, className, prefix, iconSize, isLoading, LeftIcon, value: baseValue = null, defaultValue = "", onFocus, onBlur, Spinner, name, placeholder, onSelect, options, optionMaxHeight, closeOnSelect, isSearchable, onSearch, ...rest } = getConfig({ ...props, id, isError }, isFocused);
     const [selectedValue, setSelectedValue] = useState(defaultValue);
     function handleSectionClick() {
         if (disabled || !ref?.current || isFocused)
@@ -53,7 +55,17 @@ function Select(props) {
         if (isFocused && !currentLabel)
             return false;
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: `${className} placeholder_dark_${placeholderDark()}`, children: [prefix, LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsx("input", { disabled: disabled, readOnly: true, placeholder: currentLabel || placeholder, onFocus: handleFocus, ...rest }), _jsx("input", { type: "hidden", ref: ref, name: name, value: currentValue || "", readOnly: true }), isFocused && (_jsxs("div", { className: "arkyn_select_content", style: { overflow: "auto", maxHeight: optionMaxHeight }, children: [options.map(({ label, value }) => (_jsxs("div", { onClick: () => handleChangeValue({ label, value }), className: currentValue === value
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: `${className} placeholder_dark_${placeholderDark()}`, children: [prefix, LeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsx("input", { disabled: disabled, readOnly: true, placeholder: currentLabel || placeholder, onFocus: handleFocus, ...rest }), _jsx("input", { type: "hidden", ref: ref, name: name, value: currentValue || "", readOnly: true }), isFocused && (_jsxs("div", { className: "arkyn_select_content", style: { overflow: "auto", maxHeight: optionMaxHeight }, children: [isSearchable && (_jsx(Input, { type: "search", name: "search-select", variant: "underline", leftIcon: Search, onChange: (e) => setSearch(e.target.value) })), options
+                                .filter((option) => {
+                                if (props.onSearch)
+                                    return true;
+                                if (!props.isSearchable)
+                                    return true;
+                                if (option.label.toLowerCase().includes(search.toLowerCase()))
+                                    return true;
+                                return false;
+                            })
+                                .map(({ label, value }) => (_jsxs("div", { onClick: () => handleChangeValue({ label, value }), className: currentValue === value
                                     ? "arkyn_select_option active"
                                     : "arkyn_select_option", children: [label, " ", _jsx(Check, {})] }, value))), options.length <= 0 && _jsx("p", { children: "Sem op\u00E7\u00F5es dispon\u00EDveis" })] })), !isLoading && (_jsx(ChevronDown, { className: "arkyn_select_arrow", size: iconSize, strokeWidth: 2.5 })), isLoading && Spinner] }), isFocused && (_jsx("aside", { className: "arkyn_select_overlay", onClick: handleBlur }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "1.3.143",
+  "version": "1.3.145",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",
   "author": "Lucas Gonçalves",

package/src/components/ImageUpload/HasFileContent/index.tsx

@@ -31,7 +31,7 @@ function HasFileContent(props: HasFileContentProps) {
   return (
     <div
       className="arkynImageUploadHasFileContent"
-      style={{ backgroundImage: `url(${filePath})` }}
+      style={{ backgroundImage: `url("${filePath}")` }}
     >
       {reSendImage && (
         <Tooltip orientation="bottom" text="Reenviar imagem">

package/src/components/Select/getConfig.tsx

@@ -16,7 +16,6 @@ function getConfig(props: SelectProps, isFocused: boolean) {
     readOnly,
     onFocus,
     onBlur,
-
     title,
     style,
     closeOnSelect = true,

package/src/components/Select/index.tsx

@@ -1,15 +1,17 @@
 import type { SelectProps } from "@arkyn/types";
 import type { FocusEvent } from "react";
 
-import { Check, ChevronDown } from "lucide-react";
+import { Check, ChevronDown, Search } from "lucide-react";
 import { useRef, useState } from "react";
 
 import { getConfig } from "./getConfig";
 
-import "./styles.css";
 import { useFormController } from "../../components/Form/FormController";
+import { Input } from "../Input";
+import "./styles.css";
 
 function Select(props: SelectProps) {
+  const [search, setSearch] = useState("");
   const [isFocused, setIsFocused] = useState(false);
   const { inputRef, id, error } = useFormController();
 
@@ -38,7 +40,8 @@ function Select(props: SelectProps) {
     options,
     optionMaxHeight,
     closeOnSelect,
-
+    isSearchable,
+    onSearch,
     ...rest
   } = getConfig({ ...props, id, isError }, isFocused);
 
@@ -116,19 +119,37 @@ function Select(props: SelectProps) {
             className="arkyn_select_content"
             style={{ overflow: "auto", maxHeight: optionMaxHeight }}
           >
-            {options.map(({ label, value }) => (
-              <div
-                key={value}
-                onClick={() => handleChangeValue({ label, value })}
-                className={
-                  currentValue === value
-                    ? "arkyn_select_option active"
-                    : "arkyn_select_option"
-                }
-              >
-                {label} <Check />
-              </div>
-            ))}
+            {isSearchable && (
+              <Input
+                type="search"
+                name="search-select"
+                variant="underline"
+                leftIcon={Search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            )}
+
+            {options
+              .filter((option) => {
+                if (props.onSearch) return true;
+                if (!props.isSearchable) return true;
+                if (option.label.toLowerCase().includes(search.toLowerCase()))
+                  return true;
+                return false;
+              })
+              .map(({ label, value }) => (
+                <div
+                  key={value}
+                  onClick={() => handleChangeValue({ label, value })}
+                  className={
+                    currentValue === value
+                      ? "arkyn_select_option active"
+                      : "arkyn_select_option"
+                  }
+                >
+                  {label} <Check />
+                </div>
+              ))}
 
             {options.length <= 0 && <p>Sem opções disponíveis</p>}
           </div>