From 8ba3ade9ae7fe79459f11677b51d0e8d875f2ade Mon Sep 17 00:00:00 2001 From: Zheng Song Date: Sat, 30 Nov 2024 19:41:37 +1100 Subject: [PATCH] Updates --- 404.html | 2 +- assets/js/2a25499f.0932cbed.js | 1 - assets/js/2a25499f.754b59d4.js | 1 + assets/js/33c08305.61657389.js | 1 - assets/js/33c08305.c311c591.js | 1 + assets/js/3c81d79b.c157bcf5.js | 1 + assets/js/3c81d79b.c6492338.js | 1 - assets/js/5b0a7cec.18c79e79.js | 1 + assets/js/5b0a7cec.902a0bd8.js | 1 - assets/js/7f0979ab.0d1dd6b3.js | 1 + assets/js/7f0979ab.6b97493c.js | 1 - assets/js/b118d1eb.469ba26f.js | 1 - assets/js/b118d1eb.739b990f.js | 1 + assets/js/b12c624c.27c0514b.js | 1 - assets/js/b12c624c.ff346523.js | 1 + assets/js/b392da1a.2f301d47.js | 1 + assets/js/b392da1a.afe581c1.js | 1 - assets/js/cb4cf1e8.07b385a9.js | 1 + assets/js/cb4cf1e8.58a346e1.js | 1 - assets/js/common.156d2fcd.js | 1 + assets/js/common.cee371bc.js | 1 - assets/js/d98ef911.04f18adb.js | 1 - assets/js/d98ef911.7d89ed25.js | 1 + assets/js/df43c2ff.05ffb719.js | 1 + assets/js/df43c2ff.7656845e.js | 1 - .../js/{runtime~main.20f1a3fd.js => runtime~main.088ae4ca.js} | 2 +- docs/design/index.html | 2 +- docs/extras/action-items/index.html | 4 ++-- docs/extras/async/index.html | 4 ++-- docs/extras/disabled-items/index.html | 4 ++-- docs/extras/grouped/index.html | 4 ++-- docs/extras/object-items/index.html | 4 ++-- docs/extras/select-only/index.html | 4 ++-- docs/extras/virtualization/index.html | 2 +- docs/features/autocomplete/index.html | 4 ++-- docs/features/dropdown/index.html | 4 ++-- docs/features/multiSelect/index.html | 4 ++-- docs/features/multiSelectDropdown/index.html | 4 ++-- docs/features/supercomplete/index.html | 4 ++-- docs/install/index.html | 2 +- docs/intro/index.html | 2 +- index.html | 2 +- 42 files changed, 41 insertions(+), 41 deletions(-) delete mode 100644 assets/js/2a25499f.0932cbed.js create mode 100644 assets/js/2a25499f.754b59d4.js delete mode 100644 assets/js/33c08305.61657389.js create mode 100644 assets/js/33c08305.c311c591.js create mode 100644 assets/js/3c81d79b.c157bcf5.js delete mode 100644 assets/js/3c81d79b.c6492338.js create mode 100644 assets/js/5b0a7cec.18c79e79.js delete mode 100644 assets/js/5b0a7cec.902a0bd8.js create mode 100644 assets/js/7f0979ab.0d1dd6b3.js delete mode 100644 assets/js/7f0979ab.6b97493c.js delete mode 100644 assets/js/b118d1eb.469ba26f.js create mode 100644 assets/js/b118d1eb.739b990f.js delete mode 100644 assets/js/b12c624c.27c0514b.js create mode 100644 assets/js/b12c624c.ff346523.js create mode 100644 assets/js/b392da1a.2f301d47.js delete mode 100644 assets/js/b392da1a.afe581c1.js create mode 100644 assets/js/cb4cf1e8.07b385a9.js delete mode 100644 assets/js/cb4cf1e8.58a346e1.js create mode 100644 assets/js/common.156d2fcd.js delete mode 100644 assets/js/common.cee371bc.js delete mode 100644 assets/js/d98ef911.04f18adb.js create mode 100644 assets/js/d98ef911.7d89ed25.js create mode 100644 assets/js/df43c2ff.05ffb719.js delete mode 100644 assets/js/df43c2ff.7656845e.js rename assets/js/{runtime~main.20f1a3fd.js => runtime~main.088ae4ca.js} (91%) diff --git a/404.html b/404.html index 30c0226..2d01ea4 100644 --- a/404.html +++ b/404.html @@ -4,7 +4,7 @@ React Autocomplete - + diff --git a/assets/js/2a25499f.0932cbed.js b/assets/js/2a25499f.0932cbed.js deleted file mode 100644 index 5b9e636..0000000 --- a/assets/js/2a25499f.0932cbed.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[875],{2411:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>A,contentTitle:()=>S,default:()=>N,frontMatter:()=>k,metadata:()=>a,toc:()=>C});const a=JSON.parse('{"id":"docs/features/dropdown","title":"Dropdown","description":"\n {!isInputEmpty && }\n \n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n \n )}\n \n );\n};\n\nexport default Dropdown;\n";var d=t(8785),u=t(6540),p=t(4164),h=t(6238),m=t(9787),g=t(1236),x=t(2194),f=t(7869),w=t(8748),b=t(9094);const v=()=>{const[e,n]=(0,u.useState)(!0),[t,a]=(0,u.useState)(!0),[s,r]=(0,u.useState)(!0),[i,l]=(0,u.useState)(),[c,d]=(0,u.useState)(),v=i?x.A.filter((e=>e.toLowerCase().startsWith(i.toLowerCase()))):x.A,{getInputProps:k,getClearProps:S,getToggleProps:A,getListProps:C,getItemProps:j,open:N,focusIndex:y,isInputEmpty:I}=(0,h.B)({items:v,value:i,onChange:l,selected:c,onSelectChange:d,flipOnSelect:s,feature:(0,m.W)({rovingText:e,closeOnSelect:t})}),M=(0,b.i)(N,v);return(0,o.jsxs)("div",{className:f.A.wrap,children:[(0,o.jsxs)("div",{className:f.A.options,children:[(0,o.jsx)(w.S,{label:"flipOnSelect",checked:s,onChange:r}),(0,o.jsx)(w.S,{label:"rovingText",checked:e,onChange:n}),(0,o.jsx)(w.S,{label:"closeOnSelect",checked:t,onChange:a})]}),(0,o.jsx)("button",{className:f.A.button,...A(),children:c||"Select a state"}),N&&(0,o.jsxs)("div",{ref:M,className:(0,p.$)(f.A.dropdown,f.A.noScroll),...C(),children:[(0,o.jsxs)("div",{className:f.A.inputWrap,children:[(0,o.jsx)("input",{className:f.A.inputBorderless,placeholder:"Type to search...",...k()}),!I&&(0,o.jsx)("button",{className:f.A.dropdownClear,...S(),children:(0,o.jsx)(g.A,{})})]}),(0,o.jsx)("ul",{className:(0,p.$)(f.A.dropdownList,f.A.scroll),children:v.length?v.map(((e,n)=>(0,o.jsx)("li",{className:(0,p.$)(f.A.item,y===n&&f.A.focused,c===e&&f.A.selected),...j({item:e,index:n}),children:e},e))):(0,o.jsx)("li",{className:f.A.noResult,children:"No options"})})]})]})},k={sidebar_position:3},S="Dropdown",A={},C=[];function j(e){const n={h1:"h1",header:"header",p:"p",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"dropdown",children:"Dropdown"})}),"\n",(0,o.jsx)(v,{}),"\n",(0,o.jsxs)(r.A,{children:[(0,o.jsx)(i.A,{value:"ts",label:"Dropdown.tsx",children:(0,o.jsx)(l.A,{language:"tsx",children:c})}),(0,o.jsx)(i.A,{value:"data",label:"data/states.ts",children:(0,o.jsx)(l.A,{language:"ts",children:d.A})}),(0,o.jsx)(i.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/dropdown-v4hxk8"},children:(0,o.jsx)(n.p,{children:"CodeSandbox"})})]})]})}function N(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(j,{...e})}):j(e)}},9787:(e,n,t)=>{t.d(n,{W:()=>l});var a=t(5430),o=t(1975),s=t(6540),r=t(9301);const i=function(e){let{closeOnSelect:n=!0,toggleRef:t}=void 0===e?{}:e;return e=>{let{inputRef:a,open:o,setOpen:i,focusIndex:l,value:c,tmpValue:d}=e;const[u,p]=(0,r.e)(o,i),h=(0,s.useRef)(null),m=t||h,g=d||c||"";(0,s.useEffect)((()=>{o&&a.current?.focus()}),[o,a]);return{toggleRef:m,isInputEmpty:!g,getToggleProps:()=>({type:"button","aria-haspopup":!0,"aria-expanded":o,ref:m,onMouseDown:u,onClick:p,onKeyDown:e=>{const{key:n}=e;"ArrowDown"===n&&(e.preventDefault(),i(!0))}}),getInputProps:()=>({value:g,onKeyDown:e=>{const{key:t}=e;("Escape"===t||n&&l>=0&&"Enter"===t)&&setTimeout((()=>m.current?.focus()),0)}})}}},l=e=>(0,a.o)((0,o.d)({...e,select:!0,deselectOnClear:!1}),i(e))},8748:(e,n,t)=>{t.d(n,{S:()=>w});var a,o,s=t(4164),r=t(6540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;n{let{title:n,titleId:t,...s}=e;return r.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":t},s),n?r.createElement("title",{id:t},n):null,a||(a=r.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=r.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,d;function u(){return u=Object.assign?Object.assign.bind():function(e){for(var n=1;n{let{title:n,titleId:t,...a}=e;return r.createElement("svg",u({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":t},a),n?r.createElement("title",{id:t},n):null,c||(c=r.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),d||(d=r.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",x="checked_X1o2";var f=t(4848);const w=e=>{let{label:n,checked:t,onChange:a}=e;return(0,f.jsxs)("label",{className:(0,s.$)(h,t&&x),children:[(0,f.jsx)("input",{className:m,type:"checkbox",checked:t,onChange:e=>a(e.target.checked)}),t?(0,f.jsx)(p,{className:g}):(0,f.jsx)(l,{className:g}),n]})}},2194:(e,n,t)=>{t.d(n,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,n,t)=>{t.d(n,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/2a25499f.754b59d4.js b/assets/js/2a25499f.754b59d4.js new file mode 100644 index 0000000..23d5f85 --- /dev/null +++ b/assets/js/2a25499f.754b59d4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[875],{2411:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>A,contentTitle:()=>S,default:()=>N,frontMatter:()=>k,metadata:()=>a,toc:()=>C});const a=JSON.parse('{"id":"docs/features/dropdown","title":"Dropdown","description":"\n {!isInputEmpty && }\n \n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n \n )}\n \n );\n};\n\nexport default Dropdown;\n";var d=t(8785),u=t(6540),p=t(4164),h=t(6238),m=t(9787),g=t(1236),x=t(2194),f=t(7869),w=t(8748),b=t(9094);const v=()=>{const[e,n]=(0,u.useState)(!0),[t,a]=(0,u.useState)(!0),[s,r]=(0,u.useState)(!0),[i,l]=(0,u.useState)(),[c,d]=(0,u.useState)(),v=i?x.A.filter((e=>e.toLowerCase().startsWith(i.toLowerCase()))):x.A,{getInputProps:k,getClearProps:S,getToggleProps:A,getListProps:C,getItemProps:j,open:N,focusIndex:y,isInputEmpty:I}=(0,h.B)({items:v,value:i,onChange:l,selected:c,onSelectChange:d,flipOnSelect:s,feature:(0,m.W)({rovingText:e,closeOnSelect:t})}),M=(0,b.i)(N,v);return(0,o.jsxs)("div",{className:f.A.wrap,children:[(0,o.jsxs)("div",{className:f.A.options,children:[(0,o.jsx)(w.S,{label:"flipOnSelect",checked:s,onChange:r}),(0,o.jsx)(w.S,{label:"rovingText",checked:e,onChange:n}),(0,o.jsx)(w.S,{label:"closeOnSelect",checked:t,onChange:a})]}),(0,o.jsx)("button",{className:f.A.button,...A(),children:c||"Select a state"}),N&&(0,o.jsxs)("div",{ref:M,className:(0,p.$)(f.A.dropdown,f.A.noScroll),...C(),children:[(0,o.jsxs)("div",{className:f.A.inputWrap,children:[(0,o.jsx)("input",{className:f.A.inputBorderless,placeholder:"Type to search...",...k()}),!I&&(0,o.jsx)("button",{className:f.A.dropdownClear,...S(),children:(0,o.jsx)(g.A,{})})]}),(0,o.jsx)("ul",{className:(0,p.$)(f.A.dropdownList,f.A.scroll),children:v.length?v.map(((e,n)=>(0,o.jsx)("li",{className:(0,p.$)(f.A.item,y===n&&f.A.focused,c===e&&f.A.selected),...j({item:e,index:n}),children:e},e))):(0,o.jsx)("li",{className:f.A.noResult,children:"No options"})})]})]})},k={sidebar_position:3},S="Dropdown",A={},C=[];function j(e){const n={h1:"h1",header:"header",p:"p",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"dropdown",children:"Dropdown"})}),"\n",(0,o.jsx)(v,{}),"\n",(0,o.jsxs)(r.A,{children:[(0,o.jsx)(i.A,{value:"ts",label:"Dropdown.tsx",children:(0,o.jsx)(l.A,{language:"tsx",children:c})}),(0,o.jsx)(i.A,{value:"data",label:"data/states.ts",children:(0,o.jsx)(l.A,{language:"ts",children:d.A})}),(0,o.jsx)(i.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/dropdown-v4hxk8"},children:(0,o.jsx)(n.p,{children:"CodeSandbox"})})]})]})}function N(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(j,{...e})}):j(e)}},9787:(e,n,t)=>{t.d(n,{W:()=>l});var a=t(5430),o=t(1975),s=t(6540),r=t(9301);const i=function(e){let{closeOnSelect:n=!0,toggleRef:t}=void 0===e?{}:e;return e=>{let{inputRef:a,open:o,setOpen:i,focusIndex:l,value:c,tmpValue:d}=e;const[u,p]=(0,r.e)(o,i),h=(0,s.useRef)(null),m=t||h,g=d||c||"";(0,s.useEffect)((()=>{o&&a.current?.focus()}),[o,a]);return{toggleRef:m,isInputEmpty:!g,getToggleProps:()=>({type:"button","aria-haspopup":!0,"aria-expanded":o,ref:m,onMouseDown:u,onClick:p,onKeyDown:e=>{const{key:n}=e;"ArrowDown"===n&&(e.preventDefault(),i(!0))}}),getInputProps:()=>({value:g,onKeyDown:e=>{const{key:t}=e;("Escape"===t||n&&l>=0&&"Enter"===t)&&setTimeout((()=>m.current?.focus()),0)}})}}},l=e=>(0,a.o)((0,o.d)({...e,select:!0,deselectOnClear:!1}),i(e))},8748:(e,n,t)=>{t.d(n,{S:()=>w});var a,o,s=t(4164),r=t(6540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;n{let{title:n,titleId:t,...s}=e;return r.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":t},s),n?r.createElement("title",{id:t},n):null,a||(a=r.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=r.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,d;function u(){return u=Object.assign?Object.assign.bind():function(e){for(var n=1;n{let{title:n,titleId:t,...a}=e;return r.createElement("svg",u({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":t},a),n?r.createElement("title",{id:t},n):null,c||(c=r.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),d||(d=r.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",x="checked_X1o2";var f=t(4848);const w=e=>{let{label:n,checked:t,onChange:a}=e;return(0,f.jsxs)("label",{className:(0,s.$)(h,t&&x),children:[(0,f.jsx)("input",{className:m,type:"checkbox",checked:t,onChange:e=>a(e.target.checked)}),t?(0,f.jsx)(p,{className:g}):(0,f.jsx)(l,{className:g}),n]})}},2194:(e,n,t)=>{t.d(n,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,n,t)=>{t.d(n,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/33c08305.61657389.js b/assets/js/33c08305.61657389.js deleted file mode 100644 index 1b358fb..0000000 --- a/assets/js/33c08305.61657389.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[846],{7318:(n,e,a)=>{a.r(e),a.d(e,{assets:()=>C,contentTitle:()=>S,default:()=>w,frontMatter:()=>j,metadata:()=>t,toc:()=>M});const t=JSON.parse('{"id":"docs/extras/object-items","title":"Object items","description":"List items can be not only strings but also objects.","source":"@site/docs/docs/extras/object-items.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/object-items","permalink":"/react-autocomplete/docs/extras/object-items","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/object-items.mdx","tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2},"sidebar":"docsSidebar","previous":{"title":"Grouped items","permalink":"/react-autocomplete/docs/extras/grouped"},"next":{"title":"Disabled items","permalink":"/react-autocomplete/docs/extras/disabled-items"}}');var s=a(4848),r=a(8453),b=a(267),o=a(8860),i=a(1432);const m="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states-obj';\n\nconst ObjectItems = () => {\n const [value, setValue] = useState();\n // highlight-next-line\n const [selected, setSelected] = useState<{ name: string; abbr: string }>();\n const items = value\n ? STATES.filter((item) => item.name.toLowerCase().startsWith(value.toLowerCase()))\n : STATES;\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n // highlight-next-line\n isItemSelected,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n // When items are objects, you must specify how to retrieve the text value from the item.\n // highlight-next-line\n getItemValue: (item) => item.name,\n\n // If item references change on each render, you should define how items are equal.\n // By default, it compares object references if `isEqual` is not provided.\n // highlight-next-line\n isEqual: (item1, item2) => item1?.abbr === item2?.abbr,\n\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {item.name}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n
    \n );\n};\n\nexport default ObjectItems;\n",l="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n {\n name: 'Alabama',\n abbr: 'AL'\n },\n {\n name: 'Alaska',\n abbr: 'AK'\n },\n {\n name: 'Arizona',\n abbr: 'AZ'\n },\n {\n name: 'Arkansas',\n abbr: 'AR'\n },\n {\n name: 'California',\n abbr: 'CA'\n },\n {\n name: 'Colorado',\n abbr: 'CO'\n },\n {\n name: 'Connecticut',\n abbr: 'CT'\n },\n {\n name: 'Delaware',\n abbr: 'DE'\n },\n {\n name: 'Florida',\n abbr: 'FL'\n },\n {\n name: 'Georgia',\n abbr: 'GA'\n },\n {\n name: 'Hawaii',\n abbr: 'HI'\n },\n {\n name: 'Idaho',\n abbr: 'ID'\n },\n {\n name: 'Illinois',\n abbr: 'IL'\n },\n {\n name: 'Indiana',\n abbr: 'IN'\n },\n {\n name: 'Iowa',\n abbr: 'IA'\n },\n {\n name: 'Kansas',\n abbr: 'KS'\n },\n {\n name: 'Kentucky',\n abbr: 'KY'\n },\n {\n name: 'Louisiana',\n abbr: 'LA'\n },\n {\n name: 'Maine',\n abbr: 'ME'\n },\n {\n name: 'Maryland',\n abbr: 'MD'\n },\n {\n name: 'Massachusetts',\n abbr: 'MA'\n },\n {\n name: 'Michigan',\n abbr: 'MI'\n },\n {\n name: 'Minnesota',\n abbr: 'MN'\n },\n {\n name: 'Mississippi',\n abbr: 'MS'\n },\n {\n name: 'Missouri',\n abbr: 'MO'\n },\n {\n name: 'Montana',\n abbr: 'MT'\n },\n {\n name: 'Nebraska',\n abbr: 'NE'\n },\n {\n name: 'Nevada',\n abbr: 'NV'\n },\n {\n name: 'New Hampshire',\n abbr: 'NH'\n },\n {\n name: 'New Jersey',\n abbr: 'NJ'\n },\n {\n name: 'New Mexico',\n abbr: 'NM'\n },\n {\n name: 'New York',\n abbr: 'NY'\n },\n {\n name: 'North Carolina',\n abbr: 'NC'\n },\n {\n name: 'North Dakota',\n abbr: 'ND'\n },\n {\n name: 'Ohio',\n abbr: 'OH'\n },\n {\n name: 'Oklahoma',\n abbr: 'OK'\n },\n {\n name: 'Oregon',\n abbr: 'OR'\n },\n {\n name: 'Pennsylvania',\n abbr: 'PA'\n },\n {\n name: 'Rhode Island',\n abbr: 'RI'\n },\n {\n name: 'South Carolina',\n abbr: 'SC'\n },\n {\n name: 'South Dakota',\n abbr: 'SD'\n },\n {\n name: 'Tennessee',\n abbr: 'TN'\n },\n {\n name: 'Texas',\n abbr: 'TX'\n },\n {\n name: 'Utah',\n abbr: 'UT'\n },\n {\n name: 'Vermont',\n abbr: 'VT'\n },\n {\n name: 'Virginia',\n abbr: 'VA'\n },\n {\n name: 'Washington',\n abbr: 'WA'\n },\n {\n name: 'West Virginia',\n abbr: 'WV'\n },\n {\n name: 'Wisconsin',\n abbr: 'WI'\n },\n {\n name: 'Wyoming',\n abbr: 'WY'\n }\n];\n";var c=a(6540),d=a(4164),u=a(6238),p=a(8185),h=a(1236),g=a(7210),x=a(6217);const A=[{name:"Alabama",abbr:"AL"},{name:"Alaska",abbr:"AK"},{name:"Arizona",abbr:"AZ"},{name:"Arkansas",abbr:"AR"},{name:"California",abbr:"CA"},{name:"Colorado",abbr:"CO"},{name:"Connecticut",abbr:"CT"},{name:"Delaware",abbr:"DE"},{name:"Florida",abbr:"FL"},{name:"Georgia",abbr:"GA"},{name:"Hawaii",abbr:"HI"},{name:"Idaho",abbr:"ID"},{name:"Illinois",abbr:"IL"},{name:"Indiana",abbr:"IN"},{name:"Iowa",abbr:"IA"},{name:"Kansas",abbr:"KS"},{name:"Kentucky",abbr:"KY"},{name:"Louisiana",abbr:"LA"},{name:"Maine",abbr:"ME"},{name:"Maryland",abbr:"MD"},{name:"Massachusetts",abbr:"MA"},{name:"Michigan",abbr:"MI"},{name:"Minnesota",abbr:"MN"},{name:"Mississippi",abbr:"MS"},{name:"Missouri",abbr:"MO"},{name:"Montana",abbr:"MT"},{name:"Nebraska",abbr:"NE"},{name:"Nevada",abbr:"NV"},{name:"New Hampshire",abbr:"NH"},{name:"New Jersey",abbr:"NJ"},{name:"New Mexico",abbr:"NM"},{name:"New York",abbr:"NY"},{name:"North Carolina",abbr:"NC"},{name:"North Dakota",abbr:"ND"},{name:"Ohio",abbr:"OH"},{name:"Oklahoma",abbr:"OK"},{name:"Oregon",abbr:"OR"},{name:"Pennsylvania",abbr:"PA"},{name:"Rhode Island",abbr:"RI"},{name:"South Carolina",abbr:"SC"},{name:"South Dakota",abbr:"SD"},{name:"Tennessee",abbr:"TN"},{name:"Texas",abbr:"TX"},{name:"Utah",abbr:"UT"},{name:"Vermont",abbr:"VT"},{name:"Virginia",abbr:"VA"},{name:"Washington",abbr:"WA"},{name:"West Virginia",abbr:"WV"},{name:"Wisconsin",abbr:"WI"},{name:"Wyoming",abbr:"WY"}];var N=a(7869),I=a(9094);const f=()=>{const[n,e]=(0,c.useState)(),[a,t]=(0,c.useState)(),r=n?A.filter((e=>e.name.toLowerCase().startsWith(n.toLowerCase()))):A,{getFocusCaptureProps:b,getLabelProps:o,getInputProps:i,getClearProps:m,getToggleProps:l,getListProps:f,getItemProps:j,isItemSelected:S,open:C,focusIndex:M,isInputEmpty:k}=(0,u.B)({items:r,getItemValue:n=>n.name,isEqual:(n,e)=>n?.abbr===e?.abbr,value:n,onChange:e,selected:a,onSelectChange:t,feature:(0,p.n)({select:!0})}),w=(0,I.i)(C,r);return(0,s.jsxs)("div",{className:N.A.wrap,children:[(0,s.jsx)("label",{className:N.A.label,...o(),...b(),children:"State"}),(0,s.jsxs)("div",{className:N.A.inputWrap,children:[(0,s.jsx)("input",{className:N.A.input,placeholder:"Select or type...",...i()}),!k&&(0,s.jsx)("button",{className:N.A.clear,...m(),children:(0,s.jsx)(h.A,{})}),(0,s.jsx)("button",{className:N.A.toggle,...l(),children:C?(0,s.jsx)(x.A,{}):(0,s.jsx)(g.A,{})})]}),(0,s.jsx)("ul",{ref:w,className:(0,d.$)(N.A.list,N.A.scroll),...f(),style:{display:C?"block":"none"},children:r.length?r.map(((n,e)=>(0,s.jsx)("li",{className:(0,d.$)(N.A.item,M===e&&N.A.focused,S(n)&&N.A.selected),...j({item:n,index:e}),children:n.name},n.abbr))):(0,s.jsx)("li",{className:N.A.noResult,children:"No options"})})]})},j={sidebar_position:2},S="Object items",C={},M=[];function k(n){const e={h1:"h1",header:"header",p:"p",...(0,r.R)(),...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.header,{children:(0,s.jsx)(e.h1,{id:"object-items",children:"Object items"})}),"\n",(0,s.jsx)(e.p,{children:"List items can be not only strings but also objects."}),"\n",(0,s.jsx)(f,{}),"\n",(0,s.jsxs)(b.A,{children:[(0,s.jsx)(o.A,{value:"ts",label:"ObjectItems.tsx",children:(0,s.jsx)(i.A,{language:"tsx",children:m})}),(0,s.jsx)(o.A,{value:"data",label:"data/states-obj.ts",children:(0,s.jsx)(i.A,{language:"ts",children:l})})]})]})}function w(n={}){const{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(k,{...n})}):k(n)}},8185:(n,e,a)=>{a.d(e,{n:()=>m});var t=a(5430),s=a(1975),r=a(4444),b=a(9301),o=a(9635);var i=a(8321);const m=n=>(0,t.o)((0,s.d)(n),(n=>{let{id:e,inputRef:a,open:t,setOpen:s}=n;const[i,m]=(0,b.e)(t,s),[l,c,d]=(0,o._)(a);return{getToggleProps:()=>({...(0,r.l0)(e,t),onMouseDown:()=>{i(),l()},onClick:()=>{m(),d()}}),getInputProps:()=>({onBlur:c})}}),(0,i.P)())}}]); \ No newline at end of file diff --git a/assets/js/33c08305.c311c591.js b/assets/js/33c08305.c311c591.js new file mode 100644 index 0000000..d6c6290 --- /dev/null +++ b/assets/js/33c08305.c311c591.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[846],{7318:(n,e,a)=>{a.r(e),a.d(e,{assets:()=>C,contentTitle:()=>S,default:()=>w,frontMatter:()=>j,metadata:()=>t,toc:()=>M});const t=JSON.parse('{"id":"docs/extras/object-items","title":"Object items","description":"List items can be not only strings but also objects.","source":"@site/docs/docs/extras/object-items.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/object-items","permalink":"/react-autocomplete/docs/extras/object-items","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/object-items.mdx","tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2},"sidebar":"docsSidebar","previous":{"title":"Grouped items","permalink":"/react-autocomplete/docs/extras/grouped"},"next":{"title":"Disabled items","permalink":"/react-autocomplete/docs/extras/disabled-items"}}');var s=a(4848),r=a(8453),b=a(267),o=a(8860),i=a(1432);const m="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states-obj';\n\nconst ObjectItems = () => {\n const [value, setValue] = useState();\n // highlight-next-line\n const [selected, setSelected] = useState<{ name: string; abbr: string }>();\n const items = value\n ? STATES.filter((item) => item.name.toLowerCase().startsWith(value.toLowerCase()))\n : STATES;\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n // highlight-next-line\n isItemSelected,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n // When items are objects, you must specify how to retrieve the text value from the item.\n // highlight-next-line\n getItemValue: (item) => item.name,\n\n // If item references change on each render, you should define how items are equal.\n // By default, it compares object references if `isEqual` is not provided.\n // highlight-next-line\n isEqual: (item1, item2) => item1?.abbr === item2?.abbr,\n\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {item.name}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n
    \n );\n};\n\nexport default ObjectItems;\n",l="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n {\n name: 'Alabama',\n abbr: 'AL'\n },\n {\n name: 'Alaska',\n abbr: 'AK'\n },\n {\n name: 'Arizona',\n abbr: 'AZ'\n },\n {\n name: 'Arkansas',\n abbr: 'AR'\n },\n {\n name: 'California',\n abbr: 'CA'\n },\n {\n name: 'Colorado',\n abbr: 'CO'\n },\n {\n name: 'Connecticut',\n abbr: 'CT'\n },\n {\n name: 'Delaware',\n abbr: 'DE'\n },\n {\n name: 'Florida',\n abbr: 'FL'\n },\n {\n name: 'Georgia',\n abbr: 'GA'\n },\n {\n name: 'Hawaii',\n abbr: 'HI'\n },\n {\n name: 'Idaho',\n abbr: 'ID'\n },\n {\n name: 'Illinois',\n abbr: 'IL'\n },\n {\n name: 'Indiana',\n abbr: 'IN'\n },\n {\n name: 'Iowa',\n abbr: 'IA'\n },\n {\n name: 'Kansas',\n abbr: 'KS'\n },\n {\n name: 'Kentucky',\n abbr: 'KY'\n },\n {\n name: 'Louisiana',\n abbr: 'LA'\n },\n {\n name: 'Maine',\n abbr: 'ME'\n },\n {\n name: 'Maryland',\n abbr: 'MD'\n },\n {\n name: 'Massachusetts',\n abbr: 'MA'\n },\n {\n name: 'Michigan',\n abbr: 'MI'\n },\n {\n name: 'Minnesota',\n abbr: 'MN'\n },\n {\n name: 'Mississippi',\n abbr: 'MS'\n },\n {\n name: 'Missouri',\n abbr: 'MO'\n },\n {\n name: 'Montana',\n abbr: 'MT'\n },\n {\n name: 'Nebraska',\n abbr: 'NE'\n },\n {\n name: 'Nevada',\n abbr: 'NV'\n },\n {\n name: 'New Hampshire',\n abbr: 'NH'\n },\n {\n name: 'New Jersey',\n abbr: 'NJ'\n },\n {\n name: 'New Mexico',\n abbr: 'NM'\n },\n {\n name: 'New York',\n abbr: 'NY'\n },\n {\n name: 'North Carolina',\n abbr: 'NC'\n },\n {\n name: 'North Dakota',\n abbr: 'ND'\n },\n {\n name: 'Ohio',\n abbr: 'OH'\n },\n {\n name: 'Oklahoma',\n abbr: 'OK'\n },\n {\n name: 'Oregon',\n abbr: 'OR'\n },\n {\n name: 'Pennsylvania',\n abbr: 'PA'\n },\n {\n name: 'Rhode Island',\n abbr: 'RI'\n },\n {\n name: 'South Carolina',\n abbr: 'SC'\n },\n {\n name: 'South Dakota',\n abbr: 'SD'\n },\n {\n name: 'Tennessee',\n abbr: 'TN'\n },\n {\n name: 'Texas',\n abbr: 'TX'\n },\n {\n name: 'Utah',\n abbr: 'UT'\n },\n {\n name: 'Vermont',\n abbr: 'VT'\n },\n {\n name: 'Virginia',\n abbr: 'VA'\n },\n {\n name: 'Washington',\n abbr: 'WA'\n },\n {\n name: 'West Virginia',\n abbr: 'WV'\n },\n {\n name: 'Wisconsin',\n abbr: 'WI'\n },\n {\n name: 'Wyoming',\n abbr: 'WY'\n }\n];\n";var c=a(6540),d=a(4164),u=a(6238),p=a(8185),h=a(1236),g=a(7210),x=a(6217);const A=[{name:"Alabama",abbr:"AL"},{name:"Alaska",abbr:"AK"},{name:"Arizona",abbr:"AZ"},{name:"Arkansas",abbr:"AR"},{name:"California",abbr:"CA"},{name:"Colorado",abbr:"CO"},{name:"Connecticut",abbr:"CT"},{name:"Delaware",abbr:"DE"},{name:"Florida",abbr:"FL"},{name:"Georgia",abbr:"GA"},{name:"Hawaii",abbr:"HI"},{name:"Idaho",abbr:"ID"},{name:"Illinois",abbr:"IL"},{name:"Indiana",abbr:"IN"},{name:"Iowa",abbr:"IA"},{name:"Kansas",abbr:"KS"},{name:"Kentucky",abbr:"KY"},{name:"Louisiana",abbr:"LA"},{name:"Maine",abbr:"ME"},{name:"Maryland",abbr:"MD"},{name:"Massachusetts",abbr:"MA"},{name:"Michigan",abbr:"MI"},{name:"Minnesota",abbr:"MN"},{name:"Mississippi",abbr:"MS"},{name:"Missouri",abbr:"MO"},{name:"Montana",abbr:"MT"},{name:"Nebraska",abbr:"NE"},{name:"Nevada",abbr:"NV"},{name:"New Hampshire",abbr:"NH"},{name:"New Jersey",abbr:"NJ"},{name:"New Mexico",abbr:"NM"},{name:"New York",abbr:"NY"},{name:"North Carolina",abbr:"NC"},{name:"North Dakota",abbr:"ND"},{name:"Ohio",abbr:"OH"},{name:"Oklahoma",abbr:"OK"},{name:"Oregon",abbr:"OR"},{name:"Pennsylvania",abbr:"PA"},{name:"Rhode Island",abbr:"RI"},{name:"South Carolina",abbr:"SC"},{name:"South Dakota",abbr:"SD"},{name:"Tennessee",abbr:"TN"},{name:"Texas",abbr:"TX"},{name:"Utah",abbr:"UT"},{name:"Vermont",abbr:"VT"},{name:"Virginia",abbr:"VA"},{name:"Washington",abbr:"WA"},{name:"West Virginia",abbr:"WV"},{name:"Wisconsin",abbr:"WI"},{name:"Wyoming",abbr:"WY"}];var N=a(7869),I=a(9094);const f=()=>{const[n,e]=(0,c.useState)(),[a,t]=(0,c.useState)(),r=n?A.filter((e=>e.name.toLowerCase().startsWith(n.toLowerCase()))):A,{getFocusCaptureProps:b,getLabelProps:o,getInputProps:i,getClearProps:m,getToggleProps:l,getListProps:f,getItemProps:j,isItemSelected:S,open:C,focusIndex:M,isInputEmpty:k}=(0,u.B)({items:r,getItemValue:n=>n.name,isEqual:(n,e)=>n?.abbr===e?.abbr,value:n,onChange:e,selected:a,onSelectChange:t,feature:(0,p.n)({select:!0})}),w=(0,I.i)(C,r);return(0,s.jsxs)("div",{className:N.A.wrap,children:[(0,s.jsx)("label",{className:N.A.label,...o(),...b(),children:"State"}),(0,s.jsxs)("div",{className:N.A.inputWrap,children:[(0,s.jsx)("input",{className:N.A.input,placeholder:"Select or type...",...i()}),!k&&(0,s.jsx)("button",{className:N.A.clear,...m(),children:(0,s.jsx)(h.A,{})}),(0,s.jsx)("button",{className:N.A.toggle,...l(),children:C?(0,s.jsx)(x.A,{}):(0,s.jsx)(g.A,{})})]}),(0,s.jsx)("ul",{ref:w,className:(0,d.$)(N.A.list,N.A.scroll),...f(),style:{display:C?"block":"none"},children:r.length?r.map(((n,e)=>(0,s.jsx)("li",{className:(0,d.$)(N.A.item,M===e&&N.A.focused,S(n)&&N.A.selected),...j({item:n,index:e}),children:n.name},n.abbr))):(0,s.jsx)("li",{className:N.A.noResult,children:"No options"})})]})},j={sidebar_position:2},S="Object items",C={},M=[];function k(n){const e={h1:"h1",header:"header",p:"p",...(0,r.R)(),...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(e.header,{children:(0,s.jsx)(e.h1,{id:"object-items",children:"Object items"})}),"\n",(0,s.jsx)(e.p,{children:"List items can be not only strings but also objects."}),"\n",(0,s.jsx)(f,{}),"\n",(0,s.jsxs)(b.A,{children:[(0,s.jsx)(o.A,{value:"ts",label:"ObjectItems.tsx",children:(0,s.jsx)(i.A,{language:"tsx",children:m})}),(0,s.jsx)(o.A,{value:"data",label:"data/states-obj.ts",children:(0,s.jsx)(i.A,{language:"ts",children:l})})]})]})}function w(n={}){const{wrapper:e}={...(0,r.R)(),...n.components};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(k,{...n})}):k(n)}},8185:(n,e,a)=>{a.d(e,{n:()=>m});var t=a(5430),s=a(1975),r=a(4444),b=a(9301),o=a(9635);var i=a(8321);const m=n=>(0,t.o)((0,s.d)(n),(n=>{let{id:e,inputRef:a,open:t,setOpen:s}=n;const[i,m]=(0,b.e)(t,s),[l,c,d]=(0,o._)(a);return{getToggleProps:()=>({...(0,r.l0)(e,t),onMouseDown:()=>{i(),l()},onClick:()=>{m(),d()}}),getInputProps:()=>({onBlur:c})}}),(0,i.P)())}}]); \ No newline at end of file diff --git a/assets/js/3c81d79b.c157bcf5.js b/assets/js/3c81d79b.c157bcf5.js new file mode 100644 index 0000000..f072fc2 --- /dev/null +++ b/assets/js/3c81d79b.c157bcf5.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2],{1540:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>h,default:()=>b,frontMatter:()=>p,metadata:()=>a,toc:()=>g});const a=JSON.parse('{"id":"docs/features/supercomplete","title":"Supercomplete","description":"The supercomplete feature supports everything provided by autocomplete, along with inline text completion.","source":"@site/docs/docs/features/supercomplete.mdx","sourceDirName":"docs/features","slug":"/docs/features/supercomplete","permalink":"/react-autocomplete/docs/features/supercomplete","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/features/supercomplete.mdx","tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2},"sidebar":"docsSidebar","previous":{"title":"Autocomplete","permalink":"/react-autocomplete/docs/features/autocomplete"},"next":{"title":"Dropdown","permalink":"/react-autocomplete/docs/features/dropdown"}}');var s=n(4848),o=n(8453),l=n(267),r=n(8860),i=n(1432);const c="import { useState } from 'react';\nimport { useCombobox, supercomplete } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\nconst filterItems = (value?: string) =>\n value ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase())) : STATES;\n\nconst Supercomplete = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n const items = filterItems(value);\n\n const {\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: supercomplete({\n // highlight-start\n // The `onRequestItem` event will be triggered with the updated input value.\n // You should compute the item for inline text completion using the same filtering logic,\n // and invoke the `res` function to complete.\n // If no item matches for inline completion, do not call the `res` function.\n onRequestItem: ({ value: newValue }, res) => {\n const items = filterItems(newValue);\n if (items.length > 0) res({ index: 0, item: items[0] });\n },\n // highlight-end\n\n // The `select` option controls autocomplete in free or select mode\n select: false // or true\n // Other options: deselectOnClear, deselectOnChange, closeOnSelect\n })\n });\n\n return (\n
    \n \n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No results
    • \n )}\n \n
    \n );\n};\n\nexport default Supercomplete;\n";var u=n(8785),d=n(5096);const p={sidebar_position:2},h="Supercomplete",m={},g=[];function x(e){const t={a:"a",code:"code",h1:"h1",header:"header",p:"p",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"supercomplete",children:"Supercomplete"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"supercomplete"})," feature supports everything provided by ",(0,s.jsx)(t.code,{children:"autocomplete"}),", along with ",(0,s.jsx)(t.a,{href:"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/",children:"inline text completion"}),"."]}),"\n",(0,s.jsx)(d.j,{isSupercomplete:!0}),"\n",(0,s.jsxs)(l.A,{children:[(0,s.jsx)(r.A,{value:"ts",label:"Supercomplete.tsx",children:(0,s.jsx)(i.A,{language:"tsx",children:c})}),(0,s.jsx)(r.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(i.A,{language:"ts",children:u.A})}),(0,s.jsx)(r.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/supercomplete-25p6cf"},children:(0,s.jsx)(t.p,{children:"CodeSandbox"})})]})]})}function b(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(x,{...e})}):x(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>c});var a=n(5430),s=n(1975),o=n(4444),l=n(9301),r=n(9635);var i=n(8321);const c=e=>(0,a.o)((0,s.d)(e),(e=>{let{id:t,inputRef:n,open:a,setOpen:s}=e;const[i,c]=(0,l.e)(a,s),[u,d,p]=(0,r._)(n);return{getToggleProps:()=>({...(0,o.l0)(t,a),onMouseDown:()=>{i(),u()},onClick:()=>{c(),p()}}),getInputProps:()=>({onBlur:d})}}),(0,i.P)())},5096:(e,t,n)=>{n.d(t,{j:()=>k});var a=n(6540),s=n(4164),o=n(6238),l=n(5430),r=n(8185);const i=e=>(0,l.o)((0,r.n)({...e,rovingText:!0}),(e=>{let{onRequestItem:t}=e;return e=>{let{getItemValue:n,setTmpValue:a,setFocusIndex:s}=e;return{getInputProps:()=>({"aria-autocomplete":"both",onChange:e=>{let{target:o,nativeEvent:l}=e;if("insertText"!==l.inputType)return;const r=o.value;t({value:r},(e=>{s(e.index);const t=n(e.item),l=r.length,i=t.length;a(r+t.slice(l)),setTimeout((()=>o.setSelectionRange(l,i)),0)}))}})}}})(e));var c=n(1236),u=n(7210),d=n(6217),p=n(2194),h=n(7869);const m="desc_D_R9",g="modes_IPKR",x="inputWrap_O8rz",b="info_gD2Z";var v=n(8748),f=n(6868),w=n(9094),j=n(4848);const S=e=>e?p.A.filter((t=>t.toLowerCase().startsWith(e.toLowerCase()))):p.A,k=e=>{let{isSupercomplete:t}=e;const[n,l]=(0,a.useState)("free"),[p,k]=(0,a.useState)(!0),[C,T]=(0,a.useState)(!0),[N,y]=(0,a.useState)(!0),[A,I]=(0,a.useState)(!0),O="select"===n,[P,M]=(0,a.useState)(),[_,E]=(0,a.useState)(),L=S(P),V={select:O,deselectOnClear:C,deselectOnChange:N,closeOnSelect:A},{getFocusCaptureProps:R,getLabelProps:D,getInputProps:W,getClearProps:q,getToggleProps:H,getListProps:z,getItemProps:F,open:B,focusIndex:K,isInputEmpty:Y,inputRef:J}=(0,o.B)({items:L,value:P,onChange:M,selected:_,onSelectChange:E,feature:t?i({...V,onRequestItem:(e,t)=>{let{value:n}=e;const a=S(n);a.length>0&&t({index:0,item:a[0]})}}):(0,r.n)({...V,rovingText:p})}),U=(0,w.i)(B,L),$=e=>{J.current?.focus(),l(e),M(void 0),E(void 0),k("free"===e),T(!0),I(!0),y(!0)};return(0,j.jsxs)("div",{className:h.A.wrap,children:[(0,j.jsxs)("div",{className:g,children:[(0,j.jsx)(f.a,{name:"mode",value:"free",label:"Free mode",groupValue:n,onChange:$}),(0,j.jsxs)("div",{className:m,children:[(0,j.jsx)("i",{children:"(the default setting)"})," The text entered in the input field is not restricted to the items in the dropdown list."]}),(0,j.jsx)(f.a,{name:"mode",value:"select",label:"Select mode",groupValue:n,onChange:$}),(0,j.jsx)("div",{className:m,children:"The allowed text in the input field is restricted to the items in the dropdown list."})]}),(0,j.jsxs)("div",{className:h.A.options,children:[!t&&(0,j.jsx)(v.S,{label:"rovingText",checked:p,onChange:k}),(0,j.jsx)(v.S,{label:"deselectOnClear",checked:C,onChange:T}),!O&&(0,j.jsx)(v.S,{label:"deselectOnChange",checked:N,onChange:y}),(0,j.jsx)(v.S,{label:"closeOnSelect",checked:A,onChange:I})]}),(0,j.jsx)("label",{className:h.A.label,...D(),...R(),children:"State"}),(0,j.jsxs)("div",{className:x,children:[(0,j.jsxs)("div",{className:h.A.inputWrap,children:[(0,j.jsx)("input",{className:h.A.input,placeholder:"Select or type...",...W()}),!Y&&(0,j.jsx)("button",{className:h.A.clear,...q(),children:(0,j.jsx)(c.A,{})}),(0,j.jsx)("button",{className:h.A.toggle,...H(),children:B?(0,j.jsx)(d.A,{}):(0,j.jsx)(u.A,{})})]}),_&&(0,j.jsxs)("div",{className:b,children:["You have selected: ",(0,j.jsx)("b",{children:_})]})]}),(0,j.jsx)("ul",{ref:U,className:(0,s.$)(h.A.list,h.A.scroll),...z(),style:{display:B?"block":"none"},children:L.length?L.map(((e,t)=>(0,j.jsx)("li",{className:(0,s.$)(h.A.item,K===t&&h.A.focused,_===e&&h.A.selected),...F({item:e,index:t}),children:e},e))):(0,j.jsx)("li",{className:h.A.noResult,children:"No results"})})]})}},8748:(e,t,n)=>{n.d(t,{S:()=>v});var a,s,o=n(4164),l=n(6540);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...o}=e;return l.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":n},o),t?l.createElement("title",{id:n},t):null,a||(a=l.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=l.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,u;function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...a}=e;return l.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":n},a),t?l.createElement("title",{id:n},t):null,c||(c=l.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),u||(u=l.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",x="checked_X1o2";var b=n(4848);const v=e=>{let{label:t,checked:n,onChange:a}=e;return(0,b.jsxs)("label",{className:(0,o.$)(h,n&&x),children:[(0,b.jsx)("input",{className:m,type:"checkbox",checked:n,onChange:e=>a(e.target.checked)}),n?(0,b.jsx)(p,{className:g}):(0,b.jsx)(i,{className:g}),t]})}},6868:(e,t,n)=>{n.d(t,{a:()=>x});var a,s=n(4164),o=n(6540);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...s}=e;return o.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":n},s),t?o.createElement("title",{id:n},t):null,a||(a=o.createElement("path",{d:"M480-280q83 0 141.5-58.5T680-480t-58.5-141.5T480-680t-141.5 58.5T280-480t58.5 141.5T480-280m0 200q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))};var i;function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...a}=e;return o.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":n},a),t?o.createElement("title",{id:n},t):null,i||(i=o.createElement("path",{d:"M480-80q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))},d="label_EbSy",p="input_dY0D",h="radio_S55Q",m="checked_h9_f";var g=n(4848);const x=e=>{let{label:t,name:n,value:a,groupValue:o,onChange:l}=e;const i=o===a;return(0,g.jsxs)("label",{className:(0,s.$)(d,i&&m),children:[(0,g.jsx)("input",{className:p,type:"radio",name:n,value:a,checked:i,onChange:e=>{let{target:t}=e;return t.checked&&l(t.value)}}),i?(0,g.jsx)(r,{className:h}):(0,g.jsx)(u,{className:h}),t]})}},2194:(e,t,n)=>{n.d(t,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,t,n)=>{n.d(t,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/3c81d79b.c6492338.js b/assets/js/3c81d79b.c6492338.js deleted file mode 100644 index 7a1a0a4..0000000 --- a/assets/js/3c81d79b.c6492338.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2],{1540:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>h,default:()=>b,frontMatter:()=>p,metadata:()=>a,toc:()=>g});const a=JSON.parse('{"id":"docs/features/supercomplete","title":"Supercomplete","description":"The supercomplete feature supports everything provided by autocomplete, along with inline text completion.","source":"@site/docs/docs/features/supercomplete.mdx","sourceDirName":"docs/features","slug":"/docs/features/supercomplete","permalink":"/react-autocomplete/docs/features/supercomplete","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/features/supercomplete.mdx","tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"sidebar_position":2},"sidebar":"docsSidebar","previous":{"title":"Autocomplete","permalink":"/react-autocomplete/docs/features/autocomplete"},"next":{"title":"Dropdown","permalink":"/react-autocomplete/docs/features/dropdown"}}');var s=n(4848),o=n(8453),l=n(267),r=n(8860),i=n(1432);const c="import { useState } from 'react';\nimport { useCombobox, supercomplete } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\nconst filterItems = (value?: string) =>\n value ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase())) : STATES;\n\nconst Supercomplete = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n const items = filterItems(value);\n\n const {\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: supercomplete({\n // highlight-start\n // The `onRequestItem` event will be triggered with the updated input value.\n // You should compute the item for inline text completion using the same filtering logic,\n // and invoke the `res` function to complete.\n // If no item matches for inline completion, do not call the `res` function.\n onRequestItem: ({ value: newValue }, res) => {\n const items = filterItems(newValue);\n if (items.length > 0) res({ index: 0, item: items[0] });\n },\n // highlight-end\n\n // The `select` option controls autocomplete in free or select mode\n select: false // or true\n // Other options: deselectOnClear, deselectOnChange, closeOnSelect\n })\n });\n\n return (\n
    \n \n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No results
    • \n )}\n \n
    \n );\n};\n\nexport default Supercomplete;\n";var u=n(8785),d=n(5096);const p={sidebar_position:2},h="Supercomplete",m={},g=[];function x(e){const t={a:"a",code:"code",h1:"h1",header:"header",p:"p",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"supercomplete",children:"Supercomplete"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"supercomplete"})," feature supports everything provided by ",(0,s.jsx)(t.code,{children:"autocomplete"}),", along with ",(0,s.jsx)(t.a,{href:"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/",children:"inline text completion"}),"."]}),"\n",(0,s.jsx)(d.j,{isSupercomplete:!0}),"\n",(0,s.jsxs)(l.A,{children:[(0,s.jsx)(r.A,{value:"ts",label:"Supercomplete.tsx",children:(0,s.jsx)(i.A,{language:"tsx",children:c})}),(0,s.jsx)(r.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(i.A,{language:"ts",children:u.A})}),(0,s.jsx)(r.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/supercomplete-25p6cf"},children:(0,s.jsx)(t.p,{children:"CodeSandbox"})})]})]})}function b(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(x,{...e})}):x(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>c});var a=n(5430),s=n(1975),o=n(4444),l=n(9301),r=n(9635);var i=n(8321);const c=e=>(0,a.o)((0,s.d)(e),(e=>{let{id:t,inputRef:n,open:a,setOpen:s}=e;const[i,c]=(0,l.e)(a,s),[u,d,p]=(0,r._)(n);return{getToggleProps:()=>({...(0,o.l0)(t,a),onMouseDown:()=>{i(),u()},onClick:()=>{c(),p()}}),getInputProps:()=>({onBlur:d})}}),(0,i.P)())},5096:(e,t,n)=>{n.d(t,{j:()=>k});var a=n(6540),s=n(4164),o=n(6238),l=n(5430),r=n(8185);const i=e=>(0,l.o)((0,r.n)({...e,rovingText:!0}),(e=>{let{onRequestItem:t}=e;return e=>{let{getItemValue:n,setTmpValue:a,setFocusIndex:s}=e;return{getInputProps:()=>({"aria-autocomplete":"both",onChange:e=>{let{target:o,nativeEvent:l}=e;if("insertText"!==l.inputType)return;const r=o.value;t({value:r},(e=>{s(e.index);const t=n(e.item),l=r.length,i=t.length;a(r+t.slice(l)),setTimeout((()=>o.setSelectionRange(l,i)),0)}))}})}}})(e));var c=n(1236),u=n(7210),d=n(6217),p=n(2194),h=n(7869);const m="desc_D_R9",g="modes_IPKR",x="inputWrap_O8rz",b="info_gD2Z";var v=n(8748),f=n(6868),w=n(9094),j=n(4848);const S=e=>e?p.A.filter((t=>t.toLowerCase().startsWith(e.toLowerCase()))):p.A,k=e=>{let{isSupercomplete:t}=e;const[n,l]=(0,a.useState)("free"),[p,k]=(0,a.useState)(!0),[C,T]=(0,a.useState)(!0),[N,y]=(0,a.useState)(!0),[A,I]=(0,a.useState)(!0),O="select"===n,[P,M]=(0,a.useState)(),[_,E]=(0,a.useState)(),L=S(P),V={select:O,deselectOnClear:C,deselectOnChange:N,closeOnSelect:A},{getFocusCaptureProps:R,getLabelProps:D,getInputProps:W,getClearProps:q,getToggleProps:H,getListProps:z,getItemProps:F,open:B,focusIndex:K,isInputEmpty:Y,inputRef:J}=(0,o.B)({items:L,value:P,onChange:M,selected:_,onSelectChange:E,feature:t?i({...V,onRequestItem:(e,t)=>{let{value:n}=e;const a=S(n);a.length>0&&t({index:0,item:a[0]})}}):(0,r.n)({...V,rovingText:p})}),U=(0,w.i)(B,L),$=e=>{J.current?.focus(),l(e),M(void 0),E(void 0),k("free"===e),T(!0),I(!0),y(!0)};return(0,j.jsxs)("div",{className:h.A.wrap,children:[(0,j.jsxs)("div",{className:g,children:[(0,j.jsx)(f.a,{name:"mode",value:"free",label:"Free mode",groupValue:n,onChange:$}),(0,j.jsxs)("div",{className:m,children:[(0,j.jsx)("i",{children:"(the default setting)"})," The text entered in the input field is not restricted to the items in the dropdown list."]}),(0,j.jsx)(f.a,{name:"mode",value:"select",label:"Select mode",groupValue:n,onChange:$}),(0,j.jsx)("div",{className:m,children:"The allowed text in the input field is restricted to the items in the dropdown list."})]}),(0,j.jsxs)("div",{className:h.A.options,children:[!t&&(0,j.jsx)(v.S,{label:"rovingText",checked:p,onChange:k}),(0,j.jsx)(v.S,{label:"deselectOnClear",checked:C,onChange:T}),!O&&(0,j.jsx)(v.S,{label:"deselectOnChange",checked:N,onChange:y}),(0,j.jsx)(v.S,{label:"closeOnSelect",checked:A,onChange:I})]}),(0,j.jsx)("label",{className:h.A.label,...D(),...R(),children:"State"}),(0,j.jsxs)("div",{className:x,children:[(0,j.jsxs)("div",{className:h.A.inputWrap,children:[(0,j.jsx)("input",{className:h.A.input,placeholder:"Select or type...",...W()}),!Y&&(0,j.jsx)("button",{className:h.A.clear,...q(),children:(0,j.jsx)(c.A,{})}),(0,j.jsx)("button",{className:h.A.toggle,...H(),children:B?(0,j.jsx)(d.A,{}):(0,j.jsx)(u.A,{})})]}),_&&(0,j.jsxs)("div",{className:b,children:["You have selected: ",(0,j.jsx)("b",{children:_})]})]}),(0,j.jsx)("ul",{ref:U,className:(0,s.$)(h.A.list,h.A.scroll),...z(),style:{display:B?"block":"none"},children:L.length?L.map(((e,t)=>(0,j.jsx)("li",{className:(0,s.$)(h.A.item,K===t&&h.A.focused,_===e&&h.A.selected),...F({item:e,index:t}),children:e},e))):(0,j.jsx)("li",{className:h.A.noResult,children:"No results"})})]})}},8748:(e,t,n)=>{n.d(t,{S:()=>v});var a,s,o=n(4164),l=n(6540);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...o}=e;return l.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":n},o),t?l.createElement("title",{id:n},t):null,a||(a=l.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=l.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,u;function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...a}=e;return l.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":n},a),t?l.createElement("title",{id:n},t):null,c||(c=l.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),u||(u=l.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",x="checked_X1o2";var b=n(4848);const v=e=>{let{label:t,checked:n,onChange:a}=e;return(0,b.jsxs)("label",{className:(0,o.$)(h,n&&x),children:[(0,b.jsx)("input",{className:m,type:"checkbox",checked:n,onChange:e=>a(e.target.checked)}),n?(0,b.jsx)(p,{className:g}):(0,b.jsx)(i,{className:g}),t]})}},6868:(e,t,n)=>{n.d(t,{a:()=>x});var a,s=n(4164),o=n(6540);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...s}=e;return o.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":n},s),t?o.createElement("title",{id:n},t):null,a||(a=o.createElement("path",{d:"M480-280q83 0 141.5-58.5T680-480t-58.5-141.5T480-680t-141.5 58.5T280-480t58.5 141.5T480-280m0 200q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))};var i;function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...a}=e;return o.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":n},a),t?o.createElement("title",{id:n},t):null,i||(i=o.createElement("path",{d:"M480-80q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))},d="label_EbSy",p="input_dY0D",h="radio_S55Q",m="checked_h9_f";var g=n(4848);const x=e=>{let{label:t,name:n,value:a,groupValue:o,onChange:l}=e;const i=o===a;return(0,g.jsxs)("label",{className:(0,s.$)(d,i&&m),children:[(0,g.jsx)("input",{className:p,type:"radio",name:n,value:a,checked:i,onChange:e=>{let{target:t}=e;return t.checked&&l(t.value)}}),i?(0,g.jsx)(r,{className:h}):(0,g.jsx)(u,{className:h}),t]})}},2194:(e,t,n)=>{n.d(t,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,t,n)=>{n.d(t,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/5b0a7cec.18c79e79.js b/assets/js/5b0a7cec.18c79e79.js new file mode 100644 index 0000000..ff166aa --- /dev/null +++ b/assets/js/5b0a7cec.18c79e79.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[81],{3264:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>w,contentTitle:()=>P,default:()=>k,frontMatter:()=>y,metadata:()=>s,toc:()=>S});const s=JSON.parse('{"id":"docs/extras/action-items","title":"Action items","description":"You can specify items in the list as actions and define what happens after they are triggered. This is useful for extending functionality, such as building a \'creatable\' autocomplete feature.","source":"@site/docs/docs/extras/action-items.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/action-items","permalink":"/react-autocomplete/docs/extras/action-items","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/action-items.mdx","tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4},"sidebar":"docsSidebar","previous":{"title":"Disabled items","permalink":"/react-autocomplete/docs/extras/disabled-items"},"next":{"title":"Select-Only","permalink":"/react-autocomplete/docs/extras/select-only"}}');var a=n(4848),i=n(8453),r=n(267),l=n(8860),o=n(1432);const c="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport FRUITS from '../../data/fruits';\n\n// highlight-next-line\ntype Item = { value: string; creatable?: boolean };\n\nconst ActionItems = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n\n const [fruits, setFruit] = useState(FRUITS);\n const items: Item[] = fruits\n .filter((fruit) => fruit.toLowerCase().includes((value || '').toLowerCase()))\n .map((fruit) => ({ value: fruit }));\n // highlight-start\n // If the value does not exist in the list of items, add a creatable action to the end.\n if (value && !items.find((item) => !item.creatable && item.value === value)) {\n items.push({ value, creatable: true });\n }\n // highlight-end\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n isItemSelected,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n getItemValue: (item) => item.value,\n isEqual: (a, b) => a?.value === b?.value,\n // highlight-start\n // Specify how to determine if an item is an action,\n isItemAction: (item) => !!item.creatable,\n // and what happens after the action is triggered.\n onAction: (item) => {\n if (item.creatable) {\n setSelected({ value: item.value });\n setFruit([item.value, ...fruits]);\n }\n },\n // highlight-end\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {/* highlight-next-line */}\n {item.creatable ? `Create \"${item.value}\"` : item.value}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n
    \n );\n};\n\nexport default ActionItems;\n";var u=n(1516),d=n(6540),p=n(4164),m=n(6238),h=n(8185),g=n(1236),b=n(7210),f=n(6217),x=n(9580),v=n(8155),A=n(7869),I=n(9094);const j=()=>{const[e,t]=(0,d.useState)(),[n,s]=(0,d.useState)(),[i,r]=(0,d.useState)(v.A),l=i.filter((t=>t.toLowerCase().includes((e||"").toLowerCase()))).map((e=>({value:e})));e&&!l.find((t=>!t.creatable&&t.value===e))&&l.push({value:e,creatable:!0});const{getFocusCaptureProps:o,getLabelProps:c,getInputProps:u,getClearProps:j,getToggleProps:y,getListProps:P,getItemProps:w,isItemSelected:S,open:C,focusIndex:k,isInputEmpty:N}=(0,m.B)({items:l,getItemValue:e=>e.value,isEqual:(e,t)=>e?.value===t?.value,isItemAction:e=>!!e.creatable,onAction:e=>{e.creatable&&(s({value:e.value}),r([e.value,...i]))},value:e,onChange:t,selected:n,onSelectChange:s,feature:(0,h.n)({select:!0})}),L=(0,I.i)(C,l);return(0,a.jsxs)("div",{className:A.A.wrap,children:[(0,a.jsx)("label",{className:A.A.label,...c(),...o(),children:"Fruit"}),(0,a.jsxs)("div",{className:A.A.inputWrap,children:[(0,a.jsx)("input",{className:A.A.input,placeholder:"Select or create...",...u()}),!N&&(0,a.jsx)("button",{className:A.A.clear,...j(),children:(0,a.jsx)(g.A,{})}),(0,a.jsx)("button",{className:A.A.toggle,...y(),children:C?(0,a.jsx)(f.A,{}):(0,a.jsx)(b.A,{})})]}),(0,a.jsx)("ul",{ref:L,className:(0,p.$)(A.A.list,A.A.scroll),...P(),style:{display:C?"block":"none"},children:l.length?l.map(((e,t)=>{const n=S(e);return(0,a.jsxs)("li",{className:(0,p.$)(A.A.itemCheckable,k===t&&A.A.focused,n&&A.A.checked,e.creatable&&A.A.creatable),...w({item:e,index:t}),children:[e.creatable?`Create "${e.value}"`:e.value,n&&(0,a.jsx)(x.A,{})]},e.value)})):(0,a.jsx)("li",{className:A.A.noResult,children:"No options"})})]})},y={sidebar_position:4},P="Action items",w={},S=[];function C(e){const t={h1:"h1",header:"header",p:"p",strong:"strong",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"action-items",children:"Action items"})}),"\n",(0,a.jsxs)(t.p,{children:["You can specify items in the list as actions and define what happens after they are triggered. This is useful for extending functionality, such as building a ",(0,a.jsx)(t.strong,{children:"'creatable'"})," autocomplete feature."]}),"\n",(0,a.jsx)(j,{}),"\n",(0,a.jsxs)(r.A,{children:[(0,a.jsx)(l.A,{value:"ts",label:"ActionItems.tsx",children:(0,a.jsx)(o.A,{language:"tsx",children:c})}),(0,a.jsx)(l.A,{value:"data",label:"data/fruits.ts",children:(0,a.jsx)(o.A,{language:"ts",children:u.A})})]})]})}function k(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(C,{...e})}):C(e)}},9580:(e,t,n)=>{n.d(t,{A:()=>l});var s,a,i=n(6540);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...l}=e;return i.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-check",viewBox:"0 0 24 24","aria-labelledby":n},l),t?i.createElement("title",{id:n},t):null,s||(s=i.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),a||(a=i.createElement("path",{d:"m5 12 5 5L20 7"})))}},8185:(e,t,n)=>{n.d(t,{n:()=>c});var s=n(5430),a=n(1975),i=n(4444),r=n(9301),l=n(9635);var o=n(8321);const c=e=>(0,s.o)((0,a.d)(e),(e=>{let{id:t,inputRef:n,open:s,setOpen:a}=e;const[o,c]=(0,r.e)(s,a),[u,d,p]=(0,l._)(n);return{getToggleProps:()=>({...(0,i.l0)(t,s),onMouseDown:()=>{o(),u()},onClick:()=>{c(),p()}}),getInputProps:()=>({onBlur:d})}}),(0,o.P)())},8155:(e,t,n)=>{n.d(t,{A:()=>s});const s=["Apple","Banana","Blueberry","Cherry","Grape","Pineapple","Strawberry"]},1516:(e,t,n)=>{n.d(t,{A:()=>s});const s="export default ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Grape', 'Pineapple', 'Strawberry'];\n"}}]); \ No newline at end of file diff --git a/assets/js/5b0a7cec.902a0bd8.js b/assets/js/5b0a7cec.902a0bd8.js deleted file mode 100644 index 061ff6a..0000000 --- a/assets/js/5b0a7cec.902a0bd8.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[81],{3264:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>w,contentTitle:()=>P,default:()=>k,frontMatter:()=>y,metadata:()=>s,toc:()=>S});const s=JSON.parse('{"id":"docs/extras/action-items","title":"Action items","description":"You can specify items in the list as actions and define what happens after they are triggered. This is useful for extending functionality, such as building a \'creatable\' autocomplete feature.","source":"@site/docs/docs/extras/action-items.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/action-items","permalink":"/react-autocomplete/docs/extras/action-items","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/action-items.mdx","tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4},"sidebar":"docsSidebar","previous":{"title":"Disabled items","permalink":"/react-autocomplete/docs/extras/disabled-items"},"next":{"title":"Select-Only","permalink":"/react-autocomplete/docs/extras/select-only"}}');var a=n(4848),i=n(8453),l=n(267),r=n(8860),o=n(1432);const c="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport FRUITS from '../../data/fruits';\n\n// highlight-next-line\ntype Item = { value: string; creatable?: boolean };\n\nconst ActionItems = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n\n const [fruits, setFruit] = useState(FRUITS);\n const items: Item[] = fruits\n .filter((fruit) => fruit.toLowerCase().includes((value || '').toLowerCase()))\n .map((fruit) => ({ value: fruit }));\n // highlight-start\n // If the value does not exist in the list of items, add a creatable action to the end.\n if (value && !items.find((item) => !item.creatable && item.value === value)) {\n items.push({ value, creatable: true });\n }\n // highlight-end\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n isItemSelected,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n getItemValue: (item) => item.value,\n isEqual: (a, b) => a?.value === b?.value,\n // highlight-start\n // Specify how to determine if an item is an action,\n isItemAction: (item) => !!item.creatable,\n // and what happens after the action is triggered.\n onAction: (item) => {\n if (item.creatable) {\n setSelected({ value: item.value });\n setFruit([item.value, ...fruits]);\n }\n },\n // highlight-end\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {/* highlight-next-line */}\n {item.creatable ? `Create \"${item.value}\"` : item.value}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n
    \n );\n};\n\nexport default ActionItems;\n";var u=n(1516),d=n(6540),p=n(4164),m=n(6238),h=n(8185),g=n(1236),b=n(7210),f=n(6217),x=n(9580),v=n(8155),A=n(7869),I=n(9094);const j=()=>{const[e,t]=(0,d.useState)(),[n,s]=(0,d.useState)(),[i,l]=(0,d.useState)(v.A),r=i.filter((t=>t.toLowerCase().includes((e||"").toLowerCase()))).map((e=>({value:e})));e&&!r.find((t=>!t.creatable&&t.value===e))&&r.push({value:e,creatable:!0});const{getFocusCaptureProps:o,getLabelProps:c,getInputProps:u,getClearProps:j,getToggleProps:y,getListProps:P,getItemProps:w,isItemSelected:S,open:C,focusIndex:k,isInputEmpty:N}=(0,m.B)({items:r,getItemValue:e=>e.value,isEqual:(e,t)=>e?.value===t?.value,isItemAction:e=>!!e.creatable,onAction:e=>{e.creatable&&(s({value:e.value}),l([e.value,...i]))},value:e,onChange:t,selected:n,onSelectChange:s,feature:(0,h.n)({select:!0})}),L=(0,I.i)(C,r);return(0,a.jsxs)("div",{className:A.A.wrap,children:[(0,a.jsx)("label",{className:A.A.label,...c(),...o(),children:"Fruit"}),(0,a.jsxs)("div",{className:A.A.inputWrap,children:[(0,a.jsx)("input",{className:A.A.input,placeholder:"Select or create...",...u()}),!N&&(0,a.jsx)("button",{className:A.A.clear,...j(),children:(0,a.jsx)(g.A,{})}),(0,a.jsx)("button",{className:A.A.toggle,...y(),children:C?(0,a.jsx)(f.A,{}):(0,a.jsx)(b.A,{})})]}),(0,a.jsx)("ul",{ref:L,className:(0,p.$)(A.A.list,A.A.scroll),...P(),style:{display:C?"block":"none"},children:r.length?r.map(((e,t)=>{const n=S(e);return(0,a.jsxs)("li",{className:(0,p.$)(A.A.itemCheckable,k===t&&A.A.focused,n&&A.A.checked,e.creatable&&A.A.creatable),...w({item:e,index:t}),children:[e.creatable?`Create "${e.value}"`:e.value,n&&(0,a.jsx)(x.A,{})]},e.value)})):(0,a.jsx)("li",{className:A.A.noResult,children:"No options"})})]})},y={sidebar_position:4},P="Action items",w={},S=[];function C(e){const t={h1:"h1",header:"header",p:"p",strong:"strong",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"action-items",children:"Action items"})}),"\n",(0,a.jsxs)(t.p,{children:["You can specify items in the list as actions and define what happens after they are triggered. This is useful for extending functionality, such as building a ",(0,a.jsx)(t.strong,{children:"'creatable'"})," autocomplete feature."]}),"\n",(0,a.jsx)(j,{}),"\n",(0,a.jsxs)(l.A,{children:[(0,a.jsx)(r.A,{value:"ts",label:"ActionItems.tsx",children:(0,a.jsx)(o.A,{language:"tsx",children:c})}),(0,a.jsx)(r.A,{value:"data",label:"data/fruits.ts",children:(0,a.jsx)(o.A,{language:"ts",children:u.A})})]})]})}function k(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(C,{...e})}):C(e)}},9580:(e,t,n)=>{n.d(t,{A:()=>r});var s,a,i=n(6540);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...r}=e;return i.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-check",viewBox:"0 0 24 24","aria-labelledby":n},r),t?i.createElement("title",{id:n},t):null,s||(s=i.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),a||(a=i.createElement("path",{d:"m5 12 5 5L20 7"})))}},8185:(e,t,n)=>{n.d(t,{n:()=>c});var s=n(5430),a=n(1975),i=n(4444),l=n(9301),r=n(9635);var o=n(8321);const c=e=>(0,s.o)((0,a.d)(e),(e=>{let{id:t,inputRef:n,open:s,setOpen:a}=e;const[o,c]=(0,l.e)(s,a),[u,d,p]=(0,r._)(n);return{getToggleProps:()=>({...(0,i.l0)(t,s),onMouseDown:()=>{o(),u()},onClick:()=>{c(),p()}}),getInputProps:()=>({onBlur:d})}}),(0,o.P)())},8155:(e,t,n)=>{n.d(t,{A:()=>s});const s=["Apple","Banana","Blueberry","Cherry","Grape","Pineapple","Strawberry"]},1516:(e,t,n)=>{n.d(t,{A:()=>s});const s="export default ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Grape', 'Pineapple', 'Strawberry'];\n"}}]); \ No newline at end of file diff --git a/assets/js/7f0979ab.0d1dd6b3.js b/assets/js/7f0979ab.0d1dd6b3.js new file mode 100644 index 0000000..0e3aea6 --- /dev/null +++ b/assets/js/7f0979ab.0d1dd6b3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[112],{1122:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>v,contentTitle:()=>j,default:()=>I,frontMatter:()=>P,metadata:()=>s,toc:()=>C});const s=JSON.parse('{"id":"docs/extras/select-only","title":"Select-Only Combobox","description":"This is not a separate feature, but it can be easily achieved by by making the input read-only.","source":"@site/docs/docs/extras/select-only.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/select-only","permalink":"/react-autocomplete/docs/extras/select-only","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/select-only.mdx","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"sidebar_position":5,"sidebar_label":"Select-Only"},"sidebar":"docsSidebar","previous":{"title":"Action items","permalink":"/react-autocomplete/docs/extras/action-items"},"next":{"title":"Async example","permalink":"/react-autocomplete/docs/extras/async"}}');var o=n(4848),l=n(8453),a=n(267),r=n(8860),i=n(1432);const c="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport FRUITS from '../../data/fruits';\n\nconst SelectOnly = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n // items are fixed\n // highlight-next-line\n items: FRUITS,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {FRUITS.map((item, index) => (\n \n {item}\n \n ))}\n \n
    \n );\n};\n\nexport default SelectOnly;\n";var p=n(1516),d=n(6540),u=n(4164),m=n(6238),b=n(8185),g=n(1236),x=n(7210),h=n(6217),y=n(8155),f=n(7869),S=n(9094);const A=()=>{const[e,t]=(0,d.useState)(),[n,s]=(0,d.useState)(),l=y.A,{getFocusCaptureProps:a,getLabelProps:r,getInputProps:i,getClearProps:c,getToggleProps:p,getListProps:A,getItemProps:P,open:j,focusIndex:v,isInputEmpty:C}=(0,m.B)({items:l,value:e,onChange:t,selected:n,onSelectChange:s,feature:(0,b.n)({select:!0})}),k=(0,S.i)(j,l);return(0,o.jsxs)("div",{className:f.A.wrap,children:[(0,o.jsx)("label",{className:f.A.label,...r(),...a(),children:"Fruit"}),(0,o.jsxs)("div",{className:f.A.inputWrap,children:[(0,o.jsx)("input",{readOnly:!0,className:f.A.input,placeholder:"Select...",...i()}),!C&&(0,o.jsx)("button",{className:f.A.clear,...c(),children:(0,o.jsx)(g.A,{})}),(0,o.jsx)("button",{className:f.A.toggle,...p(),children:j?(0,o.jsx)(h.A,{}):(0,o.jsx)(x.A,{})})]}),(0,o.jsx)("ul",{ref:k,className:(0,u.$)(f.A.list,f.A.noScroll),...A(),style:{display:j?"block":"none"},children:l.map(((e,t)=>(0,o.jsx)("li",{className:(0,u.$)(f.A.item,v===t&&f.A.focused,n===e&&f.A.selected),...P({item:e,index:t}),children:e},e)))})]})},P={sidebar_position:5,sidebar_label:"Select-Only"},j="Select-Only Combobox",v={},C=[];function k(e){const t={h1:"h1",header:"header",p:"p",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"select-only-combobox",children:"Select-Only Combobox"})}),"\n",(0,o.jsx)(t.p,{children:"This is not a separate feature, but it can be easily achieved by by making the input read-only."}),"\n",(0,o.jsx)(A,{}),"\n",(0,o.jsxs)(a.A,{children:[(0,o.jsx)(r.A,{value:"ts",label:"SelectOnly.tsx",children:(0,o.jsx)(i.A,{language:"tsx",children:c})}),(0,o.jsx)(r.A,{value:"data",label:"data/fruits.ts",children:(0,o.jsx)(i.A,{language:"ts",children:p.A})})]})]})}function I(e={}){const{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(k,{...e})}):k(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>c});var s=n(5430),o=n(1975),l=n(4444),a=n(9301),r=n(9635);var i=n(8321);const c=e=>(0,s.o)((0,o.d)(e),(e=>{let{id:t,inputRef:n,open:s,setOpen:o}=e;const[i,c]=(0,a.e)(s,o),[p,d,u]=(0,r._)(n);return{getToggleProps:()=>({...(0,l.l0)(t,s),onMouseDown:()=>{i(),p()},onClick:()=>{c(),u()}}),getInputProps:()=>({onBlur:d})}}),(0,i.P)())},8155:(e,t,n)=>{n.d(t,{A:()=>s});const s=["Apple","Banana","Blueberry","Cherry","Grape","Pineapple","Strawberry"]},1516:(e,t,n)=>{n.d(t,{A:()=>s});const s="export default ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Grape', 'Pineapple', 'Strawberry'];\n"}}]); \ No newline at end of file diff --git a/assets/js/7f0979ab.6b97493c.js b/assets/js/7f0979ab.6b97493c.js deleted file mode 100644 index d7ba40f..0000000 --- a/assets/js/7f0979ab.6b97493c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[112],{1122:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>v,contentTitle:()=>j,default:()=>I,frontMatter:()=>P,metadata:()=>s,toc:()=>C});const s=JSON.parse('{"id":"docs/extras/select-only","title":"Select-Only Combobox","description":"This is not a separate feature, but it can be easily achieved by by making the input read-only.","source":"@site/docs/docs/extras/select-only.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/select-only","permalink":"/react-autocomplete/docs/extras/select-only","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/select-only.mdx","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"sidebar_position":5,"sidebar_label":"Select-Only"},"sidebar":"docsSidebar","previous":{"title":"Action items","permalink":"/react-autocomplete/docs/extras/action-items"},"next":{"title":"Async example","permalink":"/react-autocomplete/docs/extras/async"}}');var o=n(4848),l=n(8453),a=n(267),r=n(8860),i=n(1432);const c="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport FRUITS from '../../data/fruits';\n\nconst SelectOnly = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n // items are fixed\n // highlight-next-line\n items: FRUITS,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {FRUITS.map((item, index) => (\n \n {item}\n \n ))}\n \n
    \n );\n};\n\nexport default SelectOnly;\n";var p=n(1516),d=n(6540),u=n(4164),m=n(6238),b=n(8185),g=n(1236),x=n(7210),h=n(6217),y=n(8155),f=n(7869),S=n(9094);const A=()=>{const[e,t]=(0,d.useState)(),[n,s]=(0,d.useState)(),l=y.A,{getFocusCaptureProps:a,getLabelProps:r,getInputProps:i,getClearProps:c,getToggleProps:p,getListProps:A,getItemProps:P,open:j,focusIndex:v,isInputEmpty:C}=(0,m.B)({items:l,value:e,onChange:t,selected:n,onSelectChange:s,feature:(0,b.n)({select:!0})}),k=(0,S.i)(j,l);return(0,o.jsxs)("div",{className:f.A.wrap,children:[(0,o.jsx)("label",{className:f.A.label,...r(),...a(),children:"Fruit"}),(0,o.jsxs)("div",{className:f.A.inputWrap,children:[(0,o.jsx)("input",{readOnly:!0,className:f.A.input,placeholder:"Select...",...i()}),!C&&(0,o.jsx)("button",{className:f.A.clear,...c(),children:(0,o.jsx)(g.A,{})}),(0,o.jsx)("button",{className:f.A.toggle,...p(),children:j?(0,o.jsx)(h.A,{}):(0,o.jsx)(x.A,{})})]}),(0,o.jsx)("ul",{ref:k,className:(0,u.$)(f.A.list,f.A.noScroll),...A(),style:{display:j?"block":"none"},children:l.map(((e,t)=>(0,o.jsx)("li",{className:(0,u.$)(f.A.item,v===t&&f.A.focused,n===e&&f.A.selected),...P({item:e,index:t}),children:e},e)))})]})},P={sidebar_position:5,sidebar_label:"Select-Only"},j="Select-Only Combobox",v={},C=[];function k(e){const t={h1:"h1",header:"header",p:"p",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"select-only-combobox",children:"Select-Only Combobox"})}),"\n",(0,o.jsx)(t.p,{children:"This is not a separate feature, but it can be easily achieved by by making the input read-only."}),"\n",(0,o.jsx)(A,{}),"\n",(0,o.jsxs)(a.A,{children:[(0,o.jsx)(r.A,{value:"ts",label:"SelectOnly.tsx",children:(0,o.jsx)(i.A,{language:"tsx",children:c})}),(0,o.jsx)(r.A,{value:"data",label:"data/fruits.ts",children:(0,o.jsx)(i.A,{language:"ts",children:p.A})})]})]})}function I(e={}){const{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(k,{...e})}):k(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>c});var s=n(5430),o=n(1975),l=n(4444),a=n(9301),r=n(9635);var i=n(8321);const c=e=>(0,s.o)((0,o.d)(e),(e=>{let{id:t,inputRef:n,open:s,setOpen:o}=e;const[i,c]=(0,a.e)(s,o),[p,d,u]=(0,r._)(n);return{getToggleProps:()=>({...(0,l.l0)(t,s),onMouseDown:()=>{i(),p()},onClick:()=>{c(),u()}}),getInputProps:()=>({onBlur:d})}}),(0,i.P)())},8155:(e,t,n)=>{n.d(t,{A:()=>s});const s=["Apple","Banana","Blueberry","Cherry","Grape","Pineapple","Strawberry"]},1516:(e,t,n)=>{n.d(t,{A:()=>s});const s="export default ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Grape', 'Pineapple', 'Strawberry'];\n"}}]); \ No newline at end of file diff --git a/assets/js/b118d1eb.469ba26f.js b/assets/js/b118d1eb.469ba26f.js deleted file mode 100644 index 64d3039..0000000 --- a/assets/js/b118d1eb.469ba26f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[907],{2334:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>h,default:()=>b,frontMatter:()=>p,metadata:()=>a,toc:()=>g});const a=JSON.parse('{"id":"docs/features/autocomplete","title":"Autocomplete","description":"The autocomplete feature supports two modes, each offering a few available options.","source":"@site/docs/docs/features/autocomplete.mdx","sourceDirName":"docs/features","slug":"/docs/features/autocomplete","permalink":"/react-autocomplete/docs/features/autocomplete","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/features/autocomplete.mdx","tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"docsSidebar","previous":{"title":"Install","permalink":"/react-autocomplete/docs/install"},"next":{"title":"Supercomplete","permalink":"/react-autocomplete/docs/features/supercomplete"}}');var s=n(4848),o=n(8453),l=n(267),i=n(8860),r=n(1432);const c="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\nconst Autocomplete = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n\n // It's up to you how to filter items based on the input value\n const items = value\n ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))\n : STATES;\n\n const {\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({\n // The `select` option controls autocomplete in free or select mode\n // highlight-next-line\n select: true // or false\n // Other options: rovingText, deselectOnClear, deselectOnChange, closeOnSelect\n })\n });\n\n return (\n
    \n \n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No results
    • \n )}\n \n
    \n );\n};\n\nexport default Autocomplete;\n";var d=n(8785),u=n(5096);const p={sidebar_position:1},h="Autocomplete",m={},g=[];function x(e){const t={admonition:"admonition",code:"code",h1:"h1",header:"header",p:"p",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"autocomplete",children:"Autocomplete"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"autocomplete"})," feature supports two modes, each offering a few available options."]}),"\n",(0,s.jsx)(u.j,{}),"\n",(0,s.jsxs)(l.A,{children:[(0,s.jsx)(i.A,{value:"ts",label:"Autocomplete.tsx",children:(0,s.jsx)(r.A,{language:"tsx",children:c})}),(0,s.jsx)(i.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(r.A,{language:"ts",children:d.A})}),(0,s.jsx)(i.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/autocomplete-35j3qx"},children:(0,s.jsx)(t.p,{children:"CodeSandbox"})})]}),"\n",(0,s.jsx)(t.admonition,{type:"info",children:(0,s.jsxs)(t.p,{children:["When comparing ",(0,s.jsx)(t.code,{children:"autocomplete"})," to ",(0,s.jsx)(t.code,{children:"autocompleteLite"}),", the former adds support for the label and input toggle. If you don't need these features, you can simply use ",(0,s.jsx)(t.code,{children:"autocompleteLite"}),", which is more lightweight."]})})]})}function b(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(x,{...e})}):x(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>c});var a=n(5430),s=n(1975),o=n(4444),l=n(9301),i=n(9635);var r=n(8321);const c=e=>(0,a.o)((0,s.d)(e),(e=>{let{id:t,inputRef:n,open:a,setOpen:s}=e;const[r,c]=(0,l.e)(a,s),[d,u,p]=(0,i._)(n);return{getToggleProps:()=>({...(0,o.l0)(t,a),onMouseDown:()=>{r(),d()},onClick:()=>{c(),p()}}),getInputProps:()=>({onBlur:u})}}),(0,r.P)())},5096:(e,t,n)=>{n.d(t,{j:()=>C});var a=n(6540),s=n(4164),o=n(6238),l=n(5430),i=n(8185);const r=e=>(0,l.o)((0,i.n)({...e,rovingText:!0}),(e=>{let{onRequestItem:t}=e;return e=>{let{getItemValue:n,setTmpValue:a,setFocusIndex:s}=e;return{getInputProps:()=>({"aria-autocomplete":"both",onChange:e=>{let{target:o,nativeEvent:l}=e;if("insertText"!==l.inputType)return;const i=o.value;t({value:i},(e=>{s(e.index);const t=n(e.item),l=i.length,r=t.length;a(i+t.slice(l)),setTimeout((()=>o.setSelectionRange(l,r)),0)}))}})}}})(e));var c=n(1236),d=n(7210),u=n(6217),p=n(2194),h=n(7869);const m="desc_D_R9",g="modes_IPKR",x="inputWrap_O8rz",b="info_gD2Z";var f=n(8748),v=n(6868),w=n(9094),j=n(4848);const k=e=>e?p.A.filter((t=>t.toLowerCase().startsWith(e.toLowerCase()))):p.A,C=e=>{let{isSupercomplete:t}=e;const[n,l]=(0,a.useState)("free"),[p,C]=(0,a.useState)(!0),[S,T]=(0,a.useState)(!0),[N,A]=(0,a.useState)(!0),[y,I]=(0,a.useState)(!0),O="select"===n,[P,M]=(0,a.useState)(),[_,E]=(0,a.useState)(),L=k(P),V={select:O,deselectOnClear:S,deselectOnChange:N,closeOnSelect:y},{getFocusCaptureProps:W,getLabelProps:D,getInputProps:R,getClearProps:q,getToggleProps:H,getListProps:z,getItemProps:F,open:B,focusIndex:K,isInputEmpty:J,inputRef:U}=(0,o.B)({items:L,value:P,onChange:M,selected:_,onSelectChange:E,feature:t?r({...V,onRequestItem:(e,t)=>{let{value:n}=e;const a=k(n);a.length>0&&t({index:0,item:a[0]})}}):(0,i.n)({...V,rovingText:p})}),Y=(0,w.i)(B,L),$=e=>{U.current?.focus(),l(e),M(void 0),E(void 0),C("free"===e),T(!0),I(!0),A(!0)};return(0,j.jsxs)("div",{className:h.A.wrap,children:[(0,j.jsxs)("div",{className:g,children:[(0,j.jsx)(v.a,{name:"mode",value:"free",label:"Free mode",groupValue:n,onChange:$}),(0,j.jsxs)("div",{className:m,children:[(0,j.jsx)("i",{children:"(the default setting)"})," The text entered in the input field is not restricted to the items in the dropdown list."]}),(0,j.jsx)(v.a,{name:"mode",value:"select",label:"Select mode",groupValue:n,onChange:$}),(0,j.jsx)("div",{className:m,children:"The allowed text in the input field is restricted to the items in the dropdown list."})]}),(0,j.jsxs)("div",{className:h.A.options,children:[!t&&(0,j.jsx)(f.S,{label:"rovingText",checked:p,onChange:C}),(0,j.jsx)(f.S,{label:"deselectOnClear",checked:S,onChange:T}),!O&&(0,j.jsx)(f.S,{label:"deselectOnChange",checked:N,onChange:A}),(0,j.jsx)(f.S,{label:"closeOnSelect",checked:y,onChange:I})]}),(0,j.jsx)("label",{className:h.A.label,...D(),...W(),children:"State"}),(0,j.jsxs)("div",{className:x,children:[(0,j.jsxs)("div",{className:h.A.inputWrap,children:[(0,j.jsx)("input",{className:h.A.input,placeholder:"Select or type...",...R()}),!J&&(0,j.jsx)("button",{className:h.A.clear,...q(),children:(0,j.jsx)(c.A,{})}),(0,j.jsx)("button",{className:h.A.toggle,...H(),children:B?(0,j.jsx)(u.A,{}):(0,j.jsx)(d.A,{})})]}),_&&(0,j.jsxs)("div",{className:b,children:["You have selected: ",(0,j.jsx)("b",{children:_})]})]}),(0,j.jsx)("ul",{ref:Y,className:(0,s.$)(h.A.list,h.A.scroll),...z(),style:{display:B?"block":"none"},children:L.length?L.map(((e,t)=>(0,j.jsx)("li",{className:(0,s.$)(h.A.item,K===t&&h.A.focused,_===e&&h.A.selected),...F({item:e,index:t}),children:e},e))):(0,j.jsx)("li",{className:h.A.noResult,children:"No results"})})]})}},8748:(e,t,n)=>{n.d(t,{S:()=>f});var a,s,o=n(4164),l=n(6540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...o}=e;return l.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":n},o),t?l.createElement("title",{id:n},t):null,a||(a=l.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=l.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,d;function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...a}=e;return l.createElement("svg",u({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":n},a),t?l.createElement("title",{id:n},t):null,c||(c=l.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),d||(d=l.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",x="checked_X1o2";var b=n(4848);const f=e=>{let{label:t,checked:n,onChange:a}=e;return(0,b.jsxs)("label",{className:(0,o.$)(h,n&&x),children:[(0,b.jsx)("input",{className:m,type:"checkbox",checked:n,onChange:e=>a(e.target.checked)}),n?(0,b.jsx)(p,{className:g}):(0,b.jsx)(r,{className:g}),t]})}},6868:(e,t,n)=>{n.d(t,{a:()=>x});var a,s=n(4164),o=n(6540);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...s}=e;return o.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":n},s),t?o.createElement("title",{id:n},t):null,a||(a=o.createElement("path",{d:"M480-280q83 0 141.5-58.5T680-480t-58.5-141.5T480-680t-141.5 58.5T280-480t58.5 141.5T480-280m0 200q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))};var r;function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...a}=e;return o.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":n},a),t?o.createElement("title",{id:n},t):null,r||(r=o.createElement("path",{d:"M480-80q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))},u="label_EbSy",p="input_dY0D",h="radio_S55Q",m="checked_h9_f";var g=n(4848);const x=e=>{let{label:t,name:n,value:a,groupValue:o,onChange:l}=e;const r=o===a;return(0,g.jsxs)("label",{className:(0,s.$)(u,r&&m),children:[(0,g.jsx)("input",{className:p,type:"radio",name:n,value:a,checked:r,onChange:e=>{let{target:t}=e;return t.checked&&l(t.value)}}),r?(0,g.jsx)(i,{className:h}):(0,g.jsx)(d,{className:h}),t]})}},2194:(e,t,n)=>{n.d(t,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,t,n)=>{n.d(t,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/b118d1eb.739b990f.js b/assets/js/b118d1eb.739b990f.js new file mode 100644 index 0000000..686d57d --- /dev/null +++ b/assets/js/b118d1eb.739b990f.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[907],{2334:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>h,default:()=>b,frontMatter:()=>p,metadata:()=>a,toc:()=>g});const a=JSON.parse('{"id":"docs/features/autocomplete","title":"Autocomplete","description":"The autocomplete feature supports two modes, each offering a few available options.","source":"@site/docs/docs/features/autocomplete.mdx","sourceDirName":"docs/features","slug":"/docs/features/autocomplete","permalink":"/react-autocomplete/docs/features/autocomplete","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/features/autocomplete.mdx","tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"docsSidebar","previous":{"title":"Install","permalink":"/react-autocomplete/docs/install"},"next":{"title":"Supercomplete","permalink":"/react-autocomplete/docs/features/supercomplete"}}');var s=n(4848),o=n(8453),l=n(267),i=n(8860),r=n(1432);const c="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\nconst Autocomplete = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n\n // It's up to you how to filter items based on the input value\n const items = value\n ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))\n : STATES;\n\n const {\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({\n // The `select` option controls autocomplete in free or select mode\n // highlight-next-line\n select: true // or false\n // Other options: rovingText, deselectOnClear, deselectOnChange, closeOnSelect\n })\n });\n\n return (\n
    \n \n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No results
    • \n )}\n \n
    \n );\n};\n\nexport default Autocomplete;\n";var d=n(8785),u=n(5096);const p={sidebar_position:1},h="Autocomplete",m={},g=[];function x(e){const t={admonition:"admonition",code:"code",h1:"h1",header:"header",p:"p",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"autocomplete",children:"Autocomplete"})}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"autocomplete"})," feature supports two modes, each offering a few available options."]}),"\n",(0,s.jsx)(u.j,{}),"\n",(0,s.jsxs)(l.A,{children:[(0,s.jsx)(i.A,{value:"ts",label:"Autocomplete.tsx",children:(0,s.jsx)(r.A,{language:"tsx",children:c})}),(0,s.jsx)(i.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(r.A,{language:"ts",children:d.A})}),(0,s.jsx)(i.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/autocomplete-35j3qx"},children:(0,s.jsx)(t.p,{children:"CodeSandbox"})})]}),"\n",(0,s.jsx)(t.admonition,{type:"info",children:(0,s.jsxs)(t.p,{children:["When comparing ",(0,s.jsx)(t.code,{children:"autocomplete"})," to ",(0,s.jsx)(t.code,{children:"autocompleteLite"}),", the former adds support for the label and input toggle. If you don't need these features, you can simply use ",(0,s.jsx)(t.code,{children:"autocompleteLite"}),", which is more lightweight."]})})]})}function b(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(x,{...e})}):x(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>c});var a=n(5430),s=n(1975),o=n(4444),l=n(9301),i=n(9635);var r=n(8321);const c=e=>(0,a.o)((0,s.d)(e),(e=>{let{id:t,inputRef:n,open:a,setOpen:s}=e;const[r,c]=(0,l.e)(a,s),[d,u,p]=(0,i._)(n);return{getToggleProps:()=>({...(0,o.l0)(t,a),onMouseDown:()=>{r(),d()},onClick:()=>{c(),p()}}),getInputProps:()=>({onBlur:u})}}),(0,r.P)())},5096:(e,t,n)=>{n.d(t,{j:()=>C});var a=n(6540),s=n(4164),o=n(6238),l=n(5430),i=n(8185);const r=e=>(0,l.o)((0,i.n)({...e,rovingText:!0}),(e=>{let{onRequestItem:t}=e;return e=>{let{getItemValue:n,setTmpValue:a,setFocusIndex:s}=e;return{getInputProps:()=>({"aria-autocomplete":"both",onChange:e=>{let{target:o,nativeEvent:l}=e;if("insertText"!==l.inputType)return;const i=o.value;t({value:i},(e=>{s(e.index);const t=n(e.item),l=i.length,r=t.length;a(i+t.slice(l)),setTimeout((()=>o.setSelectionRange(l,r)),0)}))}})}}})(e));var c=n(1236),d=n(7210),u=n(6217),p=n(2194),h=n(7869);const m="desc_D_R9",g="modes_IPKR",x="inputWrap_O8rz",b="info_gD2Z";var f=n(8748),v=n(6868),w=n(9094),j=n(4848);const k=e=>e?p.A.filter((t=>t.toLowerCase().startsWith(e.toLowerCase()))):p.A,C=e=>{let{isSupercomplete:t}=e;const[n,l]=(0,a.useState)("free"),[p,C]=(0,a.useState)(!0),[S,T]=(0,a.useState)(!0),[N,A]=(0,a.useState)(!0),[y,I]=(0,a.useState)(!0),O="select"===n,[P,M]=(0,a.useState)(),[_,E]=(0,a.useState)(),L=k(P),V={select:O,deselectOnClear:S,deselectOnChange:N,closeOnSelect:y},{getFocusCaptureProps:W,getLabelProps:D,getInputProps:R,getClearProps:q,getToggleProps:H,getListProps:z,getItemProps:F,open:B,focusIndex:K,isInputEmpty:J,inputRef:U}=(0,o.B)({items:L,value:P,onChange:M,selected:_,onSelectChange:E,feature:t?r({...V,onRequestItem:(e,t)=>{let{value:n}=e;const a=k(n);a.length>0&&t({index:0,item:a[0]})}}):(0,i.n)({...V,rovingText:p})}),Y=(0,w.i)(B,L),$=e=>{U.current?.focus(),l(e),M(void 0),E(void 0),C("free"===e),T(!0),I(!0),A(!0)};return(0,j.jsxs)("div",{className:h.A.wrap,children:[(0,j.jsxs)("div",{className:g,children:[(0,j.jsx)(v.a,{name:"mode",value:"free",label:"Free mode",groupValue:n,onChange:$}),(0,j.jsxs)("div",{className:m,children:[(0,j.jsx)("i",{children:"(the default setting)"})," The text entered in the input field is not restricted to the items in the dropdown list."]}),(0,j.jsx)(v.a,{name:"mode",value:"select",label:"Select mode",groupValue:n,onChange:$}),(0,j.jsx)("div",{className:m,children:"The allowed text in the input field is restricted to the items in the dropdown list."})]}),(0,j.jsxs)("div",{className:h.A.options,children:[!t&&(0,j.jsx)(f.S,{label:"rovingText",checked:p,onChange:C}),(0,j.jsx)(f.S,{label:"deselectOnClear",checked:S,onChange:T}),!O&&(0,j.jsx)(f.S,{label:"deselectOnChange",checked:N,onChange:A}),(0,j.jsx)(f.S,{label:"closeOnSelect",checked:y,onChange:I})]}),(0,j.jsx)("label",{className:h.A.label,...D(),...W(),children:"State"}),(0,j.jsxs)("div",{className:x,children:[(0,j.jsxs)("div",{className:h.A.inputWrap,children:[(0,j.jsx)("input",{className:h.A.input,placeholder:"Select or type...",...R()}),!J&&(0,j.jsx)("button",{className:h.A.clear,...q(),children:(0,j.jsx)(c.A,{})}),(0,j.jsx)("button",{className:h.A.toggle,...H(),children:B?(0,j.jsx)(u.A,{}):(0,j.jsx)(d.A,{})})]}),_&&(0,j.jsxs)("div",{className:b,children:["You have selected: ",(0,j.jsx)("b",{children:_})]})]}),(0,j.jsx)("ul",{ref:Y,className:(0,s.$)(h.A.list,h.A.scroll),...z(),style:{display:B?"block":"none"},children:L.length?L.map(((e,t)=>(0,j.jsx)("li",{className:(0,s.$)(h.A.item,K===t&&h.A.focused,_===e&&h.A.selected),...F({item:e,index:t}),children:e},e))):(0,j.jsx)("li",{className:h.A.noResult,children:"No results"})})]})}},8748:(e,t,n)=>{n.d(t,{S:()=>f});var a,s,o=n(4164),l=n(6540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...o}=e;return l.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":n},o),t?l.createElement("title",{id:n},t):null,a||(a=l.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=l.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,d;function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...a}=e;return l.createElement("svg",u({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":n},a),t?l.createElement("title",{id:n},t):null,c||(c=l.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),d||(d=l.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",x="checked_X1o2";var b=n(4848);const f=e=>{let{label:t,checked:n,onChange:a}=e;return(0,b.jsxs)("label",{className:(0,o.$)(h,n&&x),children:[(0,b.jsx)("input",{className:m,type:"checkbox",checked:n,onChange:e=>a(e.target.checked)}),n?(0,b.jsx)(p,{className:g}):(0,b.jsx)(r,{className:g}),t]})}},6868:(e,t,n)=>{n.d(t,{a:()=>x});var a,s=n(4164),o=n(6540);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...s}=e;return o.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":n},s),t?o.createElement("title",{id:n},t):null,a||(a=o.createElement("path",{d:"M480-280q83 0 141.5-58.5T680-480t-58.5-141.5T480-680t-141.5 58.5T280-480t58.5 141.5T480-280m0 200q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))};var r;function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...a}=e;return o.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":n},a),t?o.createElement("title",{id:n},t):null,r||(r=o.createElement("path",{d:"M480-80q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))},u="label_EbSy",p="input_dY0D",h="radio_S55Q",m="checked_h9_f";var g=n(4848);const x=e=>{let{label:t,name:n,value:a,groupValue:o,onChange:l}=e;const r=o===a;return(0,g.jsxs)("label",{className:(0,s.$)(u,r&&m),children:[(0,g.jsx)("input",{className:p,type:"radio",name:n,value:a,checked:r,onChange:e=>{let{target:t}=e;return t.checked&&l(t.value)}}),r?(0,g.jsx)(i,{className:h}):(0,g.jsx)(d,{className:h}),t]})}},2194:(e,t,n)=>{n.d(t,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,t,n)=>{n.d(t,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/b12c624c.27c0514b.js b/assets/js/b12c624c.27c0514b.js deleted file mode 100644 index b1da6d1..0000000 --- a/assets/js/b12c624c.27c0514b.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[882],{1162:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>C,contentTitle:()=>k,default:()=>j,frontMatter:()=>P,metadata:()=>s,toc:()=>y});const s=JSON.parse('{"id":"docs/extras/grouped","title":"Grouped items","description":"","source":"@site/docs/docs/extras/grouped.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/grouped","permalink":"/react-autocomplete/docs/extras/grouped","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/grouped.mdx","tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"docsSidebar","previous":{"title":"Multi-select Dropdown","permalink":"/react-autocomplete/docs/features/multiSelectDropdown"},"next":{"title":"Object items","permalink":"/react-autocomplete/docs/extras/object-items"}}');var a=n(4848),i=n(8453),o=n(267),r=n(8860),l=n(1432);const u="import React, { useState } from 'react';\nimport { useCombobox, autocomplete, mergeGroupedItems } from '@szhsin/react-autocomplete';\nimport GROUPED from '../../data/states-grouped';\n\nconst Grouped = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n\n // It's up to you how to filter items based on the input value\n const groups = value\n ? GROUPED.map(({ initial, states }) => ({\n initial,\n states: states.filter((item) => item.toLowerCase().includes(value.toLowerCase()))\n })).filter((group) => group.states.length > 0)\n : GROUPED;\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n // The main hook always expects a one-dimensional array,\n // and we provide a `mergeGroupedItems` utility to merge the groups.\n // highlight-next-line\n items: mergeGroupedItems({ groups, getItemsInGroup: (group) => group.states }),\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n // highlight-next-line\n let itemIndex = -1;\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {groups.length ? (\n groups.map(({ initial, states }) => (\n \n
  • {initial}
    • \n {states.map((item) => {\n // `itemIndex` should be the index within the flattened array of items.\n // highlight-next-line\n itemIndex++;\n return (\n \n {item}\n \n );\n })}\n     \n ))\n ) : (\n
  • No options
    • \n )}\n \n
    \n );\n};\n\nexport default Grouped;\n",c="export default [\n {\n initial: 'A',\n states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']\n },\n {\n initial: 'C',\n states: ['California', 'Colorado', 'Connecticut']\n },\n {\n initial: 'D',\n states: ['Delaware']\n },\n {\n initial: 'F',\n states: ['Florida']\n },\n {\n initial: 'G',\n states: ['Georgia']\n },\n {\n initial: 'H',\n states: ['Hawaii']\n },\n {\n initial: 'I',\n states: ['Idaho', 'Illinois', 'Indiana', 'Iowa']\n },\n {\n initial: 'K',\n states: ['Kansas', 'Kentucky']\n },\n {\n initial: 'L',\n states: ['Louisiana']\n },\n {\n initial: 'M',\n states: [\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana'\n ]\n },\n {\n initial: 'N',\n states: [\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota'\n ]\n },\n {\n initial: 'O',\n states: ['Ohio', 'Oklahoma', 'Oregon']\n },\n {\n initial: 'P',\n states: ['Pennsylvania']\n },\n {\n initial: 'R',\n states: ['Rhode Island']\n },\n {\n initial: 'S',\n states: ['South Carolina', 'South Dakota']\n },\n {\n initial: 'T',\n states: ['Tennessee', 'Texas']\n },\n {\n initial: 'U',\n states: ['Utah']\n },\n {\n initial: 'V',\n states: ['Vermont', 'Virginia']\n },\n {\n initial: 'W',\n states: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']\n }\n];\n";var d=n(6540),p=n(4164),g=n(6238);const m=Array.isArray,h=e=>{let{groups:t,getItemsInGroup:n}=e;return(m(t)?t:Object.values(t)).reduce(((e,t)=>e.concat(m(t)?t:n?n(t):[])),[])};var x=n(8185),b=n(1236),I=n(7210),f=n(6217);const w=[{initial:"A",states:["Alabama","Alaska","Arizona","Arkansas"]},{initial:"C",states:["California","Colorado","Connecticut"]},{initial:"D",states:["Delaware"]},{initial:"F",states:["Florida"]},{initial:"G",states:["Georgia"]},{initial:"H",states:["Hawaii"]},{initial:"I",states:["Idaho","Illinois","Indiana","Iowa"]},{initial:"K",states:["Kansas","Kentucky"]},{initial:"L",states:["Louisiana"]},{initial:"M",states:["Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana"]},{initial:"N",states:["Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota"]},{initial:"O",states:["Ohio","Oklahoma","Oregon"]},{initial:"P",states:["Pennsylvania"]},{initial:"R",states:["Rhode Island"]},{initial:"S",states:["South Carolina","South Dakota"]},{initial:"T",states:["Tennessee","Texas"]},{initial:"U",states:["Utah"]},{initial:"V",states:["Vermont","Virginia"]},{initial:"W",states:["Washington","West Virginia","Wisconsin","Wyoming"]}];var A=n(7869);const N=()=>{const[e,t]=(0,d.useState)(),[n,s]=(0,d.useState)(),i=e?w.map((t=>{let{initial:n,states:s}=t;return{initial:n,states:s.filter((t=>t.toLowerCase().includes(e.toLowerCase())))}})).filter((e=>e.states.length>0)):w,{getFocusCaptureProps:o,getLabelProps:r,getInputProps:l,getClearProps:u,getToggleProps:c,getListProps:m,getItemProps:N,open:P,focusIndex:k,isInputEmpty:C}=(0,g.B)({items:h({groups:i,getItemsInGroup:e=>e.states}),value:e,onChange:t,selected:n,onSelectChange:s,feature:(0,x.n)({select:!0})});let y=-1;return(0,a.jsxs)("div",{className:A.A.wrap,children:[(0,a.jsx)("label",{className:A.A.label,...r(),...o(),children:"State"}),(0,a.jsxs)("div",{className:A.A.inputWrap,children:[(0,a.jsx)("input",{className:A.A.input,placeholder:"Select or type...",...l()}),!C&&(0,a.jsx)("button",{className:A.A.clear,...u(),children:(0,a.jsx)(b.A,{})}),(0,a.jsx)("button",{className:A.A.toggle,...c(),children:P?(0,a.jsx)(f.A,{}):(0,a.jsx)(I.A,{})})]}),(0,a.jsx)("ul",{className:(0,p.$)(A.A.list,A.A.scroll),...m(),style:{display:P?"block":"none"},children:i.length?i.map((e=>{let{initial:t,states:s}=e;return(0,a.jsxs)(d.Fragment,{children:[(0,a.jsx)("li",{className:A.A.groupHead,children:t}),s.map((e=>(y++,(0,a.jsx)("li",{className:(0,p.$)(A.A.item,k===y&&A.A.focused,n===e&&A.A.selected),...N({item:e,index:y}),children:e},e))))]},t)})):(0,a.jsx)("li",{className:A.A.noResult,children:"No options"})})]})},P={sidebar_position:1},k="Grouped items",C={},y=[];function v(e){const t={h1:"h1",header:"header",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"grouped-items",children:"Grouped items"})}),"\n",(0,a.jsx)(N,{}),"\n",(0,a.jsxs)(o.A,{children:[(0,a.jsx)(r.A,{value:"ts",label:"Grouped.tsx",children:(0,a.jsx)(l.A,{language:"tsx",children:u})}),(0,a.jsx)(r.A,{value:"data",label:"data/states-grouped.ts",children:(0,a.jsx)(l.A,{language:"ts",children:c})})]})]})}function j(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(v,{...e})}):v(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>u});var s=n(5430),a=n(1975),i=n(4444),o=n(9301),r=n(9635);var l=n(8321);const u=e=>(0,s.o)((0,a.d)(e),(e=>{let{id:t,inputRef:n,open:s,setOpen:a}=e;const[l,u]=(0,o.e)(s,a),[c,d,p]=(0,r._)(n);return{getToggleProps:()=>({...(0,i.l0)(t,s),onMouseDown:()=>{l(),c()},onClick:()=>{u(),p()}}),getInputProps:()=>({onBlur:d})}}),(0,l.P)())}}]); \ No newline at end of file diff --git a/assets/js/b12c624c.ff346523.js b/assets/js/b12c624c.ff346523.js new file mode 100644 index 0000000..147edec --- /dev/null +++ b/assets/js/b12c624c.ff346523.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[882],{1162:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>C,contentTitle:()=>k,default:()=>j,frontMatter:()=>P,metadata:()=>s,toc:()=>y});const s=JSON.parse('{"id":"docs/extras/grouped","title":"Grouped items","description":"","source":"@site/docs/docs/extras/grouped.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/grouped","permalink":"/react-autocomplete/docs/extras/grouped","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/grouped.mdx","tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"docsSidebar","previous":{"title":"Multi-select Dropdown","permalink":"/react-autocomplete/docs/features/multiSelectDropdown"},"next":{"title":"Object items","permalink":"/react-autocomplete/docs/extras/object-items"}}');var a=n(4848),i=n(8453),o=n(267),r=n(8860),l=n(1432);const u="import React, { useState } from 'react';\nimport { useCombobox, autocomplete, mergeGroupedItems } from '@szhsin/react-autocomplete';\nimport GROUPED from '../../data/states-grouped';\n\nconst Grouped = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n\n // It's up to you how to filter items based on the input value\n const groups = value\n ? GROUPED.map(({ initial, states }) => ({\n initial,\n states: states.filter((item) => item.toLowerCase().includes(value.toLowerCase()))\n })).filter((group) => group.states.length > 0)\n : GROUPED;\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n // The main hook always expects a one-dimensional array,\n // and we provide a `mergeGroupedItems` utility to merge the groups.\n // highlight-next-line\n items: mergeGroupedItems({ groups, getItemsInGroup: (group) => group.states }),\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n // highlight-next-line\n let itemIndex = -1;\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {groups.length ? (\n groups.map(({ initial, states }) => (\n \n
  • {initial}
    • \n {states.map((item) => {\n // `itemIndex` should be the index within the flattened array of items.\n // highlight-next-line\n itemIndex++;\n return (\n \n {item}\n \n );\n })}\n     \n ))\n ) : (\n
  • No options
    • \n )}\n \n
    \n );\n};\n\nexport default Grouped;\n",c="export default [\n {\n initial: 'A',\n states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas']\n },\n {\n initial: 'C',\n states: ['California', 'Colorado', 'Connecticut']\n },\n {\n initial: 'D',\n states: ['Delaware']\n },\n {\n initial: 'F',\n states: ['Florida']\n },\n {\n initial: 'G',\n states: ['Georgia']\n },\n {\n initial: 'H',\n states: ['Hawaii']\n },\n {\n initial: 'I',\n states: ['Idaho', 'Illinois', 'Indiana', 'Iowa']\n },\n {\n initial: 'K',\n states: ['Kansas', 'Kentucky']\n },\n {\n initial: 'L',\n states: ['Louisiana']\n },\n {\n initial: 'M',\n states: [\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana'\n ]\n },\n {\n initial: 'N',\n states: [\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota'\n ]\n },\n {\n initial: 'O',\n states: ['Ohio', 'Oklahoma', 'Oregon']\n },\n {\n initial: 'P',\n states: ['Pennsylvania']\n },\n {\n initial: 'R',\n states: ['Rhode Island']\n },\n {\n initial: 'S',\n states: ['South Carolina', 'South Dakota']\n },\n {\n initial: 'T',\n states: ['Tennessee', 'Texas']\n },\n {\n initial: 'U',\n states: ['Utah']\n },\n {\n initial: 'V',\n states: ['Vermont', 'Virginia']\n },\n {\n initial: 'W',\n states: ['Washington', 'West Virginia', 'Wisconsin', 'Wyoming']\n }\n];\n";var d=n(6540),p=n(4164),g=n(6238);const m=Array.isArray,h=e=>{let{groups:t,getItemsInGroup:n}=e;return(m(t)?t:Object.values(t)).reduce(((e,t)=>e.concat(m(t)?t:n?n(t):[])),[])};var x=n(8185),b=n(1236),I=n(7210),f=n(6217);const w=[{initial:"A",states:["Alabama","Alaska","Arizona","Arkansas"]},{initial:"C",states:["California","Colorado","Connecticut"]},{initial:"D",states:["Delaware"]},{initial:"F",states:["Florida"]},{initial:"G",states:["Georgia"]},{initial:"H",states:["Hawaii"]},{initial:"I",states:["Idaho","Illinois","Indiana","Iowa"]},{initial:"K",states:["Kansas","Kentucky"]},{initial:"L",states:["Louisiana"]},{initial:"M",states:["Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana"]},{initial:"N",states:["Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota"]},{initial:"O",states:["Ohio","Oklahoma","Oregon"]},{initial:"P",states:["Pennsylvania"]},{initial:"R",states:["Rhode Island"]},{initial:"S",states:["South Carolina","South Dakota"]},{initial:"T",states:["Tennessee","Texas"]},{initial:"U",states:["Utah"]},{initial:"V",states:["Vermont","Virginia"]},{initial:"W",states:["Washington","West Virginia","Wisconsin","Wyoming"]}];var A=n(7869);const N=()=>{const[e,t]=(0,d.useState)(),[n,s]=(0,d.useState)(),i=e?w.map((t=>{let{initial:n,states:s}=t;return{initial:n,states:s.filter((t=>t.toLowerCase().includes(e.toLowerCase())))}})).filter((e=>e.states.length>0)):w,{getFocusCaptureProps:o,getLabelProps:r,getInputProps:l,getClearProps:u,getToggleProps:c,getListProps:m,getItemProps:N,open:P,focusIndex:k,isInputEmpty:C}=(0,g.B)({items:h({groups:i,getItemsInGroup:e=>e.states}),value:e,onChange:t,selected:n,onSelectChange:s,feature:(0,x.n)({select:!0})});let y=-1;return(0,a.jsxs)("div",{className:A.A.wrap,children:[(0,a.jsx)("label",{className:A.A.label,...r(),...o(),children:"State"}),(0,a.jsxs)("div",{className:A.A.inputWrap,children:[(0,a.jsx)("input",{className:A.A.input,placeholder:"Select or type...",...l()}),!C&&(0,a.jsx)("button",{className:A.A.clear,...u(),children:(0,a.jsx)(b.A,{})}),(0,a.jsx)("button",{className:A.A.toggle,...c(),children:P?(0,a.jsx)(f.A,{}):(0,a.jsx)(I.A,{})})]}),(0,a.jsx)("ul",{className:(0,p.$)(A.A.list,A.A.scroll),...m(),style:{display:P?"block":"none"},children:i.length?i.map((e=>{let{initial:t,states:s}=e;return(0,a.jsxs)(d.Fragment,{children:[(0,a.jsx)("li",{className:A.A.groupHead,children:t}),s.map((e=>(y++,(0,a.jsx)("li",{className:(0,p.$)(A.A.item,k===y&&A.A.focused,n===e&&A.A.selected),...N({item:e,index:y}),children:e},e))))]},t)})):(0,a.jsx)("li",{className:A.A.noResult,children:"No options"})})]})},P={sidebar_position:1},k="Grouped items",C={},y=[];function v(e){const t={h1:"h1",header:"header",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"grouped-items",children:"Grouped items"})}),"\n",(0,a.jsx)(N,{}),"\n",(0,a.jsxs)(o.A,{children:[(0,a.jsx)(r.A,{value:"ts",label:"Grouped.tsx",children:(0,a.jsx)(l.A,{language:"tsx",children:u})}),(0,a.jsx)(r.A,{value:"data",label:"data/states-grouped.ts",children:(0,a.jsx)(l.A,{language:"ts",children:c})})]})]})}function j(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(v,{...e})}):v(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>u});var s=n(5430),a=n(1975),i=n(4444),o=n(9301),r=n(9635);var l=n(8321);const u=e=>(0,s.o)((0,a.d)(e),(e=>{let{id:t,inputRef:n,open:s,setOpen:a}=e;const[l,u]=(0,o.e)(s,a),[c,d,p]=(0,r._)(n);return{getToggleProps:()=>({...(0,i.l0)(t,s),onMouseDown:()=>{l(),c()},onClick:()=>{u(),p()}}),getInputProps:()=>({onBlur:d})}}),(0,l.P)())}}]); \ No newline at end of file diff --git a/assets/js/b392da1a.2f301d47.js b/assets/js/b392da1a.2f301d47.js new file mode 100644 index 0000000..3211faa --- /dev/null +++ b/assets/js/b392da1a.2f301d47.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[40],{9561:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>j,contentTitle:()=>k,default:()=>S,frontMatter:()=>T,metadata:()=>a,toc:()=>N});const a=JSON.parse('{"id":"docs/extras/async","title":"Async example","description":"When the list of items is fetched asynchronously, instead of computing them directly in the render body, the items should be stored in a local state, a global state store, or managed by a data-fetching library like React Query.","source":"@site/docs/docs/extras/async.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/async","permalink":"/react-autocomplete/docs/extras/async","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/async.mdx","tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6},"sidebar":"docsSidebar","previous":{"title":"Select-Only","permalink":"/react-autocomplete/docs/extras/select-only"},"next":{"title":"Virtualization","permalink":"/react-autocomplete/docs/extras/virtualization"}}');var s=t(4848),i=t(8453),o=t(267),r=t(8860),l=t(1432);const c="import { useState } from 'react';\nimport { useCombobox, autocompleteLite } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\n// Simulate obtaining data from a remote server\nlet id = 0;\nconst fetchData = (value?: string) => {\n clearTimeout(id);\n if (!value || !value.trim()) return;\n\n return new Promise((res) => {\n id = window.setTimeout(\n () =>\n res(STATES.filter((item) => item.toLowerCase().includes(value.toLowerCase().trim()))),\n 500\n );\n });\n};\n\nconst AsyncExample = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n const [items, setItems] = useState();\n\n const {\n getInputProps,\n getClearProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items: items || [],\n value,\n // highlight-start\n // Whenever the user types in the input, fetch data remotely and update the items.\n onChange: async (newValue) => {\n setValue(newValue);\n setItems(await fetchData(newValue));\n },\n // highlight-end\n selected,\n onSelectChange: setSelected,\n feature: autocompleteLite({\n select: true // or false\n })\n });\n\n return (\n
    \n
    \n \n {!isInputEmpty && }\n
    \n\n {open && items && (\n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n )}\n
    \n );\n};\n\nexport default AsyncExample;\n";var d=t(8785),u=t(6540),m=t(4164),h=t(6238),p=t(1975),g=t(6868),x=t(1236),f=t(2194),y=t(7869),b=t(9627),w=t(9094);let v=0;const A=()=>{const[e,n]=(0,u.useState)("select"),[t,a]=(0,u.useState)(),[i,o]=(0,u.useState)(),[r,l]=(0,u.useState)(),{getInputProps:c,getClearProps:d,getListProps:A,getItemProps:T,open:k,focusIndex:j,isInputEmpty:N,inputRef:C}=(0,h.B)({items:r||[],value:t,onChange:async e=>{a(e),l(await(e=>{if(clearTimeout(v),e&&e.trim())return new Promise((n=>{v=window.setTimeout((()=>n(f.A.filter((n=>n.toLowerCase().includes(e.toLowerCase().trim()))))),500)}))})(e))},selected:i,onSelectChange:o,feature:(0,p.d)({select:"select"===e})}),S=(0,w.i)(k,r||[]),I=e=>{n(e),a(void 0),o(void 0),l(void 0),C.current?.focus()};return(0,s.jsxs)("div",{className:y.A.wrap,children:[(0,s.jsxs)("div",{className:b.A.modes,children:[(0,s.jsx)(g.a,{name:"mode",value:"select",label:"Select mode",groupValue:e,onChange:I}),(0,s.jsx)(g.a,{name:"mode",value:"free",label:"Free mode",groupValue:e,onChange:I})]}),(0,s.jsxs)("div",{className:b.A.inputWrap,children:[(0,s.jsx)("input",{className:y.A.input,placeholder:"Type to search...",...c()}),!N&&(0,s.jsx)("button",{className:(0,m.$)(y.A.iconBtn,b.A.clear),...d(),children:(0,s.jsx)(x.A,{})})]}),k&&r&&(0,s.jsx)("ul",{ref:S,className:(0,m.$)(y.A.list,y.A.scroll),...A(),children:r.length?r.map(((e,n)=>(0,s.jsx)("li",{className:(0,m.$)(y.A.item,j===n&&y.A.focused,i===e&&y.A.selected),...T({item:e,index:n}),children:e},e))):(0,s.jsx)("li",{className:y.A.noResult,children:"No options"})})]})},T={sidebar_position:6},k="Async example",j={},N=[];function C(e){const n={code:"code",h1:"h1",header:"header",p:"p",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"async-example",children:"Async example"})}),"\n",(0,s.jsxs)(n.p,{children:["When the list of items is fetched asynchronously, instead of computing them directly in the render body, the ",(0,s.jsx)(n.code,{children:"items"})," should be stored in a local state, a global state store, or managed by a data-fetching library like React Query."]}),"\n",(0,s.jsx)(A,{}),"\n",(0,s.jsxs)(o.A,{children:[(0,s.jsx)(r.A,{value:"ts",label:"AsyncExample.tsx",children:(0,s.jsx)(l.A,{language:"tsx",children:c})}),(0,s.jsx)(r.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(l.A,{language:"ts",children:d.A})})]})]})}function S(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(C,{...e})}):C(e)}},6868:(e,n,t)=>{t.d(n,{a:()=>x});var a,s=t(4164),i=t(6540);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var n=1;n{let{title:n,titleId:t,...s}=e;return i.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":t},s),n?i.createElement("title",{id:t},n):null,a||(a=i.createElement("path",{d:"M480-280q83 0 141.5-58.5T680-480t-58.5-141.5T480-680t-141.5 58.5T280-480t58.5 141.5T480-280m0 200q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))};var l;function c(){return c=Object.assign?Object.assign.bind():function(e){for(var n=1;n{let{title:n,titleId:t,...a}=e;return i.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":t},a),n?i.createElement("title",{id:t},n):null,l||(l=i.createElement("path",{d:"M480-80q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))},u="label_EbSy",m="input_dY0D",h="radio_S55Q",p="checked_h9_f";var g=t(4848);const x=e=>{let{label:n,name:t,value:a,groupValue:i,onChange:o}=e;const l=i===a;return(0,g.jsxs)("label",{className:(0,s.$)(u,l&&p),children:[(0,g.jsx)("input",{className:m,type:"radio",name:t,value:a,checked:l,onChange:e=>{let{target:n}=e;return n.checked&&o(n.value)}}),l?(0,g.jsx)(r,{className:h}):(0,g.jsx)(d,{className:h}),n]})}},2194:(e,n,t)=>{t.d(n,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},9627:(e,n,t)=>{t.d(n,{A:()=>a});const a={inputWrap:"inputWrap_JKS9",clear:"clear_LtTX",modes:"modes_DURp",sandbox:"sandbox_I8XY"}},8785:(e,n,t)=>{t.d(n,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/b392da1a.afe581c1.js b/assets/js/b392da1a.afe581c1.js deleted file mode 100644 index 6bc4276..0000000 --- a/assets/js/b392da1a.afe581c1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[40],{9561:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>j,contentTitle:()=>k,default:()=>S,frontMatter:()=>T,metadata:()=>a,toc:()=>N});const a=JSON.parse('{"id":"docs/extras/async","title":"Async example","description":"When the list of items is fetched asynchronously, instead of computing them directly in the render body, the items should be stored in a local state, a global state store, or managed by a data-fetching library like React Query.","source":"@site/docs/docs/extras/async.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/async","permalink":"/react-autocomplete/docs/extras/async","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/async.mdx","tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6},"sidebar":"docsSidebar","previous":{"title":"Select-Only","permalink":"/react-autocomplete/docs/extras/select-only"},"next":{"title":"Virtualization","permalink":"/react-autocomplete/docs/extras/virtualization"}}');var s=t(4848),i=t(8453),o=t(267),r=t(8860),l=t(1432);const c="import { useState } from 'react';\nimport { useCombobox, autocompleteLite } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\n// Simulate obtaining data from a remote server\nlet id = 0;\nconst fetchData = (value?: string) => {\n clearTimeout(id);\n if (!value || !value.trim()) return;\n\n return new Promise((res) => {\n id = window.setTimeout(\n () =>\n res(STATES.filter((item) => item.toLowerCase().includes(value.toLowerCase().trim()))),\n 500\n );\n });\n};\n\nconst AsyncExample = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n const [items, setItems] = useState();\n\n const {\n getInputProps,\n getClearProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items: items || [],\n value,\n // highlight-start\n // Whenever the user types in the input, fetch data remotely and update the items.\n onChange: async (newValue) => {\n setValue(newValue);\n setItems(await fetchData(newValue));\n },\n // highlight-end\n selected,\n onSelectChange: setSelected,\n feature: autocompleteLite({\n select: true // or false\n })\n });\n\n return (\n
    \n
    \n \n {!isInputEmpty && }\n
    \n\n {open && items && (\n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n )}\n
    \n );\n};\n\nexport default AsyncExample;\n";var d=t(8785),u=t(6540),m=t(4164),h=t(6238),p=t(1975),g=t(6868),x=t(1236),f=t(2194),y=t(7869),b=t(9627),w=t(9094);let v=0;const A=()=>{const[e,n]=(0,u.useState)("select"),[t,a]=(0,u.useState)(),[i,o]=(0,u.useState)(),[r,l]=(0,u.useState)(),{getInputProps:c,getClearProps:d,getListProps:A,getItemProps:T,open:k,focusIndex:j,isInputEmpty:N,inputRef:C}=(0,h.B)({items:r||[],value:t,onChange:async e=>{a(e),l(await(e=>{if(clearTimeout(v),e&&e.trim())return new Promise((n=>{v=window.setTimeout((()=>n(f.A.filter((n=>n.toLowerCase().includes(e.toLowerCase().trim()))))),500)}))})(e))},selected:i,onSelectChange:o,feature:(0,p.d)({select:"select"===e})}),S=(0,w.i)(k,r||[]),I=e=>{n(e),a(void 0),o(void 0),l(void 0),C.current?.focus()};return(0,s.jsxs)("div",{className:y.A.wrap,children:[(0,s.jsxs)("div",{className:b.A.modes,children:[(0,s.jsx)(g.a,{name:"mode",value:"select",label:"Select mode",groupValue:e,onChange:I}),(0,s.jsx)(g.a,{name:"mode",value:"free",label:"Free mode",groupValue:e,onChange:I})]}),(0,s.jsxs)("div",{className:b.A.inputWrap,children:[(0,s.jsx)("input",{className:y.A.input,placeholder:"Type to search...",...c()}),!N&&(0,s.jsx)("button",{className:(0,m.$)(y.A.iconBtn,b.A.clear),...d(),children:(0,s.jsx)(x.A,{})})]}),k&&r&&(0,s.jsx)("ul",{ref:S,className:(0,m.$)(y.A.list,y.A.scroll),...A(),children:r.length?r.map(((e,n)=>(0,s.jsx)("li",{className:(0,m.$)(y.A.item,j===n&&y.A.focused,i===e&&y.A.selected),...T({item:e,index:n}),children:e},e))):(0,s.jsx)("li",{className:y.A.noResult,children:"No options"})})]})},T={sidebar_position:6},k="Async example",j={},N=[];function C(e){const n={code:"code",h1:"h1",header:"header",p:"p",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"async-example",children:"Async example"})}),"\n",(0,s.jsxs)(n.p,{children:["When the list of items is fetched asynchronously, instead of computing them directly in the render body, the ",(0,s.jsx)(n.code,{children:"items"})," should be stored in a local state, a global state store, or managed by a data-fetching library like React Query."]}),"\n",(0,s.jsx)(A,{}),"\n",(0,s.jsxs)(o.A,{children:[(0,s.jsx)(r.A,{value:"ts",label:"AsyncExample.tsx",children:(0,s.jsx)(l.A,{language:"tsx",children:c})}),(0,s.jsx)(r.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(l.A,{language:"ts",children:d.A})})]})]})}function S(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(C,{...e})}):C(e)}},6868:(e,n,t)=>{t.d(n,{a:()=>x});var a,s=t(4164),i=t(6540);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var n=1;n{let{title:n,titleId:t,...s}=e;return i.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":t},s),n?i.createElement("title",{id:t},n):null,a||(a=i.createElement("path",{d:"M480-280q83 0 141.5-58.5T680-480t-58.5-141.5T480-680t-141.5 58.5T280-480t58.5 141.5T480-280m0 200q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))};var l;function c(){return c=Object.assign?Object.assign.bind():function(e){for(var n=1;n{let{title:n,titleId:t,...a}=e;return i.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 -960 960 960","aria-labelledby":t},a),n?i.createElement("title",{id:t},n):null,l||(l=i.createElement("path",{d:"M480-80q-83 0-156-31.5T197-197t-85.5-127T80-480t31.5-156T197-763t127-85.5T480-880t156 31.5T763-763t85.5 127T880-480t-31.5 156T763-197t-127 85.5T480-80m0-80q134 0 227-93t93-227-93-227-227-93-227 93-93 227 93 227 227 93m0-320"})))},u="label_EbSy",m="input_dY0D",h="radio_S55Q",p="checked_h9_f";var g=t(4848);const x=e=>{let{label:n,name:t,value:a,groupValue:i,onChange:o}=e;const l=i===a;return(0,g.jsxs)("label",{className:(0,s.$)(u,l&&p),children:[(0,g.jsx)("input",{className:m,type:"radio",name:t,value:a,checked:l,onChange:e=>{let{target:n}=e;return n.checked&&o(n.value)}}),l?(0,g.jsx)(r,{className:h}):(0,g.jsx)(d,{className:h}),n]})}},2194:(e,n,t)=>{t.d(n,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},9627:(e,n,t)=>{t.d(n,{A:()=>a});const a={inputWrap:"inputWrap_JKS9",clear:"clear_LtTX",modes:"modes_DURp",sandbox:"sandbox_I8XY"}},8785:(e,n,t)=>{t.d(n,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/cb4cf1e8.07b385a9.js b/assets/js/cb4cf1e8.07b385a9.js new file mode 100644 index 0000000..6074e65 --- /dev/null +++ b/assets/js/cb4cf1e8.07b385a9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[775],{7965:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>y,contentTitle:()=>C,default:()=>k,frontMatter:()=>v,metadata:()=>s,toc:()=>S});const s=JSON.parse('{"id":"docs/extras/disabled-items","title":"Disabled items","description":"Items can be disabled, preventing them from being interacted with or selected.","source":"@site/docs/docs/extras/disabled-items.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/disabled-items","permalink":"/react-autocomplete/docs/extras/disabled-items","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/disabled-items.mdx","tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3},"sidebar":"docsSidebar","previous":{"title":"Object items","permalink":"/react-autocomplete/docs/extras/object-items"},"next":{"title":"Action items","permalink":"/react-autocomplete/docs/extras/action-items"}}');var i=n(4848),o=n(8453),r=n(267),a=n(8860),l=n(1432);const d="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport FRUITS from '../../data/fruits';\n\n// highlight-next-line\nconst isItemDisabled = (item: string) => item.includes('berry');\n\nconst DisabledItems = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n const items = value\n ? FRUITS.filter((item) => item.toLowerCase().includes(value.toLowerCase()))\n : FRUITS;\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n // highlight-next-line\n isItemDisabled,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n
    \n );\n};\n\nexport default DisabledItems;\n";var c=n(1516),p=n(6540),u=n(4164),m=n(6238),b=n(8185),g=n(1236),h=n(7210),x=n(6217),f=n(8155),A=n(7869),P=n(9094);const j=e=>e.includes("berry"),I=()=>{const[e,t]=(0,p.useState)(),[n,s]=(0,p.useState)(),o=e?f.A.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):f.A,{getFocusCaptureProps:r,getLabelProps:a,getInputProps:l,getClearProps:d,getToggleProps:c,getListProps:I,getItemProps:v,open:C,focusIndex:y,isInputEmpty:S}=(0,m.B)({items:o,isItemDisabled:j,value:e,onChange:t,selected:n,onSelectChange:s,feature:(0,b.n)({select:!0})}),w=(0,P.i)(C,o);return(0,i.jsxs)("div",{className:A.A.wrap,children:[(0,i.jsx)("label",{className:A.A.label,...a(),...r(),children:"Fruit (no berries)"}),(0,i.jsxs)("div",{className:A.A.inputWrap,children:[(0,i.jsx)("input",{className:A.A.input,placeholder:"Select or type...",...l()}),!S&&(0,i.jsx)("button",{className:A.A.clear,...d(),children:(0,i.jsx)(g.A,{})}),(0,i.jsx)("button",{className:A.A.toggle,...c(),children:C?(0,i.jsx)(x.A,{}):(0,i.jsx)(h.A,{})})]}),(0,i.jsx)("ul",{ref:w,className:(0,u.$)(A.A.list,A.A.noScroll),...I(),style:{display:C?"block":"none"},children:o.length?o.map(((e,t)=>(0,i.jsx)("li",{className:(0,u.$)(A.A.item,y===t&&A.A.focused,n===e&&A.A.selected,j(e)&&A.A.disabled),...v({item:e,index:t}),children:e},e))):(0,i.jsx)("li",{className:A.A.noResult,children:"No options"})})]})},v={sidebar_position:3},C="Disabled items",y={},S=[];function w(e){const t={h1:"h1",header:"header",p:"p",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"disabled-items",children:"Disabled items"})}),"\n",(0,i.jsx)(t.p,{children:"Items can be disabled, preventing them from being interacted with or selected."}),"\n",(0,i.jsx)(I,{}),"\n",(0,i.jsxs)(r.A,{children:[(0,i.jsx)(a.A,{value:"ts",label:"DisabledItems.tsx",children:(0,i.jsx)(l.A,{language:"tsx",children:d})}),(0,i.jsx)(a.A,{value:"data",label:"data/fruits.ts",children:(0,i.jsx)(l.A,{language:"ts",children:c.A})})]})]})}function k(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(w,{...e})}):w(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>d});var s=n(5430),i=n(1975),o=n(4444),r=n(9301),a=n(9635);var l=n(8321);const d=e=>(0,s.o)((0,i.d)(e),(e=>{let{id:t,inputRef:n,open:s,setOpen:i}=e;const[l,d]=(0,r.e)(s,i),[c,p,u]=(0,a._)(n);return{getToggleProps:()=>({...(0,o.l0)(t,s),onMouseDown:()=>{l(),c()},onClick:()=>{d(),u()}}),getInputProps:()=>({onBlur:p})}}),(0,l.P)())},8155:(e,t,n)=>{n.d(t,{A:()=>s});const s=["Apple","Banana","Blueberry","Cherry","Grape","Pineapple","Strawberry"]},1516:(e,t,n)=>{n.d(t,{A:()=>s});const s="export default ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Grape', 'Pineapple', 'Strawberry'];\n"}}]); \ No newline at end of file diff --git a/assets/js/cb4cf1e8.58a346e1.js b/assets/js/cb4cf1e8.58a346e1.js deleted file mode 100644 index f5ff009..0000000 --- a/assets/js/cb4cf1e8.58a346e1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[775],{7965:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>y,contentTitle:()=>C,default:()=>k,frontMatter:()=>v,metadata:()=>s,toc:()=>S});const s=JSON.parse('{"id":"docs/extras/disabled-items","title":"Disabled items","description":"Items can be disabled, preventing them from being interacted with or selected.","source":"@site/docs/docs/extras/disabled-items.mdx","sourceDirName":"docs/extras","slug":"/docs/extras/disabled-items","permalink":"/react-autocomplete/docs/extras/disabled-items","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/extras/disabled-items.mdx","tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3},"sidebar":"docsSidebar","previous":{"title":"Object items","permalink":"/react-autocomplete/docs/extras/object-items"},"next":{"title":"Action items","permalink":"/react-autocomplete/docs/extras/action-items"}}');var i=n(4848),o=n(8453),r=n(267),a=n(8860),l=n(1432);const d="import { useState } from 'react';\nimport { useCombobox, autocomplete } from '@szhsin/react-autocomplete';\nimport FRUITS from '../../data/fruits';\n\n// highlight-next-line\nconst isItemDisabled = (item: string) => item.includes('berry');\n\nconst DisabledItems = () => {\n const [value, setValue] = useState();\n const [selected, setSelected] = useState();\n const items = value\n ? FRUITS.filter((item) => item.toLowerCase().includes(value.toLowerCase()))\n : FRUITS;\n\n const {\n getFocusCaptureProps,\n getLabelProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n open,\n focusIndex,\n isInputEmpty\n } = useCombobox({\n items,\n // highlight-next-line\n isItemDisabled,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n feature: autocomplete({ select: true })\n });\n\n return (\n
    \n \n\n
    \n \n {!isInputEmpty && }\n \n
    \n\n \n {items.length ? (\n items.map((item, index) => (\n \n {item}\n \n ))\n ) : (\n
  • No options
    • \n )}\n \n
    \n );\n};\n\nexport default DisabledItems;\n";var c=n(1516),p=n(6540),u=n(4164),m=n(6238),b=n(8185),g=n(1236),h=n(7210),x=n(6217),f=n(8155),A=n(7869),P=n(9094);const j=e=>e.includes("berry"),I=()=>{const[e,t]=(0,p.useState)(),[n,s]=(0,p.useState)(),o=e?f.A.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):f.A,{getFocusCaptureProps:r,getLabelProps:a,getInputProps:l,getClearProps:d,getToggleProps:c,getListProps:I,getItemProps:v,open:C,focusIndex:y,isInputEmpty:S}=(0,m.B)({items:o,isItemDisabled:j,value:e,onChange:t,selected:n,onSelectChange:s,feature:(0,b.n)({select:!0})}),w=(0,P.i)(C,o);return(0,i.jsxs)("div",{className:A.A.wrap,children:[(0,i.jsx)("label",{className:A.A.label,...a(),...r(),children:"Fruit (no berries)"}),(0,i.jsxs)("div",{className:A.A.inputWrap,children:[(0,i.jsx)("input",{className:A.A.input,placeholder:"Select or type...",...l()}),!S&&(0,i.jsx)("button",{className:A.A.clear,...d(),children:(0,i.jsx)(g.A,{})}),(0,i.jsx)("button",{className:A.A.toggle,...c(),children:C?(0,i.jsx)(x.A,{}):(0,i.jsx)(h.A,{})})]}),(0,i.jsx)("ul",{ref:w,className:(0,u.$)(A.A.list,A.A.noScroll),...I(),style:{display:C?"block":"none"},children:o.length?o.map(((e,t)=>(0,i.jsx)("li",{className:(0,u.$)(A.A.item,y===t&&A.A.focused,n===e&&A.A.selected,j(e)&&A.A.disabled),...v({item:e,index:t}),children:e},e))):(0,i.jsx)("li",{className:A.A.noResult,children:"No options"})})]})},v={sidebar_position:3},C="Disabled items",y={},S=[];function w(e){const t={h1:"h1",header:"header",p:"p",...(0,o.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.header,{children:(0,i.jsx)(t.h1,{id:"disabled-items",children:"Disabled items"})}),"\n",(0,i.jsx)(t.p,{children:"Items can be disabled, preventing them from being interacted with or selected."}),"\n",(0,i.jsx)(I,{}),"\n",(0,i.jsxs)(r.A,{children:[(0,i.jsx)(a.A,{value:"ts",label:"DisabledItems.tsx",children:(0,i.jsx)(l.A,{language:"tsx",children:d})}),(0,i.jsx)(a.A,{value:"data",label:"data/fruits.ts",children:(0,i.jsx)(l.A,{language:"ts",children:c.A})})]})]})}function k(e={}){const{wrapper:t}={...(0,o.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(w,{...e})}):w(e)}},8185:(e,t,n)=>{n.d(t,{n:()=>d});var s=n(5430),i=n(1975),o=n(4444),r=n(9301),a=n(9635);var l=n(8321);const d=e=>(0,s.o)((0,i.d)(e),(e=>{let{id:t,inputRef:n,open:s,setOpen:i}=e;const[l,d]=(0,r.e)(s,i),[c,p,u]=(0,a._)(n);return{getToggleProps:()=>({...(0,o.l0)(t,s),onMouseDown:()=>{l(),c()},onClick:()=>{d(),u()}}),getInputProps:()=>({onBlur:p})}}),(0,l.P)())},8155:(e,t,n)=>{n.d(t,{A:()=>s});const s=["Apple","Banana","Blueberry","Cherry","Grape","Pineapple","Strawberry"]},1516:(e,t,n)=>{n.d(t,{A:()=>s});const s="export default ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Grape', 'Pineapple', 'Strawberry'];\n"}}]); \ No newline at end of file diff --git a/assets/js/common.156d2fcd.js b/assets/js/common.156d2fcd.js new file mode 100644 index 0000000..9238153 --- /dev/null +++ b/assets/js/common.156d2fcd.js @@ -0,0 +1 @@ +(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[76],{7210:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var r,o,s=n(6540);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...l}=e;return s.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down",viewBox:"0 0 24 24","aria-labelledby":n},l),t?s.createElement("title",{id:n},t):null,r||(r=s.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=s.createElement("path",{d:"m6 9 6 6 6-6"})))}},6217:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var r,o,s=n(6540);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...l}=e;return s.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-chevron-up",viewBox:"0 0 24 24","aria-labelledby":n},l),t?s.createElement("title",{id:n},t):null,r||(r=s.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=s.createElement("path",{d:"m6 15 6-6 6 6"})))}},3678:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var r,o,s=n(6540);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...l}=e;return s.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-external-link",viewBox:"0 0 24 24","aria-labelledby":n},l),t?s.createElement("title",{id:n},t):null,r||(r=s.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=s.createElement("path",{d:"M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6M11 13l9-9M15 4h5v5"})))}},1236:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var r,o,s=n(6540);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t{let{title:t,titleId:n,...l}=e;return s.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-x",viewBox:"0 0 24 24","aria-labelledby":n},l),t?s.createElement("title",{id:n},t):null,r||(r=s.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=s.createElement("path",{d:"M18 6 6 18M6 6l12 12"})))}},4444:(e,t,n)=>{"use strict";n.d(t,{D$:()=>a,Kf:()=>r,OX:()=>s,g4:()=>o,l0:()=>l});const r=-1,o=(e,t)=>e===t,s=(e,t)=>e&&e+t,a={tabIndex:-1,type:"button"},l=(e,t)=>({...a,"aria-expanded":t,"aria-controls":s(e,"l")})},1975:(e,t,n)=>{"use strict";n.d(t,{d:()=>a});var r=n(4444),o=n(9635);const s=e=>e?.scrollIntoView({block:"nearest"}),a=function(e){let{select:t,rovingText:n=!t,deselectOnClear:a=!0,deselectOnChange:l=!0,closeOnSelect:c=!0}=void 0===e?{}:e;return e=>{let{getItemValue:i,onSelectChange:u,isItemSelected:d,isItemDisabled:p,isItemAction:m,onAction:b,selected:f,value:h,onChange:g,tmpValue:v,setTmpValue:k,focusIndex:w,setFocusIndex:y,open:x,setOpen:_,inputRef:j,items:B,id:C}=e;var I;const[E,N,L]=(0,o._)(j),A=null!=(I=v||h)?I:Array.isArray(f)?"":i(f),S=B[w],T=(0,r.OX)(C,"l"),V=e=>{if(m?.(e))return b?.(e),!0;const n=i(e);t||g(n);const r=n.length;j.current?.setSelectionRange(r,r),u(e)},O=e=>{y(r.Kf),k(),(e||c)&&(_(!1),t&&g())},D={onMouseDown:E,onMouseUp:L};return{isInputEmpty:!A,getFocusCaptureProps:()=>D,getClearProps:()=>({...r.D$,...D,onClick:()=>{k(),y(r.Kf),g(""),a&&u()}}),getListProps:()=>({...D,id:T,role:"listbox"}),getItemProps:e=>{let{item:n,index:o}=e;return{id:(0,r.OX)(C,o),role:"option","aria-selected":t?d(n):o===w,ref:o===w?s:void 0,onClick:()=>!p?.(n)&&O(V(n)),onPointerMove:()=>!p?.(n)&&y(o)}},getInputProps:()=>({type:"text",role:"combobox",autoComplete:"off","aria-autocomplete":"list","aria-expanded":x,"aria-controls":T,"aria-activedescendant":w>=0?(0,r.OX)(C,w):void 0,ref:j,value:A,onChange:e=>{_(!0),y(r.Kf),k();const n=e.target.value;g(n),(!t&&l||a&&!n)&&u()},onBlur:()=>{N()||(t||g(A),O(!0))},onKeyDown:e=>{switch(e.key){case"ArrowUp":case"ArrowDown":e.preventDefault(),x?(e=>{const t=n?-1:0;let r,o=w,s=0;const a=B.length;for(;e?++o>=a&&(o=t):--o=a)return;y(o),n&&k(i(r))})("ArrowUp"!=e.key):_(!0);break;case"Enter":x&&(S?(e.preventDefault(),O(V(S))):t||O(!0));break;case"Escape":x?O(!0):(g(""),a&&u())}},onMouseDown:e=>e.stopPropagation(),onClick:()=>_(!0)})}}}},8321:(e,t,n)=>{"use strict";n.d(t,{P:()=>o});var r=n(4444);const o=()=>e=>{let{id:t}=e;const n=(0,r.OX)(t,"i"),o=(0,r.OX)(t,"a");return{getLabelProps:()=>({id:o,htmlFor:n}),getInputProps:()=>({id:n}),getListProps:()=>({"aria-labelledby":o})}}},8355:(e,t,n)=>{"use strict";n.d(t,{m:()=>l});var r=n(6540);let o=0;const s=r.useId||(()=>{const[e,t]=(0,r.useState)();return(0,r.useEffect)((()=>t(++o)),[]),e&&`szh-ac${e}-`});var a=n(4444);const l=e=>{let{onChange:t,feature:n,isItemSelected:o,inputRef:l,getItemValue:c,...i}=e;const u=(0,r.useRef)(null),[d,p]=(0,r.useState)(),[m,b]=(0,r.useState)(!1),[f,h]=(0,r.useState)(a.Kf),g={isItemSelected:o,inputRef:l||u,focusIndex:f,setFocusIndex:h,open:m,setOpen:b},v=n({id:s(),tmpValue:d,setTmpValue:p,onChange:e=>i.value!=e&&t?.(e),getItemValue:e=>null==e?"":c?c(e):e.toString(),...i,...g});return{...g,...v}}},6238:(e,t,n)=>{"use strict";n.d(t,{B:()=>s});var r=n(4444),o=n(8355);const s=e=>{let{isEqual:t=r.g4,selected:n,onSelectChange:s,flipOnSelect:a,...l}=e;return(0,o.m)({...l,selected:n,isEqual:t,isItemSelected:e=>t(e,n),onSelectChange:e=>{t(e,n)?a&&s?.():s?.(e)}})}},9635:(e,t,n)=>{"use strict";n.d(t,{_:()=>o});var r=n(6082);const o=e=>{const t=(0,r.d)({});return[()=>{t.a=1},()=>{if(t.a)return t.a=0,e.current?.focus(),!0},()=>{t.a=0,e.current?.focus()}]}},6082:(e,t,n)=>{"use strict";n.d(t,{d:()=>o});var r=n(6540);const o=e=>(0,r.useState)(e)[0]},9301:(e,t,n)=>{"use strict";n.d(t,{e:()=>o});var r=n(6082);const o=(e,t)=>{const n=(0,r.d)({});return[()=>n.a=e,()=>{n.a?n.a=0:t(!0)}]}},5430:(e,t,n)=>{"use strict";n.d(t,{o:()=>o});const r=(e,t)=>{const n={...e};return Object.entries(t).forEach((t=>{let[o,s]=t;if("function"==typeof s){const t=e[o];n[o]=t?function(){const e=t(...arguments),n=s(...arguments);if("object"==typeof e)return r(e,n)}:s}else n[o]=s})),n},o=function(){for(var e=arguments.length,t=new Array(e),n=0;nt.reduce(((t,n)=>r(t,n(e))),{})}},1432:(e,t,n)=>{"use strict";n.d(t,{A:()=>R});var r=n(6540),o=n(2303),s=n(4164),a=n(5293),l=n(6342);function c(){const{prism:e}=(0,l.p)(),{colorMode:t}=(0,a.G)(),n=e.theme,r=e.darkTheme||n;return"dark"===t?r:n}var i=n(7559),u=n(8426),d=n.n(u);const p=/title=(?["'])(?.*?)\1/,m=/\{(?<range>[\d,-]+)\}/,b={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},f={...b,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},h=Object.keys(b);function g(e,t){const n=e.map((e=>{const{start:n,end:r}=f[e];return`(?:${n}\\s*(${t.flatMap((e=>[e.line,e.block?.start,e.block?.end].filter(Boolean))).join("|")})\\s*${r})`})).join("|");return new RegExp(`^\\s*(?:${n})\\s*$`)}function v(e,t){let n=e.replace(/\n$/,"");const{language:r,magicComments:o,metastring:s}=t;if(s&&m.test(s)){const e=s.match(m).groups.range;if(0===o.length)throw new Error(`A highlight range has been given in code block's metastring (\`\`\` ${s}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);const t=o[0].className,r=d()(e).filter((e=>e>0)).map((e=>[e-1,[t]]));return{lineClassNames:Object.fromEntries(r),code:n}}if(void 0===r)return{lineClassNames:{},code:n};const a=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return g(["js","jsBlock"],t);case"jsx":case"tsx":return g(["js","jsBlock","jsx"],t);case"html":return g(["js","jsBlock","html"],t);case"python":case"py":case"bash":return g(["bash"],t);case"markdown":case"md":return g(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return g(["tex"],t);case"lua":case"haskell":case"sql":return g(["lua"],t);case"wasm":return g(["wasm"],t);case"vb":case"vba":case"visual-basic":return g(["vb","rem"],t);case"vbnet":return g(["vbnet","rem"],t);case"batch":return g(["rem"],t);case"basic":return g(["rem","f90"],t);case"fsharp":return g(["js","ml"],t);case"ocaml":case"sml":return g(["ml"],t);case"fortran":return g(["f90"],t);case"cobol":return g(["cobol"],t);default:return g(h,t)}}(r,o),l=n.split("\n"),c=Object.fromEntries(o.map((e=>[e.className,{start:0,range:""}]))),i=Object.fromEntries(o.filter((e=>e.line)).map((e=>{let{className:t,line:n}=e;return[n,t]}))),u=Object.fromEntries(o.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.start,t]}))),p=Object.fromEntries(o.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.end,t]})));for(let d=0;d<l.length;){const e=l[d].match(a);if(!e){d+=1;continue}const t=e.slice(1).find((e=>void 0!==e));i[t]?c[i[t]].range+=`${d},`:u[t]?c[u[t]].start=d:p[t]&&(c[p[t]].range+=`${c[p[t]].start}-${d-1},`),l.splice(d,1)}n=l.join("\n");const b={};return Object.entries(c).forEach((e=>{let[t,{range:n}]=e;d()(n).forEach((e=>{b[e]??=[],b[e].push(t)}))})),{lineClassNames:b,code:n}}const k={codeBlockContainer:"codeBlockContainer_Ckt0"};var w=n(4848);function y(e){let{as:t,...n}=e;const r=function(e){const t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach((e=>{let[r,o]=e;const s=t[r];s&&"string"==typeof o&&(n[s]=o)})),n}(c());return(0,w.jsx)(t,{...n,style:r,className:(0,s.A)(n.className,k.codeBlockContainer,i.G.common.codeBlock)})}const x={codeBlockContent:"codeBlockContent_biex",codeBlockTitle:"codeBlockTitle_Ktv7",codeBlock:"codeBlock_bY9V",codeBlockStandalone:"codeBlockStandalone_MEMb",codeBlockLines:"codeBlockLines_e6Vv",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_o6Pm",buttonGroup:"buttonGroup__atx"};function _(e){let{children:t,className:n}=e;return(0,w.jsx)(y,{as:"pre",tabIndex:0,className:(0,s.A)(x.codeBlockStandalone,"thin-scrollbar",n),children:(0,w.jsx)("code",{className:x.codeBlockLines,children:t})})}var j=n(9532);const B={attributes:!0,characterData:!0,childList:!0,subtree:!0};function C(e,t){const[n,o]=(0,r.useState)(),s=(0,r.useCallback)((()=>{o(e.current?.closest("[role=tabpanel][hidden]"))}),[e,o]);(0,r.useEffect)((()=>{s()}),[s]),function(e,t,n){void 0===n&&(n=B);const o=(0,j._q)(t),s=(0,j.Be)(n);(0,r.useEffect)((()=>{const t=new MutationObserver(o);return e&&t.observe(e,s),()=>t.disconnect()}),[e,o,s])}(n,(e=>{e.forEach((e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),s())}))}),{attributes:!0,characterData:!1,childList:!1,subtree:!1})}var I=n(1765);const E={codeLine:"codeLine_lJS_",codeLineNumber:"codeLineNumber_Tfdd",codeLineContent:"codeLineContent_feaV"};function N(e){let{line:t,classNames:n,showLineNumbers:r,getLineProps:o,getTokenProps:a}=e;1===t.length&&"\n"===t[0].content&&(t[0].content="");const l=o({line:t,className:(0,s.A)(n,r&&E.codeLine)}),c=t.map(((e,t)=>(0,w.jsx)("span",{...a({token:e})},t)));return(0,w.jsxs)("span",{...l,children:[r?(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)("span",{className:E.codeLineNumber}),(0,w.jsx)("span",{className:E.codeLineContent,children:c})]}):c,(0,w.jsx)("br",{})]})}var L=n(1312);function A(e){return(0,w.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,w.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function S(e){return(0,w.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,w.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}const T={copyButtonCopied:"copyButtonCopied_obH4",copyButtonIcons:"copyButtonIcons_eSgA",copyButtonIcon:"copyButtonIcon_y97N",copyButtonSuccessIcon:"copyButtonSuccessIcon_LjdS"};function V(e){let{code:t,className:n}=e;const[o,a]=(0,r.useState)(!1),l=(0,r.useRef)(void 0),c=(0,r.useCallback)((()=>{!function(e,t){let{target:n=document.body}=void 0===t?{}:t;if("string"!=typeof e)throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);const r=document.createElement("textarea"),o=document.activeElement;r.value=e,r.setAttribute("readonly",""),r.style.contain="strict",r.style.position="absolute",r.style.left="-9999px",r.style.fontSize="12pt";const s=document.getSelection(),a=s.rangeCount>0&&s.getRangeAt(0);n.append(r),r.select(),r.selectionStart=0,r.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch{}r.remove(),a&&(s.removeAllRanges(),s.addRange(a)),o&&o.focus()}(t),a(!0),l.current=window.setTimeout((()=>{a(!1)}),1e3)}),[t]);return(0,r.useEffect)((()=>()=>window.clearTimeout(l.current)),[]),(0,w.jsx)("button",{type:"button","aria-label":o?(0,L.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,L.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,L.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,s.A)("clean-btn",n,T.copyButton,o&&T.copyButtonCopied),onClick:c,children:(0,w.jsxs)("span",{className:T.copyButtonIcons,"aria-hidden":"true",children:[(0,w.jsx)(A,{className:T.copyButtonIcon}),(0,w.jsx)(S,{className:T.copyButtonSuccessIcon})]})})}function O(e){return(0,w.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,w.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}const D={wordWrapButtonIcon:"wordWrapButtonIcon_Bwma",wordWrapButtonEnabled:"wordWrapButtonEnabled_EoeP"};function M(e){let{className:t,onClick:n,isEnabled:r}=e;const o=(0,L.T)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,w.jsx)("button",{type:"button",onClick:n,className:(0,s.A)("clean-btn",t,r&&D.wordWrapButtonEnabled),"aria-label":o,title:o,children:(0,w.jsx)(O,{className:D.wordWrapButtonIcon,"aria-hidden":"true"})})}function P(e){let{children:t,className:n="",metastring:o,title:a,showLineNumbers:i,language:u}=e;const{prism:{defaultLanguage:d,magicComments:m}}=(0,l.p)(),b=function(e){return e?.toLowerCase()}(u??function(e){const t=e.split(" ").find((e=>e.startsWith("language-")));return t?.replace(/language-/,"")}(n)??d),f=c(),h=function(){const[e,t]=(0,r.useState)(!1),[n,o]=(0,r.useState)(!1),s=(0,r.useRef)(null),a=(0,r.useCallback)((()=>{const n=s.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t((e=>!e))}),[s,e]),l=(0,r.useCallback)((()=>{const{scrollWidth:e,clientWidth:t}=s.current,n=e>t||s.current.querySelector("code").hasAttribute("style");o(n)}),[s]);return C(s,l),(0,r.useEffect)((()=>{l()}),[e,l]),(0,r.useEffect)((()=>(window.addEventListener("resize",l,{passive:!0}),()=>{window.removeEventListener("resize",l)})),[l]),{codeBlockRef:s,isEnabled:e,isCodeScrollable:n,toggle:a}}(),g=function(e){return e?.match(p)?.groups.title??""}(o)||a,{lineClassNames:k,code:_}=v(t,{metastring:o,language:b,magicComments:m}),j=i??function(e){return Boolean(e?.includes("showLineNumbers"))}(o);return(0,w.jsxs)(y,{as:"div",className:(0,s.A)(n,b&&!n.includes(`language-${b}`)&&`language-${b}`),children:[g&&(0,w.jsx)("div",{className:x.codeBlockTitle,children:g}),(0,w.jsxs)("div",{className:x.codeBlockContent,children:[(0,w.jsx)(I.f4,{theme:f,code:_,language:b??"text",children:e=>{let{className:t,style:n,tokens:r,getLineProps:o,getTokenProps:a}=e;return(0,w.jsx)("pre",{tabIndex:0,ref:h.codeBlockRef,className:(0,s.A)(t,x.codeBlock,"thin-scrollbar"),style:n,children:(0,w.jsx)("code",{className:(0,s.A)(x.codeBlockLines,j&&x.codeBlockLinesWithNumbering),children:r.map(((e,t)=>(0,w.jsx)(N,{line:e,getLineProps:o,getTokenProps:a,classNames:k[t],showLineNumbers:j},t)))})})}}),(0,w.jsxs)("div",{className:x.buttonGroup,children:[(h.isEnabled||h.isCodeScrollable)&&(0,w.jsx)(M,{className:x.codeButton,onClick:()=>h.toggle(),isEnabled:h.isEnabled}),(0,w.jsx)(V,{className:x.codeButton,code:_})]})]})]})}function R(e){let{children:t,...n}=e;const s=(0,o.A)(),a=function(e){return r.Children.toArray(e).some((e=>(0,r.isValidElement)(e)))?e:Array.isArray(e)?e.join(""):e}(t),l="string"==typeof a?P:_;return(0,w.jsx)(l,{...n,children:a},String(s))}},8860:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);var r=n(4164);const o={tabItem:"tabItem_s4ch"};var s=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.A)(o.tabItem,a),hidden:n,children:t})}},267:(e,t,n)=>{"use strict";n.d(t,{A:()=>_});var r=n(6540),o=n(4164),s=n(3104),a=n(6347),l=n(205),c=n(7485),i=n(1682),u=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:o}}=e;return{value:t,label:n,attributes:r,default:o}}))}(n);return function(e){const t=(0,i.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const o=(0,a.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,c.aZ)(s),(0,r.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(o.location.search);t.set(s,e),o.replace({...o.location,search:t.toString()})}),[s,o])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:o}=e,s=p(e),[a,c]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s}))),[i,d]=b({queryString:n,groupId:o}),[f,h]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[o,s]=(0,u.Dv)(n);return[o,(0,r.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:o}),g=(()=>{const e=i??f;return m({value:e,tabValues:s})?e:null})();(0,l.A)((()=>{g&&c(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),d(e),h(e)}),[d,h,s]),tabValues:s}}var h=n(2303),g=n(3678);const v={tabList:"tabList_TRJ7",tabItem:"tabItem_hGfb",tabItemLink:"tabItemLink_ikUN",tabLink:"tabLink_FngV"};var k=n(4848);function w(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:l}=e;const c=[],{blockElementScrollPositionUntilNextRender:i}=(0,s.a_)(),u=e=>{const t=e.currentTarget,n=c.indexOf(t),{value:o,attributes:s}=l[n];o!==r&&(i(t),!s?.link&&a(o))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{const n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.length-1];break}}t?.focus()};return(0,k.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:s}=e;const a=n??t,l=s?.link;return(0,k.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>c.push(e),onKeyDown:d,onClick:u,...s,className:(0,o.A)("tabs__item",v.tabItem,l&&v.tabItemLink,s?.className,{"tabs__item--active":r===t}),children:l?(0,k.jsxs)("a",{className:v.tabLink,href:l,target:"_blank",rel:"noopener noreferrer",children:[a," ",(0,k.jsx)(g.A,{})]}):a},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:(0,o.A)("margin-top--md",e.props.className)}):null}return(0,k.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function x(e){const t=f(e);return(0,k.jsxs)("div",{className:(0,o.A)("tabs-container",v.tabList),children:[(0,k.jsx)(w,{...t,...e}),(0,k.jsx)(y,{...t,...e})]})}function _(e){const t=(0,h.A)();return(0,k.jsx)(x,{...e,children:d(e.children)},String(t))}},9094:(e,t,n)=>{"use strict";n.d(t,{i:()=>o});var r=n(6540);const o=(e,t)=>{const n=(0,r.useRef)(null);return(0,r.useEffect)((()=>{if(e){const e=n.current;if(!e)return;e.getBoundingClientRect().bottom>window.innerHeight&&e.scrollIntoView({block:"end",behavior:"smooth"}),e.scrollTop=0}}),[e,t.length]),n}},7869:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});const r={wrap:"wrap_OR2f",block:"block_TB_0",iconBtn:"iconBtn_jpeK",clear:"clear_UIaJ iconBtn_jpeK",toggle:"toggle_fuWN iconBtn_jpeK",label:"label_tjeK",inputWrap:"inputWrap_v6Wm",input:"input_yipn block_TB_0",inputBorderless:"inputBorderless_tfte input_yipn block_TB_0",multiInput:"multiInput_IOZh block_TB_0",multiInputWrap:"multiInputWrap_SA0w",selectedItem:"selectedItem_Y5vk",removeItem:"removeItem_A7gD iconBtn_jpeK",popup:"popup_r2d6",list:"list_s7Yq block_TB_0 popup_r2d6",multiList:"multiList_PSk_ list_s7Yq block_TB_0 popup_r2d6",noScroll:"noScroll_sC5i",scroll:"scroll_hiZj",dropdown:"dropdown_Dh4q block_TB_0 popup_r2d6",multiDropdown:"multiDropdown_RB2g dropdown_Dh4q block_TB_0 popup_r2d6",dropdownClear:"dropdownClear_gV5d iconBtn_jpeK",dropdownList:"dropdownList_KhBg",item:"item_yDgH",itemCheckable:"itemCheckable_pOZy item_yDgH",selected:"selected_ABJI",checked:"checked_DSOJ",focused:"focused_Mlzd",disabled:"disabled_m1hz",creatable:"creatable_l_CL",noResult:"noResult_n7yc item_yDgH",options:"options_IXd2",button:"button_ZS1m block_TB_0",groupHead:"groupHead_ysix"}},8426:(e,t)=>{function n(e){let t,n=[];for(let r of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(r))n.push(parseInt(r,10));else if(t=r.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,r,o,s]=t;if(r&&s){r=parseInt(r),s=parseInt(s);const e=r<s?1:-1;"-"!==o&&".."!==o&&"\u2025"!==o||(s+=e);for(let t=r;t!==s;t+=e)n.push(t)}}return n}t.default=n,e.exports=n},8453:(e,t,n)=>{"use strict";n.d(t,{R:()=>a,x:()=>l});var r=n(6540);const o={},s=r.createContext(o);function a(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/common.cee371bc.js b/assets/js/common.cee371bc.js deleted file mode 100644 index 4aa76f4..0000000 --- a/assets/js/common.cee371bc.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[76],{7210:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var r,o,s=n(6540);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a.apply(null,arguments)}const l=e=>{let{title:t,titleId:n,...l}=e;return s.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down",viewBox:"0 0 24 24","aria-labelledby":n},l),t?s.createElement("title",{id:n},t):null,r||(r=s.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=s.createElement("path",{d:"m6 9 6 6 6-6"})))}},6217:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var r,o,s=n(6540);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a.apply(null,arguments)}const l=e=>{let{title:t,titleId:n,...l}=e;return s.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-chevron-up",viewBox:"0 0 24 24","aria-labelledby":n},l),t?s.createElement("title",{id:n},t):null,r||(r=s.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=s.createElement("path",{d:"m6 15 6-6 6 6"})))}},3678:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var r,o,s=n(6540);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a.apply(null,arguments)}const l=e=>{let{title:t,titleId:n,...l}=e;return s.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-external-link",viewBox:"0 0 24 24","aria-labelledby":n},l),t?s.createElement("title",{id:n},t):null,r||(r=s.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=s.createElement("path",{d:"M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6M11 13l9-9M15 4h5v5"})))}},1236:(e,t,n)=>{"use strict";n.d(t,{A:()=>l});var r,o,s=n(6540);function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},a.apply(null,arguments)}const l=e=>{let{title:t,titleId:n,...l}=e;return s.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-x",viewBox:"0 0 24 24","aria-labelledby":n},l),t?s.createElement("title",{id:n},t):null,r||(r=s.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),o||(o=s.createElement("path",{d:"M18 6 6 18M6 6l12 12"})))}},4444:(e,t,n)=>{"use strict";n.d(t,{D$:()=>a,Kf:()=>r,OX:()=>s,g4:()=>o,l0:()=>l});const r=-1,o=(e,t)=>e===t,s=(e,t)=>e&&e+t,a={tabIndex:-1,type:"button"},l=(e,t)=>({...a,"aria-expanded":t,"aria-controls":s(e,"l")})},1975:(e,t,n)=>{"use strict";n.d(t,{d:()=>a});var r=n(4444),o=n(9635);const s=e=>e?.scrollIntoView({block:"nearest"}),a=function(e){let{select:t,rovingText:n=!t,deselectOnClear:a=!0,deselectOnChange:l=!0,closeOnSelect:c=!0}=void 0===e?{}:e;return e=>{let{getItemValue:i,onSelectChange:u,isItemSelected:d,isItemDisabled:p,isItemAction:m,onAction:b,selected:f,value:h,onChange:g,tmpValue:v,setTmpValue:k,focusIndex:w,setFocusIndex:y,open:x,setOpen:_,inputRef:j,items:B,id:C}=e;var I;const[E,N,L]=(0,o._)(j),A=null!=(I=v||h)?I:Array.isArray(f)?"":i(f),S=B[w],T=(0,r.OX)(C,"l"),V=e=>{if(m?.(e))return b?.(e),!0;const n=i(e);t||g(n);const r=n.length;j.current?.setSelectionRange(r,r),u(e)},O=e=>{y(r.Kf),k(),(e||c)&&(_(!1),t&&g())},D={onMouseDown:E,onMouseUp:L};return{isInputEmpty:!A,getFocusCaptureProps:()=>D,getClearProps:()=>({...r.D$,...D,onClick:()=>{k(),y(r.Kf),g(""),a&&u()}}),getListProps:()=>({...D,id:T,role:"listbox"}),getItemProps:e=>{let{item:n,index:o}=e;return{id:(0,r.OX)(C,o),role:"option","aria-selected":t?d(n):o===w,ref:o===w?s:void 0,onClick:()=>!p?.(n)&&O(V(n)),onPointerMove:()=>!p?.(n)&&y(o)}},getInputProps:()=>({type:"text",role:"combobox",autoComplete:"off","aria-autocomplete":"list","aria-expanded":x,"aria-controls":T,"aria-activedescendant":w>=0?(0,r.OX)(C,w):void 0,ref:j,value:A,onChange:e=>{_(!0),y(r.Kf),k();const n=e.target.value;g(n),(!t&&l||a&&!n)&&u()},onBlur:()=>{N()||(t||g(A),O(!0))},onKeyDown:e=>{switch(e.key){case"ArrowUp":case"ArrowDown":e.preventDefault(),x?(e=>{const t=n?-1:0;let r,o=w,s=0;const a=B.length;for(;e?++o>=a&&(o=t):--o<t&&(o=a-1),r=B[o],r&&p?.(r);)if(++s>=a)return;y(o),n&&k(i(r))})("ArrowUp"!=e.key):_(!0);break;case"Enter":x&&(S?(e.preventDefault(),O(V(S))):t||O(!0));break;case"Escape":x?O(!0):(g(""),a&&u())}},onMouseDown:e=>e.stopPropagation(),onClick:()=>_(!0)})}}}},8321:(e,t,n)=>{"use strict";n.d(t,{P:()=>o});var r=n(4444);const o=()=>e=>{let{id:t}=e;const n=(0,r.OX)(t,"i"),o=(0,r.OX)(t,"a");return{getLabelProps:()=>({id:o,htmlFor:n}),getInputProps:()=>({id:n}),getListProps:()=>({"aria-labelledby":o})}}},8355:(e,t,n)=>{"use strict";n.d(t,{m:()=>l});var r=n(6540);let o=0;const s=r.useId||(()=>{const[e,t]=(0,r.useState)();return(0,r.useEffect)((()=>t(++o)),[]),e&&`szh-ac${e}-`});var a=n(4444);const l=e=>{let{onChange:t,feature:n,isItemSelected:o,inputRef:l,getItemValue:c,...i}=e;const u=(0,r.useRef)(null),[d,p]=(0,r.useState)(),[m,b]=(0,r.useState)(!1),[f,h]=(0,r.useState)(a.Kf),g={isItemSelected:o,inputRef:l||u,focusIndex:f,setFocusIndex:h,open:m,setOpen:b},v=n({id:s(),tmpValue:d,setTmpValue:p,onChange:e=>i.value!=e&&t?.(e),getItemValue:e=>null==e?"":c?c(e):e.toString(),...i,...g});return{...g,...v}}},6238:(e,t,n)=>{"use strict";n.d(t,{B:()=>s});var r=n(4444),o=n(8355);const s=e=>{let{isEqual:t=r.g4,selected:n,onSelectChange:s,flipOnSelect:a,...l}=e;return(0,o.m)({...l,selected:n,isEqual:t,isItemSelected:e=>t(e,n),onSelectChange:e=>{t(e,n)?a&&s?.():s?.(e)}})}},9635:(e,t,n)=>{"use strict";n.d(t,{_:()=>o});var r=n(6082);const o=e=>{const t=(0,r.d)({});return[()=>{document.activeElement===e.current&&(t.a=1)},()=>{if(t.a)return t.a=0,e.current?.focus(),!0},()=>{t.a=0,e.current?.focus()}]}},6082:(e,t,n)=>{"use strict";n.d(t,{d:()=>o});var r=n(6540);const o=e=>(0,r.useState)(e)[0]},9301:(e,t,n)=>{"use strict";n.d(t,{e:()=>o});var r=n(6082);const o=(e,t)=>{const n=(0,r.d)({});return[()=>n.a=e,()=>{n.a?n.a=0:t(!0)}]}},5430:(e,t,n)=>{"use strict";n.d(t,{o:()=>o});const r=(e,t)=>{const n={...e};return Object.entries(t).forEach((t=>{let[o,s]=t;if("function"==typeof s){const t=e[o];n[o]=t?function(){const e=t(...arguments),n=s(...arguments);if("object"==typeof e)return r(e,n)}:s}else n[o]=s})),n},o=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return e=>t.reduce(((t,n)=>r(t,n(e))),{})}},1432:(e,t,n)=>{"use strict";n.d(t,{A:()=>R});var r=n(6540),o=n(2303),s=n(4164),a=n(5293),l=n(6342);function c(){const{prism:e}=(0,l.p)(),{colorMode:t}=(0,a.G)(),n=e.theme,r=e.darkTheme||n;return"dark"===t?r:n}var i=n(7559),u=n(8426),d=n.n(u);const p=/title=(?<quote>["'])(?<title>.*?)\1/,m=/\{(?<range>[\d,-]+)\}/,b={js:{start:"\\/\\/",end:""},jsBlock:{start:"\\/\\*",end:"\\*\\/"},jsx:{start:"\\{\\s*\\/\\*",end:"\\*\\/\\s*\\}"},bash:{start:"#",end:""},html:{start:"\x3c!--",end:"--\x3e"}},f={...b,lua:{start:"--",end:""},wasm:{start:"\\;\\;",end:""},tex:{start:"%",end:""},vb:{start:"['\u2018\u2019]",end:""},vbnet:{start:"(?:_\\s*)?['\u2018\u2019]",end:""},rem:{start:"[Rr][Ee][Mm]\\b",end:""},f90:{start:"!",end:""},ml:{start:"\\(\\*",end:"\\*\\)"},cobol:{start:"\\*>",end:""}},h=Object.keys(b);function g(e,t){const n=e.map((e=>{const{start:n,end:r}=f[e];return`(?:${n}\\s*(${t.flatMap((e=>[e.line,e.block?.start,e.block?.end].filter(Boolean))).join("|")})\\s*${r})`})).join("|");return new RegExp(`^\\s*(?:${n})\\s*$`)}function v(e,t){let n=e.replace(/\n$/,"");const{language:r,magicComments:o,metastring:s}=t;if(s&&m.test(s)){const e=s.match(m).groups.range;if(0===o.length)throw new Error(`A highlight range has been given in code block's metastring (\`\`\` ${s}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`);const t=o[0].className,r=d()(e).filter((e=>e>0)).map((e=>[e-1,[t]]));return{lineClassNames:Object.fromEntries(r),code:n}}if(void 0===r)return{lineClassNames:{},code:n};const a=function(e,t){switch(e){case"js":case"javascript":case"ts":case"typescript":return g(["js","jsBlock"],t);case"jsx":case"tsx":return g(["js","jsBlock","jsx"],t);case"html":return g(["js","jsBlock","html"],t);case"python":case"py":case"bash":return g(["bash"],t);case"markdown":case"md":return g(["html","jsx","bash"],t);case"tex":case"latex":case"matlab":return g(["tex"],t);case"lua":case"haskell":case"sql":return g(["lua"],t);case"wasm":return g(["wasm"],t);case"vb":case"vba":case"visual-basic":return g(["vb","rem"],t);case"vbnet":return g(["vbnet","rem"],t);case"batch":return g(["rem"],t);case"basic":return g(["rem","f90"],t);case"fsharp":return g(["js","ml"],t);case"ocaml":case"sml":return g(["ml"],t);case"fortran":return g(["f90"],t);case"cobol":return g(["cobol"],t);default:return g(h,t)}}(r,o),l=n.split("\n"),c=Object.fromEntries(o.map((e=>[e.className,{start:0,range:""}]))),i=Object.fromEntries(o.filter((e=>e.line)).map((e=>{let{className:t,line:n}=e;return[n,t]}))),u=Object.fromEntries(o.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.start,t]}))),p=Object.fromEntries(o.filter((e=>e.block)).map((e=>{let{className:t,block:n}=e;return[n.end,t]})));for(let d=0;d<l.length;){const e=l[d].match(a);if(!e){d+=1;continue}const t=e.slice(1).find((e=>void 0!==e));i[t]?c[i[t]].range+=`${d},`:u[t]?c[u[t]].start=d:p[t]&&(c[p[t]].range+=`${c[p[t]].start}-${d-1},`),l.splice(d,1)}n=l.join("\n");const b={};return Object.entries(c).forEach((e=>{let[t,{range:n}]=e;d()(n).forEach((e=>{b[e]??=[],b[e].push(t)}))})),{lineClassNames:b,code:n}}const k={codeBlockContainer:"codeBlockContainer_Ckt0"};var w=n(4848);function y(e){let{as:t,...n}=e;const r=function(e){const t={color:"--prism-color",backgroundColor:"--prism-background-color"},n={};return Object.entries(e.plain).forEach((e=>{let[r,o]=e;const s=t[r];s&&"string"==typeof o&&(n[s]=o)})),n}(c());return(0,w.jsx)(t,{...n,style:r,className:(0,s.A)(n.className,k.codeBlockContainer,i.G.common.codeBlock)})}const x={codeBlockContent:"codeBlockContent_biex",codeBlockTitle:"codeBlockTitle_Ktv7",codeBlock:"codeBlock_bY9V",codeBlockStandalone:"codeBlockStandalone_MEMb",codeBlockLines:"codeBlockLines_e6Vv",codeBlockLinesWithNumbering:"codeBlockLinesWithNumbering_o6Pm",buttonGroup:"buttonGroup__atx"};function _(e){let{children:t,className:n}=e;return(0,w.jsx)(y,{as:"pre",tabIndex:0,className:(0,s.A)(x.codeBlockStandalone,"thin-scrollbar",n),children:(0,w.jsx)("code",{className:x.codeBlockLines,children:t})})}var j=n(9532);const B={attributes:!0,characterData:!0,childList:!0,subtree:!0};function C(e,t){const[n,o]=(0,r.useState)(),s=(0,r.useCallback)((()=>{o(e.current?.closest("[role=tabpanel][hidden]"))}),[e,o]);(0,r.useEffect)((()=>{s()}),[s]),function(e,t,n){void 0===n&&(n=B);const o=(0,j._q)(t),s=(0,j.Be)(n);(0,r.useEffect)((()=>{const t=new MutationObserver(o);return e&&t.observe(e,s),()=>t.disconnect()}),[e,o,s])}(n,(e=>{e.forEach((e=>{"attributes"===e.type&&"hidden"===e.attributeName&&(t(),s())}))}),{attributes:!0,characterData:!1,childList:!1,subtree:!1})}var I=n(1765);const E={codeLine:"codeLine_lJS_",codeLineNumber:"codeLineNumber_Tfdd",codeLineContent:"codeLineContent_feaV"};function N(e){let{line:t,classNames:n,showLineNumbers:r,getLineProps:o,getTokenProps:a}=e;1===t.length&&"\n"===t[0].content&&(t[0].content="");const l=o({line:t,className:(0,s.A)(n,r&&E.codeLine)}),c=t.map(((e,t)=>(0,w.jsx)("span",{...a({token:e})},t)));return(0,w.jsxs)("span",{...l,children:[r?(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)("span",{className:E.codeLineNumber}),(0,w.jsx)("span",{className:E.codeLineContent,children:c})]}):c,(0,w.jsx)("br",{})]})}var L=n(1312);function A(e){return(0,w.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,w.jsx)("path",{fill:"currentColor",d:"M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"})})}function S(e){return(0,w.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,w.jsx)("path",{fill:"currentColor",d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"})})}const T={copyButtonCopied:"copyButtonCopied_obH4",copyButtonIcons:"copyButtonIcons_eSgA",copyButtonIcon:"copyButtonIcon_y97N",copyButtonSuccessIcon:"copyButtonSuccessIcon_LjdS"};function V(e){let{code:t,className:n}=e;const[o,a]=(0,r.useState)(!1),l=(0,r.useRef)(void 0),c=(0,r.useCallback)((()=>{!function(e,t){let{target:n=document.body}=void 0===t?{}:t;if("string"!=typeof e)throw new TypeError(`Expected parameter \`text\` to be a \`string\`, got \`${typeof e}\`.`);const r=document.createElement("textarea"),o=document.activeElement;r.value=e,r.setAttribute("readonly",""),r.style.contain="strict",r.style.position="absolute",r.style.left="-9999px",r.style.fontSize="12pt";const s=document.getSelection(),a=s.rangeCount>0&&s.getRangeAt(0);n.append(r),r.select(),r.selectionStart=0,r.selectionEnd=e.length;let l=!1;try{l=document.execCommand("copy")}catch{}r.remove(),a&&(s.removeAllRanges(),s.addRange(a)),o&&o.focus()}(t),a(!0),l.current=window.setTimeout((()=>{a(!1)}),1e3)}),[t]);return(0,r.useEffect)((()=>()=>window.clearTimeout(l.current)),[]),(0,w.jsx)("button",{type:"button","aria-label":o?(0,L.T)({id:"theme.CodeBlock.copied",message:"Copied",description:"The copied button label on code blocks"}):(0,L.T)({id:"theme.CodeBlock.copyButtonAriaLabel",message:"Copy code to clipboard",description:"The ARIA label for copy code blocks button"}),title:(0,L.T)({id:"theme.CodeBlock.copy",message:"Copy",description:"The copy button label on code blocks"}),className:(0,s.A)("clean-btn",n,T.copyButton,o&&T.copyButtonCopied),onClick:c,children:(0,w.jsxs)("span",{className:T.copyButtonIcons,"aria-hidden":"true",children:[(0,w.jsx)(A,{className:T.copyButtonIcon}),(0,w.jsx)(S,{className:T.copyButtonSuccessIcon})]})})}function O(e){return(0,w.jsx)("svg",{viewBox:"0 0 24 24",...e,children:(0,w.jsx)("path",{fill:"currentColor",d:"M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"})})}const D={wordWrapButtonIcon:"wordWrapButtonIcon_Bwma",wordWrapButtonEnabled:"wordWrapButtonEnabled_EoeP"};function M(e){let{className:t,onClick:n,isEnabled:r}=e;const o=(0,L.T)({id:"theme.CodeBlock.wordWrapToggle",message:"Toggle word wrap",description:"The title attribute for toggle word wrapping button of code block lines"});return(0,w.jsx)("button",{type:"button",onClick:n,className:(0,s.A)("clean-btn",t,r&&D.wordWrapButtonEnabled),"aria-label":o,title:o,children:(0,w.jsx)(O,{className:D.wordWrapButtonIcon,"aria-hidden":"true"})})}function P(e){let{children:t,className:n="",metastring:o,title:a,showLineNumbers:i,language:u}=e;const{prism:{defaultLanguage:d,magicComments:m}}=(0,l.p)(),b=function(e){return e?.toLowerCase()}(u??function(e){const t=e.split(" ").find((e=>e.startsWith("language-")));return t?.replace(/language-/,"")}(n)??d),f=c(),h=function(){const[e,t]=(0,r.useState)(!1),[n,o]=(0,r.useState)(!1),s=(0,r.useRef)(null),a=(0,r.useCallback)((()=>{const n=s.current.querySelector("code");e?n.removeAttribute("style"):(n.style.whiteSpace="pre-wrap",n.style.overflowWrap="anywhere"),t((e=>!e))}),[s,e]),l=(0,r.useCallback)((()=>{const{scrollWidth:e,clientWidth:t}=s.current,n=e>t||s.current.querySelector("code").hasAttribute("style");o(n)}),[s]);return C(s,l),(0,r.useEffect)((()=>{l()}),[e,l]),(0,r.useEffect)((()=>(window.addEventListener("resize",l,{passive:!0}),()=>{window.removeEventListener("resize",l)})),[l]),{codeBlockRef:s,isEnabled:e,isCodeScrollable:n,toggle:a}}(),g=function(e){return e?.match(p)?.groups.title??""}(o)||a,{lineClassNames:k,code:_}=v(t,{metastring:o,language:b,magicComments:m}),j=i??function(e){return Boolean(e?.includes("showLineNumbers"))}(o);return(0,w.jsxs)(y,{as:"div",className:(0,s.A)(n,b&&!n.includes(`language-${b}`)&&`language-${b}`),children:[g&&(0,w.jsx)("div",{className:x.codeBlockTitle,children:g}),(0,w.jsxs)("div",{className:x.codeBlockContent,children:[(0,w.jsx)(I.f4,{theme:f,code:_,language:b??"text",children:e=>{let{className:t,style:n,tokens:r,getLineProps:o,getTokenProps:a}=e;return(0,w.jsx)("pre",{tabIndex:0,ref:h.codeBlockRef,className:(0,s.A)(t,x.codeBlock,"thin-scrollbar"),style:n,children:(0,w.jsx)("code",{className:(0,s.A)(x.codeBlockLines,j&&x.codeBlockLinesWithNumbering),children:r.map(((e,t)=>(0,w.jsx)(N,{line:e,getLineProps:o,getTokenProps:a,classNames:k[t],showLineNumbers:j},t)))})})}}),(0,w.jsxs)("div",{className:x.buttonGroup,children:[(h.isEnabled||h.isCodeScrollable)&&(0,w.jsx)(M,{className:x.codeButton,onClick:()=>h.toggle(),isEnabled:h.isEnabled}),(0,w.jsx)(V,{className:x.codeButton,code:_})]})]})]})}function R(e){let{children:t,...n}=e;const s=(0,o.A)(),a=function(e){return r.Children.toArray(e).some((e=>(0,r.isValidElement)(e)))?e:Array.isArray(e)?e.join(""):e}(t),l="string"==typeof a?P:_;return(0,w.jsx)(l,{...n,children:a},String(s))}},8860:(e,t,n)=>{"use strict";n.d(t,{A:()=>a});n(6540);var r=n(4164);const o={tabItem:"tabItem_s4ch"};var s=n(4848);function a(e){let{children:t,hidden:n,className:a}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.A)(o.tabItem,a),hidden:n,children:t})}},267:(e,t,n)=>{"use strict";n.d(t,{A:()=>_});var r=n(6540),o=n(4164),s=n(3104),a=n(6347),l=n(205),c=n(7485),i=n(1682),u=n(679);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:o}}=e;return{value:t,label:n,attributes:r,default:o}}))}(n);return function(e){const t=(0,i.XI)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,n])}function m(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function b(e){let{queryString:t=!1,groupId:n}=e;const o=(0,a.W6)(),s=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,c.aZ)(s),(0,r.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(o.location.search);t.set(s,e),o.replace({...o.location,search:t.toString()})}),[s,o])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:o}=e,s=p(e),[a,c]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!m({value:t,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s}))),[i,d]=b({queryString:n,groupId:o}),[f,h]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[o,s]=(0,u.Dv)(n);return[o,(0,r.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:o}),g=(()=>{const e=i??f;return m({value:e,tabValues:s})?e:null})();(0,l.A)((()=>{g&&c(g)}),[g]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);c(e),d(e),h(e)}),[d,h,s]),tabValues:s}}var h=n(2303),g=n(3678);const v={tabList:"tabList_TRJ7",tabItem:"tabItem_hGfb",tabItemLink:"tabItemLink_ikUN",tabLink:"tabLink_FngV"};var k=n(4848);function w(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:l}=e;const c=[],{blockElementScrollPositionUntilNextRender:i}=(0,s.a_)(),u=e=>{const t=e.currentTarget,n=c.indexOf(t),{value:o,attributes:s}=l[n];o!==r&&(i(t),!s?.link&&a(o))},d=e=>{let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{const n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.length-1];break}}t?.focus()};return(0,k.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.A)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:s}=e;const a=n??t,l=s?.link;return(0,k.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>c.push(e),onKeyDown:d,onClick:u,...s,className:(0,o.A)("tabs__item",v.tabItem,l&&v.tabItemLink,s?.className,{"tabs__item--active":r===t}),children:l?(0,k.jsxs)("a",{className:v.tabLink,href:l,target:"_blank",rel:"noopener noreferrer",children:[a," ",(0,k.jsx)(g.A,{})]}):a},t)}))})}function y(e){let{lazy:t,children:n,selectedValue:s}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:(0,o.A)("margin-top--md",e.props.className)}):null}return(0,k.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function x(e){const t=f(e);return(0,k.jsxs)("div",{className:(0,o.A)("tabs-container",v.tabList),children:[(0,k.jsx)(w,{...t,...e}),(0,k.jsx)(y,{...t,...e})]})}function _(e){const t=(0,h.A)();return(0,k.jsx)(x,{...e,children:d(e.children)},String(t))}},9094:(e,t,n)=>{"use strict";n.d(t,{i:()=>o});var r=n(6540);const o=(e,t)=>{const n=(0,r.useRef)(null);return(0,r.useEffect)((()=>{if(e){const e=n.current;if(!e)return;e.getBoundingClientRect().bottom>window.innerHeight&&e.scrollIntoView({block:"end",behavior:"smooth"}),e.scrollTop=0}}),[e,t.length]),n}},7869:(e,t,n)=>{"use strict";n.d(t,{A:()=>r});const r={wrap:"wrap_OR2f",block:"block_TB_0",iconBtn:"iconBtn_jpeK",clear:"clear_UIaJ iconBtn_jpeK",toggle:"toggle_fuWN iconBtn_jpeK",label:"label_tjeK",inputWrap:"inputWrap_v6Wm",input:"input_yipn block_TB_0",inputBorderless:"inputBorderless_tfte input_yipn block_TB_0",multiInput:"multiInput_IOZh block_TB_0",multiInputWrap:"multiInputWrap_SA0w",selectedItem:"selectedItem_Y5vk",removeItem:"removeItem_A7gD iconBtn_jpeK",popup:"popup_r2d6",list:"list_s7Yq block_TB_0 popup_r2d6",multiList:"multiList_PSk_ list_s7Yq block_TB_0 popup_r2d6",noScroll:"noScroll_sC5i",scroll:"scroll_hiZj",dropdown:"dropdown_Dh4q block_TB_0 popup_r2d6",multiDropdown:"multiDropdown_RB2g dropdown_Dh4q block_TB_0 popup_r2d6",dropdownClear:"dropdownClear_gV5d iconBtn_jpeK",dropdownList:"dropdownList_KhBg",item:"item_yDgH",itemCheckable:"itemCheckable_pOZy item_yDgH",selected:"selected_ABJI",checked:"checked_DSOJ",focused:"focused_Mlzd",disabled:"disabled_m1hz",creatable:"creatable_l_CL",noResult:"noResult_n7yc item_yDgH",options:"options_IXd2",button:"button_ZS1m block_TB_0",groupHead:"groupHead_ysix"}},8426:(e,t)=>{function n(e){let t,n=[];for(let r of e.split(",").map((e=>e.trim())))if(/^-?\d+$/.test(r))n.push(parseInt(r,10));else if(t=r.match(/^(-?\d+)(-|\.\.\.?|\u2025|\u2026|\u22EF)(-?\d+)$/)){let[e,r,o,s]=t;if(r&&s){r=parseInt(r),s=parseInt(s);const e=r<s?1:-1;"-"!==o&&".."!==o&&"\u2025"!==o||(s+=e);for(let t=r;t!==s;t+=e)n.push(t)}}return n}t.default=n,e.exports=n},8453:(e,t,n)=>{"use strict";n.d(t,{R:()=>a,x:()=>l});var r=n(6540);const o={},s=r.createContext(o);function a(e){const t=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/d98ef911.04f18adb.js b/assets/js/d98ef911.04f18adb.js deleted file mode 100644 index 007f2c0..0000000 --- a/assets/js/d98ef911.04f18adb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[370],{1388:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>C,contentTitle:()=>I,default:()=>D,frontMatter:()=>y,metadata:()=>a,toc:()=>N});const a=JSON.parse('{"id":"docs/features/multiSelectDropdown","title":"Multiple Selection in Dropdown","description":"<TabItem","source":"@site/docs/docs/features/multiSelectDropdown.mdx","sourceDirName":"docs/features","slug":"/docs/features/multiSelectDropdown","permalink":"/react-autocomplete/docs/features/multiSelectDropdown","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/features/multiSelectDropdown.mdx","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"sidebar_position":5,"sidebar_label":"Multi-select Dropdown"},"sidebar":"docsSidebar","previous":{"title":"Multiple Selection","permalink":"/react-autocomplete/docs/features/multiSelect"},"next":{"title":"Grouped items","permalink":"/react-autocomplete/docs/extras/grouped"}}');var s=t(4848),o=t(8453),l=t(267),i=t(8860),r=t(1432);const c="import { useState } from 'react';\nimport { useMultiSelect, multiSelectDropdown } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\nconst MultiSelectDropdown = () => {\n const [value, setValue] = useState<string>();\n // You can set a few items to be selected initially\n const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);\n // It's up to you how to filter items based on the input value\n const items = value\n ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))\n : STATES;\n\n const {\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n isItemSelected,\n removeSelect,\n open,\n focusIndex,\n isInputEmpty\n } = useMultiSelect({\n // highlight-next-line\n flipOnSelect: true, // or false\n items,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n // highlight-next-line\n feature: multiSelectDropdown({\n // Options: rovingText, closeOnSelect\n rovingText: true,\n closeOnSelect: false\n })\n });\n\n return (\n <div>\n <button {...getToggleProps()}>{selected.length} selected</button>\n {open && (\n <div\n {...getListProps()}\n style={{\n position: 'absolute',\n color: '#000',\n background: '#fff',\n maxWidth: 320\n }}\n >\n <div\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n border: '2px solid #aaa',\n gap: 6,\n padding: 6\n }}\n >\n {selected.map((item) => (\n <button key={item} onClick={() => removeSelect(item)}>\n {item}\n </button>\n ))}\n <div>\n <input placeholder=\"Type...\" {...getInputProps()} />\n {!isInputEmpty && <button {...getClearProps()}>X</button>}\n </div>\n </div>\n\n <ul\n style={{\n listStyle: 'none',\n overflow: 'auto',\n maxHeight: 300,\n padding: 0\n }}\n >\n {items.length ? (\n items.map((item, index) => (\n <li\n style={{\n background: focusIndex === index ? '#ddd' : 'none'\n }}\n key={item}\n {...getItemProps({ item, index })}\n >\n {item}\n {isItemSelected(item) && '\u2714\ufe0f'}\n </li>\n ))\n ) : (\n <li>No options</li>\n )}\n </ul>\n </div>\n )}\n </div>\n );\n};\n\nexport default MultiSelectDropdown;\n";var d=t(8785),u=t(6540),p=t(4164),h=t(8824),m=t(5430),g=t(9440),x=t(9787);var f=t(1236),v=t(9580),w=t(2194),b=t(7869);const S="multiInputWrap_TWxL";var k=t(8748),j=t(9094);const A=()=>{const[e,n]=(0,u.useState)(!0),[t,a]=(0,u.useState)(!1),[o,l]=(0,u.useState)(!0),[i,r]=(0,u.useState)(),[c,d]=(0,u.useState)(["Alaska","Florida"]),A=i?w.A.filter((e=>e.toLowerCase().startsWith(i.toLowerCase()))):w.A,{getInputProps:y,getClearProps:I,getToggleProps:C,getListProps:N,getItemProps:M,isItemSelected:D,removeSelect:O,open:E,focusIndex:P,isInputEmpty:T}=(0,h.L)({items:A,value:i,onChange:r,selected:c,onSelectChange:d,flipOnSelect:o,feature:(L={rovingText:e,closeOnSelect:t},(0,m.o)((0,x.W)(L),(0,g.I)()))});var L;const W=(0,j.i)(E,A);return(0,s.jsxs)("div",{className:b.A.wrap,children:[(0,s.jsxs)("div",{className:b.A.options,children:[(0,s.jsx)(k.S,{label:"rovingText",checked:e,onChange:n}),(0,s.jsx)(k.S,{label:"closeOnSelect",checked:t,onChange:a}),(0,s.jsx)(k.S,{label:"flipOnSelect",checked:o,onChange:l})]}),(0,s.jsxs)("button",{className:b.A.button,...C(),children:[c.length," selected"]}),E&&(0,s.jsxs)("div",{ref:W,className:(0,p.$)(b.A.multiDropdown,b.A.noScroll),...N(),children:[(0,s.jsxs)("div",{className:S,children:[c.map((e=>(0,s.jsxs)("div",{className:b.A.selectedItem,children:[e,(0,s.jsx)("span",{className:b.A.removeItem,onClick:()=>O(e),children:(0,s.jsx)(f.A,{})})]},e))),(0,s.jsxs)("div",{className:b.A.multiInputWrap,children:[(0,s.jsx)("input",{className:b.A.multiInput,placeholder:"Type...",...y()}),!T&&(0,s.jsx)("button",{className:b.A.clear,...I(),children:(0,s.jsx)(f.A,{})})]})]}),(0,s.jsx)("ul",{className:(0,p.$)(b.A.dropdownList,b.A.scroll),children:A.length?A.map(((e,n)=>{const t=D(e);return(0,s.jsxs)("li",{className:(0,p.$)(b.A.itemCheckable,P===n&&b.A.focused,t&&b.A.checked),...M({item:e,index:n}),children:[e,t&&(0,s.jsx)(v.A,{})]},e)})):(0,s.jsx)("li",{className:b.A.noResult,children:"No options"})})]})]})},y={sidebar_position:5,sidebar_label:"Multi-select Dropdown"},I="Multiple Selection in Dropdown",C={},N=[];function M(e){const n={h1:"h1",header:"header",p:"p",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"multiple-selection-in-dropdown",children:"Multiple Selection in Dropdown"})}),"\n",(0,s.jsx)(A,{}),"\n",(0,s.jsxs)(l.A,{children:[(0,s.jsx)(i.A,{value:"ts",label:"MultiSelectDropdown.tsx",children:(0,s.jsx)(r.A,{language:"tsx",children:c})}),(0,s.jsx)(i.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(r.A,{language:"ts",children:d.A})}),(0,s.jsx)(i.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/multiselectdropdown-ppgj8f"},children:(0,s.jsx)(n.p,{children:"CodeSandbox"})})]})]})}function D(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(M,{...e})}):M(e)}},9580:(e,n,t)=>{t.d(n,{A:()=>i});var a,s,o=t(6540);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},l.apply(null,arguments)}const i=e=>{let{title:n,titleId:t,...i}=e;return o.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-check",viewBox:"0 0 24 24","aria-labelledby":t},i),n?o.createElement("title",{id:t},n):null,a||(a=o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=o.createElement("path",{d:"m5 12 5 5L20 7"})))}},9440:(e,n,t)=>{t.d(n,{I:()=>a});const a=()=>e=>{let{removeSelect:n}=e;return{getInputProps:()=>({onKeyDown:e=>!e.target.value&&"Backspace"===e.key&&n?.()})}}},9787:(e,n,t)=>{t.d(n,{W:()=>r});var a=t(5430),s=t(1975),o=t(6540),l=t(9301);const i=function(e){let{closeOnSelect:n=!0,toggleRef:t}=void 0===e?{}:e;return e=>{let{inputRef:a,open:s,setOpen:i,focusIndex:r,value:c,tmpValue:d}=e;const[u,p]=(0,l.e)(s,i),h=(0,o.useRef)(null),m=t||h,g=d||c||"";(0,o.useEffect)((()=>{s&&a.current?.focus()}),[s,a]);return{toggleRef:m,isInputEmpty:!g,getToggleProps:()=>({type:"button","aria-haspopup":!0,"aria-expanded":s,ref:m,onMouseDown:u,onClick:p,onKeyDown:e=>{const{key:n}=e;"ArrowDown"===n&&(e.preventDefault(),i(!0))}}),getInputProps:()=>({value:g,onKeyDown:e=>{const{key:t}=e;("Escape"===t||n&&r>=0&&"Enter"===t)&&setTimeout((()=>m.current?.focus()),0)}})}}},r=e=>(0,a.o)((0,s.d)({...e,select:!0,deselectOnClear:!1}),i(e))},8824:(e,n,t)=>{t.d(n,{L:()=>o});var a=t(4444),s=t(8355);const o=e=>{let{isEqual:n=a.g4,selected:t,onSelectChange:o,flipOnSelect:l,...i}=e;const r=e=>o?.(t.filter((t=>!n(e,t)))),c=e=>{e?r(e):t.length&&o?.(t.slice(0,t.length-1))},d=e=>t.findIndex((t=>n(e,t)))>=0;return{...(0,s.m)({...i,selected:t,isEqual:n,isItemSelected:d,onSelectChange:e=>{e&&(d(e)?l&&r(e):o?.([...t,e]))},removeSelect:c}),removeSelect:c}}},8748:(e,n,t)=>{t.d(n,{S:()=>v});var a,s,o=t(4164),l=t(6540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},i.apply(null,arguments)}const r=e=>{let{title:n,titleId:t,...o}=e;return l.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":t},o),n?l.createElement("title",{id:t},n):null,a||(a=l.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=l.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,d;function u(){return u=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},u.apply(null,arguments)}const p=e=>{let{title:n,titleId:t,...a}=e;return l.createElement("svg",u({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":t},a),n?l.createElement("title",{id:t},n):null,c||(c=l.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),d||(d=l.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",x="checked_X1o2";var f=t(4848);const v=e=>{let{label:n,checked:t,onChange:a}=e;return(0,f.jsxs)("label",{className:(0,o.$)(h,t&&x),children:[(0,f.jsx)("input",{className:m,type:"checkbox",checked:t,onChange:e=>a(e.target.checked)}),t?(0,f.jsx)(p,{className:g}):(0,f.jsx)(r,{className:g}),n]})}},2194:(e,n,t)=>{t.d(n,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,n,t)=>{t.d(n,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/d98ef911.7d89ed25.js b/assets/js/d98ef911.7d89ed25.js new file mode 100644 index 0000000..d829a15 --- /dev/null +++ b/assets/js/d98ef911.7d89ed25.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[370],{1388:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>C,contentTitle:()=>I,default:()=>D,frontMatter:()=>y,metadata:()=>a,toc:()=>N});const a=JSON.parse('{"id":"docs/features/multiSelectDropdown","title":"Multiple Selection in Dropdown","description":"<TabItem","source":"@site/docs/docs/features/multiSelectDropdown.mdx","sourceDirName":"docs/features","slug":"/docs/features/multiSelectDropdown","permalink":"/react-autocomplete/docs/features/multiSelectDropdown","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/features/multiSelectDropdown.mdx","tags":[],"version":"current","sidebarPosition":5,"frontMatter":{"sidebar_position":5,"sidebar_label":"Multi-select Dropdown"},"sidebar":"docsSidebar","previous":{"title":"Multiple Selection","permalink":"/react-autocomplete/docs/features/multiSelect"},"next":{"title":"Grouped items","permalink":"/react-autocomplete/docs/extras/grouped"}}');var s=t(4848),o=t(8453),l=t(267),i=t(8860),r=t(1432);const c="import { useState } from 'react';\nimport { useMultiSelect, multiSelectDropdown } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\nconst MultiSelectDropdown = () => {\n const [value, setValue] = useState<string>();\n // You can set a few items to be selected initially\n const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);\n // It's up to you how to filter items based on the input value\n const items = value\n ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))\n : STATES;\n\n const {\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n isItemSelected,\n removeSelect,\n open,\n focusIndex,\n isInputEmpty\n } = useMultiSelect({\n // highlight-next-line\n flipOnSelect: true, // or false\n items,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n // highlight-next-line\n feature: multiSelectDropdown({\n // Options: rovingText, closeOnSelect\n rovingText: true,\n closeOnSelect: false\n })\n });\n\n return (\n <div>\n <button {...getToggleProps()}>{selected.length} selected</button>\n {open && (\n <div\n {...getListProps()}\n style={{\n position: 'absolute',\n color: '#000',\n background: '#fff',\n maxWidth: 320\n }}\n >\n <div\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n border: '2px solid #aaa',\n gap: 6,\n padding: 6\n }}\n >\n {selected.map((item) => (\n <button key={item} onClick={() => removeSelect(item)}>\n {item}\n </button>\n ))}\n <div>\n <input placeholder=\"Type...\" {...getInputProps()} />\n {!isInputEmpty && <button {...getClearProps()}>X</button>}\n </div>\n </div>\n\n <ul\n style={{\n listStyle: 'none',\n overflow: 'auto',\n maxHeight: 300,\n margin: 0,\n padding: 0\n }}\n >\n {items.length ? (\n items.map((item, index) => (\n <li\n style={{\n background: focusIndex === index ? '#ddd' : 'none'\n }}\n key={item}\n {...getItemProps({ item, index })}\n >\n {item}\n {isItemSelected(item) && '\u2714\ufe0f'}\n </li>\n ))\n ) : (\n <li>No options</li>\n )}\n </ul>\n </div>\n )}\n </div>\n );\n};\n\nexport default MultiSelectDropdown;\n";var d=t(8785),u=t(6540),p=t(4164),h=t(8824),m=t(5430),g=t(9440),x=t(9787);var f=t(1236),v=t(9580),w=t(2194),b=t(7869);const S="multiInputWrap_TWxL";var k=t(8748),j=t(9094);const A=()=>{const[e,n]=(0,u.useState)(!0),[t,a]=(0,u.useState)(!1),[o,l]=(0,u.useState)(!0),[i,r]=(0,u.useState)(),[c,d]=(0,u.useState)(["Alaska","Florida"]),A=i?w.A.filter((e=>e.toLowerCase().startsWith(i.toLowerCase()))):w.A,{getInputProps:y,getClearProps:I,getToggleProps:C,getListProps:N,getItemProps:M,isItemSelected:D,removeSelect:O,open:E,focusIndex:P,isInputEmpty:T}=(0,h.L)({items:A,value:i,onChange:r,selected:c,onSelectChange:d,flipOnSelect:o,feature:(L={rovingText:e,closeOnSelect:t},(0,m.o)((0,x.W)(L),(0,g.I)()))});var L;const W=(0,j.i)(E,A);return(0,s.jsxs)("div",{className:b.A.wrap,children:[(0,s.jsxs)("div",{className:b.A.options,children:[(0,s.jsx)(k.S,{label:"rovingText",checked:e,onChange:n}),(0,s.jsx)(k.S,{label:"closeOnSelect",checked:t,onChange:a}),(0,s.jsx)(k.S,{label:"flipOnSelect",checked:o,onChange:l})]}),(0,s.jsxs)("button",{className:b.A.button,...C(),children:[c.length," selected"]}),E&&(0,s.jsxs)("div",{ref:W,className:(0,p.$)(b.A.multiDropdown,b.A.noScroll),...N(),children:[(0,s.jsxs)("div",{className:S,children:[c.map((e=>(0,s.jsxs)("div",{className:b.A.selectedItem,children:[e,(0,s.jsx)("span",{className:b.A.removeItem,onClick:()=>O(e),children:(0,s.jsx)(f.A,{})})]},e))),(0,s.jsxs)("div",{className:b.A.multiInputWrap,children:[(0,s.jsx)("input",{className:b.A.multiInput,placeholder:"Type...",...y()}),!T&&(0,s.jsx)("button",{className:b.A.clear,...I(),children:(0,s.jsx)(f.A,{})})]})]}),(0,s.jsx)("ul",{className:(0,p.$)(b.A.dropdownList,b.A.scroll),children:A.length?A.map(((e,n)=>{const t=D(e);return(0,s.jsxs)("li",{className:(0,p.$)(b.A.itemCheckable,P===n&&b.A.focused,t&&b.A.checked),...M({item:e,index:n}),children:[e,t&&(0,s.jsx)(v.A,{})]},e)})):(0,s.jsx)("li",{className:b.A.noResult,children:"No options"})})]})]})},y={sidebar_position:5,sidebar_label:"Multi-select Dropdown"},I="Multiple Selection in Dropdown",C={},N=[];function M(e){const n={h1:"h1",header:"header",p:"p",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"multiple-selection-in-dropdown",children:"Multiple Selection in Dropdown"})}),"\n",(0,s.jsx)(A,{}),"\n",(0,s.jsxs)(l.A,{children:[(0,s.jsx)(i.A,{value:"ts",label:"MultiSelectDropdown.tsx",children:(0,s.jsx)(r.A,{language:"tsx",children:c})}),(0,s.jsx)(i.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(r.A,{language:"ts",children:d.A})}),(0,s.jsx)(i.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/multiselectdropdown-ppgj8f"},children:(0,s.jsx)(n.p,{children:"CodeSandbox"})})]})]})}function D(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(M,{...e})}):M(e)}},9580:(e,n,t)=>{t.d(n,{A:()=>i});var a,s,o=t(6540);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},l.apply(null,arguments)}const i=e=>{let{title:n,titleId:t,...i}=e;return o.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-check",viewBox:"0 0 24 24","aria-labelledby":t},i),n?o.createElement("title",{id:t},n):null,a||(a=o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=o.createElement("path",{d:"m5 12 5 5L20 7"})))}},9440:(e,n,t)=>{t.d(n,{I:()=>a});const a=()=>e=>{let{removeSelect:n}=e;return{getInputProps:()=>({onKeyDown:e=>!e.target.value&&"Backspace"===e.key&&n?.()})}}},9787:(e,n,t)=>{t.d(n,{W:()=>r});var a=t(5430),s=t(1975),o=t(6540),l=t(9301);const i=function(e){let{closeOnSelect:n=!0,toggleRef:t}=void 0===e?{}:e;return e=>{let{inputRef:a,open:s,setOpen:i,focusIndex:r,value:c,tmpValue:d}=e;const[u,p]=(0,l.e)(s,i),h=(0,o.useRef)(null),m=t||h,g=d||c||"";(0,o.useEffect)((()=>{s&&a.current?.focus()}),[s,a]);return{toggleRef:m,isInputEmpty:!g,getToggleProps:()=>({type:"button","aria-haspopup":!0,"aria-expanded":s,ref:m,onMouseDown:u,onClick:p,onKeyDown:e=>{const{key:n}=e;"ArrowDown"===n&&(e.preventDefault(),i(!0))}}),getInputProps:()=>({value:g,onKeyDown:e=>{const{key:t}=e;("Escape"===t||n&&r>=0&&"Enter"===t)&&setTimeout((()=>m.current?.focus()),0)}})}}},r=e=>(0,a.o)((0,s.d)({...e,select:!0,deselectOnClear:!1}),i(e))},8824:(e,n,t)=>{t.d(n,{L:()=>o});var a=t(4444),s=t(8355);const o=e=>{let{isEqual:n=a.g4,selected:t,onSelectChange:o,flipOnSelect:l,...i}=e;const r=e=>o?.(t.filter((t=>!n(e,t)))),c=e=>{e?r(e):t.length&&o?.(t.slice(0,t.length-1))},d=e=>t.findIndex((t=>n(e,t)))>=0;return{...(0,s.m)({...i,selected:t,isEqual:n,isItemSelected:d,onSelectChange:e=>{e&&(d(e)?l&&r(e):o?.([...t,e]))},removeSelect:c}),removeSelect:c}}},8748:(e,n,t)=>{t.d(n,{S:()=>v});var a,s,o=t(4164),l=t(6540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},i.apply(null,arguments)}const r=e=>{let{title:n,titleId:t,...o}=e;return l.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":t},o),n?l.createElement("title",{id:t},n):null,a||(a=l.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=l.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,d;function u(){return u=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var a in t)({}).hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},u.apply(null,arguments)}const p=e=>{let{title:n,titleId:t,...a}=e;return l.createElement("svg",u({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":t},a),n?l.createElement("title",{id:t},n):null,c||(c=l.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),d||(d=l.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",x="checked_X1o2";var f=t(4848);const v=e=>{let{label:n,checked:t,onChange:a}=e;return(0,f.jsxs)("label",{className:(0,o.$)(h,t&&x),children:[(0,f.jsx)("input",{className:m,type:"checkbox",checked:t,onChange:e=>a(e.target.checked)}),t?(0,f.jsx)(p,{className:g}):(0,f.jsx)(r,{className:g}),n]})}},2194:(e,n,t)=>{t.d(n,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,n,t)=>{t.d(n,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/df43c2ff.05ffb719.js b/assets/js/df43c2ff.05ffb719.js new file mode 100644 index 0000000..f519d81 --- /dev/null +++ b/assets/js/df43c2ff.05ffb719.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[533],{4666:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>E,contentTitle:()=>T,default:()=>D,frontMatter:()=>L,metadata:()=>a,toc:()=>W});const a=JSON.parse('{"id":"docs/features/multiSelect","title":"Multiple Selection","description":"<TabItem","source":"@site/docs/docs/features/multiSelect.mdx","sourceDirName":"docs/features","slug":"/docs/features/multiSelect","permalink":"/react-autocomplete/docs/features/multiSelect","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/features/multiSelect.mdx","tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4},"sidebar":"docsSidebar","previous":{"title":"Dropdown","permalink":"/react-autocomplete/docs/features/dropdown"},"next":{"title":"Multi-select Dropdown","permalink":"/react-autocomplete/docs/features/multiSelectDropdown"}}');var s=n(4848),l=n(8453),o=n(267),i=n(8860),r=n(1432);const c="import { useState } from 'react';\nimport { useMultiSelect, multiSelect } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\nconst MultiSelect = () => {\n const [value, setValue] = useState<string>();\n // You can set a few items to be selected initially\n const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);\n // It's up to you how to filter items based on the input value\n const items = value\n ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))\n : STATES;\n\n const {\n getLabelProps,\n getFocusCaptureProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n isItemSelected,\n removeSelect,\n focused,\n open,\n focusIndex,\n isInputEmpty\n // highlight-next-line\n } = useMultiSelect({\n // flipOnSelect: true or false,\n items,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n // highlight-next-line\n feature: multiSelect({\n // Options: rovingText, closeOnSelect\n rovingText: true\n })\n });\n\n return (\n <div>\n <label {...getLabelProps()} {...getFocusCaptureProps()}>\n State\n </label>\n <div\n {...getFocusCaptureProps()}\n style={{\n border: '2px solid',\n borderColor: focused ? '#007bff' : '#aaa',\n borderRadius: 4,\n display: 'flex',\n flexWrap: 'wrap',\n maxWidth: 320,\n gap: 6,\n padding: 6\n }}\n >\n {selected.map((item) => (\n <button key={item} onClick={() => removeSelect(item)}>\n {item}\n </button>\n ))}\n <div>\n <input placeholder=\"Type...\" {...getInputProps()} />\n {!isInputEmpty && <button {...getClearProps()}>X</button>}\n </div>\n <button {...getToggleProps()}>{open ? '\u2191' : '\u2193'}</button>\n </div>\n\n <ul\n {...getListProps()}\n style={{\n display: open ? 'block' : 'none',\n position: 'absolute',\n listStyle: 'none',\n color: '#000',\n background: '#fff',\n overflow: 'auto',\n maxHeight: 300,\n margin: 0,\n padding: 0\n }}\n >\n {items.length ? (\n items.map((item, index) => (\n <li\n style={{\n background: focusIndex === index ? '#ddd' : 'none'\n }}\n key={item}\n {...getItemProps({ item, index })}\n >\n {item}\n {isItemSelected(item) && '\u2714\ufe0f'}\n </li>\n ))\n ) : (\n <li>No options</li>\n )}\n </ul>\n </div>\n );\n};\n\nexport default MultiSelect;\n";var u=n(8785),d=n(6540),p=n(4164),h=n(8824),m=n(5430),g=n(1975),b=n(4444);var x=n(8321);var v=n(9440);const f=e=>(0,m.o)((0,g.d)({...e,select:!0}),(e=>{let{id:t,open:n,setOpen:a}=e;return{getToggleProps:()=>({...(0,b.l0)(t,n),onClick:()=>a(!n)})}}),(0,x.P)(),(()=>{const[e,t]=(0,d.useState)(!1);return{focused:e,getInputProps:()=>({onFocusCapture:()=>t(!0),onBlurCapture:()=>t(!1)})}}),(0,v.I)());var S=n(1236),k=n(7210),w=n(6217),j=n(9580),C=n(2194),A=n(7869);const I="multiInputRoot_vkoW",N="multiInputRootFocused_YrWw",y="multiInputWrap_R9km";var M=n(8748),P=n(9094);const O=()=>{const[e,t]=(0,d.useState)(!0),[n,a]=(0,d.useState)(!0),[l,o]=(0,d.useState)(!1),[i,r]=(0,d.useState)(),[c,u]=(0,d.useState)(["Alaska","Florida"]),m=i?C.A.filter((e=>e.toLowerCase().startsWith(i.toLowerCase()))):C.A,{getLabelProps:g,getFocusCaptureProps:b,getInputProps:x,getClearProps:v,getToggleProps:O,getListProps:L,getItemProps:T,isItemSelected:E,removeSelect:W,open:_,focusIndex:D,focused:F,isInputEmpty:H}=(0,h.L)({items:m,value:i,onChange:r,selected:c,onSelectChange:u,flipOnSelect:l,feature:f({rovingText:e,closeOnSelect:n})}),z=(0,P.i)(_,m);return(0,s.jsxs)("div",{className:A.A.wrap,children:[(0,s.jsxs)("div",{className:A.A.options,children:[(0,s.jsx)(M.S,{label:"rovingText",checked:e,onChange:t}),(0,s.jsx)(M.S,{label:"closeOnSelect",checked:n,onChange:a}),(0,s.jsx)(M.S,{label:"flipOnSelect",checked:l,onChange:o})]}),(0,s.jsx)("label",{className:A.A.label,...g(),...b(),children:"State"}),(0,s.jsxs)("div",{className:(0,p.$)(I,F&&N),...b(),children:[(0,s.jsxs)("div",{className:y,children:[c.map((e=>(0,s.jsxs)("div",{className:A.A.selectedItem,children:[e,(0,s.jsx)("span",{className:A.A.removeItem,onClick:()=>W(e),children:(0,s.jsx)(S.A,{})})]},e))),(0,s.jsxs)("div",{className:A.A.multiInputWrap,children:[(0,s.jsx)("input",{className:A.A.multiInput,placeholder:"Type...",...x()}),!H&&(0,s.jsx)("button",{className:A.A.clear,...v(),children:(0,s.jsx)(S.A,{})})]})]}),(0,s.jsx)("button",{className:A.A.toggle,...O(),children:_?(0,s.jsx)(w.A,{}):(0,s.jsx)(k.A,{})})]}),(0,s.jsx)("ul",{ref:z,className:(0,p.$)(A.A.multiList,A.A.scroll),...L(),style:{display:_?"block":"none"},children:m.length?m.map(((e,t)=>{const n=E(e);return(0,s.jsxs)("li",{className:(0,p.$)(A.A.itemCheckable,D===t&&A.A.focused,n&&A.A.checked),...T({item:e,index:t}),children:[e,n&&(0,s.jsx)(j.A,{})]},e)})):(0,s.jsx)("li",{className:A.A.noResult,children:"No options"})})]})},L={sidebar_position:4},T="Multiple Selection",E={},W=[];function _(e){const t={h1:"h1",header:"header",p:"p",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"multiple-selection",children:"Multiple Selection"})}),"\n",(0,s.jsx)(O,{}),"\n",(0,s.jsxs)(o.A,{children:[(0,s.jsx)(i.A,{value:"ts",label:"MultiSelect.tsx",children:(0,s.jsx)(r.A,{language:"tsx",children:c})}),(0,s.jsx)(i.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(r.A,{language:"ts",children:u.A})}),(0,s.jsx)(i.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/multiselect-8t5plm"},children:(0,s.jsx)(t.p,{children:"CodeSandbox"})})]})]})}function D(e={}){const{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(_,{...e})}):_(e)}},9580:(e,t,n)=>{n.d(t,{A:()=>i});var a,s,l=n(6540);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(null,arguments)}const i=e=>{let{title:t,titleId:n,...i}=e;return l.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-check",viewBox:"0 0 24 24","aria-labelledby":n},i),t?l.createElement("title",{id:n},t):null,a||(a=l.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=l.createElement("path",{d:"m5 12 5 5L20 7"})))}},9440:(e,t,n)=>{n.d(t,{I:()=>a});const a=()=>e=>{let{removeSelect:t}=e;return{getInputProps:()=>({onKeyDown:e=>!e.target.value&&"Backspace"===e.key&&t?.()})}}},8824:(e,t,n)=>{n.d(t,{L:()=>l});var a=n(4444),s=n(8355);const l=e=>{let{isEqual:t=a.g4,selected:n,onSelectChange:l,flipOnSelect:o,...i}=e;const r=e=>l?.(n.filter((n=>!t(e,n)))),c=e=>{e?r(e):n.length&&l?.(n.slice(0,n.length-1))},u=e=>n.findIndex((n=>t(e,n)))>=0;return{...(0,s.m)({...i,selected:n,isEqual:t,isItemSelected:u,onSelectChange:e=>{e&&(u(e)?o&&r(e):l?.([...n,e]))},removeSelect:c}),removeSelect:c}}},8748:(e,t,n)=>{n.d(t,{S:()=>v});var a,s,l=n(4164),o=n(6540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i.apply(null,arguments)}const r=e=>{let{title:t,titleId:n,...l}=e;return o.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":n},l),t?o.createElement("title",{id:n},t):null,a||(a=o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=o.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,u;function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},d.apply(null,arguments)}const p=e=>{let{title:t,titleId:n,...a}=e;return o.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":n},a),t?o.createElement("title",{id:n},t):null,c||(c=o.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),u||(u=o.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",b="checked_X1o2";var x=n(4848);const v=e=>{let{label:t,checked:n,onChange:a}=e;return(0,x.jsxs)("label",{className:(0,l.$)(h,n&&b),children:[(0,x.jsx)("input",{className:m,type:"checkbox",checked:n,onChange:e=>a(e.target.checked)}),n?(0,x.jsx)(p,{className:g}):(0,x.jsx)(r,{className:g}),t]})}},2194:(e,t,n)=>{n.d(t,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,t,n)=>{n.d(t,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/df43c2ff.7656845e.js b/assets/js/df43c2ff.7656845e.js deleted file mode 100644 index 93ae7e6..0000000 --- a/assets/js/df43c2ff.7656845e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[533],{4666:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>E,contentTitle:()=>T,default:()=>D,frontMatter:()=>L,metadata:()=>a,toc:()=>W});const a=JSON.parse('{"id":"docs/features/multiSelect","title":"Multiple Selection","description":"<TabItem","source":"@site/docs/docs/features/multiSelect.mdx","sourceDirName":"docs/features","slug":"/docs/features/multiSelect","permalink":"/react-autocomplete/docs/features/multiSelect","draft":false,"unlisted":false,"editUrl":"https://github.com/szhsin/react-autocomplete/tree/master/website/docs/docs/features/multiSelect.mdx","tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4},"sidebar":"docsSidebar","previous":{"title":"Dropdown","permalink":"/react-autocomplete/docs/features/dropdown"},"next":{"title":"Multi-select Dropdown","permalink":"/react-autocomplete/docs/features/multiSelectDropdown"}}');var s=n(4848),l=n(8453),o=n(267),i=n(8860),r=n(1432);const c="import { useState } from 'react';\nimport { useMultiSelect, multiSelect } from '@szhsin/react-autocomplete';\nimport STATES from '../../data/states';\n\nconst MultiSelect = () => {\n const [value, setValue] = useState<string>();\n // You can set a few items to be selected initially\n const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);\n // It's up to you how to filter items based on the input value\n const items = value\n ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))\n : STATES;\n\n const {\n getLabelProps,\n getFocusCaptureProps,\n getInputProps,\n getClearProps,\n getToggleProps,\n getListProps,\n getItemProps,\n isItemSelected,\n removeSelect,\n focused,\n open,\n focusIndex,\n isInputEmpty\n // highlight-next-line\n } = useMultiSelect({\n // flipOnSelect: true or false,\n items,\n value,\n onChange: setValue,\n selected,\n onSelectChange: setSelected,\n // highlight-next-line\n feature: multiSelect({\n // Options: rovingText, closeOnSelect\n rovingText: true\n })\n });\n\n return (\n <div>\n <label {...getLabelProps()} {...getFocusCaptureProps()}>\n State\n </label>\n <div\n {...getFocusCaptureProps()}\n style={{\n border: '2px solid',\n borderColor: focused ? '#007bff' : '#aaa',\n borderRadius: 4,\n display: 'flex',\n flexWrap: 'wrap',\n maxWidth: 320,\n gap: 6,\n padding: 6\n }}\n >\n {selected.map((item) => (\n <button key={item} onClick={() => removeSelect(item)}>\n {item}\n </button>\n ))}\n <div>\n <input placeholder=\"Type...\" {...getInputProps()} />\n {!isInputEmpty && <button {...getClearProps()}>X</button>}\n </div>\n <button {...getToggleProps()}>{open ? '\u2191' : '\u2193'}</button>\n </div>\n\n <ul\n {...getListProps()}\n style={{\n display: open ? 'block' : 'none',\n position: 'absolute',\n listStyle: 'none',\n color: '#000',\n background: '#fff',\n overflow: 'auto',\n maxHeight: 300,\n padding: 0\n }}\n >\n {items.length ? (\n items.map((item, index) => (\n <li\n style={{\n background: focusIndex === index ? '#ddd' : 'none'\n }}\n key={item}\n {...getItemProps({ item, index })}\n >\n {item}\n {isItemSelected(item) && '\u2714\ufe0f'}\n </li>\n ))\n ) : (\n <li>No options</li>\n )}\n </ul>\n </div>\n );\n};\n\nexport default MultiSelect;\n";var u=n(8785),d=n(6540),p=n(4164),h=n(8824),m=n(5430),g=n(1975),b=n(4444);var x=n(8321);var v=n(9440);const f=e=>(0,m.o)((0,g.d)({...e,select:!0}),(e=>{let{id:t,open:n,setOpen:a}=e;return{getToggleProps:()=>({...(0,b.l0)(t,n),onClick:()=>a(!n)})}}),(0,x.P)(),(()=>{const[e,t]=(0,d.useState)(!1);return{focused:e,getInputProps:()=>({onFocusCapture:()=>t(!0),onBlurCapture:()=>t(!1)})}}),(0,v.I)());var S=n(1236),k=n(7210),w=n(6217),j=n(9580),C=n(2194),A=n(7869);const I="multiInputRoot_vkoW",N="multiInputRootFocused_YrWw",y="multiInputWrap_R9km";var M=n(8748),P=n(9094);const O=()=>{const[e,t]=(0,d.useState)(!0),[n,a]=(0,d.useState)(!0),[l,o]=(0,d.useState)(!1),[i,r]=(0,d.useState)(),[c,u]=(0,d.useState)(["Alaska","Florida"]),m=i?C.A.filter((e=>e.toLowerCase().startsWith(i.toLowerCase()))):C.A,{getLabelProps:g,getFocusCaptureProps:b,getInputProps:x,getClearProps:v,getToggleProps:O,getListProps:L,getItemProps:T,isItemSelected:E,removeSelect:W,open:_,focusIndex:D,focused:F,isInputEmpty:H}=(0,h.L)({items:m,value:i,onChange:r,selected:c,onSelectChange:u,flipOnSelect:l,feature:f({rovingText:e,closeOnSelect:n})}),z=(0,P.i)(_,m);return(0,s.jsxs)("div",{className:A.A.wrap,children:[(0,s.jsxs)("div",{className:A.A.options,children:[(0,s.jsx)(M.S,{label:"rovingText",checked:e,onChange:t}),(0,s.jsx)(M.S,{label:"closeOnSelect",checked:n,onChange:a}),(0,s.jsx)(M.S,{label:"flipOnSelect",checked:l,onChange:o})]}),(0,s.jsx)("label",{className:A.A.label,...g(),...b(),children:"State"}),(0,s.jsxs)("div",{className:(0,p.$)(I,F&&N),...b(),children:[(0,s.jsxs)("div",{className:y,children:[c.map((e=>(0,s.jsxs)("div",{className:A.A.selectedItem,children:[e,(0,s.jsx)("span",{className:A.A.removeItem,onClick:()=>W(e),children:(0,s.jsx)(S.A,{})})]},e))),(0,s.jsxs)("div",{className:A.A.multiInputWrap,children:[(0,s.jsx)("input",{className:A.A.multiInput,placeholder:"Type...",...x()}),!H&&(0,s.jsx)("button",{className:A.A.clear,...v(),children:(0,s.jsx)(S.A,{})})]})]}),(0,s.jsx)("button",{className:A.A.toggle,...O(),children:_?(0,s.jsx)(w.A,{}):(0,s.jsx)(k.A,{})})]}),(0,s.jsx)("ul",{ref:z,className:(0,p.$)(A.A.multiList,A.A.scroll),...L(),style:{display:_?"block":"none"},children:m.length?m.map(((e,t)=>{const n=E(e);return(0,s.jsxs)("li",{className:(0,p.$)(A.A.itemCheckable,D===t&&A.A.focused,n&&A.A.checked),...T({item:e,index:t}),children:[e,n&&(0,s.jsx)(j.A,{})]},e)})):(0,s.jsx)("li",{className:A.A.noResult,children:"No options"})})]})},L={sidebar_position:4},T="Multiple Selection",E={},W=[];function _(e){const t={h1:"h1",header:"header",p:"p",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.header,{children:(0,s.jsx)(t.h1,{id:"multiple-selection",children:"Multiple Selection"})}),"\n",(0,s.jsx)(O,{}),"\n",(0,s.jsxs)(o.A,{children:[(0,s.jsx)(i.A,{value:"ts",label:"MultiSelect.tsx",children:(0,s.jsx)(r.A,{language:"tsx",children:c})}),(0,s.jsx)(i.A,{value:"data",label:"data/states.ts",children:(0,s.jsx)(r.A,{language:"ts",children:u.A})}),(0,s.jsx)(i.A,{value:"codesandbox",label:"CodeSandbox",attributes:{link:"https://codesandbox.io/p/sandbox/multiselect-8t5plm"},children:(0,s.jsx)(t.p,{children:"CodeSandbox"})})]})]})}function D(e={}){const{wrapper:t}={...(0,l.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(_,{...e})}):_(e)}},9580:(e,t,n)=>{n.d(t,{A:()=>i});var a,s,l=n(6540);function o(){return o=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},o.apply(null,arguments)}const i=e=>{let{title:t,titleId:n,...i}=e;return l.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-check",viewBox:"0 0 24 24","aria-labelledby":n},i),t?l.createElement("title",{id:n},t):null,a||(a=l.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=l.createElement("path",{d:"m5 12 5 5L20 7"})))}},9440:(e,t,n)=>{n.d(t,{I:()=>a});const a=()=>e=>{let{removeSelect:t}=e;return{getInputProps:()=>({onKeyDown:e=>!e.target.value&&"Backspace"===e.key&&t?.()})}}},8824:(e,t,n)=>{n.d(t,{L:()=>l});var a=n(4444),s=n(8355);const l=e=>{let{isEqual:t=a.g4,selected:n,onSelectChange:l,flipOnSelect:o,...i}=e;const r=e=>l?.(n.filter((n=>!t(e,n)))),c=e=>{e?r(e):n.length&&l?.(n.slice(0,n.length-1))},u=e=>n.findIndex((n=>t(e,n)))>=0;return{...(0,s.m)({...i,selected:n,isEqual:t,isItemSelected:u,onSelectChange:e=>{e&&(u(e)?o&&r(e):l?.([...n,e]))},removeSelect:c}),removeSelect:c}}},8748:(e,t,n)=>{n.d(t,{S:()=>v});var a,s,l=n(4164),o=n(6540);function i(){return i=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},i.apply(null,arguments)}const r=e=>{let{title:t,titleId:n,...l}=e;return o.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,className:"icon icon-tabler icons-tabler-outline icon-tabler-square",viewBox:"0 0 24 24","aria-labelledby":n},l),t?o.createElement("title",{id:n},t):null,a||(a=o.createElement("path",{stroke:"none",d:"M0 0h24v24H0z"})),s||(s=o.createElement("path",{d:"M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"})))};var c,u;function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},d.apply(null,arguments)}const p=e=>{let{title:t,titleId:n,...a}=e;return o.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",className:"icon icon-tabler icons-tabler-filled icon-tabler-square-check",viewBox:"0 0 24 24","aria-labelledby":n},a),t?o.createElement("title",{id:n},t):null,c||(c=o.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),u||(u=o.createElement("path",{d:"M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005.195v12.666c0 1.96-1.537 3.56-3.472 3.662l-.195.005H5.667a3.667 3.667 0 0 1-3.662-3.472L2 18.333V5.667c0-1.96 1.537-3.56 3.472-3.662L5.667 2zm-2.626 7.293a1 1 0 0 0-1.414 0L11 12.585l-1.293-1.292-.094-.083a1 1 0 0 0-1.32 1.497l2 2 .094.083a1 1 0 0 0 1.32-.083l4-4 .083-.094a1 1 0 0 0-.083-1.32"})))},h="label_lSHF",m="input_rDJm",g="icon_wu1w",b="checked_X1o2";var x=n(4848);const v=e=>{let{label:t,checked:n,onChange:a}=e;return(0,x.jsxs)("label",{className:(0,l.$)(h,n&&b),children:[(0,x.jsx)("input",{className:m,type:"checkbox",checked:n,onChange:e=>a(e.target.checked)}),n?(0,x.jsx)(p,{className:g}):(0,x.jsx)(r,{className:g}),t]})}},2194:(e,t,n)=>{n.d(t,{A:()=>a});const a=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]},8785:(e,t,n)=>{n.d(t,{A:()=>a});const a="// https://en.wikipedia.org/wiki/List_of_states_and_territories_of_the_United_States#States\n\nexport default [\n 'Alabama',\n 'Alaska',\n 'Arizona',\n 'Arkansas',\n 'California',\n 'Colorado',\n 'Connecticut',\n 'Delaware',\n 'Florida',\n 'Georgia',\n 'Hawaii',\n 'Idaho',\n 'Illinois',\n 'Indiana',\n 'Iowa',\n 'Kansas',\n 'Kentucky',\n 'Louisiana',\n 'Maine',\n 'Maryland',\n 'Massachusetts',\n 'Michigan',\n 'Minnesota',\n 'Mississippi',\n 'Missouri',\n 'Montana',\n 'Nebraska',\n 'Nevada',\n 'New Hampshire',\n 'New Jersey',\n 'New Mexico',\n 'New York',\n 'North Carolina',\n 'North Dakota',\n 'Ohio',\n 'Oklahoma',\n 'Oregon',\n 'Pennsylvania',\n 'Rhode Island',\n 'South Carolina',\n 'South Dakota',\n 'Tennessee',\n 'Texas',\n 'Utah',\n 'Vermont',\n 'Virginia',\n 'Washington',\n 'West Virginia',\n 'Wisconsin',\n 'Wyoming'\n];\n"}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.20f1a3fd.js b/assets/js/runtime~main.088ae4ca.js similarity index 91% rename from assets/js/runtime~main.20f1a3fd.js rename to assets/js/runtime~main.088ae4ca.js index e83403b..34579ac 100644 --- a/assets/js/runtime~main.20f1a3fd.js +++ b/assets/js/runtime~main.088ae4ca.js @@ -1 +1 @@ -(()=>{"use strict";var e,t,r,a,o,c={},f={};function n(e){var t=f[e];if(void 0!==t)return t.exports;var r=f[e]={exports:{}};return c[e].call(r.exports,r,r.exports,n),r.exports}n.m=c,e=[],n.O=(t,r,a,o)=>{if(!r){var c=1/0;for(b=0;b<e.length;b++){r=e[b][0],a=e[b][1],o=e[b][2];for(var f=!0,d=0;d<r.length;d++)(!1&o||c>=o)&&Object.keys(n.O).every((e=>n.O[e](r[d])))?r.splice(d--,1):(f=!1,o<c&&(c=o));if(f){e.splice(b--,1);var i=a();void 0!==i&&(t=i)}}return t}o=o||0;for(var b=e.length;b>0&&e[b-1][2]>o;b--)e[b]=e[b-1];e[b]=[r,a,o]},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,n.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var o=Object.create(null);n.r(o);var c={};t=t||[null,r({}),r([]),r(r)];for(var f=2&a&&e;"object"==typeof f&&!~t.indexOf(f);f=r(f))Object.getOwnPropertyNames(f).forEach((t=>c[t]=()=>e[t]));return c.default=()=>e,n.d(o,c),o},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>"assets/js/"+({2:"3c81d79b",40:"b392da1a",48:"a94703ab",73:"7c16c4e3",76:"common",81:"5b0a7cec",98:"a7bd4aaa",112:"7f0979ab",235:"a7456010",291:"cad54513",370:"d98ef911",401:"17896441",475:"bf386e8b",485:"5693c5fe",533:"df43c2ff",583:"1df93b7f",647:"5e95c892",742:"aba21aa0",775:"cb4cf1e8",846:"33c08305",875:"2a25499f",882:"b12c624c",907:"b118d1eb",992:"0c57edfa"}[e]||e)+"."+{2:"c6492338",40:"afe581c1",48:"95746edc",73:"b5c59f2d",76:"cee371bc",81:"902a0bd8",98:"7d009ef6",112:"6b97493c",235:"dee63f34",237:"7c981260",291:"5166a774",370:"04f18adb",401:"130d7320",475:"66f95b44",485:"7328aa1d",533:"7656845e",583:"52f5154c",647:"ad23d49a",742:"7f4ce930",775:"58a346e1",846:"61657389",875:"0932cbed",882:"27c0514b",907:"469ba26f",992:"442ddfd6"}[e]+".js",n.miniCssF=e=>{},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},o="website:",n.l=(e,t,r,c)=>{if(a[e])a[e].push(t);else{var f,d;if(void 0!==r)for(var i=document.getElementsByTagName("script"),b=0;b<i.length;b++){var u=i[b];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==o+r){f=u;break}}f||(d=!0,(f=document.createElement("script")).charset="utf-8",f.timeout=120,n.nc&&f.setAttribute("nonce",n.nc),f.setAttribute("data-webpack",o+r),f.src=e),a[e]=[t];var l=(t,r)=>{f.onerror=f.onload=null,clearTimeout(s);var o=a[e];if(delete a[e],f.parentNode&&f.parentNode.removeChild(f),o&&o.forEach((e=>e(r))),t)return t(r)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=l.bind(null,f.onerror),f.onload=l.bind(null,f.onload),d&&document.head.appendChild(f)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.p="/react-autocomplete/",n.gca=function(e){return e={17896441:"401","3c81d79b":"2",b392da1a:"40",a94703ab:"48","7c16c4e3":"73",common:"76","5b0a7cec":"81",a7bd4aaa:"98","7f0979ab":"112",a7456010:"235",cad54513:"291",d98ef911:"370",bf386e8b:"475","5693c5fe":"485",df43c2ff:"533","1df93b7f":"583","5e95c892":"647",aba21aa0:"742",cb4cf1e8:"775","33c08305":"846","2a25499f":"875",b12c624c:"882",b118d1eb:"907","0c57edfa":"992"}[e]||e,n.p+n.u(e)},(()=>{var e={354:0,869:0};n.f.j=(t,r)=>{var a=n.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(354|869)$/.test(t))e[t]=0;else{var o=new Promise(((r,o)=>a=e[t]=[r,o]));r.push(a[2]=o);var c=n.p+n.u(t),f=new Error;n.l(c,(r=>{if(n.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var o=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;f.message="Loading chunk "+t+" failed.\n("+o+": "+c+")",f.name="ChunkLoadError",f.type=o,f.request=c,a[1](f)}}),"chunk-"+t,t)}},n.O.j=t=>0===e[t];var t=(t,r)=>{var a,o,c=r[0],f=r[1],d=r[2],i=0;if(c.some((t=>0!==e[t]))){for(a in f)n.o(f,a)&&(n.m[a]=f[a]);if(d)var b=d(n)}for(t&&t(r);i<c.length;i++)o=c[i],n.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return n.O(b)},r=self.webpackChunkwebsite=self.webpackChunkwebsite||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})()})(); \ No newline at end of file +(()=>{"use strict";var e,t,r,a,o,c={},f={};function n(e){var t=f[e];if(void 0!==t)return t.exports;var r=f[e]={exports:{}};return c[e].call(r.exports,r,r.exports,n),r.exports}n.m=c,e=[],n.O=(t,r,a,o)=>{if(!r){var c=1/0;for(b=0;b<e.length;b++){r=e[b][0],a=e[b][1],o=e[b][2];for(var f=!0,d=0;d<r.length;d++)(!1&o||c>=o)&&Object.keys(n.O).every((e=>n.O[e](r[d])))?r.splice(d--,1):(f=!1,o<c&&(c=o));if(f){e.splice(b--,1);var i=a();void 0!==i&&(t=i)}}return t}o=o||0;for(var b=e.length;b>0&&e[b-1][2]>o;b--)e[b]=e[b-1];e[b]=[r,a,o]},n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,n.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var o=Object.create(null);n.r(o);var c={};t=t||[null,r({}),r([]),r(r)];for(var f=2&a&&e;"object"==typeof f&&!~t.indexOf(f);f=r(f))Object.getOwnPropertyNames(f).forEach((t=>c[t]=()=>e[t]));return c.default=()=>e,n.d(o,c),o},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>"assets/js/"+({2:"3c81d79b",40:"b392da1a",48:"a94703ab",73:"7c16c4e3",76:"common",81:"5b0a7cec",98:"a7bd4aaa",112:"7f0979ab",235:"a7456010",291:"cad54513",370:"d98ef911",401:"17896441",475:"bf386e8b",485:"5693c5fe",533:"df43c2ff",583:"1df93b7f",647:"5e95c892",742:"aba21aa0",775:"cb4cf1e8",846:"33c08305",875:"2a25499f",882:"b12c624c",907:"b118d1eb",992:"0c57edfa"}[e]||e)+"."+{2:"c157bcf5",40:"2f301d47",48:"95746edc",73:"b5c59f2d",76:"156d2fcd",81:"18c79e79",98:"7d009ef6",112:"0d1dd6b3",235:"dee63f34",237:"7c981260",291:"5166a774",370:"7d89ed25",401:"130d7320",475:"66f95b44",485:"7328aa1d",533:"05ffb719",583:"52f5154c",647:"ad23d49a",742:"7f4ce930",775:"07b385a9",846:"c311c591",875:"754b59d4",882:"ff346523",907:"739b990f",992:"442ddfd6"}[e]+".js",n.miniCssF=e=>{},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},o="website:",n.l=(e,t,r,c)=>{if(a[e])a[e].push(t);else{var f,d;if(void 0!==r)for(var i=document.getElementsByTagName("script"),b=0;b<i.length;b++){var u=i[b];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==o+r){f=u;break}}f||(d=!0,(f=document.createElement("script")).charset="utf-8",f.timeout=120,n.nc&&f.setAttribute("nonce",n.nc),f.setAttribute("data-webpack",o+r),f.src=e),a[e]=[t];var l=(t,r)=>{f.onerror=f.onload=null,clearTimeout(s);var o=a[e];if(delete a[e],f.parentNode&&f.parentNode.removeChild(f),o&&o.forEach((e=>e(r))),t)return t(r)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:f}),12e4);f.onerror=l.bind(null,f.onerror),f.onload=l.bind(null,f.onload),d&&document.head.appendChild(f)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.p="/react-autocomplete/",n.gca=function(e){return e={17896441:"401","3c81d79b":"2",b392da1a:"40",a94703ab:"48","7c16c4e3":"73",common:"76","5b0a7cec":"81",a7bd4aaa:"98","7f0979ab":"112",a7456010:"235",cad54513:"291",d98ef911:"370",bf386e8b:"475","5693c5fe":"485",df43c2ff:"533","1df93b7f":"583","5e95c892":"647",aba21aa0:"742",cb4cf1e8:"775","33c08305":"846","2a25499f":"875",b12c624c:"882",b118d1eb:"907","0c57edfa":"992"}[e]||e,n.p+n.u(e)},(()=>{var e={354:0,869:0};n.f.j=(t,r)=>{var a=n.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(354|869)$/.test(t))e[t]=0;else{var o=new Promise(((r,o)=>a=e[t]=[r,o]));r.push(a[2]=o);var c=n.p+n.u(t),f=new Error;n.l(c,(r=>{if(n.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var o=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;f.message="Loading chunk "+t+" failed.\n("+o+": "+c+")",f.name="ChunkLoadError",f.type=o,f.request=c,a[1](f)}}),"chunk-"+t,t)}},n.O.j=t=>0===e[t];var t=(t,r)=>{var a,o,c=r[0],f=r[1],d=r[2],i=0;if(c.some((t=>0!==e[t]))){for(a in f)n.o(f,a)&&(n.m[a]=f[a]);if(d)var b=d(n)}for(t&&t(r);i<c.length;i++)o=c[i],n.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return n.O(b)},r=self.webpackChunkwebsite=self.webpackChunkwebsite||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})()})(); \ No newline at end of file diff --git a/docs/design/index.html b/docs/design/index.html index 0dfa6d9..65771a9 100644 --- a/docs/design/index.html +++ b/docs/design/index.html @@ -4,7 +4,7 @@ <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.6.2"> <title data-rh="true">Design Concept | React Autocomplete - + diff --git a/docs/extras/action-items/index.html b/docs/extras/action-items/index.html index f257a8d..509b5d7 100644 --- a/docs/extras/action-items/index.html +++ b/docs/extras/action-items/index.html @@ -4,13 +4,13 @@ Action items | React Autocomplete - +

    Action items

    You can specify items in the list as actions and define what happens after they are triggered. This is useful for extending functionality, such as building a 'creatable' autocomplete feature.

    -
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import FRUITS from '../../data/fruits';

    type Item = { value: string; creatable?: boolean };

    const ActionItems = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<Item>();

      const [fruits, setFruit] = useState(FRUITS);
      const items: Item[] = fruits
        .filter((fruit) => fruit.toLowerCase().includes((value || '').toLowerCase()))
        .map((fruit) => ({ value: fruit }));
      // If the value does not exist in the list of items, add a creatable action to the end.
      if (value && !items.find((item) => !item.creatable && item.value === value)) {
        items.push({ value, creatable: true });
      }

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        isItemSelected,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        getItemValue: (item) => item.value,
        isEqual: (a, b) => a?.value === b?.value,
        // Specify how to determine if an item is an action,
        isItemAction: (item) => !!item.creatable,
        // and what happens after the action is triggered.
        onAction: (item) => {
          if (item.creatable) {
            setSelected({ value: item.value });
            setFruit([item.value, ...fruits]);
          }
        },
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            Fruit
          </label>

          <div>
            <input placeholder="Select or create..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  {...getItemProps({ item, index })}
                  key={item.value}
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    textDecoration: isItemSelected(item) ? 'underline' : 'none'
                  }}
                >
                  {item.creatable ? `Create "${item.value}"` : item.value}
                </li>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default ActionItems;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import FRUITS from '../../data/fruits';

    type Item = { value: string; creatable?: boolean };

    const ActionItems = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<Item>();

      const [fruits, setFruit] = useState(FRUITS);
      const items: Item[] = fruits
        .filter((fruit) => fruit.toLowerCase().includes((value || '').toLowerCase()))
        .map((fruit) => ({ value: fruit }));
      // If the value does not exist in the list of items, add a creatable action to the end.
      if (value && !items.find((item) => !item.creatable && item.value === value)) {
        items.push({ value, creatable: true });
      }

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        isItemSelected,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        getItemValue: (item) => item.value,
        isEqual: (a, b) => a?.value === b?.value,
        // Specify how to determine if an item is an action,
        isItemAction: (item) => !!item.creatable,
        // and what happens after the action is triggered.
        onAction: (item) => {
          if (item.creatable) {
            setSelected({ value: item.value });
            setFruit([item.value, ...fruits]);
          }
        },
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            Fruit
          </label>

          <div>
            <input placeholder="Select or create..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              margin: 0,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  {...getItemProps({ item, index })}
                  key={item.value}
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    textDecoration: isItemSelected(item) ? 'underline' : 'none'
                  }}
                >
                  {item.creatable ? `Create "${item.value}"` : item.value}
                </li>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default ActionItems;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/extras/async/index.html b/docs/extras/async/index.html index fe15bf6..f63f266 100644 --- a/docs/extras/async/index.html +++ b/docs/extras/async/index.html @@ -4,13 +4,13 @@ Async example | React Autocomplete - +

    Async example

    When the list of items is fetched asynchronously, instead of computing them directly in the render body, the items should be stored in a local state, a global state store, or managed by a data-fetching library like React Query.

    -
    import { useState } from 'react';
    import { useCombobox, autocompleteLite } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    // Simulate obtaining data from a remote server
    let id = 0;
    const fetchData = (value?: string) => {
      clearTimeout(id);
      if (!value || !value.trim()) return;

      return new Promise<string[]>((res) => {
        id = window.setTimeout(
          () =>
            res(STATES.filter((item) => item.toLowerCase().includes(value.toLowerCase().trim()))),
          500
        );
      });
    };

    const AsyncExample = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();
      const [items, setItems] = useState<string[]>();

      const {
        getInputProps,
        getClearProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items: items || [],
        value,
        // Whenever the user types in the input, fetch data remotely and update the items.
        onChange: async (newValue) => {
          setValue(newValue);
          setItems(await fetchData(newValue));
        },
        selected,
        onSelectChange: setSelected,
        feature: autocompleteLite({
          select: true // or false
        })
      });

      return (
        <div>
          <div>
            <input placeholder="Type to search..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
          </div>

          {open && items && (
            <ul
              {...getListProps()}
              style={{
                position: 'absolute',
                listStyle: 'none',
                color: '#000',
                background: '#fff',
                overflow: 'auto',
                maxHeight: 300,
                padding: 0
              }}
            >
              {items.length ? (
                items.map((item, index) => (
                  <li
                    key={item}
                    style={{
                      background: focusIndex === index ? '#ddd' : 'none',
                      textDecoration: selected === item ? 'underline' : 'none'
                    }}
                    {...getItemProps({ item, index })}
                  >
                    {item}
                  </li>
                ))
              ) : (
                <li>No options</li>
              )}
            </ul>
          )}
        </div>
      );
    };

    export default AsyncExample;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useCombobox, autocompleteLite } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    // Simulate obtaining data from a remote server
    let id = 0;
    const fetchData = (value?: string) => {
      clearTimeout(id);
      if (!value || !value.trim()) return;

      return new Promise<string[]>((res) => {
        id = window.setTimeout(
          () =>
            res(STATES.filter((item) => item.toLowerCase().includes(value.toLowerCase().trim()))),
          500
        );
      });
    };

    const AsyncExample = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();
      const [items, setItems] = useState<string[]>();

      const {
        getInputProps,
        getClearProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items: items || [],
        value,
        // Whenever the user types in the input, fetch data remotely and update the items.
        onChange: async (newValue) => {
          setValue(newValue);
          setItems(await fetchData(newValue));
        },
        selected,
        onSelectChange: setSelected,
        feature: autocompleteLite({
          select: true // or false
        })
      });

      return (
        <div>
          <div>
            <input placeholder="Type to search..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
          </div>

          {open && items && (
            <ul
              {...getListProps()}
              style={{
                position: 'absolute',
                listStyle: 'none',
                color: '#000',
                background: '#fff',
                overflow: 'auto',
                maxHeight: 300,
                margin: 0,
                padding: 0
              }}
            >
              {items.length ? (
                items.map((item, index) => (
                  <li
                    key={item}
                    style={{
                      background: focusIndex === index ? '#ddd' : 'none',
                      textDecoration: selected === item ? 'underline' : 'none'
                    }}
                    {...getItemProps({ item, index })}
                  >
                    {item}
                  </li>
                ))
              ) : (
                <li>No options</li>
              )}
            </ul>
          )}
        </div>
      );
    };

    export default AsyncExample;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/extras/disabled-items/index.html b/docs/extras/disabled-items/index.html index 07fa2ba..b36c2b4 100644 --- a/docs/extras/disabled-items/index.html +++ b/docs/extras/disabled-items/index.html @@ -4,13 +4,13 @@ Disabled items | React Autocomplete - +

    Disabled items

    Items can be disabled, preventing them from being interacted with or selected.

    -
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import FRUITS from '../../data/fruits';

    const isItemDisabled = (item: string) => item.includes('berry');

    const DisabledItems = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();
      const items = value
        ? FRUITS.filter((item) => item.toLowerCase().includes(value.toLowerCase()))
        : FRUITS;

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        isItemDisabled,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            Fruit (no berries)
          </label>

          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    textDecoration: selected === item ? 'underline' : 'none',
                    color: isItemDisabled(item) ? '#999' : '#000'
                  }}
                  key={item}
                  {...getItemProps({ item, index })}
                >
                  {item}
                </li>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default DisabledItems;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import FRUITS from '../../data/fruits';

    const isItemDisabled = (item: string) => item.includes('berry');

    const DisabledItems = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();
      const items = value
        ? FRUITS.filter((item) => item.toLowerCase().includes(value.toLowerCase()))
        : FRUITS;

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        isItemDisabled,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            Fruit (no berries)
          </label>

          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              margin: 0,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    textDecoration: selected === item ? 'underline' : 'none',
                    color: isItemDisabled(item) ? '#999' : '#000'
                  }}
                  key={item}
                  {...getItemProps({ item, index })}
                >
                  {item}
                </li>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default DisabledItems;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/extras/grouped/index.html b/docs/extras/grouped/index.html index c4fc0f6..6032a1b 100644 --- a/docs/extras/grouped/index.html +++ b/docs/extras/grouped/index.html @@ -4,12 +4,12 @@ Grouped items | React Autocomplete - +

    Grouped items

    -
    import React, { useState } from 'react';
    import { useCombobox, autocomplete, mergeGroupedItems } from '@szhsin/react-autocomplete';
    import GROUPED from '../../data/states-grouped';

    const Grouped = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();

      // It's up to you how to filter items based on the input value
      const groups = value
        ? GROUPED.map(({ initial, states }) => ({
            initial,
            states: states.filter((item) => item.toLowerCase().includes(value.toLowerCase()))
          })).filter((group) => group.states.length > 0)
        : GROUPED;

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        // The main hook always expects a one-dimensional array,
        // and we provide a `mergeGroupedItems` utility to merge the groups.
        items: mergeGroupedItems({ groups, getItemsInGroup: (group) => group.states }),
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      let itemIndex = -1;

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            State
          </label>

          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              padding: 0
            }}
          >
            {groups.length ? (
              groups.map(({ initial, states }) => (
                <React.Fragment key={initial}>
                  <li>{initial}</li>
                  {states.map((item) => {
                    // `itemIndex` should be the index within the flattened array of items.
                    itemIndex++;
                    return (
                      <li
                        key={item}
                        {...getItemProps({ item, index: itemIndex })}
                        style={{
                          background: focusIndex === itemIndex ? '#ddd' : 'none',
                          textDecoration: selected === item ? 'underline' : 'none'
                        }}
                      >
                        {item}
                      </li>
                    );
                  })}
                </React.Fragment>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default Grouped;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import React, { useState } from 'react';
    import { useCombobox, autocomplete, mergeGroupedItems } from '@szhsin/react-autocomplete';
    import GROUPED from '../../data/states-grouped';

    const Grouped = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();

      // It's up to you how to filter items based on the input value
      const groups = value
        ? GROUPED.map(({ initial, states }) => ({
            initial,
            states: states.filter((item) => item.toLowerCase().includes(value.toLowerCase()))
          })).filter((group) => group.states.length > 0)
        : GROUPED;

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        // The main hook always expects a one-dimensional array,
        // and we provide a `mergeGroupedItems` utility to merge the groups.
        items: mergeGroupedItems({ groups, getItemsInGroup: (group) => group.states }),
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      let itemIndex = -1;

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            State
          </label>

          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              margin: 0,
              padding: 0
            }}
          >
            {groups.length ? (
              groups.map(({ initial, states }) => (
                <React.Fragment key={initial}>
                  <li>{initial}</li>
                  {states.map((item) => {
                    // `itemIndex` should be the index within the flattened array of items.
                    itemIndex++;
                    return (
                      <li
                        key={item}
                        {...getItemProps({ item, index: itemIndex })}
                        style={{
                          background: focusIndex === itemIndex ? '#ddd' : 'none',
                          textDecoration: selected === item ? 'underline' : 'none'
                        }}
                      >
                        {item}
                      </li>
                    );
                  })}
                </React.Fragment>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default Grouped;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/extras/object-items/index.html b/docs/extras/object-items/index.html index ff8f0f3..0ea1bd1 100644 --- a/docs/extras/object-items/index.html +++ b/docs/extras/object-items/index.html @@ -4,13 +4,13 @@ Object items | React Autocomplete - +

    Object items

    List items can be not only strings but also objects.

    -
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states-obj';

    const ObjectItems = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<{ name: string; abbr: string }>();
      const items = value
        ? STATES.filter((item) => item.name.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        isItemSelected,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        // When items are objects, you must specify how to retrieve the text value from the item.
        getItemValue: (item) => item.name,

        // If item references change on each render, you should define how items are equal.
        // By default, it compares object references if `isEqual` is not provided.
        isEqual: (item1, item2) => item1?.abbr === item2?.abbr,

        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            State
          </label>

          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    // Use `isItemSelected` to check if an item has been selected
                    textDecoration: isItemSelected(item) ? 'underline' : 'none'
                  }}
                  key={item.abbr}
                  {...getItemProps({ item, index })}
                >
                  {item.name}
                </li>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default ObjectItems;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states-obj';

    const ObjectItems = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<{ name: string; abbr: string }>();
      const items = value
        ? STATES.filter((item) => item.name.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        isItemSelected,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        // When items are objects, you must specify how to retrieve the text value from the item.
        getItemValue: (item) => item.name,

        // If item references change on each render, you should define how items are equal.
        // By default, it compares object references if `isEqual` is not provided.
        isEqual: (item1, item2) => item1?.abbr === item2?.abbr,

        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            State
          </label>

          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              margin: 0,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    // Use `isItemSelected` to check if an item has been selected
                    textDecoration: isItemSelected(item) ? 'underline' : 'none'
                  }}
                  key={item.abbr}
                  {...getItemProps({ item, index })}
                >
                  {item.name}
                </li>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default ObjectItems;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/extras/select-only/index.html b/docs/extras/select-only/index.html index 17733c0..c06e05d 100644 --- a/docs/extras/select-only/index.html +++ b/docs/extras/select-only/index.html @@ -4,13 +4,13 @@ Select-Only Combobox | React Autocomplete - +

    Select-Only Combobox

    This is not a separate feature, but it can be easily achieved by by making the input read-only.

    -
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import FRUITS from '../../data/fruits';

    const SelectOnly = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        // items are fixed
        items: FRUITS,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            Fruit
          </label>

          <div>
            <input
              // Make the input readonly
              readOnly
              placeholder="Select..."
              {...getInputProps()}
            />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              padding: 0
            }}
          >
            {FRUITS.map((item, index) => (
              <li
                style={{
                  background: focusIndex === index ? '#ddd' : 'none',
                  textDecoration: selected === item ? 'underline' : 'none'
                }}
                key={item}
                {...getItemProps({ item, index })}
              >
                {item}
              </li>
            ))}
          </ul>
        </div>
      );
    };

    export default SelectOnly;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import FRUITS from '../../data/fruits';

    const SelectOnly = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();

      const {
        getFocusCaptureProps,
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        // items are fixed
        items: FRUITS,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({ select: true })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            Fruit
          </label>

          <div>
            <input
              // Make the input readonly
              readOnly
              placeholder="Select..."
              {...getInputProps()}
            />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              margin: 0,
              padding: 0
            }}
          >
            {FRUITS.map((item, index) => (
              <li
                style={{
                  background: focusIndex === index ? '#ddd' : 'none',
                  textDecoration: selected === item ? 'underline' : 'none'
                }}
                key={item}
                {...getItemProps({ item, index })}
              >
                {item}
              </li>
            ))}
          </ul>
        </div>
      );
    };

    export default SelectOnly;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/extras/virtualization/index.html b/docs/extras/virtualization/index.html index d2fd6d8..bcb6520 100644 --- a/docs/extras/virtualization/index.html +++ b/docs/extras/virtualization/index.html @@ -4,7 +4,7 @@ Virtualization | React Autocomplete - + diff --git a/docs/features/autocomplete/index.html b/docs/features/autocomplete/index.html index de08dff..cbae0ac 100644 --- a/docs/features/autocomplete/index.html +++ b/docs/features/autocomplete/index.html @@ -4,14 +4,14 @@ Autocomplete | React Autocomplete - +

    Autocomplete

    The autocomplete feature supports two modes, each offering a few available options.

    (the default setting) The text entered in the input field is not restricted to the items in the dropdown list.
    The allowed text in the input field is restricted to the items in the dropdown list.
    -
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const Autocomplete = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();

      // It's up to you how to filter items based on the input value
      const items = value
        ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({
          // The `select` option controls autocomplete in free or select mode
          select: true // or false
          // Other options: rovingText, deselectOnClear, deselectOnChange, closeOnSelect
        })
      });

      return (
        <div>
          <label {...getLabelProps()}>State</label>
          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    textDecoration: selected === item ? 'underline' : 'none'
                  }}
                  key={item}
                  {...getItemProps({ item, index })}
                >
                  {item}
                </li>
              ))
            ) : (
              <li>No results</li>
            )}
          </ul>
        </div>
      );
    };

    export default Autocomplete;
    +
    import { useState } from 'react';
    import { useCombobox, autocomplete } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const Autocomplete = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();

      // It's up to you how to filter items based on the input value
      const items = value
        ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: autocomplete({
          // The `select` option controls autocomplete in free or select mode
          select: true // or false
          // Other options: rovingText, deselectOnClear, deselectOnChange, closeOnSelect
        })
      });

      return (
        <div>
          <label {...getLabelProps()}>State</label>
          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              margin: 0,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    textDecoration: selected === item ? 'underline' : 'none'
                  }}
                  key={item}
                  {...getItemProps({ item, index })}
                >
                  {item}
                </li>
              ))
            ) : (
              <li>No results</li>
            )}
          </ul>
        </div>
      );
    };

    export default Autocomplete;
    info

    When comparing autocomplete to autocompleteLite, the former adds support for the label and input toggle. If you don't need these features, you can simply use autocompleteLite, which is more lightweight.

    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/features/dropdown/index.html b/docs/features/dropdown/index.html index 079450e..8db716d 100644 --- a/docs/features/dropdown/index.html +++ b/docs/features/dropdown/index.html @@ -4,12 +4,12 @@ Dropdown | React Autocomplete - +

    Dropdown

    -
    import { useState } from 'react';
    import { useCombobox, dropdown } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const Dropdown = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();
      // It's up to you how to filter items based on the input value
      const items = value
        ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        // flipOnSelect: true or false,
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: dropdown({
          // Options: rovingText, closeOnSelect
          rovingText: true
        })
      });

      return (
        <div>
          <button {...getToggleProps()}>{selected || 'Select a state'}</button>

          {open && (
            <div
              {...getListProps()}
              style={{
                position: 'absolute',
                color: '#000',
                background: '#fff'
              }}
            >
              <div>
                <input placeholder="Type to search..." {...getInputProps()} />
                {!isInputEmpty && <button {...getClearProps()}>X</button>}
              </div>
              <ul
                style={{
                  listStyle: 'none',
                  overflow: 'auto',
                  maxHeight: 300,
                  padding: 0
                }}
              >
                {items.length ? (
                  items.map((item, index) => (
                    <li
                      style={{
                        background: focusIndex === index ? '#ddd' : 'none',
                        textDecoration: selected === item ? 'underline' : 'none'
                      }}
                      key={item}
                      {...getItemProps({ item, index })}
                    >
                      {item}
                    </li>
                  ))
                ) : (
                  <li>No options</li>
                )}
              </ul>
            </div>
          )}
        </div>
      );
    };

    export default Dropdown;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useCombobox, dropdown } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const Dropdown = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();
      // It's up to you how to filter items based on the input value
      const items = value
        ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        // flipOnSelect: true or false,
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: dropdown({
          // Options: rovingText, closeOnSelect
          rovingText: true
        })
      });

      return (
        <div>
          <button {...getToggleProps()}>{selected || 'Select a state'}</button>

          {open && (
            <div
              {...getListProps()}
              style={{
                position: 'absolute',
                color: '#000',
                background: '#fff'
              }}
            >
              <div>
                <input placeholder="Type to search..." {...getInputProps()} />
                {!isInputEmpty && <button {...getClearProps()}>X</button>}
              </div>
              <ul
                style={{
                  listStyle: 'none',
                  overflow: 'auto',
                  maxHeight: 300,
                  margin: 0,
                  padding: 0
                }}
              >
                {items.length ? (
                  items.map((item, index) => (
                    <li
                      style={{
                        background: focusIndex === index ? '#ddd' : 'none',
                        textDecoration: selected === item ? 'underline' : 'none'
                      }}
                      key={item}
                      {...getItemProps({ item, index })}
                    >
                      {item}
                    </li>
                  ))
                ) : (
                  <li>No options</li>
                )}
              </ul>
            </div>
          )}
        </div>
      );
    };

    export default Dropdown;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/features/multiSelect/index.html b/docs/features/multiSelect/index.html index e506a60..bcf7edc 100644 --- a/docs/features/multiSelect/index.html +++ b/docs/features/multiSelect/index.html @@ -4,12 +4,12 @@ Multiple Selection | React Autocomplete - +

    Multiple Selection

    Alaska
    Florida
    -
    import { useState } from 'react';
    import { useMultiSelect, multiSelect } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const MultiSelect = () => {
      const [value, setValue] = useState<string>();
      // You can set a few items to be selected initially
      const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);
      // It's up to you how to filter items based on the input value
      const items = value
        ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getLabelProps,
        getFocusCaptureProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        isItemSelected,
        removeSelect,
        focused,
        open,
        focusIndex,
        isInputEmpty
      } = useMultiSelect({
        // flipOnSelect: true or false,
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: multiSelect({
          // Options: rovingText, closeOnSelect
          rovingText: true
        })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            State
          </label>
          <div
            {...getFocusCaptureProps()}
            style={{
              border: '2px solid',
              borderColor: focused ? '#007bff' : '#aaa',
              borderRadius: 4,
              display: 'flex',
              flexWrap: 'wrap',
              maxWidth: 320,
              gap: 6,
              padding: 6
            }}
          >
            {selected.map((item) => (
              <button key={item} onClick={() => removeSelect(item)}>
                {item}
              </button>
            ))}
            <div>
              <input placeholder="Type..." {...getInputProps()} />
              {!isInputEmpty && <button {...getClearProps()}>X</button>}
            </div>
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none'
                  }}
                  key={item}
                  {...getItemProps({ item, index })}
                >
                  {item}
                  {isItemSelected(item) && '✔️'}
                </li>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default MultiSelect;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useMultiSelect, multiSelect } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const MultiSelect = () => {
      const [value, setValue] = useState<string>();
      // You can set a few items to be selected initially
      const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);
      // It's up to you how to filter items based on the input value
      const items = value
        ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getLabelProps,
        getFocusCaptureProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        isItemSelected,
        removeSelect,
        focused,
        open,
        focusIndex,
        isInputEmpty
      } = useMultiSelect({
        // flipOnSelect: true or false,
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: multiSelect({
          // Options: rovingText, closeOnSelect
          rovingText: true
        })
      });

      return (
        <div>
          <label {...getLabelProps()} {...getFocusCaptureProps()}>
            State
          </label>
          <div
            {...getFocusCaptureProps()}
            style={{
              border: '2px solid',
              borderColor: focused ? '#007bff' : '#aaa',
              borderRadius: 4,
              display: 'flex',
              flexWrap: 'wrap',
              maxWidth: 320,
              gap: 6,
              padding: 6
            }}
          >
            {selected.map((item) => (
              <button key={item} onClick={() => removeSelect(item)}>
                {item}
              </button>
            ))}
            <div>
              <input placeholder="Type..." {...getInputProps()} />
              {!isInputEmpty && <button {...getClearProps()}>X</button>}
            </div>
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              margin: 0,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none'
                  }}
                  key={item}
                  {...getItemProps({ item, index })}
                >
                  {item}
                  {isItemSelected(item) && '✔️'}
                </li>
              ))
            ) : (
              <li>No options</li>
            )}
          </ul>
        </div>
      );
    };

    export default MultiSelect;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/features/multiSelectDropdown/index.html b/docs/features/multiSelectDropdown/index.html index 1ee31b1..7dc6698 100644 --- a/docs/features/multiSelectDropdown/index.html +++ b/docs/features/multiSelectDropdown/index.html @@ -4,12 +4,12 @@ Multiple Selection in Dropdown | React Autocomplete - +

    Multiple Selection in Dropdown

    -
    import { useState } from 'react';
    import { useMultiSelect, multiSelectDropdown } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const MultiSelectDropdown = () => {
      const [value, setValue] = useState<string>();
      // You can set a few items to be selected initially
      const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);
      // It's up to you how to filter items based on the input value
      const items = value
        ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        isItemSelected,
        removeSelect,
        open,
        focusIndex,
        isInputEmpty
      } = useMultiSelect({
        flipOnSelect: true, // or false
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: multiSelectDropdown({
          // Options: rovingText, closeOnSelect
          rovingText: true,
          closeOnSelect: false
        })
      });

      return (
        <div>
          <button {...getToggleProps()}>{selected.length} selected</button>
          {open && (
            <div
              {...getListProps()}
              style={{
                position: 'absolute',
                color: '#000',
                background: '#fff',
                maxWidth: 320
              }}
            >
              <div
                style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                  border: '2px solid #aaa',
                  gap: 6,
                  padding: 6
                }}
              >
                {selected.map((item) => (
                  <button key={item} onClick={() => removeSelect(item)}>
                    {item}
                  </button>
                ))}
                <div>
                  <input placeholder="Type..." {...getInputProps()} />
                  {!isInputEmpty && <button {...getClearProps()}>X</button>}
                </div>
              </div>

              <ul
                style={{
                  listStyle: 'none',
                  overflow: 'auto',
                  maxHeight: 300,
                  padding: 0
                }}
              >
                {items.length ? (
                  items.map((item, index) => (
                    <li
                      style={{
                        background: focusIndex === index ? '#ddd' : 'none'
                      }}
                      key={item}
                      {...getItemProps({ item, index })}
                    >
                      {item}
                      {isItemSelected(item) && '✔️'}
                    </li>
                  ))
                ) : (
                  <li>No options</li>
                )}
              </ul>
            </div>
          )}
        </div>
      );
    };

    export default MultiSelectDropdown;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useMultiSelect, multiSelectDropdown } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const MultiSelectDropdown = () => {
      const [value, setValue] = useState<string>();
      // You can set a few items to be selected initially
      const [selected, setSelected] = useState<string[]>(['Alaska', 'Florida']);
      // It's up to you how to filter items based on the input value
      const items = value
        ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase()))
        : STATES;

      const {
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        isItemSelected,
        removeSelect,
        open,
        focusIndex,
        isInputEmpty
      } = useMultiSelect({
        flipOnSelect: true, // or false
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: multiSelectDropdown({
          // Options: rovingText, closeOnSelect
          rovingText: true,
          closeOnSelect: false
        })
      });

      return (
        <div>
          <button {...getToggleProps()}>{selected.length} selected</button>
          {open && (
            <div
              {...getListProps()}
              style={{
                position: 'absolute',
                color: '#000',
                background: '#fff',
                maxWidth: 320
              }}
            >
              <div
                style={{
                  display: 'flex',
                  flexWrap: 'wrap',
                  border: '2px solid #aaa',
                  gap: 6,
                  padding: 6
                }}
              >
                {selected.map((item) => (
                  <button key={item} onClick={() => removeSelect(item)}>
                    {item}
                  </button>
                ))}
                <div>
                  <input placeholder="Type..." {...getInputProps()} />
                  {!isInputEmpty && <button {...getClearProps()}>X</button>}
                </div>
              </div>

              <ul
                style={{
                  listStyle: 'none',
                  overflow: 'auto',
                  maxHeight: 300,
                  margin: 0,
                  padding: 0
                }}
              >
                {items.length ? (
                  items.map((item, index) => (
                    <li
                      style={{
                        background: focusIndex === index ? '#ddd' : 'none'
                      }}
                      key={item}
                      {...getItemProps({ item, index })}
                    >
                      {item}
                      {isItemSelected(item) && '✔️'}
                    </li>
                  ))
                ) : (
                  <li>No options</li>
                )}
              </ul>
            </div>
          )}
        </div>
      );
    };

    export default MultiSelectDropdown;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/features/supercomplete/index.html b/docs/features/supercomplete/index.html index eb86c91..88e1e7a 100644 --- a/docs/features/supercomplete/index.html +++ b/docs/features/supercomplete/index.html @@ -4,13 +4,13 @@ Supercomplete | React Autocomplete - +

    Supercomplete

    The supercomplete feature supports everything provided by autocomplete, along with inline text completion.

    (the default setting) The text entered in the input field is not restricted to the items in the dropdown list.
    The allowed text in the input field is restricted to the items in the dropdown list.
    -
    import { useState } from 'react';
    import { useCombobox, supercomplete } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const filterItems = (value?: string) =>
      value ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase())) : STATES;

    const Supercomplete = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();
      const items = filterItems(value);

      const {
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: supercomplete({
          // The `onRequestItem` event will be triggered with the updated input value.
          // You should compute the item for inline text completion using the same filtering logic,
          // and invoke the `res` function to complete.
          // If no item matches for inline completion, do not call the `res` function.
          onRequestItem: ({ value: newValue }, res) => {
            const items = filterItems(newValue);
            if (items.length > 0) res({ index: 0, item: items[0] });
          },

          // The `select` option controls autocomplete in free or select mode
          select: false // or true
          // Other options: deselectOnClear, deselectOnChange, closeOnSelect
        })
      });

      return (
        <div>
          <label {...getLabelProps()}>State</label>
          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    textDecoration: selected === item ? 'underline' : 'none'
                  }}
                  key={item}
                  {...getItemProps({ item, index })}
                >
                  {item}
                </li>
              ))
            ) : (
              <li>No results</li>
            )}
          </ul>
        </div>
      );
    };

    export default Supercomplete;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    +
    import { useState } from 'react';
    import { useCombobox, supercomplete } from '@szhsin/react-autocomplete';
    import STATES from '../../data/states';

    const filterItems = (value?: string) =>
      value ? STATES.filter((item) => item.toLowerCase().startsWith(value.toLowerCase())) : STATES;

    const Supercomplete = () => {
      const [value, setValue] = useState<string>();
      const [selected, setSelected] = useState<string>();
      const items = filterItems(value);

      const {
        getLabelProps,
        getInputProps,
        getClearProps,
        getToggleProps,
        getListProps,
        getItemProps,
        open,
        focusIndex,
        isInputEmpty
      } = useCombobox({
        items,
        value,
        onChange: setValue,
        selected,
        onSelectChange: setSelected,
        feature: supercomplete({
          // The `onRequestItem` event will be triggered with the updated input value.
          // You should compute the item for inline text completion using the same filtering logic,
          // and invoke the `res` function to complete.
          // If no item matches for inline completion, do not call the `res` function.
          onRequestItem: ({ value: newValue }, res) => {
            const items = filterItems(newValue);
            if (items.length > 0) res({ index: 0, item: items[0] });
          },

          // The `select` option controls autocomplete in free or select mode
          select: false // or true
          // Other options: deselectOnClear, deselectOnChange, closeOnSelect
        })
      });

      return (
        <div>
          <label {...getLabelProps()}>State</label>
          <div>
            <input placeholder="Select or type..." {...getInputProps()} />
            {!isInputEmpty && <button {...getClearProps()}>X</button>}
            <button {...getToggleProps()}>{open ? '↑' : '↓'}</button>
          </div>

          <ul
            {...getListProps()}
            style={{
              display: open ? 'block' : 'none',
              position: 'absolute',
              listStyle: 'none',
              color: '#000',
              background: '#fff',
              overflow: 'auto',
              maxHeight: 300,
              margin: 0,
              padding: 0
            }}
          >
            {items.length ? (
              items.map((item, index) => (
                <li
                  style={{
                    background: focusIndex === index ? '#ddd' : 'none',
                    textDecoration: selected === item ? 'underline' : 'none'
                  }}
                  key={item}
                  {...getItemProps({ item, index })}
                >
                  {item}
                </li>
              ))
            ) : (
              <li>No results</li>
            )}
          </ul>
        </div>
      );
    };

    export default Supercomplete;
    GitHub
    Released under the MIT License.
    Copyright © 2024 Zheng Song.
    \ No newline at end of file diff --git a/docs/install/index.html b/docs/install/index.html index eb42a79..c1e9be0 100644 --- a/docs/install/index.html +++ b/docs/install/index.html @@ -4,7 +4,7 @@ Install | React Autocomplete - + diff --git a/docs/intro/index.html b/docs/intro/index.html index 7621c2e..4b7e17f 100644 --- a/docs/intro/index.html +++ b/docs/intro/index.html @@ -4,7 +4,7 @@ Getting Started | React Autocomplete - + diff --git a/index.html b/index.html index d36ebe8..b6c02b4 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Home | React Autocomplete - +