ioloco-ui
Advanced tools
Comparing version
import React from 'react'; | ||
import { Props } from './types'; | ||
declare const Chip: React.FC<Props>; | ||
import { ChipProps } from './types'; | ||
declare const Chip: React.FC<ChipProps>; | ||
export default Chip; |
@@ -1,1 +0,1 @@ | ||
import{jsx as l,jsxs as o,Fragment as r}from"react/jsx-runtime";import n from"@stylexjs/stylex";const e=e=>{let{label:t,variant:i="outlined",color:u="default",size:a="medium",linkComponent:b,href:s,ariaLabel:g,DeleteIcon:c,onDelete:p,onClick:C}=e;const x=()=>o(r,{children:[l("span",Object.assign({},n.props([d.label,d[`label_${a}`]]),{children:t})),p&&l("button",Object.assign({},{className:"x11g6tue x1gs6z28 x13zjp5t x1ypdohk x1heor9g x78zum5 x6s0dn4"},{onClick:l=>{l.stopPropagation(),p()},"aria-label":"Delete",children:c&&l(c,Object.assign({},{className:"x1jchvi3 x1mqxbix xat0y86"},{"aria-hidden":"true"}))}))]});return b&&s?l(b,Object.assign({href:s,"aria-label":g},n.props([d.root,d[i],d[u],d[a]]),{children:x()})):l("div",C?Object.assign({},n.props([d.root,d[i],d[u],d[a]]),{role:"button",tabIndex:0,onClick:C,onKeyDown:l=>{"Enter"!==l.key&&" "!==l.key||(C(),l.preventDefault())},"aria-label":g,children:x()}):Object.assign({},n.props([d.root,d[i],d[u],d[a]]),{children:x()}))},d={root:{display:"x3nfvp2",alignItems:"x6s0dn4",borderRadius:"x3fmiap",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,textDecoration:"x1hl2dhg",textDecorationColor:null,textDecorationLine:null,textDecorationStyle:null,textDecorationThickness:null,transition:"x11ufw96",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,$$css:!0},deleteButton:{background:"x11g6tue",backgroundAttachment:null,backgroundClip:null,backgroundColor:null,backgroundImage:null,backgroundOrigin:null,backgroundPosition:null,backgroundPositionX:null,backgroundPositionY:null,backgroundRepeat:null,backgroundSize:null,border:"x1gs6z28",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,marginLeft:"x13zjp5t",marginInlineStart:null,marginInlineEnd:null,cursor:"x1ypdohk",color:"x1heor9g",display:"x78zum5",alignItems:"x6s0dn4",$$css:!0},iconBase:{fontSize:"x1jchvi3",color:"x1mqxbix xat0y86",$$css:!0},label:{padding:"x3wxoqf",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},label_small:{fontSize:"xvewgow",$$css:!0},label_medium:{fontSize:"xml2kzp",$$css:!0},label_large:{fontSize:"x1uv3qv7",$$css:!0},outlined:{border:"x1kylzug",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,$$css:!0},filled:{backgroundColor:"x15yo4kd",color:"x1525slw",$$css:!0},default:{color:"x1525slw",borderColor:"xtb30c9",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"xjbqb8w",$$css:!0},success:{color:"x1lmp68f",borderColor:"x19fwmm5",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"x8cstpe",$$css:!0},error:{color:"x1yb8ixf",borderColor:"x8rlazz",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"xl1fw2u",$$css:!0},info:{color:"xs6vl12",borderColor:"x17t3gts",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"x4gbfdp",$$css:!0},warning:{color:"x1bofk8g",borderColor:"x7dsckt",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"x1g6p87w",$$css:!0},small:{fontSize:"xkpwil5",padding:"x164snpw",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},medium:{fontSize:"x1jchvi3",padding:"xc5g0ph",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},large:{fontSize:"x1c3i2sq",padding:"xqiv6wf",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0}};export{e as default}; | ||
import{jsx as l,jsxs as o,Fragment as r}from"react/jsx-runtime";import n from"react";import e from"@stylexjs/stylex";const d=d=>{let{label:u,variant:i="outlined",color:a="default",size:b="medium",disabled:s=!1,StartIcon:c,DeleteIcon:g,linkComponent:x,href:C,ariaLabel:p,onDelete:h,onClick:f}=d;const m=n.useId(),S=l=>{!s&&f&&f(l)},k=l=>{s||"Enter"!==l.key&&" "!==l.key||(l.preventDefault(),S(l))},I=l=>{l.stopPropagation(),!s&&h&&h(l)},$=t[`label_${b}`],R=t[i],B=t[a],y=t[b],v="filled"===i&&"default"!==a?t[`filled_${a}`]:null,E=()=>o(r,{children:[c&&l(c,Object.assign({},e.props(t.startIcon,t[`startIcon_${b}`]),{"aria-hidden":"true"})),l("span",Object.assign({},e.props(t.label,$),{children:u})),h&&l("button",Object.assign({type:"button"},e.props(t.deleteButton,t[`deleteButton_${b}`]),{onClick:I,"aria-label":`Delete ${u}`,disabled:s,children:g&&l(g,Object.assign({},e.props(t.iconBase,t[`iconBase_${b}`]),{"aria-hidden":"true"}))}))]});return x&&C&&!s?l(x,Object.assign({href:C,"aria-label":p||u,id:m},e.props(t.root,R,B,y,v),{children:E()})):l("div",f?Object.assign({role:"button",tabIndex:s?-1:0,onClick:S,onKeyDown:k,"aria-label":p||u,"aria-disabled":s,id:m},e.props(t.root,R,B,y,v,s&&t.disabled),{children:E()}):Object.assign({role:"presentation","aria-label":p||u,id:m},e.props(t.root,R,B,y,v,s&&t.disabled),{children:E()}))},t={root:{display:"x3nfvp2",alignItems:"x6s0dn4",justifyContent:"xl56j7k",textDecoration:"x1hl2dhg",textDecorationColor:null,textDecorationLine:null,textDecorationStyle:null,textDecorationThickness:null,transition:"x169l3ba",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,cursor:"xt0e3qv",userSelect:"x87ps6o",maxWidth:"x193iq5w",overflow:"xb3r6kr",overflowX:null,overflowY:null,whiteSpace:"xuxw1ft",textOverflow:"xlyipyv",$$css:!0},disabled:{opacity:"x197sbye",pointerEvents:"x47corl",cursor:"x1h6gzvc",$$css:!0},startIcon:{display:"x3nfvp2",marginRight:"x1ppgd49",marginInlineStart:null,marginInlineEnd:null,color:"x1heor9g",$$css:!0},startIcon_small:{fontSize:"xvewgow",$$css:!0},startIcon_medium:{fontSize:"xml2kzp",$$css:!0},startIcon_large:{fontSize:"x1uv3qv7",$$css:!0},deleteButton:{background:"x11g6tue",backgroundAttachment:null,backgroundClip:null,backgroundColor:null,backgroundImage:null,backgroundOrigin:null,backgroundPosition:null,backgroundPositionX:null,backgroundPositionY:null,backgroundRepeat:null,backgroundSize:null,border:"x1gs6z28",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,padding:"x1717udv",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,marginLeft:"x1spiraj",marginInlineStart:null,marginInlineEnd:null,cursor:"x1ypdohk",color:"x1heor9g",display:"x78zum5",alignItems:"x6s0dn4",justifyContent:"xl56j7k",borderRadius:"x16rqkct",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,transition:"x5gkzjs",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,":hover_backgroundColor":"x1gwckwn",":focus_outline":"x1uvtmcs",":focus_outlineColor":null,":focus_outlineOffset":null,":focus_outlineStyle":null,":focus_outlineWidth":null,":focus_backgroundColor":"x1rvww7c",$$css:!0},deleteButton_small:{width:"xq9tboe",height:"x1mf0rcc",$$css:!0},deleteButton_medium:{width:"xe1jvqq",height:"x107nokf",$$css:!0},deleteButton_large:{width:"xs5h3dt",height:"xettwda",$$css:!0},iconBase:{color:"x1heor9g",$$css:!0},iconBase_small:{fontSize:"xvewgow",$$css:!0},iconBase_medium:{fontSize:"xml2kzp",$$css:!0},iconBase_large:{fontSize:"x1uv3qv7",$$css:!0},label:{padding:"x3wxoqf",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,overflow:"xb3r6kr",overflowX:null,overflowY:null,textOverflow:"xlyipyv",$$css:!0},label_small:{fontSize:"xvewgow",$$css:!0},label_medium:{fontSize:"xml2kzp",$$css:!0},label_large:{fontSize:"x1uv3qv7",$$css:!0},outlined:{border:"x1kylzug",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"xjbqb8w",$$css:!0},filled:{backgroundColor:"x15yo4kd x1lt22qs",color:"x19egurn xus8cq1",border:"xfj9a5l",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,$$css:!0},default:{color:"x19egurn xlyu03q",borderColor:"x17lc74m xu29np1",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,$$css:!0},success:{color:"x1lmp68f xgtos4l",borderColor:"x19fwmm5 x1v5n4xr",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"xq2go8 x54891k",$$css:!0},error:{color:"x1yb8ixf x11nb983",borderColor:"x8rlazz x8dvutn",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"xu1tpx3 x1v1g6kh",$$css:!0},info:{color:"xs6vl12 x1jvkgvn",borderColor:"x17t3gts xx72p43",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"x1tvicio x19lsrm5",$$css:!0},warning:{color:"x1bofk8g x1g34k6l",borderColor:"x7dsckt xosffnj",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,backgroundColor:"x1s3kibp xk2lguj",$$css:!0},filled_success:{backgroundColor:"x8yflf2 xocn0vd",color:"x1awj2ng xat0y86",borderColor:"x9r1u3d",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,$$css:!0},filled_error:{backgroundColor:"xro4dp9 xjhxys5",color:"x1awj2ng xat0y86",borderColor:"x9r1u3d",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,$$css:!0},filled_info:{backgroundColor:"xtizvkh xu4xama",color:"x1awj2ng xat0y86",borderColor:"x9r1u3d",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,$$css:!0},filled_warning:{backgroundColor:"x6cdash x3mj0ji",color:"x1awj2ng xat0y86",borderColor:"x9r1u3d",borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,$$css:!0},small:{height:"x14cnqhc",padding:"x1v3gofm",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,borderRadius:"xwn9xlg",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,$$css:!0},medium:{height:"x1r7j5eq",padding:"xq3cggq",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,borderRadius:"xwn9xlg",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,$$css:!0},large:{height:"x1sh0tsm",padding:"xz07izy",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,borderRadius:"xx20hqb",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,$$css:!0}};export{d as default}; |
import type { ElementType } from 'react'; | ||
export interface Props { | ||
export interface ChipProps { | ||
label: string; | ||
variant?: 'outlined' | 'filled'; | ||
color?: 'success' | 'info' | 'error' | 'warning' | 'default'; | ||
size?: 'small' | 'medium' | 'large'; | ||
disabled?: boolean; | ||
StartIcon?: ElementType; | ||
DeleteIcon?: ElementType; | ||
size?: 'small' | 'medium' | 'large'; | ||
linkComponent?: ElementType; | ||
href?: string; | ||
ariaLabel?: string; | ||
onDelete?: () => void; | ||
onClick?: () => void; | ||
onDelete?: (event: React.MouseEvent<HTMLButtonElement>) => void; | ||
onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void; | ||
} |
import type { IMultiSelectBase, SelectOption } from './types'; | ||
declare const MultiSelect: <T extends SelectOption>({ options, label, size, field, Icon, valueKey, labelKey, selectedValues, onValuesChange, chipEditable, ...props }: IMultiSelectBase<T>) => import("react/jsx-runtime").JSX.Element; | ||
declare const MultiSelect: <T extends SelectOption>({ options, label, size, field, Icon, valueKey, labelKey, selectedValues, onValuesChange, chipVariant, chipColor, ...props }: IMultiSelectBase<T>) => import("react/jsx-runtime").JSX.Element; | ||
export default MultiSelect; |
"use client"; | ||
import{__rest as e}from"../../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.2_rollup@4.36.0_tslib@2.8.1_typescript@5.8.2/node_modules/tslib/tslib.es6.js";import{jsxs as l,jsx as n}from"react/jsx-runtime";import{useState as i,useRef as s}from"react";import t from"../Select/index.js";const a=a=>{var{options:r,label:o,size:c,field:u,Icon:p,valueKey:d="_id",labelKey:m="name",selectedValues:x,onValuesChange:g,chipEditable:b=!1}=a,v=e(a,["options","label","size","field","Icon","valueKey","labelKey","selectedValues","onValuesChange","chipEditable"]);const[y,h]=i(null),[f,j]=i(""),z=s(null),S=e=>{"Enter"===e.key&&h(null),"Escape"===e.key&&(h(null),j(""))};return l("div",Object.assign({},{className:"xh8yej3 xmj32a5 x1n2onr6"},{children:[n("div",Object.assign({},{className:"x78zum5 x1a02dak x1rq4zhh x178vpe7"},{children:x.map((e=>{return l("span",Object.assign({},{className:"x78zum5 x6s0dn4 x1neeqzj x1by2v1n xwn9xlg xml2kzp xro7yci xgiflwg"},{onDoubleClick:()=>{return l=e,void(b&&(h(String(l[d])),j(String(l[m]))));var l},children:[y===String(e[d])?n("input",Object.assign({ref:z},{className:"x1gs6z28 x1md70p1 xml2kzp x1717udv x1ghz6dp xh8yej3 x1uvtmcs"},{value:f,onChange:e=>j(e.target.value),onKeyDown:S,onBlur:()=>h(null)})):(i=e,String(i[m])),n(p,{size:16,onClick:()=>{return l=String(e[d]),void g(x.filter((e=>e[d]!==l)));var l}})]}),String(e[d]));var i}))})),n(t,Object.assign({},v,{options:r,label:o,size:c,field:u,Icon:p,valueKey:d,labelKey:m,onSelect:e=>(e=>{const l=x.some((l=>l[d]===e[d]))?x.filter((l=>l[d]!==e[d])):[...x,e];g(l)})(e)}))]}))};export{a as default}; | ||
import{__rest as e}from"../../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.2_rollup@4.36.0_tslib@2.8.1_typescript@5.8.2/node_modules/tslib/tslib.es6.js";import{jsxs as l,jsx as s}from"react/jsx-runtime";import i from"../Select/index.js";import n from"../../Components/Chip/index.js";import a from"@stylexjs/stylex";const o=o=>{var{options:t,label:p,size:c,field:u,Icon:m,valueKey:d="_id",labelKey:h="name",selectedValues:x,onValuesChange:f,chipVariant:g="filled",chipColor:b="default"}=o,y=e(o,["options","label","size","field","Icon","valueKey","labelKey","selectedValues","onValuesChange","chipVariant","chipColor"]);const j=r[`chips_${c}`];return l("div",Object.assign({},{className:"xh8yej3 xmj32a5 x1n2onr6"},{children:[s("div",Object.assign({},a.props(r.chips,j),{children:x.map((e=>{return s(n,{label:(l=e,String(l[h])),size:c,DeleteIcon:m,onDelete:()=>{return l=String(e[d]),void f(x.filter((e=>e[d]!==l)));var l},variant:g,color:b},String(e[d]));var l}))})),s(i,Object.assign({},y,{options:t,label:p,size:c,field:u,Icon:m,valueKey:d,labelKey:h,onSelect:e=>(e=>{const l=x.some((l=>l[d]===e[d]))?x.filter((l=>l[d]!==e[d])):[...x,e];f(l)})(e)}))]}))},r={wrapper:{width:"xh8yej3",minWidth:"xmj32a5",position:"x1n2onr6",$$css:!0},chips:{display:"x78zum5",flexWrap:"x1a02dak",gap:"x1rq4zhh",rowGap:null,columnGap:null,marginBottom:"x1unp1qu",$$css:!0},chips_small:{gap:"x1uma3xh",rowGap:null,columnGap:null,$$css:!0},chips_medium:{gap:"x1rq4zhh",rowGap:null,columnGap:null,$$css:!0},chips_large:{gap:"x8fetqu",rowGap:null,columnGap:null,$$css:!0}};export{o as default}; |
@@ -5,7 +5,8 @@ import { ISelect } from '../Select/types'; | ||
} | ||
export interface IMultiSelectBase<T extends SelectOption> extends Omit<ISelect<T>, 'defaultValue' | 'onSelect'> { | ||
export interface IMultiSelectBase<T extends SelectOption> extends Omit<ISelect<T>, 'defaultValue' | 'onSelect' | 'size'> { | ||
selectedValues: T[]; | ||
onValuesChange: (values: T[]) => void; | ||
chipEditable?: boolean; | ||
Icon?: React.ElementType; | ||
size: 'small' | 'medium' | 'large'; | ||
chipVariant?: 'outlined' | 'filled'; | ||
chipColor?: 'success' | 'info' | 'error' | 'warning' | 'default'; | ||
} |
@@ -1,1 +0,1 @@ | ||
import{jsxs as l,jsx as n}from"react/jsx-runtime";import o,{useRef as d,useState as i}from"react";import{useClickOutside as e}from"../../../Hooks/useClickOutside.js";import r from"@stylexjs/stylex";const t=t=>{let{options:u,label:s,size:p,field:b,Icon:g,defaultValue:x,firstOption:c,valueKey:h="_id",labelKey:m="name",contentPosition:S="bottom",onClick:f,onSelect:y}=t;const $=d(null),[I,k]=i(!1),[R,B]=i(x||null),[w,C]=i(0),v=l=>{B(l),(null==b?void 0:b.onChange)&&b.onChange(l[h]),k(!1),y&&y(l)},E=l=>"string"==typeof l[m]||"number"==typeof l[m]?String(l[m]):(console.warn(`Invalid label key "${String(m)}" for option:`,l),"Invalid label");e($,(()=>k(!1)));const L=c?[c,...u]:u,j=o.useId(),q=Boolean(R),T=a[`${S}ContentPosition`],z=a[`${p}Icon`];return l("div",Object.assign({},{className:"xh8yej3 xmj32a5 x1ypdohk x1n2onr6 x9f619 x41wgo0 x19xbygy"},{tabIndex:0,onKeyDown:l=>{switch(l.key){case"ArrowDown":C((l=>l<u.length-1?l+1:l));break;case"ArrowUp":C((l=>l>0?l-1:0));break;case"Enter":u[w]&&v(u[w]);break;case"Escape":k(!1)}},ref:$,role:"combobox","aria-expanded":I,"aria-haspopup":"listbox","aria-controls":`${j}-listbox`,"aria-label":s,children:[n("div",Object.assign({},r.props(a.label,a[`${p}Label`],q&&a.labelRaised),{id:`${j}-label`,children:s})),l("div",Object.assign({},r.props(a.dropdownLabel,a[`${p}Select`]),{onClick:()=>k(!I),id:j,role:"button","aria-labelledby":`${j}-label`,"aria-expanded":I,"aria-haspopup":"true",children:[n("div",Object.assign({},{className:"xh8yej3 x1in32aq"},{children:R?E(R):""})),g&&n(g,Object.assign({},r.props(a.iconBase,z),{"aria-hidden":"true"}))]})),n("div",Object.assign({},r.props(a.dropdownList,T),{id:`${j}-listbox`,role:"listbox","aria-labelledby":`${j}-label`,"aria-activedescendant":R?`${j}-option-${w}`:void 0,style:{display:I?"block":"none"},onClick:f,children:L.map(((l,o)=>n("div",Object.assign({id:`${j}-option-${o}`},r.props(a.dropdownItem,o===w&&a.highlightedItem),{role:"option","aria-selected":(null==R?void 0:R[h])===l[h],onClick:()=>v(l),onMouseEnter:()=>C(o),children:E(l)}),l[h])))}))]}))},a={dropdown:{width:"xh8yej3",minWidth:"xmj32a5",cursor:"x1ypdohk",position:"x1n2onr6",boxSizing:"x9f619",margin:"x41wgo0",marginInline:null,marginInlineStart:null,marginLeft:null,marginInlineEnd:null,marginRight:null,marginBlock:null,marginTop:null,marginBottom:null,height:"x19xbygy",$$css:!0},valueContainer:{width:"xh8yej3",minHeight:"x1in32aq",$$css:!0},dropdownList:{zIndex:"x1n327nk",position:"x10l6tqk",width:"xh8yej3",padding:"x1717udv",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,margin:"x1ghz6dp",marginInline:null,marginInlineStart:null,marginLeft:null,marginInlineEnd:null,marginRight:null,marginBlock:null,marginTop:null,marginBottom:null,left:"xu96u03",insetInlineStart:null,insetInlineEnd:null,backgroundColor:"x12peec7",border:"xv2dk8s xdhr1b5",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,borderRadius:"x116uinm",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,maxHeight:"x11iwqir",overflowY:"x1rife3k",$$css:!0},dropdownItem:{fontSize:"x579bpy",padding:"x9255wk",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,cursor:"x1ypdohk",boxSizing:"x9f619",color:"x1mqxbix",$$css:!0},label:{position:"x10l6tqk",left:"x1pemb1n",insetInlineStart:null,insetInlineEnd:null,color:"x1mqxbix xat0y86",transition:"x192x8fk",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,pointerEvents:"x47corl",transform:"xnn1q72",transformOrigin:"xyyilfv",zIndex:"x1vjfegm",$$css:!0},dropdownLabel:{width:"xh8yej3",borderRadius:"x116uinm",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,overflow:"xb3r6kr",overflowX:null,overflowY:null,border:"xv2dk8s xdhr1b5",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,padding:"x1uz70x1",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,color:"x1mqxbix xat0y86",display:"x78zum5",justifyContent:"x1qughib",alignItems:"x6s0dn4",position:"x1n2onr6",backgroundColor:"xjbqb8w",$$css:!0},labelRaised:{transform:"x15kueqw",$$css:!0},highlightedItem:{backgroundColor:"xas4zb2",padding:"x1eygyu5",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},smallSelect:{fontSize:"x1uv3qv7",padding:"x1uz70x1",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},mediumSelect:{fontSize:"x579bpy",padding:"x3vcqe7",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},largeSelect:{fontSize:"x13wtedm",padding:"xis3749",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},smallLabel:{fontSize:"x1uv3qv7",top:"x1nwpe0i",$$css:!0},mediumLabel:{fontSize:"x579bpy",top:"x1qq7kl",$$css:!0},largeLabel:{fontSize:"x66fkqt",top:"xh3o63u",$$css:!0},bottomContentPosition:{top:"xis09m7",$$css:!0},topContentPosition:{bottom:"x16izlj8",$$css:!0},iconBase:{color:"x1mqxbix xat0y86",position:"x10l6tqk",right:"x1u62bzc",insetInlineStart:null,insetInlineEnd:null,top:"xwa60dl",transform:"x1cb1t30",$$css:!0},smallIcon:{height:"x1mf0rcc",width:"xq9tboe",$$css:!0},mediumIcon:{height:"x107nokf",width:"xe1jvqq",$$css:!0},largeIcon:{height:"xettwda",width:"xs5h3dt",$$css:!0}};export{t as default}; | ||
import{jsxs as l,jsx as n}from"react/jsx-runtime";import o,{useRef as i,useState as d}from"react";import{useClickOutside as e}from"../../../Hooks/useClickOutside.js";import r from"@stylexjs/stylex";const t=t=>{let{options:u,label:s,size:p,field:b,Icon:g,defaultValue:x,firstOption:c,valueKey:m="_id",labelKey:h="name",contentPosition:S="bottom",onClick:f,onSelect:$}=t;const y=i(null),[I,k]=d(!1),[R,B]=d(x||null),[w,v]=d(0),C=l=>{B(l),(null==b?void 0:b.onChange)&&b.onChange(l[m]),k(!1),$&&$(l)},E=l=>"string"==typeof l[h]||"number"==typeof l[h]?String(l[h]):(console.warn(`Invalid label key "${String(h)}" for option:`,l),"Invalid label");e(y,(()=>k(!1)));const L=c?[c,...u]:u,q=o.useId(),j=Boolean(R),z=a[`${S}ContentPosition`],T=a[`${p}Icon`],W=a[`${p}DropDownItem`];return l("div",Object.assign({},{className:"xh8yej3 xmj32a5 x1ypdohk x1n2onr6 x9f619 x41wgo0 x19xbygy"},{tabIndex:0,onKeyDown:l=>{switch(l.key){case"ArrowDown":v((l=>l<u.length-1?l+1:l));break;case"ArrowUp":v((l=>l>0?l-1:0));break;case"Enter":u[w]&&C(u[w]);break;case"Escape":k(!1)}},ref:y,role:"combobox","aria-expanded":I,"aria-haspopup":"listbox","aria-controls":`${q}-listbox`,"aria-label":s,children:[n("div",Object.assign({},r.props(a.label,a[`${p}Label`],j&&a.labelRaised),{id:`${q}-label`,children:s})),l("div",Object.assign({},r.props(a.dropdownLabel,a[`${p}Select`]),{onClick:()=>k(!I),id:q,role:"button","aria-labelledby":`${q}-label`,"aria-expanded":I,"aria-haspopup":"true",children:[n("div",Object.assign({},{className:"xh8yej3 x1in32aq"},{children:R?E(R):""})),g&&n(g,Object.assign({},r.props(a.iconBase,T),{"aria-hidden":"true"}))]})),n("div",Object.assign({},r.props(a.dropdownList,z),{id:`${q}-listbox`,role:"listbox","aria-labelledby":`${q}-label`,"aria-activedescendant":R?`${q}-option-${w}`:void 0,style:{display:I?"block":"none"},onClick:f,children:L.map(((l,o)=>n("div",Object.assign({id:`${q}-option-${o}`},r.props(a.dropdownItem,W,o===w&&a.highlightedItem),{role:"option","aria-selected":(null==R?void 0:R[m])===l[m],onClick:()=>C(l),onMouseEnter:()=>v(o),children:E(l)}),l[m])))}))]}))},a={dropdown:{width:"xh8yej3",minWidth:"xmj32a5",cursor:"x1ypdohk",position:"x1n2onr6",boxSizing:"x9f619",margin:"x41wgo0",marginInline:null,marginInlineStart:null,marginLeft:null,marginInlineEnd:null,marginRight:null,marginBlock:null,marginTop:null,marginBottom:null,height:"x19xbygy",$$css:!0},valueContainer:{width:"xh8yej3",minHeight:"x1in32aq",$$css:!0},dropdownList:{zIndex:"x1n327nk",position:"x10l6tqk",width:"xh8yej3",padding:"x1717udv",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,margin:"x1ghz6dp",marginInline:null,marginInlineStart:null,marginLeft:null,marginInlineEnd:null,marginRight:null,marginBlock:null,marginTop:null,marginBottom:null,left:"xu96u03",insetInlineStart:null,insetInlineEnd:null,backgroundColor:"x12peec7",border:"xv2dk8s xdhr1b5",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,borderRadius:"x116uinm",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,maxHeight:"x11iwqir",overflowY:"x1rife3k",$$css:!0},dropdownItem:{padding:"x9255wk",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,cursor:"x1ypdohk",boxSizing:"x9f619",color:"x1mqxbix",$$css:!0},smallDropDownItem:{fontSize:"x1uv3qv7",$$css:!0},mediumDropDownItem:{fontSize:"x1elmx46",$$css:!0},largeDropDownItem:{fontSize:"x579bpy",$$css:!0},label:{position:"x10l6tqk",left:"x1pemb1n",insetInlineStart:null,insetInlineEnd:null,color:"x1mqxbix xat0y86",transition:"x192x8fk",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,pointerEvents:"x47corl",transform:"xnn1q72",transformOrigin:"xyyilfv",zIndex:"x1vjfegm",$$css:!0},dropdownLabel:{width:"xh8yej3",borderRadius:"x116uinm",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,overflow:"xb3r6kr",overflowX:null,overflowY:null,border:"xv2dk8s xdhr1b5",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,padding:"x1uz70x1",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,color:"x1mqxbix xat0y86",display:"x78zum5",justifyContent:"x1qughib",alignItems:"x6s0dn4",position:"x1n2onr6",backgroundColor:"xjbqb8w",$$css:!0},labelRaised:{transform:"x15kueqw",$$css:!0},highlightedItem:{backgroundColor:"xas4zb2",padding:"x1eygyu5",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},smallSelect:{fontSize:"x1uv3qv7",padding:"x1uz70x1",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},mediumSelect:{fontSize:"x579bpy",padding:"x3vcqe7",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},largeSelect:{fontSize:"x66fkqt",padding:"xis3749",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},smallLabel:{fontSize:"x1uv3qv7",top:"x1nwpe0i",$$css:!0},mediumLabel:{fontSize:"x1elmx46",top:"x1qq7kl",$$css:!0},largeLabel:{fontSize:"x579bpy",top:"xh3o63u",$$css:!0},bottomContentPosition:{top:"xis09m7",$$css:!0},topContentPosition:{bottom:"x16izlj8",$$css:!0},iconBase:{color:"x1mqxbix xat0y86",position:"x10l6tqk",right:"x1u62bzc",insetInlineStart:null,insetInlineEnd:null,top:"xwa60dl",transform:"x1cb1t30",$$css:!0},smallIcon:{height:"x1mf0rcc",width:"xq9tboe",$$css:!0},mediumIcon:{height:"x107nokf",width:"xe1jvqq",$$css:!0},largeIcon:{height:"xettwda",width:"xs5h3dt",$$css:!0}};export{t as default}; |
{ | ||
"name": "ioloco-ui", | ||
"version": "0.6.67", | ||
"version": "0.6.68", | ||
"description": "Stylex UI components for React", | ||
@@ -5,0 +5,0 @@ "author": { |
Sorry, the diff of this file is not supported yet
245214
3.04%3271
3.91%