@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.61

package/{src/histogram/Histogram.module.css → css/_histogram.css}

@@ -21,14 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .histogram {
-    .histoLabel {
-      --tw-gradient-from: var(--color) var(--tw-gradient-from-position);
-      --tw-gradient-to: color-mix(in lab, var(--color) 20%, var(--fabric-bg))
-        var(--tw-gradient-to-position);
-      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-
+@layer components {
+  .fabric-histogram {
+    .fabric-histoLabel {
       background-color: color(from var(--color) srgb r g b / 5%);
 
       &:hover {
@@ -36,21 +31,29 @@
       }
 
       &[data-disabled="true"] {
-        --color: theme(colors.tint.300);
+        --color: var(--color-tint-300);
 
-        color: theme(colors.tint.600);
+        color: var(--color-tint-600);
       }
     }
 
-    .histoBar {
+    .fabric-histoBar {
+      --tw-gradient-stops: var(
+          --tw-gradient-via-stops,
+          var(--tw-gradient-position)
+        ),
+        var(--color) var(--tw-gradient-from-position),
+        color-mix(in lab, var(--color) 20%, var(--fabric-bg))
+          var(--tw-gradient-to-position);
+
       box-shadow: -2px 0 0 var(--color) inset;
 
-      :global([dir="rtl"]) & {
+      @variant rtl {
         box-shadow: 2px 0 0 var(--color) inset;
       }
     }
 
-    .histoBadge {
+    .fabric-histoBadge {
       background-color: color(from var(--color) srgb r g b / 15%);
     }
   }

package/{dist/esm/tree/types.js → css/styles.css}

@@ -1,12 +1,10 @@
-'use client';
-
 /*
  * React Fabric
  * @version: 1.0.0
  *
  *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Copyright (c) 2025 Adarsh Pastakia
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
  * and associated documentation files (the "Software"), to deal in the Software without restriction,
@@ -23,7 +21,4 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
-var iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";
-
-export { iconCollapseAll, iconExpandAll };
+@import "./_histogram.css";

package/dist/cjs/checklist/CheckList.js

@@ -40,12 +40,12 @@ var CheckItem = function CheckItem(_ref) {
       "data-type": "checkbox",
       className: "ax-checkList__checkbox",
       "data-selected": selected === 1,
-      icon: selected ? core.CoreIcons.checkboxInt : core.CoreIcons.checkboxOff
+      icon: selected ? "icon-[mdi--checkbox-marked]" : "icon-[mdi--checkbox-blank-outline]"
     }), allowNegative && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         "data-type": "multiple",
         className: "ax-checkList__checkbox",
-        icon: selected === 1 ? core.CoreIcons.expand : selected === -1 ? core.CoreIcons.collapse : core.CoreIcons.checkboxOff,
+        icon: selected === 1 ? "icon-[mdi--plus-box-outline]" : selected === -1 ? "icon-[mdi--minus-box-outline]" : "icon-[mdi--checkbox-blank-outline]",
         "data-selected": selected
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "ax-checkList__checkbox",
@@ -54,14 +54,14 @@ var CheckItem = function CheckItem(_ref) {
           onClick: function onClick(e) {
             return [(_onClick(id, false), e.stopPropagation())];
           },
-          icon: selected === 1 ? core.CoreIcons.expandActive : core.CoreIcons.expand,
+          icon: selected === 1 ? "icon-[mdi--plus-box]" : "icon-[mdi--plus-box-outline]",
           "data-selected": selected === 1
         }), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
           "data-type": "negative",
           onClick: function onClick(e) {
             return [(_onClick(id, true), e.stopPropagation())];
           },
-          icon: selected === -1 ? core.CoreIcons.collapseActive : core.CoreIcons.collapse,
+          icon: selected === -1 ? "icon-[mdi--minus-box]" : "icon-[mdi--minus-box-outline]",
           "data-selected": selected === -1
         })]
       })]
@@ -72,6 +72,29 @@ var CheckItem = function CheckItem(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread({}, badge))]
   }));
 };
+
+/**
+ * CheckList component to display a list of selectable items with checkboxes.
+ * It supports selection, deselection, and allows for negative selections.
+ *
+ * @param {CheckListProps} props - The properties for the CheckList component.
+ * @returns {JSX.Element} The rendered CheckList component.
+ *
+ * @example
+ * ```jsx
+ * <CheckList
+ *   items={[
+ *     { id: "1", label: "Item 1", icon: "icon1" },
+ *     { id: "2", label: "Item 2", icon: "icon2", badge: { text: "New" } },
+ *   ]}
+ *   maxCount={5}
+ *   allowNegative={true}
+ *   emptyMessage="No items available"
+ *   onChange={(selectedItems) => console.log(selectedItems)}
+ *   onClick={(itemId, isNegative) => console.log(itemId, isNegative)}
+ * />
+ * ```
+ */
 var CheckList = function CheckList(_ref2) {
   var _ref2$items = _ref2.items,
     items = _ref2$items === void 0 ? [] : _ref2$items,

package/dist/cjs/histogram/Histogram.js

@@ -8,19 +8,46 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var reactI18next = require('react-i18next');
-var Histogram_module = require('./Histogram.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["items", "total", "color", "sortBy", "emptyTitle", "emptyMessage", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var emptyIcon = "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
+/**
+ * Histogram component displays a bar chart of items with counts.
+ * It allows users to visualize the distribution of counts across different items.
+ * The component supports sorting, custom colors, and click handling for each item.
+ * It also provides an empty state when there are no items to display.
+ *
+ * @param {HistogramProps} props - The properties for the Histogram component.
+ * @returns {JSX.Element} - The rendered Histogram component.
+ *
+ * @example
+ * ```jsx
+ * <Histogram
+ *   items={[
+ *     { id: "1", label: "Item 1", count: 10 },
+ *     { id: "2", label: "Item 2", count: 20 },
+ *     { id: "3", label: "Item 3", count: 5, disabled: true },
+ *   ]}
+ *   total={30}
+ *   color="primary-500"
+ *   sortBy="count"
+ *   emptyTitle="No Data Available"
+ *   emptyMessage="Please check back later."
+ *   onClick={(id, negative) => console.log(`Clicked on ${id}`, negative ? "Negative" : "Positive")}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-histogram--docs}
+ */
 var Histogram = function Histogram(_ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     total = _ref.total,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
+    color = _ref$color === void 0 ? "primary-500" : _ref$color,
     _ref$sortBy = _ref.sortBy,
     sortBy = _ref$sortBy === void 0 ? "count" : _ref$sortBy,
     emptyTitle = _ref.emptyTitle,
@@ -39,10 +66,10 @@ var Histogram = function Histogram(_ref) {
     return items.sort(utilities.compareValues(sortBy === "label" ? "asc" : "desc", sortBy));
   }, [items, sortBy]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: Histogram_module.histogram
+    className: "fabric-histogram from-0% to-100%"
   }, aria), {}, {
     style: {
-      "--color": "var(--".concat(color, ")")
+      "--color": utilities.isColor(color) ? color : "var(--color-".concat(color, ")")
     },
     children: [sorted.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
       icon: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
@@ -52,16 +79,17 @@ var Histogram = function Histogram(_ref) {
       title: emptyTitle,
       message: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("histogram.empty")
     }), sorted === null || sorted === void 0 ? void 0 : sorted.map(function (item) {
+      var _item$total;
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         role: "none",
         "data-disabled": item.count === 0 || item.disabled,
-        className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", Histogram_module.histoLabel, (item.count === 0 || item.disabled) && "pointer-events-none"),
+        className: classNames("relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px", "fabric-histoLabel", (((_item$total = item.total) !== null && _item$total !== void 0 ? _item$total : item.count) === 0 || item.disabled) && "pointer-events-none"),
         "data-testid": item.id,
         onClick: function onClick(e) {
           return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id), e.stopPropagation()];
         },
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100%", Histogram_module.histoBar),
+          className: classNames("absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-linear-to-r rtl:bg-linear-to-l", "fabric-histoBar"),
           style: {
             width: "".concat(Math.min(item.count / maxTotal, 1) * 100, "%")
           }
@@ -70,7 +98,8 @@ var Histogram = function Histogram(_ref) {
           actions: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
             color: "danger",
             size: "sm",
-            icon: core.CoreIcons.funnelMinus,
+            stopPropagation: true,
+            icon: "icon-[mdi--filter-minus]",
             "aria-label": "Filter Negative",
             onClick: function onClick() {
               return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id, true);
@@ -78,7 +107,8 @@ var Histogram = function Histogram(_ref) {
           }, "negative"), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
             color: "primary",
             size: "sm",
-            icon: core.CoreIcons.funnelPlus,
+            stopPropagation: true,
+            icon: "icon-[mdi--filter-plus]",
             "aria-label": "Filter",
             onClick: function onClick() {
               return _onClick === null || _onClick === void 0 ? void 0 : _onClick(item.id);
@@ -86,7 +116,7 @@ var Histogram = function Histogram(_ref) {
           }, "positive")],
           children: item.label
         }), /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", Histogram_module.histoBadge),
+          className: classNames("z-1 rounded-full text-xs font-medium px-2 py-1 leading-none", "fabric-histoBadge"),
           children: utilities.Format.number(item.count)
         })]
       }, item.id);

