@saptanshuwanjari/react-component-library 0.1.6 → 0.1.8

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 (7) hide show
  1. package/dist/index.d.mts +14 -2
  2. package/dist/index.d.ts +14 -2
  3. package/dist/index.js +137 -97
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +138 -98
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -133,12 +133,17 @@ interface RootProps<TData, TValue> {
133
133
  data: TData[];
134
134
  filters?: FilterOption[];
135
135
  defaultViewMode?: ViewMode;
136
+ viewMode?: ViewMode;
137
+ onViewModeChange?: (mode: ViewMode) => void;
136
138
  defaultPageSize?: number;
137
139
  children: React.ReactNode;
138
140
  }
139
- declare function Root<TData, TValue>({ columns, data, filters, defaultViewMode, defaultPageSize, children, }: RootProps<TData, TValue>): react_jsx_runtime.JSX.Element;
141
+ declare function Root<TData, TValue>({ columns, data, filters, defaultViewMode, viewMode: controlledViewMode, onViewModeChange: controlledOnViewModeChange, defaultPageSize, children, }: RootProps<TData, TValue>): react_jsx_runtime.JSX.Element;
140
142
 
141
- declare function Toolbar(): react_jsx_runtime.JSX.Element;
143
+ interface ToolbarProps {
144
+ viewOptions?: React.ReactNode;
145
+ }
146
+ declare function Toolbar({ viewOptions }?: ToolbarProps): react_jsx_runtime.JSX.Element;
142
147
 
