@dashadmin/dash-components 1.3.25 → 1.3.26

package/dist/components/SearchableSelects/SearchableSelectCheckboxes.js

@@ -1 +1,290 @@
-import{Fragment as T,jsx as r,jsxs as g}from"react/jsx-runtime";import{Autocomplete as oe,Box as re,Checkbox as se,CircularProgress as R,TextField as ae}from"@mui/material";import le,{useEffect as i,useState as o}from"react";import ie from"@mui/icons-material/CheckBoxOutlineBlank";import ce from"@mui/icons-material/CheckBox";import{useAxios as ue}from"@dashadmin/dash-axios-hook";const de=r(ie,{fontSize:"small"}),pe=r(ce,{fontSize:"small"}),F=function({...L}){const{multiple:c,freeSolo:z,minSearch:B=3,timerSearch:D=500,checkboxes:S=!1,resource:w,selectLabel:v,renderText:a,queryFilter:J="q",defaultValues:f=null,elementKeyId:u="id",isEmpty:fe=!1,filter:K,isOptionEqualToValue:X=(e,n)=>n===e,renderAttribute:l=null,name:_,onChange:x,renderInputTextFieldProps:H,selectedIds:M,useDefaultSearch:k=!1,...Q}=L,[I,O]=o(!1),[s,b]=o(null),[h,W]=o(null),[y,j]=o(null),[d,C]=o(!1),[p,G]=o(null),N=f&&Array.isArray(f)?f.map(e=>e[u]?e[u]:e):c&&p?p:f,[U,A]=o(N),[m,P]=o(null),Y=ue();i(()=>{G(M)},[]);const V=(e,n)=>{Array.isArray(e)?(P(e),n==="onChange"&&A(e.map(t=>t[u]))):(P(e),n==="onChange"&&A(e[u]))},q=async()=>{C(!0);try{const e={[J]:h,...K,includes:U},{data:n}=await Y.get(w,{params:e});j(n.data)}catch(e){console.error(e)}finally{C(!1)}};i(()=>{q()},[]),i(()=>{h&&h!==""&&!k&&q()},[h]),i(()=>(y&&!d&&(s&&b([...s,...y.map(e=>({...e,key:"option"+e.id}))]),b(y.map(e=>({...e,key:"option"+e.id})))),()=>b([])),[y,d]);const[Z,$]=o(void 0),ee=(e,n=500)=>{clearTimeout(Z),$(setTimeout(()=>{e()},n))},ne=S?(e,n,{selected:t})=>{const{key:E,...te}=e;return g("li",{...te,children:[r(se,{icon:de,checkedIcon:pe,style:{marginRight:8},checked:t}),l&&!a?n[l]:a(n)]},n.key)}:(e,n)=>{const{key:t,...E}=e;return r(re,{component:"li",sx:{"& > img":{mr:2,flexShrink:0}},...E,children:l&&!a?n[l]:a(n)},n.key)};return i(()=>{if(c&&s&&p){const e=s.filter(n=>p.includes(n[u]));V(e,"selectedIds")}},[s,p,c]),i(()=>{x&&m&&x(null,m,null)},[m]),g(T,{children:[d&&!s?r(R,{color:"inherit",size:20}):r(T,{}),s&&r(oe,{multiple:c,freeSolo:z,loading:d&&I,...S&&{disableCloseOnSelect:!0},options:s,open:I,onOpen:()=>O(!0),onClose:()=>O(!1),value:m||(c?[]:null),isOptionEqualToValue:X,autoHighlight:!0,getOptionLabel:e=>l&&!a?e[l]:a?a(e):e,renderOption:ne,onChange:(e,n,t)=>{V(n,"onChange")},renderInput:e=>r(ae,{...e,label:v,variant:"outlined",onChange:n=>{if(k!==!0){const t=n.target.value;t&&t!==""&&t.length>=B&&ee(()=>W(t),D)}},InputProps:{...e.InputProps,autoComplete:"new-password",endAdornment:g(T,{children:[d?r(R,{color:"inherit",size:20}):null,e.InputProps.endAdornment]})},...H},e.id),...Q},"autocomplete-"+_)]})},Ae=le.memo(F,()=>!0);var Pe=F;export{Ae as MemoizedSearchableSelectCheckboxes,Pe as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Autocomplete,
+  Box,
+  Checkbox,
+  CircularProgress,
+  TextField
+} from "@mui/material";
+import React, { useEffect, useState } from "react";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import { useAxios } from "dash-axios-hook";
+const icon = /* @__PURE__ */ jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon = /* @__PURE__ */ jsx(CheckBoxIcon, { fontSize: "small" });
+const SearchableSelectCheckboxes = function WrappedAutoComplete(_a) {
+  var props = __objRest(_a, []);
+  const _a2 = props, {
+    multiple,
+    freeSolo,
+    minSearch = 3,
+    timerSearch = 500,
+    checkboxes = false,
+    resource,
+    selectLabel,
+    renderText,
+    queryFilter = "q",
+    defaultValues = null,
+    elementKeyId = "id",
+    isEmpty = false,
+    filter,
+    isOptionEqualToValue = (option, value) => value === option,
+    renderAttribute = null,
+    name,
+    onChange,
+    renderInputTextFieldProps,
+    selectedIds,
+    useDefaultSearch = false
+  } = _a2, rest = __objRest(_a2, [
+    "multiple",
+    "freeSolo",
+    "minSearch",
+    "timerSearch",
+    "checkboxes",
+    "resource",
+    "selectLabel",
+    "renderText",
+    "queryFilter",
+    "defaultValues",
+    "elementKeyId",
+    "isEmpty",
+    "filter",
+    "isOptionEqualToValue",
+    "renderAttribute",
+    "name",
+    "onChange",
+    "renderInputTextFieldProps",
+    "selectedIds",
+    "useDefaultSearch"
+  ]);
+  const [open, setOpen] = useState(false);
+  const [parsedOptions, setParsedOptions] = useState(null);
+  const [q, setQ] = useState(null);
+  const [resourceData, setResourceData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [initialSelectedIds, setInitalSelectedIds] = useState(null);
+  const initialIncludes = defaultValues && Array.isArray(defaultValues) ? defaultValues.map((element) => element[elementKeyId] ? element[elementKeyId] : element) : multiple && initialSelectedIds ? initialSelectedIds : defaultValues;
+  const [includes, setIncludes] = useState(initialIncludes);
+  const [controlledValue, setControlledValue] = useState(null);
+  const axios = useAxios();
+  useEffect(() => {
+    setInitalSelectedIds(selectedIds);
+  }, []);
+  const updateControlledValue = (val, origin) => {
+    if (Array.isArray(val)) {
+      setControlledValue(val);
+      if (origin === "onChange") {
+        setIncludes(val.map((v) => v[elementKeyId]));
+      }
+    } else {
+      setControlledValue(val);
+      if (origin === "onChange") {
+        setIncludes(val[elementKeyId]);
+      }
+    }
+  };
+  const search = () => __async(null, null, function* () {
+    setIsLoading(true);
+    try {
+      const params = __spreadProps(__spreadValues({ [queryFilter]: q }, filter), { includes });
+      const { data } = yield axios.get(resource, {
+        params
+      });
+      setResourceData(data.data);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setIsLoading(false);
+    }
+  });
+  useEffect(() => {
+    search();
+  }, []);
+  useEffect(() => {
+    if (q && q !== "" && !useDefaultSearch) {
+      search();
+    }
+  }, [q]);
+  useEffect(() => {
+    if (resourceData && !isLoading) {
+      if (parsedOptions)
+        setParsedOptions([
+          ...parsedOptions,
+          ...resourceData.map((ele) => {
+            return __spreadProps(__spreadValues({}, ele), { key: "option" + ele.id });
+          })
+        ]);
+      setParsedOptions(
+        resourceData.map((ele) => {
+          return __spreadProps(__spreadValues({}, ele), { key: "option" + ele.id });
+        })
+      );
+    }
+    return () => setParsedOptions([]);
+  }, [resourceData, isLoading]);
+  const [timeOutSearch, setTimeOutSearch] = useState(void 0);
+  const debounce = (fn, delay = 500) => {
+    clearTimeout(timeOutSearch);
+    setTimeOutSearch(
+      setTimeout(() => {
+        fn();
+      }, delay)
+    );
+  };
+  const checkboxRenderOptions = (p, option, { selected }) => {
+    const _a3 = p, { key } = _a3, r = __objRest(_a3, ["key"]);
+    return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({}, r), { children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          icon,
+          checkedIcon,
+          style: { marginRight: 8 },
+          checked: selected
+        }
+      ),
+      renderAttribute && !renderText ? option[renderAttribute] : renderText(option)
+    ] }), option.key);
+  };
+  const boxRenderOptions = (p, option) => {
+    const _a3 = p, { key } = _a3, newProps = __objRest(_a3, ["key"]);
+    return /* @__PURE__ */ jsx(
+      Box,
+      __spreadProps(__spreadValues({
+        component: "li",
+        sx: { "& > img": { mr: 2, flexShrink: 0 } }
+      }, newProps), {
+        children: renderAttribute && !renderText ? option[renderAttribute] : renderText(option)
+      }),
+      option.key
+    );
+  };
+  const _renderOption = checkboxes ? checkboxRenderOptions : boxRenderOptions;
+  useEffect(() => {
+    if (multiple && parsedOptions && initialSelectedIds) {
+      const values = parsedOptions.filter(
+        (option) => initialSelectedIds.includes(option[elementKeyId])
+      );
+      updateControlledValue(values, "selectedIds");
+    }
+  }, [parsedOptions, initialSelectedIds, multiple]);
+  useEffect(() => {
+    if (onChange && controlledValue) {
+      onChange(null, controlledValue, null);
+    }
+  }, [controlledValue]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoading && !parsedOptions ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }) : /* @__PURE__ */ jsx(Fragment, {}),
+    parsedOptions && /* @__PURE__ */ jsx(
+      Autocomplete,
+      __spreadValues(__spreadProps(__spreadValues({
+        multiple,
+        freeSolo,
+        loading: isLoading && open
+      }, checkboxes && { disableCloseOnSelect: true }), {
+        options: parsedOptions,
+        open,
+        onOpen: () => setOpen(true),
+        onClose: () => setOpen(false),
+        value: controlledValue ? controlledValue : multiple ? [] : null,
+        isOptionEqualToValue,
+        autoHighlight: true,
+        getOptionLabel: (option) => {
+          return renderAttribute && !renderText ? option[renderAttribute] : renderText ? renderText(option) : option;
+        },
+        renderOption: _renderOption,
+        onChange: (event, rawValue, _reason) => {
+          updateControlledValue(rawValue, "onChange");
+        },
+        renderInput: (params) => {
+          return /* @__PURE__ */ jsx(
+            TextField,
+            __spreadValues(__spreadProps(__spreadValues({}, params), {
+              label: selectLabel,
+              variant: "outlined",
+              onChange: (ev) => {
+                if (useDefaultSearch !== true) {
+                  const searchValue = ev.target.value;
+                  if (searchValue && searchValue !== "" && searchValue.length >= minSearch) {
+                    debounce(() => setQ(searchValue), timerSearch);
+                  }
+                }
+              },
+              InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+                autoComplete: "new-password",
+                endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  isLoading ? /* @__PURE__ */ jsx(CircularProgress, { color: "inherit", size: 20 }) : null,
+                  params.InputProps.endAdornment
+                ] })
+              })
+            }), renderInputTextFieldProps),
+            params.id
+          );
+        }
+      }), rest),
+      "autocomplete-" + name
+    )
+  ] });
+};
+const MemoizedSearchableSelectCheckboxes = React.memo(
+  SearchableSelectCheckboxes,
+  () => {
+    return true;
+  }
+);
+var SearchableSelectCheckboxes_default = SearchableSelectCheckboxes;
+export {
+  MemoizedSearchableSelectCheckboxes,
+  SearchableSelectCheckboxes_default as default
+};

