@soyfri/shared-library 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("react"),s=require("@mui/material"),r=require("../../node_modules/@mui/icons-material/esm/Clear.cjs");function n(e){return null}function l({label:n,options:l=[],value:i,defaultValue:o,onChange:a,size:u="medium",multiple:p=!1,filterable:x=!1,placeholder:d,children:c,maxHeight:m=300,maxWidth:h,maxChipsToShow:j=3,renderChipLabel:f,chipVariant:g="outlined",loadOptions:b,loadingMessage:y="Cargando opciones...",noOptionsMessage:E="No hay opciones",debounceTimeout:v=300}){const R=t.useMemo((()=>{var e;if(1===t.Children.count(c)){const s=t.Children.only(c);if(t.isValidElement(s)&&"Option"===(null===(e=s.type)||void 0===e?void 0:e.displayName))return s.props.children}return null}),[c]),[C,_]=t.useState(""),[M,O]=t.useState([]),[S,I]=t.useState(!1),P=t.useRef(null),T=t.useRef(null),k="function"==typeof b,w=k?M:l;t.useEffect((()=>{k&&(P.current&&clearTimeout(P.current),C?(I(!0),P.current=window.setTimeout((()=>{b(C).then((e=>{O(e)})).finally((()=>{I(!1),T.current&&T.current.focus()}))}),v)):(O([]),I(!1),T.current&&T.current.focus()))}),[C,k,b,v]);const L=t.useMemo((()=>k?w:x&&C?w.filter((e=>e.label.toLowerCase().includes(C.toLowerCase()))):w),[C,x,w,k]),z=t.useMemo((()=>{const e={};return L.forEach((t=>{const s=t.group||"__default";e[s]||(e[s]=[]),e[s].push(t)})),e}),[L]),V=t.useMemo((()=>{const t=[];return(x||k)&&t.push(e.jsxRuntimeExports.jsx(s.ListSubheader,{sx:{px:2,pt:1,pb:1,backgroundColor:"background.paper",zIndex:1,position:"sticky",top:0},children:e.jsxRuntimeExports.jsx(s.TextField,{inputRef:T,placeholder:"Buscar...",variant:"standard",size:"small",fullWidth:!0,value:C,onChange:e=>_(e.target.value),inputProps:{autoFocus:!0},onClick:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation()})},"search-header")),S?t.push(e.jsxRuntimeExports.jsx(s.MenuItem,{disabled:!0,children:e.jsxRuntimeExports.jsxs(s.Box,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsxRuntimeExports.jsx(s.CircularProgress,{size:20}),e.jsxRuntimeExports.jsx(s.Typography,{children:y})]})},"loading-message")):0===Object.keys(z).length||1===Object.keys(z).length&&z.__default&&0===z.__default.length?t.push(e.jsxRuntimeExports.jsx(s.MenuItem,{disabled:!0,children:e.jsxRuntimeExports.jsx(s.Typography,{children:E})},"no-options-message")):Object.entries(z).forEach((([r,n])=>{"__default"!==r&&t.push(e.jsxRuntimeExports.jsx(s.ListSubheader,{disableSticky:!0,children:r},r)),n.forEach((r=>{t.push(e.jsxRuntimeExports.jsx(s.MenuItem,{value:r.value,disabled:r.disabled,children:R?R(r):r.label},r.value))}))})),t}),[z,R,x,k,C,S,y,E]);return e.jsxRuntimeExports.jsxs(s.FormControl,{fullWidth:!0,size:u,children:[n&&e.jsxRuntimeExports.jsx(s.InputLabel,{children:n}),e.jsxRuntimeExports.jsx(s.Select,{label:n,value:null!=i?i:p?[]:"",defaultValue:o,multiple:p,onChange:e=>{a(e.target.value)},renderValue:t=>{var n;if(!t||Array.isArray(t)&&0===t.length)return e.jsxRuntimeExports.jsx(s.Typography,{sx:{color:"text.disabled"},children:d||""});if(!p){const e=w.find((e=>e.value===t));return f&&e?f(e):null!==(n=null==e?void 0:e.label)&&void 0!==n?n:String(t)}const l=t,o=l.slice(0,j),u=l.length-j;return e.jsxRuntimeExports.jsxs(s.Box,{sx:{display:"flex",flexWrap:"wrap",gap:.5},children:[o.map((t=>{const n=w.find((e=>e.value===t));if(!n)return null;return e.jsxRuntimeExports.jsx(s.Chip,{variant:g,color:"primary",label:f?f(n):n.label,avatar:n.img?e.jsxRuntimeExports.jsx(s.Avatar,{src:n.img}):void 0,onDelete:()=>(e=>{const t=i.filter((t=>t!==e));a(t)})(t),deleteIcon:e.jsxRuntimeExports.jsx(r,{})},t)})),u>0&&e.jsxRuntimeExports.jsx(s.Chip,{label:`+${u} más`,variant:g})]})},displayEmpty:!0,input:e.jsxRuntimeExports.jsx(s.OutlinedInput,{label:n}),MenuProps:{PaperProps:{style:{maxHeight:m,maxWidth:h}}},children:V})]})}n.displayName="Option",exports.Option=n,exports.Select=l,exports.default=l;
|
|
2
2
|
//# sourceMappingURL=Select.cjs.map
|
|
@@ -11,7 +11,7 @@ type RenderOptionItem = (item: SelectOption) => React.ReactNode;
|
|
|
11
11
|
type RenderChipLabel = (item: SelectOption) => React.ReactNode;
|
|
12
12
|
export interface SelectProps<TValue extends SelectOption['value'] = SelectOption['value']> {
|
|
13
13
|
label?: string;
|
|
14
|
-
options
|
|
14
|
+
options?: SelectOption[];
|
|
15
15
|
value?: TValue | TValue[];
|
|
16
16
|
defaultValue?: TValue | TValue[];
|
|
17
17
|
onChange: (val: TValue | TValue[]) => void;
|
|
@@ -27,6 +27,10 @@ export interface SelectProps<TValue extends SelectOption['value'] = SelectOption
|
|
|
27
27
|
maxChipsToShow?: number;
|
|
28
28
|
renderChipLabel?: RenderChipLabel;
|
|
29
29
|
chipVariant?: 'outlined' | 'filled';
|
|
30
|
+
loadOptions?: (inputValue: string) => Promise<SelectOption[]>;
|
|
31
|
+
loadingMessage?: React.ReactNode;
|
|
32
|
+
noOptionsMessage?: React.ReactNode;
|
|
33
|
+
debounceTimeout?: number;
|
|
30
34
|
}
|
|
31
35
|
export interface OptionProps {
|
|
32
36
|
children: RenderOptionItem;
|
|
@@ -35,6 +39,5 @@ export declare function Option(_props: OptionProps): null;
|
|
|
35
39
|
export declare namespace Option {
|
|
36
40
|
var displayName: string;
|
|
37
41
|
}
|
|
38
|
-
export declare function Select<TValue extends SelectOption['value'] = SelectOption['value']>({ label, options, value, defaultValue, onChange, size, multiple, filterable, placeholder, children, maxHeight, maxWidth, maxChipsToShow,
|
|
39
|
-
renderChipLabel, chipVariant, }: SelectProps<TValue>): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export declare function Select<TValue extends SelectOption['value'] = SelectOption['value']>({ label, options, value, defaultValue, onChange, size, multiple, filterable, placeholder, children, maxHeight, maxWidth, maxChipsToShow, renderChipLabel, chipVariant, loadOptions, loadingMessage, noOptionsMessage, debounceTimeout, }: SelectProps<TValue>): import("react/jsx-runtime").JSX.Element;
|
|
40
43
|
export default Select;
|
|
@@ -11,3 +11,4 @@ export declare const ConstrainedWidthDefinition = "\nimport React, { useState }
|
|
|
11
11
|
export declare const AllFeaturesCombinedDefinition = "\nimport React, { useState } from 'react';\nimport { Select, Option } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Avatar, Box, Typography, Chip } from '@mui/material';\n\nconst allOptions = [\n { value: 'gt', label: 'Guatemala', group: 'Centroam\u00E9rica' },\n { value: 'admin', label: 'Administrador', img: 'https://placehold.co/40x40?text=A' },\n { value: 'PENDING', label: 'Pendiente' },\n { value: 'ca', label: 'Canad\u00E1', group: 'Norteam\u00E9rica' },\n { value: 'user', label: 'Usuario', img: 'https://placehold.co/40x40?text=U' },\n { value: 'COMPLETED', label: 'Completado' },\n];\n\nexport const AllFeaturesCombinedExample = () => {\n const [value, setValue] = useState<string[]>(['gt', 'admin', 'PENDING', 'ca', 'user', 'COMPLETED']);\n return (\n <Box sx={{ width: 500 }}>\n <Select\n label=\"Selecci\u00F3n Completa\"\n multiple\n filterable\n maxChipsToShow={3}\n maxHeight={250}\n maxWidth=\"400px\"\n options={allOptions}\n value={value}\n onChange={(val) => setValue(val as string[])}\n placeholder=\"Busca y selecciona todo tipo de elementos\"\n renderChipLabel={(item) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n {item.img && <Avatar src={item.img} sx={{ width: 16, height: 16 }} />}\n <Typography variant=\"caption\" sx={{ fontWeight: 'bold' }}>\n {item.label.length > 10 ? item.label.substring(0, 7) + '...' : item.label}\n </Typography>\n </Box>\n )}\n >\n <Option>\n {(item) => (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, my: 0.5 }}>\n {item.img && <Avatar src={item.img} sx={{ width: 28, height: 28 }} />}\n <Box>\n <Typography variant=\"body2\" fontWeight=\"medium\">{item.label}</Typography>\n {item.group && (\n <Typography variant=\"caption\" color=\"text.secondary\">\n Grupo: {item.group}\n </Typography>\n )}\n {item.disabled && <Chip label=\"No disponible\" size=\"small\" color=\"warning\" sx={{ ml: 1 }} />}\n </Box>\n </Box>\n )}\n </Option>\n </Select>\n <Typography sx={{ mt: 2 }}>Valor seleccionado: {JSON.stringify(value)}</Typography>\n </Box>\n );\n};\n";
|
|
12
12
|
export declare const EmptyOptionsDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nexport const EmptyOptionsExample = () => {\n const [value, setValue] = useState(null);\n return (\n <Box sx={{ width: 300 }}>\n <Select\n label=\"Seleccionar (Vac\u00EDo)\"\n options={[]}\n value={value}\n onChange={setValue}\n placeholder=\"No hay opciones disponibles\"\n />\n <Typography sx={{ mt: 2 }}>Valor seleccionado: {value || 'Ninguno'}</Typography>\n </Box>\n );\n};\n";
|
|
13
13
|
export declare const SelectWithManyOptionsDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select'; // Asumiendo que Select.tsx est\u00E1 en el mismo directorio\nimport { Box, Typography } from '@mui/material';\n\nconst manyOptions = Array.from({ length: 50 }, (_, i) => ({\n value: `option-${i}`,\n label: `Opci\u00F3n ${i + 1}`,\n group: i < 25 ? 'Grupo A' : 'Grupo B',\n}));\n\nexport const SelectWithManyOptionsExample = () => {\n const [value, setValue] = useState('');\n return (\n <Box sx={{ width: 300 }}>\n <Select\n label=\"Muchas Opciones\"\n options={manyOptions}\n value={value}\n onChange={(val) => setValue(val as string)}\n filterable\n maxHeight={200}\n />\n <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n </Box>\n );\n};\n";
|
|
14
|
+
export declare const AsyncSelectDefinition = "\nimport React, { useState } from 'react';\nimport { Select } from './Select';\nimport { Box, Typography } from '@mui/material';\n\nconst mockAsyncOptions = [\n { value: 'apple', label: 'Apple' },\n { value: 'banana', label: 'Banana' },\n { value: 'orange', label: 'Orange' },\n { value: 'grape', label: 'Grape' },\n { value: 'strawberry', label: 'Strawberry' },\n { value: 'blueberry', label: 'Blueberry' },\n { value: 'pineapple', label: 'Pineapple' },\n];\n\n// Simulate an API call\nconst simulatedLoadOptions = (inputValue: string): Promise<any[]> => {\n return new Promise((resolve) => {\n setTimeout(() => {\n const filtered = mockAsyncOptions.filter(option =>\n option.label.toLowerCase().includes(inputValue.toLowerCase())\n );\n resolve(filtered);\n }, 800); // Simulate network delay\n });\n};\n\nexport const AsyncSelectExample = () => {\n const [value, setValue] = useState('');\n return (\n <Box sx={{ width: 300 }}>\n <Select\n label=\"Buscar Frutas\"\n loadOptions={simulatedLoadOptions}\n value={value}\n onChange={(val) => setValue(val as string)}\n placeholder=\"Escribe para buscar...\"\n loadingMessage=\"Buscando frutas...\"\n noOptionsMessage=\"No se encontraron frutas.\"\n />\n <Typography sx={{ mt: 2 }}>Valor seleccionado: {value}</Typography>\n </Box>\n );\n};\n";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as e}from"../../_virtual/jsx-runtime.js";import l,{useMemo as
|
|
1
|
+
import{j as e}from"../../_virtual/jsx-runtime.js";import l,{useMemo as n,isValidElement as r,useState as a,useRef as t,useEffect as i}from"react";import{ListSubheader as s,TextField as o,MenuItem as u,Box as d,CircularProgress as c,Typography as p,FormControl as h,InputLabel as m,Select as f,OutlinedInput as x,Chip as g,Avatar as j}from"@mui/material";import b from"../../node_modules/@mui/icons-material/esm/Clear.js";function v(e){return null}function y({label:v,options:y=[],value:C,defaultValue:_,onChange:k,size:w="medium",multiple:O=!1,filterable:P=!1,placeholder:z,children:W,maxHeight:E=300,maxWidth:S,maxChipsToShow:T=3,renderChipLabel:V,chipVariant:I="outlined",loadOptions:L,loadingMessage:M="Cargando opciones...",noOptionsMessage:N="No hay opciones",debounceTimeout:A=300}){const D=n((()=>{var e;if(1===l.Children.count(W)){const n=l.Children.only(W);if(r(n)&&"Option"===(null===(e=n.type)||void 0===e?void 0:e.displayName))return n.props.children}return null}),[W]),[H,B]=a(""),[F,K]=a([]),[R,$]=a(!1),q=t(null),G=t(null),J="function"==typeof L,Q=J?F:y;i((()=>{J&&(q.current&&clearTimeout(q.current),H?($(!0),q.current=window.setTimeout((()=>{L(H).then((e=>{K(e)})).finally((()=>{$(!1),G.current&&G.current.focus()}))}),A)):(K([]),$(!1),G.current&&G.current.focus()))}),[H,J,L,A]);const U=n((()=>J?Q:P&&H?Q.filter((e=>e.label.toLowerCase().includes(H.toLowerCase()))):Q),[H,P,Q,J]),X=n((()=>{const e={};return U.forEach((l=>{const n=l.group||"__default";e[n]||(e[n]=[]),e[n].push(l)})),e}),[U]),Y=n((()=>{const l=[];return(P||J)&&l.push(e.jsx(s,{sx:{px:2,pt:1,pb:1,backgroundColor:"background.paper",zIndex:1,position:"sticky",top:0},children:e.jsx(o,{inputRef:G,placeholder:"Buscar...",variant:"standard",size:"small",fullWidth:!0,value:H,onChange:e=>B(e.target.value),inputProps:{autoFocus:!0},onClick:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation()})},"search-header")),R?l.push(e.jsx(u,{disabled:!0,children:e.jsxs(d,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(c,{size:20}),e.jsx(p,{children:M})]})},"loading-message")):0===Object.keys(X).length||1===Object.keys(X).length&&X.__default&&0===X.__default.length?l.push(e.jsx(u,{disabled:!0,children:e.jsx(p,{children:N})},"no-options-message")):Object.entries(X).forEach((([n,r])=>{"__default"!==n&&l.push(e.jsx(s,{disableSticky:!0,children:n},n)),r.forEach((n=>{l.push(e.jsx(u,{value:n.value,disabled:n.disabled,children:D?D(n):n.label},n.value))}))})),l}),[X,D,P,J,H,R,M,N]);return e.jsxs(h,{fullWidth:!0,size:w,children:[v&&e.jsx(m,{children:v}),e.jsx(f,{label:v,value:null!=C?C:O?[]:"",defaultValue:_,multiple:O,onChange:e=>{k(e.target.value)},renderValue:l=>{var n;if(!l||Array.isArray(l)&&0===l.length)return e.jsx(p,{sx:{color:"text.disabled"},children:z||""});if(!O){const e=Q.find((e=>e.value===l));return V&&e?V(e):null!==(n=null==e?void 0:e.label)&&void 0!==n?n:String(l)}const r=l,a=r.slice(0,T),t=r.length-T;return e.jsxs(d,{sx:{display:"flex",flexWrap:"wrap",gap:.5},children:[a.map((l=>{const n=Q.find((e=>e.value===l));if(!n)return null;return e.jsx(g,{variant:I,color:"primary",label:V?V(n):n.label,avatar:n.img?e.jsx(j,{src:n.img}):void 0,onDelete:()=>(e=>{const l=C.filter((l=>l!==e));k(l)})(l),deleteIcon:e.jsx(b,{})},l)})),t>0&&e.jsx(g,{label:`+${t} más`,variant:I})]})},displayEmpty:!0,input:e.jsx(x,{label:v}),MenuProps:{PaperProps:{style:{maxHeight:E,maxWidth:S}}},children:Y})]})}v.displayName="Option";export{v as Option,y as Select,y as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|