143
148
  interface ContentProps {
144
149
  renderCard?: (item: any, index: number) => React.ReactNode;
@@ -158,12 +163,19 @@ declare function GridView<TData = any>({ renderCard, columns, gap }: GridViewPro
158
163
 
159
164
  declare function Pagination(): react_jsx_runtime.JSX.Element;
160
165
 
166
+ interface ViewOptionsProps {
167
+ viewMode?: ViewMode;
168
+ onViewModeChange?: (mode: ViewMode) => void;
169
+ }
170
+ declare function ViewOptions({ viewMode: propViewMode, onViewModeChange: propOnViewModeChange }: ViewOptionsProps): react_jsx_runtime.JSX.Element;
171
+
161
172
  declare const DataTable: typeof Root & {
162
173
  Toolbar: typeof Toolbar;
163
174
  Content: typeof Content;
164
175
  TableView: typeof TableView;
165
176
  GridView: typeof GridView;
166
177
  Pagination: typeof Pagination;
178
+ ViewOptions: typeof ViewOptions;
167
179
  };
168
180
 
169
181
  declare function cn(...inputs: ClassValue[]): string;
package/dist/index.d.ts CHANGED
@@ -133,12 +133,17 @@ interface RootProps<TData, TValue> {
133
133
  data: TData[];
134
134
  filters?: FilterOption[];
135
135
  defaultViewMode?: ViewMode;
136
+ viewMode?: ViewMode;
137
+ onViewModeChange?: (mode: ViewMode) => void;
136
138
  defaultPageSize?: number;
137
139
  children: React.ReactNode;
138
140
  }
139
- declare function Root<TData, TValue>({ columns, data, filters, defaultViewMode, defaultPageSize, children, }: RootProps<TData, TValue>): react_jsx_runtime.JSX.Element;
141
+ declare function Root<TData, TValue>({ columns, data, filters, defaultViewMode, viewMode: controlledViewMode, onViewModeChange: controlledOnViewModeChange, defaultPageSize, children, }: RootProps<TData, TValue>): react_jsx_runtime.JSX.Element;
140
142
 
141
- declare function Toolbar(): react_jsx_runtime.JSX.Element;
143
+ interface ToolbarProps {
144
+ viewOptions?: React.ReactNode;
145
+ }
146
+ declare function Toolbar({ viewOptions }?: ToolbarProps): react_jsx_runtime.JSX.Element;
142
147
 
143
148
  interface ContentProps {
144
149
  renderCard?: (item: any, index: number) => React.ReactNode;
@@ -158,12 +163,19 @@ declare function GridView<TData = any>({ renderCard, columns, gap }: GridViewPro
158
163
 
159
164
  declare function Pagination(): react_jsx_runtime.JSX.Element;
160
165
 
166
+ interface ViewOptionsProps {
167
+ viewMode?: ViewMode;
168
+ onViewModeChange?: (mode: ViewMode) => void;
169
+ }
170
+ declare function ViewOptions({ viewMode: propViewMode, onViewModeChange: propOnViewModeChange }: ViewOptionsProps): react_jsx_runtime.JSX.Element;
171
+
161
172
  declare const DataTable: typeof Root & {
162
173
  Toolbar: typeof Toolbar;
163
174
  Content: typeof Content;
164
175
  TableView: typeof TableView;
165
176
  GridView: typeof GridView;
166
177
  Pagination: typeof Pagination;
178
+ ViewOptions: typeof ViewOptions;
167
179
  };
168
180
 
169
181
  declare function cn(...inputs: ClassValue[]): string;
package/dist/index.js CHANGED
@@ -598,16 +598,21 @@ function Root2({
598
598
  data,
599
599
  filters = [],
600
600
  defaultViewMode = "table",
601
+ viewMode: controlledViewMode,
602
+ onViewModeChange: controlledOnViewModeChange,
601
603
  defaultPageSize = 10,
602
604
  children
603
605
  }) {
604
- const [viewMode, setViewMode] = React2.useState(defaultViewMode);
606
+ const [internalViewMode, setInternalViewMode] = React2.useState(defaultViewMode);
605
607
  const [sorting, setSorting] = React2.useState([]);
606
608
  const [columnFilters, setColumnFilters] = React2.useState([]);
607
609
  const [columnVisibility, setColumnVisibility] = React2.useState({});
608
610
  const [globalFilter, setGlobalFilter] = React2.useState("");
609
611
  const [pagination, setPagination] = React2.useState({ pageIndex: 0, pageSize: defaultPageSize });
610
612
  const [activeFilters, setActiveFilters] = React2.useState({});
613
+ const isControlled = controlledViewMode !== void 0 && controlledOnViewModeChange !== void 0;
614
+ const viewMode = isControlled ? controlledViewMode : internalViewMode;
615
+ const setViewMode = isControlled ? controlledOnViewModeChange : setInternalViewMode;
611
616
  const filteredData = React2.useMemo(() => {
612
617
  if (Object.keys(activeFilters).length === 0) return data;
613
618
  return data.filter((row) => {
@@ -1020,8 +1025,41 @@ function Checkbox2({
1020
1025
  }
1021
1026
  );
1022
1027
  }
1023
- function Toolbar() {
1024
- const { table, viewMode, setViewMode, filters, activeFilters, setActiveFilters } = useDataTable();
1028
+ function ViewOptions({ viewMode: propViewMode, onViewModeChange: propOnViewModeChange }) {
1029
+ let contextStr;
1030
+ try {
1031
+ contextStr = useDataTable();
1032
+ } catch (e) {
1033
+ }
1034
+ const mode = propViewMode ?? contextStr?.viewMode ?? "table";
1035
+ const setMode = propOnViewModeChange ?? contextStr?.setViewMode ?? (() => {
1036
+ });
1037
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded-md bg-background", children: [
1038
+ /* @__PURE__ */ jsxRuntime.jsx(
1039
+ Button6,
1040
+ {
1041
+ variant: mode === "table" ? "secondary" : "ghost",
1042
+ size: "sm",
1043
+ onClick: () => setMode("table"),
1044
+ className: "rounded-r-none h-8 px-2 lg:px-3",
1045
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { className: "h-4 w-4" })
1046
+ }
1047
+ ),
1048
+ /* @__PURE__ */ jsxRuntime.jsx(
1049
+ Button6,
1050
+ {
1051
+ variant: mode === "grid" ? "secondary" : "ghost",
1052
+ size: "sm",
1053
+ onClick: () => setMode("grid"),
1054
+ className: "rounded-l-none h-8 px-2 lg:px-3",
1055
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" })
1056
+ }
1057
+ )
1058
+ ] });
1059
+ }
1060
+ var view_options_default = ViewOptions;
1061
+ function Toolbar({ viewOptions } = {}) {
1062
+ const { table, filters, activeFilters, setActiveFilters } = useDataTable();
1025
1063
  const handleFilterChange = (filterId, value) => {
1026
1064
  setActiveFilters((prev) => ({
1027
1065
  ...prev,
@@ -1038,115 +1076,116 @@ function Toolbar() {
1038
1076
  return { ...prev, [filterId]: newValues };
1039
1077
  });
1040
1078
  };
1041
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
1042
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx(
1079
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 py-4", children: [
1080
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
1043
1081
  Input5,
1044
1082
  {
1045
1083
  placeholder: "Search...",
1046
1084
  value: table.getState().globalFilter ?? "",
1047
1085
  onChange: (e) => table.setGlobalFilter(e.target.value),
1048
- className: "w-full"
1086
+ className: "w-full max-w-sm"
1049
1087
  }
1050
1088
  ) }),
1051
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
1052
- filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
1053
- /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button6, { variant: "outline", size: "sm", children: [
1054
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { className: "h-4 w-4 mr-2" }),
1055
- "Filters"
1056
- ] }) }),
1057
- /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
1058
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm", children: "Filters" }),
1059
- filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
1060
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: filter.label }),
1061
- filter.multiSelect ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
1062
- /* @__PURE__ */ jsxRuntime.jsx(
1063
- Checkbox2,
1064
- {
1065
- id: `${filter.id}-${option.value}`,
1066
- checked: Array.isArray(activeFilters[filter.id]) && activeFilters[filter.id].includes(option.value),
1067
- onCheckedChange: () => handleMultiFilterToggle(filter.id, option.value)
1068
- }
1069
- ),
1089
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
1090
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1", children: [
1091
+ filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: filter.multiSelect ? /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
1092
+ /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button6, { variant: "outline", size: "sm", className: "h-8 border-dashed", children: [
1093
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SlidersHorizontal, { className: "h-4 w-4 mr-2" }),
1094
+ filter.label,
1095
+ activeFilters[filter.id] && (Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length > 0 : true) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 rounded-sm bg-primary px-1 text-xs text-primary-foreground", children: Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length : 1 })
1096
+ ] }) }),
1097
+ /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-1", children: [
1098
+ filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
1099
+ "div",
1100
+ {
1101
+ className: "flex items-center space-x-2 rounded-sm px-2 py-1.5 hover:bg-accent cursor-pointer",
1102
+ onClick: () => handleMultiFilterToggle(filter.id, option.value),
1103
+ children: [
1104
+ /* @__PURE__ */ jsxRuntime.jsx(
1105
+ Checkbox2,
1106
+ {
1107
+ id: `${filter.id}-${option.value}`,
1108
+ checked: Array.isArray(activeFilters[filter.id]) && activeFilters[filter.id].includes(option.value),
1109
+ onCheckedChange: () => handleMultiFilterToggle(filter.id, option.value)
1110
+ }
1111
+ ),
1112
+ /* @__PURE__ */ jsxRuntime.jsx(
1113
+ "label",
1114
+ {
1115
+ className: "text-sm cursor-pointer flex-1",
1116
+ children: option.label
1117
+ }
1118
+ )
1119
+ ]
1120
+ },
1121
+ option.value
1122
+ )),
1123
+ activeFilters[filter.id] && (Array.isArray(activeFilters[filter.id]) ? activeFilters[filter.id].length > 0 : false) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1124
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-border my-1" }),
1070
1125
  /* @__PURE__ */ jsxRuntime.jsx(
1071
- "label",
1126
+ "div",
1072
1127
  {
1073
- htmlFor: `${filter.id}-${option.value}`,
1074
- className: "text-sm cursor-pointer",
1075
- children: option.label
1128
+ className: "px-2 py-1.5 text-center text-sm cursor-pointer hover:bg-accent rounded-sm",
1129
+ onClick: () => setActiveFilters((prev) => ({ ...prev, [filter.id]: [] })),
1130
+ children: "Clear filters"
1076
1131
  }
1077
1132
  )
