@plenustech/design-system 0.2.1 → 0.2.3

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),v=require("../../../utils/textSearch/textSearch.cjs"),E=require("../../../hooks/useSelection/useSelection.cjs"),L=["Home","End"," "];function w({defaultValue:i,items:n,onSearch:l,onSelectionChange:y,selectionMode:u="none",value:o}){const[r,b]=f.useState(""),c=f.useMemo(()=>l||!r?n:n.filter(e=>v.containsTerm(e.label,r)),[n,l,r]),k=f.useMemo(()=>c.map(e=>({key:e.value,disabled:e.disabled,textValue:e.label})),[c]),a=f.useRef(new Map);for(const e of[...i??[],...o??[]])a.current.has(e.value)||a.current.set(e.value,e);for(const e of n)a.current.set(e.value,e);const m=e=>a.current.get(e)??{value:e,label:""},s=E.useSelection({items:k,mode:u,defaultSelectedKeys:i==null?void 0:i.map(e=>e.value),selectedKeys:o==null?void 0:o.map(e=>e.value),onSelectionChange:e=>y==null?void 0:y([...e].map(m))}),d=(o??s.selectedItems.map(e=>({value:e.key,label:""}))).map(e=>m(e.value)),D=f.useMemo(()=>{if(!r||u!=="multiple")return[];const e=new Set(c.map(t=>t.value));return d.filter(t=>!e.has(t.value))},[d,u,r,c]);function g(e){if(u==="none"||e.target instanceof HTMLInputElement&&L.includes(e.key))return;const t=e.shiftKey;if(e.key==="ArrowDown")e.preventDefault(),s.focusedKey===void 0?s.focusFirst(t):s.focusNext(t);else if(e.key==="ArrowUp")e.preventDefault(),s.focusPrevious(t);else if(e.key==="Home")e.preventDefault(),s.focusFirst(t);else if(e.key==="End")e.preventDefault(),s.focusLast(t);else if(e.key==="Enter"||e.key===" "){const p=c.find(K=>K.value===s.focusedKey);p&&!p.disabled&&(e.preventDefault(),s.select(p.value))}}return{detached:D,focus:s.focus,focusFirst:s.focusFirst,focusLast:s.focusLast,focusedKey:s.focusedKey,handleKeyDown:g,isSelected:e=>d.some(t=>t.value===e),filter:e=>{b(e),s.focus(void 0),l==null||l(e)},reset:s.reset,typeahead:s.search,select:(e,t)=>{if(!e.disabled){if(t&&u==="multiple"){s.selectRange(e.value);return}s.select(e.value)}},selected:d,selectionMode:u,status:s.status,toggleAll:s.toggleAll,term:r,visible:c}}exports.useListing=w;
+//# sourceMappingURL=useListing.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,85 @@
+import { useState as v, useMemo as m, useRef as w } from "react";
+import { containsTerm as A } from "../../../utils/textSearch/textSearch.js";
+import { useSelection as L } from "../../../hooks/useSelection/useSelection.js";
+const g = ["Home", "End", " "];
+function T({
+  defaultValue: c,
+  items: i,
+  onSearch: o,
+  onSelectionChange: d,
+  selectionMode: r = "none",
+  value: f
+}) {
+  const [u, b] = v(""), l = m(() => o || !u ? i : i.filter((e) => A(e.label, u)), [i, o, u]), k = m(
+    () => l.map((e) => ({ key: e.value, disabled: e.disabled, textValue: e.label })),
+    [l]
+  ), a = w(/* @__PURE__ */ new Map());
+  for (const e of [...c ?? [], ...f ?? []])
+    a.current.has(e.value) || a.current.set(e.value, e);
+  for (const e of i)
+    a.current.set(e.value, e);
+  const y = (e) => a.current.get(e) ?? { value: e, label: "" }, s = L({
+    items: k,
+    mode: r,
+    defaultSelectedKeys: c == null ? void 0 : c.map((e) => e.value),
+    selectedKeys: f == null ? void 0 : f.map((e) => e.value),
+    onSelectionChange: (e) => d == null ? void 0 : d([...e].map(y))
+  }), n = (f ?? s.selectedItems.map((e) => ({ value: e.key, label: "" }))).map(
+    (e) => y(e.value)
+  ), D = m(() => {
+    if (!u || r !== "multiple")
+      return [];
+    const e = new Set(l.map((t) => t.value));
+    return n.filter((t) => !e.has(t.value));
+  }, [n, r, u, l]);
+  function K(e) {
+    if (r === "none" || e.target instanceof HTMLInputElement && g.includes(e.key))
+      return;
+    const t = e.shiftKey;
+    if (e.key === "ArrowDown")
+      e.preventDefault(), s.focusedKey === void 0 ? s.focusFirst(t) : s.focusNext(t);
+    else if (e.key === "ArrowUp")
+      e.preventDefault(), s.focusPrevious(t);
+    else if (e.key === "Home")
+      e.preventDefault(), s.focusFirst(t);
+    else if (e.key === "End")
+      e.preventDefault(), s.focusLast(t);
+    else if (e.key === "Enter" || e.key === " ") {
+      const p = l.find((E) => E.value === s.focusedKey);
+      p && !p.disabled && (e.preventDefault(), s.select(p.value));
+    }
+  }
+  return {
+    detached: D,
+    focus: s.focus,
+    focusFirst: s.focusFirst,
+    focusLast: s.focusLast,
+    focusedKey: s.focusedKey,
+    handleKeyDown: K,
+    isSelected: (e) => n.some((t) => t.value === e),
+    filter: (e) => {
+      b(e), s.focus(void 0), o == null || o(e);
+    },
+    reset: s.reset,
+    typeahead: s.search,
+    select: (e, t) => {
+      if (!e.disabled) {
+        if (t && r === "multiple") {
+          s.selectRange(e.value);
+          return;
+        }
+        s.select(e.value);
+      }
+    },
+    selected: n,
+    selectionMode: r,
+    status: s.status,
+    toggleAll: s.toggleAll,
+    term: u,
+    visible: l
+  };
+}
+export {
+  T as useListing
+};
+//# sourceMappingURL=useListing.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),I=6,k=24;function M(n){const s=n.nextElementSibling;return s?s.offsetTop-n.offsetTop:n.offsetHeight}function x(n,s){const a=o.useRef(null),l=o.useRef(null),f=o.useRef(0),i=o.useRef(null),[d,b]=o.useState(null),[h,E]=o.useState(0),T=o.useCallback(t=>{if(l.current=t,t){const e=M(t);b(c=>e>0?e:c??0)}},[]),g=o.useCallback(t=>{var e;a.current=t,(e=i.current)==null||e.disconnect(),i.current=null,!(!t||typeof ResizeObserver>"u")&&(i.current=new ResizeObserver(()=>{const c=l.current?M(l.current):0;c>0&&b(c)}),i.current.observe(t))},[]),R=o.useCallback(()=>{var t;E(((t=a.current)==null?void 0:t.scrollTop)??0)},[]),r=d??0,p=s!==void 0&&r>0&&n*r>s,H=s!==void 0&&d===null,S=o.useCallback(t=>{const e=a.current,c=l.current;if(!e||!c||t<0||r<=0)return;const m=c.getBoundingClientRect().top-e.getBoundingClientRect().top+e.scrollTop+(t-f.current)*r,C=m+r;m<e.scrollTop?e.scrollTop=m:C>e.scrollTop+e.clientHeight&&(e.scrollTop=C-e.clientHeight)},[r]);if(!p)return f.current=0,{active:p,attachScroll:g,measureItem:T,onScroll:R,padding:{before:0,after:0},scrollToIndex:S,start:0,end:H?Math.min(n,k):n};const P=Math.ceil(s/r),u=Math.max(0,Math.floor(h/r)-I),v=Math.min(n,u+P+I*2);return f.current=u,{active:p,attachScroll:g,measureItem:T,onScroll:R,padding:{before:u*r,after:(n-v)*r},scrollToIndex:S,start:u,end:v}}exports.useVirtualWindow=x;
+//# sourceMappingURL=useVirtualWindow.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualWindow.cjs","sources":["../../../../src/components/data-display/List/useVirtualWindow.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nconst OVERSCAN = 6;\n\n/** Quantos itens entram antes da primeira medida: montar dez mil nos para medir um custava o primeiro render. */\nconst PRIMEIRA_JANELA = 24;\n\n/** O passo entre itens inclui o espaco que o container coloca entre eles; so a altura acumulava erro. */\nfunction medirPasso(node: HTMLElement) {\n  const proximo = node.nextElementSibling as HTMLElement | null;\n\n  return proximo ? proximo.offsetTop - node.offsetTop : node.offsetHeight;\n}\n\nexport function useVirtualWindow(total: number, height?: number) {\n  const scrollElement = useRef<HTMLElement | null>(null);\n  const firstItem = useRef<HTMLElement | null>(null);\n  const firstIndex = useRef(0);\n  const observer = useRef<ResizeObserver | null>(null);\n  // `null` e \"ainda nao medido\"; zero e \"sem layout\", como no jsdom ou na lista montada escondida.\n  const [itemHeight, setItemHeight] = useState<number | null>(null);\n  const [scrollTop, setScrollTop] = useState(0);\n\n  const measureItem = useCallback((node: HTMLElement | null) => {\n    firstItem.current = node;\n\n    if (node) {\n      const passo = medirPasso(node);\n      setItemHeight((current) => (passo > 0 ? passo : (current ?? 0)));\n    }\n  }, []);\n\n  const attachScroll = useCallback((node: HTMLElement | null) => {\n    scrollElement.current = node;\n    observer.current?.disconnect();\n    observer.current = null;\n\n    if (!node || typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    // Montada escondida, a lista mede zero; quando aparece, o tamanho muda e ela mede de novo.\n    observer.current = new ResizeObserver(() => {\n      const passo = firstItem.current ? medirPasso(firstItem.current) : 0;\n\n      if (passo > 0) {\n        setItemHeight(passo);\n      }\n    });\n    observer.current.observe(node);\n  }, []);\n\n  const onScroll = useCallback(() => {\n    setScrollTop(scrollElement.current?.scrollTop ?? 0);\n  }, []);\n\n  const passo = itemHeight ?? 0;\n  const active = height !== undefined && passo > 0 && total * passo > height;\n  const medindo = height !== undefined && itemHeight === null;\n\n  const scrollToIndex = useCallback(\n    (index: number) => {\n      const element = scrollElement.current;\n      const primeiro = firstItem.current;\n\n      if (!element || !primeiro || index < 0 || passo <= 0) {\n        return;\n      }\n\n      // A conta parte do primeiro item montado, e nao do topo: antes dele pode haver o grupo de selecionados.\n      const topoDoPrimeiro = primeiro.getBoundingClientRect().top - element.getBoundingClientRect().top + element.scrollTop;\n      const top = topoDoPrimeiro + (index - firstIndex.current) * passo;\n      const bottom = top + passo;\n\n      if (top < element.scrollTop) {\n        element.scrollTop = top;\n      } else if (bottom > element.scrollTop + element.clientHeight) {\n        element.scrollTop = bottom - element.clientHeight;\n      }\n    },\n    [passo],\n  );\n\n  if (!active) {\n    firstIndex.current = 0;\n\n    return {\n      active,\n      attachScroll,\n      measureItem,\n      onScroll,\n      padding: { before: 0, after: 0 },\n      scrollToIndex,\n      start: 0,\n      end: medindo ? Math.min(total, PRIMEIRA_JANELA) : total,\n    };\n  }\n\n  const perScreen = Math.ceil(height / passo);\n  const start = Math.max(0, Math.floor(scrollTop / passo) - OVERSCAN);\n  const end = Math.min(total, start + perScreen + OVERSCAN * 2);\n\n  firstIndex.current = start;\n\n  return {\n    active,\n    attachScroll,\n    measureItem,\n    onScroll,\n    padding: { before: start * passo, after: (total - end) * passo },\n    scrollToIndex,\n    start,\n    end,\n  };\n}\n"],"names":["OVERSCAN","PRIMEIRA_JANELA","medirPasso","node","proximo","useVirtualWindow","total","height","scrollElement","useRef","firstItem","firstIndex","observer","itemHeight","setItemHeight","useState","scrollTop","setScrollTop","measureItem","useCallback","passo","current","attachScroll","_a","onScroll","active","medindo","scrollToIndex","index","element","primeiro","top","bottom","perScreen","start","end"],"mappings":"yGAEMA,EAAW,EAGXC,EAAkB,GAGxB,SAASC,EAAWC,EAAmB,CACrC,MAAMC,EAAUD,EAAK,mBAErB,OAAOC,EAAUA,EAAQ,UAAYD,EAAK,UAAYA,EAAK,YAC7D,CAEO,SAASE,EAAiBC,EAAeC,EAAiB,CAC/D,MAAMC,EAAgBC,EAAAA,OAA2B,IAAI,EAC/CC,EAAYD,EAAAA,OAA2B,IAAI,EAC3CE,EAAaF,EAAAA,OAAO,CAAC,EACrBG,EAAWH,EAAAA,OAA8B,IAAI,EAE7C,CAACI,EAAYC,CAAa,EAAIC,EAAAA,SAAwB,IAAI,EAC1D,CAACC,EAAWC,CAAY,EAAIF,EAAAA,SAAS,CAAC,EAEtCG,EAAcC,cAAahB,GAA6B,CAG5D,GAFAO,EAAU,QAAUP,EAEhBA,EAAM,CACR,MAAMiB,EAAQlB,EAAWC,CAAI,EAC7BW,EAAeO,GAAaD,EAAQ,EAAIA,EAASC,GAAW,CAAG,CACjE,CACF,EAAG,CAAA,CAAE,EAECC,EAAeH,cAAahB,GAA6B,OAC7DK,EAAc,QAAUL,GACxBoB,EAAAX,EAAS,UAAT,MAAAW,EAAkB,aAClBX,EAAS,QAAU,KAEf,GAACT,GAAQ,OAAO,eAAmB,OAKvCS,EAAS,QAAU,IAAI,eAAe,IAAM,CAC1C,MAAMQ,EAAQV,EAAU,QAAUR,EAAWQ,EAAU,OAAO,EAAI,EAE9DU,EAAQ,GACVN,EAAcM,CAAK,CAEvB,CAAC,EACDR,EAAS,QAAQ,QAAQT,CAAI,EAC/B,EAAG,CAAA,CAAE,EAECqB,EAAWL,EAAAA,YAAY,IAAM,OACjCF,IAAaM,EAAAf,EAAc,UAAd,YAAAe,EAAuB,YAAa,CAAC,CACpD,EAAG,CAAA,CAAE,EAECH,EAAQP,GAAc,EACtBY,EAASlB,IAAW,QAAaa,EAAQ,GAAKd,EAAQc,EAAQb,EAC9DmB,EAAUnB,IAAW,QAAaM,IAAe,KAEjDc,EAAgBR,EAAAA,YACnBS,GAAkB,CACjB,MAAMC,EAAUrB,EAAc,QACxBsB,EAAWpB,EAAU,QAE3B,GAAI,CAACmB,GAAW,CAACC,GAAYF,EAAQ,GAAKR,GAAS,EACjD,OAKF,MAAMW,EADiBD,EAAS,wBAAwB,IAAMD,EAAQ,sBAAA,EAAwB,IAAMA,EAAQ,WAC9ED,EAAQjB,EAAW,SAAWS,EACtDY,EAASD,EAAMX,EAEjBW,EAAMF,EAAQ,UAChBA,EAAQ,UAAYE,EACXC,EAASH,EAAQ,UAAYA,EAAQ,eAC9CA,EAAQ,UAAYG,EAASH,EAAQ,aAEzC,EACA,CAACT,CAAK,CAAA,EAGR,GAAI,CAACK,EACH,OAAAd,EAAW,QAAU,EAEd,CACL,OAAAc,EACA,aAAAH,EACA,YAAAJ,EACA,SAAAM,EACA,QAAS,CAAE,OAAQ,EAAG,MAAO,CAAA,EAC7B,cAAAG,EACA,MAAO,EACP,IAAKD,EAAU,KAAK,IAAIpB,EAAOL,CAAe,EAAIK,CAAA,EAItD,MAAM2B,EAAY,KAAK,KAAK1B,EAASa,CAAK,EACpCc,EAAQ,KAAK,IAAI,EAAG,KAAK,MAAMlB,EAAYI,CAAK,EAAIpB,CAAQ,EAC5DmC,EAAM,KAAK,IAAI7B,EAAO4B,EAAQD,EAAYjC,EAAW,CAAC,EAE5D,OAAAW,EAAW,QAAUuB,EAEd,CACL,OAAAT,EACA,aAAAH,EACA,YAAAJ,EACA,SAAAM,EACA,QAAS,CAAE,OAAQU,EAAQd,EAAO,OAAQd,EAAQ6B,GAAOf,CAAA,EACzD,cAAAO,EACA,MAAAO,EACA,IAAAC,CAAA,CAEJ"}

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

