ioloco-ui - npm Package Compare versions

Comparing version 0.6.65 to 0.6.67

dist/Components/Form/MultiSelect/index.js

 "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,z]=i(""),j=s(null),S=e=>{"Enter"===e.key&&h(null),"Escape"===e.key&&(h(null),z(""))};return l("div",Object.assign({},{className:"xh8yej3 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])),z(String(l[m]))));var l},children:[y===String(e[d])?n("input",Object.assign({ref:j},{className:"x1gs6z28 x1md70p1 xml2kzp x1717udv x1ghz6dp xh8yej3 x1uvtmcs"},{value:f,onChange:e=>z(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 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};

dist/Components/Form/Select/index.d.ts

 import { ISelect, SelectOption } from './types';
-declare const Select: <T extends SelectOption>({ options, label, size, field, Icon, defaultValue, firstOption, valueKey, labelKey, onClick, onSelect }: ISelect<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Select: <T extends SelectOption>({ options, label, size, field, Icon, defaultValue, firstOption, valueKey, labelKey, contentPosition, onClick, onSelect }: ISelect<T>) => import("react/jsx-runtime").JSX.Element;
 export default Select;

dist/Components/Form/Select/index.js

@@ -1,1 +0,1 @@
-import{jsxs as l,jsx as n}from"react/jsx-runtime";import d,{useState as o,useRef as r,useEffect as e}from"react";import i from"@stylexjs/stylex";const t=t=>{let{options:u,label:s,size:g,field:b,Icon:p,defaultValue:x,firstOption:c,valueKey:m="_id",labelKey:h="name",onClick:f,onSelect:S}=t;const[y,I]=o(!1),[k,$]=o(x||null),[R,w]=o(0),B=r(null),v=d.useId(),E=l=>{$(l),(null==b?void 0:b.onChange)&&b.onChange(l[m]),I(!1),S&&S(l)},C=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((()=>{const l=l=>{B.current&&!B.current.contains(l.target)&&I(!1)};return document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)}}),[]);const L=c?[c,...u]:u,z=!S&&!f&&k;return l("div",Object.assign({},{className:"xh8yej3 x1ypdohk x1n2onr6 x9f619 x41wgo0 x19xbygy"},{tabIndex:0,onKeyDown:l=>{switch(l.key){case"ArrowDown":w((l=>l<u.length-1?l+1:l));break;case"ArrowUp":w((l=>l>0?l-1:0));break;case"Enter":u[R]&&E(u[R]);break;case"Escape":I(!1)}},ref:B,role:"combobox","aria-expanded":y,"aria-haspopup":"listbox","aria-controls":`${v}-listbox`,"aria-label":s,children:[n("div",Object.assign({},i.props(a.label,a[`${g}Label`],z&&a.labelRaised),{id:`${v}-label`,children:s})),l("div",Object.assign({},i.props(a.dropdownLabel,a[`${g}Select`]),{onClick:()=>I(!y),id:v,role:"button","aria-labelledby":`${v}-label`,"aria-expanded":y,"aria-haspopup":"true",children:[n("div",Object.assign({},{className:"x98rzlu x1el264x x9frgcs"},{children:k?C(k):""})),p&&n(p,Object.assign({},{className:"x8cw2a4 x1mqxbix xat0y86 x10l6tqk x1u62bzc xwa60dl x1cb1t30"},{"aria-hidden":"true"}))]})),n("div",Object.assign({},{className:"x1n327nk x10l6tqk xh8yej3 x1717udv x1ghz6dp x1avysgf xu96u03 x12peec7 xm6uh0w xdhr1b5 x116uinm x11iwqir x1rife3k"},{id:`${v}-listbox`,role:"listbox","aria-labelledby":`${v}-label`,"aria-activedescendant":k?`${v}-option-${R}`:void 0,style:{display:y?"block":"none"},onClick:f,children:L.map(((l,d)=>n("div",Object.assign({id:`${v}-option-${d}`},i.props(a.dropdownItem,d===R&&a.highlightedItem),{role:"option","aria-selected":(null==k?void 0:k[m])===l[m],onClick:()=>E(l),onMouseEnter:()=>w(d),children:C(l)}),l[m])))}))]}))},a={dropdown:{width:"xh8yej3",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},dropdownLabel:{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:"xm6uh0w 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},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},labelRaised:{transform:"x15kueqw",$$css:!0},valueContainer:{flex:"x98rzlu",flexGrow:null,flexShrink:null,flexBasis:null,marginRight:"x1el264x",marginInlineStart:null,marginInlineEnd:null,minHeight:"x9frgcs",$$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,top:"x1avysgf",left:"xu96u03",insetInlineStart:null,insetInlineEnd:null,backgroundColor:"x12peec7",border:"xm6uh0w 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},iconBase:{fontSize:"x8cw2a4",color:"x1mqxbix xat0y86",position:"x10l6tqk",right:"x1u62bzc",insetInlineStart:null,insetInlineEnd:null,top:"xwa60dl",transform:"x1cb1t30",$$css:!0},highlightedItem:{backgroundColor:"x1si8nl4",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:"x13wtedm",top:"xh3o63u",$$css:!0}};export{t as default};
+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};

dist/Components/Form/Select/types.d.ts

@@ -9,2 +9,3 @@ import React, { ElementType } from 'react';
     size: 'small' | 'medium' | 'large';
+    contentPosition?: 'top' | 'bottom';
     field?: any;
@@ -11,0 +12,0 @@ Icon?: ElementType;

package.json

 {
   "name": "ioloco-ui",
-  "version": "0.6.65",
+  "version": "0.6.67",
   "description": "Stylex UI components for React",
@@ -49,2 +49,3 @@ "author": {
     "@storybook/addon-a11y": "^8.6.7",
+    "@storybook/addon-docs": "^8.6.9",
     "@storybook/addon-essentials": "^8.6.7",
@@ -51,0 +52,0 @@ "@storybook/addon-interactions": "^8.6.7",

No alert changes

Improved metrics

Total package byte prevSize

237969

0.42%

Number of package files

117

1.74%

Lines of code

3148

0.9%

Worsened metrics

Dev dependency count

52

1.96%

No dependency changes