1078
- ] }, option.value)) }) : /* @__PURE__ */ jsxRuntime.jsxs(
1079
- Select2,
1080
- {
1081
- value: activeFilters[filter.id] || "all",
1082
- onValueChange: (value) => handleFilterChange(filter.id, value),
1083
- children: [
1084
- /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, { placeholder: filter.placeholder || "Select..." }) }),
1085
- /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
1086
- /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: "all", children: "All" }),
1087
- filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: option.value, children: option.label }, option.value))
1088
- ] })
1089
- ]
1090
- }
1091
- )
1092
- ] }, filter.id))
1093
- ] }) })
1094
- ] }),
1095
- /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
1096
- /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button6, { variant: "outline", size: "sm", children: [
1097
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4 mr-2" }),
1098
- "Columns"
1099
- ] }) }),
1100
- /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-56", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
1101
- /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm", children: "Toggle Columns" }),
1102
- table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
1103
- /* @__PURE__ */ jsxRuntime.jsx(
1104
- Checkbox2,
1105
- {
1106
- id: column.id,
1107
- checked: column.getIsVisible(),
1108
- onCheckedChange: (value) => column.toggleVisibility(!!value)
1109
- }
1110
- ),
1111
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: column.id, className: "text-sm cursor-pointer", children: column.id })
1112
- ] }, column.id))
1113
- ] }) })
1114
- ] }),
1115
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border rounded-md", children: [
1116
- /* @__PURE__ */ jsxRuntime.jsx(
1117
- Button6,
1118
- {
1119
- variant: viewMode === "table" ? "default" : "ghost",
1120
- size: "sm",
1121
- onClick: () => setViewMode("table"),
1122
- className: "rounded-r-none",
1123
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { className: "h-4 w-4" })
1124
- }
1125
- ),
1126
- /* @__PURE__ */ jsxRuntime.jsx(
1127
- Button6,
1128
- {
1129
- variant: viewMode === "grid" ? "default" : "ghost",
1130
- size: "sm",
1131
- onClick: () => setViewMode("grid"),
1132
- className: "rounded-l-none",
1133
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { className: "h-4 w-4" })
1134
- }
1135
- )
1136
- ] }),
1137
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
1138
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground", children: "Rows" }),
1139
- /* @__PURE__ */ jsxRuntime.jsxs(
1133
+ ] })
1134
+ ] }) })
1135
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
1140
1136
  Select2,