@@ -0,0 +1,58 @@
+import { useRef as u, useState as h, useCallback as f } from "react";
+const x = 6, O = 24;
+function E(r) {
+  const n = r.nextElementSibling;
+  return n ? n.offsetTop - r.offsetTop : r.offsetHeight;
+}
+function B(r, n) {
+  const p = u(null), s = u(null), a = u(0), l = u(null), [T, b] = h(null), [H, A] = h(0), g = f((e) => {
+    if (s.current = e, e) {
+      const t = E(e);
+      b((c) => t > 0 ? t : c ?? 0);
+    }
+  }, []), R = f((e) => {
+    var t;
+    p.current = e, (t = l.current) == null || t.disconnect(), l.current = null, !(!e || typeof ResizeObserver > "u") && (l.current = new ResizeObserver(() => {
+      const c = s.current ? E(s.current) : 0;
+      c > 0 && b(c);
+    }), l.current.observe(e));
+  }, []), v = f(() => {
+    var e;
+    A(((e = p.current) == null ? void 0 : e.scrollTop) ?? 0);
+  }, []), o = T ?? 0, m = n !== void 0 && o > 0 && r * o > n, C = n !== void 0 && T === null, I = f(
+    (e) => {
+      const t = p.current, c = s.current;
+      if (!t || !c || e < 0 || o <= 0)
+        return;
+      const d = c.getBoundingClientRect().top - t.getBoundingClientRect().top + t.scrollTop + (e - a.current) * o, M = d + o;
+      d < t.scrollTop ? t.scrollTop = d : M > t.scrollTop + t.clientHeight && (t.scrollTop = M - t.clientHeight);
+    },
+    [o]
+  );
+  if (!m)
+    return a.current = 0, {
+      active: m,
+      attachScroll: R,
+      measureItem: g,
+      onScroll: v,
+      padding: { before: 0, after: 0 },
+      scrollToIndex: I,
+      start: 0,
+      end: C ? Math.min(r, O) : r
+    };
+  const P = Math.ceil(n / o), i = Math.max(0, Math.floor(H / o) - x), S = Math.min(r, i + P + x * 2);
+  return a.current = i, {
+    active: m,
+    attachScroll: R,
+    measureItem: g,
+    onScroll: v,
+    padding: { before: i * o, after: (r - S) * o },
+    scrollToIndex: I,
+    start: i,
+    end: S
+  };
+}
+export {
+  B as useVirtualWindow
+};
+//# sourceMappingURL=useVirtualWindow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualWindow.js","sources":["../../../../src/components/data-display/List/useVirtualWindow.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nconst OVERSCAN = 6;\n\n/** Quantos itens entram antes da primeira medida: montar dez mil nos para medir um custava o primeiro render. */\nconst PRIMEIRA_JANELA = 24;\n\n/** O passo entre itens inclui o espaco que o container coloca entre eles; so a altura acumulava erro. */\nfunction medirPasso(node: HTMLElement) {\n  const proximo = node.nextElementSibling as HTMLElement | null;\n\n  return proximo ? proximo.offsetTop - node.offsetTop : node.offsetHeight;\n}\n\nexport function useVirtualWindow(total: number, height?: number) {\n  const scrollElement = useRef<HTMLElement | null>(null);\n  const firstItem = useRef<HTMLElement | null>(null);\n  const firstIndex = useRef(0);\n  const observer = useRef<ResizeObserver | null>(null);\n  // `null` e \"ainda nao medido\"; zero e \"sem layout\", como no jsdom ou na lista montada escondida.\n  const [itemHeight, setItemHeight] = useState<number | null>(null);\n  const [scrollTop, setScrollTop] = useState(0);\n\n  const measureItem = useCallback((node: HTMLElement | null) => {\n    firstItem.current = node;\n\n    if (node) {\n      const passo = medirPasso(node);\n      setItemHeight((current) => (passo > 0 ? passo : (current ?? 0)));\n    }\n  }, []);\n\n  const attachScroll = useCallback((node: HTMLElement | null) => {\n    scrollElement.current = node;\n    observer.current?.disconnect();\n    observer.current = null;\n\n    if (!node || typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    // Montada escondida, a lista mede zero; quando aparece, o tamanho muda e ela mede de novo.\n    observer.current = new ResizeObserver(() => {\n      const passo = firstItem.current ? medirPasso(firstItem.current) : 0;\n\n      if (passo > 0) {\n        setItemHeight(passo);\n      }\n    });\n    observer.current.observe(node);\n  }, []);\n\n  const onScroll = useCallback(() => {\n    setScrollTop(scrollElement.current?.scrollTop ?? 0);\n  }, []);\n\n  const passo = itemHeight ?? 0;\n  const active = height !== undefined && passo > 0 && total * passo > height;\n  const medindo = height !== undefined && itemHeight === null;\n\n  const scrollToIndex = useCallback(\n    (index: number) => {\n      const element = scrollElement.current;\n      const primeiro = firstItem.current;\n\n      if (!element || !primeiro || index < 0 || passo <= 0) {\n        return;\n      }\n\n      // A conta parte do primeiro item montado, e nao do topo: antes dele pode haver o grupo de selecionados.\n      const topoDoPrimeiro = primeiro.getBoundingClientRect().top - element.getBoundingClientRect().top + element.scrollTop;\n      const top = topoDoPrimeiro + (index - firstIndex.current) * passo;\n      const bottom = top + passo;\n\n      if (top < element.scrollTop) {\n        element.scrollTop = top;\n      } else if (bottom > element.scrollTop + element.clientHeight) {\n        element.scrollTop = bottom - element.clientHeight;\n      }\n    },\n    [passo],\n  );\n\n  if (!active) {\n    firstIndex.current = 0;\n\n    return {\n      active,\n      attachScroll,\n      measureItem,\n      onScroll,\n      padding: { before: 0, after: 0 },\n      scrollToIndex,\n      start: 0,\n      end: medindo ? Math.min(total, PRIMEIRA_JANELA) : total,\n    };\n  }\n\n  const perScreen = Math.ceil(height / passo);\n  const start = Math.max(0, Math.floor(scrollTop / passo) - OVERSCAN);\n  const end = Math.min(total, start + perScreen + OVERSCAN * 2);\n\n  firstIndex.current = start;\n\n  return {\n    active,\n    attachScroll,\n    measureItem,\n    onScroll,\n    padding: { before: start * passo, after: (total - end) * passo },\n    scrollToIndex,\n    start,\n    end,\n  };\n}\n"],"names":["OVERSCAN","PRIMEIRA_JANELA","medirPasso","node","proximo","useVirtualWindow","total","height","scrollElement","useRef","firstItem","firstIndex","observer","itemHeight","setItemHeight","useState","scrollTop","setScrollTop","measureItem","useCallback","passo","current","attachScroll","_a","onScroll","active","medindo","scrollToIndex","index","element","primeiro","top","bottom","perScreen","start","end"],"mappings":"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"}

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":""}

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

