@sito/dashboard 0.0.71 → 0.0.73

package/README.md

@@ -94,11 +94,33 @@ export function UsersTable() {
 - `CheckInput` is controlled with `checked` (not `value`).
 - `FileInput` `onChange` receives the native input event; read files from `e.currentTarget.files`.
 
+## `TableOptionsProvider` Initial State
+
+`TableOptionsProvider` supports optional `initialState` configuration:
+
+```tsx
+import { SortOrder, TableOptionsProvider } from "@sito/dashboard";
+
+<TableOptionsProvider
+  defaultHiddenColumns={["email"]}
+  initialState={{
+    currentPage: 0,
+    pageSize: 50,
+    pageSizes: [25, 50, 100],
+    sortingBy: "createdAt",
+    sortingOrder: SortOrder.ASC,
+    filters: { status: "active" },
+  }}
+>
+  <UsersTable />
+</TableOptionsProvider>;
+```
+
 ## Core `Table` Props
 
 | Prop                        | Type                                                              | Required | Description                                                                 |
 | --------------------------- | ----------------------------------------------------------------- | -------- | --------------------------------------------------------------------------- |
-| `entity`                    | `string`                                                          | Yes      | Entity name used by internal table state.                                   |
+| `entity`                    | `string`                                                          | No       | Optional logical entity identifier.                                         |
 | `data`                      | `TRow[]`                                                          | Yes      | Rows to render. `TRow` must extend `BaseDto` and include `id`.              |
 | `columns`                   | `ColumnType<TRow>[]`                                              | No       | Column definitions.                                                         |
 | `actions`                   | `(row: TRow) => ActionType<TRow>[]`                               | No       | Per-row action factory.                                                     |
@@ -106,6 +128,8 @@ export function UsersTable() {
 | `toolbar`                   | `ReactNode`                                                       | No       | Extra content rendered in the table header.                                 |
 | `isLoading`                 | `boolean`                                                         | No       | Loading state for table UI.                                                 |
 | `filterOptions`             | `FilterOptions`                                                   | No       | Extra options passed to filter behavior/components.                         |
+| `canHideColumns`            | `boolean`                                                         | No       | Shows column visibility menu in the header.                                 |
+| `canReset`                  | `boolean`                                                         | No       | Shows table reset button in the header.                                     |
 | `onSort`                    | `(prop: string, sortOrder: SortOrder) => void`                    | No       | Sort callback when a sortable column is toggled.                            |
 | `onRowSelect`               | `(row: TRow, selected: boolean) => void`                          | No       | Row selection callback.                                                     |
 | `onSelectedRowsChange`      | `(rows: TRow[]) => void`                                          | No       | Callback with selected rows.                                                |
@@ -121,8 +145,8 @@ export function UsersTable() {
 
 Main package exports include:
 
-- Components: `Action`, `Actions`, `ActionsDropdown`, `Badge`, `Button`, `Chip`, `Dropdown`, `Form`, `IconButton`, `Loading`, `SvgIcons`, `Table`, `Tooltip`.
-- Providers: `FiltersProvider`, `TableOptionsProvider`, `TranslationProvider` and related hooks/types.
+- Components: `Action`, `Actions`, `ActionsDropdown`, `Badge`, `Button`, `Chip`, `Dropdown`, `IconButton`, `Loading`, `SvgIcons`, `Table`, `Tooltip`, `TextInput`, `SelectInput`, `AutocompleteInput`, `CheckInput`, `FileInput`.
+- Providers: `FiltersProvider`, `TableOptionsProvider`, `TranslationProvider` and related hooks/types (`useFilters`, `useTableOptions`, `useTranslation`).
 - Utilities and models: `FilterTypes`, `SortOrder`, `BaseDto`, and query/filter helpers from `lib`.
 
 ## Development Setup

package/dist/{FiltersProvider-DVMj0LV0.cjs → FiltersProvider-CnrF3xWV.cjs}

@@ -1 +1 @@
-"use strict";const p=require("react/jsx-runtime"),i=require("react"),f=require("./TableOptionsProvider-i4uVLLwH.cjs");var n=(e=>(e[e.update=0]="update",e[e.reset=1]="reset",e))(n||{});const o=e=>{if(e){const t={};return Object.keys(e)?.forEach(r=>{t[r]={value:e[r]}}),t}return{}};function a(e,t){const{type:s}=t;switch(s){case n.reset:return{};case n.update:{const{toUpdate:r}=t;return{...e,...r}}default:return e}}const d=i.createContext(void 0),v=e=>{const{children:t}=e,{filters:s}=f.useTableOptions(),[r,u]=i.useReducer(a,o(s));i.useEffect(()=>{u({type:n.reset});const c=o(s);Object.keys(c).length&&u({type:n.update,toUpdate:c})},[s]);const l=i.useMemo(()=>({currentFilters:r,setCurrentFilters:u}),[r]);return p.jsx(d.Provider,{value:l,children:t})},x=()=>{const e=i.useContext(d);if(!e)throw new Error("filtersContext must be used within a Provider");return e};exports.FiltersActions=n;exports.FiltersProvider=v;exports.filtersReducer=a;exports.initializer=o;exports.useFilters=x;
+"use strict";const p=require("react/jsx-runtime"),i=require("react"),f=require("./TableOptionsProvider-bPNtpa4V.cjs");var n=(e=>(e[e.update=0]="update",e[e.reset=1]="reset",e))(n||{});const o=e=>{if(e){const t={};return Object.keys(e)?.forEach(r=>{t[r]={value:e[r]}}),t}return{}};function a(e,t){const{type:s}=t;switch(s){case n.reset:return{};case n.update:{const{toUpdate:r}=t;return{...e,...r}}default:return e}}const d=i.createContext(void 0),v=e=>{const{children:t}=e,{filters:s}=f.useTableOptions(),[r,u]=i.useReducer(a,o(s));i.useEffect(()=>{u({type:n.reset});const c=o(s);Object.keys(c).length&&u({type:n.update,toUpdate:c})},[s]);const l=i.useMemo(()=>({currentFilters:r,setCurrentFilters:u}),[r]);return p.jsx(d.Provider,{value:l,children:t})},x=()=>{const e=i.useContext(d);if(!e)throw new Error("filtersContext must be used within a Provider");return e};exports.FiltersActions=n;exports.FiltersProvider=v;exports.filtersReducer=a;exports.initializer=o;exports.useFilters=x;

package/dist/{FiltersProvider-BV023mmu.js → FiltersProvider-iOkSYSFZ.js}

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { useReducer as p, useEffect as f, useMemo as l, createContext as m, useContext as v } from "react";
-import { u as x } from "./TableOptionsProvider-BgnISoXx.js";
+import { u as x } from "./TableOptionsProvider-Dzq4dOu8.js";
 var n = /* @__PURE__ */ ((e) => (e[e.update = 0] = "update", e[e.reset = 1] = "reset", e))(n || {});
 const a = (e) => {
   if (e) {

package/dist/FiltersProvider.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FiltersProvider-DVMj0LV0.cjs");exports.FiltersActions=e.FiltersActions;exports.FiltersProvider=e.FiltersProvider;exports.filtersReducer=e.filtersReducer;exports.initializer=e.initializer;exports.useFilters=e.useFilters;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./FiltersProvider-CnrF3xWV.cjs");exports.FiltersActions=e.FiltersActions;exports.FiltersProvider=e.FiltersProvider;exports.filtersReducer=e.filtersReducer;exports.initializer=e.initializer;exports.useFilters=e.useFilters;

package/dist/FiltersProvider.js

@@ -1,4 +1,4 @@
-import { a as e, F as r, f as a, i as t, u as l } from "./FiltersProvider-BV023mmu.js";
+import { a as e, F as r, f as a, i as t, u as l } from "./FiltersProvider-iOkSYSFZ.js";
 export {
   e as FiltersActions,
   r as FiltersProvider,

package/dist/Form.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectInput-j7riQ8_P.cjs"),t=require("./FileInput-CqzVk1gQ.cjs");exports.AutocompleteInput=e.AutocompleteInput;exports.CheckInput=e.CheckInput;exports.SelectInput=e.SelectInput;exports.State=e.State;exports.TextInput=e.TextInput;exports.helperTextStateClassName=e.helperTextStateClassName;exports.inputStateClassName=e.inputStateClassName;exports.labelStateClassName=e.labelStateClassName;exports.FileInput=t.FileInput;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SelectInput-B9EEu-h1.cjs"),t=require("./FileInput-CqzVk1gQ.cjs");exports.AutocompleteInput=e.AutocompleteInput;exports.CheckInput=e.CheckInput;exports.SelectInput=e.SelectInput;exports.State=e.State;exports.TextInput=e.TextInput;exports.helperTextStateClassName=e.helperTextStateClassName;exports.inputStateClassName=e.inputStateClassName;exports.labelStateClassName=e.labelStateClassName;exports.FileInput=t.FileInput;

package/dist/Form.js

@@ -1,4 +1,4 @@
-import { A as e, C as s, S as l, a as p, T as u, h as m, i as n, l as o } from "./SelectInput-B0Ffd39D.js";
+import { A as e, C as s, S as l, a as p, T as u, h as m, i as n, l as o } from "./SelectInput-H421nC22.js";
 import { F as r } from "./FileInput-Cr4TxWUg.js";
 export {
   e as AutocompleteInput,

package/dist/SelectInput-B9EEu-h1.cjs

@@ -0,0 +1 @@
+var X=require("./SelectInput.css");const l=require("react/jsx-runtime"),r=require("react"),K=require("./Chip-D17UJHW6.cjs"),_=require("./IconButton-CVnmT2E9.cjs"),z=require("./Close-O9P7wJGf.cjs"),G=r.forwardRef(function(s,p){const{state:f,value:t,onChange:a,options:j=[],name:$="",id:S="",label:k="",containerClassName:A="",inputContainerClassName:v="",helperText:I="",placeholder:T="",multiple:h=!1,...D}=s,[u,m]=r.useState("");r.useEffect(()=>{if(!h&&t&&!Array.isArray(t)){m(String(t.value??t.name??""));return}m("")},[h,t]);const[g,x]=r.useState(!1),[C,y]=r.useState(-1),o=r.useMemo(()=>j.filter(e=>{const n=String(e.value??e.name).toLowerCase().includes(u?.toLowerCase());return Array.isArray(t)&&t.length?n&&!t.some(d=>d.id===e.id):t&&!Array.isArray(t)?n&&t.id!==e.id:n}),[j,t,u]);r.useEffect(()=>{if(!g||!o.length){y(-1);return}y(0)},[g,o]);const c=r.useRef(null),N=r.useRef(null),[E,w]=r.useState(!1),i=r.useRef(null);r.useEffect(()=>{const e=d=>{c.current&&!c.current.contains(d.target)&&x(!1)},n=d=>{d.key==="Escape"&&x(!1)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",n),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",n)}},[]);const b=r.useCallback(e=>{m(e.target.value)},[]),R=r.useCallback(e=>{e?h?(m(""),Array.isArray(t)&&t.length?a([...t,e]):a([e])):(m(String(e.name??e.value??"")),a(e)):a(null),x(!1)},[h,a,t]),B=r.useCallback(e=>{if(!o.length){e.key==="Escape"&&x(!1);return}if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),!g){x(!0),y(0);return}y(n=>{const d=n>=0?n:0;return e.key==="ArrowDown"?(d+1+o.length)%o.length:(d-1+o.length)%o.length});return}if(e.key==="Enter"&&g){e.preventDefault();const n=C>=0?C:0;R(o[n]);return}e.key==="Escape"&&g&&(e.preventDefault(),x(!1))},[R,C,g,o]),F=r.useCallback(e=>{if(!Array.isArray(t)){a(null);return}const n=t.filter((d,P)=>P!==e);n.length?a(n):a(null)},[a,t]),H=r.useCallback(()=>{Array.isArray(t)&&a([t[0]])},[a,t]);return r.useLayoutEffect(()=>{const e=i.current?.offsetWidth??0,n=c.current?.offsetWidth??0;w(e>n*.4)},[t]),l.jsxs("div",{className:`autocomplete-input-container ${A}`,ref:c,children:[l.jsxs("div",{className:"autocomplete-value-input-container",children:[l.jsx(U,{state:f,name:$,id:S,value:u,onChange:b,placeholder:T,helperText:I,onFocus:()=>x(!0),onKeyDown:B,label:k,containerClassName:`autocomplete-text-input ${v}`,ref:p??N,...D,children:!h&&t&&!Array.isArray(t)&&(t.value||t.name)&&l.jsx(_.IconButton,{icon:l.jsx(z.Close,{}),className:"autocomplete-delete-button",onClick:e=>{R(),e.stopPropagation()}})}),h&&Array.isArray(t)&&t.length?l.jsx("ul",{ref:i,className:"autocomplete-value-container",children:E?l.jsxs(l.Fragment,{children:[l.jsx("li",{children:l.jsx(K.Chip,{text:t[0]?.value??t[0]?.name,onDelete:e=>{F(0),e.stopPropagation()}})}),t.length>1&&l.jsx("li",{children:l.jsx(K.Chip,{text:`+${t.length-1}`,onDelete:e=>{H(),e.stopPropagation()}})})]}):t.map((e,n)=>l.jsx("li",{children:l.jsx(K.Chip,{text:String(e.value??e.name),onDelete:d=>{F(n),d.stopPropagation()}})},e.id??e.value??e.name))}):null]}),g&&l.jsx("ul",{className:"autocomplete-suggestions-container",style:{width:c.current?.offsetWidth},children:o.map(e=>l.jsx("li",{className:`autocomplete-suggestion-item ${e.id===o[C]?.id?"highlighted":""}`,onMouseEnter:()=>y(o.findIndex(n=>n.id===e.id)),onClick:n=>{R(e),n.stopPropagation()},children:e.value??e.name},e.id??e.value??e.name))})]})});var L=(s=>(s.error="error",s.good="good",s.default="default",s))(L||{});const q=s=>{switch(s){case"error":return"input-error";case"good":return"input-good";default:return"input-normal"}},O=s=>{switch(s){case"error":return"input-label-error";case"good":return"input-label-good";default:return"input-label-normal"}},M=s=>{switch(s){case"error":return"input-helper-text-error";case"good":return"input-helper-text-good";default:return"input-helper-text-normal"}},J=r.forwardRef(function(s,p){const{checked:f,onChange:t,name:a="",id:j="",label:$="",state:S=L.default,containerClassName:k="",inputClassName:A="",labelClassName:v="",...I}=s;return l.jsxs("label",{className:`input-check-container ${k}`,children:[l.jsx("input",{id:j,ref:p,name:a,type:"checkbox",checked:f,onChange:t,className:`input-check ${q(S)} ${A}`,...I}),l.jsx("span",{className:`input-check-label ${O(S)} ${v}`,children:$})]})}),W=s=>s==null?!1:Array.isArray(s)?s.length>0:`${s}`.length>0,U=r.forwardRef(function(s,p){const{children:f,state:t=L.default,label:a="",containerClassName:j="",inputClassName:$="",labelClassName:S="",helperText:k="",helperTextClassName:A="",value:v,defaultValue:I,onChange:T,onFocus:h,onBlur:D,...u}=s,m=v!==void 0,[g,x]=r.useState(()=>W(I)),[C,y]=r.useState(!1),o=m?W(v):g,c=u.type==="date",N=!!u.placeholder||C||c,E=b=>{m||x(b.currentTarget.value.length>0),T?.(b)},w=b=>{C||y(!0),h?.(b)},i=b=>{C||y(!0),D?.(b)};return l.jsxs("div",{className:`text-input-container ${j}`,children:[l.jsx("input",{ref:p,defaultValue:I,onChange:E,onFocus:w,onBlur:i,...m?{value:v}:{},className:`text-input ${q(t)} ${$} ${o?"has-value":""} ${u.placeholder?"has-placeholder":""} ${N?"keep-label-up":""}`,...u}),!!a&&l.jsxs("label",{htmlFor:u.id,className:`text-input-label ${O(t)} ${S}`,children:[a,u.required?" *":""]}),f,!!k&&l.jsx("p",{className:`text-input-helper-text ${M(t)} ${A}`,children:k})]})}),Q=r.forwardRef(function(s,p){const{value:f,onChange:t,options:a,containerClassName:j="",inputClassName:$="",labelClassName:S="",helperText:k="",helperTextClassName:A="",label:v="",placeholder:I="",name:T="",id:h="",state:D=L.default,native:u=!0,disabled:m,required:g,autoFocus:x,children:C,...y}=s,o=r.useRef(null),[c,N]=r.useState(!1),[E,w]=r.useState(-1),i=r.useMemo(()=>a.findIndex(e=>String(e.id)===String(f??a[0]?.id??"")),[a,f]),b=r.useMemo(()=>i>=0?a[i]:void 0,[a,i]);r.useEffect(()=>{if(!(u||!c)){if(!a.length){w(-1);return}w(i>=0?i:0)}},[u,a.length,i,c]),r.useEffect(()=>{if(u)return;const e=n=>{o.current&&!o.current.contains(n.target)&&N(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[u]);const R=r.useCallback(e=>{p&&(typeof p=="function"?p(e):p.current=e)},[p]),B=r.useCallback(e=>{if(!t)return;const n={target:{value:String(e)},currentTarget:{value:String(e)}};t(n)},[t]),F=r.useCallback(e=>{const n=a[e];n&&(B(n.id),N(!1))},[B,a]),H=r.useCallback(e=>{if(a.length){if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),!c){N(!0);const n=i>=0?i:0;w(n);return}w(n=>{const d=n>=0?n:i;return e.key==="ArrowDown"?(d+1+a.length)%a.length:(d-1+a.length)%a.length});return}if(e.key==="Enter"){if(!c){e.preventDefault(),N(!0),w(i>=0?i:0);return}e.preventDefault(),F(E>=0?E:0);return}e.key==="Escape"&&c&&(e.preventDefault(),N(!1))}},[E,a,F,i,c]);return u?l.jsxs("div",{className:`select-input-container ${j}`,children:[l.jsx("select",{...y,id:h,ref:R,name:T,value:f,onChange:t,className:`select-input ${q(D)} peer ${$}`,children:a?.map(e=>l.jsx("option",{value:e.id,children:e.value??e.name??e.id},e.id))}),l.jsx("label",{htmlFor:h,className:`select-input-label ${O(D)} ${S}`,children:v}),C,k&&l.jsx("p",{className:`select-input-helper-text ${M(D)} ${A}`,children:k})]}):l.jsxs("div",{ref:o,className:`select-input-container ${j}`,children:[l.jsx("select",{...y,ref:R,name:T,id:h,value:f,onChange:t,className:"select-input-native-hidden",tabIndex:-1,"aria-hidden":!0,children:a?.map(e=>l.jsx("option",{value:e.id,children:e.value??e.name??e.id},e.id))}),l.jsx(U,{id:h,name:T,state:D,value:String(b?.value??b?.name??""),readOnly:!0,label:v,helperText:k,containerClassName:"select-input-text-container",inputClassName:`select-input-text ${$}`,labelClassName:S,helperTextClassName:A,placeholder:I,disabled:m,required:g,autoFocus:x,onClick:()=>N(e=>!e),onKeyDown:H,onFocus:()=>N(!0),role:"combobox","aria-expanded":c,"aria-haspopup":"listbox",children:C}),c&&l.jsx("ul",{className:"select-input-options-container",role:"listbox",children:a.map((e,n)=>{const d=String(e.id)===String(f),P=n===E;return l.jsx("li",{role:"option","aria-selected":d,className:`select-input-option-item ${P?"highlighted":""}`,onMouseEnter:()=>w(n),onClick:V=>{F(n),V.stopPropagation()},children:e.value??e.name??e.id},e.id)})})]})});exports.AutocompleteInput=G;exports.CheckInput=J;exports.SelectInput=Q;exports.State=L;exports.TextInput=U;exports.helperTextStateClassName=M;exports.inputStateClassName=q;exports.labelStateClassName=O;