1141
1137
  {
1142
- value: String(table.getState().pagination.pageSize),
1143
- onValueChange: (value) => table.setPageSize(Number(value)),
1138
+ value: activeFilters[filter.id] || "all",
1139
+ onValueChange: (value) => handleFilterChange(filter.id, value),
1144
1140
  children: [
1145
- /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-20", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, {}) }),
1146
- /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: String(size), children: size }, size)) })
1141
+ /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 w-[150px] border-dashed", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, { placeholder: filter.placeholder || filter.label }) }),
1142
+ /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
1143
+ /* @__PURE__ */ jsxRuntime.jsxs(SelectItem2, { value: "all", children: [
1144
+ "All ",
1145
+ filter.label
1146
+ ] }),
1147
+ filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: option.value, children: option.label }, option.value))
1148
+ ] })
1147
1149
  ]
1148
1150
  }
1149
- )
1151
+ ) }, filter.id)),
1152
+ /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
1153
+ /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button6, { variant: "outline", size: "sm", className: "h-8 ml-auto sm:ml-0", children: [
1154
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4 mr-2" }),
1155
+ "Columns"
1156
+ ] }) }),
1157
+ /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-56", align: "end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
1158
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm", children: "Toggle Columns" }),
1159
+ table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
1160
+ /* @__PURE__ */ jsxRuntime.jsx(
1161
+ Checkbox2,
1162
+ {
1163
+ id: column.id,
1164
+ checked: column.getIsVisible(),
1165
+ onCheckedChange: (value) => column.toggleVisibility(!!value)
1166
+ }
1167
+ ),
1168
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: column.id, className: "text-sm cursor-pointer", children: column.id })
1169
+ ] }, column.id))
1170
+ ] }) })
1171
+ ] })
1172
+ ] }),
1173
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
1174
+ viewOptions ? viewOptions : /* @__PURE__ */ jsxRuntime.jsx(ViewOptions, {}),
1175
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
1176
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm text-muted-foreground whitespace-nowrap hidden sm:inline-block", children: "Rows" }),
1177
+ /* @__PURE__ */ jsxRuntime.jsxs(
1178
+ Select2,
1179
+ {
1180
+ value: String(table.getState().pagination.pageSize),
1181
+ onValueChange: (value) => table.setPageSize(Number(value)),
1182
+ children: [
1183
+ /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-16 h-8", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue2, {}) }),
1184
+ /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem2, { value: String(size), children: size }, size)) })
1185
+ ]
1186
+ }
1187
+ )
1188
+ ] })
1150
1189
  ] })
1151
1190
  ] })
1152
1191
  ] });
@@ -1344,7 +1383,8 @@ var DataTable = Object.assign(root_default2, {
1344
1383
  Content: content_default,
1345
1384
  TableView: table_view_default,
1346
1385
  GridView: grid_view_default,
1347
- Pagination: pagination_default
1386
+ Pagination: pagination_default,
1387
+ ViewOptions: view_options_default
1348
1388
  });
1349
1389
  var data_table_default = DataTable;
1350
1390