package/dist/cjs/hooks/useFilteredList.js

@@ -6,15 +6,29 @@ var react = require('react');
 
 var filterList = function filterList(items) {
   var query = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  var matcher = arguments.length > 2 ? arguments[2] : undefined;
+  var matchAll = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var matcher = arguments.length > 3 ? arguments[3] : undefined;
   var newList = [];
   items.forEach(function (item) {
     if (matcher) {
       return (matcher === null || matcher === void 0 ? void 0 : matcher(item, query)) && newList.push(item);
     }
-    if (query && utilities.isString(query)) {
-      var _item$label;
-      if (utilities.matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), query)) {
+    if (query && utilities.isArray(query) && query.length > 0) {
+      if (matchAll && query.every(function (q) {
+        var _item$label;
+        return utilities.matchString((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : item.toString(), q);
+      })) {
+        return newList.push(item);
+      }
+      if (!matchAll && query.some(function (q) {
+        var _item$label2;
+        return utilities.matchString((_item$label2 = item.label) !== null && _item$label2 !== void 0 ? _item$label2 : item.toString(), q);
+      })) {
+        return newList.push(item);
+      }
+    } else if (query && utilities.isString(query)) {
+      var _item$label3;
+      if (utilities.matchString((_item$label3 = item.label) !== null && _item$label3 !== void 0 ? _item$label3 : item.toString(), query)) {
         return newList.push(item);
       }
     } else {
@@ -23,7 +37,69 @@ var filterList = function filterList(items) {
   });
   return newList;
 };
-var useFilteredList = function useFilteredList(items, matcher) {
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+
+function useFilteredList(items, matchAll, matcher) {
   var _useState = react.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
@@ -37,20 +113,22 @@ var useFilteredList = function useFilteredList(items, matcher) {
     _useTransition2 = _slicedToArray(_useTransition, 2),
     isSearching = _useTransition2[0],
     startTransition = _useTransition2[1];
-  var filterItems = react.useCallback(function (items, query) {
+  var matchingAll = typeof matchAll === "boolean" ? matchAll : true;
+  var matcherFn = typeof matchAll === "function" ? matchAll : matcher;
+  var filterItems = react.useCallback(function (items, query, matchingAll) {
     return startTransition(function () {
-      return setFilteredList(filterList(items, query, matcher));
+      return setFilteredList(filterList(items, query, matchingAll, matcherFn));
     });
   }, []);
   react.useEffect(function () {
-    if (query) filterItems(_items, query);else setFilteredList(items);
-  }, [query, _items]);
+    if (query) filterItems(_items, query, matchingAll);else setFilteredList(items);
+  }, [query, matchingAll, _items]);
   return {
     onSearch: setQuery,
     query: query,
     filteredList: filteredList,
     isSearching: isSearching
   };
-};
+}
 
 exports.useFilteredList = useFilteredList;

package/dist/cjs/hooks/usePagination.js

@@ -15,6 +15,26 @@ var makeRange = function makeRange(start, end) {
     return idx + start;
   });
 };
+
+/**
+ * Custom hook to manage pagination state and logic.
+ * It calculates the total number of pages, generates page ranges,
+ * and provides a way to change the current page.
+ * It also handles the transition of page changes to optimize performance.
+ *
+ * @param options - The pagination options including total records, current page, records per page, and change handler.
+ * @returns An object containing the current page, total pages, head label, ranges for pagination pills, and a function to change the page.
+ *
+ * @example
+ * ```jsx
+ * const { page, totalPages, headLabel, ranges, onPageChange } = usePagination({
+ *   totalRecords: 100,
+ *   currentPage: 0,
+ *   perPage: 10,
+ *   onChange: (newPage) => console.log("Page changed to:", newPage),
+ * });
+ * ```
+ */
 var usePagination = function usePagination(_ref) {
   var totalRecords = _ref.totalRecords,
     _ref$currentPage = _ref.currentPage,
@@ -58,9 +78,12 @@ var usePagination = function usePagination(_ref) {
 
   /** ***************** set page *******************/
   react.useEffect(function () {
-    setPage(Math.min(currentPage, totalPages - 1));
-    onChange === null || onChange === void 0 || onChange(Math.min(currentPage, totalPages - 1));
-  }, [currentPage, totalPages]);
+    if (totalRecords > -1) {
+      var actual = Math.min(currentPage, totalPages - 1);
+      setPage(actual);
+      actual !== currentPage && (onChange === null || onChange === void 0 ? void 0 : onChange(actual));
+    }
+  }, [currentPage, totalRecords, totalPages]);
   var headLabel = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "text-muted",
@@ -72,7 +95,7 @@ var usePagination = function usePagination(_ref) {
     startTransition(function () {
       return onChange === null || onChange === void 0 ? void 0 : onChange(page);
     });
-  }, []);
+  }, [onChange]);
   return {
     page: page,
     totalPages: totalPages,

package/dist/cjs/hooks/useSelectableList.js

@@ -6,6 +6,35 @@ var react = require('react');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Custom hook to manage selection of items in a list.
+ * It allows toggling selection state of items, handling both selected and non-selected states.
+ * The hook maintains a selection state and provides a function to toggle the selection of items.
+ * It also supports callbacks for when the selection changes or when an item is clicked.
+ *
+ * @param items - The list of items to manage selection for.
+ * @param selected - An array of item IDs that are currently selected.
+ * @param nonselected - An array of item IDs that are currently non-selected.
+ * @param onChange - Callback function that is called when the selection changes.
+ * @param onClick - Callback function that is called when an item is clicked.
+ * @returns An object containing the current selection state and a function to toggle selection of items.
+ *
+ * @example
+ * ```jsx
+ * const { selection, toggleSelection } = useSelectableList({
+ *   items: [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }],
+ *   selected: ['1'],
+ *   nonselected: ['2'],
+ *   onChange: (selectedIds, nonSelectedIds) => {
+ *     console.log('Selected:', selectedIds);
+ *     console.log('Non-selected:', nonSelectedIds);
+ *   },
+ *   onClick: (id, isNegative) => {
+ *     console.log(`Item ${id} clicked, isNegative: ${isNegative}`);
+ *   },
+ * });
+ * ```
+ */
 var useSelectableList = function useSelectableList(_ref) {
   var items = _ref.items,
     selected = _ref.selected,

package/dist/cjs/i18n/ar.json.js

@@ -36,6 +36,11 @@ var action = {
 	addFilter: "أضف عامل تصفية",
 	addFilterNot: "إضافة لا تصفية"
 };
+var data = {
+	tree: {
+		noItems: "لا توجد عناصر شجرة متوفرة"
+	}
+};
 var ar = {
 	label: label,
 	tree: tree,
@@ -43,11 +48,13 @@ var ar = {
 	json: json,
 	checkList: checkList,
 	histogram: histogram,
-	action: action
+	action: action,
+	data: data
 };
 
 exports.action = action;
 exports.checkList = checkList;
+exports.data = data;
 exports.datagrid = datagrid;
 exports.default = ar;
 exports.histogram = histogram;

package/dist/cjs/i18n/en.json.js

@@ -36,6 +36,11 @@ var action = {
 	addFilter: "Add Filter",
 	addFilterNot: "Add not Filter"
 };
+var data = {
+	tree: {
+		noItems: "No tree items available"
+	}
+};
 var en = {
 	label: label,
 	tree: tree,
@@ -43,11 +48,13 @@ var en = {
 	json: json,
 	checkList: checkList,
 	histogram: histogram,
-	action: action
+	action: action,
+	data: data
 };
 
 exports.action = action;
 exports.checkList = checkList;
+exports.data = data;
 exports.datagrid = datagrid;
 exports.default = en;
 exports.histogram = histogram;