package/dist/components/SortableDataGrid/SortableDataGrid.js

@@ -1 +1,72 @@
-import{jsx as r}from"react/jsx-runtime";import{memo as l}from"react";import{Datagrid as s}from"react-admin";import m from"./SortableDataGridBody";import{SortableDatagridHeader as f}from"./SortableDataGridHeader";import g from"./SortableDataGridRow";import b from"react";const D=a=>{const{children:e,onOrderUpdate:t,...d}=a,i=b.useRef(null),n=o=>{t&&t(o)},p=l(o=>r(s,{...o,header:r(f,{}),body:r(m,{onOrderUpdate:n,ref:i,row:r(g,{})})}),()=>!0);return r("div",{id:"sortable-list",children:r(p,{...d,children:e})})};var x=D;export{x as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import {
+  memo
+} from "react";
+import { Datagrid } from "react-admin";
+import SortableDatagridBody from "./SortableDataGridBody";
+import { SortableDatagridHeader } from "./SortableDataGridHeader";
+import SortableDatagridRow from "./SortableDataGridRow";
+import React from "react";
+const SortableDatagrid = (props) => {
+  const _a = props, { children, onOrderUpdate } = _a, rest = __objRest(_a, ["children", "onOrderUpdate"]);
+  const bodyRef = React.useRef(null);
+  const _onOrderUpdate = (d) => {
+    if (onOrderUpdate) {
+      onOrderUpdate(d);
+    }
+  };
+  const SortableRootDatagrid = (p) => /* @__PURE__ */ jsx(
+    Datagrid,
+    __spreadProps(__spreadValues({}, p), {
+      header: /* @__PURE__ */ jsx(SortableDatagridHeader, {}),
+      body: /* @__PURE__ */ jsx(
+        SortableDatagridBody,
+        {
+          onOrderUpdate: _onOrderUpdate,
+          ref: bodyRef,
+          row: /* @__PURE__ */ jsx(SortableDatagridRow, {})
+        }
+      )
+    })
+  );
+  const SortableRootDatagridPure = memo(
+    SortableRootDatagrid,
+    () => true
+  );
+  return /* @__PURE__ */ jsx("div", { id: "sortable-list", children: /* @__PURE__ */ jsx(SortableRootDatagridPure, __spreadProps(__spreadValues({}, rest), { children })) });
+};
+var SortableDataGrid_default = SortableDatagrid;
+export {
+  SortableDataGrid_default as default
+};

package/dist/components/SortableDataGrid/SortableDataGridBody.js

@@ -1 +1,167 @@
-import{jsx as r}from"react/jsx-runtime";import*as D from"react";import{cloneElement as T,memo as k,forwardRef as v}from"react";import{TableBody as A}from"@mui/material";import{DatagridRow as F,PureDatagridRow as I}from"react-admin";import{DragDropContext as $,Droppable as q,Draggable as w}from"@hello-pangea/dnd";const H=r(F,{}),O=[],f=v(({children:d,className:_,data:s=O,expand:c,hasBulkActions:y=!1,hover:u,onToggleItem:B,resource:P,row:x=H,rowClick:C,rowStyle:i,selectedIds:l,isRowSelectable:g,onOrderUpdate:p,...E},z)=>{D.useEffect(()=>{console.log("data has been updated")},[s]);const[m,R]=D.useState(s),S=(a,e,t)=>{const o=Array.from(a),[n]=o.splice(e,1);return o.splice(t,0,n),o},h=(a,e)=>({border:a?"1px dashed #ccc":"none",...e});return r($,{onDragEnd:a=>{if(!a.destination)return;const e=S(m,a.source.index,a.destination.index);R(e),p&&p(e)},children:r(q,{droppableId:"droppable",children:a=>r(A,{ref:a.innerRef,className:"datagrid-body",...E,children:m.map((e,t)=>r(w,{draggableId:"q-"+e.id,index:t,children:(o,n)=>{const N=i?i(e,t):{};return T(x,{ref:o.innerRef,...o.draggableProps,...o.dragHandleProps,expand:c,hasBulkActions:y&&!!l,hover:u,id:e.id??`row${t}`,key:e.id??`row${t}`,onToggleItem:B,record:e,resource:P,rowClick:C,selectable:!g||g(e),selected:l?.includes(e.id),style:{...N,...h(n.isDragging,o.draggableProps.style)}},d)}},e.id))})})})});f.muiName="TableBody";const b=k(d=>r(f,{row:r(I,{}),...d}),()=>!0);b.muiName="TableBody";var W=b;export{b as PureSortableDatagridBody,W as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cloneElement, memo, forwardRef } from "react";
+import { TableBody } from "@mui/material";
+import {
+  DatagridRow,
+  PureDatagridRow
+} from "react-admin";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+const defaultChildren = /* @__PURE__ */ jsx(DatagridRow, {});
+const defaultData = [];
+const SortableDatagridBody = forwardRef(
+  (_a, _ref) => {
+    var _b = _a, {
+      children,
+      className,
+      data = defaultData,
+      expand,
+      hasBulkActions = false,
+      hover,
+      onToggleItem,
+      resource,
+      row = defaultChildren,
+      rowClick,
+      rowStyle,
+      selectedIds,
+      isRowSelectable,
+      onOrderUpdate
+    } = _b, rest = __objRest(_b, [
+      "children",
+      "className",
+      "data",
+      "expand",
+      "hasBulkActions",
+      "hover",
+      "onToggleItem",
+      "resource",
+      "row",
+      "rowClick",
+      "rowStyle",
+      "selectedIds",
+      "isRowSelectable",
+      "onOrderUpdate"
+    ]);
+    React.useEffect(() => {
+      console.log("data has been updated");
+    }, [data]);
+    const [orderedData, setOrderedData] = React.useState(data);
+    const reorder = (list, startIndex, endIndex) => {
+      const result = Array.from(list);
+      const [removed] = result.splice(startIndex, 1);
+      result.splice(endIndex, 0, removed);
+      return result;
+    };
+    const getItemStyle = (isDragging, draggableStyle) => __spreadValues({
+      border: isDragging ? "1px dashed #ccc" : "none"
+    }, draggableStyle);
+    const onDragEnd = (result) => {
+      if (!result.destination) {
+        return;
+      }
+      const movedItems = reorder(
+        orderedData,
+        result.source.index,
+        result.destination.index
+      );
+      setOrderedData(movedItems);
+      if (onOrderUpdate) {
+        onOrderUpdate(movedItems);
+      }
+    };
+    return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "droppable", children: (provided) => (
+      /* @ts-ignore Expected KnownIssue1 */
+      /* @__PURE__ */ jsx(
+        TableBody,
+        __spreadProps(__spreadValues({
+          ref: provided.innerRef,
+          className: "datagrid-body"
+        }, rest), {
+          children: orderedData.map((record, rowIndex) => {
+            return /* @__PURE__ */ jsx(
+              Draggable,
+              {
+                draggableId: "q-" + record.id,
+                index: rowIndex,
+                children: (p, snapshot) => {
+                  var _a2, _b2;
+                  const defaultStyles = rowStyle ? rowStyle(record, rowIndex) : {};
+                  return cloneElement(
+                    row,
+                    __spreadProps(__spreadValues(__spreadValues({
+                      ref: p.innerRef
+                    }, p.draggableProps), p.dragHandleProps), {
+                      /*className: clsx(DatagridClasses.row, {
+                        [DatagridClasses.rowEven]: rowIndex % 2 === 0,
+                        [DatagridClasses.rowOdd]: rowIndex % 2 !== 0,
+                      }),*/
+                      expand,
+                      hasBulkActions: hasBulkActions && !!selectedIds,
+                      hover,
+                      id: (_a2 = record.id) != null ? _a2 : `row${rowIndex}`,
+                      key: (_b2 = record.id) != null ? _b2 : `row${rowIndex}`,
+                      onToggleItem,
+                      record,
+                      resource,
+                      rowClick,
+                      selectable: !isRowSelectable || isRowSelectable(record),
+                      selected: selectedIds == null ? void 0 : selectedIds.includes(record.id),
+                      style: __spreadValues(__spreadValues({}, defaultStyles), getItemStyle(
+                        snapshot.isDragging,
+                        p.draggableProps.style
+                      ))
+                    }),
+                    children
+                  );
+                }
+              },
+              record.id
+            );
+          })
+        })
+      )
+    ) }) });
+  }
+);
+SortableDatagridBody.muiName = "TableBody";
+const PureSortableDatagridBody = memo(
+  (props) => /* @__PURE__ */ jsx(SortableDatagridBody, __spreadValues({ row: /* @__PURE__ */ jsx(PureDatagridRow, {}) }, props)),
+  () => true
+);
+PureSortableDatagridBody.muiName = "TableBody";
+var SortableDataGridBody_default = PureSortableDatagridBody;
+export {
+  PureSortableDatagridBody,
+  SortableDataGridBody_default as default
+};

