@plenustech/design-system 0.2.3 → 0.2.4

package/dist/components/data-display/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../../src/components/data-display/List/List.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from 'react';\nimport { EmptyState } from '../../feedback/EmptyState';\nimport { Checkbox } from '../../forms/Checkbox';\nimport { ListingOptions, optionId } from './ListingOptions';\nimport { useListing, type Listing, type ListingItem, type ListingSelectionMode } from './useListing';\nimport styles from './List.module.css';\n\nexport type ListSelectionMode = ListingSelectionMode;\nexport type ListItem = ListingItem;\n\nexport interface ListProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> {\n  children: ReactNode;\n  defaultValue?: readonly ListItem[];\n  items: readonly ListItem[];\n  label?: string;\n  loading?: boolean;\n  loadingMessage?: string;\n  onSearch?: (term: string) => void;\n  onSelectionChange?: (items: readonly ListItem[]) => void;\n  selectionMode?: ListSelectionMode;\n  value?: readonly ListItem[];\n}\n\ninterface ListContextValue {\n  baseId: string;\n  claimFocus: () => void;\n  label?: string;\n  listing: Listing;\n  loading: boolean;\n  loadingMessage: string;\n  searchPresent: boolean;\n}\n\nconst ListContext = createContext<ListContextValue | undefined>(undefined);\n\nfunction useListContext(part: string) {\n  const context = useContext(ListContext);\n\n  if (!context) {\n    throw new Error(part + ' deve ser usado dentro de List.');\n  }\n\n  return context;\n}\n\nexport function List({\n  children,\n  className,\n  defaultValue,\n  items,\n  label,\n  loading = false,\n  loadingMessage = 'Carregando',\n  onSearch,\n  onSelectionChange,\n  selectionMode = 'none',\n  value,\n  ...props\n}: ListProps) {\n  const baseId = useId();\n  const [searchPresent, setSearchPresent] = useState(false);\n  const listing = useListing({ defaultValue, items, onSearch, onSelectionChange, selectionMode, value });\n\n  const context: ListContextValue = {\n    baseId,\n    claimFocus: useCallback(() => setSearchPresent(true), []),\n    label,\n    listing,\n    loading,\n    loadingMessage,\n    searchPresent,\n  };\n\n  return (\n    <div {...props} className={[styles.list, className].filter(Boolean).join(' ')}>\n      <ListContext.Provider value={context}>{children}</ListContext.Provider>\n    </div>\n  );\n}\n\nexport interface ListSearchProps {\n  placeholder?: string;\n}\n\nfunction ListSearch({ placeholder = 'Buscar' }: ListSearchProps) {\n  const { baseId, claimFocus, label, listing } = useListContext('List.Search');\n\n  useEffect(claimFocus, [claimFocus]);\n\n  const activeIndex = listing.visible.findIndex((item) => item.value === listing.focusedKey);\n\n  return (\n    <input\n      aria-activedescendant={activeIndex >= 0 ? optionId(baseId, activeIndex) : undefined}\n      aria-controls={baseId + '-options'}\n      aria-label={label ? 'Buscar em ' + label : placeholder}\n      autoComplete=\"off\"\n      className={styles.search}\n      onChange={(event) => listing.filter(event.target.value)}\n      onKeyDown={listing.handleKeyDown}\n      placeholder={placeholder}\n      type=\"search\"\n      value={listing.term}\n    />\n  );\n}\n\nexport interface ListOptionsProps {\n  height?: number;\n}\n\nfunction ListOptions({ height }: ListOptionsProps) {\n  const { baseId, label, listing, loading, loadingMessage, searchPresent } = useListContext('List.Options');\n\n  return (\n    <ListingOptions\n      baseId={baseId}\n      height={height}\n      label={label}\n      holdsFocus={!searchPresent}\n      listing={listing}\n      loading={loading}\n      loadingMessage={loadingMessage}\n      onKeyDown={searchPresent ? undefined : listing.handleKeyDown}\n    />\n  );\n}\n\nexport interface ListSelectAllProps {\n  label?: string;\n}\n\nfunction ListSelectAll({ label = 'Selecionar todos' }: ListSelectAllProps) {\n  const { listing } = useListContext('List.SelectAll');\n\n  if (listing.selectionMode !== 'multiple') {\n    return null;\n  }\n\n  return (\n    <div className={styles.selectAll}>\n      <Checkbox\n        checked={listing.status === 'all'}\n        indeterminate={listing.status === 'partial'}\n        label={label}\n        onChange={() => listing.toggleAll()}\n      />\n    </div>\n  );\n}\n\nexport interface ListEmptyProps {\n  children: ReactNode;\n}\n\nfunction ListEmpty({ children }: ListEmptyProps) {\n  const { listing, loading } = useListContext('List.Empty');\n\n  if (loading || listing.visible.length > 0) {\n    return null;\n  }\n\n  return (\n    <div className={styles.empty}>\n      <EmptyState size=\"sm\" title={children} />\n    </div>\n  );\n}\n\nList.Search = ListSearch;\nList.SelectAll = ListSelectAll;\nList.Options = ListOptions;\nList.Empty = ListEmpty;\n"],"names":["ListContext","createContext","useListContext","part","context","useContext","List","children","className","defaultValue","items","label","loading","loadingMessage","onSearch","onSelectionChange","selectionMode","value","props","baseId","useId","searchPresent","setSearchPresent","useState","listing","useListing","useCallback","jsx","styles","ListSearch","placeholder","claimFocus","useEffect","activeIndex","item","optionId","event","ListOptions","height","ListingOptions","ListSelectAll","Checkbox","ListEmpty","EmptyState"],"mappings":"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"}
+{"version":3,"file":"List.js","sources":["../../../../src/components/data-display/List/List.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from 'react';\nimport { EmptyState } from '../../feedback/EmptyState';\nimport { Checkbox } from '../../forms/Checkbox';\nimport { ListingOptions, optionId } from './ListingOptions';\nimport { useListing, type Listing, type ListingItem, type ListingSelectionMode } from './useListing';\nimport styles from './List.module.css';\n\nexport type ListSelectionMode = ListingSelectionMode;\nexport type ListItem = Omit<ListingItem, 'description' | 'group' | 'icon'>;\n\nexport interface ListProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> {\n  children: ReactNode;\n  defaultValue?: readonly ListItem[];\n  items: readonly ListItem[];\n  label?: string;\n  loading?: boolean;\n  loadingMessage?: string;\n  onSearch?: (term: string) => void;\n  onSelectionChange?: (items: readonly ListItem[]) => void;\n  selectionMode?: ListSelectionMode;\n  value?: readonly ListItem[];\n}\n\ninterface ListContextValue {\n  baseId: string;\n  claimFocus: () => void;\n  label?: string;\n  listing: Listing;\n  loading: boolean;\n  loadingMessage: string;\n  searchPresent: boolean;\n}\n\nconst ListContext = createContext<ListContextValue | undefined>(undefined);\n\nfunction useListContext(part: string) {\n  const context = useContext(ListContext);\n\n  if (!context) {\n    throw new Error(part + ' deve ser usado dentro de List.');\n  }\n\n  return context;\n}\n\nexport function List({\n  children,\n  className,\n  defaultValue,\n  items,\n  label,\n  loading = false,\n  loadingMessage = 'Carregando',\n  onSearch,\n  onSelectionChange,\n  selectionMode = 'none',\n  value,\n  ...props\n}: ListProps) {\n  const baseId = useId();\n  const [searchPresent, setSearchPresent] = useState(false);\n  const listing = useListing({ defaultValue, items, onSearch, onSelectionChange, selectionMode, value });\n\n  const context: ListContextValue = {\n    baseId,\n    claimFocus: useCallback(() => setSearchPresent(true), []),\n    label,\n    listing,\n    loading,\n    loadingMessage,\n    searchPresent,\n  };\n\n  return (\n    <div {...props} className={[styles.list, className].filter(Boolean).join(' ')}>\n      <ListContext.Provider value={context}>{children}</ListContext.Provider>\n    </div>\n  );\n}\n\nexport interface ListSearchProps {\n  placeholder?: string;\n}\n\nfunction ListSearch({ placeholder = 'Buscar' }: ListSearchProps) {\n  const { baseId, claimFocus, label, listing } = useListContext('List.Search');\n\n  useEffect(claimFocus, [claimFocus]);\n\n  const activeIndex = listing.visible.findIndex((item) => item.value === listing.focusedKey);\n\n  return (\n    <input\n      aria-activedescendant={activeIndex >= 0 ? optionId(baseId, activeIndex) : undefined}\n      aria-controls={baseId + '-options'}\n      aria-label={label ? 'Buscar em ' + label : placeholder}\n      autoComplete=\"off\"\n      className={styles.search}\n      onChange={(event) => listing.filter(event.target.value)}\n      onKeyDown={listing.handleKeyDown}\n      placeholder={placeholder}\n      type=\"search\"\n      value={listing.term}\n    />\n  );\n}\n\nexport interface ListOptionsProps {\n  height?: number;\n}\n\nfunction ListOptions({ height }: ListOptionsProps) {\n  const { baseId, label, listing, loading, loadingMessage, searchPresent } = useListContext('List.Options');\n\n  return (\n    <ListingOptions\n      baseId={baseId}\n      height={height}\n      label={label}\n      holdsFocus={!searchPresent}\n      listing={listing}\n      loading={loading}\n      loadingMessage={loadingMessage}\n      onKeyDown={searchPresent ? undefined : listing.handleKeyDown}\n    />\n  );\n}\n\nexport interface ListSelectAllProps {\n  label?: string;\n}\n\nfunction ListSelectAll({ label = 'Selecionar todos' }: ListSelectAllProps) {\n  const { listing } = useListContext('List.SelectAll');\n\n  if (listing.selectionMode !== 'multiple') {\n    return null;\n  }\n\n  return (\n    <div className={styles.selectAll}>\n      <Checkbox\n        checked={listing.status === 'all'}\n        indeterminate={listing.status === 'partial'}\n        label={label}\n        onChange={() => listing.toggleAll()}\n      />\n    </div>\n  );\n}\n\nexport interface ListEmptyProps {\n  children: ReactNode;\n}\n\nfunction ListEmpty({ children }: ListEmptyProps) {\n  const { listing, loading } = useListContext('List.Empty');\n\n  if (loading || listing.visible.length > 0) {\n    return null;\n  }\n\n  return (\n    <div className={styles.empty}>\n      <EmptyState size=\"sm\" title={children} />\n    </div>\n  );\n}\n\nList.Search = ListSearch;\nList.SelectAll = ListSelectAll;\nList.Options = ListOptions;\nList.Empty = ListEmpty;\n"],"names":["ListContext","createContext","useListContext","part","context","useContext","List","children","className","defaultValue","items","label","loading","loadingMessage","onSearch","onSelectionChange","selectionMode","value","props","baseId","useId","searchPresent","setSearchPresent","useState","listing","useListing","useCallback","jsx","styles","ListSearch","placeholder","claimFocus","useEffect","activeIndex","item","optionId","event","ListOptions","height","ListingOptions","ListSelectAll","Checkbox","ListEmpty","EmptyState"],"mappings":"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"}

