@plenustech/design-system 0.2.2 → 0.2.3

package/dist/components/data-display/Accordion/Accordion.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),j=require("react"),o=require("./Accordion.module.css.cjs"),S=require("../../../hooks/useSelection/useSelection.cjs"),q=require("../../icons/icons.cjs");function A({className:r,defaultExpandedKeys:a,expandedKeys:d,items:s,multiple:y=!1,onExpandedChange:n,iconPosition:u="right",divider:x=!0,...N}){const f=`accordion-${j.useId()}`,k=j.useRef(new Map),t=j.useMemo(()=>s.map(e=>({key:e.key,disabled:e.disabled,textValue:e.label})),[s]),h=S.useSelection({allowEmpty:!0,items:t,mode:y?"multiple":"single",defaultSelectedKeys:d===void 0?a:void 0,selectedKeys:d,onSelectionChange:e=>n==null?void 0:n([...e])});function v(e,c){var p,$,w;let l;e.key==="ArrowDown"?l=g(t,c,1):e.key==="ArrowUp"?l=g(t,c,-1):e.key==="Home"?l=(p=t.find(b=>!b.disabled))==null?void 0:p.key:e.key==="End"&&(l=($=[...t].reverse().find(b=>!b.disabled))==null?void 0:$.key),l&&(e.preventDefault(),(w=k.current.get(l))==null||w.focus())}return i.jsx("div",{...N,className:[o.default.accordion,x&&o.default.divided,r].filter(Boolean).join(" "),children:s.map(e=>{const c=h.selectedKeys.has(e.key);return i.jsxs("div",{className:o.default.item,children:[i.jsx("h3",{className:o.default.heading,children:i.jsxs("button",{ref:l=>{l?k.current.set(e.key,l):k.current.delete(e.key)},className:[o.default.trigger,u==="left"&&o.default.iconLeft].filter(Boolean).join(" "),type:"button",id:`${f}-${e.key}`,"aria-controls":`${f}-${e.key}-panel`,"aria-expanded":c,disabled:e.disabled,onClick:()=>h.select(e.key),onKeyDown:l=>v(l,e.key),children:[i.jsx("span",{className:o.default.label,children:e.label}),i.jsx(q.IconChevronDown,{className:[o.default.icon,c&&o.default.iconOpen].filter(Boolean).join(" "),size:16})]})}),i.jsx("div",{className:o.default.panel,id:`${f}-${e.key}-panel`,role:"region","aria-labelledby":`${f}-${e.key}`,hidden:!c,children:e.content})]},e.key)})})}function g(r,a,d){const s=r.length,y=r.findIndex(n=>n.key===a);for(let n=1;n<=s;n+=1){const u=r[(y+d*n+s*s)%s];if(!u.disabled)return u.key}return a}exports.Accordion=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),f=require("react"),o=require("./Accordion.module.css.cjs"),q=require("../../../hooks/useSelection/useSelection.cjs"),D=require("../../icons/icons.cjs");function I({aberto:s,abrir:t,...d}){const l=f.useRef(null);return f.useEffect(()=>{const c=l.current;if(!(!c||s||!t))return c.setAttribute("hidden","until-found"),c.addEventListener("beforematch",t),()=>c.removeEventListener("beforematch",t)},[s,t]),r.jsx("div",{...d,hidden:!s,ref:l})}function K({className:s,defaultExpandedKeys:t,expandedKeys:d,items:l,multiple:c=!1,onExpandedChange:i,iconPosition:y="right",divider:x=!0,headingLevel:g=3,...N}){const k=`accordion-${f.useId()}`,A=`h${g}`,b=f.useRef(new Map),u=f.useMemo(()=>l.map(e=>({key:e.key,disabled:e.disabled,textValue:e.label})),[l]),h=q.useSelection({allowEmpty:!0,items:u,mode:c?"multiple":"single",defaultSelectedKeys:d===void 0?t:void 0,selectedKeys:d,onSelectionChange:e=>i==null?void 0:i([...e])});function S(e,a){var p,v,$;let n;e.key==="ArrowDown"?n=w(u,a,1):e.key==="ArrowUp"?n=w(u,a,-1):e.key==="Home"?n=(p=u.find(j=>!j.disabled))==null?void 0:p.key:e.key==="End"&&(n=(v=[...u].reverse().find(j=>!j.disabled))==null?void 0:v.key),n&&(e.preventDefault(),($=b.current.get(n))==null||$.focus())}return r.jsx("div",{...N,className:[o.default.accordion,x&&o.default.divided,s].filter(Boolean).join(" "),children:l.map(e=>{const a=h.selectedKeys.has(e.key);return r.jsxs("div",{className:o.default.item,children:[r.jsx(A,{className:o.default.heading,id:e.id,children:r.jsxs("button",{ref:n=>{n?b.current.set(e.key,n):b.current.delete(e.key)},className:[o.default.trigger,y==="left"&&o.default.iconLeft].filter(Boolean).join(" "),type:"button",id:`${k}-${e.key}`,"aria-controls":`${k}-${e.key}-panel`,"aria-expanded":a,disabled:e.disabled,onClick:()=>h.select(e.key),onKeyDown:n=>S(n,e.key),children:[r.jsx("span",{className:o.default.label,children:e.label}),r.jsx(D.IconChevronDown,{className:[o.default.icon,a&&o.default.iconOpen].filter(Boolean).join(" "),size:16})]})}),r.jsx(I,{aberto:a,abrir:e.disabled?void 0:()=>h.select(e.key),"aria-labelledby":`${k}-${e.key}`,className:o.default.panel,id:`${k}-${e.key}-panel`,role:"region",children:e.content})]},e.key)})})}function w(s,t,d){const l=s.length,c=s.findIndex(i=>i.key===t);for(let i=1;i<=l;i+=1){const y=s[(c+d*i+l*l)%l];if(!y.disabled)return y.key}return t}exports.Accordion=K;
 //# sourceMappingURL=Accordion.cjs.map

