@onewelcome/react-lib-components 7.0.0 → 7.1.0

package/dist/esm/ContextMenu/ContextMenuService.esm.js

@@ -1,2 +1,133 @@
-import{useEffect as e}from"react";import{vertical as t,horizontal as o}from"../src/hooks/usePosition.esm.js";import{remToPx as r}from"../src/util/helper.esm.js";const n=({selectedContextMenuItem:e,setSelectedContextMenuItem:t,focusedContextMenuItem:o,setFocusedContextMenuItem:r,showContextMenu:n,setShowContextMenu:s,childrenCount:c,setShouldClick:i})=>{const u=u=>{if(o===-1&&e!==-1)r(e);const l=["ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Enter","Space","Escape","End","Home"];if(l.includes(u.code))u.preventDefault();switch(u.code){case"ArrowDown":if(!n){s(true);return}r((e=>e+1>c-1?0:e+1));return;case"ArrowUp":r((e=>e-1<0?c-1:e-1));return;case"Enter":case"Space":if(!n){s(true);return}i(true);t(o);s(false);return;case"Tab":case"Escape":s(false);return;case"End":r(c-1);return;case"Home":r(0);return}};return{onArrowNavigation:u}};const s=r(.25);const c=()=>{const e=(e,r)=>{const n={left:0,right:0,top:0,bottom:0};if(e.vertical===t.BOTTOM&&r.vertical===t.TOP)n.top=s;else if(e.vertical===t.TOP&&r.vertical===t.BOTTOM)n.top=-s;if(e.horizontal===o.RIGHT)n.left=s;return n};return{calculateDefaultOffset:e}};const i=(t,o,r,n,s,c,i)=>{const u=e=>{var o;if(e.key==="Escape"){n(false);(o=t.current)===null||o===void 0?void 0:o.focus()}};const l=()=>{if(r)document.addEventListener("keydown",u);else document.removeEventListener("keydown",u)};const a=()=>{var e,n;if(r)c===null||c===void 0?void 0:c();else{i===null||i===void 0?void 0:i();if((e=document.activeElement)===null||e===void 0?void 0:e.closest(`#${o}-menu`))(n=t.current)===null||n===void 0?void 0:n.focus();s(-1)}};e((()=>{l();a()}),[r])};export{n as useArrowNavigation,c as useDefaultOffset,i as useFocusAnchorElement};
+import { useEffect } from 'react';
+import { vertical, horizontal } from '../src/hooks/usePosition.esm.js';
+import { remToPx } from '../src/util/helper.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+/** @scope . */
+const useArrowNavigation = ({ selectedContextMenuItem, setSelectedContextMenuItem, focusedContextMenuItem, setFocusedContextMenuItem, showContextMenu, setShowContextMenu, childrenCount, setShouldClick }) => {
+    const onArrowNavigation = (event) => {
+        if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {
+            setFocusedContextMenuItem(selectedContextMenuItem);
+        }
+        const codesToPreventDefault = [
+            "ArrowDown",
+            "ArrowUp",
+            "ArrowLeft",
+            "ArrowRight",
+            "Enter",
+            "Space",
+            "Escape",
+            "End",
+            "Home"
+        ];
+        if (codesToPreventDefault.includes(event.code)) {
+            event.preventDefault();
+        }
+        switch (event.code) {
+            case "ArrowDown":
+                if (!showContextMenu) {
+                    setShowContextMenu(true);
+                    return;
+                }
+                setFocusedContextMenuItem(prevState => {
+                    return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;
+                });
+                return;
+            case "ArrowUp":
+                setFocusedContextMenuItem(prevState => {
+                    return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;
+                });
+                return;
+            case "Enter":
+            case "Space":
+                if (!showContextMenu) {
+                    setShowContextMenu(true);
+                    return;
+                }
+                setShouldClick(true);
+                setSelectedContextMenuItem(focusedContextMenuItem);
+                setShowContextMenu(false);
+                return;
+            case "Tab":
+            case "Escape":
+                setShowContextMenu(false);
+                return;
+            case "End":
+                setFocusedContextMenuItem(childrenCount - 1);
+                return;
+            case "Home":
+                setFocusedContextMenuItem(0);
+                return;
+        }
+    };
+    return { onArrowNavigation };
+};
+const defaultOffsetSpacing = remToPx(0.25);
+const useDefaultOffset = () => {
+    const calculateDefaultOffset = (placement, transformOrigin) => {
+        const offset = { left: 0, right: 0, top: 0, bottom: 0 };
+        if (placement.vertical === vertical.BOTTOM && transformOrigin.vertical === vertical.TOP) {
+            offset.top = defaultOffsetSpacing;
+        }
+        else if (placement.vertical === vertical.TOP &&
+            transformOrigin.vertical === vertical.BOTTOM) {
+            offset.top = -defaultOffsetSpacing;
+        }
+        if (placement.horizontal === horizontal.RIGHT) {
+            offset.left = defaultOffsetSpacing;
+        }
+        return offset;
+    };
+    return { calculateDefaultOffset };
+};
+const useFocusAnchorElement = (anchorEl, id, showContextMenu, setShowContextMenu, setFocusedContextMenuItem, onShow, onClose) => {
+    const handleEscapeKeyPress = (e) => {
+        var _a;
+        if (e.key === "Escape") {
+            setShowContextMenu(false);
+            (_a = anchorEl.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const escapeKeyEventHandlerManager = () => {
+        if (showContextMenu) {
+            document.addEventListener("keydown", handleEscapeKeyPress);
+        }
+        else {
+            document.removeEventListener("keydown", handleEscapeKeyPress);
+        }
+    };
+    const emitContextMenuEvent = () => {
+        var _a, _b;
+        if (showContextMenu) {
+            onShow === null || onShow === void 0 ? void 0 : onShow();
+        }
+        else {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`#${id}-menu`)) {
+                (_b = anchorEl.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            setFocusedContextMenuItem(-1);
+        }
+    };
+    useEffect(() => {
+        escapeKeyEventHandlerManager();
+        emitContextMenuEvent();
+    }, [showContextMenu]);
+};
+
+export { useArrowNavigation, useDefaultOffset, useFocusAnchorElement };
 //# sourceMappingURL=ContextMenuService.esm.js.map

package/dist/esm/ContextMenu/ContextMenuService.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuService.esm.js","sources":["../../../../../src/components/ContextMenu/ContextMenuService.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { SetStateAction, useEffect } from \"react\";\nimport { horizontal, Offset, Placement, vertical } from \"../../hooks/usePosition\";\nimport { remToPx } from \"../../util/helper\";\n\ninterface UseArrowNavigation {\n  selectedContextMenuItem: number;\n  setSelectedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;\n  focusedContextMenuItem: number;\n  setFocusedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;\n  showContextMenu: boolean;\n  setShowContextMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  childrenCount: number;\n  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\n/** @scope . */\nexport const useArrowNavigation = ({\n  selectedContextMenuItem,\n  setSelectedContextMenuItem,\n  focusedContextMenuItem,\n  setFocusedContextMenuItem,\n  showContextMenu,\n  setShowContextMenu,\n  childrenCount,\n  setShouldClick\n}: UseArrowNavigation) => {\n  const onArrowNavigation = (event: React.KeyboardEvent) => {\n    if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {\n      setFocusedContextMenuItem(selectedContextMenuItem);\n    }\n\n    const codesToPreventDefault = [\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Enter\",\n      \"Space\",\n      \"Escape\",\n      \"End\",\n      \"Home\"\n    ];\n\n    if (codesToPreventDefault.includes(event.code)) {\n      event.preventDefault();\n    }\n\n    switch (event.code) {\n      case \"ArrowDown\":\n        if (!showContextMenu) {\n          setShowContextMenu(true);\n          return;\n        }\n        setFocusedContextMenuItem(prevState => {\n          return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;\n        });\n        return;\n      case \"ArrowUp\":\n        setFocusedContextMenuItem(prevState => {\n          return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;\n        });\n        return;\n      case \"Enter\":\n      case \"Space\":\n        if (!showContextMenu) {\n          setShowContextMenu(true);\n          return;\n        }\n\n        setShouldClick(true);\n        setSelectedContextMenuItem(focusedContextMenuItem);\n        setShowContextMenu(false);\n        return;\n      case \"Tab\":\n      case \"Escape\":\n        setShowContextMenu(false);\n        return;\n      case \"End\":\n        setFocusedContextMenuItem(childrenCount - 1);\n        return;\n      case \"Home\":\n        setFocusedContextMenuItem(0);\n        return;\n    }\n  };\n\n  return { onArrowNavigation };\n};\n\nconst defaultOffsetSpacing = remToPx(0.25);\n\nexport const useDefaultOffset = () => {\n  const calculateDefaultOffset = (placement: Placement, transformOrigin: Placement): Offset => {\n    const offset = { left: 0, right: 0, top: 0, bottom: 0 };\n    if (placement.vertical === vertical.BOTTOM && transformOrigin.vertical === vertical.TOP) {\n      offset.top = defaultOffsetSpacing;\n    } else if (\n      placement.vertical === vertical.TOP &&\n      transformOrigin.vertical === vertical.BOTTOM\n    ) {\n      offset.top = -defaultOffsetSpacing;\n    }\n\n    if (placement.horizontal === horizontal.RIGHT) {\n      offset.left = defaultOffsetSpacing;\n    }\n    return offset;\n  };\n\n  return { calculateDefaultOffset };\n};\n\nexport const useFocusAnchorElement = (\n  anchorEl: React.RefObject<HTMLElement>,\n  id: string,\n  showContextMenu: boolean,\n  setShowContextMenu: React.Dispatch<SetStateAction<boolean>>,\n  setFocusedContextMenuItem: React.Dispatch<SetStateAction<number>>,\n  onShow?: () => void,\n  onClose?: () => void\n) => {\n  const handleEscapeKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      setShowContextMenu(false);\n      anchorEl.current?.focus();\n    }\n  };\n\n  const escapeKeyEventHandlerManager = () => {\n    if (showContextMenu) {\n      document.addEventListener(\"keydown\", handleEscapeKeyPress);\n    } else {\n      document.removeEventListener(\"keydown\", handleEscapeKeyPress);\n    }\n  };\n\n  const emitContextMenuEvent = () => {\n    if (showContextMenu) {\n      onShow?.();\n    } else {\n      onClose?.();\n\n      if (document.activeElement?.closest(`#${id}-menu`)) {\n        anchorEl.current?.focus();\n      }\n\n      setFocusedContextMenuItem(-1);\n    }\n  };\n\n  useEffect(() => {\n    escapeKeyEventHandlerManager();\n    emitContextMenuEvent();\n  }, [showContextMenu]);\n};\n"],"names":["useArrowNavigation","selectedContextMenuItem","setSelectedContextMenuItem","focusedContextMenuItem","setFocusedContextMenuItem","showContextMenu","setShowContextMenu","childrenCount","setShouldClick","onArrowNavigation","event","codesToPreventDefault","includes","code","preventDefault","prevState","defaultOffsetSpacing","remToPx","useDefaultOffset","calculateDefaultOffset","placement","transformOrigin","offset","left","right","top","bottom","vertical","BOTTOM","TOP","horizontal","RIGHT","useFocusAnchorElement","anchorEl","id","onShow","onClose","handleEscapeKeyPress","e","key","_a","current","focus","escapeKeyEventHandlerManager","document","addEventListener","removeEventListener","emitContextMenuEvent","activeElement","closest","_b","useEffect"],"mappings":"uKAgCaA,EAAqB,EAChCC,0BACAC,6BACAC,yBACAC,4BACAC,kBACAC,qBACAC,gBACAC,qBAEA,MAAMC,EAAqBC,IACzB,GAAIP,KAA4B,GAAKF,KAA6B,EAChEG,EAA0BH,GAG5B,MAAMU,EAAwB,CAC5B,YACA,UACA,YACA,aACA,QACA,QACA,SACA,MACA,QAGF,GAAIA,EAAsBC,SAASF,EAAMG,MACvCH,EAAMI,iBAGR,OAAQJ,EAAMG,MACZ,IAAK,YACH,IAAKR,EAAiB,CACpBC,EAAmB,MACnB,MACD,CACDF,GAA0BW,GACjBA,EAAY,EAAIR,EAAgB,EAAI,EAAIQ,EAAY,IAE7D,OACF,IAAK,UACHX,GAA0BW,GACjBA,EAAY,EAAI,EAAIR,EAAgB,EAAIQ,EAAY,IAE7D,OACF,IAAK,QACL,IAAK,QACH,IAAKV,EAAiB,CACpBC,EAAmB,MACnB,MACD,CAEDE,EAAe,MACfN,EAA2BC,GAC3BG,EAAmB,OACnB,OACF,IAAK,MACL,IAAK,SACHA,EAAmB,OACnB,OACF,IAAK,MACHF,EAA0BG,EAAgB,GAC1C,OACF,IAAK,OACHH,EAA0B,GAC1B,OACH,EAGH,MAAO,CAAEK,oBAAmB,EAG9B,MAAMO,EAAuBC,EAAQ,KAE9B,MAAMC,EAAmB,KAC9B,MAAMC,EAAyB,CAACC,EAAsBC,KACpD,MAAMC,EAAS,CAAEC,KAAM,EAAGC,MAAO,EAAGC,IAAK,EAAGC,OAAQ,GACpD,GAAIN,EAAUO,WAAaA,EAASC,QAAUP,EAAgBM,WAAaA,EAASE,IAClFP,EAAOG,IAAMT,OACR,GACLI,EAAUO,WAAaA,EAASE,KAChCR,EAAgBM,WAAaA,EAASC,OAEtCN,EAAOG,KAAOT,EAGhB,GAAII,EAAUU,aAAeA,EAAWC,MACtCT,EAAOC,KAAOP,EAEhB,OAAOM,CAAM,EAGf,MAAO,CAAEH,yBAAwB,EAGtB,MAAAa,EAAwB,CACnCC,EACAC,EACA7B,EACAC,EACAF,EACA+B,EACAC,KAEA,MAAMC,EAAwBC,UAC5B,GAAIA,EAAEC,MAAQ,SAAU,CACtBjC,EAAmB,QACnBkC,EAAAP,EAASQ,WAAS,MAAAD,SAAA,OAAA,EAAAA,EAAAE,OACnB,GAGH,MAAMC,EAA+B,KACnC,GAAItC,EACFuC,SAASC,iBAAiB,UAAWR,QAErCO,SAASE,oBAAoB,UAAWT,EACzC,EAGH,MAAMU,EAAuB,aAC3B,GAAI1C,EACF8B,IAAA,MAAAA,SAAA,OAAA,EAAAA,QACK,CACLC,IAAA,MAAAA,SAAA,OAAA,EAAAA,IAEA,IAAII,EAAAI,SAASI,iBAAe,MAAAR,SAAA,OAAA,EAAAA,EAAAS,QAAQ,IAAIf,WACtCgB,EAAAjB,EAASQ,WAAS,MAAAS,SAAA,OAAA,EAAAA,EAAAR,QAGpBtC,GAA2B,EAC5B,GAGH+C,GAAU,KACRR,IACAI,GAAsB,GACrB,CAAC1C,GAAiB"}
+{"version":3,"file":"ContextMenuService.esm.js","sources":["../../../../../src/components/ContextMenu/ContextMenuService.ts"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport { SetStateAction, useEffect } from \"react\";\nimport { horizontal, Offset, Placement, vertical } from \"../../hooks/usePosition\";\nimport { remToPx } from \"../../util/helper\";\n\ninterface UseArrowNavigation {\n  selectedContextMenuItem: number;\n  setSelectedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;\n  focusedContextMenuItem: number;\n  setFocusedContextMenuItem: React.Dispatch<React.SetStateAction<number>>;\n  showContextMenu: boolean;\n  setShowContextMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  childrenCount: number;\n  setShouldClick: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\n/** @scope . */\nexport const useArrowNavigation = ({\n  selectedContextMenuItem,\n  setSelectedContextMenuItem,\n  focusedContextMenuItem,\n  setFocusedContextMenuItem,\n  showContextMenu,\n  setShowContextMenu,\n  childrenCount,\n  setShouldClick\n}: UseArrowNavigation) => {\n  const onArrowNavigation = (event: React.KeyboardEvent) => {\n    if (focusedContextMenuItem === -1 && selectedContextMenuItem !== -1) {\n      setFocusedContextMenuItem(selectedContextMenuItem);\n    }\n\n    const codesToPreventDefault = [\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Enter\",\n      \"Space\",\n      \"Escape\",\n      \"End\",\n      \"Home\"\n    ];\n\n    if (codesToPreventDefault.includes(event.code)) {\n      event.preventDefault();\n    }\n\n    switch (event.code) {\n      case \"ArrowDown\":\n        if (!showContextMenu) {\n          setShowContextMenu(true);\n          return;\n        }\n        setFocusedContextMenuItem(prevState => {\n          return prevState + 1 > childrenCount - 1 ? 0 : prevState + 1;\n        });\n        return;\n      case \"ArrowUp\":\n        setFocusedContextMenuItem(prevState => {\n          return prevState - 1 < 0 ? childrenCount - 1 : prevState - 1;\n        });\n        return;\n      case \"Enter\":\n      case \"Space\":\n        if (!showContextMenu) {\n          setShowContextMenu(true);\n          return;\n        }\n\n        setShouldClick(true);\n        setSelectedContextMenuItem(focusedContextMenuItem);\n        setShowContextMenu(false);\n        return;\n      case \"Tab\":\n      case \"Escape\":\n        setShowContextMenu(false);\n        return;\n      case \"End\":\n        setFocusedContextMenuItem(childrenCount - 1);\n        return;\n      case \"Home\":\n        setFocusedContextMenuItem(0);\n        return;\n    }\n  };\n\n  return { onArrowNavigation };\n};\n\nconst defaultOffsetSpacing = remToPx(0.25);\n\nexport const useDefaultOffset = () => {\n  const calculateDefaultOffset = (placement: Placement, transformOrigin: Placement): Offset => {\n    const offset = { left: 0, right: 0, top: 0, bottom: 0 };\n    if (placement.vertical === vertical.BOTTOM && transformOrigin.vertical === vertical.TOP) {\n      offset.top = defaultOffsetSpacing;\n    } else if (\n      placement.vertical === vertical.TOP &&\n      transformOrigin.vertical === vertical.BOTTOM\n    ) {\n      offset.top = -defaultOffsetSpacing;\n    }\n\n    if (placement.horizontal === horizontal.RIGHT) {\n      offset.left = defaultOffsetSpacing;\n    }\n    return offset;\n  };\n\n  return { calculateDefaultOffset };\n};\n\nexport const useFocusAnchorElement = (\n  anchorEl: React.RefObject<HTMLElement>,\n  id: string,\n  showContextMenu: boolean,\n  setShowContextMenu: React.Dispatch<SetStateAction<boolean>>,\n  setFocusedContextMenuItem: React.Dispatch<SetStateAction<number>>,\n  onShow?: () => void,\n  onClose?: () => void\n) => {\n  const handleEscapeKeyPress = (e: KeyboardEvent) => {\n    if (e.key === \"Escape\") {\n      setShowContextMenu(false);\n      anchorEl.current?.focus();\n    }\n  };\n\n  const escapeKeyEventHandlerManager = () => {\n    if (showContextMenu) {\n      document.addEventListener(\"keydown\", handleEscapeKeyPress);\n    } else {\n      document.removeEventListener(\"keydown\", handleEscapeKeyPress);\n    }\n  };\n\n  const emitContextMenuEvent = () => {\n    if (showContextMenu) {\n      onShow?.();\n    } else {\n      onClose?.();\n\n      if (document.activeElement?.closest(`#${id}-menu`)) {\n        anchorEl.current?.focus();\n      }\n\n      setFocusedContextMenuItem(-1);\n    }\n  };\n\n  useEffect(() => {\n    escapeKeyEventHandlerManager();\n    emitContextMenuEvent();\n  }, [showContextMenu]);\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGrid.esm.js

@@ -1,2 +1,84 @@
-import e,{useState as a,useEffect as t}from"react";import i from"./DataGrid.module.esm.js";import{DataGridHeader as o}from"./DataGridHeader/DataGridHeader.esm.js";import{DataGridActions as d}from"./DataGridActions/DataGridActions.esm.js";import{DataGridBody as n}from"./DataGridBody/DataGridBody.esm.js";import{Pagination as r}from"../Pagination/Pagination.esm.js";import{useSpacing as l}from"../src/hooks/useSpacing.esm.js";import{DataGridToolbar as s}from"./DataGridFilters/DataGridToolbar.esm.js";const p=({children:p,data:m,initialSort:g,onSort:c,headers:u,actions:v={},paginationProps:f,disableContextMenuColumn:h,enableExpandableRow:b,filters:w,isLoading:E,enableMultiSorting:y,emptyLabel:D,spacing:G,style:L,...j},R)=>{var S;if(!u)throw new Error("Headers definition has to be provided");if(!p)throw new Error("DataGridBody should be provided with a template how to render rows");const[C,x]=a(u);const B=l(G,L);t((()=>x(u)),[u]);const M=e=>{x(C.map((a=>a.name!==e?a:{...a,hidden:!a.hidden})))};if(B===null||B===void 0?void 0:B.padding){const e=B.padding.toString().split(" ");let a=0;if(e.length>=2)a=1;if(e.length===4)a=3;Object.defineProperties(B,{paddingTop:{value:e[0]},paddingRight:{value:e[e.length-1>0?1:0]},paddingBottom:{value:e[e.length/3>=1?2:0]},paddingLeft:{value:e[a]}})}return e.createElement("div",{...j,className:i["grid-wrapper"],ref:R,style:{paddingTop:B===null||B===void 0?void 0:B.paddingTop,paddingBottom:B===null||B===void 0?void 0:B.paddingBottom}},(w===null||w===void 0?void 0:w.enable)?e.createElement(s,{...w.filtersProps}):e.createElement(d,{...v,style:{paddingLeft:B===null||B===void 0?void 0:B.paddingLeft,paddingRight:B===null||B===void 0?void 0:B.paddingRight},headers:C,onColumnToggled:M}),e.createElement("div",{className:i["table-wrapper"]},e.createElement("table",{className:i["table"]},e.createElement(o,{headers:C,initialSort:g,onSort:c,disableContextMenuColumn:h,enableExpandableRow:b,enableMultiSorting:y,spacing:B}),e.createElement(n,{data:m,headers:C,isLoading:E,disableContextMenuColumn:h,emptyLabel:D,spacing:B},p))),f&&!E&&e.createElement(r,{...f,style:{...f.style,paddingLeft:B===null||B===void 0?void 0:B.paddingLeft,paddingRight:B===null||B===void 0?void 0:B.paddingRight},className:`${i["pagination"]} ${(S=f.className)!==null&&S!==void 0?S:""}`}))};const m=e.forwardRef(p);export{m as DataGrid};
+import React, { useState, useEffect } from 'react';
+import classes from './DataGrid.module.scss.esm.js';
+import { DataGridHeader } from './DataGridHeader/DataGridHeader.esm.js';
+import { DataGridActions } from './DataGridActions/DataGridActions.esm.js';
+import { DataGridBody } from './DataGridBody/DataGridBody.esm.js';
+import { Pagination } from '../Pagination/Pagination.esm.js';
+import { useSpacing } from '../src/hooks/useSpacing.esm.js';
+import { DataGridToolbar } from './DataGridFilters/DataGridToolbar.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const DataGridInner = ({ children, data, initialSort, onSort, headers, actions = {}, paginationProps, disableContextMenuColumn, enableExpandableRow, filters, isLoading, enableMultiSorting, emptyLabel, spacing, style, ...rest }, ref) => {
+    var _a;
+    if (!headers) {
+        throw new Error("Headers definition has to be provided");
+    }
+    if (!children) {
+        throw new Error("DataGridBody should be provided with a template how to render rows");
+    }
+    const [internalHeaders, setInternalHeaders] = useState(headers);
+    const styleWithSpacing = useSpacing(spacing, style);
+    useEffect(() => setInternalHeaders(headers), [headers]);
+    const onColumnToggled = (colName) => {
+        setInternalHeaders(internalHeaders.map(item => item.name !== colName ? item : { ...item, hidden: !item.hidden }));
+    };
+    if (styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.padding) {
+        const splitPaddings = styleWithSpacing.padding.toString().split(" ");
+        let paddingLeftIndex = 0;
+        if (splitPaddings.length >= 2) {
+            paddingLeftIndex = 1;
+        }
+        if (splitPaddings.length === 4) {
+            paddingLeftIndex = 3;
+        }
+        Object.defineProperties(styleWithSpacing, {
+            paddingTop: {
+                value: splitPaddings[0]
+            },
+            paddingRight: {
+                value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]
+            },
+            paddingBottom: {
+                value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]
+            },
+            paddingLeft: {
+                value: splitPaddings[paddingLeftIndex]
+            }
+        });
+    }
+    return (React.createElement("div", { ...rest, className: classes["grid-wrapper"], ref: ref, style: {
+            paddingTop: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingTop,
+            paddingBottom: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingBottom
+        } },
+        (filters === null || filters === void 0 ? void 0 : filters.enable) ? (React.createElement(DataGridToolbar, { ...filters.filtersProps })) : (React.createElement(DataGridActions, { ...actions, style: {
+                paddingLeft: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingLeft,
+                paddingRight: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingRight
+            }, headers: internalHeaders, onColumnToggled: onColumnToggled })),
+        React.createElement("div", { className: classes["table-wrapper"] },
+            React.createElement("table", { className: classes["table"] },
+                React.createElement(DataGridHeader, { headers: internalHeaders, initialSort: initialSort, onSort: onSort, disableContextMenuColumn: disableContextMenuColumn, enableExpandableRow: enableExpandableRow, enableMultiSorting: enableMultiSorting, spacing: styleWithSpacing }),
+                React.createElement(DataGridBody, { data: data, headers: internalHeaders, isLoading: isLoading, disableContextMenuColumn: disableContextMenuColumn, emptyLabel: emptyLabel, spacing: styleWithSpacing }, children))),
+        paginationProps && !isLoading && (React.createElement(Pagination, { ...paginationProps, style: {
+                ...paginationProps.style,
+                paddingLeft: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingLeft,
+                paddingRight: styleWithSpacing === null || styleWithSpacing === void 0 ? void 0 : styleWithSpacing.paddingRight
+            }, className: `${classes["pagination"]} ${(_a = paginationProps.className) !== null && _a !== void 0 ? _a : ""}` }))));
+};
+const DataGrid = React.forwardRef(DataGridInner);
+
+export { DataGrid };
 //# sourceMappingURL=DataGrid.esm.js.map