package/dist/components/data-display/List/List.module.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_list_1nie5_1",s="_search_1nie5_12",t="_options_1nie5_35",o="_spacer_1nie5_53",_="_option_1nie5_35",c="_selectAll_1nie5_72",n="_disabled_1nie5_76",i="_focused_1nie5_81",l="_box_1nie5_93",p="_checked_1nie5_102",a="_group_1nie5_108",d="_status_1nie5_118",u="_empty_1nie5_127",r={list:e,search:s,options:t,spacer:o,option:_,selectAll:c,disabled:n,focused:i,box:l,checked:p,group:a,status:d,empty:u};exports.box=l;exports.checked=p;exports.default=r;exports.disabled=n;exports.empty=u;exports.focused=i;exports.group=a;exports.list=e;exports.option=_;exports.options=t;exports.search=s;exports.selectAll=c;exports.spacer=o;exports.status=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="_list_17bgx_1",t="_search_17bgx_12",s="_options_17bgx_35",e="_spacer_17bgx_53",c="_option_17bgx_35",n="_selectAll_17bgx_72",_="_disabled_17bgx_76",i="_focused_17bgx_81",p="_box_17bgx_93",l="_checked_17bgx_102",b="_group_17bgx_108",x="_status_17bgx_118",g="_empty_17bgx_127",r="_optionIcon_17bgx_131",a="_optionText_17bgx_138",d="_optionDescription_17bgx_144",u="_section_17bgx_154",T="_sectionTitle_17bgx_165",h={list:o,search:t,options:s,spacer:e,option:c,selectAll:n,disabled:_,focused:i,box:p,checked:l,group:b,status:x,empty:g,optionIcon:r,optionText:a,optionDescription:d,section:u,sectionTitle:T};exports.box=p;exports.checked=l;exports.default=h;exports.disabled=_;exports.empty=g;exports.focused=i;exports.group=b;exports.list=o;exports.option=c;exports.optionDescription=d;exports.optionIcon=r;exports.optionText=a;exports.options=s;exports.search=t;exports.section=u;exports.sectionTitle=T;exports.selectAll=n;exports.spacer=e;exports.status=x;
 //# sourceMappingURL=List.module.css.cjs.map

package/dist/components/data-display/List/List.module.css.js

