npm - @proef/common-ui - Versions diffs - 2.6.4 → 2.6.5 - Mend

@proef/common-ui 2.6.4 → 2.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/esm/v1/primitives/forms/SelectInput/SelectInput.js CHANGED Viewed

@@ -3,12 +3,19 @@ import React, { forwardRef, useImperativeHandle, useState, useMemo, useRef, useE
 import { createPortal } from "react-dom";
 import { ChevronDownIcon } from "../../../foundations/icons/icons.js";
 import { useField, fieldBoxClasses } from "../field.js";
+import Checkbox from "../Checkbox/Checkbox.js";
 import { useFloatingPanel, PANEL_CLASS, itemClass } from "../../../capabilities/overlay/useFloatingPanel.js";
 import { useDialogContainer } from "../../../components/overlays/Dialog/Dialog.js";
 const DEFAULT_SELECT_LABELS = {
   search: "Search…",
   searchIn: "Search in {label}",
-  noResults: "No results"
+  noResults: "No results",
+  selectAll: "Select all",
+  selectResults: "Select all (results)",
+  clear: "Clear"
+};
+const plain = (text) => text.normalize("NFD").replace(new RegExp("\\p{M}", "gu"), "").toLowerCase();
+const noop = () => {
 };
 const Check = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
 function optionsFromChildren(children) {
@@ -50,7 +57,9 @@ const SelectInput = forwardRef(function SelectInput2({
   values: controlledValues,
   defaultValues = [],
   onValuesChange,
-  allLabel
+  allLabel,
+  selectionActions = false,
+  checkboxes = false
 }, ref) {
   const L = { ...DEFAULT_SELECT_LABELS, ...labels };
   const field = useField();
@@ -70,8 +79,8 @@ const SelectInput = forwardRef(function SelectInput2({
   const [query, setQuery] = useState("");
   const withSearch = searchable ?? list.length > 10;
   const visible = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return q ? list.filter((o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)) : list;
+    const q = plain(query.trim());
+    return q ? list.filter((o) => plain(o.label).includes(q) || (o.description ? plain(o.description).includes(q) : false)) : list;
   }, [list, query]);
   const [active, setActive] = useState(0);
   const searchRef = useRef(null);
@@ -85,6 +94,10 @@ const SelectInput = forwardRef(function SelectInput2({
   useEffect(() => {
     if (p.open) p.panelRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView?.({ block: "nearest" });
   }, [active, p.open, p.panelRef]);
+  const setPicked = (next) => {
+    if (controlledValues === void 0) setOwnValues(next);
+    onValuesChange?.(next);
+  };
   const choose = (o) => {
     if (o.disabled) return;
     if (multiple) {
@@ -143,8 +156,9 @@ const SelectInput = forwardRef(function SelectInput2({
     }
   };
   const pill = variant === "pill";
+  const withBoxes = multiple && checkboxes;
   const pickedOptions = list.filter((o) => picked.includes(o.value));
-  const multiText = allLabel && list.length > 0 && pickedOptions.length === list.length ? allLabel : pickedOptions.map((o) => o.label).join(", ");
+  const multiText = allLabel && list.length > 0 && pickedOptions.length === list.length ? allLabel : L.selectedCount && pickedOptions.length > 1 ? L.selectedCount.replace("{n}", String(pickedOptions.length)) : pickedOptions.map((o) => o.label).join(", ");
   const showsPlaceholder = multiple ? pickedOptions.length === 0 : !chosen || chosen.value === "" && placeholder !== void 0 && emptyOption === void 0;
   const buttonText = multiple ? showsPlaceholder ? placeholder ?? "" : multiText : showsPlaceholder ? placeholder ?? chosen?.label ?? "" : chosen?.label;
   return /* @__PURE__ */ jsxs("div", { className: `relative min-w-0 ${className}`, onKeyDown: keys, children: [
@@ -190,6 +204,32 @@ const SelectInput = forwardRef(function SelectInput2({
             className: "h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
           }
         ) }),
+        multiple && selectionActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 pb-1 text-xs", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !visible.some((o) => !o.disabled),
+              onClick: () => {
+                const add = visible.filter((o) => !o.disabled).map((o) => o.value);
+                const set = /* @__PURE__ */ new Set([...picked, ...add]);
+                setPicked(list.filter((x) => set.has(x.value)).map((x) => x.value));
+              },
+              className: "text-proef-blue hover:underline disabled:opacity-40 dark:text-sky-300",
+              children: query.trim() ? L.selectResults : L.selectAll
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: picked.length === 0,
+              onClick: () => setPicked([]),
+              className: "text-proef-blue hover:underline disabled:opacity-40 dark:text-sky-300",
+              children: L.clear
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs("ul", { role: "listbox", "aria-label": ariaLabel, "aria-multiselectable": multiple || void 0, children: [
           visible.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-slate-400", children: L.noResults }),
           visible.map((o, i) => {
@@ -205,11 +245,13 @@ const SelectInput = forwardRef(function SelectInput2({
                 onClick: () => choose(o),
                 className: `${itemClass(i === active)} ${o.disabled ? "cursor-not-allowed opacity-50" : ""}`,
                 children: [
+                  withBoxes && /* @__PURE__ */ jsx(Checkbox, { checked: selected, onChange: noop, tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" }),
                   /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
                     /* @__PURE__ */ jsx("span", { className: `block truncate ${selected ? "font-semibold" : ""} ${o.value === "" ? "text-slate-500 dark:text-slate-400" : ""}`, children: o.label }),
                     o.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-[11px] text-slate-500 dark:text-slate-400", children: o.description })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0", children: selected && /* @__PURE__ */ jsx(Check, {}) })
+                  o.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-slate-500 dark:text-slate-400", children: o.count.toLocaleString() }),
+                  !withBoxes && /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0", children: selected && /* @__PURE__ */ jsx(Check, {}) })
                 ]
               },
               o.value || "__empty"

package/dist/esm/v1/primitives/forms/SelectInput/SelectInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectInput.js","sources":["../../../../../../src/v1/primitives/forms/SelectInput/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldBoxClasses, useField } from '../field'\r\nimport { PANEL_CLASS, itemClass, useFloatingPanel } from '../../../capabilities/overlay/useFloatingPanel'\r\nimport { useDialogContainer } from '../../../components/overlays/Dialog/Dialog'\r\n\r\nexport interface SelectOption {\r\n value: string\r\n label: string\r\n /** Texto pequeno por baixo do rótulo, na lista. /\r\n description?: string\r\n disabled?: boolean\r\n}\r\n\r\nexport interface SelectInputLabels {\r\n /* Texto da caixa de pesquisa. /\r\n search: string\r\n /* Nome da caixa de pesquisa para leitores de ecrã; \"{label}\" é o nome do campo. /\r\n searchIn: string\r\n noResults: string\r\n}\r\n\r\nexport const DEFAULT_SELECT_LABELS: SelectInputLabels = {\r\n search: 'Search…',\r\n searchIn: 'Search in {label}',\r\n noResults: 'No results',\r\n}\r\n\r\nexport interface SelectInputProps {\r\n /* A opção escolhida (controlado). `''` = nenhuma. /\r\n value?: string\r\n defaultValue?: string\r\n /* As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. /\r\n options?: readonly (string \| SelectOption)[]\r\n /* Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). /\r\n children?: React.ReactNode\r\n /* Recebe o valor escolhido. /\r\n onValueChange?: (value: string) => void\r\n /* Como no `<select>`: `e.target.value` é o valor escolhido. /\r\n onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void\r\n /* Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). /\r\n placeholder?: string\r\n /* O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. /\r\n placeholderOption?: boolean\r\n /* Primeira opção vazia para desfazer a escolha (ex: \"Todas\"). /\r\n emptyOption?: string\r\n /* Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. /\r\n searchable?: boolean\r\n disabled?: boolean\r\n required?: boolean\r\n /* Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). /\r\n invalid?: boolean\r\n id?: string\r\n /* Nome no formulário (vai num campo escondido). /\r\n name?: string\r\n 'aria-label'?: string\r\n 'aria-labelledby'?: string\r\n /* `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. /\r\n variant?: 'field' \| 'pill'\r\n /* Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). /\r\n pillClassName?: string\r\n /* 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). /\r\n tall?: boolean\r\n labels?: Partial<SelectInputLabels>\r\n /* Classes da caixa à volta (ex: a largura). /\r\n className?: string\r\n /\r\n Escolha múltipla: cada opção leva ✓ e a lista fica aberta a marcar e desmarcar.\r\n * Usa `values` / `onValuesChange` em vez de `value` / `onValueChange`.\r\n /\r\n multiple?: boolean\r\n /* As escolhidas, com `multiple` (controlado). /\r\n values?: string[]\r\n defaultValues?: string[]\r\n /* Recebe as escolhidas, com `multiple`, pela ordem das opções. /\r\n onValuesChange?: (values: string[]) => void\r\n /* Com `multiple`: o texto do botão quando estão todas escolhidas (ex: \"Todos os tipos\"). /\r\n allLabel?: string\r\n}\r\n\r\nconst Check = () => (\r\n <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n <path d=\"M20 6 9 17l-5-5\" />\r\n </svg>\r\n)\r\n\r\n/* As `<option>` dos filhos como opções (aceita também `<optgroup>`, achatado). /\r\nfunction optionsFromChildren(children: React.ReactNode): SelectOption[] {\r\n const out: SelectOption[] = []\r\n React.Children.forEach(children, (child) => {\r\n if (!React.isValidElement(child)) return\r\n const props = child.props as { value?: unknown; children?: React.ReactNode; disabled?: boolean }\r\n if (child.type === 'optgroup') return out.push(...optionsFromChildren(props.children))\r\n if (child.type !== 'option') return\r\n const text = React.Children.toArray(props.children).join('')\r\n out.push({ value: props.value !== undefined ? String(props.value) : text, label: text, disabled: props.disabled })\r\n })\r\n return out\r\n}\r\n\r\n/\r\n Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o\r\n * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.\r\n \r\n Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.\r\n \r\n Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta\r\n * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).\r\n \r\n Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`\r\n * acrescenta uma primeira opção vazia.\r\n */\r\nconst SelectInput = forwardRef<HTMLButtonElement, SelectInputProps>(function SelectInput(\r\n {\r\n value: controlled,\r\n defaultValue = '',\r\n options,\r\n children,\r\n onValueChange,\r\n onChange,\r\n placeholder,\r\n placeholderOption = true,\r\n emptyOption,\r\n searchable,\r\n disabled = false,\r\n required,\r\n invalid,\r\n id,\r\n name,\r\n 'aria-label': ariaLabel,\r\n 'aria-labelledby': ariaLabelledBy,\r\n variant = 'field',\r\n pillClassName = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n tall = false,\r\n labels,\r\n className = '',\r\n multiple = false,\r\n values: controlledValues,\r\n defaultValues = [],\r\n onValuesChange,\r\n allLabel,\r\n },\r\n ref,\r\n) {\r\n const L = { ...DEFAULT_SELECT_LABELS, ...labels }\r\n const field = useField()\r\n const p = useFloatingPanel('left')\r\n // Dentro de um Dialog a lista abre na janela: no body ficava por baixo dela (z-200)\r\n // e o resto da página está inert — a lista abria mas não se via nem se clicava.\r\n const dialogContainer = useDialogContainer()\r\n useImperativeHandle(ref, () => p.triggerRef.current as HTMLButtonElement)\r\n\r\n const [own, setOwn] = useState(defaultValue)\r\n const value = controlled ?? own\r\n const [ownValues, setOwnValues] = useState(defaultValues)\r\n const picked = controlledValues ?? ownValues\r\n\r\n const list = useMemo<SelectOption[]>(() => {\r\n const base = options ? options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) : optionsFromChildren(children)\r\n // Na escolha múltipla não há opção vazia: desfazer é desmarcar.\r\n if (multiple) return base\r\n const empty = emptyOption ?? (placeholder !== undefined && placeholderOption ? placeholder : undefined)\r\n return empty !== undefined && !base.some((o) => o.value === '') ? [{ value: '', label: empty }, ...base] : base\r\n }, [options, children, emptyOption, placeholder, placeholderOption, multiple])\r\n\r\n const [query, setQuery] = useState('')\r\n const withSearch = searchable ?? list.length > 10\r\n const visible = useMemo(() => {\r\n const q = query.trim().toLowerCase()\r\n return q ? list.filter((o) => o.label.toLowerCase().includes(q) \|\| o.description?.toLowerCase().includes(q)) : list\r\n }, [list, query])\r\n const [active, setActive] = useState(0)\r\n const searchRef = useRef<HTMLInputElement>(null)\r\n const chosen = list.find((o) => o.value === value)\r\n\r\n // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n useEffect(() => {\r\n if (!p.open) return\r\n setQuery('')\r\n setActive(Math.max(0, list.findIndex((o) => (multiple ? picked.includes(o.value) : o.value === value))))\r\n if (withSearch) setTimeout(() => searchRef.current?.focus(), 0)\r\n }, [p.open]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n // O item ativo fica sempre à vista ao navegar com o teclado.\r\n useEffect(() => {\r\n if (p.open) p.panelRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n }, [active, p.open, p.panelRef])\r\n\r\n const choose = (o: SelectOption) => {\r\n if (o.disabled) return\r\n if (multiple) {\r\n // Marca ou desmarca, sem fechar; a ordem é a das opções.\r\n const set = new Set(picked)\r\n if (set.has(o.value)) set.delete(o.value)\r\n else set.add(o.value)\r\n const next = list.filter((x) => set.has(x.value)).map((x) => x.value)\r\n if (controlledValues === undefined) setOwnValues(next)\r\n onValuesChange?.(next)\r\n return\r\n }\r\n p.close()\r\n p.triggerRef.current?.focus()\r\n if (o.value === value) return\r\n if (controlled === undefined) setOwn(o.value)\r\n onValueChange?.(o.value)\r\n if (onChange) {\r\n const target = { value: o.value, name } as HTMLSelectElement\r\n onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLSelectElement>)\r\n }\r\n }\r\n\r\n const keys = (e: React.KeyboardEvent) => {\r\n if (!p.open) {\r\n if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n e.preventDefault()\r\n p.setOpen(true)\r\n }\r\n return\r\n }\r\n if (e.key === 'Escape') {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n p.close()\r\n p.triggerRef.current?.focus()\r\n } else if (e.key === 'ArrowDown') {\r\n e.preventDefault()\r\n setActive((i) => Math.min(visible.length - 1, i + 1))\r\n } else if (e.key === 'ArrowUp') {\r\n e.preventDefault()\r\n setActive((i) => Math.max(0, i - 1))\r\n } else if (e.key === 'Home') {\r\n e.preventDefault()\r\n setActive(0)\r\n } else if (e.key === 'End') {\r\n e.preventDefault()\r\n setActive(visible.length - 1)\r\n } else if (e.key === 'Enter') {\r\n e.preventDefault()\r\n const o = visible[active]\r\n if (o) choose(o)\r\n } else if (e.key === 'Tab') {\r\n p.close()\r\n } else if (!withSearch && e.key.length === 1) {\r\n // Sem pesquisa: a letra salta para a primeira opção que começa por ela.\r\n const i = visible.findIndex((o) => o.label.toLowerCase().startsWith(e.key.toLowerCase()))\r\n if (i >= 0) setActive(i)\r\n }\r\n }\r\n\r\n const pill = variant === 'pill'\r\n const pickedOptions = list.filter((o) => picked.includes(o.value))\r\n const multiText =\r\n allLabel && list.length > 0 && pickedOptions.length === list.length ? allLabel : pickedOptions.map((o) => o.label).join(', ')\r\n const showsPlaceholder = multiple\r\n ? pickedOptions.length === 0\r\n : !chosen \|\| (chosen.value === '' && placeholder !== undefined && emptyOption === undefined)\r\n const buttonText = multiple\r\n ? showsPlaceholder ? (placeholder ?? '') : multiText\r\n : showsPlaceholder ? (placeholder ?? chosen?.label ?? '') : chosen?.label\r\n\r\n return (\r\n <div className={`relative min-w-0 ${className}`} onKeyDown={keys}>\r\n <button\r\n ref={p.triggerRef}\r\n id={id ?? field.id}\r\n type=\"button\"\r\n disabled={disabled}\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={p.open}\r\n aria-label={ariaLabel}\r\n aria-labelledby={ariaLabelledBy}\r\n aria-invalid={invalid \|\| undefined}\r\n aria-required={(required ?? field.required) \|\| undefined}\r\n onClick={(e) => {\r\n // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n e.stopPropagation()\r\n p.setOpen((o) => !o)\r\n }}\r\n className={\r\n pill\r\n ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}`\r\n : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? 'h-[38px]' : 'h-control'} ${fieldBoxClasses}`\r\n }\r\n >\r\n <span className={`truncate ${showsPlaceholder && !pill ? 'text-muted-foreground/70' : ''}`}>\r\n {buttonText}\r\n </span>\r\n <ChevronDownIcon size={14} className={`shrink-0 ${pill ? 'opacity-60' : 'text-muted-foreground'}`} />\r\n </button>\r\n {name && <input type=\"hidden\" name={name} value={multiple ? picked.join(',') : value} />}\r\n {p.open &&\r\n createPortal(\r\n <div ref={p.panelRef} style={p.style} className={PANEL_CLASS} onClick={(e) => e.stopPropagation()} onKeyDown={keys}>\r\n {withSearch && (\r\n <div className=\"px-2 pt-0.5 pb-1\">\r\n <input\r\n ref={searchRef}\r\n type=\"search\"\r\n value={query}\r\n onChange={(e) => {\r\n setQuery(e.target.value)\r\n setActive(0)\r\n }}\r\n placeholder={L.search}\r\n aria-label={L.searchIn.replace('{label}', ariaLabel ?? '')}\r\n className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n />\r\n </div>\r\n )}\r\n <ul role=\"listbox\" aria-label={ariaLabel} aria-multiselectable={multiple \|\| undefined}>\r\n {visible.length === 0 && <li className=\"px-3 py-2 text-slate-400\">{L.noResults}</li>}\r\n {visible.map((o, i) => {\r\n const selected = multiple ? picked.includes(o.value) : o.value === value\r\n return (\r\n <li\r\n key={o.value \|\| '__empty'}\r\n role=\"option\"\r\n aria-selected={selected}\r\n aria-disabled={o.disabled \|\| undefined}\r\n data-index={i}\r\n onMouseEnter={() => setActive(i)}\r\n onClick={() => choose(o)}\r\n className={`${itemClass(i === active)} ${o.disabled ? 'cursor-not-allowed opacity-50' : ''}`}\r\n >\r\n <span className=\"min-w-0 flex-1\">\r\n <span className={`block truncate ${selected ? 'font-semibold' : ''} ${o.value === '' ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.label}</span>\r\n {o.description && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.description}</span>}\r\n </span>\r\n <span className=\"w-4 shrink-0\">{selected && <Check />}</span>\r\n </li>\r\n )\r\n })}\r\n </ul>\r\n </div>,\r\n dialogContainer ?? document.body,\r\n )}\r\n </div>\r\n )\r\n})\r\n\r\nexport default SelectInput\r\nexport { SelectInput }\r\n"],"names":["SelectInput"],"mappings":"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"}
1	+ {"version":3,"file":"SelectInput.js","sources":["../../../../../../src/v1/primitives/forms/SelectInput/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldBoxClasses, useField } from '../field'\r\nimport Checkbox from '../Checkbox/Checkbox'\r\nimport { PANEL_CLASS, itemClass, useFloatingPanel } from '../../../capabilities/overlay/useFloatingPanel'\r\nimport { useDialogContainer } from '../../../components/overlays/Dialog/Dialog'\r\n\r\nexport interface SelectOption {\r\n value: string\r\n label: string\r\n /** Texto pequeno por baixo do rótulo, na lista. /\r\n description?: string\r\n /* Um número à direita da linha, na lista (ex: quantos registos esta opção daria, como nos filtros facetados). /\r\n count?: number\r\n disabled?: boolean\r\n}\r\n\r\nexport interface SelectInputLabels {\r\n /* Texto da caixa de pesquisa. /\r\n search: string\r\n /* Nome da caixa de pesquisa para leitores de ecrã; \"{label}\" é o nome do campo. /\r\n searchIn: string\r\n noResults: string\r\n /* Com `selectionActions`: escolhe todas as opções (com pesquisa, só as que ela mostra). /\r\n selectAll: string\r\n /* Com `selectionActions` e uma pesquisa escrita: escolhe só as opções do resultado. /\r\n selectResults: string\r\n /* Com `selectionActions`: desfaz a escolha. /\r\n clear: string\r\n /\r\n Com `multiple`: o texto do botão com mais de uma opção escolhida, em vez dos rótulos separados por vírgula.\r\n * \"{n}\" é o número de escolhidas (ex: \"{n} selecionados\"). Sem ele, mostram-se os rótulos.\r\n /\r\n selectedCount?: string\r\n}\r\n\r\nexport const DEFAULT_SELECT_LABELS: SelectInputLabels = {\r\n search: 'Search…',\r\n searchIn: 'Search in {label}',\r\n noResults: 'No results',\r\n selectAll: 'Select all',\r\n selectResults: 'Select all (results)',\r\n clear: 'Clear',\r\n}\r\n\r\n/* Sem acentos nem maiúsculas: \"Guimarães\" e \"GUIMARAES\" são o mesmo para a pesquisa. /\r\nconst plain = (text: string): string => text.normalize('NFD').replace(/\\p{M}/gu, '').toLowerCase()\r\n\r\nexport interface SelectInputProps {\r\n /* A opção escolhida (controlado). `''` = nenhuma. /\r\n value?: string\r\n defaultValue?: string\r\n /* As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. /\r\n options?: readonly (string \| SelectOption)[]\r\n /* Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). /\r\n children?: React.ReactNode\r\n /* Recebe o valor escolhido. /\r\n onValueChange?: (value: string) => void\r\n /* Como no `<select>`: `e.target.value` é o valor escolhido. /\r\n onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void\r\n /* Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). /\r\n placeholder?: string\r\n /* O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. /\r\n placeholderOption?: boolean\r\n /* Primeira opção vazia para desfazer a escolha (ex: \"Todas\"). /\r\n emptyOption?: string\r\n /* Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. /\r\n searchable?: boolean\r\n disabled?: boolean\r\n required?: boolean\r\n /* Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). /\r\n invalid?: boolean\r\n id?: string\r\n /* Nome no formulário (vai num campo escondido). /\r\n name?: string\r\n 'aria-label'?: string\r\n 'aria-labelledby'?: string\r\n /* `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. /\r\n variant?: 'field' \| 'pill'\r\n /* Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). /\r\n pillClassName?: string\r\n /* 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). /\r\n tall?: boolean\r\n labels?: Partial<SelectInputLabels>\r\n /* Classes da caixa à volta (ex: a largura). /\r\n className?: string\r\n /\r\n Escolha múltipla: cada opção leva ✓ e a lista fica aberta a marcar e desmarcar.\r\n * Usa `values` / `onValuesChange` em vez de `value` / `onValueChange`.\r\n /\r\n multiple?: boolean\r\n /* As escolhidas, com `multiple` (controlado). /\r\n values?: string[]\r\n defaultValues?: string[]\r\n /* Recebe as escolhidas, com `multiple`, pela ordem das opções. /\r\n onValuesChange?: (values: string[]) => void\r\n /* Com `multiple`: o texto do botão quando estão todas escolhidas (ex: \"Todos os tipos\"). /\r\n allLabel?: string\r\n /\r\n Com `multiple`: no topo da lista, \"Selecionar todos\" (ou \"…(resultado)\", com uma pesquisa escrita — só as\r\n * opções que ela mostra) e \"Limpar\". Para listas longas, como as dos filtros.\r\n /\r\n selectionActions?: boolean\r\n /\r\n Com `multiple`: cada opção leva a caixa de marcar da biblioteca (`Checkbox`) à esquerda, em vez do visto à\r\n * direita — o aspeto das listas de filtros. Marcar continua a ser clicar na linha.\r\n /\r\n checkboxes?: boolean\r\n}\r\n\r\nconst noop = () => {}\r\n\r\nconst Check = () => (\r\n <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n <path d=\"M20 6 9 17l-5-5\" />\r\n </svg>\r\n)\r\n\r\n/* As `<option>` dos filhos como opções (aceita também `<optgroup>`, achatado). /\r\nfunction optionsFromChildren(children: React.ReactNode): SelectOption[] {\r\n const out: SelectOption[] = []\r\n React.Children.forEach(children, (child) => {\r\n if (!React.isValidElement(child)) return\r\n const props = child.props as { value?: unknown; children?: React.ReactNode; disabled?: boolean }\r\n if (child.type === 'optgroup') return out.push(...optionsFromChildren(props.children))\r\n if (child.type !== 'option') return\r\n const text = React.Children.toArray(props.children).join('')\r\n out.push({ value: props.value !== undefined ? String(props.value) : text, label: text, disabled: props.disabled })\r\n })\r\n return out\r\n}\r\n\r\n/\r\n Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o\r\n * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.\r\n \r\n Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.\r\n \r\n Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta\r\n * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).\r\n \r\n Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`\r\n * acrescenta uma primeira opção vazia.\r\n /\r\nconst SelectInput = forwardRef<HTMLButtonElement, SelectInputProps>(function SelectInput(\r\n {\r\n value: controlled,\r\n defaultValue = '',\r\n options,\r\n children,\r\n onValueChange,\r\n onChange,\r\n placeholder,\r\n placeholderOption = true,\r\n emptyOption,\r\n searchable,\r\n disabled = false,\r\n required,\r\n invalid,\r\n id,\r\n name,\r\n 'aria-label': ariaLabel,\r\n 'aria-labelledby': ariaLabelledBy,\r\n variant = 'field',\r\n pillClassName = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n tall = false,\r\n labels,\r\n className = '',\r\n multiple = false,\r\n values: controlledValues,\r\n defaultValues = [],\r\n onValuesChange,\r\n allLabel,\r\n selectionActions = false,\r\n checkboxes = false,\r\n },\r\n ref,\r\n) {\r\n const L = { ...DEFAULT_SELECT_LABELS, ...labels }\r\n const field = useField()\r\n const p = useFloatingPanel('left')\r\n // Dentro de um Dialog a lista abre na janela: no body ficava por baixo dela (z-200)\r\n // e o resto da página está inert — a lista abria mas não se via nem se clicava.\r\n const dialogContainer = useDialogContainer()\r\n useImperativeHandle(ref, () => p.triggerRef.current as HTMLButtonElement)\r\n\r\n const [own, setOwn] = useState(defaultValue)\r\n const value = controlled ?? own\r\n const [ownValues, setOwnValues] = useState(defaultValues)\r\n const picked = controlledValues ?? ownValues\r\n\r\n const list = useMemo<SelectOption[]>(() => {\r\n const base = options ? options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) : optionsFromChildren(children)\r\n // Na escolha múltipla não há opção vazia: desfazer é desmarcar.\r\n if (multiple) return base\r\n const empty = emptyOption ?? (placeholder !== undefined && placeholderOption ? placeholder : undefined)\r\n return empty !== undefined && !base.some((o) => o.value === '') ? [{ value: '', label: empty }, ...base] : base\r\n }, [options, children, emptyOption, placeholder, placeholderOption, multiple])\r\n\r\n const [query, setQuery] = useState('')\r\n const withSearch = searchable ?? list.length > 10\r\n const visible = useMemo(() => {\r\n const q = plain(query.trim())\r\n return q ? list.filter((o) => plain(o.label).includes(q) \|\| (o.description ? plain(o.description).includes(q) : false)) : list\r\n }, [list, query])\r\n const [active, setActive] = useState(0)\r\n const searchRef = useRef<HTMLInputElement>(null)\r\n const chosen = list.find((o) => o.value === value)\r\n\r\n // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n useEffect(() => {\r\n if (!p.open) return\r\n setQuery('')\r\n setActive(Math.max(0, list.findIndex((o) => (multiple ? picked.includes(o.value) : o.value === value))))\r\n if (withSearch) setTimeout(() => searchRef.current?.focus(), 0)\r\n }, [p.open]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n // O item ativo fica sempre à vista ao navegar com o teclado.\r\n useEffect(() => {\r\n if (p.open) p.panelRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n }, [active, p.open, p.panelRef])\r\n\r\n /* Escolhe várias de uma vez (ou nenhuma), pela ordem das opções. */\r\n const setPicked = (next: string[]) => {\r\n if (controlledValues === undefined) setOwnValues(next)\r\n onValuesChange?.(next)\r\n }\r\n\r\n const choose = (o: SelectOption) => {\r\n if (o.disabled) return\r\n if (multiple) {\r\n // Marca ou desmarca, sem fechar; a ordem é a das opções.\r\n const set = new Set(picked)\r\n if (set.has(o.value)) set.delete(o.value)\r\n else set.add(o.value)\r\n const next = list.filter((x) => set.has(x.value)).map((x) => x.value)\r\n if (controlledValues === undefined) setOwnValues(next)\r\n onValuesChange?.(next)\r\n return\r\n }\r\n p.close()\r\n p.triggerRef.current?.focus()\r\n if (o.value === value) return\r\n if (controlled === undefined) setOwn(o.value)\r\n onValueChange?.(o.value)\r\n if (onChange) {\r\n const target = { value: o.value, name } as HTMLSelectElement\r\n onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLSelectElement>)\r\n }\r\n }\r\n\r\n const keys = (e: React.KeyboardEvent) => {\r\n if (!p.open) {\r\n if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n e.preventDefault()\r\n p.setOpen(true)\r\n }\r\n return\r\n }\r\n if (e.key === 'Escape') {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n p.close()\r\n p.triggerRef.current?.focus()\r\n } else if (e.key === 'ArrowDown') {\r\n e.preventDefault()\r\n setActive((i) => Math.min(visible.length - 1, i + 1))\r\n } else if (e.key === 'ArrowUp') {\r\n e.preventDefault()\r\n setActive((i) => Math.max(0, i - 1))\r\n } else if (e.key === 'Home') {\r\n e.preventDefault()\r\n setActive(0)\r\n } else if (e.key === 'End') {\r\n e.preventDefault()\r\n setActive(visible.length - 1)\r\n } else if (e.key === 'Enter') {\r\n e.preventDefault()\r\n const o = visible[active]\r\n if (o) choose(o)\r\n } else if (e.key === 'Tab') {\r\n p.close()\r\n } else if (!withSearch && e.key.length === 1) {\r\n // Sem pesquisa: a letra salta para a primeira opção que começa por ela.\r\n const i = visible.findIndex((o) => o.label.toLowerCase().startsWith(e.key.toLowerCase()))\r\n if (i >= 0) setActive(i)\r\n }\r\n }\r\n\r\n const pill = variant === 'pill'\r\n const withBoxes = multiple && checkboxes\r\n const pickedOptions = list.filter((o) => picked.includes(o.value))\r\n const multiText =\r\n allLabel && list.length > 0 && pickedOptions.length === list.length\r\n ? allLabel\r\n : L.selectedCount && pickedOptions.length > 1\r\n ? L.selectedCount.replace('{n}', String(pickedOptions.length))\r\n : pickedOptions.map((o) => o.label).join(', ')\r\n const showsPlaceholder = multiple\r\n ? pickedOptions.length === 0\r\n : !chosen \|\| (chosen.value === '' && placeholder !== undefined && emptyOption === undefined)\r\n const buttonText = multiple\r\n ? showsPlaceholder ? (placeholder ?? '') : multiText\r\n : showsPlaceholder ? (placeholder ?? chosen?.label ?? '') : chosen?.label\r\n\r\n return (\r\n <div className={`relative min-w-0 ${className}`} onKeyDown={keys}>\r\n <button\r\n ref={p.triggerRef}\r\n id={id ?? field.id}\r\n type=\"button\"\r\n disabled={disabled}\r\n aria-haspopup=\"listbox\"\r\n aria-expanded={p.open}\r\n aria-label={ariaLabel}\r\n aria-labelledby={ariaLabelledBy}\r\n aria-invalid={invalid \|\| undefined}\r\n aria-required={(required ?? field.required) \|\| undefined}\r\n onClick={(e) => {\r\n // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n e.stopPropagation()\r\n p.setOpen((o) => !o)\r\n }}\r\n className={\r\n pill\r\n ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}`\r\n : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? 'h-[38px]' : 'h-control'} ${fieldBoxClasses}`\r\n }\r\n >\r\n <span className={`truncate ${showsPlaceholder && !pill ? 'text-muted-foreground/70' : ''}`}>\r\n {buttonText}\r\n </span>\r\n <ChevronDownIcon size={14} className={`shrink-0 ${pill ? 'opacity-60' : 'text-muted-foreground'}`} />\r\n </button>\r\n {name && <input type=\"hidden\" name={name} value={multiple ? picked.join(',') : value} />}\r\n {p.open &&\r\n createPortal(\r\n <div ref={p.panelRef} style={p.style} className={PANEL_CLASS} onClick={(e) => e.stopPropagation()} onKeyDown={keys}>\r\n {withSearch && (\r\n <div className=\"px-2 pt-0.5 pb-1\">\r\n <input\r\n ref={searchRef}\r\n type=\"search\"\r\n value={query}\r\n onChange={(e) => {\r\n setQuery(e.target.value)\r\n setActive(0)\r\n }}\r\n placeholder={L.search}\r\n aria-label={L.searchIn.replace('{label}', ariaLabel ?? '')}\r\n className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n />\r\n </div>\r\n )}\r\n {multiple && selectionActions && (\r\n <div className=\"flex items-center justify-between px-3 pb-1 text-xs\">\r\n <button\r\n type=\"button\"\r\n disabled={!visible.some((o) => !o.disabled)}\r\n onClick={() => {\r\n const add = visible.filter((o) => !o.disabled).map((o) => o.value)\r\n const set = new Set([...picked, ...add])\r\n setPicked(list.filter((x) => set.has(x.value)).map((x) => x.value))\r\n }}\r\n className=\"text-proef-blue hover:underline disabled:opacity-40 dark:text-sky-300\"\r\n >\r\n {query.trim() ? L.selectResults : L.selectAll}\r\n </button>\r\n <button\r\n type=\"button\"\r\n disabled={picked.length === 0}\r\n onClick={() => setPicked([])}\r\n className=\"text-proef-blue hover:underline disabled:opacity-40 dark:text-sky-300\"\r\n >\r\n {L.clear}\r\n </button>\r\n </div>\r\n )}\r\n <ul role=\"listbox\" aria-label={ariaLabel} aria-multiselectable={multiple \|\| undefined}>\r\n {visible.length === 0 && <li className=\"px-3 py-2 text-slate-400\">{L.noResults}</li>}\r\n {visible.map((o, i) => {\r\n const selected = multiple ? picked.includes(o.value) : o.value === value\r\n return (\r\n <li\r\n key={o.value \|\| '__empty'}\r\n role=\"option\"\r\n aria-selected={selected}\r\n aria-disabled={o.disabled \|\| undefined}\r\n data-index={i}\r\n onMouseEnter={() => setActive(i)}\r\n onClick={() => choose(o)}\r\n className={`${itemClass(i === active)} ${o.disabled ? 'cursor-not-allowed opacity-50' : ''}`}\r\n >\r\n {withBoxes && <Checkbox checked={selected} onChange={noop} tabIndex={-1} aria-hidden className=\"pointer-events-none\" />}\r\n <span className=\"min-w-0 flex-1\">\r\n <span className={`block truncate ${selected ? 'font-semibold' : ''} ${o.value === '' ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.label}</span>\r\n {o.description && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.description}</span>}\r\n </span>\r\n {o.count !== undefined && (\r\n <span className=\"shrink-0 text-xs tabular-nums text-slate-500 dark:text-slate-400\">{o.count.toLocaleString()}</span>\r\n )}\r\n {!withBoxes && <span className=\"w-4 shrink-0\">{selected && <Check />}</span>}\r\n </li>\r\n )\r\n })}\r\n </ul>\r\n </div>,\r\n dialogContainer ?? document.body,\r\n )}\r\n </div>\r\n )\r\n})\r\n\r\nexport default SelectInput\r\nexport { SelectInput }\r\n"],"names":["SelectInput"],"mappings":"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"}

package/dist/types/v1/primitives/forms/SelectInput/SelectInput.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ export interface SelectOption {
     label: string;
     /** Texto pequeno por baixo do rótulo, na lista. */
     description?: string;
+    /** Um número à direita da linha, na lista (ex: quantos registos esta opção daria, como nos filtros facetados). */
+    count?: number;
     disabled?: boolean;
 }
 export interface SelectInputLabels {
@@ -12,6 +14,17 @@ export interface SelectInputLabels {
     /** Nome da caixa de pesquisa para leitores de ecrã; "{label}" é o nome do campo. */
     searchIn: string;
     noResults: string;
+    /** Com `selectionActions`: escolhe todas as opções (com pesquisa, só as que ela mostra). */
+    selectAll: string;
+    /** Com `selectionActions` e uma pesquisa escrita: escolhe só as opções do resultado. */
+    selectResults: string;
+    /** Com `selectionActions`: desfaz a escolha. */
+    clear: string;
+    /**
+     * Com `multiple`: o texto do botão com mais de uma opção escolhida, em vez dos rótulos separados por vírgula.
+     * "{n}" é o número de escolhidas (ex: "{n} selecionados"). Sem ele, mostram-se os rótulos.
+     */
+    selectedCount?: string;
 }
 export declare const DEFAULT_SELECT_LABELS: SelectInputLabels;
 export interface SelectInputProps {
@@ -64,6 +77,16 @@ export interface SelectInputProps {
     onValuesChange?: (values: string[]) => void;
     /** Com `multiple`: o texto do botão quando estão todas escolhidas (ex: "Todos os tipos"). */
     allLabel?: string;
+    /**
+     * Com `multiple`: no topo da lista, "Selecionar todos" (ou "…(resultado)", com uma pesquisa escrita — só as
+     * opções que ela mostra) e "Limpar". Para listas longas, como as dos filtros.
+     */
+    selectionActions?: boolean;
+    /**
+     * Com `multiple`: cada opção leva a caixa de marcar da biblioteca (`Checkbox`) à esquerda, em vez do visto à
+     * direita — o aspeto das listas de filtros. Marcar continua a ser clicar na linha.
+     */
+    checkboxes?: boolean;
 }
 /**
  * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@proef/common-ui",
-  "version": "2.6.4",
+  "version": "2.6.5",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",