package/dist/components/data-display/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/data-display/Accordion/Accordion.tsx"],"sourcesContent":["import {\n  useId,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport styles from './Accordion.module.css';\nimport { IconChevronDown } from '../../icons';\n\nexport interface AccordionItem {\n  content: ReactNode;\n  disabled?: boolean;\n  key: string;\n  label: string;\n}\n\nexport type AccordionIconPosition = 'left' | 'right';\n\nexport interface AccordionProps extends ComponentPropsWithRef<'div'> {\n  defaultExpandedKeys?: readonly string[];\n  expandedKeys?: readonly string[];\n  items: readonly AccordionItem[];\n  multiple?: boolean;\n  onExpandedChange?: (keys: readonly string[]) => void;\n  /** Direita e a convencao da web; esquerda serve a rotulos curtos em coluna estreita. */\n  iconPosition?: AccordionIconPosition;\n  /** Divisor entre as secoes, com a folga que ele exige. */\n  divider?: boolean;\n}\n\nexport function Accordion({\n  className,\n  defaultExpandedKeys,\n  expandedKeys,\n  items,\n  multiple = false,\n  onExpandedChange,\n  iconPosition = 'right',\n  divider = true,\n  ...props\n}: AccordionProps) {\n  const baseId = `accordion-${useId()}`;\n  const nodes = useRef(new Map<string, HTMLElement>());\n  const collection = useMemo<SelectionItem[]>(\n    () => items.map((item) => ({ key: item.key, disabled: item.disabled, textValue: item.label })),\n    [items],\n  );\n  const selection = useSelection({\n    // Uma secao aberta fecha ao ser clicada de novo, e nenhuma aberta e um\n    // estado valido do acordeao — ao contrario de uma aba, que sempre tem uma.\n    allowEmpty: true,\n    items: collection,\n    mode: multiple ? 'multiple' : 'single',\n    defaultSelectedKeys: expandedKeys === undefined ? defaultExpandedKeys : undefined,\n    selectedKeys: expandedKeys,\n    onSelectionChange: (keys) => onExpandedChange?.([...keys]),\n  });\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>, key: string) {\n    let destino: string | undefined;\n\n    if (event.key === 'ArrowDown') {\n      destino = proxima(collection, key, 1);\n    } else if (event.key === 'ArrowUp') {\n      destino = proxima(collection, key, -1);\n    } else if (event.key === 'Home') {\n      destino = collection.find((item) => !item.disabled)?.key;\n    } else if (event.key === 'End') {\n      destino = [...collection].reverse().find((item) => !item.disabled)?.key;\n    }\n\n    if (destino) {\n      event.preventDefault();\n      nodes.current.get(destino)?.focus();\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={[styles.accordion, divider && styles.divided, className].filter(Boolean).join(' ')}\n    >\n      {items.map((item) => {\n        const aberto = selection.selectedKeys.has(item.key);\n\n        return (\n          <div className={styles.item} key={item.key}>\n            <h3 className={styles.heading}>\n              <button\n                ref={(node) => {\n                  if (node) {\n                    nodes.current.set(item.key, node);\n                  } else {\n                    nodes.current.delete(item.key);\n                  }\n                }}\n                className={[styles.trigger, iconPosition === 'left' && styles.iconLeft].filter(Boolean).join(' ')}\n                type=\"button\"\n                id={`${baseId}-${item.key}`}\n                aria-controls={`${baseId}-${item.key}-panel`}\n                aria-expanded={aberto}\n                disabled={item.disabled}\n                onClick={() => selection.select(item.key)}\n                onKeyDown={(event) => handleKeyDown(event, item.key)}\n              >\n                <span className={styles.label}>{item.label}</span>\n                <IconChevronDown className={[styles.icon, aberto && styles.iconOpen].filter(Boolean).join(' ')} size={16} />\n              </button>\n            </h3>\n            <div\n              className={styles.panel}\n              id={`${baseId}-${item.key}-panel`}\n              role=\"region\"\n              aria-labelledby={`${baseId}-${item.key}`}\n              hidden={!aberto}\n            >\n              {item.content}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction proxima(items: readonly SelectionItem[], from: string, passo: 1 | -1) {\n  const total = items.length;\n  const inicio = items.findIndex((item) => item.key === from);\n\n  for (let i = 1; i <= total; i += 1) {\n    const item = items[(inicio + passo * i + total * total) % total];\n    if (!item.disabled) {\n      return item.key;\n    }\n  }\n\n  return from;\n}\n"],"names":["Accordion","className","defaultExpandedKeys","expandedKeys","items","multiple","onExpandedChange","iconPosition","divider","props","baseId","useId","nodes","useRef","collection","useMemo","item","selection","useSelection","keys","handleKeyDown","event","key","destino","proxima","_a","_b","_c","jsx","styles","aberto","jsxs","node","IconChevronDown","from","passo","total","inicio","i"],"mappings":"6QAiCO,SAASA,EAAU,CACxB,UAAAC,EACA,oBAAAC,EACA,aAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,GACX,iBAAAC,EACA,aAAAC,EAAe,QACf,QAAAC,EAAU,GACV,GAAGC,CACL,EAAmB,CACjB,MAAMC,EAAS,aAAaC,EAAAA,MAAA,CAAO,GAC7BC,EAAQC,EAAAA,OAAO,IAAI,GAA0B,EAC7CC,EAAaC,EAAAA,QACjB,IAAMX,EAAM,IAAKY,IAAU,CAAE,IAAKA,EAAK,IAAK,SAAUA,EAAK,SAAU,UAAWA,EAAK,OAAQ,EAC7F,CAACZ,CAAK,CAAA,EAEFa,EAAYC,EAAAA,aAAa,CAG7B,WAAY,GACZ,MAAOJ,EACP,KAAMT,EAAW,WAAa,SAC9B,oBAAqBF,IAAiB,OAAYD,EAAsB,OACxE,aAAcC,EACd,kBAAoBgB,GAASb,GAAA,YAAAA,EAAmB,CAAC,GAAGa,CAAI,EAAC,CAC1D,EAED,SAASC,EAAcC,EAAyCC,EAAa,WAC3E,IAAIC,EAEAF,EAAM,MAAQ,YAChBE,EAAUC,EAAQV,EAAYQ,EAAK,CAAC,EAC3BD,EAAM,MAAQ,UACvBE,EAAUC,EAAQV,EAAYQ,EAAK,EAAE,EAC5BD,EAAM,MAAQ,OACvBE,GAAUE,EAAAX,EAAW,KAAME,GAAS,CAACA,EAAK,QAAQ,IAAxC,YAAAS,EAA2C,IAC5CJ,EAAM,MAAQ,QACvBE,GAAUG,EAAA,CAAC,GAAGZ,CAAU,EAAE,QAAA,EAAU,KAAME,GAAS,CAACA,EAAK,QAAQ,IAAvD,YAAAU,EAA0D,KAGlEH,IACFF,EAAM,eAAA,GACNM,EAAAf,EAAM,QAAQ,IAAIW,CAAO,IAAzB,MAAAI,EAA4B,QAEhC,CAEA,OACEC,EAAAA,IAAC,MAAA,CACE,GAAGnB,EACJ,UAAW,CAACoB,EAAAA,QAAO,UAAWrB,GAAWqB,EAAAA,QAAO,QAAS5B,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAE3F,SAAAG,EAAM,IAAKY,GAAS,CACnB,MAAMc,EAASb,EAAU,aAAa,IAAID,EAAK,GAAG,EAElD,OACEe,EAAAA,KAAC,MAAA,CAAI,UAAWF,EAAAA,QAAO,KACrB,SAAA,CAAAD,EAAAA,IAAC,KAAA,CAAG,UAAWC,EAAAA,QAAO,QACpB,SAAAE,EAAAA,KAAC,SAAA,CACC,IAAMC,GAAS,CACTA,EACFpB,EAAM,QAAQ,IAAII,EAAK,IAAKgB,CAAI,EAEhCpB,EAAM,QAAQ,OAAOI,EAAK,GAAG,CAEjC,EACA,UAAW,CAACa,EAAAA,QAAO,QAAStB,IAAiB,QAAUsB,EAAAA,QAAO,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAChG,KAAK,SACL,GAAI,GAAGnB,CAAM,IAAIM,EAAK,GAAG,GACzB,gBAAe,GAAGN,CAAM,IAAIM,EAAK,GAAG,SACpC,gBAAec,EACf,SAAUd,EAAK,SACf,QAAS,IAAMC,EAAU,OAAOD,EAAK,GAAG,EACxC,UAAYK,GAAUD,EAAcC,EAAOL,EAAK,GAAG,EAEnD,SAAA,CAAAY,MAAC,OAAA,CAAK,UAAWC,EAAAA,QAAO,MAAQ,WAAK,MAAM,QAC1CI,EAAAA,gBAAA,CAAgB,UAAW,CAACJ,EAAAA,QAAO,KAAMC,GAAUD,EAAAA,QAAO,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAAG,KAAM,EAAA,CAAI,CAAA,CAAA,CAAA,EAE9G,EACAD,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,QAAO,MAClB,GAAI,GAAGnB,CAAM,IAAIM,EAAK,GAAG,SACzB,KAAK,SACL,kBAAiB,GAAGN,CAAM,IAAIM,EAAK,GAAG,GACtC,OAAQ,CAACc,EAER,SAAAd,EAAK,OAAA,CAAA,CACR,CAAA,EA/BgCA,EAAK,GAgCvC,CAEJ,CAAC,CAAA,CAAA,CAGP,CAEA,SAASQ,EAAQpB,EAAiC8B,EAAcC,EAAe,CAC7E,MAAMC,EAAQhC,EAAM,OACdiC,EAASjC,EAAM,UAAWY,GAASA,EAAK,MAAQkB,CAAI,EAE1D,QAASI,EAAI,EAAGA,GAAKF,EAAOE,GAAK,EAAG,CAClC,MAAMtB,EAAOZ,GAAOiC,EAASF,EAAQG,EAAIF,EAAQA,GAASA,CAAK,EAC/D,GAAI,CAACpB,EAAK,SACR,OAAOA,EAAK,GAEhB,CAEA,OAAOkB,CACT"}
+{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/data-display/Accordion/Accordion.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport styles from './Accordion.module.css';\nimport { IconChevronDown } from '../../icons';\n\nexport interface AccordionItem {\n  content: ReactNode;\n  disabled?: boolean;\n  /** Id do cabecalho, para um link de ancora apontar a secao. */\n  id?: string;\n  key: string;\n  label: string;\n}\n\nexport type AccordionIconPosition = 'left' | 'right';\nexport type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface AccordionProps extends ComponentPropsWithRef<'div'> {\n  defaultExpandedKeys?: readonly string[];\n  expandedKeys?: readonly string[];\n  items: readonly AccordionItem[];\n  multiple?: boolean;\n  onExpandedChange?: (keys: readonly string[]) => void;\n  /** Direita e a convencao da web; esquerda serve a rotulos curtos em coluna estreita. */\n  iconPosition?: AccordionIconPosition;\n  /** Divisor entre as secoes, com a folga que ele exige. */\n  divider?: boolean;\n  /** Nivel do titulo de cada secao, na hierarquia da pagina em que o acordeao esta. */\n  headingLevel?: AccordionHeadingLevel;\n}\n\ninterface PainelProps extends ComponentPropsWithRef<'div'> {\n  aberto: boolean;\n  /** Sem ele, o painel fechado fica fora da busca da pagina. */\n  abrir?: () => void;\n}\n\n/**\n * Painel fechado com `hidden=\"until-found\"`: o Ctrl+F do navegador acha o texto dele, e o evento `beforematch`\n * abre a secao. O atributo entra depois da montagem, porque o React so conhece o `hidden` booleano.\n */\nfunction Painel({ aberto, abrir, ...props }: PainelProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const painel = ref.current;\n\n    if (!painel || aberto || !abrir) {\n      return;\n    }\n\n    painel.setAttribute('hidden', 'until-found');\n    painel.addEventListener('beforematch', abrir);\n\n    return () => painel.removeEventListener('beforematch', abrir);\n  }, [aberto, abrir]);\n\n  return <div {...props} hidden={!aberto} ref={ref} />;\n}\n\nexport function Accordion({\n  className,\n  defaultExpandedKeys,\n  expandedKeys,\n  items,\n  multiple = false,\n  onExpandedChange,\n  iconPosition = 'right',\n  divider = true,\n  headingLevel = 3,\n  ...props\n}: AccordionProps) {\n  const baseId = `accordion-${useId()}`;\n  const Titulo = `h${headingLevel}` as const;\n  const nodes = useRef(new Map<string, HTMLElement>());\n  const collection = useMemo<SelectionItem[]>(\n    () => items.map((item) => ({ key: item.key, disabled: item.disabled, textValue: item.label })),\n    [items],\n  );\n  const selection = useSelection({\n    // Uma secao aberta fecha ao ser clicada de novo, e nenhuma aberta e um\n    // estado valido do acordeao — ao contrario de uma aba, que sempre tem uma.\n    allowEmpty: true,\n    items: collection,\n    mode: multiple ? 'multiple' : 'single',\n    defaultSelectedKeys: expandedKeys === undefined ? defaultExpandedKeys : undefined,\n    selectedKeys: expandedKeys,\n    onSelectionChange: (keys) => onExpandedChange?.([...keys]),\n  });\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>, key: string) {\n    let destino: string | undefined;\n\n    if (event.key === 'ArrowDown') {\n      destino = proxima(collection, key, 1);\n    } else if (event.key === 'ArrowUp') {\n      destino = proxima(collection, key, -1);\n    } else if (event.key === 'Home') {\n      destino = collection.find((item) => !item.disabled)?.key;\n    } else if (event.key === 'End') {\n      destino = [...collection].reverse().find((item) => !item.disabled)?.key;\n    }\n\n    if (destino) {\n      event.preventDefault();\n      nodes.current.get(destino)?.focus();\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={[styles.accordion, divider && styles.divided, className].filter(Boolean).join(' ')}\n    >\n      {items.map((item) => {\n        const aberto = selection.selectedKeys.has(item.key);\n\n        return (\n          <div className={styles.item} key={item.key}>\n            <Titulo className={styles.heading} id={item.id}>\n              <button\n                ref={(node) => {\n                  if (node) {\n                    nodes.current.set(item.key, node);\n                  } else {\n                    nodes.current.delete(item.key);\n                  }\n                }}\n                className={[styles.trigger, iconPosition === 'left' && styles.iconLeft].filter(Boolean).join(' ')}\n                type=\"button\"\n                id={`${baseId}-${item.key}`}\n                aria-controls={`${baseId}-${item.key}-panel`}\n                aria-expanded={aberto}\n                disabled={item.disabled}\n                onClick={() => selection.select(item.key)}\n                onKeyDown={(event) => handleKeyDown(event, item.key)}\n              >\n                <span className={styles.label}>{item.label}</span>\n                <IconChevronDown className={[styles.icon, aberto && styles.iconOpen].filter(Boolean).join(' ')} size={16} />\n              </button>\n            </Titulo>\n            <Painel\n              aberto={aberto}\n              abrir={item.disabled ? undefined : () => selection.select(item.key)}\n              aria-labelledby={`${baseId}-${item.key}`}\n              className={styles.panel}\n              id={`${baseId}-${item.key}-panel`}\n              role=\"region\"\n            >\n              {item.content}\n            </Painel>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction proxima(items: readonly SelectionItem[], from: string, passo: 1 | -1) {\n  const total = items.length;\n  const inicio = items.findIndex((item) => item.key === from);\n\n  for (let i = 1; i <= total; i += 1) {\n    const item = items[(inicio + passo * i + total * total) % total];\n    if (!item.disabled) {\n      return item.key;\n    }\n  }\n\n  return from;\n}\n"],"names":["Painel","aberto","abrir","props","ref","useRef","useEffect","painel","Accordion","className","defaultExpandedKeys","expandedKeys","items","multiple","onExpandedChange","iconPosition","divider","headingLevel","baseId","useId","Titulo","nodes","collection","useMemo","item","selection","useSelection","keys","handleKeyDown","event","key","destino","proxima","_a","_b","_c","jsx","styles","jsxs","node","IconChevronDown","from","passo","total","inicio"],"mappings":"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"}

package/dist/components/data-display/Accordion/Accordion.js

@@ -1,73 +1,83 @@
-import { jsx as a, jsxs as w } from "react/jsx-runtime";
-import { useId as D, useRef as I, useMemo as K } from "react";
+import { jsx as a, jsxs as v } from "react/jsx-runtime";
+import { useId as K, useRef as N, useMemo as B, useEffect as L } from "react";
 import o from "./Accordion.module.css.js";
-import { useSelection as A } from "../../../hooks/useSelection/useSelection.js";
-import { IconChevronDown as B } from "../../icons/icons.js";
-function L({
-  className: s,
-  defaultExpandedKeys: t,
-  expandedKeys: d,
-  items: i,
-  multiple: u = !1,
-  onExpandedChange: n,
-  iconPosition: f = "right",
+import { useSelection as S } from "../../../hooks/useSelection/useSelection.js";
+import { IconChevronDown as x } from "../../icons/icons.js";
+function M({ aberto: i, abrir: r, ...c }) {
+  const n = N(null);
+  return L(() => {
+    const t = n.current;
+    if (!(!t || i || !r))
+      return t.setAttribute("hidden", "until-found"), t.addEventListener("beforematch", r), () => t.removeEventListener("beforematch", r);
+  }, [i, r]), /* @__PURE__ */ a("div", { ...c, hidden: !i, ref: n });
+}
+function R({
+  className: i,
+  defaultExpandedKeys: r,
+  expandedKeys: c,
+  items: n,
+  multiple: t = !1,
+  onExpandedChange: s,
+  iconPosition: u = "right",
   divider: g = !0,
-  ...j
+  headingLevel: j = 3,
+  ...D
 }) {
-  const y = `accordion-${D()}`, k = I(/* @__PURE__ */ new Map()), c = K(
-    () => i.map((e) => ({ key: e.key, disabled: e.disabled, textValue: e.label })),
-    [i]
-  ), p = A({
+  const y = `accordion-${K()}`, A = `h${j}`, k = N(/* @__PURE__ */ new Map()), f = B(
+    () => n.map((e) => ({ key: e.key, disabled: e.disabled, textValue: e.label })),
+    [n]
+  ), p = S({
     // Uma secao aberta fecha ao ser clicada de novo, e nenhuma aberta e um
     // estado valido do acordeao — ao contrario de uma aba, que sempre tem uma.
     allowEmpty: !0,
-    items: c,
-    mode: u ? "multiple" : "single",
-    defaultSelectedKeys: d === void 0 ? t : void 0,
-    selectedKeys: d,
-    onSelectionChange: (e) => n == null ? void 0 : n([...e])
+    items: f,
+    mode: t ? "multiple" : "single",
+    defaultSelectedKeys: c === void 0 ? r : void 0,
+    selectedKeys: c,
+    onSelectionChange: (e) => s == null ? void 0 : s([...e])
   });
-  function v(e, r) {
-    var h, m, $;
+  function I(e, d) {
+    var h, $, m;
     let l;
-    e.key === "ArrowDown" ? l = N(c, r, 1) : e.key === "ArrowUp" ? l = N(c, r, -1) : e.key === "Home" ? l = (h = c.find((b) => !b.disabled)) == null ? void 0 : h.key : e.key === "End" && (l = (m = [...c].reverse().find((b) => !b.disabled)) == null ? void 0 : m.key), l && (e.preventDefault(), ($ = k.current.get(l)) == null || $.focus());
+    e.key === "ArrowDown" ? l = w(f, d, 1) : e.key === "ArrowUp" ? l = w(f, d, -1) : e.key === "Home" ? l = (h = f.find((b) => !b.disabled)) == null ? void 0 : h.key : e.key === "End" && (l = ($ = [...f].reverse().find((b) => !b.disabled)) == null ? void 0 : $.key), l && (e.preventDefault(), (m = k.current.get(l)) == null || m.focus());
   }
   return /* @__PURE__ */ a(
     "div",
     {
-      ...j,
-      className: [o.accordion, g && o.divided, s].filter(Boolean).join(" "),
-      children: i.map((e) => {
-        const r = p.selectedKeys.has(e.key);
-        return /* @__PURE__ */ w("div", { className: o.item, children: [
-          /* @__PURE__ */ a("h3", { className: o.heading, children: /* @__PURE__ */ w(
+      ...D,
+      className: [o.accordion, g && o.divided, i].filter(Boolean).join(" "),
+      children: n.map((e) => {
+        const d = p.selectedKeys.has(e.key);
+        return /* @__PURE__ */ v("div", { className: o.item, children: [
+          /* @__PURE__ */ a(A, { className: o.heading, id: e.id, children: /* @__PURE__ */ v(
             "button",
             {
               ref: (l) => {
                 l ? k.current.set(e.key, l) : k.current.delete(e.key);
               },
-              className: [o.trigger, f === "left" && o.iconLeft].filter(Boolean).join(" "),
+              className: [o.trigger, u === "left" && o.iconLeft].filter(Boolean).join(" "),
               type: "button",
               id: `${y}-${e.key}`,
               "aria-controls": `${y}-${e.key}-panel`,
-              "aria-expanded": r,
+              "aria-expanded": d,
               disabled: e.disabled,
               onClick: () => p.select(e.key),
-              onKeyDown: (l) => v(l, e.key),
+              onKeyDown: (l) => I(l, e.key),
               children: [
                 /* @__PURE__ */ a("span", { className: o.label, children: e.label }),
-                /* @__PURE__ */ a(B, { className: [o.icon, r && o.iconOpen].filter(Boolean).join(" "), size: 16 })
+                /* @__PURE__ */ a(x, { className: [o.icon, d && o.iconOpen].filter(Boolean).join(" "), size: 16 })
               ]
             }
           ) }),
           /* @__PURE__ */ a(
-            "div",
+            M,
             {
+              aberto: d,
+              abrir: e.disabled ? void 0 : () => p.select(e.key),
+              "aria-labelledby": `${y}-${e.key}`,
               className: o.panel,
               id: `${y}-${e.key}-panel`,
               role: "region",
-              "aria-labelledby": `${y}-${e.key}`,
-              hidden: !r,
               children: e.content
             }
           )
@@ -76,16 +86,16 @@ function L({
     }
   );
 }
-function N(s, t, d) {
-  const i = s.length, u = s.findIndex((n) => n.key === t);
-  for (let n = 1; n <= i; n += 1) {
-    const f = s[(u + d * n + i * i) % i];
-    if (!f.disabled)
-      return f.key;
+function w(i, r, c) {
+  const n = i.length, t = i.findIndex((s) => s.key === r);
+  for (let s = 1; s <= n; s += 1) {
+    const u = i[(t + c * s + n * n) % n];
+    if (!u.disabled)
+      return u.key;
   }
-  return t;
+  return r;
 }
 export {
-  L as Accordion
+  R as Accordion
 };
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../src/components/data-display/Accordion/Accordion.tsx"],"sourcesContent":["import {\n  useId,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport styles from './Accordion.module.css';\nimport { IconChevronDown } from '../../icons';\n\nexport interface AccordionItem {\n  content: ReactNode;\n  disabled?: boolean;\n  key: string;\n  label: string;\n}\n\nexport type AccordionIconPosition = 'left' | 'right';\n\nexport interface AccordionProps extends ComponentPropsWithRef<'div'> {\n  defaultExpandedKeys?: readonly string[];\n  expandedKeys?: readonly string[];\n  items: readonly AccordionItem[];\n  multiple?: boolean;\n  onExpandedChange?: (keys: readonly string[]) => void;\n  /** Direita e a convencao da web; esquerda serve a rotulos curtos em coluna estreita. */\n  iconPosition?: AccordionIconPosition;\n  /** Divisor entre as secoes, com a folga que ele exige. */\n  divider?: boolean;\n}\n\nexport function Accordion({\n  className,\n  defaultExpandedKeys,\n  expandedKeys,\n  items,\n  multiple = false,\n  onExpandedChange,\n  iconPosition = 'right',\n  divider = true,\n  ...props\n}: AccordionProps) {\n  const baseId = `accordion-${useId()}`;\n  const nodes = useRef(new Map<string, HTMLElement>());\n  const collection = useMemo<SelectionItem[]>(\n    () => items.map((item) => ({ key: item.key, disabled: item.disabled, textValue: item.label })),\n    [items],\n  );\n  const selection = useSelection({\n    // Uma secao aberta fecha ao ser clicada de novo, e nenhuma aberta e um\n    // estado valido do acordeao — ao contrario de uma aba, que sempre tem uma.\n    allowEmpty: true,\n    items: collection,\n    mode: multiple ? 'multiple' : 'single',\n    defaultSelectedKeys: expandedKeys === undefined ? defaultExpandedKeys : undefined,\n    selectedKeys: expandedKeys,\n    onSelectionChange: (keys) => onExpandedChange?.([...keys]),\n  });\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>, key: string) {\n    let destino: string | undefined;\n\n    if (event.key === 'ArrowDown') {\n      destino = proxima(collection, key, 1);\n    } else if (event.key === 'ArrowUp') {\n      destino = proxima(collection, key, -1);\n    } else if (event.key === 'Home') {\n      destino = collection.find((item) => !item.disabled)?.key;\n    } else if (event.key === 'End') {\n      destino = [...collection].reverse().find((item) => !item.disabled)?.key;\n    }\n\n    if (destino) {\n      event.preventDefault();\n      nodes.current.get(destino)?.focus();\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={[styles.accordion, divider && styles.divided, className].filter(Boolean).join(' ')}\n    >\n      {items.map((item) => {\n        const aberto = selection.selectedKeys.has(item.key);\n\n        return (\n          <div className={styles.item} key={item.key}>\n            <h3 className={styles.heading}>\n              <button\n                ref={(node) => {\n                  if (node) {\n                    nodes.current.set(item.key, node);\n                  } else {\n                    nodes.current.delete(item.key);\n                  }\n                }}\n                className={[styles.trigger, iconPosition === 'left' && styles.iconLeft].filter(Boolean).join(' ')}\n                type=\"button\"\n                id={`${baseId}-${item.key}`}\n                aria-controls={`${baseId}-${item.key}-panel`}\n                aria-expanded={aberto}\n                disabled={item.disabled}\n                onClick={() => selection.select(item.key)}\n                onKeyDown={(event) => handleKeyDown(event, item.key)}\n              >\n                <span className={styles.label}>{item.label}</span>\n                <IconChevronDown className={[styles.icon, aberto && styles.iconOpen].filter(Boolean).join(' ')} size={16} />\n              </button>\n            </h3>\n            <div\n              className={styles.panel}\n              id={`${baseId}-${item.key}-panel`}\n              role=\"region\"\n              aria-labelledby={`${baseId}-${item.key}`}\n              hidden={!aberto}\n            >\n              {item.content}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction proxima(items: readonly SelectionItem[], from: string, passo: 1 | -1) {\n  const total = items.length;\n  const inicio = items.findIndex((item) => item.key === from);\n\n  for (let i = 1; i <= total; i += 1) {\n    const item = items[(inicio + passo * i + total * total) % total];\n    if (!item.disabled) {\n      return item.key;\n    }\n  }\n\n  return from;\n}\n"],"names":["Accordion","className","defaultExpandedKeys","expandedKeys","items","multiple","onExpandedChange","iconPosition","divider","props","baseId","useId","nodes","useRef","collection","useMemo","item","selection","useSelection","keys","handleKeyDown","event","key","destino","proxima","_a","_b","_c","jsx","styles","aberto","jsxs","node","IconChevronDown","from","passo","total","inicio","i"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/data-display/Accordion/Accordion.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport styles from './Accordion.module.css';\nimport { IconChevronDown } from '../../icons';\n\nexport interface AccordionItem {\n  content: ReactNode;\n  disabled?: boolean;\n  /** Id do cabecalho, para um link de ancora apontar a secao. */\n  id?: string;\n  key: string;\n  label: string;\n}\n\nexport type AccordionIconPosition = 'left' | 'right';\nexport type AccordionHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface AccordionProps extends ComponentPropsWithRef<'div'> {\n  defaultExpandedKeys?: readonly string[];\n  expandedKeys?: readonly string[];\n  items: readonly AccordionItem[];\n  multiple?: boolean;\n  onExpandedChange?: (keys: readonly string[]) => void;\n  /** Direita e a convencao da web; esquerda serve a rotulos curtos em coluna estreita. */\n  iconPosition?: AccordionIconPosition;\n  /** Divisor entre as secoes, com a folga que ele exige. */\n  divider?: boolean;\n  /** Nivel do titulo de cada secao, na hierarquia da pagina em que o acordeao esta. */\n  headingLevel?: AccordionHeadingLevel;\n}\n\ninterface PainelProps extends ComponentPropsWithRef<'div'> {\n  aberto: boolean;\n  /** Sem ele, o painel fechado fica fora da busca da pagina. */\n  abrir?: () => void;\n}\n\n/**\n * Painel fechado com `hidden=\"until-found\"`: o Ctrl+F do navegador acha o texto dele, e o evento `beforematch`\n * abre a secao. O atributo entra depois da montagem, porque o React so conhece o `hidden` booleano.\n */\nfunction Painel({ aberto, abrir, ...props }: PainelProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const painel = ref.current;\n\n    if (!painel || aberto || !abrir) {\n      return;\n    }\n\n    painel.setAttribute('hidden', 'until-found');\n    painel.addEventListener('beforematch', abrir);\n\n    return () => painel.removeEventListener('beforematch', abrir);\n  }, [aberto, abrir]);\n\n  return <div {...props} hidden={!aberto} ref={ref} />;\n}\n\nexport function Accordion({\n  className,\n  defaultExpandedKeys,\n  expandedKeys,\n  items,\n  multiple = false,\n  onExpandedChange,\n  iconPosition = 'right',\n  divider = true,\n  headingLevel = 3,\n  ...props\n}: AccordionProps) {\n  const baseId = `accordion-${useId()}`;\n  const Titulo = `h${headingLevel}` as const;\n  const nodes = useRef(new Map<string, HTMLElement>());\n  const collection = useMemo<SelectionItem[]>(\n    () => items.map((item) => ({ key: item.key, disabled: item.disabled, textValue: item.label })),\n    [items],\n  );\n  const selection = useSelection({\n    // Uma secao aberta fecha ao ser clicada de novo, e nenhuma aberta e um\n    // estado valido do acordeao — ao contrario de uma aba, que sempre tem uma.\n    allowEmpty: true,\n    items: collection,\n    mode: multiple ? 'multiple' : 'single',\n    defaultSelectedKeys: expandedKeys === undefined ? defaultExpandedKeys : undefined,\n    selectedKeys: expandedKeys,\n    onSelectionChange: (keys) => onExpandedChange?.([...keys]),\n  });\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>, key: string) {\n    let destino: string | undefined;\n\n    if (event.key === 'ArrowDown') {\n      destino = proxima(collection, key, 1);\n    } else if (event.key === 'ArrowUp') {\n      destino = proxima(collection, key, -1);\n    } else if (event.key === 'Home') {\n      destino = collection.find((item) => !item.disabled)?.key;\n    } else if (event.key === 'End') {\n      destino = [...collection].reverse().find((item) => !item.disabled)?.key;\n    }\n\n    if (destino) {\n      event.preventDefault();\n      nodes.current.get(destino)?.focus();\n    }\n  }\n\n  return (\n    <div\n      {...props}\n      className={[styles.accordion, divider && styles.divided, className].filter(Boolean).join(' ')}\n    >\n      {items.map((item) => {\n        const aberto = selection.selectedKeys.has(item.key);\n\n        return (\n          <div className={styles.item} key={item.key}>\n            <Titulo className={styles.heading} id={item.id}>\n              <button\n                ref={(node) => {\n                  if (node) {\n                    nodes.current.set(item.key, node);\n                  } else {\n                    nodes.current.delete(item.key);\n                  }\n                }}\n                className={[styles.trigger, iconPosition === 'left' && styles.iconLeft].filter(Boolean).join(' ')}\n                type=\"button\"\n                id={`${baseId}-${item.key}`}\n                aria-controls={`${baseId}-${item.key}-panel`}\n                aria-expanded={aberto}\n                disabled={item.disabled}\n                onClick={() => selection.select(item.key)}\n                onKeyDown={(event) => handleKeyDown(event, item.key)}\n              >\n                <span className={styles.label}>{item.label}</span>\n                <IconChevronDown className={[styles.icon, aberto && styles.iconOpen].filter(Boolean).join(' ')} size={16} />\n              </button>\n            </Titulo>\n            <Painel\n              aberto={aberto}\n              abrir={item.disabled ? undefined : () => selection.select(item.key)}\n              aria-labelledby={`${baseId}-${item.key}`}\n              className={styles.panel}\n              id={`${baseId}-${item.key}-panel`}\n              role=\"region\"\n            >\n              {item.content}\n            </Painel>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction proxima(items: readonly SelectionItem[], from: string, passo: 1 | -1) {\n  const total = items.length;\n  const inicio = items.findIndex((item) => item.key === from);\n\n  for (let i = 1; i <= total; i += 1) {\n    const item = items[(inicio + passo * i + total * total) % total];\n    if (!item.disabled) {\n      return item.key;\n    }\n  }\n\n  return from;\n}\n"],"names":["Painel","aberto","abrir","props","ref","useRef","useEffect","painel","Accordion","className","defaultExpandedKeys","expandedKeys","items","multiple","onExpandedChange","iconPosition","divider","headingLevel","baseId","useId","Titulo","nodes","collection","useMemo","item","selection","useSelection","keys","handleKeyDown","event","key","destino","proxima","_a","_b","_c","jsx","styles","jsxs","node","IconChevronDown","from","passo","total","inicio","i"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_accordion_1eiem_1",i="_divided_1eiem_7",n="_item_1eiem_13",o="_trigger_1eiem_17",c="_panel_1eiem_21",t="_heading_1eiem_25",_="_icon_1eiem_50",d="_label_1eiem_59",a="_iconLeft_1eiem_63",l="_iconOpen_1eiem_74",r={accordion:e,divided:i,item:n,trigger:o,panel:c,heading:t,icon:_,label:d,iconLeft:a,iconOpen:l};exports.accordion=e;exports.default=r;exports.divided=i;exports.heading=t;exports.icon=_;exports.iconLeft=a;exports.iconOpen=l;exports.item=n;exports.label=d;exports.panel=c;exports.trigger=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_accordion_vpjyx_1",n="_divided_vpjyx_7",i="_item_vpjyx_13",o="_trigger_vpjyx_17",c="_panel_vpjyx_21",t="_heading_vpjyx_25",_="_icon_vpjyx_50",d="_label_vpjyx_59",a="_iconLeft_vpjyx_63",l="_iconOpen_vpjyx_74",p={accordion:e,divided:n,item:i,trigger:o,panel:c,heading:t,icon:_,label:d,iconLeft:a,iconOpen:l};exports.accordion=e;exports.default=p;exports.divided=n;exports.heading=t;exports.icon=_;exports.iconLeft=a;exports.iconOpen=l;exports.item=i;exports.label=d;exports.panel=c;exports.trigger=o;
 //# sourceMappingURL=Accordion.module.css.cjs.map

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

@@ -1,26 +1,26 @@
-const e = "_accordion_1eiem_1", i = "_divided_1eiem_7", n = "_item_1eiem_13", _ = "_trigger_1eiem_17", o = "_panel_1eiem_21", c = "_heading_1eiem_25", t = "_icon_1eiem_50", d = "_label_1eiem_59", a = "_iconLeft_1eiem_63", s = "_iconOpen_1eiem_74", m = {
-  accordion: e,
-  divided: i,
-  item: n,
-  trigger: _,
+const n = "_accordion_vpjyx_1", _ = "_divided_vpjyx_7", e = "_item_vpjyx_13", i = "_trigger_vpjyx_17", o = "_panel_vpjyx_21", c = "_heading_vpjyx_25", t = "_icon_vpjyx_50", p = "_label_vpjyx_59", d = "_iconLeft_vpjyx_63", a = "_iconOpen_vpjyx_74", s = {
+  accordion: n,
+  divided: _,
+  item: e,
+  trigger: i,
   panel: o,
   heading: c,
   icon: t,
-  label: d,
-  iconLeft: a,
-  iconOpen: s
+  label: p,
+  iconLeft: d,
+  iconOpen: a
 };
 export {
-  e as accordion,
-  m as default,
-  i as divided,
+  n as accordion,
+  s as default,
+  _ as divided,
   c as heading,
   t as icon,
-  a as iconLeft,
-  s as iconOpen,
-  n as item,
-  d as label,
+  d as iconLeft,
+  a as iconOpen,
+  e as item,
+  p as label,
   o as panel,
-  _ as trigger
+  i as trigger
 };
 //# sourceMappingURL=Accordion.module.css.js.map

package/dist/components/data-display/SortableList/SortableList.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("react"),a=require("./SortableList.module.css.cjs"),C=require("../../../hooks/useSelection/useSelection.cjs"),F=require("../../icons/icons.cjs"),E="button, a[href], input, select, textarea, [tabindex]";function O(h,k,t){var w;const b=[h,...h.querySelectorAll(E)].filter(p=>!p.matches(":disabled"));(w=b[b.indexOf(k)+t])==null||w.focus()}function H({className:h,defaultSelectedKey:k,items:t,label:b,onReorder:w,onSelectionChange:p,selectedKey:A,...R}){var $;const x=i.useId(),d=i.useRef(new Map),j=i.useRef(void 0),[o,y]=i.useState(null),[q,L]=i.useState(""),P=i.useMemo(()=>t.map(e=>({key:e.key,textValue:e.title})),[t]),g=C.useSelection({items:P,mode:"single",defaultSelectedKeys:k===void 0?void 0:[k],selectedKeys:A===void 0?void 0:A===null?[]:[A],onSelectionChange:e=>{const[r]=e;r!==void 0&&(p==null||p(r))}}),[D]=g.selectedKeys,K=[g.focusedKey,D].find(e=>t.some(r=>r.key===e))??(($=t[0])==null?void 0:$.key),S=o!==null,v=o&&o.gap!==o.from&&o.gap!==o.from+1?o.gap:void 0;i.useEffect(()=>{d.current.forEach(e=>e.querySelectorAll(E).forEach(r=>r.tabIndex=-1))}),i.useEffect(()=>{var e;j.current!==void 0&&((e=d.current.get(j.current))==null||e.focus(),j.current=void 0)},[t]),i.useEffect(()=>{if(!S)return;function e(r){r.key==="Escape"&&(r.preventDefault(),r.stopPropagation(),y(null))}return document.addEventListener("keydown",e,!0),()=>document.removeEventListener("keydown",e,!0)},[S]);function f(e){var r;e!==void 0&&(e===D?g.focus(e):g.select(e),(r=d.current.get(e))==null||r.focus())}function N(e,r){r<0||r>=t.length||r===e||(j.current=t[e].key,w(e,r),L(`Movido para a posição ${r+1} de ${t.length}`))}function B(e){var u,s;const r=e.target,c=r.closest('[role="row"]'),n=t.findIndex(m=>d.current.get(m.key)===c);if(!(!c||n<0)){if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault(),O(c,r,e.key==="ArrowRight"?1:-1);return}if(r===c){if(e.altKey&&e.key==="ArrowUp")N(n,n-1);else if(e.altKey&&e.key==="ArrowDown")N(n,n+1);else if(e.key==="ArrowUp")f((u=t[n-1])==null?void 0:u.key);else if(e.key==="ArrowDown")f((s=t[n+1])==null?void 0:s.key);else if(e.key==="Home")f(t[0].key);else if(e.key==="End")f(t[t.length-1].key);else if(e.key===" "||e.key==="Enter")f(t[n].key);else return;e.preventDefault()}}}function M(e,r){e.target.closest(E)===e.currentTarget&&f(r)}function T(e,r){e.button===0&&(e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),y({from:r,gap:r}))}function I(e){if(!o)return;const r=t.filter(c=>{var u;const n=(u=d.current.get(c.key))==null?void 0:u.getBoundingClientRect();return n!==void 0&&n.top+n.height/2<e.clientY}).length;r!==o.gap&&y({...o,gap:r})}function U(){o&&(y(null),N(o.from,o.gap>o.from?o.gap-1:o.gap))}return l.jsxs(l.Fragment,{children:[l.jsx("div",{...R,"aria-label":b,className:[a.default.list,h].filter(Boolean).join(" "),onKeyDown:B,role:"grid",children:t.map((e,r)=>{const c=(e.level??1)-1,n=`${x}-${r}-title`,u=`${x}-${r}-excerpt`;return l.jsx("div",{"aria-describedby":e.excerpt?u:void 0,"aria-labelledby":n,"aria-selected":e.key===D,className:[a.default.row,e.key===D&&a.default.selected,(o==null?void 0:o.from)===r&&a.default.dragging,v===r&&a.default.dropBefore,v===t.length&&r===t.length-1&&a.default.dropAfter].filter(Boolean).join(" "),onClick:s=>M(s,e.key),onFocus:()=>g.focus(e.key),ref:s=>{s?d.current.set(e.key,s):d.current.delete(e.key)},role:"row",style:c>0?{marginInlineStart:`calc(${c} * var(--pl-space-5))`}:void 0,tabIndex:e.key===K?0:-1,children:l.jsxs("div",{className:a.default.cell,role:"gridcell",children:[l.jsx("button",{"aria-describedby":`${x}-hint`,"aria-label":`Reordenar ${e.title}`,className:a.default.handle,onPointerCancel:()=>y(null),onPointerDown:s=>T(s,r),onPointerMove:I,onPointerUp:U,type:"button",children:l.jsx(F.IconDragHandle,{})}),e.icon&&l.jsx("span",{"aria-hidden":"true",className:a.default.icon,children:e.icon}),l.jsxs("span",{className:a.default.text,children:[l.jsx("span",{className:a.default.title,id:n,children:e.title}),e.excerpt&&l.jsx("span",{className:a.default.excerpt,id:u,children:e.excerpt})]}),e.actions&&l.jsx("span",{className:a.default.actions,children:e.actions})]})},e.key)})}),l.jsx("span",{className:a.default.hiddenText,id:`${x}-hint`,children:"Na linha, Alt com as setas para cima e para baixo move o item."}),l.jsx("span",{className:a.default.hiddenText,role:"status",children:q})]})}exports.SortableList=H;
+//# sourceMappingURL=SortableList.cjs.map

package/dist/components/data-display/SortableList/SortableList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.cjs","sources":["../../../../src/components/data-display/SortableList/SortableList.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport { IconDragHandle } from '../../icons';\nimport styles from './SortableList.module.css';\n\nexport interface SortableListItem {\n  /** Ações da linha, como `ButtonIcon`: alcançadas pelas setas para os lados. */\n  actions?: ReactNode;\n  excerpt?: string;\n  icon?: ReactNode;\n  key: string;\n  /** Nível de aninhamento, a partir de 1. Só recua a linha. */\n  level?: number;\n  title: string;\n}\n\nexport interface SortableListProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onKeyDown'> {\n  defaultSelectedKey?: string;\n  items: readonly SortableListItem[];\n  /** Nome da lista, para o leitor de tela. */\n  label: string;\n  onReorder: (fromIndex: number, toIndex: number) => void;\n  onSelectionChange?: (key: string) => void;\n  /** `null` deixa a lista controlada sem nenhum item escolhido. */\n  selectedKey?: string | null;\n}\n\ninterface Drag {\n  from: number;\n  /** Fresta onde o item cairia: 0 antes do primeiro, `items.length` depois do último. */\n  gap: number;\n}\n\nconst FOCUSABLE = 'button, a[href], input, select, textarea, [tabindex]';\n\nfunction focusWithinRow(row: HTMLElement, from: HTMLElement, step: 1 | -1) {\n  const stops = [row, ...row.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((element) => !element.matches(':disabled'));\n  stops[stops.indexOf(from) + step]?.focus();\n}\n\nexport function SortableList({\n  className,\n  defaultSelectedKey,\n  items,\n  label,\n  onReorder,\n  onSelectionChange,\n  selectedKey,\n  ...props\n}: SortableListProps) {\n  const baseId = useId();\n  const rows = useRef(new Map<string, HTMLDivElement>());\n  const movedKey = useRef<string>(undefined);\n  const [drag, setDrag] = useState<Drag | null>(null);\n  const [announcement, setAnnouncement] = useState('');\n  const collection = useMemo<SelectionItem[]>(() => items.map((item) => ({ key: item.key, textValue: item.title })), [items]);\n  const selection = useSelection({\n    items: collection,\n    mode: 'single',\n    defaultSelectedKeys: defaultSelectedKey === undefined ? undefined : [defaultSelectedKey],\n    selectedKeys: selectedKey === undefined ? undefined : selectedKey === null ? [] : [selectedKey],\n    onSelectionChange: (keys) => {\n      const [key] = keys;\n      if (key !== undefined) {\n        onSelectionChange?.(key);\n      }\n    },\n  });\n  const [selected] = selection.selectedKeys;\n  const tabStop = [selection.focusedKey, selected].find((key) => items.some((item) => item.key === key)) ?? items[0]?.key;\n  const dragging = drag !== null;\n  // Soltar logo acima ou logo abaixo de si mesmo não move nada, e não ganha indicador.\n  const dropGap = drag && drag.gap !== drag.from && drag.gap !== drag.from + 1 ? drag.gap : undefined;\n\n  // Os controles das linhas saem da ordem do Tab: a lista é uma parada só, e as setas para os lados chegam a eles.\n  useEffect(() => {\n    rows.current.forEach((row) => row.querySelectorAll<HTMLElement>(FOCUSABLE).forEach((element) => (element.tabIndex = -1)));\n  });\n\n  // Reordenar move o nó no DOM, e o navegador tira o foco dele.\n  useEffect(() => {\n    if (movedKey.current !== undefined) {\n      rows.current.get(movedKey.current)?.focus();\n      movedKey.current = undefined;\n    }\n  }, [items]);\n\n  useEffect(() => {\n    if (!dragging) {\n      return;\n    }\n\n    function cancel(event: globalThis.KeyboardEvent) {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        event.stopPropagation();\n        setDrag(null);\n      }\n    }\n\n    document.addEventListener('keydown', cancel, true);\n    return () => document.removeEventListener('keydown', cancel, true);\n  }, [dragging]);\n\n  function choose(key: string | undefined) {\n    if (key === undefined) {\n      return;\n    }\n\n    if (key === selected) {\n      selection.focus(key);\n    } else {\n      selection.select(key);\n    }\n\n    rows.current.get(key)?.focus();\n  }\n\n  function move(fromIndex: number, toIndex: number) {\n    if (toIndex < 0 || toIndex >= items.length || toIndex === fromIndex) {\n      return;\n    }\n\n    movedKey.current = items[fromIndex].key;\n    onReorder(fromIndex, toIndex);\n    setAnnouncement(`Movido para a posição ${toIndex + 1} de ${items.length}`);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const target = event.target as HTMLElement;\n    const row = target.closest<HTMLElement>('[role=\"row\"]');\n    const index = items.findIndex((item) => rows.current.get(item.key) === row);\n\n    if (!row || index < 0) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      focusWithinRow(row, target, event.key === 'ArrowRight' ? 1 : -1);\n      return;\n    }\n\n    // Nos controles da linha, as demais teclas são deles.\n    if (target !== row) {\n      return;\n    }\n\n    if (event.altKey && event.key === 'ArrowUp') {\n      move(index, index - 1);\n    } else if (event.altKey && event.key === 'ArrowDown') {\n      move(index, index + 1);\n    } else if (event.key === 'ArrowUp') {\n      choose(items[index - 1]?.key);\n    } else if (event.key === 'ArrowDown') {\n      choose(items[index + 1]?.key);\n    } else if (event.key === 'Home') {\n      choose(items[0].key);\n    } else if (event.key === 'End') {\n      choose(items[items.length - 1].key);\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      choose(items[index].key);\n    } else {\n      return;\n    }\n\n    event.preventDefault();\n  }\n\n  function handleRowClick(event: MouseEvent<HTMLDivElement>, key: string) {\n    // O clique num controle da linha é do controle, e não escolhe a linha.\n    if ((event.target as HTMLElement).closest(FOCUSABLE) === event.currentTarget) {\n      choose(key);\n    }\n  }\n\n  function startDrag(event: PointerEvent<HTMLButtonElement>, index: number) {\n    if (event.button !== 0) {\n      return;\n    }\n\n    event.preventDefault();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    setDrag({ from: index, gap: index });\n  }\n\n  function followDrag(event: PointerEvent<HTMLButtonElement>) {\n    if (!drag) {\n      return;\n    }\n\n    const gap = items.filter((item) => {\n      const box = rows.current.get(item.key)?.getBoundingClientRect();\n      return box !== undefined && box.top + box.height / 2 < event.clientY;\n    }).length;\n\n    if (gap !== drag.gap) {\n      setDrag({ ...drag, gap });\n    }\n  }\n\n  function endDrag() {\n    if (!drag) {\n      return;\n    }\n\n    setDrag(null);\n    move(drag.from, drag.gap > drag.from ? drag.gap - 1 : drag.gap);\n  }\n\n  return (\n    <>\n      <div\n        {...props}\n        aria-label={label}\n        className={[styles.list, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        role=\"grid\"\n      >\n        {items.map((item, index) => {\n          const depth = (item.level ?? 1) - 1;\n          const titleId = `${baseId}-${index}-title`;\n          const excerptId = `${baseId}-${index}-excerpt`;\n\n          return (\n            <div\n              aria-describedby={item.excerpt ? excerptId : undefined}\n              aria-labelledby={titleId}\n              aria-selected={item.key === selected}\n              className={[\n                styles.row,\n                item.key === selected && styles.selected,\n                drag?.from === index && styles.dragging,\n                dropGap === index && styles.dropBefore,\n                dropGap === items.length && index === items.length - 1 && styles.dropAfter,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              key={item.key}\n              onClick={(event) => handleRowClick(event, item.key)}\n              onFocus={() => selection.focus(item.key)}\n              ref={(node) => {\n                if (node) {\n                  rows.current.set(item.key, node);\n                } else {\n                  rows.current.delete(item.key);\n                }\n              }}\n              role=\"row\"\n              style={depth > 0 ? { marginInlineStart: `calc(${depth} * var(--pl-space-5))` } : undefined}\n              tabIndex={item.key === tabStop ? 0 : -1}\n            >\n              <div className={styles.cell} role=\"gridcell\">\n                <button\n                  aria-describedby={`${baseId}-hint`}\n                  aria-label={`Reordenar ${item.title}`}\n                  className={styles.handle}\n                  onPointerCancel={() => setDrag(null)}\n                  onPointerDown={(event) => startDrag(event, index)}\n                  onPointerMove={followDrag}\n                  onPointerUp={endDrag}\n                  type=\"button\"\n                >\n                  <IconDragHandle />\n                </button>\n                {item.icon && (\n                  <span aria-hidden=\"true\" className={styles.icon}>\n                    {item.icon}\n                  </span>\n                )}\n                <span className={styles.text}>\n                  <span className={styles.title} id={titleId}>\n                    {item.title}\n                  </span>\n                  {item.excerpt && (\n                    <span className={styles.excerpt} id={excerptId}>\n                      {item.excerpt}\n                    </span>\n                  )}\n                </span>\n                {item.actions && <span className={styles.actions}>{item.actions}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <span className={styles.hiddenText} id={`${baseId}-hint`}>\n        Na linha, Alt com as setas para cima e para baixo move o item.\n      </span>\n      <span className={styles.hiddenText} role=\"status\">\n        {announcement}\n      </span>\n    </>\n  );\n}\n"],"names":["FOCUSABLE","focusWithinRow","row","from","step","stops","element","_a","SortableList","className","defaultSelectedKey","items","label","onReorder","onSelectionChange","selectedKey","props","baseId","useId","rows","useRef","movedKey","drag","setDrag","useState","announcement","setAnnouncement","collection","useMemo","item","selection","useSelection","keys","key","selected","tabStop","dragging","dropGap","useEffect","cancel","event","choose","move","fromIndex","toIndex","handleKeyDown","target","index","_b","handleRowClick","startDrag","followDrag","gap","box","endDrag","jsxs","Fragment","jsx","styles","depth","titleId","excerptId","node","IconDragHandle"],"mappings":"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"}

package/dist/components/data-display/SortableList/SortableList.js

@@ -0,0 +1,168 @@
+import { jsxs as x, Fragment as O, jsx as c } from "react/jsx-runtime";
+import { useId as G, useRef as P, useState as B, useMemo as V, useEffect as $ } from "react";
+import a from "./SortableList.module.css.js";
+import { useSelection as W } from "../../../hooks/useSelection/useSelection.js";
+import { IconDragHandle as Y } from "../../icons/icons.js";
+const v = "button, a[href], input, select, textarea, [tabindex]";
+function z(g, h, o) {
+  var w;
+  const k = [g, ...g.querySelectorAll(v)].filter((f) => !f.matches(":disabled"));
+  (w = k[k.indexOf(h) + o]) == null || w.focus();
+}
+function ee({
+  className: g,
+  defaultSelectedKey: h,
+  items: o,
+  label: k,
+  onReorder: w,
+  onSelectionChange: f,
+  selectedKey: N,
+  ...L
+}) {
+  var K;
+  const b = G(), u = P(/* @__PURE__ */ new Map()), D = P(void 0), [n, p] = B(null), [S, j] = B(""), I = V(() => o.map((e) => ({ key: e.key, textValue: e.title })), [o]), y = W({
+    items: I,
+    mode: "single",
+    defaultSelectedKeys: h === void 0 ? void 0 : [h],
+    selectedKeys: N === void 0 ? void 0 : N === null ? [] : [N],
+    onSelectionChange: (e) => {
+      const [r] = e;
+      r !== void 0 && (f == null || f(r));
+    }
+  }), [A] = y.selectedKeys, M = [y.focusedKey, A].find((e) => o.some((r) => r.key === e)) ?? ((K = o[0]) == null ? void 0 : K.key), E = n !== null, R = n && n.gap !== n.from && n.gap !== n.from + 1 ? n.gap : void 0;
+  $(() => {
+    u.current.forEach((e) => e.querySelectorAll(v).forEach((r) => r.tabIndex = -1));
+  }), $(() => {
+    var e;
+    D.current !== void 0 && ((e = u.current.get(D.current)) == null || e.focus(), D.current = void 0);
+  }, [o]), $(() => {
+    if (!E)
+      return;
+    function e(r) {
+      r.key === "Escape" && (r.preventDefault(), r.stopPropagation(), p(null));
+    }
+    return document.addEventListener("keydown", e, !0), () => document.removeEventListener("keydown", e, !0);
+  }, [E]);
+  function d(e) {
+    var r;
+    e !== void 0 && (e === A ? y.focus(e) : y.select(e), (r = u.current.get(e)) == null || r.focus());
+  }
+  function m(e, r) {
+    r < 0 || r >= o.length || r === e || (D.current = o[e].key, w(e, r), j(`Movido para a posição ${r + 1} de ${o.length}`));
+  }
+  function T(e) {
+    var i, s;
+    const r = e.target, l = r.closest('[role="row"]'), t = o.findIndex((H) => u.current.get(H.key) === l);
+    if (!(!l || t < 0)) {
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        e.preventDefault(), z(l, r, e.key === "ArrowRight" ? 1 : -1);
+        return;
+      }
+      if (r === l) {
+        if (e.altKey && e.key === "ArrowUp")
+          m(t, t - 1);
+        else if (e.altKey && e.key === "ArrowDown")
+          m(t, t + 1);
+        else if (e.key === "ArrowUp")
+          d((i = o[t - 1]) == null ? void 0 : i.key);
+        else if (e.key === "ArrowDown")
+          d((s = o[t + 1]) == null ? void 0 : s.key);
+        else if (e.key === "Home")
+          d(o[0].key);
+        else if (e.key === "End")
+          d(o[o.length - 1].key);
+        else if (e.key === " " || e.key === "Enter")
+          d(o[t].key);
+        else
+          return;
+        e.preventDefault();
+      }
+    }
+  }
+  function U(e, r) {
+    e.target.closest(v) === e.currentTarget && d(r);
+  }
+  function C(e, r) {
+    e.button === 0 && (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), p({ from: r, gap: r }));
+  }
+  function F(e) {
+    if (!n)
+      return;
+    const r = o.filter((l) => {
+      var i;
+      const t = (i = u.current.get(l.key)) == null ? void 0 : i.getBoundingClientRect();
+      return t !== void 0 && t.top + t.height / 2 < e.clientY;
+    }).length;
+    r !== n.gap && p({ ...n, gap: r });
+  }
+  function q() {
+    n && (p(null), m(n.from, n.gap > n.from ? n.gap - 1 : n.gap));
+  }
+  return /* @__PURE__ */ x(O, { children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        ...L,
+        "aria-label": k,
+        className: [a.list, g].filter(Boolean).join(" "),
+        onKeyDown: T,
+        role: "grid",
+        children: o.map((e, r) => {
+          const l = (e.level ?? 1) - 1, t = `${b}-${r}-title`, i = `${b}-${r}-excerpt`;
+          return /* @__PURE__ */ c(
+            "div",
+            {
+              "aria-describedby": e.excerpt ? i : void 0,
+              "aria-labelledby": t,
+              "aria-selected": e.key === A,
+              className: [
+                a.row,
+                e.key === A && a.selected,
+                (n == null ? void 0 : n.from) === r && a.dragging,
+                R === r && a.dropBefore,
+                R === o.length && r === o.length - 1 && a.dropAfter
+              ].filter(Boolean).join(" "),
+              onClick: (s) => U(s, e.key),
+              onFocus: () => y.focus(e.key),
+              ref: (s) => {
+                s ? u.current.set(e.key, s) : u.current.delete(e.key);
+              },
+              role: "row",
+              style: l > 0 ? { marginInlineStart: `calc(${l} * var(--pl-space-5))` } : void 0,
+              tabIndex: e.key === M ? 0 : -1,
+              children: /* @__PURE__ */ x("div", { className: a.cell, role: "gridcell", children: [
+                /* @__PURE__ */ c(
+                  "button",
+                  {
+                    "aria-describedby": `${b}-hint`,
+                    "aria-label": `Reordenar ${e.title}`,
+                    className: a.handle,
+                    onPointerCancel: () => p(null),
+                    onPointerDown: (s) => C(s, r),
+                    onPointerMove: F,
+                    onPointerUp: q,
+                    type: "button",
+                    children: /* @__PURE__ */ c(Y, {})
+                  }
+                ),
+                e.icon && /* @__PURE__ */ c("span", { "aria-hidden": "true", className: a.icon, children: e.icon }),
+                /* @__PURE__ */ x("span", { className: a.text, children: [
+                  /* @__PURE__ */ c("span", { className: a.title, id: t, children: e.title }),
+                  e.excerpt && /* @__PURE__ */ c("span", { className: a.excerpt, id: i, children: e.excerpt })
+                ] }),
+                e.actions && /* @__PURE__ */ c("span", { className: a.actions, children: e.actions })
+              ] })
+            },
+            e.key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ c("span", { className: a.hiddenText, id: `${b}-hint`, children: "Na linha, Alt com as setas para cima e para baixo move o item." }),
+    /* @__PURE__ */ c("span", { className: a.hiddenText, role: "status", children: S })
+  ] });
+}
+export {
+  ee as SortableList
+};
+//# sourceMappingURL=SortableList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.js","sources":["../../../../src/components/data-display/SortableList/SortableList.tsx"],"sourcesContent":["import {\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n} from 'react';\nimport { useSelection, type SelectionItem } from '../../../hooks/useSelection';\nimport { IconDragHandle } from '../../icons';\nimport styles from './SortableList.module.css';\n\nexport interface SortableListItem {\n  /** Ações da linha, como `ButtonIcon`: alcançadas pelas setas para os lados. */\n  actions?: ReactNode;\n  excerpt?: string;\n  icon?: ReactNode;\n  key: string;\n  /** Nível de aninhamento, a partir de 1. Só recua a linha. */\n  level?: number;\n  title: string;\n}\n\nexport interface SortableListProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onKeyDown'> {\n  defaultSelectedKey?: string;\n  items: readonly SortableListItem[];\n  /** Nome da lista, para o leitor de tela. */\n  label: string;\n  onReorder: (fromIndex: number, toIndex: number) => void;\n  onSelectionChange?: (key: string) => void;\n  /** `null` deixa a lista controlada sem nenhum item escolhido. */\n  selectedKey?: string | null;\n}\n\ninterface Drag {\n  from: number;\n  /** Fresta onde o item cairia: 0 antes do primeiro, `items.length` depois do último. */\n  gap: number;\n}\n\nconst FOCUSABLE = 'button, a[href], input, select, textarea, [tabindex]';\n\nfunction focusWithinRow(row: HTMLElement, from: HTMLElement, step: 1 | -1) {\n  const stops = [row, ...row.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((element) => !element.matches(':disabled'));\n  stops[stops.indexOf(from) + step]?.focus();\n}\n\nexport function SortableList({\n  className,\n  defaultSelectedKey,\n  items,\n  label,\n  onReorder,\n  onSelectionChange,\n  selectedKey,\n  ...props\n}: SortableListProps) {\n  const baseId = useId();\n  const rows = useRef(new Map<string, HTMLDivElement>());\n  const movedKey = useRef<string>(undefined);\n  const [drag, setDrag] = useState<Drag | null>(null);\n  const [announcement, setAnnouncement] = useState('');\n  const collection = useMemo<SelectionItem[]>(() => items.map((item) => ({ key: item.key, textValue: item.title })), [items]);\n  const selection = useSelection({\n    items: collection,\n    mode: 'single',\n    defaultSelectedKeys: defaultSelectedKey === undefined ? undefined : [defaultSelectedKey],\n    selectedKeys: selectedKey === undefined ? undefined : selectedKey === null ? [] : [selectedKey],\n    onSelectionChange: (keys) => {\n      const [key] = keys;\n      if (key !== undefined) {\n        onSelectionChange?.(key);\n      }\n    },\n  });\n  const [selected] = selection.selectedKeys;\n  const tabStop = [selection.focusedKey, selected].find((key) => items.some((item) => item.key === key)) ?? items[0]?.key;\n  const dragging = drag !== null;\n  // Soltar logo acima ou logo abaixo de si mesmo não move nada, e não ganha indicador.\n  const dropGap = drag && drag.gap !== drag.from && drag.gap !== drag.from + 1 ? drag.gap : undefined;\n\n  // Os controles das linhas saem da ordem do Tab: a lista é uma parada só, e as setas para os lados chegam a eles.\n  useEffect(() => {\n    rows.current.forEach((row) => row.querySelectorAll<HTMLElement>(FOCUSABLE).forEach((element) => (element.tabIndex = -1)));\n  });\n\n  // Reordenar move o nó no DOM, e o navegador tira o foco dele.\n  useEffect(() => {\n    if (movedKey.current !== undefined) {\n      rows.current.get(movedKey.current)?.focus();\n      movedKey.current = undefined;\n    }\n  }, [items]);\n\n  useEffect(() => {\n    if (!dragging) {\n      return;\n    }\n\n    function cancel(event: globalThis.KeyboardEvent) {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        event.stopPropagation();\n        setDrag(null);\n      }\n    }\n\n    document.addEventListener('keydown', cancel, true);\n    return () => document.removeEventListener('keydown', cancel, true);\n  }, [dragging]);\n\n  function choose(key: string | undefined) {\n    if (key === undefined) {\n      return;\n    }\n\n    if (key === selected) {\n      selection.focus(key);\n    } else {\n      selection.select(key);\n    }\n\n    rows.current.get(key)?.focus();\n  }\n\n  function move(fromIndex: number, toIndex: number) {\n    if (toIndex < 0 || toIndex >= items.length || toIndex === fromIndex) {\n      return;\n    }\n\n    movedKey.current = items[fromIndex].key;\n    onReorder(fromIndex, toIndex);\n    setAnnouncement(`Movido para a posição ${toIndex + 1} de ${items.length}`);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const target = event.target as HTMLElement;\n    const row = target.closest<HTMLElement>('[role=\"row\"]');\n    const index = items.findIndex((item) => rows.current.get(item.key) === row);\n\n    if (!row || index < 0) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      focusWithinRow(row, target, event.key === 'ArrowRight' ? 1 : -1);\n      return;\n    }\n\n    // Nos controles da linha, as demais teclas são deles.\n    if (target !== row) {\n      return;\n    }\n\n    if (event.altKey && event.key === 'ArrowUp') {\n      move(index, index - 1);\n    } else if (event.altKey && event.key === 'ArrowDown') {\n      move(index, index + 1);\n    } else if (event.key === 'ArrowUp') {\n      choose(items[index - 1]?.key);\n    } else if (event.key === 'ArrowDown') {\n      choose(items[index + 1]?.key);\n    } else if (event.key === 'Home') {\n      choose(items[0].key);\n    } else if (event.key === 'End') {\n      choose(items[items.length - 1].key);\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      choose(items[index].key);\n    } else {\n      return;\n    }\n\n    event.preventDefault();\n  }\n\n  function handleRowClick(event: MouseEvent<HTMLDivElement>, key: string) {\n    // O clique num controle da linha é do controle, e não escolhe a linha.\n    if ((event.target as HTMLElement).closest(FOCUSABLE) === event.currentTarget) {\n      choose(key);\n    }\n  }\n\n  function startDrag(event: PointerEvent<HTMLButtonElement>, index: number) {\n    if (event.button !== 0) {\n      return;\n    }\n\n    event.preventDefault();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    setDrag({ from: index, gap: index });\n  }\n\n  function followDrag(event: PointerEvent<HTMLButtonElement>) {\n    if (!drag) {\n      return;\n    }\n\n    const gap = items.filter((item) => {\n      const box = rows.current.get(item.key)?.getBoundingClientRect();\n      return box !== undefined && box.top + box.height / 2 < event.clientY;\n    }).length;\n\n    if (gap !== drag.gap) {\n      setDrag({ ...drag, gap });\n    }\n  }\n\n  function endDrag() {\n    if (!drag) {\n      return;\n    }\n\n    setDrag(null);\n    move(drag.from, drag.gap > drag.from ? drag.gap - 1 : drag.gap);\n  }\n\n  return (\n    <>\n      <div\n        {...props}\n        aria-label={label}\n        className={[styles.list, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        role=\"grid\"\n      >\n        {items.map((item, index) => {\n          const depth = (item.level ?? 1) - 1;\n          const titleId = `${baseId}-${index}-title`;\n          const excerptId = `${baseId}-${index}-excerpt`;\n\n          return (\n            <div\n              aria-describedby={item.excerpt ? excerptId : undefined}\n              aria-labelledby={titleId}\n              aria-selected={item.key === selected}\n              className={[\n                styles.row,\n                item.key === selected && styles.selected,\n                drag?.from === index && styles.dragging,\n                dropGap === index && styles.dropBefore,\n                dropGap === items.length && index === items.length - 1 && styles.dropAfter,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              key={item.key}\n              onClick={(event) => handleRowClick(event, item.key)}\n              onFocus={() => selection.focus(item.key)}\n              ref={(node) => {\n                if (node) {\n                  rows.current.set(item.key, node);\n                } else {\n                  rows.current.delete(item.key);\n                }\n              }}\n              role=\"row\"\n              style={depth > 0 ? { marginInlineStart: `calc(${depth} * var(--pl-space-5))` } : undefined}\n              tabIndex={item.key === tabStop ? 0 : -1}\n            >\n              <div className={styles.cell} role=\"gridcell\">\n                <button\n                  aria-describedby={`${baseId}-hint`}\n                  aria-label={`Reordenar ${item.title}`}\n                  className={styles.handle}\n                  onPointerCancel={() => setDrag(null)}\n                  onPointerDown={(event) => startDrag(event, index)}\n                  onPointerMove={followDrag}\n                  onPointerUp={endDrag}\n                  type=\"button\"\n                >\n                  <IconDragHandle />\n                </button>\n                {item.icon && (\n                  <span aria-hidden=\"true\" className={styles.icon}>\n                    {item.icon}\n                  </span>\n                )}\n                <span className={styles.text}>\n                  <span className={styles.title} id={titleId}>\n                    {item.title}\n                  </span>\n                  {item.excerpt && (\n                    <span className={styles.excerpt} id={excerptId}>\n                      {item.excerpt}\n                    </span>\n                  )}\n                </span>\n                {item.actions && <span className={styles.actions}>{item.actions}</span>}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n      <span className={styles.hiddenText} id={`${baseId}-hint`}>\n        Na linha, Alt com as setas para cima e para baixo move o item.\n      </span>\n      <span className={styles.hiddenText} role=\"status\">\n        {announcement}\n      </span>\n    </>\n  );\n}\n"],"names":["FOCUSABLE","focusWithinRow","row","from","step","stops","element","_a","SortableList","className","defaultSelectedKey","items","label","onReorder","onSelectionChange","selectedKey","props","baseId","useId","rows","useRef","movedKey","drag","setDrag","useState","announcement","setAnnouncement","collection","useMemo","item","selection","useSelection","keys","key","selected","tabStop","dragging","dropGap","useEffect","cancel","event","choose","move","fromIndex","toIndex","handleKeyDown","target","index","_b","handleRowClick","startDrag","followDrag","gap","box","endDrag","jsxs","Fragment","jsx","styles","depth","titleId","excerptId","node","IconDragHandle"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_list_31zta_1",e="_row_31zta_8",o="_selected_31zta_25",_="_dragging_31zta_31",c="_dropBefore_31zta_36",n="_dropAfter_31zta_37",r="_cell_31zta_56",s="_handle_31zta_64",d="_icon_31zta_94",l="_text_31zta_105",a="_title_31zta_112",i="_excerpt_31zta_113",g="_actions_31zta_131",z="_hiddenText_31zta_137",p={list:t,row:e,selected:o,dragging:_,dropBefore:c,dropAfter:n,cell:r,handle:s,icon:d,text:l,title:a,excerpt:i,actions:g,hiddenText:z};exports.actions=g;exports.cell=r;exports.default=p;exports.dragging=_;exports.dropAfter=n;exports.dropBefore=c;exports.excerpt=i;exports.handle=s;exports.hiddenText=z;exports.icon=d;exports.list=t;exports.row=e;exports.selected=o;exports.text=l;exports.title=a;
+//# sourceMappingURL=SortableList.module.css.cjs.map

package/dist/components/data-display/SortableList/SortableList.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableList.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}