package/dist/components/SortableDataGrid/SortableDataGridHeader.js

@@ -1 +1,109 @@
-import{jsx as s,jsxs as M}from"react/jsx-runtime";import{Children as N,isValidElement as k,useCallback as u}from"react";import{useListContext as w,useResourceContext as R}from"react-admin";import{Checkbox as A,TableCell as g,TableHead as P,TableRow as E}from"@mui/material";import c from"clsx";import{DatagridClasses as t,DatagridHeader as I,DatagridHeaderCell as L,useDatagridContext as B,useTranslate as _}from"react-admin";import F from"@mui/icons-material/Menu";const W=n=>{const{children:h,className:C,hasExpand:O=!1,hasSort:b=!0,hasBulkActions:S=!1,isRowSelectable:l}=n,f=R(n),x=_(),{sort:r,data:d,onSelect:p,selectedIds:o,setSort:i}=w(n),{expandSingle:V}=B(),y=u(e=>{e.stopPropagation();const a=e.currentTarget.dataset.field,T=r.field===a?r.order&&r.order.toLocaleLowerCase()==="asc"?"ASC":"DESC":e.currentTarget.dataset.order;i({field:a,order:T})},[r.field,r.order,i]),D=i?y:null,H=u(e=>p(e.target.checked?o.concat(d.filter(a=>!o.includes(a.id)).filter(a=>l?l(a):!0).map(a=>a.id)):[]),[d,p,l,o]),m=Array.isArray(d)?l?d.filter(e=>l(e)).map(e=>e.id):d.map(e=>e.id):[];return s(P,{className:c(C,t.thead),children:M(E,{className:c(t.row,t.headerRow),children:[b&&s(g,{padding:"none",className:c(t.headerCell,t.expandHeader),children:s(F,{sx:{cursor:"pointer"},className:"handle"})}),S&&o&&s(g,{padding:"checkbox",className:t.headerCell,children:s(A,{"aria-label":x("ra.action.select_all",{_:"Select all"}),className:"select-all",color:"primary",checked:o.length>0&&m.length>0&&m.every(e=>o.includes(e)),onChange:H})}),N.map(h,(e,a)=>k(e)?s(L,{className:c(t.headerCell,`column-${e.props.source}`),sort:r,field:e,isSorting:r.field===(e.props.sortBy||e.props.source),resource:f,updateSort:D},e.props.source||a):null)]})})};I.displayName="DatagridHeader";export{W as SortableDatagridHeader};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useCallback } from "react";
+import {
+  useListContext,
+  useResourceContext
+} from "react-admin";
+import { Checkbox, TableCell, TableHead, TableRow } from "@mui/material";
+import clsx from "clsx";
+import {
+  DatagridClasses,
+  DatagridHeader,
+  DatagridHeaderCell,
+  useDatagridContext,
+  useTranslate
+} from "react-admin";
+import MenuIcon from "@mui/icons-material/Menu";
+const SortableDatagridHeader = (props) => {
+  const {
+    children,
+    className,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+    hasExpand = false,
+    hasSort = true,
+    hasBulkActions = false,
+    isRowSelectable
+  } = props;
+  {
+  }
+  const resource = useResourceContext(props);
+  const translate = useTranslate();
+  {
+  }
+  const { sort, data, onSelect, selectedIds, setSort } = useListContext(props);
+  const { expandSingle } = useDatagridContext();
+  const updateSortCallback = useCallback(
+    (event) => {
+      event.stopPropagation();
+      const newField = event.currentTarget.dataset.field;
+      const newOrder = sort.field === newField ? sort.order && sort.order.toLocaleLowerCase() === "asc" ? "ASC" : "DESC" : event.currentTarget.dataset.order;
+      setSort({ field: newField, order: newOrder });
+    },
+    [sort.field, sort.order, setSort]
+  );
+  const updateSort = setSort ? updateSortCallback : null;
+  const handleSelectAll = useCallback(
+    (event) => onSelect(
+      event.target.checked ? selectedIds.concat(
+        data.filter((record) => !selectedIds.includes(record.id)).filter(
+          (record) => isRowSelectable ? isRowSelectable(record) : true
+        ).map((record) => record.id)
+      ) : []
+    ),
+    [data, onSelect, isRowSelectable, selectedIds]
+  );
+  const selectableIds = Array.isArray(data) ? isRowSelectable ? data.filter((record) => isRowSelectable(record)).map((record) => record.id) : data.map((record) => record.id) : [];
+  return /* @__PURE__ */ jsx(TableHead, { className: clsx(className, DatagridClasses.thead), children: /* @__PURE__ */ jsxs(
+    TableRow,
+    {
+      className: clsx(DatagridClasses.row, DatagridClasses.headerRow),
+      children: [
+        hasSort && /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            padding: "none",
+            className: clsx(
+              DatagridClasses.headerCell,
+              DatagridClasses.expandHeader
+            ),
+            children: /* @__PURE__ */ jsx(MenuIcon, { sx: { cursor: "pointer" }, className: "handle" })
+          }
+        ),
+        hasBulkActions && selectedIds && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", className: DatagridClasses.headerCell, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            "aria-label": translate("ra.action.select_all", {
+              _: "Select all"
+            }),
+            className: "select-all",
+            color: "primary",
+            checked: selectedIds.length > 0 && selectableIds.length > 0 && selectableIds.every((id) => selectedIds.includes(id)),
+            onChange: handleSelectAll
+          }
+        ) }),
+        Children.map(
+          children,
+          (field, index) => isValidElement(field) ? /* @__PURE__ */ jsx(
+            DatagridHeaderCell,
+            {
+              className: clsx(
+                DatagridClasses.headerCell,
+                `column-${field.props.source}`
+              ),
+              sort,
+              field,
+              isSorting: sort.field === (field.props.sortBy || field.props.source),
+              resource,
+              updateSort
+            },
+            field.props.source || index
+          ) : null
+        )
+      ]
+    }
+  ) });
+};
+DatagridHeader.displayName = "DatagridHeader";
+export {
+  SortableDatagridHeader
+};