@@ -1,32 +1,42 @@
-const s = "_list_1nie5_1", e = "_search_1nie5_12", _ = "_options_1nie5_35", t = "_spacer_1nie5_53", o = "_option_1nie5_35", n = "_selectAll_1nie5_72", c = "_disabled_1nie5_76", i = "_focused_1nie5_81", l = "_box_1nie5_93", p = "_checked_1nie5_102", a = "_group_1nie5_108", d = "_status_1nie5_118", r = "_empty_1nie5_127", u = {
-  list: s,
-  search: e,
-  options: _,
-  spacer: t,
-  option: o,
+const o = "_list_17bgx_1", t = "_search_17bgx_12", s = "_options_17bgx_35", _ = "_spacer_17bgx_53", c = "_option_17bgx_35", n = "_selectAll_17bgx_72", e = "_disabled_17bgx_76", i = "_focused_17bgx_81", p = "_box_17bgx_93", x = "_checked_17bgx_102", b = "_group_17bgx_108", g = "_status_17bgx_118", l = "_empty_17bgx_127", a = "_optionIcon_17bgx_131", d = "_optionText_17bgx_138", r = "_optionDescription_17bgx_144", u = "_section_17bgx_154", h = "_sectionTitle_17bgx_165", T = {
+  list: o,
+  search: t,
+  options: s,
+  spacer: _,
+  option: c,
   selectAll: n,
-  disabled: c,
+  disabled: e,
   focused: i,
-  box: l,
-  checked: p,
-  group: a,
-  status: d,
-  empty: r
+  box: p,
+  checked: x,
+  group: b,
+  status: g,
+  empty: l,
+  optionIcon: a,
+  optionText: d,
+  optionDescription: r,
+  section: u,
+  sectionTitle: h
 };
 export {
-  l as box,
-  p as checked,
-  u as default,
-  c as disabled,
-  r as empty,
+  p as box,
+  x as checked,
+  T as default,
+  e as disabled,
+  l as empty,
   i as focused,
-  a as group,
-  s as list,
-  o as option,
-  _ as options,
-  e as search,
+  b as group,
+  o as list,
+  c as option,
+  r as optionDescription,
+  a as optionIcon,
+  d as optionText,
+  s as options,
+  t as search,
+  u as section,
+  h as sectionTitle,
   n as selectAll,
-  t as spacer,
-  d as status
+  _ as spacer,
+  g as status
 };
 //# sourceMappingURL=List.module.css.js.map

package/dist/components/data-display/List/List.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"List.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/components/data-display/List/ListingOptions.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),D=require("react"),A=require("./useVirtualWindow.cjs"),t=require("./List.module.css.cjs");function f(l,n){return l+"-option-"+n}function G({baseId:l,className:n,elementRef:v,empty:m,height:h,holdsFocus:p=!0,label:K,listing:M,loading:r=!1,loadingMessage:y="Carregando",onKeyDown:S,onSelect:x,style:N,tabIndex:T=0}){const{detached:g,focusedKey:d,isSelected:W,select:z,selectionMode:j,visible:s}=M,B=s.findIndex(e=>e.value===d);function P(e,a){e.disabled||(z(e,a),x==null||x(e))}const{active:I,attachScroll:k,measureItem:q,onScroll:w,padding:o,scrollToIndex:O,start:C,end:_}=A.useVirtualWindow(s.length,h),E=D.useCallback(e=>{k(e),v&&(v.current=e)},[k,v]);D.useEffect(()=>{var a,u;const e=s.findIndex(c=>c.value===d);d===void 0||e<0||(I?O(e):(u=(a=document.getElementById(f(l,e)))==null?void 0:a.scrollIntoView)==null||u.call(a,{block:"nearest"}))},[I,l,d,O,s]);const L=s.slice(C,_);if(j==="none")return i.jsxs("ul",{"aria-busy":r||void 0,className:[t.default.options,n].filter(Boolean).join(" "),id:l+"-options",onScroll:w,ref:E,style:{height:h,...N},children:[r&&i.jsx("li",{className:t.default.status,children:y}),i.jsx("li",{"aria-hidden":"true",className:t.default.spacer,style:{height:o.before}}),L.map((e,a)=>i.jsx("li",{className:t.default.option,ref:a===0?q:void 0,children:e.label},e.value)),i.jsx("li",{"aria-hidden":"true",className:t.default.spacer,style:{height:o.after}}),!r&&s.length===0&&m]});function V(e,a,u){const c=W(e.value);return i.jsxs("div",{"aria-disabled":e.disabled||void 0,"aria-posinset":a>0?a:void 0,"aria-selected":c,"aria-setsize":a>0?s.length:void 0,className:[t.default.option,d===e.value&&t.default.focused,e.disabled&&t.default.disabled].filter(Boolean).join(" "),id:a>0?f(l,a-1):void 0,onClick:b=>P(e,b.shiftKey),onMouseDown:p?void 0:b=>b.preventDefault(),ref:u?q:void 0,role:"option",children:[j==="multiple"&&i.jsx("span",{"aria-hidden":"true",className:[t.default.box,c&&t.default.checked].filter(Boolean).join(" ")}),e.label]},e.value)}return i.jsxs("div",{"aria-activedescendant":p&&B>=0?f(l,B):void 0,"aria-busy":r||void 0,"aria-label":K,"aria-multiselectable":j==="multiple"||void 0,className:[t.default.options,n].filter(Boolean).join(" "),id:l+"-options",onKeyDown:S,onScroll:w,ref:E,role:"listbox",style:{height:h,...N},tabIndex:p?T:void 0,children:[r&&i.jsx("p",{className:t.default.status,children:y}),g.length>0&&i.jsx("div",{"aria-label":"Selecionados",className:t.default.group,role:"group",children:g.map(e=>V(e,0,!1))}),i.jsx("div",{"aria-hidden":"true",className:t.default.spacer,style:{height:o.before}}),L.map((e,a)=>V(e,C+a+1,a===0)),i.jsx("div",{"aria-hidden":"true",className:t.default.spacer,style:{height:o.after}}),!r&&s.length===0&&m]})}exports.ListingOptions=G;exports.optionId=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),y=require("react"),H=require("./useVirtualWindow.cjs"),i=require("./List.module.css.cjs");function x(t,n){return t+"-option-"+n}function J(t){const n=[];for(const l of t){const c=n.at(-1);l.item.group!==void 0&&(c==null?void 0:c.group)===l.item.group?c.options.push(l):n.push({group:l.item.group,options:[l]})}return n}function Q({baseId:t,className:n,elementRef:l,empty:c,height:b,holdsFocus:j=!0,label:K,listing:M,loading:f=!1,loadingMessage:$="Carregando",onKeyDown:S,onSelect:m,style:k,tabIndex:W=0}){const{detached:B,focusedKey:p,isSelected:z,select:P,selectionMode:g,visible:r}=M,I=r.findIndex(e=>e.value===p);function _(e,a){e.disabled||(P(e,a),m==null||m(e))}const{active:q,attachScroll:w,measureItem:C,onScroll:O,padding:h,scrollToIndex:T,start:N,end:A}=H.useVirtualWindow(r.length,b),D=y.useCallback(e=>{w(e),l&&(l.current=e)},[w,l]);y.useEffect(()=>{var a,o;const e=r.findIndex(u=>u.value===p);p===void 0||e<0||(q?T(e):(o=(a=document.getElementById(x(t,e)))==null?void 0:a.scrollIntoView)==null||o.call(a,{block:"nearest"}))},[q,t,p,T,r]);const E=r.slice(N,A);if(g==="none")return s.jsxs("ul",{"aria-busy":f||void 0,className:[i.default.options,n].filter(Boolean).join(" "),id:t+"-options",onScroll:O,ref:D,style:{height:b,...k},children:[f&&s.jsx("li",{className:i.default.status,children:$}),s.jsx("li",{"aria-hidden":"true",className:i.default.spacer,style:{height:h.before}}),E.map((e,a)=>s.jsx("li",{className:i.default.option,ref:a===0?C:void 0,children:e.label},e.value)),s.jsx("li",{"aria-hidden":"true",className:i.default.spacer,style:{height:h.after}}),!f&&r.length===0&&c]});function L(e,a,o){const u=z(e.value),d=a>0?x(t,a-1):`${t}-selected-${e.value}`;return s.jsxs("div",{"aria-describedby":e.description?`${d}-description`:void 0,"aria-disabled":e.disabled||void 0,"aria-labelledby":e.description?`${d}-label`:void 0,"aria-posinset":a>0?a:void 0,"aria-selected":u,"aria-setsize":a>0?r.length:void 0,className:[i.default.option,p===e.value&&i.default.focused,e.disabled&&i.default.disabled].filter(Boolean).join(" "),id:d,onClick:v=>_(e,v.shiftKey),onMouseDown:j?void 0:v=>v.preventDefault(),ref:o?C:void 0,role:"option",children:[g==="multiple"&&s.jsx("span",{"aria-hidden":"true",className:[i.default.box,u&&i.default.checked].filter(Boolean).join(" ")}),e.icon&&s.jsx("span",{"aria-hidden":"true",className:i.default.optionIcon,children:e.icon}),e.description?s.jsxs("span",{className:i.default.optionText,children:[s.jsx("span",{id:`${d}-label`,children:e.label}),s.jsx("span",{className:i.default.optionDescription,id:`${d}-description`,children:e.description})]}):e.label]},e.value)}const G=J(E.map((e,a)=>({item:e,position:N+a+1})));return s.jsxs("div",{"aria-activedescendant":j&&I>=0?x(t,I):void 0,"aria-busy":f||void 0,"aria-label":K,"aria-multiselectable":g==="multiple"||void 0,className:[i.default.options,n].filter(Boolean).join(" "),id:t+"-options",onKeyDown:S,onScroll:O,ref:D,role:"listbox",style:{height:b,...k},tabIndex:j?W:void 0,children:[f&&s.jsx("p",{className:i.default.status,children:$}),B.length>0&&s.jsx("div",{"aria-label":"Selecionados",className:i.default.group,role:"group",children:B.map(e=>L(e,0,!1))}),s.jsx("div",{"aria-hidden":"true",className:i.default.spacer,style:{height:h.before}}),G.map(({group:e,options:a})=>{const[o]=a,u=a.map(({item:v,position:V})=>L(v,V,V===N+1));if(e===void 0)return s.jsx(y.Fragment,{children:u},o.item.value);const d=`${t}-group-${o.position}`;return s.jsxs("div",{"aria-labelledby":d,className:i.default.section,role:"group",children:[s.jsx("div",{className:i.default.sectionTitle,id:d,role:"presentation",children:e}),u]},`${e}:${o.item.value}`)}),s.jsx("div",{"aria-hidden":"true",className:i.default.spacer,style:{height:h.after}}),!f&&r.length===0&&c]})}exports.ListingOptions=Q;exports.optionId=x;
 //# sourceMappingURL=ListingOptions.cjs.map

package/dist/components/data-display/List/ListingOptions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListingOptions.cjs","sources":["../../../../src/components/data-display/List/ListingOptions.tsx"],"sourcesContent":["import { useCallback, useEffect, type CSSProperties, type KeyboardEvent, type ReactNode, type RefObject } from 'react';\nimport type { Listing, ListingItem } from './useListing';\nimport { useVirtualWindow } from './useVirtualWindow';\nimport styles from './List.module.css';\n\nexport interface ListingOptionsProps {\n  baseId: string;\n  className?: string;\n  elementRef?: RefObject<HTMLElement | null>;\n  empty?: ReactNode;\n  height?: number;\n  label?: string;\n  listing: Listing;\n  loading?: boolean;\n  loadingMessage?: string;\n  holdsFocus?: boolean;\n  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n  onSelect?: (item: ListingItem) => void;\n  style?: CSSProperties;\n  tabIndex?: number;\n}\n\nexport function optionId(baseId: string, index: number) {\n  return baseId + '-option-' + index;\n}\n\nexport function ListingOptions({\n  baseId,\n  className,\n  elementRef,\n  empty,\n  height,\n  holdsFocus = true,\n  label,\n  listing,\n  loading = false,\n  loadingMessage = 'Carregando',\n  onKeyDown,\n  onSelect,\n  style,\n  tabIndex = 0,\n}: ListingOptionsProps) {\n  const { detached, focusedKey, isSelected, select, selectionMode, visible } = listing;\n  const activeIndex = visible.findIndex((item) => item.value === focusedKey);\n\n  function choose(item: ListingItem, extend: boolean) {\n    if (item.disabled) {\n      return;\n    }\n\n    select(item, extend);\n    onSelect?.(item);\n  }\n  const { active, attachScroll, measureItem, onScroll, padding, scrollToIndex, start, end } = useVirtualWindow(\n    visible.length,\n    height,\n  );\n\n  const attachElement = useCallback(\n    (node: HTMLElement | null) => {\n      attachScroll(node);\n\n      if (elementRef) {\n        elementRef.current = node;\n      }\n    },\n    [attachScroll, elementRef],\n  );\n\n  useEffect(() => {\n    const index = visible.findIndex((item) => item.value === focusedKey);\n\n    if (focusedKey === undefined || index < 0) {\n      return;\n    }\n\n    if (active) {\n      scrollToIndex(index);\n    } else {\n      document.getElementById(optionId(baseId, index))?.scrollIntoView?.({ block: 'nearest' });\n    }\n  }, [active, baseId, focusedKey, scrollToIndex, visible]);\n\n  const rendered = visible.slice(start, end);\n\n  if (selectionMode === 'none') {\n    return (\n      <ul\n        aria-busy={loading || undefined}\n        className={[styles.options, className].filter(Boolean).join(' ')}\n        id={baseId + '-options'}\n        onScroll={onScroll}\n        ref={attachElement}\n        style={{ height, ...style }}\n      >\n        {loading && <li className={styles.status}>{loadingMessage}</li>}\n        <li aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.before }} />\n        {rendered.map((item, index) => (\n          <li className={styles.option} key={item.value} ref={index === 0 ? measureItem : undefined}>\n            {item.label}\n          </li>\n        ))}\n        <li aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.after }} />\n        {!loading && visible.length === 0 && empty}\n      </ul>\n    );\n  }\n\n  function renderOption(item: ListingItem, position: number, measured: boolean) {\n    const selected = isSelected(item.value);\n\n    return (\n      <div\n        aria-disabled={item.disabled || undefined}\n        aria-posinset={position > 0 ? position : undefined}\n        aria-selected={selected}\n        aria-setsize={position > 0 ? visible.length : undefined}\n        className={[styles.option, focusedKey === item.value && styles.focused, item.disabled && styles.disabled]\n          .filter(Boolean)\n          .join(' ')}\n        id={position > 0 ? optionId(baseId, position - 1) : undefined}\n        key={item.value}\n        onClick={(event) => choose(item, event.shiftKey)}\n        // So segura o foco onde ele esta quando quem o tem e o campo de busca; a lista que detem o foco o recebe.\n        onMouseDown={holdsFocus ? undefined : (event) => event.preventDefault()}\n        ref={measured ? measureItem : undefined}\n        role=\"option\"\n      >\n        {selectionMode === 'multiple' && (\n          <span aria-hidden=\"true\" className={[styles.box, selected && styles.checked].filter(Boolean).join(' ')} />\n        )}\n        {item.label}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      aria-activedescendant={holdsFocus && activeIndex >= 0 ? optionId(baseId, activeIndex) : undefined}\n      aria-busy={loading || undefined}\n      aria-label={label}\n      aria-multiselectable={selectionMode === 'multiple' || undefined}\n      className={[styles.options, className].filter(Boolean).join(' ')}\n      id={baseId + '-options'}\n      onKeyDown={onKeyDown}\n      onScroll={onScroll}\n      ref={attachElement}\n      role=\"listbox\"\n      style={{ height, ...style }}\n      tabIndex={holdsFocus ? tabIndex : undefined}\n    >\n      {loading && <p className={styles.status}>{loadingMessage}</p>}\n      {detached.length > 0 && (\n        <div aria-label=\"Selecionados\" className={styles.group} role=\"group\">\n          {detached.map((item) => renderOption(item, 0, false))}\n        </div>\n      )}\n      <div aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.before }} />\n      {rendered.map((item, index) => renderOption(item, start + index + 1, index === 0))}\n      <div aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.after }} />\n      {!loading && visible.length === 0 && empty}\n    </div>\n  );\n}\n"],"names":["optionId","baseId","index","ListingOptions","className","elementRef","empty","height","holdsFocus","label","listing","loading","loadingMessage","onKeyDown","onSelect","style","tabIndex","detached","focusedKey","isSelected","select","selectionMode","visible","activeIndex","item","choose","extend","active","attachScroll","measureItem","onScroll","padding","scrollToIndex","start","end","useVirtualWindow","attachElement","useCallback","node","useEffect","_b","_a","rendered","jsxs","styles","jsx","renderOption","position","measured","selected","event"],"mappings":"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"}
+{"version":3,"file":"ListingOptions.cjs","sources":["../../../../src/components/data-display/List/ListingOptions.tsx"],"sourcesContent":["import { Fragment, useCallback, useEffect, type CSSProperties, type KeyboardEvent, type ReactNode, type RefObject } from 'react';\nimport type { Listing, ListingItem } from './useListing';\nimport { useVirtualWindow } from './useVirtualWindow';\nimport styles from './List.module.css';\n\nexport interface ListingOptionsProps {\n  baseId: string;\n  className?: string;\n  elementRef?: RefObject<HTMLElement | null>;\n  empty?: ReactNode;\n  height?: number;\n  label?: string;\n  listing: Listing;\n  loading?: boolean;\n  loadingMessage?: string;\n  holdsFocus?: boolean;\n  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n  onSelect?: (item: ListingItem) => void;\n  style?: CSSProperties;\n  tabIndex?: number;\n}\n\nexport function optionId(baseId: string, index: number) {\n  return baseId + '-option-' + index;\n}\n\ninterface RenderedOption {\n  item: ListingItem;\n  position: number;\n}\n\n/** Junta as opções seguidas de um mesmo grupo; as sem grupo ficam soltas, cada uma no seu bloco. */\nfunction groupConsecutive(options: readonly RenderedOption[]) {\n  const blocks: { group?: string; options: RenderedOption[] }[] = [];\n\n  for (const option of options) {\n    const last = blocks.at(-1);\n\n    if (option.item.group !== undefined && last?.group === option.item.group) {\n      last.options.push(option);\n    } else {\n      blocks.push({ group: option.item.group, options: [option] });\n    }\n  }\n\n  return blocks;\n}\n\nexport function ListingOptions({\n  baseId,\n  className,\n  elementRef,\n  empty,\n  height,\n  holdsFocus = true,\n  label,\n  listing,\n  loading = false,\n  loadingMessage = 'Carregando',\n  onKeyDown,\n  onSelect,\n  style,\n  tabIndex = 0,\n}: ListingOptionsProps) {\n  const { detached, focusedKey, isSelected, select, selectionMode, visible } = listing;\n  const activeIndex = visible.findIndex((item) => item.value === focusedKey);\n\n  function choose(item: ListingItem, extend: boolean) {\n    if (item.disabled) {\n      return;\n    }\n\n    select(item, extend);\n    onSelect?.(item);\n  }\n  const { active, attachScroll, measureItem, onScroll, padding, scrollToIndex, start, end } = useVirtualWindow(\n    visible.length,\n    height,\n  );\n\n  const attachElement = useCallback(\n    (node: HTMLElement | null) => {\n      attachScroll(node);\n\n      if (elementRef) {\n        elementRef.current = node;\n      }\n    },\n    [attachScroll, elementRef],\n  );\n\n  useEffect(() => {\n    const index = visible.findIndex((item) => item.value === focusedKey);\n\n    if (focusedKey === undefined || index < 0) {\n      return;\n    }\n\n    if (active) {\n      scrollToIndex(index);\n    } else {\n      document.getElementById(optionId(baseId, index))?.scrollIntoView?.({ block: 'nearest' });\n    }\n  }, [active, baseId, focusedKey, scrollToIndex, visible]);\n\n  const rendered = visible.slice(start, end);\n\n  if (selectionMode === 'none') {\n    return (\n      <ul\n        aria-busy={loading || undefined}\n        className={[styles.options, className].filter(Boolean).join(' ')}\n        id={baseId + '-options'}\n        onScroll={onScroll}\n        ref={attachElement}\n        style={{ height, ...style }}\n      >\n        {loading && <li className={styles.status}>{loadingMessage}</li>}\n        <li aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.before }} />\n        {rendered.map((item, index) => (\n          <li className={styles.option} key={item.value} ref={index === 0 ? measureItem : undefined}>\n            {item.label}\n          </li>\n        ))}\n        <li aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.after }} />\n        {!loading && visible.length === 0 && empty}\n      </ul>\n    );\n  }\n\n  function renderOption(item: ListingItem, position: number, measured: boolean) {\n    const selected = isSelected(item.value);\n    const id = position > 0 ? optionId(baseId, position - 1) : `${baseId}-selected-${item.value}`;\n\n    return (\n      <div\n        aria-describedby={item.description ? `${id}-description` : undefined}\n        aria-disabled={item.disabled || undefined}\n        aria-labelledby={item.description ? `${id}-label` : undefined}\n        aria-posinset={position > 0 ? position : undefined}\n        aria-selected={selected}\n        aria-setsize={position > 0 ? visible.length : undefined}\n        className={[styles.option, focusedKey === item.value && styles.focused, item.disabled && styles.disabled]\n          .filter(Boolean)\n          .join(' ')}\n        id={id}\n        key={item.value}\n        onClick={(event) => choose(item, event.shiftKey)}\n        // So segura o foco onde ele esta quando quem o tem e o campo de busca; a lista que detem o foco o recebe.\n        onMouseDown={holdsFocus ? undefined : (event) => event.preventDefault()}\n        ref={measured ? measureItem : undefined}\n        role=\"option\"\n      >\n        {selectionMode === 'multiple' && (\n          <span aria-hidden=\"true\" className={[styles.box, selected && styles.checked].filter(Boolean).join(' ')} />\n        )}\n        {item.icon && (\n          <span aria-hidden=\"true\" className={styles.optionIcon}>\n            {item.icon}\n          </span>\n        )}\n        {item.description ? (\n          <span className={styles.optionText}>\n            <span id={`${id}-label`}>{item.label}</span>\n            <span className={styles.optionDescription} id={`${id}-description`}>\n              {item.description}\n            </span>\n          </span>\n        ) : (\n          item.label\n        )}\n      </div>\n    );\n  }\n\n  const blocks = groupConsecutive(rendered.map((item, index) => ({ item, position: start + index + 1 })));\n\n  return (\n    <div\n      aria-activedescendant={holdsFocus && activeIndex >= 0 ? optionId(baseId, activeIndex) : undefined}\n      aria-busy={loading || undefined}\n      aria-label={label}\n      aria-multiselectable={selectionMode === 'multiple' || undefined}\n      className={[styles.options, className].filter(Boolean).join(' ')}\n      id={baseId + '-options'}\n      onKeyDown={onKeyDown}\n      onScroll={onScroll}\n      ref={attachElement}\n      role=\"listbox\"\n      style={{ height, ...style }}\n      tabIndex={holdsFocus ? tabIndex : undefined}\n    >\n      {loading && <p className={styles.status}>{loadingMessage}</p>}\n      {detached.length > 0 && (\n        <div aria-label=\"Selecionados\" className={styles.group} role=\"group\">\n          {detached.map((item) => renderOption(item, 0, false))}\n        </div>\n      )}\n      <div aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.before }} />\n      {blocks.map(({ group, options }) => {\n        const [first] = options;\n        const rendering = options.map(({ item, position }) => renderOption(item, position, position === start + 1));\n\n        if (group === undefined) {\n          return <Fragment key={first.item.value}>{rendering}</Fragment>;\n        }\n\n        const titleId = `${baseId}-group-${first.position}`;\n\n        return (\n          <div aria-labelledby={titleId} className={styles.section} key={`${group}:${first.item.value}`} role=\"group\">\n            <div className={styles.sectionTitle} id={titleId} role=\"presentation\">\n              {group}\n            </div>\n            {rendering}\n          </div>\n        );\n      })}\n      <div aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.after }} />\n      {!loading && visible.length === 0 && empty}\n    </div>\n  );\n}\n"],"names":["optionId","baseId","index","groupConsecutive","options","blocks","option","last","ListingOptions","className","elementRef","empty","height","holdsFocus","label","listing","loading","loadingMessage","onKeyDown","onSelect","style","tabIndex","detached","focusedKey","isSelected","select","selectionMode","visible","activeIndex","item","choose","extend","active","attachScroll","measureItem","onScroll","padding","scrollToIndex","start","end","useVirtualWindow","attachElement","useCallback","node","useEffect","_b","_a","rendered","jsxs","styles","jsx","renderOption","position","measured","selected","id","event","group","first","rendering","Fragment","titleId"],"mappings":"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"}

package/dist/components/data-display/List/ListingOptions.js

@@ -1,115 +1,139 @@
-import { jsxs as N, jsx as r } from "react/jsx-runtime";
-import { useCallback as J, useEffect as P } from "react";
-import { useVirtualWindow as Q } from "./useVirtualWindow.js";
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { useCallback as Q, useEffect as S, Fragment as U } from "react";
+import { useVirtualWindow as X } from "./useVirtualWindow.js";
 import i from "./List.module.css.js";
-function x(l, n) {
-  return l + "-option-" + n;
+function $(o, l) {
+  return o + "-option-" + l;
 }
-function Z({
-  baseId: l,
-  className: n,
-  elementRef: f,
-  empty: y,
-  height: v,
-  holdsFocus: p = !0,
+function Y(o) {
+  const l = [];
+  for (const n of o) {
+    const d = l.at(-1);
+    n.item.group !== void 0 && (d == null ? void 0 : d.group) === n.item.group ? d.options.push(n) : l.push({ group: n.item.group, options: [n] });
+  }
+  return l;
+}
+function ee({
+  baseId: o,
+  className: l,
+  elementRef: n,
+  empty: d,
+  height: m,
+  holdsFocus: N = !0,
   label: L,
   listing: M,
-  loading: s = !1,
-  loadingMessage: g = "Carregando",
-  onKeyDown: T,
-  onSelect: h,
-  style: j,
-  tabIndex: W = 0
+  loading: p = !1,
+  loadingMessage: j = "Carregando",
+  onKeyDown: W,
+  onSelect: g,
+  style: k,
+  tabIndex: q = 0
 }) {
-  const { detached: B, focusedKey: o, isSelected: q, select: A, selectionMode: m, visible: t } = M, k = t.findIndex((e) => e.value === o);
-  function G(e, a) {
-    e.disabled || (A(e, a), h == null || h(e));
+  const { detached: B, focusedKey: f, isSelected: A, select: G, selectionMode: y, visible: s } = M, C = s.findIndex((e) => e.value === f);
+  function H(e, a) {
+    e.disabled || (G(e, a), g == null || g(e));
   }
-  const { active: I, attachScroll: w, measureItem: C, onScroll: E, padding: d, scrollToIndex: D, start: K, end: H } = Q(
-    t.length,
-    v
-  ), O = J(
+  const { active: I, attachScroll: w, measureItem: D, onScroll: E, padding: b, scrollToIndex: T, start: x, end: J } = X(
+    s.length,
+    m
+  ), K = Q(
     (e) => {
-      w(e), f && (f.current = e);
+      w(e), n && (n.current = e);
     },
-    [w, f]
+    [w, n]
   );
-  P(() => {
-    var a, c;
-    const e = t.findIndex((u) => u.value === o);
-    o === void 0 || e < 0 || (I ? D(e) : (c = (a = document.getElementById(x(l, e))) == null ? void 0 : a.scrollIntoView) == null || c.call(a, { block: "nearest" }));
-  }, [I, l, o, D, t]);
-  const V = t.slice(K, H);
-  if (m === "none")
-    return /* @__PURE__ */ N(
+  S(() => {
+    var a, t;
+    const e = s.findIndex((u) => u.value === f);
+    f === void 0 || e < 0 || (I ? T(e) : (t = (a = document.getElementById($(o, e))) == null ? void 0 : a.scrollIntoView) == null || t.call(a, { block: "nearest" }));
+  }, [I, o, f, T, s]);
+  const O = s.slice(x, J);
+  if (y === "none")
+    return /* @__PURE__ */ h(
       "ul",
       {
-        "aria-busy": s || void 0,
-        className: [i.options, n].filter(Boolean).join(" "),
-        id: l + "-options",
+        "aria-busy": p || void 0,
+        className: [i.options, l].filter(Boolean).join(" "),
+        id: o + "-options",
         onScroll: E,
-        ref: O,
-        style: { height: v, ...j },
+        ref: K,
+        style: { height: m, ...k },
         children: [
-          s && /* @__PURE__ */ r("li", { className: i.status, children: g }),
-          /* @__PURE__ */ r("li", { "aria-hidden": "true", className: i.spacer, style: { height: d.before } }),
-          V.map((e, a) => /* @__PURE__ */ r("li", { className: i.option, ref: a === 0 ? C : void 0, children: e.label }, e.value)),
-          /* @__PURE__ */ r("li", { "aria-hidden": "true", className: i.spacer, style: { height: d.after } }),
-          !s && t.length === 0 && y
+          p && /* @__PURE__ */ r("li", { className: i.status, children: j }),
+          /* @__PURE__ */ r("li", { "aria-hidden": "true", className: i.spacer, style: { height: b.before } }),
+          O.map((e, a) => /* @__PURE__ */ r("li", { className: i.option, ref: a === 0 ? D : void 0, children: e.label }, e.value)),
+          /* @__PURE__ */ r("li", { "aria-hidden": "true", className: i.spacer, style: { height: b.after } }),
+          !p && s.length === 0 && d
         ]
       }
     );
-  function z(e, a, c) {
-    const u = q(e.value);
-    return /* @__PURE__ */ N(
+  function V(e, a, t) {
+    const u = A(e.value), c = a > 0 ? $(o, a - 1) : `${o}-selected-${e.value}`;
+    return /* @__PURE__ */ h(
       "div",
       {
+        "aria-describedby": e.description ? `${c}-description` : void 0,
         "aria-disabled": e.disabled || void 0,
+        "aria-labelledby": e.description ? `${c}-label` : void 0,
         "aria-posinset": a > 0 ? a : void 0,
         "aria-selected": u,
-        "aria-setsize": a > 0 ? t.length : void 0,
-        className: [i.option, o === e.value && i.focused, e.disabled && i.disabled].filter(Boolean).join(" "),
-        id: a > 0 ? x(l, a - 1) : void 0,
-        onClick: (b) => G(e, b.shiftKey),
-        onMouseDown: p ? void 0 : (b) => b.preventDefault(),
-        ref: c ? C : void 0,
+        "aria-setsize": a > 0 ? s.length : void 0,
+        className: [i.option, f === e.value && i.focused, e.disabled && i.disabled].filter(Boolean).join(" "),
+        id: c,
+        onClick: (v) => H(e, v.shiftKey),
+        onMouseDown: N ? void 0 : (v) => v.preventDefault(),
+        ref: t ? D : void 0,
         role: "option",
         children: [
-          m === "multiple" && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: [i.box, u && i.checked].filter(Boolean).join(" ") }),
-          e.label
+          y === "multiple" && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: [i.box, u && i.checked].filter(Boolean).join(" ") }),
+          e.icon && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: i.optionIcon, children: e.icon }),
+          e.description ? /* @__PURE__ */ h("span", { className: i.optionText, children: [
+            /* @__PURE__ */ r("span", { id: `${c}-label`, children: e.label }),
+            /* @__PURE__ */ r("span", { className: i.optionDescription, id: `${c}-description`, children: e.description })
+          ] }) : e.label
         ]
       },
       e.value
     );
   }
-  return /* @__PURE__ */ N(
+  const P = Y(O.map((e, a) => ({ item: e, position: x + a + 1 })));
+  return /* @__PURE__ */ h(
     "div",
     {
-      "aria-activedescendant": p && k >= 0 ? x(l, k) : void 0,
-      "aria-busy": s || void 0,
+      "aria-activedescendant": N && C >= 0 ? $(o, C) : void 0,
+      "aria-busy": p || void 0,
       "aria-label": L,
-      "aria-multiselectable": m === "multiple" || void 0,
-      className: [i.options, n].filter(Boolean).join(" "),
-      id: l + "-options",
-      onKeyDown: T,
+      "aria-multiselectable": y === "multiple" || void 0,
+      className: [i.options, l].filter(Boolean).join(" "),
+      id: o + "-options",
+      onKeyDown: W,
       onScroll: E,
-      ref: O,
+      ref: K,
       role: "listbox",
-      style: { height: v, ...j },
-      tabIndex: p ? W : void 0,
+      style: { height: m, ...k },
+      tabIndex: N ? q : void 0,
       children: [
-        s && /* @__PURE__ */ r("p", { className: i.status, children: g }),
-        B.length > 0 && /* @__PURE__ */ r("div", { "aria-label": "Selecionados", className: i.group, role: "group", children: B.map((e) => z(e, 0, !1)) }),
-        /* @__PURE__ */ r("div", { "aria-hidden": "true", className: i.spacer, style: { height: d.before } }),
-        V.map((e, a) => z(e, K + a + 1, a === 0)),
-        /* @__PURE__ */ r("div", { "aria-hidden": "true", className: i.spacer, style: { height: d.after } }),
-        !s && t.length === 0 && y
+        p && /* @__PURE__ */ r("p", { className: i.status, children: j }),
+        B.length > 0 && /* @__PURE__ */ r("div", { "aria-label": "Selecionados", className: i.group, role: "group", children: B.map((e) => V(e, 0, !1)) }),
+        /* @__PURE__ */ r("div", { "aria-hidden": "true", className: i.spacer, style: { height: b.before } }),
+        P.map(({ group: e, options: a }) => {
+          const [t] = a, u = a.map(({ item: v, position: z }) => V(v, z, z === x + 1));
+          if (e === void 0)
+            return /* @__PURE__ */ r(U, { children: u }, t.item.value);
+          const c = `${o}-group-${t.position}`;
+          return /* @__PURE__ */ h("div", { "aria-labelledby": c, className: i.section, role: "group", children: [
+            /* @__PURE__ */ r("div", { className: i.sectionTitle, id: c, role: "presentation", children: e }),
+            u
+          ] }, `${e}:${t.item.value}`);
+        }),
+        /* @__PURE__ */ r("div", { "aria-hidden": "true", className: i.spacer, style: { height: b.after } }),
+        !p && s.length === 0 && d
       ]
     }
   );
 }
 export {
-  Z as ListingOptions,
-  x as optionId
+  ee as ListingOptions,
+  $ as optionId
 };
 //# sourceMappingURL=ListingOptions.js.map

package/dist/components/data-display/List/ListingOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListingOptions.js","sources":["../../../../src/components/data-display/List/ListingOptions.tsx"],"sourcesContent":["import { useCallback, useEffect, type CSSProperties, type KeyboardEvent, type ReactNode, type RefObject } from 'react';\nimport type { Listing, ListingItem } from './useListing';\nimport { useVirtualWindow } from './useVirtualWindow';\nimport styles from './List.module.css';\n\nexport interface ListingOptionsProps {\n  baseId: string;\n  className?: string;\n  elementRef?: RefObject<HTMLElement | null>;\n  empty?: ReactNode;\n  height?: number;\n  label?: string;\n  listing: Listing;\n  loading?: boolean;\n  loadingMessage?: string;\n  holdsFocus?: boolean;\n  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n  onSelect?: (item: ListingItem) => void;\n  style?: CSSProperties;\n  tabIndex?: number;\n}\n\nexport function optionId(baseId: string, index: number) {\n  return baseId + '-option-' + index;\n}\n\nexport function ListingOptions({\n  baseId,\n  className,\n  elementRef,\n  empty,\n  height,\n  holdsFocus = true,\n  label,\n  listing,\n  loading = false,\n  loadingMessage = 'Carregando',\n  onKeyDown,\n  onSelect,\n  style,\n  tabIndex = 0,\n}: ListingOptionsProps) {\n  const { detached, focusedKey, isSelected, select, selectionMode, visible } = listing;\n  const activeIndex = visible.findIndex((item) => item.value === focusedKey);\n\n  function choose(item: ListingItem, extend: boolean) {\n    if (item.disabled) {\n      return;\n    }\n\n    select(item, extend);\n    onSelect?.(item);\n  }\n  const { active, attachScroll, measureItem, onScroll, padding, scrollToIndex, start, end } = useVirtualWindow(\n    visible.length,\n    height,\n  );\n\n  const attachElement = useCallback(\n    (node: HTMLElement | null) => {\n      attachScroll(node);\n\n      if (elementRef) {\n        elementRef.current = node;\n      }\n    },\n    [attachScroll, elementRef],\n  );\n\n  useEffect(() => {\n    const index = visible.findIndex((item) => item.value === focusedKey);\n\n    if (focusedKey === undefined || index < 0) {\n      return;\n    }\n\n    if (active) {\n      scrollToIndex(index);\n    } else {\n      document.getElementById(optionId(baseId, index))?.scrollIntoView?.({ block: 'nearest' });\n    }\n  }, [active, baseId, focusedKey, scrollToIndex, visible]);\n\n  const rendered = visible.slice(start, end);\n\n  if (selectionMode === 'none') {\n    return (\n      <ul\n        aria-busy={loading || undefined}\n        className={[styles.options, className].filter(Boolean).join(' ')}\n        id={baseId + '-options'}\n        onScroll={onScroll}\n        ref={attachElement}\n        style={{ height, ...style }}\n      >\n        {loading && <li className={styles.status}>{loadingMessage}</li>}\n        <li aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.before }} />\n        {rendered.map((item, index) => (\n          <li className={styles.option} key={item.value} ref={index === 0 ? measureItem : undefined}>\n            {item.label}\n          </li>\n        ))}\n        <li aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.after }} />\n        {!loading && visible.length === 0 && empty}\n      </ul>\n    );\n  }\n\n  function renderOption(item: ListingItem, position: number, measured: boolean) {\n    const selected = isSelected(item.value);\n\n    return (\n      <div\n        aria-disabled={item.disabled || undefined}\n        aria-posinset={position > 0 ? position : undefined}\n        aria-selected={selected}\n        aria-setsize={position > 0 ? visible.length : undefined}\n        className={[styles.option, focusedKey === item.value && styles.focused, item.disabled && styles.disabled]\n          .filter(Boolean)\n          .join(' ')}\n        id={position > 0 ? optionId(baseId, position - 1) : undefined}\n        key={item.value}\n        onClick={(event) => choose(item, event.shiftKey)}\n        // So segura o foco onde ele esta quando quem o tem e o campo de busca; a lista que detem o foco o recebe.\n        onMouseDown={holdsFocus ? undefined : (event) => event.preventDefault()}\n        ref={measured ? measureItem : undefined}\n        role=\"option\"\n      >\n        {selectionMode === 'multiple' && (\n          <span aria-hidden=\"true\" className={[styles.box, selected && styles.checked].filter(Boolean).join(' ')} />\n        )}\n        {item.label}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      aria-activedescendant={holdsFocus && activeIndex >= 0 ? optionId(baseId, activeIndex) : undefined}\n      aria-busy={loading || undefined}\n      aria-label={label}\n      aria-multiselectable={selectionMode === 'multiple' || undefined}\n      className={[styles.options, className].filter(Boolean).join(' ')}\n      id={baseId + '-options'}\n      onKeyDown={onKeyDown}\n      onScroll={onScroll}\n      ref={attachElement}\n      role=\"listbox\"\n      style={{ height, ...style }}\n      tabIndex={holdsFocus ? tabIndex : undefined}\n    >\n      {loading && <p className={styles.status}>{loadingMessage}</p>}\n      {detached.length > 0 && (\n        <div aria-label=\"Selecionados\" className={styles.group} role=\"group\">\n          {detached.map((item) => renderOption(item, 0, false))}\n        </div>\n      )}\n      <div aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.before }} />\n      {rendered.map((item, index) => renderOption(item, start + index + 1, index === 0))}\n      <div aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.after }} />\n      {!loading && visible.length === 0 && empty}\n    </div>\n  );\n}\n"],"names":["optionId","baseId","index","ListingOptions","className","elementRef","empty","height","holdsFocus","label","listing","loading","loadingMessage","onKeyDown","onSelect","style","tabIndex","detached","focusedKey","isSelected","select","selectionMode","visible","activeIndex","item","choose","extend","active","attachScroll","measureItem","onScroll","padding","scrollToIndex","start","end","useVirtualWindow","attachElement","useCallback","node","useEffect","_b","_a","rendered","jsxs","styles","jsx","renderOption","position","measured","selected","event"],"mappings":"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"}
+{"version":3,"file":"ListingOptions.js","sources":["../../../../src/components/data-display/List/ListingOptions.tsx"],"sourcesContent":["import { Fragment, useCallback, useEffect, type CSSProperties, type KeyboardEvent, type ReactNode, type RefObject } from 'react';\nimport type { Listing, ListingItem } from './useListing';\nimport { useVirtualWindow } from './useVirtualWindow';\nimport styles from './List.module.css';\n\nexport interface ListingOptionsProps {\n  baseId: string;\n  className?: string;\n  elementRef?: RefObject<HTMLElement | null>;\n  empty?: ReactNode;\n  height?: number;\n  label?: string;\n  listing: Listing;\n  loading?: boolean;\n  loadingMessage?: string;\n  holdsFocus?: boolean;\n  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;\n  onSelect?: (item: ListingItem) => void;\n  style?: CSSProperties;\n  tabIndex?: number;\n}\n\nexport function optionId(baseId: string, index: number) {\n  return baseId + '-option-' + index;\n}\n\ninterface RenderedOption {\n  item: ListingItem;\n  position: number;\n}\n\n/** Junta as opções seguidas de um mesmo grupo; as sem grupo ficam soltas, cada uma no seu bloco. */\nfunction groupConsecutive(options: readonly RenderedOption[]) {\n  const blocks: { group?: string; options: RenderedOption[] }[] = [];\n\n  for (const option of options) {\n    const last = blocks.at(-1);\n\n    if (option.item.group !== undefined && last?.group === option.item.group) {\n      last.options.push(option);\n    } else {\n      blocks.push({ group: option.item.group, options: [option] });\n    }\n  }\n\n  return blocks;\n}\n\nexport function ListingOptions({\n  baseId,\n  className,\n  elementRef,\n  empty,\n  height,\n  holdsFocus = true,\n  label,\n  listing,\n  loading = false,\n  loadingMessage = 'Carregando',\n  onKeyDown,\n  onSelect,\n  style,\n  tabIndex = 0,\n}: ListingOptionsProps) {\n  const { detached, focusedKey, isSelected, select, selectionMode, visible } = listing;\n  const activeIndex = visible.findIndex((item) => item.value === focusedKey);\n\n  function choose(item: ListingItem, extend: boolean) {\n    if (item.disabled) {\n      return;\n    }\n\n    select(item, extend);\n    onSelect?.(item);\n  }\n  const { active, attachScroll, measureItem, onScroll, padding, scrollToIndex, start, end } = useVirtualWindow(\n    visible.length,\n    height,\n  );\n\n  const attachElement = useCallback(\n    (node: HTMLElement | null) => {\n      attachScroll(node);\n\n      if (elementRef) {\n        elementRef.current = node;\n      }\n    },\n    [attachScroll, elementRef],\n  );\n\n  useEffect(() => {\n    const index = visible.findIndex((item) => item.value === focusedKey);\n\n    if (focusedKey === undefined || index < 0) {\n      return;\n    }\n\n    if (active) {\n      scrollToIndex(index);\n    } else {\n      document.getElementById(optionId(baseId, index))?.scrollIntoView?.({ block: 'nearest' });\n    }\n  }, [active, baseId, focusedKey, scrollToIndex, visible]);\n\n  const rendered = visible.slice(start, end);\n\n  if (selectionMode === 'none') {\n    return (\n      <ul\n        aria-busy={loading || undefined}\n        className={[styles.options, className].filter(Boolean).join(' ')}\n        id={baseId + '-options'}\n        onScroll={onScroll}\n        ref={attachElement}\n        style={{ height, ...style }}\n      >\n        {loading && <li className={styles.status}>{loadingMessage}</li>}\n        <li aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.before }} />\n        {rendered.map((item, index) => (\n          <li className={styles.option} key={item.value} ref={index === 0 ? measureItem : undefined}>\n            {item.label}\n          </li>\n        ))}\n        <li aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.after }} />\n        {!loading && visible.length === 0 && empty}\n      </ul>\n    );\n  }\n\n  function renderOption(item: ListingItem, position: number, measured: boolean) {\n    const selected = isSelected(item.value);\n    const id = position > 0 ? optionId(baseId, position - 1) : `${baseId}-selected-${item.value}`;\n\n    return (\n      <div\n        aria-describedby={item.description ? `${id}-description` : undefined}\n        aria-disabled={item.disabled || undefined}\n        aria-labelledby={item.description ? `${id}-label` : undefined}\n        aria-posinset={position > 0 ? position : undefined}\n        aria-selected={selected}\n        aria-setsize={position > 0 ? visible.length : undefined}\n        className={[styles.option, focusedKey === item.value && styles.focused, item.disabled && styles.disabled]\n          .filter(Boolean)\n          .join(' ')}\n        id={id}\n        key={item.value}\n        onClick={(event) => choose(item, event.shiftKey)}\n        // So segura o foco onde ele esta quando quem o tem e o campo de busca; a lista que detem o foco o recebe.\n        onMouseDown={holdsFocus ? undefined : (event) => event.preventDefault()}\n        ref={measured ? measureItem : undefined}\n        role=\"option\"\n      >\n        {selectionMode === 'multiple' && (\n          <span aria-hidden=\"true\" className={[styles.box, selected && styles.checked].filter(Boolean).join(' ')} />\n        )}\n        {item.icon && (\n          <span aria-hidden=\"true\" className={styles.optionIcon}>\n            {item.icon}\n          </span>\n        )}\n        {item.description ? (\n          <span className={styles.optionText}>\n            <span id={`${id}-label`}>{item.label}</span>\n            <span className={styles.optionDescription} id={`${id}-description`}>\n              {item.description}\n            </span>\n          </span>\n        ) : (\n          item.label\n        )}\n      </div>\n    );\n  }\n\n  const blocks = groupConsecutive(rendered.map((item, index) => ({ item, position: start + index + 1 })));\n\n  return (\n    <div\n      aria-activedescendant={holdsFocus && activeIndex >= 0 ? optionId(baseId, activeIndex) : undefined}\n      aria-busy={loading || undefined}\n      aria-label={label}\n      aria-multiselectable={selectionMode === 'multiple' || undefined}\n      className={[styles.options, className].filter(Boolean).join(' ')}\n      id={baseId + '-options'}\n      onKeyDown={onKeyDown}\n      onScroll={onScroll}\n      ref={attachElement}\n      role=\"listbox\"\n      style={{ height, ...style }}\n      tabIndex={holdsFocus ? tabIndex : undefined}\n    >\n      {loading && <p className={styles.status}>{loadingMessage}</p>}\n      {detached.length > 0 && (\n        <div aria-label=\"Selecionados\" className={styles.group} role=\"group\">\n          {detached.map((item) => renderOption(item, 0, false))}\n        </div>\n      )}\n      <div aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.before }} />\n      {blocks.map(({ group, options }) => {\n        const [first] = options;\n        const rendering = options.map(({ item, position }) => renderOption(item, position, position === start + 1));\n\n        if (group === undefined) {\n          return <Fragment key={first.item.value}>{rendering}</Fragment>;\n        }\n\n        const titleId = `${baseId}-group-${first.position}`;\n\n        return (\n          <div aria-labelledby={titleId} className={styles.section} key={`${group}:${first.item.value}`} role=\"group\">\n            <div className={styles.sectionTitle} id={titleId} role=\"presentation\">\n              {group}\n            </div>\n            {rendering}\n          </div>\n        );\n      })}\n      <div aria-hidden=\"true\" className={styles.spacer} style={{ height: padding.after }} />\n      {!loading && visible.length === 0 && empty}\n    </div>\n  );\n}\n"],"names":["optionId","baseId","index","groupConsecutive","options","blocks","option","last","ListingOptions","className","elementRef","empty","height","holdsFocus","label","listing","loading","loadingMessage","onKeyDown","onSelect","style","tabIndex","detached","focusedKey","isSelected","select","selectionMode","visible","activeIndex","item","choose","extend","active","attachScroll","measureItem","onScroll","padding","scrollToIndex","start","end","useVirtualWindow","attachElement","useCallback","node","useEffect","_b","_a","rendered","jsxs","styles","jsx","renderOption","position","measured","selected","id","event","group","first","rendering","Fragment","titleId"],"mappings":"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"}

package/dist/components/data-display/List/useListing.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useListing.cjs","sources":["../../../../src/components/data-display/List/useListing.ts"],"sourcesContent":["import { useMemo, useRef, useState, type KeyboardEvent } from 'react';\nimport { useSelection, type SelectionItem, type SelectionStatus } from '../../../hooks/useSelection';\nimport { containsTerm } from '../../../utils/textSearch';\n\nexport type ListingSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface ListingItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nexport interface UseListingOptions {\n  defaultValue?: readonly ListingItem[];\n  items: readonly ListingItem[];\n  onSearch?: (term: string) => void;\n  onSelectionChange?: (items: readonly ListingItem[]) => void;\n  selectionMode?: ListingSelectionMode;\n  value?: readonly ListingItem[];\n}\n\nexport interface Listing {\n  detached: readonly ListingItem[];\n  focus: (value?: string) => void;\n  focusFirst: () => void;\n  focusLast: () => void;\n  focusedKey?: string;\n  handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n  isSelected: (value: string) => boolean;\n  filter: (term: string) => void;\n  reset: () => void;\n  typeahead: (character: string) => void;\n  select: (item: ListingItem, extend?: boolean) => void;\n  selected: readonly ListingItem[];\n  selectionMode: ListingSelectionMode;\n  status: SelectionStatus;\n  toggleAll: () => void;\n  term: string;\n  visible: readonly ListingItem[];\n}\n\n/** Teclas que, num campo de texto, editam o texto; nele, a listagem nao as toma para si. */\nconst TECLAS_DE_EDICAO = ['Home', 'End', ' '];\n\nexport function useListing({\n  defaultValue,\n  items,\n  onSearch,\n  onSelectionChange,\n  selectionMode = 'none',\n  value,\n}: UseListingOptions): Listing {\n  const [term, setTerm] = useState('');\n\n  const visible = useMemo(() => {\n    if (onSearch || !term) {\n      return items;\n    }\n\n    return items.filter((item) => containsTerm(item.label, term));\n  }, [items, onSearch, term]);\n\n  const collection = useMemo<SelectionItem[]>(\n    () => visible.map((item) => ({ key: item.value, disabled: item.disabled, textValue: item.label })),\n    [visible],\n  );\n\n  // Toda opcao ja vista fica registrada, inclusive a que so chegou pelo valor. Com busca assincrona, `items`\n  // e trocada a cada consulta, e resolver a escolha so contra ela descartava o que veio de outra consulta.\n  const conhecidos = useRef(new Map<string, ListingItem>());\n\n  for (const item of [...(defaultValue ?? []), ...(value ?? [])]) {\n    if (!conhecidos.current.has(item.value)) {\n      conhecidos.current.set(item.value, item);\n    }\n  }\n\n  for (const item of items) {\n    conhecidos.current.set(item.value, item);\n  }\n\n  const conhecido = (chave: string): ListingItem => conhecidos.current.get(chave) ?? { value: chave, label: '' };\n\n  const selection = useSelection({\n    items: collection,\n    mode: selectionMode,\n    defaultSelectedKeys: defaultValue?.map((item) => item.value),\n    selectedKeys: value?.map((item) => item.value),\n    onSelectionChange: (keys) => onSelectionChange?.([...keys].map(conhecido)),\n  });\n\n  const selected = (value ?? selection.selectedItems.map((item) => ({ value: item.key, label: '' }))).map((item) =>\n    conhecido(item.value),\n  );\n\n  const detached = useMemo(() => {\n    if (!term || selectionMode !== 'multiple') {\n      return [];\n    }\n\n    const visibleValues = new Set(visible.map((item) => item.value));\n\n    return selected.filter((item) => !visibleValues.has(item.value));\n  }, [selected, selectionMode, term, visible]);\n\n  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {\n    if (selectionMode === 'none' || (event.target instanceof HTMLInputElement && TECLAS_DE_EDICAO.includes(event.key))) {\n      return;\n    }\n\n    const estender = event.shiftKey;\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (selection.focusedKey === undefined) {\n        selection.focusFirst(estender);\n      } else {\n        selection.focusNext(estender);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      selection.focusPrevious(estender);\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      selection.focusFirst(estender);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      selection.focusLast(estender);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      const focused = visible.find((item) => item.value === selection.focusedKey);\n\n      if (focused && !focused.disabled) {\n        event.preventDefault();\n        selection.select(focused.value);\n      }\n    }\n  }\n\n  return {\n    detached,\n    focus: selection.focus,\n    focusFirst: selection.focusFirst,\n    focusLast: selection.focusLast,\n    focusedKey: selection.focusedKey,\n    handleKeyDown,\n    isSelected: (itemValue) => selected.some((item) => item.value === itemValue),\n    filter: (nextTerm) => {\n      setTerm(nextTerm);\n      selection.focus(undefined);\n      onSearch?.(nextTerm);\n    },\n    reset: selection.reset,\n    typeahead: selection.search,\n    select: (item, extend) => {\n      if (item.disabled) {\n        return;\n      }\n\n      if (extend && selectionMode === 'multiple') {\n        selection.selectRange(item.value);\n        return;\n      }\n\n      selection.select(item.value);\n    },\n    selected,\n    selectionMode,\n    status: selection.status,\n    toggleAll: selection.toggleAll,\n    term,\n    visible,\n  };\n}\n"],"names":["TECLAS_DE_EDICAO","useListing","defaultValue","items","onSearch","onSelectionChange","selectionMode","value","term","setTerm","useState","visible","useMemo","item","containsTerm","collection","conhecidos","useRef","conhecido","chave","selection","useSelection","keys","selected","detached","visibleValues","handleKeyDown","event","estender","focused","itemValue","nextTerm","extend"],"mappings":"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"}
+{"version":3,"file":"useListing.cjs","sources":["../../../../src/components/data-display/List/useListing.ts"],"sourcesContent":["import { useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport { useSelection, type SelectionItem, type SelectionStatus } from '../../../hooks/useSelection';\nimport { containsTerm } from '../../../utils/textSearch';\n\nexport type ListingSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface ListingItem {\n  /** Segunda linha da opção, como a coleção de um documento. */\n  description?: string;\n  disabled?: boolean;\n  /** Título do grupo. As opções seguidas de um mesmo grupo aparecem juntas, sob ele. */\n  group?: string;\n  /** Decorativo, à frente do rótulo: quem nomeia a opção é o rótulo. */\n  icon?: ReactNode;\n  label: string;\n  value: string;\n}\n\nexport interface UseListingOptions {\n  defaultValue?: readonly ListingItem[];\n  items: readonly ListingItem[];\n  onSearch?: (term: string) => void;\n  onSelectionChange?: (items: readonly ListingItem[]) => void;\n  selectionMode?: ListingSelectionMode;\n  value?: readonly ListingItem[];\n}\n\nexport interface Listing {\n  detached: readonly ListingItem[];\n  focus: (value?: string) => void;\n  focusFirst: () => void;\n  focusLast: () => void;\n  focusedKey?: string;\n  handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n  isSelected: (value: string) => boolean;\n  filter: (term: string) => void;\n  reset: () => void;\n  typeahead: (character: string) => void;\n  select: (item: ListingItem, extend?: boolean) => void;\n  selected: readonly ListingItem[];\n  selectionMode: ListingSelectionMode;\n  status: SelectionStatus;\n  toggleAll: () => void;\n  term: string;\n  visible: readonly ListingItem[];\n}\n\n/** Teclas que, num campo de texto, editam o texto; nele, a listagem nao as toma para si. */\nconst TECLAS_DE_EDICAO = ['Home', 'End', ' '];\n\nexport function useListing({\n  defaultValue,\n  items,\n  onSearch,\n  onSelectionChange,\n  selectionMode = 'none',\n  value,\n}: UseListingOptions): Listing {\n  const [term, setTerm] = useState('');\n\n  const visible = useMemo(() => {\n    if (onSearch || !term) {\n      return items;\n    }\n\n    return items.filter((item) => containsTerm(item.label, term));\n  }, [items, onSearch, term]);\n\n  const collection = useMemo<SelectionItem[]>(\n    () => visible.map((item) => ({ key: item.value, disabled: item.disabled, textValue: item.label })),\n    [visible],\n  );\n\n  // Toda opcao ja vista fica registrada, inclusive a que so chegou pelo valor. Com busca assincrona, `items`\n  // e trocada a cada consulta, e resolver a escolha so contra ela descartava o que veio de outra consulta.\n  const conhecidos = useRef(new Map<string, ListingItem>());\n\n  for (const item of [...(defaultValue ?? []), ...(value ?? [])]) {\n    if (!conhecidos.current.has(item.value)) {\n      conhecidos.current.set(item.value, item);\n    }\n  }\n\n  for (const item of items) {\n    conhecidos.current.set(item.value, item);\n  }\n\n  const conhecido = (chave: string): ListingItem => conhecidos.current.get(chave) ?? { value: chave, label: '' };\n\n  const selection = useSelection({\n    items: collection,\n    mode: selectionMode,\n    defaultSelectedKeys: defaultValue?.map((item) => item.value),\n    selectedKeys: value?.map((item) => item.value),\n    onSelectionChange: (keys) => onSelectionChange?.([...keys].map(conhecido)),\n  });\n\n  const selected = (value ?? selection.selectedItems.map((item) => ({ value: item.key, label: '' }))).map((item) =>\n    conhecido(item.value),\n  );\n\n  const detached = useMemo(() => {\n    if (!term || selectionMode !== 'multiple') {\n      return [];\n    }\n\n    const visibleValues = new Set(visible.map((item) => item.value));\n\n    return selected.filter((item) => !visibleValues.has(item.value));\n  }, [selected, selectionMode, term, visible]);\n\n  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {\n    if (selectionMode === 'none' || (event.target instanceof HTMLInputElement && TECLAS_DE_EDICAO.includes(event.key))) {\n      return;\n    }\n\n    const estender = event.shiftKey;\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (selection.focusedKey === undefined) {\n        selection.focusFirst(estender);\n      } else {\n        selection.focusNext(estender);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      selection.focusPrevious(estender);\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      selection.focusFirst(estender);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      selection.focusLast(estender);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      const focused = visible.find((item) => item.value === selection.focusedKey);\n\n      if (focused && !focused.disabled) {\n        event.preventDefault();\n        selection.select(focused.value);\n      }\n    }\n  }\n\n  return {\n    detached,\n    focus: selection.focus,\n    focusFirst: selection.focusFirst,\n    focusLast: selection.focusLast,\n    focusedKey: selection.focusedKey,\n    handleKeyDown,\n    isSelected: (itemValue) => selected.some((item) => item.value === itemValue),\n    filter: (nextTerm) => {\n      setTerm(nextTerm);\n      selection.focus(undefined);\n      onSearch?.(nextTerm);\n    },\n    reset: selection.reset,\n    typeahead: selection.search,\n    select: (item, extend) => {\n      if (item.disabled) {\n        return;\n      }\n\n      if (extend && selectionMode === 'multiple') {\n        selection.selectRange(item.value);\n        return;\n      }\n\n      selection.select(item.value);\n    },\n    selected,\n    selectionMode,\n    status: selection.status,\n    toggleAll: selection.toggleAll,\n    term,\n    visible,\n  };\n}\n"],"names":["TECLAS_DE_EDICAO","useListing","defaultValue","items","onSearch","onSelectionChange","selectionMode","value","term","setTerm","useState","visible","useMemo","item","containsTerm","collection","conhecidos","useRef","conhecido","chave","selection","useSelection","keys","selected","detached","visibleValues","handleKeyDown","event","estender","focused","itemValue","nextTerm","extend"],"mappings":"yNAgDMA,EAAmB,CAAC,OAAQ,MAAO,GAAG,EAErC,SAASC,EAAW,CACzB,aAAAC,EACA,MAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,cAAAC,EAAgB,OAChB,MAAAC,CACF,EAA+B,CAC7B,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAE,EAE7BC,EAAUC,EAAAA,QAAQ,IAClBR,GAAY,CAACI,EACRL,EAGFA,EAAM,OAAQU,GAASC,EAAAA,aAAaD,EAAK,MAAOL,CAAI,CAAC,EAC3D,CAACL,EAAOC,EAAUI,CAAI,CAAC,EAEpBO,EAAaH,EAAAA,QACjB,IAAMD,EAAQ,IAAKE,IAAU,CAAE,IAAKA,EAAK,MAAO,SAAUA,EAAK,SAAU,UAAWA,EAAK,OAAQ,EACjG,CAACF,CAAO,CAAA,EAKJK,EAAaC,EAAAA,OAAO,IAAI,GAA0B,EAExD,UAAWJ,IAAQ,CAAC,GAAIX,GAAgB,CAAA,EAAK,GAAIK,GAAS,CAAA,CAAG,EACtDS,EAAW,QAAQ,IAAIH,EAAK,KAAK,GACpCG,EAAW,QAAQ,IAAIH,EAAK,MAAOA,CAAI,EAI3C,UAAWA,KAAQV,EACjBa,EAAW,QAAQ,IAAIH,EAAK,MAAOA,CAAI,EAGzC,MAAMK,EAAaC,GAA+BH,EAAW,QAAQ,IAAIG,CAAK,GAAK,CAAE,MAAOA,EAAO,MAAO,EAAA,EAEpGC,EAAYC,EAAAA,aAAa,CAC7B,MAAON,EACP,KAAMT,EACN,oBAAqBJ,GAAA,YAAAA,EAAc,IAAKW,GAASA,EAAK,OACtD,aAAcN,GAAA,YAAAA,EAAO,IAAKM,GAASA,EAAK,OACxC,kBAAoBS,GAASjB,GAAA,YAAAA,EAAoB,CAAC,GAAGiB,CAAI,EAAE,IAAIJ,CAAS,EAAC,CAC1E,EAEKK,GAAYhB,GAASa,EAAU,cAAc,IAAKP,IAAU,CAAE,MAAOA,EAAK,IAAK,MAAO,EAAA,EAAK,GAAG,IAAKA,GACvGK,EAAUL,EAAK,KAAK,CAAA,EAGhBW,EAAWZ,EAAAA,QAAQ,IAAM,CAC7B,GAAI,CAACJ,GAAQF,IAAkB,WAC7B,MAAO,CAAA,EAGT,MAAMmB,EAAgB,IAAI,IAAId,EAAQ,IAAKE,GAASA,EAAK,KAAK,CAAC,EAE/D,OAAOU,EAAS,OAAQV,GAAS,CAACY,EAAc,IAAIZ,EAAK,KAAK,CAAC,CACjE,EAAG,CAACU,EAAUjB,EAAeE,EAAMG,CAAO,CAAC,EAE3C,SAASe,EAAcC,EAAmC,CACxD,GAAIrB,IAAkB,QAAWqB,EAAM,kBAAkB,kBAAoB3B,EAAiB,SAAS2B,EAAM,GAAG,EAC9G,OAGF,MAAMC,EAAWD,EAAM,SAEvB,GAAIA,EAAM,MAAQ,YAChBA,EAAM,eAAA,EACFP,EAAU,aAAe,OAC3BA,EAAU,WAAWQ,CAAQ,EAE7BR,EAAU,UAAUQ,CAAQ,UAErBD,EAAM,MAAQ,UACvBA,EAAM,eAAA,EACNP,EAAU,cAAcQ,CAAQ,UACvBD,EAAM,MAAQ,OACvBA,EAAM,eAAA,EACNP,EAAU,WAAWQ,CAAQ,UACpBD,EAAM,MAAQ,MACvBA,EAAM,eAAA,EACNP,EAAU,UAAUQ,CAAQ,UACnBD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CACrD,MAAME,EAAUlB,EAAQ,KAAME,GAASA,EAAK,QAAUO,EAAU,UAAU,EAEtES,GAAW,CAACA,EAAQ,WACtBF,EAAM,eAAA,EACNP,EAAU,OAAOS,EAAQ,KAAK,EAElC,CACF,CAEA,MAAO,CACL,SAAAL,EACA,MAAOJ,EAAU,MACjB,WAAYA,EAAU,WACtB,UAAWA,EAAU,UACrB,WAAYA,EAAU,WACtB,cAAAM,EACA,WAAaI,GAAcP,EAAS,KAAMV,GAASA,EAAK,QAAUiB,CAAS,EAC3E,OAASC,GAAa,CACpBtB,EAAQsB,CAAQ,EAChBX,EAAU,MAAM,MAAS,EACzBhB,GAAA,MAAAA,EAAW2B,EACb,EACA,MAAOX,EAAU,MACjB,UAAWA,EAAU,OACrB,OAAQ,CAACP,EAAMmB,IAAW,CACxB,GAAI,CAAAnB,EAAK,SAIT,IAAImB,GAAU1B,IAAkB,WAAY,CAC1Cc,EAAU,YAAYP,EAAK,KAAK,EAChC,MACF,CAEAO,EAAU,OAAOP,EAAK,KAAK,EAC7B,EACA,SAAAU,EACA,cAAAjB,EACA,OAAQc,EAAU,OAClB,UAAWA,EAAU,UACrB,KAAAZ,EACA,QAAAG,CAAA,CAEJ"}

package/dist/components/data-display/List/useListing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListing.js","sources":["../../../../src/components/data-display/List/useListing.ts"],"sourcesContent":["import { useMemo, useRef, useState, type KeyboardEvent } from 'react';\nimport { useSelection, type SelectionItem, type SelectionStatus } from '../../../hooks/useSelection';\nimport { containsTerm } from '../../../utils/textSearch';\n\nexport type ListingSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface ListingItem {\n  disabled?: boolean;\n  label: string;\n  value: string;\n}\n\nexport interface UseListingOptions {\n  defaultValue?: readonly ListingItem[];\n  items: readonly ListingItem[];\n  onSearch?: (term: string) => void;\n  onSelectionChange?: (items: readonly ListingItem[]) => void;\n  selectionMode?: ListingSelectionMode;\n  value?: readonly ListingItem[];\n}\n\nexport interface Listing {\n  detached: readonly ListingItem[];\n  focus: (value?: string) => void;\n  focusFirst: () => void;\n  focusLast: () => void;\n  focusedKey?: string;\n  handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n  isSelected: (value: string) => boolean;\n  filter: (term: string) => void;\n  reset: () => void;\n  typeahead: (character: string) => void;\n  select: (item: ListingItem, extend?: boolean) => void;\n  selected: readonly ListingItem[];\n  selectionMode: ListingSelectionMode;\n  status: SelectionStatus;\n  toggleAll: () => void;\n  term: string;\n  visible: readonly ListingItem[];\n}\n\n/** Teclas que, num campo de texto, editam o texto; nele, a listagem nao as toma para si. */\nconst TECLAS_DE_EDICAO = ['Home', 'End', ' '];\n\nexport function useListing({\n  defaultValue,\n  items,\n  onSearch,\n  onSelectionChange,\n  selectionMode = 'none',\n  value,\n}: UseListingOptions): Listing {\n  const [term, setTerm] = useState('');\n\n  const visible = useMemo(() => {\n    if (onSearch || !term) {\n      return items;\n    }\n\n    return items.filter((item) => containsTerm(item.label, term));\n  }, [items, onSearch, term]);\n\n  const collection = useMemo<SelectionItem[]>(\n    () => visible.map((item) => ({ key: item.value, disabled: item.disabled, textValue: item.label })),\n    [visible],\n  );\n\n  // Toda opcao ja vista fica registrada, inclusive a que so chegou pelo valor. Com busca assincrona, `items`\n  // e trocada a cada consulta, e resolver a escolha so contra ela descartava o que veio de outra consulta.\n  const conhecidos = useRef(new Map<string, ListingItem>());\n\n  for (const item of [...(defaultValue ?? []), ...(value ?? [])]) {\n    if (!conhecidos.current.has(item.value)) {\n      conhecidos.current.set(item.value, item);\n    }\n  }\n\n  for (const item of items) {\n    conhecidos.current.set(item.value, item);\n  }\n\n  const conhecido = (chave: string): ListingItem => conhecidos.current.get(chave) ?? { value: chave, label: '' };\n\n  const selection = useSelection({\n    items: collection,\n    mode: selectionMode,\n    defaultSelectedKeys: defaultValue?.map((item) => item.value),\n    selectedKeys: value?.map((item) => item.value),\n    onSelectionChange: (keys) => onSelectionChange?.([...keys].map(conhecido)),\n  });\n\n  const selected = (value ?? selection.selectedItems.map((item) => ({ value: item.key, label: '' }))).map((item) =>\n    conhecido(item.value),\n  );\n\n  const detached = useMemo(() => {\n    if (!term || selectionMode !== 'multiple') {\n      return [];\n    }\n\n    const visibleValues = new Set(visible.map((item) => item.value));\n\n    return selected.filter((item) => !visibleValues.has(item.value));\n  }, [selected, selectionMode, term, visible]);\n\n  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {\n    if (selectionMode === 'none' || (event.target instanceof HTMLInputElement && TECLAS_DE_EDICAO.includes(event.key))) {\n      return;\n    }\n\n    const estender = event.shiftKey;\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (selection.focusedKey === undefined) {\n        selection.focusFirst(estender);\n      } else {\n        selection.focusNext(estender);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      selection.focusPrevious(estender);\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      selection.focusFirst(estender);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      selection.focusLast(estender);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      const focused = visible.find((item) => item.value === selection.focusedKey);\n\n      if (focused && !focused.disabled) {\n        event.preventDefault();\n        selection.select(focused.value);\n      }\n    }\n  }\n\n  return {\n    detached,\n    focus: selection.focus,\n    focusFirst: selection.focusFirst,\n    focusLast: selection.focusLast,\n    focusedKey: selection.focusedKey,\n    handleKeyDown,\n    isSelected: (itemValue) => selected.some((item) => item.value === itemValue),\n    filter: (nextTerm) => {\n      setTerm(nextTerm);\n      selection.focus(undefined);\n      onSearch?.(nextTerm);\n    },\n    reset: selection.reset,\n    typeahead: selection.search,\n    select: (item, extend) => {\n      if (item.disabled) {\n        return;\n      }\n\n      if (extend && selectionMode === 'multiple') {\n        selection.selectRange(item.value);\n        return;\n      }\n\n      selection.select(item.value);\n    },\n    selected,\n    selectionMode,\n    status: selection.status,\n    toggleAll: selection.toggleAll,\n    term,\n    visible,\n  };\n}\n"],"names":["TECLAS_DE_EDICAO","useListing","defaultValue","items","onSearch","onSelectionChange","selectionMode","value","term","setTerm","useState","visible","useMemo","item","containsTerm","collection","conhecidos","useRef","conhecido","chave","selection","useSelection","keys","selected","detached","visibleValues","handleKeyDown","event","estender","focused","itemValue","nextTerm","extend"],"mappings":"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"}
+{"version":3,"file":"useListing.js","sources":["../../../../src/components/data-display/List/useListing.ts"],"sourcesContent":["import { useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';\nimport { useSelection, type SelectionItem, type SelectionStatus } from '../../../hooks/useSelection';\nimport { containsTerm } from '../../../utils/textSearch';\n\nexport type ListingSelectionMode = 'none' | 'single' | 'multiple';\n\nexport interface ListingItem {\n  /** Segunda linha da opção, como a coleção de um documento. */\n  description?: string;\n  disabled?: boolean;\n  /** Título do grupo. As opções seguidas de um mesmo grupo aparecem juntas, sob ele. */\n  group?: string;\n  /** Decorativo, à frente do rótulo: quem nomeia a opção é o rótulo. */\n  icon?: ReactNode;\n  label: string;\n  value: string;\n}\n\nexport interface UseListingOptions {\n  defaultValue?: readonly ListingItem[];\n  items: readonly ListingItem[];\n  onSearch?: (term: string) => void;\n  onSelectionChange?: (items: readonly ListingItem[]) => void;\n  selectionMode?: ListingSelectionMode;\n  value?: readonly ListingItem[];\n}\n\nexport interface Listing {\n  detached: readonly ListingItem[];\n  focus: (value?: string) => void;\n  focusFirst: () => void;\n  focusLast: () => void;\n  focusedKey?: string;\n  handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;\n  isSelected: (value: string) => boolean;\n  filter: (term: string) => void;\n  reset: () => void;\n  typeahead: (character: string) => void;\n  select: (item: ListingItem, extend?: boolean) => void;\n  selected: readonly ListingItem[];\n  selectionMode: ListingSelectionMode;\n  status: SelectionStatus;\n  toggleAll: () => void;\n  term: string;\n  visible: readonly ListingItem[];\n}\n\n/** Teclas que, num campo de texto, editam o texto; nele, a listagem nao as toma para si. */\nconst TECLAS_DE_EDICAO = ['Home', 'End', ' '];\n\nexport function useListing({\n  defaultValue,\n  items,\n  onSearch,\n  onSelectionChange,\n  selectionMode = 'none',\n  value,\n}: UseListingOptions): Listing {\n  const [term, setTerm] = useState('');\n\n  const visible = useMemo(() => {\n    if (onSearch || !term) {\n      return items;\n    }\n\n    return items.filter((item) => containsTerm(item.label, term));\n  }, [items, onSearch, term]);\n\n  const collection = useMemo<SelectionItem[]>(\n    () => visible.map((item) => ({ key: item.value, disabled: item.disabled, textValue: item.label })),\n    [visible],\n  );\n\n  // Toda opcao ja vista fica registrada, inclusive a que so chegou pelo valor. Com busca assincrona, `items`\n  // e trocada a cada consulta, e resolver a escolha so contra ela descartava o que veio de outra consulta.\n  const conhecidos = useRef(new Map<string, ListingItem>());\n\n  for (const item of [...(defaultValue ?? []), ...(value ?? [])]) {\n    if (!conhecidos.current.has(item.value)) {\n      conhecidos.current.set(item.value, item);\n    }\n  }\n\n  for (const item of items) {\n    conhecidos.current.set(item.value, item);\n  }\n\n  const conhecido = (chave: string): ListingItem => conhecidos.current.get(chave) ?? { value: chave, label: '' };\n\n  const selection = useSelection({\n    items: collection,\n    mode: selectionMode,\n    defaultSelectedKeys: defaultValue?.map((item) => item.value),\n    selectedKeys: value?.map((item) => item.value),\n    onSelectionChange: (keys) => onSelectionChange?.([...keys].map(conhecido)),\n  });\n\n  const selected = (value ?? selection.selectedItems.map((item) => ({ value: item.key, label: '' }))).map((item) =>\n    conhecido(item.value),\n  );\n\n  const detached = useMemo(() => {\n    if (!term || selectionMode !== 'multiple') {\n      return [];\n    }\n\n    const visibleValues = new Set(visible.map((item) => item.value));\n\n    return selected.filter((item) => !visibleValues.has(item.value));\n  }, [selected, selectionMode, term, visible]);\n\n  function handleKeyDown(event: KeyboardEvent<HTMLElement>) {\n    if (selectionMode === 'none' || (event.target instanceof HTMLInputElement && TECLAS_DE_EDICAO.includes(event.key))) {\n      return;\n    }\n\n    const estender = event.shiftKey;\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (selection.focusedKey === undefined) {\n        selection.focusFirst(estender);\n      } else {\n        selection.focusNext(estender);\n      }\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      selection.focusPrevious(estender);\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      selection.focusFirst(estender);\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      selection.focusLast(estender);\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      const focused = visible.find((item) => item.value === selection.focusedKey);\n\n      if (focused && !focused.disabled) {\n        event.preventDefault();\n        selection.select(focused.value);\n      }\n    }\n  }\n\n  return {\n    detached,\n    focus: selection.focus,\n    focusFirst: selection.focusFirst,\n    focusLast: selection.focusLast,\n    focusedKey: selection.focusedKey,\n    handleKeyDown,\n    isSelected: (itemValue) => selected.some((item) => item.value === itemValue),\n    filter: (nextTerm) => {\n      setTerm(nextTerm);\n      selection.focus(undefined);\n      onSearch?.(nextTerm);\n    },\n    reset: selection.reset,\n    typeahead: selection.search,\n    select: (item, extend) => {\n      if (item.disabled) {\n        return;\n      }\n\n      if (extend && selectionMode === 'multiple') {\n        selection.selectRange(item.value);\n        return;\n      }\n\n      selection.select(item.value);\n    },\n    selected,\n    selectionMode,\n    status: selection.status,\n    toggleAll: selection.toggleAll,\n    term,\n    visible,\n  };\n}\n"],"names":["TECLAS_DE_EDICAO","useListing","defaultValue","items","onSearch","onSelectionChange","selectionMode","value","term","setTerm","useState","visible","useMemo","item","containsTerm","collection","conhecidos","useRef","conhecido","chave","selection","useSelection","keys","selected","detached","visibleValues","handleKeyDown","event","estender","focused","itemValue","nextTerm","extend"],"mappings":"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"}