@crab-dev/rc-select 0.0.1
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.
- package/README.md +20 -0
- package/cjs/index.cjs +1 -0
- package/css/index.css +42 -0
- package/declarations/index.d.ts +79 -0
- package/esm/index.mjs +1 -0
- package/package.json +74 -0
package/README.md
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
下拉选择器,支持单选、多选和搜索
|
|
2
|
+
|
|
3
|
+
## ✨ 特性
|
|
4
|
+
|
|
5
|
+
- 提供下拉选择能力,适用于结构化选项录入
|
|
6
|
+
- 支持在有限空间内高效完成选项检索与选择
|
|
7
|
+
- 适用于表单字段、筛选面板与配置项编辑
|
|
8
|
+
- 当前版本:`0.0.1`
|
|
9
|
+
- 示例数量:`10` 个 Demo
|
|
10
|
+
- 主题能力:支持 Design Token(token.toml)
|
|
11
|
+
|
|
12
|
+
## 🔨 使用示例
|
|
13
|
+
|
|
14
|
+
<demos />
|
|
15
|
+
|
|
16
|
+
## API
|
|
17
|
+
|
|
18
|
+
<api />
|
|
19
|
+
|
|
20
|
+
> 其余原生属性按底层实现透传,详见 API。
|
package/cjs/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@crab-dev/rc-dropdown-container"),l=require("react"),t=require("@crab-dev/rc-hooks"),r=require("react/compiler-runtime"),s=require("@crab-dev/rc-line-edit"),o=require("@crab-dev/rc-spin"),a=require("@crab-dev/rc-tag"),n=require("@linaria/core"),i=require("react/jsx-dev-runtime"),c=require("@crab-dev/rc-checkbox"),d=require("@crab-dev/rc-virtual");function u(e){return e&&e.__esModule?e:{default:e}}var h=u(e),p=u(s),v=u(a),g=u(c),f=u(d);const x="rc-select-c1dsn6ds",m="rc-select-p1l0d023",b={large:"rc-select-l1ohqr33",middle:"rc-select-mvtp1fw",small:"rc-select-s1n8wm60"},j={large:"rc-select-ls4o1df",middle:"rc-select-mxdjkcj",small:"rc-select-s1qq3fet"},D={large:"rc-select-l11npiub",middle:"rc-select-mnw2jq7",small:"rc-select-s1p8llhq"},E=()=>{const e=r.c(1);let l;return e[0]===Symbol.for("react.memo_cache_sentinel")?(l=i.jsxDEV("svg",{width:"12",height:"12",viewBox:"0 0 1024 1024",fill:"currentColor",children:i.jsxDEV("path",{d:"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z"},void 0,!1)},void 0,!1),e[0]=l):l=e[0],l},y=()=>{const e=r.c(1);let l;return e[0]===Symbol.for("react.memo_cache_sentinel")?(l=i.jsxDEV("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[i.jsxDEV("circle",{cx:"12",cy:"12",r:"10"},void 0,!1),i.jsxDEV("path",{d:"m15 9-6 6M9 9l6 6"},void 0,!1)]},void 0,!0),e[0]=l):l=e[0],l},V=({ref:t,ariaLabel:r,disabled:s,searchable:a,multiple:c,size:d,status:u,allowClear:h,loading:g,maxTagCount:f,autoFocus:V,placeholder:C,selectedOptions:w,searchText:k,highlightIndex:N,highlightedOption:O,listboxId:R,tagRender:q,onSearchTextChange:_,onOpenChange:I,onWidthChange:L,onMoveHighlight:S,onSelectHighlighted:F,onClear:H,onRemoveTag:M,onFocus:T,onBlur:z})=>{const{state:B,refs:W,dispatch:A}=e.useDropdownContext(),G=l.useRef(null),$=l.useRef(null),P=B.open,K=l.useRef(I);K.current=I;const U=l.useCallback(e=>{G.current=e,"function"==typeof W.setReference&&W.setReference(e),((e,l)=>{"function"==typeof e?e(l):e&&(e.current=l)})(t,e)},[W.setReference,t]);l.useEffect(()=>{const e=G.current;if(!e)return;const l=new ResizeObserver(e=>{for(const l of e)L(l.target.getBoundingClientRect().width)});return l.observe(e),()=>l.disconnect()},[L]),l.useEffect(()=>{P&&a&&queueMicrotask(()=>$.current?.focus())},[P,a]),l.useEffect(()=>{V&&G.current&&G.current.focus()},[V]);const J=l.useRef(!0);l.useEffect(()=>{J.current?J.current=!1:K.current(P)},[P]);const Q=()=>{H(),P&&A({type:"setOpen",payload:!1})},X=h&&!s&&w.length>0,Y=e=>{const l=()=>M(e.value);return q?i.jsxDEV("span",{children:q(e,l)},e.value,!1):i.jsxDEV(v.default,{size:"small",closable:!0,closeAriaLabel:`Remove ${"string"==typeof e.label?e.label:e.value}`,onClose:l,children:i.jsxDEV("span",{className:"rc-select-tj3q1lh",children:e.label},void 0,!1)},e.value,!1)},Z=()=>{if(void 0!==f&&w.length>f){const e=w.slice(0,f),l=w.length-f;return i.jsxDEV(i.Fragment,{children:[e.map(Y),i.jsxDEV(v.default,{size:"small",children:["+",l]},void 0,!0)]},void 0,!0)}return w.map(Y)},ee=P&&N>=0?`${R}-option-${N}`:void 0;return i.jsxDEV("div",{role:"combobox","aria-label":r,"aria-expanded":P,"aria-disabled":s,"aria-busy":g||void 0,"aria-haspopup":"listbox","aria-controls":P?R:void 0,"aria-activedescendant":ee,"aria-invalid":"error"===u||void 0,tabIndex:s?-1:0,ref:U,className:n.cx("rc-select-c1l5vx99",b[d],c?D[d]:j[d],!u&&P&&x,s&&"rc-select-cvb0fm4",u?"error"===u?n.cx("rc-select-c1na8b52",P&&"rc-select-c19mujlp"):n.cx("rc-select-c16epqep",P&&"rc-select-ckhhleb"):P?x:void 0),onClick:()=>{s||A({type:"setOpen",payload:!P})},onKeyDown:e=>{if(!s)switch(e.key){case"ArrowDown":e.preventDefault(),P||A({type:"setOpen",payload:!0}),S(1);break;case"ArrowUp":e.preventDefault(),P||A({type:"setOpen",payload:!0}),S(-1);break;case"Enter":e.preventDefault(),P&&O?(F(O),c||A({type:"setOpen",payload:!1})):P||A({type:"setOpen",payload:!0});break;case" ":a&&P||(e.preventDefault(),P||A({type:"setOpen",payload:!0}));break;case"Escape":P&&(e.preventDefault(),A({type:"setOpen",payload:!1}));break;case"Backspace":if(c&&""===k&&w.length>0){const e=w[w.length-1];M(e.value)}}},onFocus:T,onBlur:z,children:[i.jsxDEV("div",{className:"rc-select-v1mxlf89",children:a&&P?i.jsxDEV(i.Fragment,{children:[c&&Z(),i.jsxDEV(p.default,{ref:$,bordered:!1,value:k,placeholder:c&&w.length>0?"":C,onChange:e=>_(e.target.value),onClick:e=>e.stopPropagation(),className:"rc-select-s1r0kmh4"},void 0,!1)]},void 0,!0):c?0===w.length?i.jsxDEV("span",{className:m,children:C},void 0,!1):Z():0===w.length?i.jsxDEV("span",{className:m,children:C},void 0,!1):i.jsxDEV("span",{className:"rc-select-sfumuma",children:w[0]?.label},void 0,!1)},void 0,!1),g?i.jsxDEV("span",{className:"rc-select-l1m17a72",children:i.jsxDEV(o.SpinIndicator,{},void 0,!1)},void 0,!1):null,i.jsxDEV("span",{className:"rc-select-s10zhocr",children:[i.jsxDEV("span",{"data-role":X?"select-caret":void 0,className:n.cx("rc-select-c1t4pqsr",P&&"rc-select-c1a799e8"),children:i.jsxDEV(E,{},void 0,!1)},void 0,!1),X?i.jsxDEV("span",{"data-role":"select-clear",className:"rc-select-c1i3ciyg",role:"button",tabIndex:0,"aria-label":"Clear",onClick:e=>{e.stopPropagation(),Q()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),Q())},children:i.jsxDEV(y,{},void 0,!1)},void 0,!1):null]},void 0,!0)]},void 0,!0)},C="rc-select-o197jepe",w=t=>{const s=r.c(51),{multiple:a,loading:c,filteredOptions:d,selectedValues:u,triggerWidth:h,highlightIndex:p,listboxId:v,notFoundContent:x,popupClassName:m,optionRender:b,dropdownRender:j,onOptionSelect:D,onOpenChange:E,onHighlightChange:y}=t,{dispatch:V}=e.useDropdownContext(),w=l.useRef(null);let k,N;if(s[0]!==p?(k=()=>{p<0||w.current?.scrollToCell({rowIndex:p})},N=[p],s[0]=p,s[1]=k,s[2]=N):(k=s[1],N=s[2]),l.useEffect(k,N),c){let e,l,t;return s[3]!==m?(e=n.cx(C,m),s[3]=m,s[4]=e):e=s[4],s[5]===Symbol.for("react.memo_cache_sentinel")?(l=i.jsxDEV("div",{className:"rc-select-l274z9g",children:i.jsxDEV(o.SpinIndicator,{},void 0,!1)},void 0,!1),s[5]=l):l=s[5],s[6]!==v||s[7]!==e?(t=i.jsxDEV("div",{id:v,role:"listbox","aria-busy":"true","data-select-overlay":!0,className:e,children:l},void 0,!1),s[6]=v,s[7]=e,s[8]=t):t=s[8],t}if(0===d.length){let e;s[9]!==m?(e=n.cx(C,m),s[9]=m,s[10]=e):e=s[10];const l=x??"无匹配选项";let t,r;return s[11]!==l?(t=i.jsxDEV("div",{className:"rc-select-e198oa40",children:l},void 0,!1),s[11]=l,s[12]=t):t=s[12],s[13]!==v||s[14]!==e||s[15]!==t?(r=i.jsxDEV("div",{id:v,role:"listbox","data-select-overlay":!0,className:e,children:t},void 0,!1),s[13]=v,s[14]=e,s[15]=t,s[16]=r):r=s[16],r}const O=d.length,R=Math.max(h-8,160),q=Math.min(256,32*O);let _;s[17]!==O?(_=Array(O).fill(32),s[17]=O,s[18]=_):_=s[18];const I=_;let L;s[19]!==d?(L=d.some(e=>e.isGroupLabel),s[19]=d,s[20]=L):L=s[20];const S=L;let F,H,M;s[21]!==R?(F=[R],s[21]=R,s[22]=F):F=s[22],s[23]!==V||s[24]!==d||s[25]!==p||s[26]!==S||s[27]!==v||s[28]!==a||s[29]!==y||s[30]!==E||s[31]!==D||s[32]!==b||s[33]!==u?(H=e=>{const l=[i.jsxDEV("div",{className:"rc-select-d1dli847"},"__select-top-padding__",!1)];for(let t=e[0];t<=e[1];t+=1,t){const e=d[t];if(e.isGroupLabel){l.push(i.jsxDEV("div",{"data-group-label":!0,className:"rc-select-g17o4y",children:e.label},e.value,!1));continue}const r=u.includes(e.value),s=t===p,o=b?b(e,{selected:r}):i.jsxDEV(i.Fragment,{children:[a?i.jsxDEV(g.default,{className:"rc-select-c19svz90",checked:r,disabled:e.disabled,tabIndex:-1,"aria-label":"string"==typeof e.label?e.label:e.value},void 0,!1):null,i.jsxDEV("span",{className:"rc-select-o1dhqqw2",children:e.label},void 0,!1),!a&&r?i.jsxDEV("span",{className:"rc-select-c3deb06",children:i.jsxDEV("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:i.jsxDEV("path",{d:"M20 6 9 17l-5-5"},void 0,!1)},void 0,!1)},void 0,!1):null]},void 0,!0),c=a?"string"==typeof e.label?e.label:e.value:void 0;l.push(i.jsxDEV("div",{id:`${v}-option-${t}`,role:"option","aria-selected":r,"aria-label":c,className:n.cx("rc-select-o8623go",S&&"rc-select-gc4dk9f",r&&(a?"rc-select-oxaegfe":"rc-select-o16p9iym"),s&&"rc-select-o1n324dj",e.disabled&&"rc-select-o1qyr5qv"),onMouseEnter:()=>y(t),onClick:()=>{D(e),a||e.disabled||(V({type:"setOpen",payload:!1}),E(!1))},children:o},e.value,!1))}return l.push(i.jsxDEV("div",{className:"rc-select-d1a6h40l"},"__select-bottom-padding__",!1)),l},s[23]=V,s[24]=d,s[25]=p,s[26]=S,s[27]=v,s[28]=a,s[29]=y,s[30]=E,s[31]=D,s[32]=b,s[33]=u,s[34]=H):H=s[34],s[35]!==R||s[36]!==I||s[37]!==F||s[38]!==H||s[39]!==q?(M=i.jsxDEV(f.default,{gridRef:w,viewportWidth:R,viewportHeight:q,gridTemplateColumns:F,gridTemplateRows:I,renderRows:H},void 0,!1),s[35]=R,s[36]=I,s[37]=F,s[38]=H,s[39]=q,s[40]=M):M=s[40];const T=M;let z;s[41]!==m?(z=n.cx(C,m),s[41]=m,s[42]=z):z=s[42];const B=a||void 0;let W,A;return s[43]!==j||s[44]!==T?(W=j?j(T):T,s[43]=j,s[44]=T,s[45]=W):W=s[45],s[46]!==v||s[47]!==W||s[48]!==z||s[49]!==B?(A=i.jsxDEV("div",{id:v,"data-select-overlay":!0,className:z,role:"listbox","aria-multiselectable":B,children:W},void 0,!1),s[46]=v,s[47]=W,s[48]=z,s[49]=B,s[50]=A):A=s[50],A},k=e=>"options"in e&&Array.isArray(e.options),N=e=>void 0===e?[]:Array.isArray(e)?e:[e],O=(e,l,t)=>{if(!l||""===t.trim())return e;const r=t.trim().toLowerCase();return e.filter(e=>!e.isGroupLabel&&("string"==typeof e.label?e.label.toLowerCase().includes(r):e.value.toLowerCase().includes(r)))};exports.default=({ref:e,options:s,placeholder:o="请选择",disabled:a=!1,searchable:n=!1,multiple:c=!1,size:d="middle",status:u,allowClear:p=!1,loading:v=!1,maxTagCount:g,autoFocus:f=!1,notFoundContent:x,popupClassName:m,popupMatchSelectWidth:b=!0,optionRender:j,tagRender:D,dropdownRender:E,value:y,defaultValue:C,onChange:R,onOpenChange:q,onFocus:_,onBlur:I,className:L,"aria-label":S,...F})=>{const H=l.useId(),[M,T]=l.useState(""),[z,B]=t.useControllableValue({value:void 0!==y?N(y):void 0,defaultValue:N(C)}),[W,A]=l.useState(0),G=l.useRef(q);G.current=q;const $=(e=>{const l=[];for(const t of e)if(k(t))for(const e of t.options)l.push(e);else l.push(t);return l})(s),P=$.filter(e=>z.includes(e.value)),K=(e=>{const l=[];return e.forEach((e,t)=>{if(k(e)){l.push({label:e.label,value:`__group_${t}`,isGroupLabel:!0});for(const t of e.options)l.push(t)}else l.push(e)}),l})(s),U=O(K,n,M),{highlightIndex:J,highlightedOption:Q,moveHighlight:X,resetHighlight:Y,setHighlightIndex:Z}=(e=>{const t=r.c(10),{filteredOptions:s,open:o}=e,[a,n]=l.useState(-1);let i;t[0]!==s?(i=(e,l)=>{const t=s.length;if(0===t)return-1;let r=e;for(let e=0;e<t;e+=1,e){r=((r+l)%t+t)%t;const e=s[r];if(!e.disabled&&!e.isGroupLabel)return r}return-1},t[0]=s,t[1]=i):i=t[1];const c=i;let d;t[2]!==c||t[3]!==o?(d=e=>{o&&n(l=>c(-1===l?1===e?-1:0:l,e))},t[2]=c,t[3]=o,t[4]=d):d=t[4];const u=d;let h;t[5]===Symbol.for("react.memo_cache_sentinel")?(h=()=>{n(-1)},t[5]=h):h=t[5];const p=h,v=a>=0&&a<s.length?s[a]:void 0;let g;return t[6]!==a||t[7]!==v||t[8]!==u?(g={highlightIndex:a,highlightedOption:v,moveHighlight:u,resetHighlight:p,setHighlightIndex:n},t[6]=a,t[7]=v,t[8]=u,t[9]=g):g=t[9],g})({filteredOptions:U,open:!0}),ee=e=>{if(e){if(!c&&z.length>0){const e=U.findIndex(e=>e.value===z[0]);Z(e)}}else T(""),Y();G.current?.(e)},le=e=>{if(B(e),c){const l=$.filter(l=>e.includes(l.value));return void R?.(e,l)}const l=e[0],t=$.find(e=>e.value===l);R?.(l,t)},te=e=>{if(!e.disabled&&!e.isGroupLabel){if(c){const l=z.includes(e.value)?z.filter(l=>l!==e.value):[...z,e.value];return void le(l)}le([e.value])}},re=b?{width:W}:{minWidth:W};return i.jsxDEV(h.default,{...F,className:L,overlay:i.jsxDEV(w,{multiple:c,loading:v,filteredOptions:U,selectedValues:z,triggerWidth:W,highlightIndex:J,listboxId:H,notFoundContent:x,popupClassName:m,optionRender:j,dropdownRender:E,onOptionSelect:te,onOpenChange:ee,onHighlightChange:Z},void 0,!1),floatingContainerProps:{style:re},children:i.jsxDEV(V,{ref:e,ariaLabel:S,disabled:a,searchable:n,multiple:c,size:d,status:u,allowClear:p,loading:v,maxTagCount:g,autoFocus:f,placeholder:o,selectedOptions:P,searchText:M,highlightIndex:J,highlightedOption:Q,listboxId:H,tagRender:D,onSearchTextChange:e=>{T(e);const l=O(K,n,e);Z((e=>e.findIndex(e=>!e.disabled&&!e.isGroupLabel))(l))},onOpenChange:ee,onWidthChange:e=>{A(e)},onMoveHighlight:X,onSelectHighlighted:te,onClear:()=>{le([]),T("")},onRemoveTag:e=>{le(z.filter(l=>l!==e))},onFocus:_,onBlur:I},void 0,!1)},void 0,!1)};
|
package/css/index.css
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
.rc-select-c1l5vx99{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;box-sizing:border-box;border:1px solid var(--select-border-color, var(--token-semantic-color-border-default, var(--token-global-zinc-200, oklch(0.900 0.004 286))));border-radius:var(--select-border-radius, var(--token-semantic-radius-md, var(--token-global-radius-3, 6px)));background-color:transparent;color:var(--select-text-color, var(--token-semantic-color-text-primary, var(--token-global-zinc-950, oklch(0.140 0.004 286))));cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;-webkit-transition:var(--select-transition, background-color 100ms cubic-bezier(0.4, 0, 0.2, 1), border-color 100ms cubic-bezier(0.4, 0, 0.2, 1), color 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1));transition:var(--select-transition, background-color 100ms cubic-bezier(0.4, 0, 0.2, 1), border-color 100ms cubic-bezier(0.4, 0, 0.2, 1), color 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1));}.rc-select-c1l5vx99:hover:not([aria-disabled="true"]){border-color:var(--select-border-color-hover, var(--token-semantic-color-border-hover, var(--token-global-zinc-300, oklch(0.840 0.008 286))));}.rc-select-c1l5vx99:hover:not([aria-disabled="true"]) [data-role="select-clear"]{opacity:1;}.rc-select-c1l5vx99:hover:not([aria-disabled="true"]) [data-role="select-caret"]{opacity:0;}.rc-select-c1l5vx99:focus-visible{border-color:var(--select-border-color-focus, var(--token-semantic-color-border-focus, var(--token-global-zinc-950, oklch(0.140 0.004 286))));box-shadow:var(--select-shadow-focus, var(--token-semantic-shadow-focus-ring, 0 0 0 3px oklch(0.140 0.004 286 / 0.25)));}@media (prefers-reduced-motion: reduce){.rc-select-c1l5vx99{-webkit-transition:none;transition:none;}}
|
|
2
|
+
.rc-select-c1dsn6ds{border-color:var(--select-border-color-focus, var(--token-semantic-color-border-focus, var(--token-global-zinc-950, oklch(0.140 0.004 286))));box-shadow:var(--select-shadow-focus, var(--token-semantic-shadow-focus-ring, 0 0 0 3px oklch(0.140 0.004 286 / 0.25)));}
|
|
3
|
+
.rc-select-cvb0fm4{opacity:0.5;cursor:not-allowed;pointer-events:none;}
|
|
4
|
+
.rc-select-c1na8b52{border-color:var(--select-border-color-error, var(--token-semantic-color-border-error, var(--token-global-red-500, oklch(0.637 0.237 24))));}.rc-select-c1na8b52:hover:not([aria-disabled="true"]){border-color:var(--select-border-color-error, var(--token-semantic-color-border-error, var(--token-global-red-500, oklch(0.637 0.237 24))));}.rc-select-c1na8b52:focus-visible{border-color:var(--select-border-color-error, var(--token-semantic-color-border-error, var(--token-global-red-500, oklch(0.637 0.237 24))));box-shadow:var(--select-shadow-focus-error, 0 0 0 3px oklch(0.637 0.237 24 / 0.25));}
|
|
5
|
+
.rc-select-c19mujlp{border-color:var(--select-border-color-error, var(--token-semantic-color-border-error, var(--token-global-red-500, oklch(0.637 0.237 24))));box-shadow:var(--select-shadow-focus-error, 0 0 0 3px oklch(0.637 0.237 24 / 0.25));}
|
|
6
|
+
.rc-select-c16epqep{border-color:var(--select-border-color-warning, var(--token-semantic-color-feedback-warning, var(--token-global-amber-500, oklch(0.769 0.188 75))));}.rc-select-c16epqep:hover:not([aria-disabled="true"]){border-color:var(--select-border-color-warning, var(--token-semantic-color-feedback-warning, var(--token-global-amber-500, oklch(0.769 0.188 75))));}.rc-select-c16epqep:focus-visible{border-color:var(--select-border-color-warning, var(--token-semantic-color-feedback-warning, var(--token-global-amber-500, oklch(0.769 0.188 75))));box-shadow:var(--select-shadow-focus-warning, 0 0 0 3px oklch(0.769 0.188 75 / 0.25));}
|
|
7
|
+
.rc-select-ckhhleb{border-color:var(--select-border-color-warning, var(--token-semantic-color-feedback-warning, var(--token-global-amber-500, oklch(0.769 0.188 75))));box-shadow:var(--select-shadow-focus-warning, 0 0 0 3px oklch(0.769 0.188 75 / 0.25));}
|
|
8
|
+
.rc-select-v1mxlf89{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;overflow:hidden;}
|
|
9
|
+
.rc-select-sfumuma{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
10
|
+
.rc-select-p1l0d023{color:var(--select-text-color-placeholder, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
11
|
+
.rc-select-s1r0kmh4{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;}
|
|
12
|
+
.rc-select-c1t4pqsr{margin-left:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--select-text-color-placeholder, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));-webkit-transition:-webkit-transform 200ms ease,opacity 100ms ease;transition:transform 200ms ease,opacity 100ms ease;}@media (prefers-reduced-motion: reduce){.rc-select-c1t4pqsr{-webkit-transition:none;transition:none;}}
|
|
13
|
+
.rc-select-c1a799e8{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
|
|
14
|
+
.rc-select-tj3q1lh{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;}
|
|
15
|
+
.rc-select-s10zhocr{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-left:8px;}
|
|
16
|
+
.rc-select-c1i3ciyg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--select-clear-color, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));cursor:pointer;position:absolute;inset:-6px;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;opacity:0;-webkit-transition:opacity 100ms ease;transition:opacity 100ms ease;}.rc-select-c1i3ciyg:hover{color:var(--select-clear-color-hover, var(--token-semantic-color-text-primary, var(--token-global-zinc-950, oklch(0.140 0.004 286))));}.rc-select-c1i3ciyg:focus-visible{opacity:1;outline:none;box-shadow:var(--select-shadow-focus, var(--token-semantic-shadow-focus-ring, 0 0 0 3px oklch(0.140 0.004 286 / 0.25)));}@media (prefers-reduced-motion: reduce){.rc-select-c1i3ciyg{-webkit-transition:none;transition:none;}}
|
|
17
|
+
.rc-select-l1m17a72{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--select-loading-color, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-left:8px;--rc-spin-size:14px;--spin-ring-indicator-color:currentColor;--spin-ring-track-color:transparent;}
|
|
18
|
+
.rc-select-l1ohqr33{padding:var(--select-size-large-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-space-control-padding-x, var(--token-global-space-3, 12px)));font-size:var(--select-size-large-font-size, var(--token-semantic-font-size-subhead, var(--token-global-font-size-md, 16px)));line-height:var(--select-size-large-line-height, 1.5rem);}
|
|
19
|
+
.rc-select-mvtp1fw{padding:var(--select-size-middle-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-space-control-padding-x, var(--token-global-space-3, 12px)));font-size:var(--select-size-middle-font-size, var(--token-semantic-font-size-body, var(--token-global-font-size-sm, 14px)));line-height:var(--select-size-middle-line-height, 1.25rem);}
|
|
20
|
+
.rc-select-s1n8wm60{padding:var(--select-size-small-padding, var(--token-semantic-space-inline-gap, var(--token-global-space-1, 4px)) var(--token-semantic-space-control-padding-x, var(--token-global-space-3, 12px)));font-size:var(--select-size-small-font-size, var(--token-semantic-font-size-body, var(--token-global-font-size-sm, 14px)));line-height:var(--select-size-small-line-height, 1.25rem);}
|
|
21
|
+
.rc-select-ls4o1df{height:var(--select-size-large-height, 40px);}
|
|
22
|
+
.rc-select-mxdjkcj{height:var(--select-size-middle-height, 32px);}
|
|
23
|
+
.rc-select-s1qq3fet{height:var(--select-size-small-height, 24px);}
|
|
24
|
+
.rc-select-l11npiub{min-height:var(--select-size-large-height, 40px);}
|
|
25
|
+
.rc-select-mnw2jq7{min-height:var(--select-size-middle-height, 32px);}
|
|
26
|
+
.rc-select-s1p8llhq{min-height:var(--select-size-small-height, 24px);}
|
|
27
|
+
|
|
28
|
+
.rc-select-o197jepe{padding:var(--select-dropdown-padding, 4px);overflow:hidden;}
|
|
29
|
+
.rc-select-o8623go{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:6px 8px;border-radius:3px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:32px;box-sizing:border-box;font-size:14px;outline:none;-webkit-transition:var(--select-transition, background-color 100ms cubic-bezier(0.4, 0, 0.2, 1), border-color 100ms cubic-bezier(0.4, 0, 0.2, 1), color 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1));transition:var(--select-transition, background-color 100ms cubic-bezier(0.4, 0, 0.2, 1), border-color 100ms cubic-bezier(0.4, 0, 0.2, 1), color 100ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 100ms cubic-bezier(0.4, 0, 0.2, 1));}.rc-select-o8623go:hover{background-color:var(--select-option-color-hover, var(--token-semantic-color-background-hover-subtle, var(--token-global-zinc-100, oklch(0.950 0.003 286))));}.rc-select-o8623go:active{background-color:var(--select-option-color-hover, var(--token-semantic-color-background-hover-subtle, var(--token-global-zinc-100, oklch(0.950 0.003 286))));}.rc-select-o8623go[aria-selected="true"]{background-color:var(--select-option-background-selected, var(--token-semantic-color-background-active-subtle, var(--token-global-zinc-200, oklch(0.900 0.004 286))));}@media (prefers-reduced-motion: reduce){.rc-select-o8623go{-webkit-transition:none;transition:none;}}
|
|
30
|
+
.rc-select-o1n324dj{background-color:var(--select-option-highlight-background, var(--token-semantic-color-background-hover-subtle, var(--token-global-zinc-100, oklch(0.950 0.003 286))));}
|
|
31
|
+
.rc-select-oxaegfe{font-weight:500;}
|
|
32
|
+
.rc-select-o16p9iym{font-weight:500;color:var(--select-option-color-selected, var(--token-semantic-color-brand-primary, var(--token-global-zinc-900, oklch(0.220 0.005 286))));}
|
|
33
|
+
.rc-select-o1qyr5qv{opacity:0.5;pointer-events:none;}
|
|
34
|
+
.rc-select-o1dhqqw2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;}
|
|
35
|
+
.rc-select-c3deb06{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:16px;height:16px;margin-left:8px;color:var(--select-option-color-selected, var(--token-semantic-color-brand-primary, var(--token-global-zinc-900, oklch(0.220 0.005 286))));}
|
|
36
|
+
.rc-select-c19svz90{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:8px;pointer-events:none;}
|
|
37
|
+
.rc-select-e198oa40{padding:24px 8px;color:var(--select-text-color-placeholder, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));text-align:center;font-size:14px;}
|
|
38
|
+
.rc-select-g17o4y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4px 8px;height:32px;box-sizing:border-box;font-size:var(--select-group-font-size, var(--token-semantic-font-size-caption, var(--token-global-font-size-xs, 12px)));color:var(--select-group-color, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:4px;}.rc-select-g17o4y:first-child{margin-top:0;}
|
|
39
|
+
.rc-select-gc4dk9f{padding-left:20px;}
|
|
40
|
+
.rc-select-l274z9g{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:24px 8px;color:var(--select-loading-color, var(--token-semantic-color-text-secondary, var(--token-global-zinc-500, oklch(0.660 0.014 286))));--rc-spin-size:20px;--spin-ring-indicator-color:currentColor;--spin-ring-track-color:transparent;}
|
|
41
|
+
.rc-select-d1dli847{display:inline-block;height:var(--crab-rc-virtual-top-padding-height, 0px);width:100%;}
|
|
42
|
+
.rc-select-d1a6h40l{display:inline-block;height:var(--crab-rc-virtual-bottom-padding-height, 0px);width:100%;}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { ReactNode, HTMLAttributes, Ref, FC } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* 单个选项
|
|
5
|
+
* - `label`: 渲染时显示的内容(可以是字符串或 React 节点)
|
|
6
|
+
* - `value`: 选项的唯一标识(字符串)
|
|
7
|
+
* - `disabled`: 可选,是否禁用该选项
|
|
8
|
+
*/
|
|
9
|
+
interface SelectOption {
|
|
10
|
+
label: ReactNode;
|
|
11
|
+
value: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* 选项分组
|
|
16
|
+
* - `label`: 分组标题(用于在下拉列表中显示)
|
|
17
|
+
* - `options`: 该分组包含的多个 `SelectOption`
|
|
18
|
+
*/
|
|
19
|
+
interface SelectOptionGroup {
|
|
20
|
+
label: ReactNode;
|
|
21
|
+
options: SelectOption[];
|
|
22
|
+
}
|
|
23
|
+
type SelectOptionOrGroup = SelectOption | SelectOptionGroup;
|
|
24
|
+
/**
|
|
25
|
+
* 基础 Props,适用于单选和多选。继承自 div 的 HTML 属性,但排除了
|
|
26
|
+
* `onChange` 和 `defaultValue`,因为它们在单选/多选中有不同签名。
|
|
27
|
+
*/
|
|
28
|
+
interface BaseSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
29
|
+
ref?: Ref<HTMLDivElement>;
|
|
30
|
+
options: SelectOptionOrGroup[];
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
searchable?: boolean;
|
|
34
|
+
size?: "large" | "middle" | "small";
|
|
35
|
+
status?: "error" | "warning";
|
|
36
|
+
allowClear?: boolean;
|
|
37
|
+
loading?: boolean;
|
|
38
|
+
maxTagCount?: number;
|
|
39
|
+
autoFocus?: boolean;
|
|
40
|
+
notFoundContent?: ReactNode;
|
|
41
|
+
popupClassName?: string;
|
|
42
|
+
popupMatchSelectWidth?: boolean;
|
|
43
|
+
optionRender?: (option: SelectOption, info: {
|
|
44
|
+
selected: boolean;
|
|
45
|
+
}) => ReactNode;
|
|
46
|
+
tagRender?: (option: SelectOption, onClose: () => void) => ReactNode;
|
|
47
|
+
dropdownRender?: (menu: ReactNode) => ReactNode;
|
|
48
|
+
onOpenChange?: (open: boolean) => void;
|
|
49
|
+
onFocus?: () => void;
|
|
50
|
+
onBlur?: () => void;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* 单选模式 Props
|
|
54
|
+
* - `multiple` 可选或 false
|
|
55
|
+
* - `value` / `defaultValue` 为单个字符串或 undefined
|
|
56
|
+
*/
|
|
57
|
+
interface SingleSelectProps extends BaseSelectProps {
|
|
58
|
+
multiple?: false;
|
|
59
|
+
value?: string;
|
|
60
|
+
defaultValue?: string;
|
|
61
|
+
onChange?: (value: string | undefined, option: SelectOption | undefined) => void;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* 多选模式 Props
|
|
65
|
+
* - `multiple` 必须为 true
|
|
66
|
+
* - `value` / `defaultValue` 为字符串数组
|
|
67
|
+
*/
|
|
68
|
+
interface MultiSelectProps extends BaseSelectProps {
|
|
69
|
+
multiple: true;
|
|
70
|
+
value?: string[];
|
|
71
|
+
defaultValue?: string[];
|
|
72
|
+
onChange?: (value: string[], options: SelectOption[]) => void;
|
|
73
|
+
}
|
|
74
|
+
type SelectProps = SingleSelectProps | MultiSelectProps;
|
|
75
|
+
|
|
76
|
+
declare const Select: FC<SelectProps>;
|
|
77
|
+
|
|
78
|
+
export { Select as default };
|
|
79
|
+
export type { SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps };
|
package/esm/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e,{useDropdownContext as l}from"@crab-dev/rc-dropdown-container";import{useState as t,useRef as o,useCallback as r,useEffect as a,useId as n}from"react";import{useControllableValue as i}from"@crab-dev/rc-hooks";import{c as s}from"react/compiler-runtime";import c from"@crab-dev/rc-line-edit";import{SpinIndicator as d}from"@crab-dev/rc-spin";import h from"@crab-dev/rc-tag";import{cx as p}from"@linaria/core";import{jsxDEV as u,Fragment as v}from"react/jsx-dev-runtime";import g from"@crab-dev/rc-checkbox";import m from"@crab-dev/rc-virtual";const f="rc-select-c1dsn6ds",b="rc-select-p1l0d023",y={large:"rc-select-l1ohqr33",middle:"rc-select-mvtp1fw",small:"rc-select-s1n8wm60"},x={large:"rc-select-ls4o1df",middle:"rc-select-mxdjkcj",small:"rc-select-s1qq3fet"},C={large:"rc-select-l11npiub",middle:"rc-select-mnw2jq7",small:"rc-select-s1p8llhq"},w=()=>{const e=s(1);let l;return e[0]===Symbol.for("react.memo_cache_sentinel")?(l=u("svg",{width:"12",height:"12",viewBox:"0 0 1024 1024",fill:"currentColor",children:u("path",{d:"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z"},void 0,!1)},void 0,!1),e[0]=l):l=e[0],l},k=()=>{const e=s(1);let l;return e[0]===Symbol.for("react.memo_cache_sentinel")?(l=u("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[u("circle",{cx:"12",cy:"12",r:"10"},void 0,!1),u("path",{d:"m15 9-6 6M9 9l6 6"},void 0,!1)]},void 0,!0),e[0]=l):l=e[0],l},N=({ref:e,ariaLabel:t,disabled:n,searchable:i,multiple:s,size:g,status:m,allowClear:N,loading:O,maxTagCount:R,autoFocus:_,placeholder:I,selectedOptions:L,searchText:q,highlightIndex:H,highlightedOption:T,listboxId:S,tagRender:j,onSearchTextChange:z,onOpenChange:F,onWidthChange:M,onMoveHighlight:B,onSelectHighlighted:D,onClear:W,onRemoveTag:A,onFocus:G,onBlur:$})=>{const{state:E,refs:P,dispatch:V}=l(),K=o(null),U=o(null),J=E.open,Q=o(F);Q.current=F;const X=r(l=>{K.current=l,"function"==typeof P.setReference&&P.setReference(l),((e,l)=>{"function"==typeof e?e(l):e&&(e.current=l)})(e,l)},[P.setReference,e]);a(()=>{const e=K.current;if(!e)return;const l=new ResizeObserver(e=>{for(const l of e)M(l.target.getBoundingClientRect().width)});return l.observe(e),()=>l.disconnect()},[M]),a(()=>{J&&i&&queueMicrotask(()=>U.current?.focus())},[J,i]),a(()=>{_&&K.current&&K.current.focus()},[_]);const Y=o(!0);a(()=>{Y.current?Y.current=!1:Q.current(J)},[J]);const Z=()=>{W(),J&&V({type:"setOpen",payload:!1})},ee=N&&!n&&L.length>0,le=e=>{const l=()=>A(e.value);return j?u("span",{children:j(e,l)},e.value,!1):u(h,{size:"small",closable:!0,closeAriaLabel:`Remove ${"string"==typeof e.label?e.label:e.value}`,onClose:l,children:u("span",{className:"rc-select-tj3q1lh",children:e.label},void 0,!1)},e.value,!1)},te=()=>{if(void 0!==R&&L.length>R){const e=L.slice(0,R),l=L.length-R;return u(v,{children:[e.map(le),u(h,{size:"small",children:["+",l]},void 0,!0)]},void 0,!0)}return L.map(le)};return u("div",{role:"combobox","aria-label":t,"aria-expanded":J,"aria-disabled":n,"aria-busy":O||void 0,"aria-haspopup":"listbox","aria-controls":J?S:void 0,"aria-activedescendant":J&&H>=0?`${S}-option-${H}`:void 0,"aria-invalid":"error"===m||void 0,tabIndex:n?-1:0,ref:X,className:p("rc-select-c1l5vx99",y[g],s?C[g]:x[g],!m&&J&&f,n&&"rc-select-cvb0fm4",m?"error"===m?p("rc-select-c1na8b52",J&&"rc-select-c19mujlp"):p("rc-select-c16epqep",J&&"rc-select-ckhhleb"):J?f:void 0),onClick:()=>{n||V({type:"setOpen",payload:!J})},onKeyDown:e=>{if(!n)switch(e.key){case"ArrowDown":e.preventDefault(),J||V({type:"setOpen",payload:!0}),B(1);break;case"ArrowUp":e.preventDefault(),J||V({type:"setOpen",payload:!0}),B(-1);break;case"Enter":e.preventDefault(),J&&T?(D(T),s||V({type:"setOpen",payload:!1})):J||V({type:"setOpen",payload:!0});break;case" ":i&&J||(e.preventDefault(),J||V({type:"setOpen",payload:!0}));break;case"Escape":J&&(e.preventDefault(),V({type:"setOpen",payload:!1}));break;case"Backspace":if(s&&""===q&&L.length>0){const e=L[L.length-1];A(e.value)}}},onFocus:G,onBlur:$,children:[u("div",{className:"rc-select-v1mxlf89",children:i&&J?u(v,{children:[s&&te(),u(c,{ref:U,bordered:!1,value:q,placeholder:s&&L.length>0?"":I,onChange:e=>z(e.target.value),onClick:e=>e.stopPropagation(),className:"rc-select-s1r0kmh4"},void 0,!1)]},void 0,!0):s?0===L.length?u("span",{className:b,children:I},void 0,!1):te():0===L.length?u("span",{className:b,children:I},void 0,!1):u("span",{className:"rc-select-sfumuma",children:L[0]?.label},void 0,!1)},void 0,!1),O?u("span",{className:"rc-select-l1m17a72",children:u(d,{},void 0,!1)},void 0,!1):null,u("span",{className:"rc-select-s10zhocr",children:[u("span",{"data-role":ee?"select-caret":void 0,className:p("rc-select-c1t4pqsr",J&&"rc-select-c1a799e8"),children:u(w,{},void 0,!1)},void 0,!1),ee?u("span",{"data-role":"select-clear",className:"rc-select-c1i3ciyg",role:"button",tabIndex:0,"aria-label":"Clear",onClick:e=>{e.stopPropagation(),Z()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),Z())},children:u(k,{},void 0,!1)},void 0,!1):null]},void 0,!0)]},void 0,!0)},O="rc-select-o197jepe",R=e=>{const t=s(51),{multiple:r,loading:n,filteredOptions:i,selectedValues:c,triggerWidth:h,highlightIndex:f,listboxId:b,notFoundContent:y,popupClassName:x,optionRender:C,dropdownRender:w,onOptionSelect:k,onOpenChange:N,onHighlightChange:R}=e,{dispatch:_}=l(),I=o(null);let L,q;if(t[0]!==f?(L=()=>{f<0||I.current?.scrollToCell({rowIndex:f})},q=[f],t[0]=f,t[1]=L,t[2]=q):(L=t[1],q=t[2]),a(L,q),n){let e,l,o;return t[3]!==x?(e=p(O,x),t[3]=x,t[4]=e):e=t[4],t[5]===Symbol.for("react.memo_cache_sentinel")?(l=u("div",{className:"rc-select-l274z9g",children:u(d,{},void 0,!1)},void 0,!1),t[5]=l):l=t[5],t[6]!==b||t[7]!==e?(o=u("div",{id:b,role:"listbox","aria-busy":"true","data-select-overlay":!0,className:e,children:l},void 0,!1),t[6]=b,t[7]=e,t[8]=o):o=t[8],o}if(0===i.length){let e;t[9]!==x?(e=p(O,x),t[9]=x,t[10]=e):e=t[10];const l=y??"无匹配选项";let o,r;return t[11]!==l?(o=u("div",{className:"rc-select-e198oa40",children:l},void 0,!1),t[11]=l,t[12]=o):o=t[12],t[13]!==b||t[14]!==e||t[15]!==o?(r=u("div",{id:b,role:"listbox","data-select-overlay":!0,className:e,children:o},void 0,!1),t[13]=b,t[14]=e,t[15]=o,t[16]=r):r=t[16],r}const H=i.length,T=Math.max(h-8,160),S=Math.min(256,32*H);let j;t[17]!==H?(j=Array(H).fill(32),t[17]=H,t[18]=j):j=t[18];const z=j;let F;t[19]!==i?(F=i.some(e=>e.isGroupLabel),t[19]=i,t[20]=F):F=t[20];const M=F;let B,D,W;t[21]!==T?(B=[T],t[21]=T,t[22]=B):B=t[22],t[23]!==_||t[24]!==i||t[25]!==f||t[26]!==M||t[27]!==b||t[28]!==r||t[29]!==R||t[30]!==N||t[31]!==k||t[32]!==C||t[33]!==c?(D=e=>{const l=[u("div",{className:"rc-select-d1dli847"},"__select-top-padding__",!1)];for(let t=e[0];t<=e[1];t+=1,t){const e=i[t];if(e.isGroupLabel){l.push(u("div",{"data-group-label":!0,className:"rc-select-g17o4y",children:e.label},e.value,!1));continue}const o=c.includes(e.value),a=t===f,n=C?C(e,{selected:o}):u(v,{children:[r?u(g,{className:"rc-select-c19svz90",checked:o,disabled:e.disabled,tabIndex:-1,"aria-label":"string"==typeof e.label?e.label:e.value},void 0,!1):null,u("span",{className:"rc-select-o1dhqqw2",children:e.label},void 0,!1),!r&&o?u("span",{className:"rc-select-c3deb06",children:u("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:u("path",{d:"M20 6 9 17l-5-5"},void 0,!1)},void 0,!1)},void 0,!1):null]},void 0,!0),s=r?"string"==typeof e.label?e.label:e.value:void 0;l.push(u("div",{id:`${b}-option-${t}`,role:"option","aria-selected":o,"aria-label":s,className:p("rc-select-o8623go",M&&"rc-select-gc4dk9f",o&&(r?"rc-select-oxaegfe":"rc-select-o16p9iym"),a&&"rc-select-o1n324dj",e.disabled&&"rc-select-o1qyr5qv"),onMouseEnter:()=>R(t),onClick:()=>{k(e),r||e.disabled||(_({type:"setOpen",payload:!1}),N(!1))},children:n},e.value,!1))}return l.push(u("div",{className:"rc-select-d1a6h40l"},"__select-bottom-padding__",!1)),l},t[23]=_,t[24]=i,t[25]=f,t[26]=M,t[27]=b,t[28]=r,t[29]=R,t[30]=N,t[31]=k,t[32]=C,t[33]=c,t[34]=D):D=t[34],t[35]!==T||t[36]!==z||t[37]!==B||t[38]!==D||t[39]!==S?(W=u(m,{gridRef:I,viewportWidth:T,viewportHeight:S,gridTemplateColumns:B,gridTemplateRows:z,renderRows:D},void 0,!1),t[35]=T,t[36]=z,t[37]=B,t[38]=D,t[39]=S,t[40]=W):W=t[40];const A=W;let G;t[41]!==x?(G=p(O,x),t[41]=x,t[42]=G):G=t[42];const $=r||void 0;let E,P;return t[43]!==w||t[44]!==A?(E=w?w(A):A,t[43]=w,t[44]=A,t[45]=E):E=t[45],t[46]!==b||t[47]!==E||t[48]!==G||t[49]!==$?(P=u("div",{id:b,"data-select-overlay":!0,className:G,role:"listbox","aria-multiselectable":$,children:E},void 0,!1),t[46]=b,t[47]=E,t[48]=G,t[49]=$,t[50]=P):P=t[50],P},_=e=>"options"in e&&Array.isArray(e.options),I=e=>void 0===e?[]:Array.isArray(e)?e:[e],L=(e,l,t)=>{if(!l||""===t.trim())return e;const o=t.trim().toLowerCase();return e.filter(e=>!e.isGroupLabel&&("string"==typeof e.label?e.label.toLowerCase().includes(o):e.value.toLowerCase().includes(o)))},q=({ref:l,options:r,placeholder:a="请选择",disabled:c=!1,searchable:d=!1,multiple:h=!1,size:p="middle",status:v,allowClear:g=!1,loading:m=!1,maxTagCount:f,autoFocus:b=!1,notFoundContent:y,popupClassName:x,popupMatchSelectWidth:C=!0,optionRender:w,tagRender:k,dropdownRender:O,value:q,defaultValue:H,onChange:T,onOpenChange:S,onFocus:j,onBlur:z,className:F,"aria-label":M,...B})=>{const D=n(),[W,A]=t(""),[G,$]=i({value:void 0!==q?I(q):void 0,defaultValue:I(H)}),[E,P]=t(0),V=o(S);V.current=S;const K=(e=>{const l=[];for(const t of e)if(_(t))for(const e of t.options)l.push(e);else l.push(t);return l})(r),U=K.filter(e=>G.includes(e.value)),J=(e=>{const l=[];return e.forEach((e,t)=>{if(_(e)){l.push({label:e.label,value:`__group_${t}`,isGroupLabel:!0});for(const t of e.options)l.push(t)}else l.push(e)}),l})(r),Q=L(J,d,W),{highlightIndex:X,highlightedOption:Y,moveHighlight:Z,resetHighlight:ee,setHighlightIndex:le}=(e=>{const l=s(10),{filteredOptions:o,open:r}=e,[a,n]=t(-1);let i;l[0]!==o?(i=(e,l)=>{const t=o.length;if(0===t)return-1;let r=e;for(let e=0;e<t;e+=1,e){r=((r+l)%t+t)%t;const e=o[r];if(!e.disabled&&!e.isGroupLabel)return r}return-1},l[0]=o,l[1]=i):i=l[1];const c=i;let d;l[2]!==c||l[3]!==r?(d=e=>{r&&n(l=>c(-1===l?1===e?-1:0:l,e))},l[2]=c,l[3]=r,l[4]=d):d=l[4];const h=d;let p;l[5]===Symbol.for("react.memo_cache_sentinel")?(p=()=>{n(-1)},l[5]=p):p=l[5];const u=p,v=a>=0&&a<o.length?o[a]:void 0;let g;return l[6]!==a||l[7]!==v||l[8]!==h?(g={highlightIndex:a,highlightedOption:v,moveHighlight:h,resetHighlight:u,setHighlightIndex:n},l[6]=a,l[7]=v,l[8]=h,l[9]=g):g=l[9],g})({filteredOptions:Q,open:!0}),te=e=>{if(e){if(!h&&G.length>0){const e=Q.findIndex(e=>e.value===G[0]);le(e)}}else A(""),ee();V.current?.(e)},oe=e=>{if($(e),h){const l=K.filter(l=>e.includes(l.value));return void T?.(e,l)}const l=e[0],t=K.find(e=>e.value===l);T?.(l,t)},re=e=>{if(!e.disabled&&!e.isGroupLabel){if(h){const l=G.includes(e.value)?G.filter(l=>l!==e.value):[...G,e.value];return void oe(l)}oe([e.value])}},ae=C?{width:E}:{minWidth:E};return u(e,{...B,className:F,overlay:u(R,{multiple:h,loading:m,filteredOptions:Q,selectedValues:G,triggerWidth:E,highlightIndex:X,listboxId:D,notFoundContent:y,popupClassName:x,optionRender:w,dropdownRender:O,onOptionSelect:re,onOpenChange:te,onHighlightChange:le},void 0,!1),floatingContainerProps:{style:ae},children:u(N,{ref:l,ariaLabel:M,disabled:c,searchable:d,multiple:h,size:p,status:v,allowClear:g,loading:m,maxTagCount:f,autoFocus:b,placeholder:a,selectedOptions:U,searchText:W,highlightIndex:X,highlightedOption:Y,listboxId:D,tagRender:k,onSearchTextChange:e=>{A(e);const l=L(J,d,e);le((e=>e.findIndex(e=>!e.disabled&&!e.isGroupLabel))(l))},onOpenChange:te,onWidthChange:e=>{P(e)},onMoveHighlight:Z,onSelectHighlighted:re,onClear:()=>{oe([]),A("")},onRemoveTag:e=>{oe(G.filter(l=>l!==e))},onFocus:j,onBlur:z},void 0,!1)},void 0,!1)};export{q as default};
|
package/package.json
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@crab-dev/rc-select",
|
|
3
|
+
"websiteConfig": {
|
|
4
|
+
"title": "Select 选择器",
|
|
5
|
+
"category": "data-entry"
|
|
6
|
+
},
|
|
7
|
+
"description": "下拉选择器,支持单选、多选和搜索",
|
|
8
|
+
"packageManager": "yarn@4.16.0",
|
|
9
|
+
"type": "module",
|
|
10
|
+
"version": "0.0.1",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/hotlif/crab-dev.git",
|
|
14
|
+
"directory": "components/rc-select"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"start": "yarn generate:docgen && yarn generate:token && lignify run-task app:dev",
|
|
18
|
+
"build:library": "packify build",
|
|
19
|
+
"generate:docgen": "packify generate:docgen",
|
|
20
|
+
"generate:token": "packify generate:css-token",
|
|
21
|
+
"test": "packify test",
|
|
22
|
+
"eslint": "eslint . "
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"esm",
|
|
26
|
+
"cjs",
|
|
27
|
+
"css",
|
|
28
|
+
"declarations"
|
|
29
|
+
],
|
|
30
|
+
"types": "declarations/index.d.ts",
|
|
31
|
+
"main": "cjs/index.cjs",
|
|
32
|
+
"module": "esm/index.mjs",
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@crab-dev/lignify": "^0.0.3",
|
|
35
|
+
"@crab-dev/packify": "^0.0.4",
|
|
36
|
+
"@crab-dev/rc-component-preview": "^0.0.1",
|
|
37
|
+
"@crab-dev/rc-masonry": "^0.0.1",
|
|
38
|
+
"@crab-dev/rc-menu": "^0.0.2",
|
|
39
|
+
"@crab-dev/rc-token-semantic": "^0.0.1",
|
|
40
|
+
"@crab-dev/standards-eslint-preset": "^0.0.1",
|
|
41
|
+
"@crab-dev/standards-jest-preset": "^0.0.1",
|
|
42
|
+
"@crab-dev/standards-typescript-preset": "^0.0.3",
|
|
43
|
+
"@jest/globals": "30.4.1",
|
|
44
|
+
"@linaria/core": "^8.0.0",
|
|
45
|
+
"@mdx-js/react": "^3.1.1",
|
|
46
|
+
"@testing-library/dom": "^10.4.1",
|
|
47
|
+
"@testing-library/react": "^16.3.2",
|
|
48
|
+
"@types/node": "^26.1.0",
|
|
49
|
+
"@types/react": "^19.2.17",
|
|
50
|
+
"@types/react-dom": "^19.2.3",
|
|
51
|
+
"eslint": "^10.6.0",
|
|
52
|
+
"eslint-plugin-react": "^7.37.5",
|
|
53
|
+
"globals": "^17.7.0",
|
|
54
|
+
"jest": "^30.4.2",
|
|
55
|
+
"jest-environment-jsdom": "30.4.1",
|
|
56
|
+
"react": "^19.2.7",
|
|
57
|
+
"react-dom": "^19.2.7",
|
|
58
|
+
"react-router": "^8.1.0",
|
|
59
|
+
"typescript": "^6.0.3",
|
|
60
|
+
"typescript-eslint": "^8.63.0"
|
|
61
|
+
},
|
|
62
|
+
"engines": {
|
|
63
|
+
"node": ">=22"
|
|
64
|
+
},
|
|
65
|
+
"dependencies": {
|
|
66
|
+
"@crab-dev/rc-checkbox": "^0.0.1",
|
|
67
|
+
"@crab-dev/rc-dropdown-container": "^0.0.1",
|
|
68
|
+
"@crab-dev/rc-hooks": "^0.0.1",
|
|
69
|
+
"@crab-dev/rc-line-edit": "^0.0.3",
|
|
70
|
+
"@crab-dev/rc-spin": "^0.0.1",
|
|
71
|
+
"@crab-dev/rc-tag": "^0.0.1",
|
|
72
|
+
"@crab-dev/rc-virtual": "^0.1.1"
|
|
73
|
+
}
|
|
74
|
+
}
|