@@ -0,0 +1,34 @@
+const t = "_list_31zta_1", e = "_row_31zta_8", _ = "_selected_31zta_25", o = "_dragging_31zta_31", c = "_dropBefore_31zta_36", n = "_dropAfter_31zta_37", s = "_cell_31zta_56", a = "_handle_31zta_64", d = "_icon_31zta_94", r = "_text_31zta_105", l = "_title_31zta_112", i = "_excerpt_31zta_113", z = "_actions_31zta_131", p = "_hiddenText_31zta_137", x = {
+  list: t,
+  row: e,
+  selected: _,
+  dragging: o,
+  dropBefore: c,
+  dropAfter: n,
+  cell: s,
+  handle: a,
+  icon: d,
+  text: r,
+  title: l,
+  excerpt: i,
+  actions: z,
+  hiddenText: p
+};
+export {
+  z as actions,
+  s as cell,
+  x as default,
+  o as dragging,
+  n as dropAfter,
+  c as dropBefore,
+  i as excerpt,
+  a as handle,
+  p as hiddenText,
+  d as icon,
+  t as list,
+  e as row,
+  _ as selected,
+  r as text,
+  l as title
+};
+//# sourceMappingURL=SortableList.module.css.js.map

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

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

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),te=require("../../../hooks/useMergedRefs.cjs"),e=require("./Table.module.css.cjs"),se=require("../../../hooks/useSelection/useSelection.cjs"),w=require("../../icons/icons.cjs"),B=require("../../feedback/Skeleton/Skeleton.cjs"),le=require("../../feedback/EmptyState/EmptyState.cjs"),ae=require("../../overlays/Tooltip/Tooltip.cjs"),L=r.createContext(void 0),R=r.createContext(void 0);function z(i){return r.Children.toArray(i).map((a,l)=>t.jsx(R.Provider,{value:l,children:a},r.isValidElement(a)&&a.key!==null?a.key:l))}function _(i,a,l){const c=[...i];return c[a]=l,c}function T(i){const a=r.useContext(L);if(!a)throw new Error(i+" deve ser usado dentro de Table.");return a}function C({children:i,className:a,defaultSelectedIds:l,defaultSort:c,divider:f=!0,highlightSelectedRow:n=!0,label:o,loading:m=!1,loadingMessage:x="Carregando",onSelectionChange:b,onSortChange:g,rows:h=[],selectedIds:d,selectionControl:p,selectionMode:j="none",size:v="md",sort:E,stickyHeader:k=!1,striped:K=!1,ref:O,...H}){const P=r.useId(),[W,F]=r.useState(c),[M,I]=r.useState(()=>new Set),N=E??W,q=p??(j==="single"?"radio":"checkbox"),[D,Q]=r.useState(!0),U=r.useCallback(s=>{if(!s||typeof ResizeObserver>"u")return;const u=new ResizeObserver(()=>Q(s.scrollWidth>s.clientWidth||s.scrollHeight>s.clientHeight));return u.observe(s),s.firstElementChild&&u.observe(s.firstElementChild),()=>u.disconnect()},[]),V=te.useMergedRefs(k?U:void 0,O),$=r.useCallback(s=>(I(u=>new Set(u).add(s)),()=>I(u=>{const y=new Set(u);return y.delete(s),y})),[]),[G,A]=r.useState([]),J=r.useCallback((s,u)=>(A(y=>_(y,s,u)),()=>A(y=>_(y,s,void 0))),[]);function X(s){const u={column:s,direction:(N==null?void 0:N.column)===s&&N.direction==="ascending"?"descending":"ascending"};E===void 0&&F(u),g==null||g(u)}const Y=r.useMemo(()=>h.map(s=>({key:s.id,disabled:s.disabled})),[h]),S=se.useSelection({allowEmpty:q!=="radio",defaultSelectedKeys:l,items:Y,mode:j,selectedKeys:d,onSelectionChange:s=>b==null?void 0:b([...s])}),Z={baseId:P,columnAt:s=>G[s],countColumns:()=>Math.max(M.size,1),loading:m,registerColumn:$,registerLayout:J,requestSort:X,selection:{control:q,empty:h.length===0,highlight:n,isSelected:s=>S.selectedKeys.has(s),mode:j,status:S.status,toggle:(s,u)=>{if(u&&j==="multiple"){S.selectRange(s);return}S.select(s)},toggleAll:S.toggleAll},size:v,sort:N},ee=[e.default.table,e.default[v],f&&e.default.divider,K&&e.default.striped,k&&e.default.sticky].filter(Boolean).join(" ");return t.jsxs("div",{...H,className:[e.default.scroll,k&&!D&&e.default.noScroll,a].filter(Boolean).join(" "),ref:V,children:[t.jsx("table",{"aria-busy":m||void 0,"aria-label":o,className:ee,children:t.jsx(L.Provider,{value:Z,children:i})}),m&&t.jsx("p",{className:e.default.status,role:"status",children:x})]})}function ne({children:i}){const{registerColumn:a,selection:l}=T("Table.Header");return r.useEffect(()=>l.mode==="none"?void 0:a("__selecao__"),[a,l.mode]),t.jsx("thead",{className:e.default.head,children:t.jsxs("tr",{children:[l.mode==="multiple"&&t.jsx("th",{className:[e.default.column,e.default.lead].join(" "),scope:"col",children:t.jsx("input",{"aria-label":"Selecionar todas as linhas",checked:l.status==="all",className:e.default.checkbox,disabled:l.empty,onChange:l.toggleAll,ref:c=>{c&&(c.indeterminate=l.status==="partial")},type:"checkbox"})}),l.mode==="single"&&t.jsx("th",{className:[e.default.column,e.default.lead].join(" "),scope:"col"}),z(i)]})})}function oe({align:i,children:a,help:l,hideBelow:c,id:f,numeric:n=!1,sortable:o=!1,width:m}){const{registerColumn:x,registerLayout:b,requestSort:g,sort:h}=T("Table.Column"),d=r.useContext(R),p=i??(n?"end":"start");r.useEffect(()=>x(f),[f,x]),r.useLayoutEffect(()=>d===void 0?void 0:b(d,{align:p,hideBelow:c,numeric:n}),[p,c,d,n,b]);const j=(h==null?void 0:h.column)===f?h.direction:void 0,v=l&&t.jsx(ae.Tooltip,{content:l,children:t.jsx("span",{"aria-label":l,className:e.default.help,role:"img",tabIndex:0,children:t.jsx(w.IconQuestionCircle,{size:14})})});return t.jsx("th",{"aria-sort":o?j??"none":void 0,className:[e.default.column,e.default[p],o&&e.default.sortable].filter(Boolean).join(" "),"data-hide-below":c,scope:"col",style:{width:m},children:o?t.jsxs("div",{className:e.default.sortHeader,children:[t.jsxs("button",{className:e.default.sortButton,onClick:()=>g(f),type:"button",children:[a,j?t.jsx(w.IconArrowUp,{className:[e.default.sortIcon,j==="descending"&&e.default.sortDescending].filter(Boolean).join(" "),size:12}):t.jsx(w.IconChevronExpand,{className:e.default.sortIcon,size:12})]}),v]}):t.jsxs(t.Fragment,{children:[a,v]})})}const re=3;function ce({children:i,emptyDescription:a="Não há registros para exibir. Se houver busca ou filtros aplicados, experimente ajustá-los.",emptyTitle:l="Nenhum registro encontrado",items:c}){const{columnAt:f,countColumns:n,loading:o,selection:m}=T("Table.Body");if(o){const x=Array.from({length:c.length||re},(h,d)=>d),b=m.mode==="none"?0:1,g=Array.from({length:n()-b},(h,d)=>f(d));return t.jsx("tbody",{"aria-hidden":"true",children:x.map(h=>t.jsxs("tr",{className:[e.default.row,e.default.skeletonRow].join(" "),children:[b>0&&t.jsx("td",{className:[e.default.cell,e.default.lead].join(" "),children:t.jsx(B.Skeleton,{className:e.default.skeleton})}),g.map((d,p)=>t.jsx("td",{className:[e.default.cell,e.default[(d==null?void 0:d.align)??"start"]].join(" "),"data-hide-below":d==null?void 0:d.hideBelow,children:t.jsx(B.Skeleton,{className:e.default.skeleton})},p))]},h))})}return c.length===0?t.jsx("tbody",{children:t.jsx("tr",{children:t.jsx("td",{className:e.default.empty,colSpan:n(),children:t.jsx(le.EmptyState,{description:a,title:l})})})}):t.jsx("tbody",{children:c.map(x=>t.jsx(r.Fragment,{children:i(x)},x.id))})}function ie({children:i,disabled:a=!1,id:l,label:c}){const{baseId:f,selection:n}=T("Table.Row"),o=n.mode!=="none"&&n.isSelected(l);return t.jsxs("tr",{className:[e.default.row,o&&n.highlight&&e.default.selected].filter(Boolean).join(" "),children:[n.mode!=="none"&&t.jsx("td",{className:[e.default.cell,e.default.lead].join(" "),children:t.jsx("input",{"aria-label":c??"Selecionar linha",checked:o,className:e.default[n.control],disabled:a,name:n.control==="radio"?`${f}-selecao`:void 0,onChange:()=>{},onClick:m=>n.toggle(l,m.shiftKey),role:n.control==="toggle"?"switch":void 0,type:n.control==="radio"?"radio":"checkbox"})}),z(i)]})}function de({align:i,children:a,hideBelow:l,numeric:c}){const{columnAt:f}=T("Table.Cell"),n=r.useContext(R),o=n===void 0?void 0:f(n),m=c??(o==null?void 0:o.numeric)??!1;return t.jsx("td",{className:[e.default.cell,e.default[i??(o==null?void 0:o.align)??(m?"end":"start")],m&&e.default.numeric].filter(Boolean).join(" "),"data-hide-below":l??(o==null?void 0:o.hideBelow),children:a})}C.Header=ne;C.Column=oe;C.Body=ce;C.Row=ie;C.Cell=de;exports.Table=C;
+//# sourceMappingURL=Table.cjs.map