package/dist/esm/DataGrid/DataGrid.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.esm.js","sources":["../../../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport classes from \"./DataGrid.module.scss\";\nimport { DataGridHeader } from \"./DataGridHeader/DataGridHeader\";\nimport { DataGridActions } from \"./DataGridActions/DataGridActions\";\nimport { DataGridBody } from \"./DataGridBody/DataGridBody\";\nimport { HeaderCell, OnSortFunction, Sort } from \"./datagrid.interfaces\";\nimport { Pagination, Props as PaginationProps } from \"../Pagination/Pagination\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\nimport { DataGridToolbar, DataGridToolbarProps } from \"./DataGridFilters/DataGridToolbar\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  headers: HeaderCell[];\n  actions?: {\n    enableAddBtn?: boolean;\n    enableColumnsBtn?: boolean;\n    enableSearchBtn?: boolean;\n    addBtnProps?: ButtonProps;\n    columnsBtnProps?: ButtonProps;\n    searchBtnProps?: ButtonProps;\n    searchIconBtnProps?: ButtonProps;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: {\n    enable: boolean;\n    filtersProps: DataGridToolbarProps;\n  };\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n}\n\nconst DataGridInner = <T extends {}>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  if (!headers) {\n    throw new Error(\"Headers definition has to be provided\");\n  }\n  if (!children) {\n    throw new Error(\"DataGridBody should be provided with a template how to render rows\");\n  }\n\n  const [internalHeaders, setInternalHeaders] = useState(headers);\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  useEffect(() => setInternalHeaders(headers), [headers]);\n\n  const onColumnToggled = (colName: string) => {\n    setInternalHeaders(\n      internalHeaders.map(item =>\n        item.name !== colName ? item : { ...item, hidden: !item.hidden }\n      )\n    );\n  };\n\n  if (styleWithSpacing?.padding) {\n    const splitPaddings = styleWithSpacing.padding.toString().split(\" \");\n\n    let paddingLeftIndex: number = 0;\n\n    if (splitPaddings.length >= 2) {\n      paddingLeftIndex = 1;\n    }\n    if (splitPaddings.length === 4) {\n      paddingLeftIndex = 3;\n    }\n\n    Object.defineProperties(styleWithSpacing, {\n      paddingTop: {\n        value: splitPaddings[0]\n      },\n      paddingRight: {\n        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]\n      },\n      paddingBottom: {\n        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]\n      },\n      paddingLeft: {\n        value: splitPaddings[paddingLeftIndex]\n      }\n    });\n  }\n\n  return (\n    <div\n      {...rest}\n      className={classes[\"grid-wrapper\"]}\n      ref={ref}\n      style={{\n        paddingTop: styleWithSpacing?.paddingTop,\n        paddingBottom: styleWithSpacing?.paddingBottom\n      }}\n    >\n      {filters?.enable ? (\n        <DataGridToolbar {...filters.filtersProps} />\n      ) : (\n        <DataGridActions\n          {...actions}\n          style={{\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          headers={internalHeaders}\n          onColumnToggled={onColumnToggled}\n        />\n      )}\n\n      <div className={classes[\"table-wrapper\"]}>\n        <table className={classes[\"table\"]}>\n          <DataGridHeader\n            headers={internalHeaders}\n            initialSort={initialSort}\n            onSort={onSort}\n            disableContextMenuColumn={disableContextMenuColumn}\n            enableExpandableRow={enableExpandableRow}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n          >\n            {children}\n          </DataGridBody>\n        </table>\n      </div>\n      {paginationProps && !isLoading && (\n        <Pagination\n          {...paginationProps}\n          style={{\n            ...paginationProps.style,\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          className={`${classes[\"pagination\"]} ${paginationProps.className ?? \"\"}`}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":["DataGridInner","children","data","initialSort","onSort","headers","actions","paginationProps","disableContextMenuColumn","enableExpandableRow","filters","isLoading","enableMultiSorting","emptyLabel","spacing","style","rest","ref","Error","internalHeaders","setInternalHeaders","useState","styleWithSpacing","useSpacing","useEffect","onColumnToggled","colName","map","item","name","hidden","padding","splitPaddings","toString","split","paddingLeftIndex","length","Object","defineProperties","paddingTop","value","paddingRight","paddingBottom","paddingLeft","React","createElement","className","classes","enable","DataGridToolbar","filtersProps","DataGridActions","DataGridHeader","DataGridBody","Pagination","_a","DataGrid","forwardRef"],"mappings":"ofAuDA,MAAMA,EAAgB,EAElBC,WACAC,OACAC,cACAC,SACAC,UACAC,UAAU,CAAA,EACVC,kBACAC,2BACAC,sBACAC,UACAC,YACAC,qBACAC,aACAC,UACAC,WACGC,GAELC,WAEA,IAAKZ,EACH,MAAM,IAAIa,MAAM,yCAElB,IAAKjB,EACH,MAAM,IAAIiB,MAAM,sEAGlB,MAAOC,EAAiBC,GAAsBC,EAAShB,GACvD,MAAMiB,EAAmBC,EAAWT,EAASC,GAE7CS,GAAU,IAAMJ,EAAmBf,IAAU,CAACA,IAE9C,MAAMoB,EAAmBC,IACvBN,EACED,EAAgBQ,KAAIC,GAClBA,EAAKC,OAASH,EAAUE,EAAO,IAAKA,EAAME,QAASF,EAAKE,UAE3D,EAGH,GAAIR,UAAAA,SAAgB,OAAA,EAAhBA,EAAkBS,QAAS,CAC7B,MAAMC,EAAgBV,EAAiBS,QAAQE,WAAWC,MAAM,KAEhE,IAAIC,EAA2B,EAE/B,GAAIH,EAAcI,QAAU,EAC1BD,EAAmB,EAErB,GAAIH,EAAcI,SAAW,EAC3BD,EAAmB,EAGrBE,OAAOC,iBAAiBhB,EAAkB,CACxCiB,WAAY,CACVC,MAAOR,EAAc,IAEvBS,aAAc,CACZD,MAAOR,EAAcA,EAAcI,OAAS,EAAI,EAAI,EAAI,IAE1DM,cAAe,CACbF,MAAOR,EAAcA,EAAcI,OAAS,GAAK,EAAI,EAAI,IAE3DO,YAAa,CACXH,MAAOR,EAAcG,KAG1B,CAED,OACES,EACMC,cAAA,MAAA,IAAA7B,EACJ8B,UAAWC,EAAQ,gBACnB9B,IAAKA,EACLF,MAAO,CACLwB,WAAYjB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBiB,WAC9BG,cAAepB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBoB,iBAGlChC,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASsC,QACRJ,EAAAC,cAACI,EAAe,IAAKvC,EAAQwC,eAE7BN,EAAAC,cAACM,EAAe,IACV7C,EACJS,MAAO,CACL4B,YAAarB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBqB,YAC/BF,aAAcnB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBmB,cAElCpC,QAASc,EACTM,gBAAiBA,IAIrBmB,EAAAC,cAAA,MAAA,CAAKC,UAAWC,EAAQ,kBACtBH,EAAAC,cAAA,QAAA,CAAOC,UAAWC,EAAQ,UACxBH,EAAAC,cAACO,EAAc,CACb/C,QAASc,EACThB,YAAaA,EACbC,OAAQA,EACRI,yBAA0BA,EAC1BC,oBAAqBA,EACrBG,mBAAoBA,EACpBE,QAASQ,IAEXsB,EAAAC,cAACQ,EAAY,CACXnD,KAAMA,EACNG,QAASc,EACTR,UAAWA,EACXH,yBAA0BA,EAC1BK,WAAYA,EACZC,QAASQ,GAERrB,KAINM,IAAoBI,GACnBiC,EAACC,cAAAS,EACK,IAAA/C,EACJQ,MAAO,IACFR,EAAgBQ,MACnB4B,YAAarB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBqB,YAC/BF,aAAcnB,IAAgB,MAAhBA,SAAA,OAAA,EAAAA,EAAkBmB,cAElCK,UAAW,GAAGC,EAAQ,kBAAiBQ,EAAAhD,EAAgBuC,gCAAa,OAI1E,EAGS,MAAAU,EAAWZ,EAAMa,WAAWzD"}
+{"version":3,"file":"DataGrid.esm.js","sources":["../../../../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ComponentPropsWithRef, ReactElement, Ref, useEffect, useState } from \"react\";\nimport { Props as ButtonProps } from \"../Button/Button\";\nimport classes from \"./DataGrid.module.scss\";\nimport { DataGridHeader } from \"./DataGridHeader/DataGridHeader\";\nimport { DataGridActions } from \"./DataGridActions/DataGridActions\";\nimport { DataGridBody } from \"./DataGridBody/DataGridBody\";\nimport { HeaderCell, OnSortFunction, Sort } from \"./datagrid.interfaces\";\nimport { Pagination, Props as PaginationProps } from \"../Pagination/Pagination\";\nimport { Spacing, useSpacing } from \"../../hooks/useSpacing\";\nimport { DataGridToolbar, DataGridToolbarProps } from \"./DataGridFilters/DataGridToolbar\";\n\nexport interface Props<T> extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  children: ({ item, index }: { item: T; index: number }) => ReactElement;\n  data?: T[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  headers: HeaderCell[];\n  actions?: {\n    enableAddBtn?: boolean;\n    enableColumnsBtn?: boolean;\n    enableSearchBtn?: boolean;\n    addBtnProps?: ButtonProps;\n    columnsBtnProps?: ButtonProps;\n    searchBtnProps?: ButtonProps;\n    searchIconBtnProps?: ButtonProps;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: {\n    enable: boolean;\n    filtersProps: DataGridToolbarProps;\n  };\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n}\n\nconst DataGridInner = <T extends {}>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLDivElement>\n) => {\n  if (!headers) {\n    throw new Error(\"Headers definition has to be provided\");\n  }\n  if (!children) {\n    throw new Error(\"DataGridBody should be provided with a template how to render rows\");\n  }\n\n  const [internalHeaders, setInternalHeaders] = useState(headers);\n  const styleWithSpacing = useSpacing(spacing, style);\n\n  useEffect(() => setInternalHeaders(headers), [headers]);\n\n  const onColumnToggled = (colName: string) => {\n    setInternalHeaders(\n      internalHeaders.map(item =>\n        item.name !== colName ? item : { ...item, hidden: !item.hidden }\n      )\n    );\n  };\n\n  if (styleWithSpacing?.padding) {\n    const splitPaddings = styleWithSpacing.padding.toString().split(\" \");\n\n    let paddingLeftIndex: number = 0;\n\n    if (splitPaddings.length >= 2) {\n      paddingLeftIndex = 1;\n    }\n    if (splitPaddings.length === 4) {\n      paddingLeftIndex = 3;\n    }\n\n    Object.defineProperties(styleWithSpacing, {\n      paddingTop: {\n        value: splitPaddings[0]\n      },\n      paddingRight: {\n        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]\n      },\n      paddingBottom: {\n        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]\n      },\n      paddingLeft: {\n        value: splitPaddings[paddingLeftIndex]\n      }\n    });\n  }\n\n  return (\n    <div\n      {...rest}\n      className={classes[\"grid-wrapper\"]}\n      ref={ref}\n      style={{\n        paddingTop: styleWithSpacing?.paddingTop,\n        paddingBottom: styleWithSpacing?.paddingBottom\n      }}\n    >\n      {filters?.enable ? (\n        <DataGridToolbar {...filters.filtersProps} />\n      ) : (\n        <DataGridActions\n          {...actions}\n          style={{\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          headers={internalHeaders}\n          onColumnToggled={onColumnToggled}\n        />\n      )}\n\n      <div className={classes[\"table-wrapper\"]}>\n        <table className={classes[\"table\"]}>\n          <DataGridHeader\n            headers={internalHeaders}\n            initialSort={initialSort}\n            onSort={onSort}\n            disableContextMenuColumn={disableContextMenuColumn}\n            enableExpandableRow={enableExpandableRow}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n          >\n            {children}\n          </DataGridBody>\n        </table>\n      </div>\n      {paginationProps && !isLoading && (\n        <Pagination\n          {...paginationProps}\n          style={{\n            ...paginationProps.style,\n            paddingLeft: styleWithSpacing?.paddingLeft,\n            paddingRight: styleWithSpacing?.paddingRight\n          }}\n          className={`${classes[\"pagination\"]} ${paginationProps.className ?? \"\"}`}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends {}>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGrid.module.scss.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DataGrid-module_grid-wrapper__bU1-r{padding:.875rem 0}.DataGrid-module_table-wrapper__wCMOu{overflow-x:auto}.DataGrid-module_table__SxgAf{border-collapse:collapse;padding-top:.5rem;position:relative;width:100%}.DataGrid-module_pagination__-Tksb{margin-top:.875rem;padding:0 1rem}@media only screen and (min-width:50em){.DataGrid-module_pagination__-Tksb{padding:0 1.25rem}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7OztFQWNFLENBQ0YscUNBQ0UsaUJBQ0YsQ0FFQSxzQ0FDRSxlQUNGLENBRUEsOEJBQ0Usd0JBQXlCLENBQ3pCLGlCQUFtQixDQUVuQixpQkFBa0IsQ0FEbEIsVUFFRixDQUVBLG1DQUNFLGtCQUFvQixDQUNwQixjQUNGLENBRUEsd0NBQ0UsbUNBQ0UsaUJBQ0YsQ0FDRiIsImZpbGUiOiJEYXRhR3JpZC5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4uZ3JpZC13cmFwcGVyIHtcbiAgcGFkZGluZzogMC44NzVyZW0gMDtcbn1cblxuLnRhYmxlLXdyYXBwZXIge1xuICBvdmVyZmxvdy14OiBhdXRvO1xufVxuXG4udGFibGUge1xuICBib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xuICBwYWRkaW5nLXRvcDogMC41cmVtO1xuICB3aWR0aDogMTAwJTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG4ucGFnaW5hdGlvbiB7XG4gIG1hcmdpbi10b3A6IDAuODc1cmVtO1xuICBwYWRkaW5nOiAwIDFyZW07XG59XG5cbkBtZWRpYSBvbmx5IHNjcmVlbiBhbmQgKG1pbi13aWR0aDogNTBlbSkge1xuICAucGFnaW5hdGlvbiB7XG4gICAgcGFkZGluZzogMCAxLjI1cmVtO1xuICB9XG59Il19 */";
+var classes = {"grid-wrapper":"DataGrid-module_grid-wrapper__bU1-r","table-wrapper":"DataGrid-module_table-wrapper__wCMOu","table":"DataGrid-module_table__SxgAf","pagination":"DataGrid-module_pagination__-Tksb"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=DataGrid.module.scss.esm.js.map

package/dist/esm/DataGrid/DataGrid.module.scss.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.module.scss.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/DataGrid/DataGridActions/DataGridActions.esm.js

@@ -1,2 +1,47 @@
-import e,{useState as t,useRef as l,Fragment as n}from"react";import{Button as o}from"../../Button/Button.esm.js";import{IconButton as a}from"../../Button/IconButton.esm.js";import{Icon as c,Icons as r}from"../../Icon/Icon.esm.js";import s from"./DataGridActions.module.esm.js";import{DataGridColumnsToggle as i}from"./DataGridColumnsToggle.esm.js";const m=({className:m,enableAddBtn:d,enableColumnsBtn:u,enableSearchBtn:h,addBtnProps:v={},columnsBtnProps:E={},searchBtnProps:p={},searchIconBtnProps:f={},headers:N,onColumnToggled:B,children:C,...$},g)=>{var b,S,I,j;const k=!(d||u||h);const[P,T]=t(false);const A=l(null);const{children:w,...x}=v;const{children:y,...D}=E;const{children:G,...R}=p;return k?null:e.createElement("div",{...$,ref:g,className:`${s["actions"]} ${m!==null&&m!==void 0?m:""}`},e.createElement("div",{className:s["left-actions"]},d&&e.createElement(o,{color:"primary",startIcon:e.createElement(c,{icon:r.Plus}),title:"Add item",type:"button",variant:"outline",...x},w!==null&&w!==void 0?w:"Add item")),e.createElement("div",{className:s["right-actions"]},u&&e.createElement(n,null,e.createElement(o,{startIcon:e.createElement(c,{icon:r.Change}),title:"Show/hide columns",variant:"text",...D,className:`${s["desktop"]} ${(b=E===null||E===void 0?void 0:E.className)!==null&&b!==void 0?b:""}`,ref:A,onClick:()=>T(true)},y!==null&&y!==void 0?y:"Columns"),e.createElement(a,{title:"Show/hide columns",...E,onClick:()=>T(true),className:`${s["mobile"]} ${(S=E===null||E===void 0?void 0:E.className)!==null&&S!==void 0?S:""}`},e.createElement(c,{icon:r.Change})),e.createElement(i,{"aria-hidden":!P,open:P,headers:N,onClose:()=>T(false),onToggleClicked:B,anchorEl:A})),h&&e.createElement(n,null,e.createElement(o,{startIcon:e.createElement(c,{icon:r.TableSearch}),title:"Search",variant:"text",...R,className:`${s["desktop"]} ${(I=p===null||p===void 0?void 0:p.className)!==null&&I!==void 0?I:""}`},G!==null&&G!==void 0?G:"Search"),e.createElement(a,{title:"Search",...f,className:`${s["mobile"]} ${(j=E===null||E===void 0?void 0:E.className)!==null&&j!==void 0?j:""}`},e.createElement(c,{icon:r.TableSearch})))))};const d=e.forwardRef(m);export{d as DataGridActions};
+import React, { useState, useRef, Fragment } from 'react';
+import { Button } from '../../Button/Button.esm.js';
+import { IconButton } from '../../Button/IconButton.esm.js';
+import { Icon, Icons } from '../../Icon/Icon.esm.js';
+import classes from './DataGridActions.module.scss.esm.js';
+import { DataGridColumnsToggle } from './DataGridColumnsToggle.esm.js';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const DataGridActionsComponent = ({ className, enableAddBtn, enableColumnsBtn, enableSearchBtn, addBtnProps = {}, columnsBtnProps = {}, searchBtnProps = {}, searchIconBtnProps = {}, headers, onColumnToggled, children, ...rest }, ref) => {
+    var _a, _b, _c, _d;
+    const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
+    const [showColsPopover, setShowColsPopover] = useState(false);
+    const showColumnBtn = useRef(null);
+    const { children: addBtnChildren, ...restAddBtnProps } = addBtnProps;
+    const { children: columnsBtnChildren, ...restColumnsBtnProps } = columnsBtnProps;
+    const { children: searchBtnChildren, ...restSearchBtnProps } = searchBtnProps;
+    return isHidden ? null : (React.createElement("div", { ...rest, ref: ref, className: `${classes["actions"]} ${className !== null && className !== void 0 ? className : ""}` },
+        React.createElement("div", { className: classes["left-actions"] }, enableAddBtn && (React.createElement(Button, { color: "primary", startIcon: React.createElement(Icon, { icon: Icons.Plus }), title: "Add item", type: "button", variant: "outline", ...restAddBtnProps }, addBtnChildren !== null && addBtnChildren !== void 0 ? addBtnChildren : "Add item"))),
+        React.createElement("div", { className: classes["right-actions"] },
+            enableColumnsBtn && (React.createElement(Fragment, null,
+                React.createElement(Button, { startIcon: React.createElement(Icon, { icon: Icons.Change }), title: "Show/hide columns", variant: "text", ...restColumnsBtnProps, className: `${classes["desktop"]} ${(_a = columnsBtnProps === null || columnsBtnProps === void 0 ? void 0 : columnsBtnProps.className) !== null && _a !== void 0 ? _a : ""}`, ref: showColumnBtn, onClick: () => setShowColsPopover(true) }, columnsBtnChildren !== null && columnsBtnChildren !== void 0 ? columnsBtnChildren : "Columns"),
+                React.createElement(IconButton, { title: "Show/hide columns", ...columnsBtnProps, onClick: () => setShowColsPopover(true), className: `${classes["mobile"]} ${(_b = columnsBtnProps === null || columnsBtnProps === void 0 ? void 0 : columnsBtnProps.className) !== null && _b !== void 0 ? _b : ""}` },
+                    React.createElement(Icon, { icon: Icons.Change })),
+                React.createElement(DataGridColumnsToggle, { "aria-hidden": !showColsPopover, open: showColsPopover, headers: headers, onClose: () => setShowColsPopover(false), onToggleClicked: onColumnToggled, anchorEl: showColumnBtn }))),
+            enableSearchBtn && (React.createElement(Fragment, null,
+                React.createElement(Button, { startIcon: React.createElement(Icon, { icon: Icons.TableSearch }), title: "Search", variant: "text", ...restSearchBtnProps, className: `${classes["desktop"]} ${(_c = searchBtnProps === null || searchBtnProps === void 0 ? void 0 : searchBtnProps.className) !== null && _c !== void 0 ? _c : ""}` }, searchBtnChildren !== null && searchBtnChildren !== void 0 ? searchBtnChildren : "Search"),
+                React.createElement(IconButton, { title: "Search", ...searchIconBtnProps, className: `${classes["mobile"]} ${(_d = columnsBtnProps === null || columnsBtnProps === void 0 ? void 0 : columnsBtnProps.className) !== null && _d !== void 0 ? _d : ""}` },
+                    React.createElement(Icon, { icon: Icons.TableSearch })))))));
+};
+const DataGridActions = React.forwardRef(DataGridActionsComponent);
+
+export { DataGridActions };
 //# sourceMappingURL=DataGridActions.esm.js.map

package/dist/esm/DataGrid/DataGridActions/DataGridActions.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridActions.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridActions/DataGridActions.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ComponentPropsWithRef,\n  ForwardRefRenderFunction,\n  Fragment,\n  useRef,\n  useState\n} from \"react\";\nimport { Button, Props as ButtonProps } from \"../../Button/Button\";\nimport { IconButton } from \"../../Button/IconButton\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridActions.module.scss\";\nimport { DataGridColumnsToggle } from \"./DataGridColumnsToggle\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  enableAddBtn?: boolean;\n  enableColumnsBtn?: boolean;\n  enableSearchBtn?: boolean;\n  addBtnProps?: ButtonProps;\n  columnsBtnProps?: ButtonProps;\n  searchBtnProps?: ButtonProps;\n  searchIconBtnProps?: ButtonProps;\n  headers: HeaderCell[];\n  onColumnToggled: (colName: string) => void;\n}\n\nconst DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    className,\n    enableAddBtn,\n    enableColumnsBtn,\n    enableSearchBtn,\n    addBtnProps = {},\n    columnsBtnProps = {},\n    searchBtnProps = {},\n    searchIconBtnProps = {},\n    headers,\n    onColumnToggled,\n    children,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);\n  const [showColsPopover, setShowColsPopover] = useState(false);\n  const showColumnBtn = useRef<HTMLButtonElement>(null);\n  const { children: addBtnChildren, ...restAddBtnProps } = addBtnProps;\n  const { children: columnsBtnChildren, ...restColumnsBtnProps } = columnsBtnProps;\n  const { children: searchBtnChildren, ...restSearchBtnProps } = searchBtnProps;\n\n  return isHidden ? null : (\n    <div {...rest} ref={ref} className={`${classes[\"actions\"]} ${className ?? \"\"}`}>\n      <div className={classes[\"left-actions\"]}>\n        {enableAddBtn && (\n          <Button\n            color=\"primary\"\n            startIcon={<Icon icon={Icons.Plus} />}\n            title=\"Add item\"\n            type=\"button\"\n            variant=\"outline\"\n            {...restAddBtnProps}\n          >\n            {addBtnChildren ?? \"Add item\"}\n          </Button>\n        )}\n      </div>\n      <div className={classes[\"right-actions\"]}>\n        {enableColumnsBtn && (\n          <Fragment>\n            <Button\n              startIcon={<Icon icon={Icons.Change} />}\n              title=\"Show/hide columns\"\n              variant=\"text\"\n              {...restColumnsBtnProps}\n              className={`${classes[\"desktop\"]} ${columnsBtnProps?.className ?? \"\"}`}\n              ref={showColumnBtn}\n              onClick={() => setShowColsPopover(true)}\n            >\n              {columnsBtnChildren ?? \"Columns\"}\n            </Button>\n            <IconButton\n              title=\"Show/hide columns\"\n              {...columnsBtnProps}\n              onClick={() => setShowColsPopover(true)}\n              className={`${classes[\"mobile\"]} ${columnsBtnProps?.className ?? \"\"}`}\n            >\n              <Icon icon={Icons.Change} />\n            </IconButton>\n            <DataGridColumnsToggle\n              aria-hidden={!showColsPopover}\n              open={showColsPopover}\n              headers={headers}\n              onClose={() => setShowColsPopover(false)}\n              onToggleClicked={onColumnToggled}\n              anchorEl={showColumnBtn}\n            />\n          </Fragment>\n        )}\n        {enableSearchBtn && (\n          <Fragment>\n            <Button\n              startIcon={<Icon icon={Icons.TableSearch} />}\n              title=\"Search\"\n              variant=\"text\"\n              {...restSearchBtnProps}\n              className={`${classes[\"desktop\"]} ${searchBtnProps?.className ?? \"\"}`}\n            >\n              {searchBtnChildren ?? \"Search\"}\n            </Button>\n            <IconButton\n              title=\"Search\"\n              {...searchIconBtnProps}\n              className={`${classes[\"mobile\"]} ${columnsBtnProps?.className ?? \"\"}`}\n            >\n              <Icon icon={Icons.TableSearch} />\n            </IconButton>\n          </Fragment>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const DataGridActions = React.forwardRef(DataGridActionsComponent);\n"],"names":["DataGridActionsComponent","className","enableAddBtn","enableColumnsBtn","enableSearchBtn","addBtnProps","columnsBtnProps","searchBtnProps","searchIconBtnProps","headers","onColumnToggled","children","rest","ref","isHidden","showColsPopover","setShowColsPopover","useState","showColumnBtn","useRef","addBtnChildren","restAddBtnProps","columnsBtnChildren","restColumnsBtnProps","searchBtnChildren","restSearchBtnProps","React","createElement","classes","Button","color","startIcon","Icon","icon","Icons","Plus","title","type","variant","Fragment","Change","_a","onClick","IconButton","_b","DataGridColumnsToggle","open","onClose","onToggleClicked","anchorEl","TableSearch","_c","_d","DataGridActions","forwardRef"],"mappings":"6VA0CA,MAAMA,EAA4E,EAE9EC,YACAC,eACAC,mBACAC,kBACAC,cAAc,CAAE,EAChBC,kBAAkB,CAAA,EAClBC,iBAAiB,CAAE,EACnBC,qBAAqB,CAAA,EACrBC,UACAC,kBACAC,cACGC,GAELC,iBAEA,MAAMC,IAAaZ,GAAgBC,GAAoBC,GACvD,MAAOW,EAAiBC,GAAsBC,EAAS,OACvD,MAAMC,EAAgBC,EAA0B,MAChD,MAAQR,SAAUS,KAAmBC,GAAoBhB,EACzD,MAAQM,SAAUW,KAAuBC,GAAwBjB,EACjE,MAAQK,SAAUa,KAAsBC,GAAuBlB,EAE/D,OAAOO,EAAW,KAChBY,EAAAC,cAAA,MAAA,IAASf,EAAMC,IAAKA,EAAKZ,UAAW,GAAG2B,EAAQ,cAAc3B,IAAS,MAATA,SAAS,EAATA,EAAa,MACxEyB,EAAKC,cAAA,MAAA,CAAA1B,UAAW2B,EAAQ,iBACrB1B,GACCwB,EAACC,cAAAE,GACCC,MAAM,UACNC,UAAWL,gBAACM,EAAI,CAACC,KAAMC,EAAMC,OAC7BC,MAAM,WACNC,KAAK,SACLC,QAAQ,aACJjB,GAEHD,IAAc,MAAdA,SAAc,EAAdA,EAAkB,aAIzBM,EAAAC,cAAA,MAAA,CAAK1B,UAAW2B,EAAQ,kBACrBzB,GACCuB,EAAAC,cAACY,EAAQ,KACPb,EAAAC,cAACE,EAAM,CACLE,UAAWL,EAACC,cAAAK,EAAK,CAAAC,KAAMC,EAAMM,SAC7BJ,MAAM,oBACNE,QAAQ,UACJf,EACJtB,UAAW,GAAG2B,EAAQ,eAAca,EAAAnC,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAiBL,aAAa,MAAAwC,SAAA,EAAAA,EAAA,KAClE5B,IAAKK,EACLwB,QAAS,IAAM1B,EAAmB,OAEjCM,IAAkB,MAAlBA,SAAkB,EAAlBA,EAAsB,WAEzBI,EAAAC,cAACgB,EACC,CAAAP,MAAM,uBACF9B,EACJoC,QAAS,IAAM1B,EAAmB,MAClCf,UAAW,GAAG2B,EAAQ,cAAagB,EAAAtC,IAAA,MAAAA,kBAAAA,EAAiBL,aAAS,MAAA2C,SAAA,EAAAA,EAAI,MAEjElB,EAACC,cAAAK,GAAKC,KAAMC,EAAMM,UAEpBd,EAAAC,cAACkB,EAAqB,CAAA,eACN9B,EACd+B,KAAM/B,EACNN,QAASA,EACTsC,QAAS,IAAM/B,EAAmB,OAClCgC,gBAAiBtC,EACjBuC,SAAU/B,KAIfd,GACCsB,EAAAC,cAACY,EAAQ,KACPb,EAACC,cAAAE,GACCE,UAAWL,gBAACM,EAAI,CAACC,KAAMC,EAAMgB,cAC7Bd,MAAM,SACNE,QAAQ,UACJb,EACJxB,UAAW,GAAG2B,EAAQ,iBAAcrB,IAAc,MAAdA,SAAc,OAAA,EAAdA,EAAgBN,aAAa,MAAAkD,SAAA,EAAAA,EAAA,MAEhE3B,IAAiB,MAAjBA,SAAA,EAAAA,EAAqB,UAExBE,EAACC,cAAAgB,EACC,CAAAP,MAAM,YACF5B,EACJP,UAAW,GAAG2B,EAAQ,cAAawB,EAAA9C,IAAA,MAAAA,SAAA,OAAA,EAAAA,EAAiBL,aAAa,MAAAmD,SAAA,EAAAA,EAAA,MAEjE1B,EAAAC,cAACK,EAAI,CAACC,KAAMC,EAAMgB,iBAM7B,EAGU,MAAAG,EAAkB3B,EAAM4B,WAAWtD"}
+{"version":3,"file":"DataGridActions.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridActions/DataGridActions.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, {\n  ComponentPropsWithRef,\n  ForwardRefRenderFunction,\n  Fragment,\n  useRef,\n  useState\n} from \"react\";\nimport { Button, Props as ButtonProps } from \"../../Button/Button\";\nimport { IconButton } from \"../../Button/IconButton\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridActions.module.scss\";\nimport { DataGridColumnsToggle } from \"./DataGridColumnsToggle\";\n\nexport interface Props extends ComponentPropsWithRef<\"div\"> {\n  enableAddBtn?: boolean;\n  enableColumnsBtn?: boolean;\n  enableSearchBtn?: boolean;\n  addBtnProps?: ButtonProps;\n  columnsBtnProps?: ButtonProps;\n  searchBtnProps?: ButtonProps;\n  searchIconBtnProps?: ButtonProps;\n  headers: HeaderCell[];\n  onColumnToggled: (colName: string) => void;\n}\n\nconst DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    className,\n    enableAddBtn,\n    enableColumnsBtn,\n    enableSearchBtn,\n    addBtnProps = {},\n    columnsBtnProps = {},\n    searchBtnProps = {},\n    searchIconBtnProps = {},\n    headers,\n    onColumnToggled,\n    children,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);\n  const [showColsPopover, setShowColsPopover] = useState(false);\n  const showColumnBtn = useRef<HTMLButtonElement>(null);\n  const { children: addBtnChildren, ...restAddBtnProps } = addBtnProps;\n  const { children: columnsBtnChildren, ...restColumnsBtnProps } = columnsBtnProps;\n  const { children: searchBtnChildren, ...restSearchBtnProps } = searchBtnProps;\n\n  return isHidden ? null : (\n    <div {...rest} ref={ref} className={`${classes[\"actions\"]} ${className ?? \"\"}`}>\n      <div className={classes[\"left-actions\"]}>\n        {enableAddBtn && (\n          <Button\n            color=\"primary\"\n            startIcon={<Icon icon={Icons.Plus} />}\n            title=\"Add item\"\n            type=\"button\"\n            variant=\"outline\"\n            {...restAddBtnProps}\n          >\n            {addBtnChildren ?? \"Add item\"}\n          </Button>\n        )}\n      </div>\n      <div className={classes[\"right-actions\"]}>\n        {enableColumnsBtn && (\n          <Fragment>\n            <Button\n              startIcon={<Icon icon={Icons.Change} />}\n              title=\"Show/hide columns\"\n              variant=\"text\"\n              {...restColumnsBtnProps}\n              className={`${classes[\"desktop\"]} ${columnsBtnProps?.className ?? \"\"}`}\n              ref={showColumnBtn}\n              onClick={() => setShowColsPopover(true)}\n            >\n              {columnsBtnChildren ?? \"Columns\"}\n            </Button>\n            <IconButton\n              title=\"Show/hide columns\"\n              {...columnsBtnProps}\n              onClick={() => setShowColsPopover(true)}\n              className={`${classes[\"mobile\"]} ${columnsBtnProps?.className ?? \"\"}`}\n            >\n              <Icon icon={Icons.Change} />\n            </IconButton>\n            <DataGridColumnsToggle\n              aria-hidden={!showColsPopover}\n              open={showColsPopover}\n              headers={headers}\n              onClose={() => setShowColsPopover(false)}\n              onToggleClicked={onColumnToggled}\n              anchorEl={showColumnBtn}\n            />\n          </Fragment>\n        )}\n        {enableSearchBtn && (\n          <Fragment>\n            <Button\n              startIcon={<Icon icon={Icons.TableSearch} />}\n              title=\"Search\"\n              variant=\"text\"\n              {...restSearchBtnProps}\n              className={`${classes[\"desktop\"]} ${searchBtnProps?.className ?? \"\"}`}\n            >\n              {searchBtnChildren ?? \"Search\"}\n            </Button>\n            <IconButton\n              title=\"Search\"\n              {...searchIconBtnProps}\n              className={`${classes[\"mobile\"]} ${columnsBtnProps?.className ?? \"\"}`}\n            >\n              <Icon icon={Icons.TableSearch} />\n            </IconButton>\n          </Fragment>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const DataGridActions = React.forwardRef(DataGridActionsComponent);\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridActions/DataGridActions.module.scss.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*!\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */.DataGridActions-module_actions__xPDqj{display:flex;flex-wrap:wrap;margin-bottom:1rem;padding:0 1rem}.DataGridActions-module_left-actions__NeGjp{flex:1}.DataGridActions-module_right-actions__D8ied{display:flex;gap:1rem}.DataGridActions-module_desktop__b-nyM{display:none}@media only screen and (min-width:50em){.DataGridActions-module_actions__xPDqj{padding:0 1.25rem}}@media only screen and (min-width:30em){.DataGridActions-module_desktop__b-nyM{display:flex}.DataGridActions-module_mobile__XUP-R{display:none}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkQWN0aW9ucy5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLHVDQUdFLFlBQWEsQ0FDYixjQUFlLENBSGYsa0JBQW1CLENBQ25CLGNBR0YsQ0FFQSw0Q0FDRSxNQUNGLENBRUEsNkNBQ0UsWUFBYSxDQUNiLFFBQ0YsQ0FFQSx1Q0FDRSxZQUNGLENBRUEsd0NBQ0UsdUNBQ0UsaUJBQ0YsQ0FDRixDQUNBLHdDQUNFLHVDQUNFLFlBQ0YsQ0FDQSxzQ0FDRSxZQUNGLENBQ0YiLCJmaWxlIjoiRGF0YUdyaWRBY3Rpb25zLm1vZHVsZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLyohXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi5hY3Rpb25zIHtcbiAgbWFyZ2luLWJvdHRvbTogMXJlbTtcbiAgcGFkZGluZzogMCAxcmVtO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LXdyYXA6IHdyYXA7XG59XG5cbi5sZWZ0LWFjdGlvbnMge1xuICBmbGV4OiAxO1xufVxuXG4ucmlnaHQtYWN0aW9ucyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogMXJlbTtcbn1cblxuLmRlc2t0b3Age1xuICBkaXNwbGF5OiBub25lO1xufVxuXG5AbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDUwZW0pIHtcbiAgLmFjdGlvbnMge1xuICAgIHBhZGRpbmc6IDAgMS4yNXJlbTtcbiAgfVxufVxuQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWluLXdpZHRoOiAzMGVtKSB7XG4gIC5kZXNrdG9wIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICB9XG4gIC5tb2JpbGUge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn0iXX0= */";
+var classes = {"actions":"DataGridActions-module_actions__xPDqj","left-actions":"DataGridActions-module_left-actions__NeGjp","right-actions":"DataGridActions-module_right-actions__D8ied","desktop":"DataGridActions-module_desktop__b-nyM","mobile":"DataGridActions-module_mobile__XUP-R"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=DataGridActions.module.scss.esm.js.map

package/dist/esm/DataGrid/DataGridActions/DataGridActions.module.scss.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridActions.module.scss.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/DataGrid/DataGridActions/DataGridColumnsToggle.esm.js

@@ -1,2 +1,44 @@
-import e,{useState as o,Fragment as t}from"react";import{IconButton as a}from"../../Button/IconButton.esm.js";import{Toggle as m}from"../../Form/Toggle/Toggle.esm.js";import{Icon as r,Icons as l}from"../../Icon/Icon.esm.js";import{Popover as n}from"../../Popover/Popover.esm.js";import{Typography as s}from"../../Typography/Typography.esm.js";import{generateID as c}from"../../src/util/helper.esm.js";import i from"./DataGridColumnsToggle.module.esm.js";import{createPortal as d}from"react-dom";const p=({open:p,headers:h,titleLabel:g="Show columns",closeButtonTitle:u="Close show columns dialog",onClose:f,onToggleClicked:E,className:T,domRoot:b=document.body,...j},v)=>{const[y]=o(c());const C=y+"_header";const N=h.map((o=>e.createElement(m,{key:o.name,name:o.name,checked:!o.hidden,onChange:()=>E(o.name),label:o.headline})));const k=()=>f();return e.createElement(n,{...j,ref:v,className:`${i["popover"]} ${T}`,show:p,role:"dialog","aria-modal":"true","aria-labelledby":C},p&&d(e.createElement("div",{"aria-hidden":"true",className:i["backdrop"],onClick:k}),b),p&&e.createElement(t,null,e.createElement("div",{className:i["header"]},e.createElement(s,{id:C,className:i["title"],tag:"span",variant:"h4"},g),e.createElement(a,{onClick:f,className:`${i["close-btn"]}`,title:u},e.createElement(r,{icon:l.Times}))),e.createElement("div",{className:i["content"]},N)))};const h=e.forwardRef(p);export{h as DataGridColumnsToggle};
+import React, { useState, Fragment } from 'react';
+import { IconButton } from '../../Button/IconButton.esm.js';
+import { Toggle } from '../../Form/Toggle/Toggle.esm.js';
+import { Icon, Icons } from '../../Icon/Icon.esm.js';
+import { Popover } from '../../Popover/Popover.esm.js';
+import { Typography } from '../../Typography/Typography.esm.js';
+import { generateID } from '../../src/util/helper.esm.js';
+import classes from './DataGridColumnsToggle.module.scss.esm.js';
+import { createPortal } from 'react-dom';
+
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+const DataGridColumnsToggleComponent = ({ open, headers, titleLabel = "Show columns", closeButtonTitle = "Close show columns dialog", onClose, onToggleClicked, className, domRoot = document.body, ...rest }, ref) => {
+    const [id] = useState(generateID());
+    const labelledId = id + "_header";
+    const toggles = headers.map(item => (React.createElement(Toggle, { key: item.name, name: item.name, checked: !item.hidden, onChange: () => onToggleClicked(item.name), label: item.headline })));
+    const handleBackdropClick = () => onClose();
+    return (React.createElement(Popover, { ...rest, ref: ref, className: `${classes["popover"]} ${className}`, show: open, role: "dialog", "aria-modal": "true", "aria-labelledby": labelledId },
+        open &&
+            createPortal(React.createElement("div", { "aria-hidden": "true", className: classes["backdrop"], onClick: handleBackdropClick }), domRoot),
+        open && (React.createElement(Fragment, null,
+            React.createElement("div", { className: classes["header"] },
+                React.createElement(Typography, { id: labelledId, className: classes["title"], tag: "span", variant: "h4" }, titleLabel),
+                React.createElement(IconButton, { onClick: onClose, className: `${classes["close-btn"]}`, title: closeButtonTitle },
+                    React.createElement(Icon, { icon: Icons.Times }))),
+            React.createElement("div", { className: classes["content"] }, toggles)))));
+};
+const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);
+
+export { DataGridColumnsToggle };
 //# sourceMappingURL=DataGridColumnsToggle.esm.js.map

package/dist/esm/DataGrid/DataGridActions/DataGridColumnsToggle.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGridColumnsToggle.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridActions/DataGridColumnsToggle.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, Fragment, useState } from \"react\";\nimport { IconButton } from \"../../Button/IconButton\";\nimport { Toggle } from \"../../Form/Toggle/Toggle\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Popover, Props as PopoverProps } from \"../../Popover/Popover\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { generateID } from \"../../../util/helper\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridColumnsToggle.module.scss\";\nimport { createPortal } from \"react-dom\";\n\nexport interface Props extends PopoverProps {\n  open: boolean;\n  headers: HeaderCell[];\n  titleLabel?: string;\n  closeButtonTitle?: string;\n  onClose: () => void;\n  onToggleClicked: (colName: string) => void;\n  domRoot?: HTMLElement;\n}\n\nconst DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    open,\n    headers,\n    titleLabel = \"Show columns\",\n    closeButtonTitle = \"Close show columns dialog\",\n    onClose,\n    onToggleClicked,\n    className,\n    domRoot = document.body,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [id] = useState(generateID());\n  const labelledId = id + \"_header\";\n\n  const toggles = headers.map(item => (\n    <Toggle\n      key={item.name}\n      name={item.name}\n      checked={!item.hidden}\n      onChange={() => onToggleClicked(item.name)}\n      label={item.headline}\n    />\n  ));\n\n  const handleBackdropClick = () => onClose();\n\n  return (\n    <Popover\n      {...rest}\n      ref={ref}\n      className={`${classes[\"popover\"]} ${className}`}\n      show={open}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelledId}\n    >\n      {open &&\n        createPortal(\n          <div\n            aria-hidden=\"true\"\n            className={classes[\"backdrop\"]}\n            onClick={handleBackdropClick}\n          ></div>,\n          domRoot\n        )}\n      {open && (\n        <Fragment>\n          <div className={classes[\"header\"]}>\n            <Typography id={labelledId} className={classes[\"title\"]} tag=\"span\" variant=\"h4\">\n              {titleLabel}\n            </Typography>\n            <IconButton\n              onClick={onClose}\n              className={`${classes[\"close-btn\"]}`}\n              title={closeButtonTitle}\n            >\n              <Icon icon={Icons.Times} />\n            </IconButton>\n          </div>\n          <div className={classes[\"content\"]}>{toggles}</div>\n        </Fragment>\n      )}\n    </Popover>\n  );\n};\n\nexport const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);\n"],"names":["DataGridColumnsToggleComponent","open","headers","titleLabel","closeButtonTitle","onClose","onToggleClicked","className","domRoot","document","body","rest","ref","id","useState","generateID","labelledId","toggles","map","item","React","createElement","Toggle","key","name","checked","hidden","onChange","label","headline","handleBackdropClick","Popover","classes","show","role","createPortal","onClick","Fragment","Typography","tag","variant","IconButton","title","Icon","icon","Icons","Times","DataGridColumnsToggle","forwardRef"],"mappings":"+eAqCA,MAAMA,EAAkF,EAEpFC,OACAC,UACAC,aAAa,eACbC,mBAAmB,4BACnBC,UACAC,kBACAC,YACAC,UAAUC,SAASC,QAChBC,GAELC,KAEA,MAAOC,GAAMC,EAASC,KACtB,MAAMC,EAAaH,EAAK,UAExB,MAAMI,EAAUf,EAAQgB,KAAIC,GAC1BC,EAAAC,cAACC,EACC,CAAAC,IAAKJ,EAAKK,KACVA,KAAML,EAAKK,KACXC,SAAUN,EAAKO,OACfC,SAAU,IAAMrB,EAAgBa,EAAKK,MACrCI,MAAOT,EAAKU,aAIhB,MAAMC,EAAsB,IAAMzB,IAElC,OACEe,EAAAC,cAACU,EAAO,IACFpB,EACJC,IAAKA,EACLL,UAAW,GAAGyB,EAAQ,cAAczB,IACpC0B,KAAMhC,EACNiC,KAAK,SACM,aAAA,yBACMlB,GAEhBf,GACCkC,EACEf,EACcC,cAAA,MAAA,CAAA,cAAA,OACZd,UAAWyB,EAAQ,YACnBI,QAASN,IAEXtB,GAEHP,GACCmB,EAAAC,cAACgB,EAAQ,KACPjB,EAAAC,cAAA,MAAA,CAAKd,UAAWyB,EAAQ,WACtBZ,EAACC,cAAAiB,GAAWzB,GAAIG,EAAYT,UAAWyB,EAAQ,SAAUO,IAAI,OAAOC,QAAQ,MACzErC,GAEHiB,EAAAC,cAACoB,EACC,CAAAL,QAAS/B,EACTE,UAAW,GAAGyB,EAAQ,eACtBU,MAAOtC,GAEPgB,EAACC,cAAAsB,GAAKC,KAAMC,EAAMC,UAGtB1B,EAAAC,cAAA,MAAA,CAAKd,UAAWyB,EAAQ,YAAaf,IAI3C,EAGS,MAAA8B,EAAwB3B,EAAM4B,WAAWhD"}
+{"version":3,"file":"DataGridColumnsToggle.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridActions/DataGridColumnsToggle.tsx"],"sourcesContent":["/*\n * Copyright 2022 OneWelcome B.V.\n *\n *    Licensed under the Apache License, Version 2.0 (the \"License\");\n *    you may not use this file except in compliance with the License.\n *    You may obtain a copy of the License at\n *\n *        http://www.apache.org/licenses/LICENSE-2.0\n *\n *    Unless required by applicable law or agreed to in writing, software\n *    distributed under the License is distributed on an \"AS IS\" BASIS,\n *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *    See the License for the specific language governing permissions and\n *    limitations under the License.\n */\n\nimport React, { ForwardRefRenderFunction, Fragment, useState } from \"react\";\nimport { IconButton } from \"../../Button/IconButton\";\nimport { Toggle } from \"../../Form/Toggle/Toggle\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Popover, Props as PopoverProps } from \"../../Popover/Popover\";\nimport { Typography } from \"../../Typography/Typography\";\nimport { generateID } from \"../../../util/helper\";\nimport { HeaderCell } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridColumnsToggle.module.scss\";\nimport { createPortal } from \"react-dom\";\n\nexport interface Props extends PopoverProps {\n  open: boolean;\n  headers: HeaderCell[];\n  titleLabel?: string;\n  closeButtonTitle?: string;\n  onClose: () => void;\n  onToggleClicked: (colName: string) => void;\n  domRoot?: HTMLElement;\n}\n\nconst DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (\n  {\n    open,\n    headers,\n    titleLabel = \"Show columns\",\n    closeButtonTitle = \"Close show columns dialog\",\n    onClose,\n    onToggleClicked,\n    className,\n    domRoot = document.body,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [id] = useState(generateID());\n  const labelledId = id + \"_header\";\n\n  const toggles = headers.map(item => (\n    <Toggle\n      key={item.name}\n      name={item.name}\n      checked={!item.hidden}\n      onChange={() => onToggleClicked(item.name)}\n      label={item.headline}\n    />\n  ));\n\n  const handleBackdropClick = () => onClose();\n\n  return (\n    <Popover\n      {...rest}\n      ref={ref}\n      className={`${classes[\"popover\"]} ${className}`}\n      show={open}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={labelledId}\n    >\n      {open &&\n        createPortal(\n          <div\n            aria-hidden=\"true\"\n            className={classes[\"backdrop\"]}\n            onClick={handleBackdropClick}\n          ></div>,\n          domRoot\n        )}\n      {open && (\n        <Fragment>\n          <div className={classes[\"header\"]}>\n            <Typography id={labelledId} className={classes[\"title\"]} tag=\"span\" variant=\"h4\">\n              {titleLabel}\n            </Typography>\n            <IconButton\n              onClick={onClose}\n              className={`${classes[\"close-btn\"]}`}\n              title={closeButtonTitle}\n            >\n              <Icon icon={Icons.Times} />\n            </IconButton>\n          </div>\n          <div className={classes[\"content\"]}>{toggles}</div>\n        </Fragment>\n      )}\n    </Popover>\n  );\n};\n\nexport const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);\n"],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAuBH,MAAM,8BAA8B,GAAoD,CACtF,EACE,IAAI,EACJ,OAAO,EACP,UAAU,GAAG,cAAc,EAC3B,gBAAgB,GAAG,2BAA2B,EAC9C,OAAO,EACP,eAAe,EACf,SAAS,EACT,OAAO,GAAG,QAAQ,CAAC,IAAI,EACvB,GAAG,IAAI,EACD,EACR,GAAG,KACD;IACF,MAAM,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,EAAE,GAAG,SAAS,CAAC;IAElC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,KAC9B,KAAA,CAAA,aAAA,CAAC,MAAM,EACL,EAAA,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,CAAC,IAAI,CAAC,MAAM,EACrB,QAAQ,EAAE,MAAM,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAA,CACpB,CACH,CAAC,CAAC;AAEH,IAAA,MAAM,mBAAmB,GAAG,MAAM,OAAO,EAAE,CAAC;AAE5C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAA,GACF,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC,CAAI,CAAA,EAAA,SAAS,CAAE,CAAA,EAC/C,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,EACF,YAAA,EAAA,MAAM,qBACA,UAAU,EAAA;QAE1B,IAAI;AACH,YAAA,YAAY,CACV,KACc,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,MAAM,EAClB,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,EAC9B,OAAO,EAAE,mBAAmB,EACvB,CAAA,EACP,OAAO,CACR;QACF,IAAI,KACH,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACP,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAA;gBAC/B,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,GAAG,EAAC,MAAM,EAAC,OAAO,EAAC,IAAI,EAC7E,EAAA,UAAU,CACA;AACb,gBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EACT,EAAA,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAG,EAAA,OAAO,CAAC,WAAW,CAAC,EAAE,EACpC,KAAK,EAAE,gBAAgB,EAAA;oBAEvB,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,KAAK,EAAI,CAAA,CAChB,CACT;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAG,EAAA,OAAO,CAAO,CAC1C,CACZ,CACO,EACV;AACJ,CAAC,CAAC;AAEW,MAAA,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAAC,8BAA8B;;;;"}