@onewelcome/react-lib-components 11.1.0-delta → 12.1.0-alpha

package/dist/components/ContextMenu/ContextMenuService.es.js

@@ -0,0 +1,124 @@
+import { useEffect } from "react";
+import { vertical, horizontal } from "../../hooks/usePosition.es.js";
+import { remToPx } from "../../util/helper.es.js";
+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 ? 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 ? void 0 : onShow();
+    } else {
+      onClose == null ? void 0 : onClose();
+      if ((_a = document.activeElement) == null ? void 0 : _a.closest(`#${id}-menu`)) {
+        (_b = anchorEl.current) == null ? void 0 : _b.focus();
+      }
+      setFocusedContextMenuItem(-1);
+    }
+  };
+  useEffect(() => {
+    escapeKeyEventHandlerManager();
+    emitContextMenuEvent();
+  }, [showContextMenu]);
+};
+export {
+  useArrowNavigation,
+  useDefaultOffset,
+  useFocusAnchorElement
+};
+//# sourceMappingURL=ContextMenuService.es.js.map

package/dist/components/ContextMenu/ContextMenuService.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuService.es.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":";;;AAgCO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AAClB,QAAA,oBAAoB,CAAC,UAA+B;AACpD,QAAA,2BAA2B,MAAM,4BAA4B,IAAI;AACnE,gCAA0B,uBAAuB;AAAA,IAAA;AAGnD,UAAM,wBAAwB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,sBAAsB,SAAS,MAAM,IAAI,GAAG;AAC9C,YAAM,eAAe;AAAA,IAAA;AAGvB,YAAQ,MAAM,MAAM;AAAA,MAClB,KAAK;AACH,YAAI,CAAC,iBAAiB;AACpB,6BAAmB,IAAI;AACvB;AAAA,QAAA;AAEF,kCAA0B,CAAa,cAAA;AACrC,iBAAO,YAAY,IAAI,gBAAgB,IAAI,IAAI,YAAY;AAAA,QAAA,CAC5D;AACD;AAAA,MACF,KAAK;AACH,kCAA0B,CAAa,cAAA;AACrC,iBAAO,YAAY,IAAI,IAAI,gBAAgB,IAAI,YAAY;AAAA,QAAA,CAC5D;AACD;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,YAAI,CAAC,iBAAiB;AACpB,6BAAmB,IAAI;AACvB;AAAA,QAAA;AAGF,uBAAe,IAAI;AACnB,mCAA2B,sBAAsB;AACjD,2BAAmB,KAAK;AACxB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,2BAAmB,KAAK;AACxB;AAAA,MACF,KAAK;AACH,kCAA0B,gBAAgB,CAAC;AAC3C;AAAA,MACF,KAAK;AACH,kCAA0B,CAAC;AAC3B;AAAA,IAAA;AAAA,EAEN;AAEA,SAAO,EAAE,kBAAkB;AAC7B;AAEA,MAAM,uBAAuB,QAAQ,IAAI;AAElC,MAAM,mBAAmB,MAAM;AAC9B,QAAA,yBAAyB,CAAC,WAAsB,oBAAuC;AACrF,UAAA,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,EAAE;AACtD,QAAI,UAAU,aAAa,SAAS,UAAU,gBAAgB,aAAa,SAAS,KAAK;AACvF,aAAO,MAAM;AAAA,IAAA,WAEb,UAAU,aAAa,SAAS,OAChC,gBAAgB,aAAa,SAAS,QACtC;AACA,aAAO,MAAM,CAAC;AAAA,IAAA;AAGZ,QAAA,UAAU,eAAe,WAAW,OAAO;AAC7C,aAAO,OAAO;AAAA,IAAA;AAET,WAAA;AAAA,EACT;AAEA,SAAO,EAAE,uBAAuB;AAClC;AAEa,MAAA,wBAAwB,CACnC,UACA,IACA,iBACA,oBACA,2BACA,QACA,YACG;AACG,QAAA,uBAAuB,CAAC,MAAqB;;AAC7C,QAAA,EAAE,QAAQ,UAAU;AACtB,yBAAmB,KAAK;AACxB,qBAAS,YAAT,mBAAkB;AAAA,IAAM;AAAA,EAE5B;AAEA,QAAM,+BAA+B,MAAM;AACzC,QAAI,iBAAiB;AACV,eAAA,iBAAiB,WAAW,oBAAoB;AAAA,IAAA,OACpD;AACI,eAAA,oBAAoB,WAAW,oBAAoB;AAAA,IAAA;AAAA,EAEhE;AAEA,QAAM,uBAAuB,MAAM;;AACjC,QAAI,iBAAiB;AACV;AAAA,IAAA,OACJ;AACK;AAEV,WAAI,cAAS,kBAAT,mBAAwB,QAAQ,IAAI,EAAE,UAAU;AAClD,uBAAS,YAAT,mBAAkB;AAAA,MAAM;AAG1B,gCAA0B,EAAE;AAAA,IAAA;AAAA,EAEhC;AAEA,YAAU,MAAM;AACe,iCAAA;AACR,yBAAA;AAAA,EAAA,GACpB,CAAC,eAAe,CAAC;AACtB;"}

package/dist/components/DataGrid/DataGrid.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("./DataGrid.module.scss.cjs.js"),t=require("./DataGridHeader/DataGridHeader.cjs.js"),i=require("./DataGridActions/DataGridActions.cjs.js"),r=require("./DataGridBody/DataGridBody.cjs.js"),n=require("../Pagination/Pagination.cjs.js"),d=require("../../hooks/useSpacing.cjs.js"),l=require("./DataGridFilters/DataGridToolbar.cjs.js"),o=require("./DataGridFilters/DataGridToolbarWrapper.cjs.js"),s=require("./DataGridFilters/DataGridSearchbar.cjs.js"),c=e.forwardRef((({children:c,data:u,initialSort:g,onSort:p,headers:m,actions:b={},paginationProps:h,nestedRowConfig:f,disableContextMenuColumn:D,enableExpandableRow:G,filters:j,search:v,toolbarButtons:E,isLoading:w,enableMultiSorting:S,emptyLabel:y,spacing:R,style:q,inlineEditingActionButtons:B,...C},L)=>{if(!m)throw new Error("Headers definition has to be provided");if(!c)throw new Error("DataGridBody should be provided with a template how to render rows");const[T,x]=e.useState(m),N=d.useSpacing(R,q);if(e.useEffect((()=>x(m)),[m]),null==N?void 0:N.padding){const e=N.padding.toString().split(" ");let a=0;e.length>=2&&(a=1),4===e.length&&(a=3),Object.defineProperties(N,{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",{...C,className:a.default["grid-wrapper"],ref:L,style:{paddingTop:null==N?void 0:N.paddingTop,paddingBottom:null==N?void 0:N.paddingBottom}},j||v||E?e.createElement(o.DataGridToolbarWrapper,{filters:e.createElement(e.Fragment,null,v&&e.createElement(s.DataGridSearchbar,{...v}),j&&e.createElement(l.DataGridToolbar,{...j})),buttons:E}):e.createElement(i.DataGridActions,{...b,style:{paddingLeft:null==N?void 0:N.paddingLeft,paddingRight:null==N?void 0:N.paddingRight},headers:T,onColumnToggled:e=>{x(T.map((a=>a.name!==e?a:{...a,hidden:!a.hidden})))}}),e.createElement("div",{className:a.default["table-wrapper"]},e.createElement("table",{className:a.default.table},e.createElement(t.DataGridHeader,{headers:T,initialSort:g,onSort:p,disableContextMenuColumn:D,enableExpandableRow:G,enableNestedRows:!!f,enableMultiSorting:S,spacing:N}),e.createElement(r.DataGridBody,{data:u,headers:T,isLoading:w,disableContextMenuColumn:D,nestedRowConfig:f,emptyLabel:y,spacing:N,searchValue:null==v?void 0:v.initialSearchValue},c))),h&&!w&&e.createElement(n.Pagination,{...h,style:{...h.style,paddingLeft:null==N?void 0:N.paddingLeft,paddingRight:null==N?void 0:N.paddingRight},className:`${a.default.pagination} ${h.className??""}`}),B&&e.createElement("div",{className:`${a.default["action-button"]}`},B))}));exports.DataGrid=c;
+//# sourceMappingURL=DataGrid.cjs.js.map

package/dist/components/DataGrid/DataGrid.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.cjs.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, {\n  ComponentPropsWithRef,\n  Fragment,\n  ReactElement,\n  Ref,\n  useEffect,\n  useState\n} from \"react\";\nimport { Button, 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\";\nimport { DataGridToolbarWrapper } from \"./DataGridFilters/DataGridToolbarWrapper\";\nimport { DataGridSearchbar, DataGridSearchbarProps } from \"./DataGridFilters/DataGridSearchbar\";\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  /**\n   * @deprecated use the `toolbarButtons` prop instead\n   */\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  nestedRowConfig?: {\n    nestedItemsKey?: keyof T;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: DataGridToolbarProps;\n  search?: DataGridSearchbarProps;\n  toolbarButtons?:\n    | ReactElement<ButtonProps, typeof Button>\n    | ReactElement<ButtonProps, typeof Button>[];\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n  inlineEditingActionButtons?: ReactElement | ReactElement[];\n}\n\nconst DataGridInner = <T extends object>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    nestedRowConfig,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    search,\n    toolbarButtons,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    inlineEditingActionButtons,\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 || search || toolbarButtons ? (\n        <DataGridToolbarWrapper\n          filters={\n            <Fragment>\n              {search && <DataGridSearchbar {...search} />}\n              {filters && <DataGridToolbar {...filters} />}\n            </Fragment>\n          }\n          buttons={toolbarButtons}\n        />\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            enableNestedRows={!!nestedRowConfig}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            nestedRowConfig={nestedRowConfig}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n            searchValue={search?.initialSearchValue}\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\n      {inlineEditingActionButtons && (\n        <div className={`${classes[\"action-button\"]}`}>{inlineEditingActionButtons}</div>\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends object>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":["DataGrid","React","forwardRef","children","data","initialSort","onSort","headers","actions","paginationProps","nestedRowConfig","disableContextMenuColumn","enableExpandableRow","filters","search","toolbarButtons","isLoading","enableMultiSorting","emptyLabel","spacing","style","inlineEditingActionButtons","rest","ref","Error","internalHeaders","setInternalHeaders","useState","styleWithSpacing","useSpacing","useEffect","padding","splitPaddings","toString","split","paddingLeftIndex","length","Object","defineProperties","paddingTop","value","paddingRight","paddingBottom","paddingLeft","createElement","className","classes","DataGridToolbarWrapper","Fragment","DataGridSearchbar","DataGridToolbar","buttons","DataGridActions","onColumnToggled","colName","map","item","name","hidden","default","DataGridHeader","enableNestedRows","DataGridBody","searchValue","initialSearchValue","Pagination"],"mappings":"ijBA8NaA,EAAWC,EAAMC,YAtJR,EAElBC,WACAC,OACAC,cACAC,SACAC,UACAC,UAAU,CAAC,EACXC,kBACAC,kBACAC,2BACAC,sBACAC,UACAC,SACAC,iBACAC,YACAC,qBACAC,aACAC,UACAC,QACAC,gCACGC,GAELC,KAEA,IAAKhB,EACG,MAAA,IAAIiB,MAAM,yCAElB,IAAKrB,EACG,MAAA,IAAIqB,MAAM,sEAGlB,MAAOC,EAAiBC,GAAsBC,EAAAA,SAASpB,GACjDqB,EAAmBC,EAAAA,WAAWV,EAASC,GAY7C,GAVAU,EAAAA,WAAU,IAAMJ,EAAmBnB,IAAU,CAACA,UAU1CqB,WAAkBG,QAAS,CAC7B,MAAMC,EAAgBJ,EAAiBG,QAAQE,WAAWC,MAAM,KAEhE,IAAIC,EAA2B,EAE3BH,EAAcI,QAAU,IACPD,EAAA,GAEQ,IAAzBH,EAAcI,SACGD,EAAA,GAGrBE,OAAOC,iBAAiBV,EAAkB,CACxCW,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,KAExB,CAID,OAAAlC,EAAA2C,cAAC,MAAA,IACKtB,EACJuB,UAAWC,UAAQ,gBACnBvB,MACAH,MAAO,CACLmB,WAA8B,MAAlBX,OAAkB,EAAAA,EAAAW,WAC9BG,cAAiC,MAAlBd,OAAkB,EAAAA,EAAAc,gBAGlC7B,GAAWC,GAAUC,EACpBd,EAAA2C,cAACG,EAAAA,uBAAA,CACClC,QACEZ,EAAA2C,cAACI,EACEA,SAAA,KAAAlC,mBAAWmC,EAAmBA,kBAAA,IAAGnC,IACjCD,GAAWZ,EAAA2C,cAACM,kBAAiB,IAAGrC,KAGrCsC,QAASpC,IAGXd,EAAA2C,cAACQ,EAAAA,gBAAA,IACK5C,EACJY,MAAO,CACLuB,YAA+B,MAAlBf,OAAkB,EAAAA,EAAAe,YAC/BF,aAAgC,MAAlBb,OAAkB,EAAAA,EAAAa,cAElClC,QAASkB,EACT4B,gBAhEiBC,IACvB5B,EACED,EAAgB8B,KAAIC,GAClBA,EAAKC,OAASH,EAAUE,EAAO,IAAKA,EAAME,QAASF,EAAKE,UAE5D,IA+DEzD,EAAA2C,cAAC,MAAI,CAAAC,UAAWC,EAAQa,QAAA,oBACtBf,cAAC,QAAM,CAAAC,UAAWC,EAAAA,QAAe,OAC/B7C,EAAA2C,cAACgB,EAAAA,eAAA,CACCrD,QAASkB,EACTpB,cACAC,SACAK,2BACAC,sBACAiD,mBAAoBnD,EACpBO,qBACAE,QAASS,IAEX3B,EAAA2C,cAACkB,EAAAA,aAAA,CACC1D,OACAG,QAASkB,EACTT,YACAL,2BACAD,kBACAQ,aACAC,QAASS,EACTmC,YAAqB,MAARjD,OAAQ,EAAAA,EAAAkD,oBAEpB7D,KAINM,IAAoBO,GACnBf,EAAA2C,cAACqB,EAAAA,WAAA,IACKxD,EACJW,MAAO,IACFX,EAAgBW,MACnBuB,YAA+B,MAAlBf,OAAkB,EAAAA,EAAAe,YAC/BF,aAAgC,MAAlBb,OAAkB,EAAAA,EAAAa,cAElCI,UAAW,GAAGC,EAAAA,QAAoB,cAAKrC,EAAgBoC,WAAa,OAIvExB,mBACE,MAAI,CAAAwB,UAAW,GAAGC,UAAQ,oBAAqBzB,GAEpD"}

package/dist/components/DataGrid/DataGrid.es.js

@@ -0,0 +1,147 @@
+import React, { useState, useEffect, Fragment } from "react";
+import classes from "./DataGrid.module.scss.es.js";
+import { DataGridHeader } from "./DataGridHeader/DataGridHeader.es.js";
+import { DataGridActions } from "./DataGridActions/DataGridActions.es.js";
+import { DataGridBody } from "./DataGridBody/DataGridBody.es.js";
+import { Pagination } from "../Pagination/Pagination.es.js";
+import { useSpacing } from "../../hooks/useSpacing.es.js";
+import { DataGridToolbar } from "./DataGridFilters/DataGridToolbar.es.js";
+import { DataGridToolbarWrapper } from "./DataGridFilters/DataGridToolbarWrapper.es.js";
+import { DataGridSearchbar } from "./DataGridFilters/DataGridSearchbar.es.js";
+const DataGridInner = ({
+  children,
+  data,
+  initialSort,
+  onSort,
+  headers,
+  actions = {},
+  paginationProps,
+  nestedRowConfig,
+  disableContextMenuColumn,
+  enableExpandableRow,
+  filters,
+  search,
+  toolbarButtons,
+  isLoading,
+  enableMultiSorting,
+  emptyLabel,
+  spacing,
+  style,
+  inlineEditingActionButtons,
+  ...rest
+}, ref) => {
+  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 ? 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 /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      className: classes["grid-wrapper"],
+      ref,
+      style: {
+        paddingTop: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingTop,
+        paddingBottom: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingBottom
+      }
+    },
+    filters || search || toolbarButtons ? /* @__PURE__ */ React.createElement(
+      DataGridToolbarWrapper,
+      {
+        filters: /* @__PURE__ */ React.createElement(Fragment, null, search && /* @__PURE__ */ React.createElement(DataGridSearchbar, { ...search }), filters && /* @__PURE__ */ React.createElement(DataGridToolbar, { ...filters })),
+        buttons: toolbarButtons
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      DataGridActions,
+      {
+        ...actions,
+        style: {
+          paddingLeft: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingLeft,
+          paddingRight: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingRight
+        },
+        headers: internalHeaders,
+        onColumnToggled
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: classes["table-wrapper"] }, /* @__PURE__ */ React.createElement("table", { className: classes["table"] }, /* @__PURE__ */ React.createElement(
+      DataGridHeader,
+      {
+        headers: internalHeaders,
+        initialSort,
+        onSort,
+        disableContextMenuColumn,
+        enableExpandableRow,
+        enableNestedRows: !!nestedRowConfig,
+        enableMultiSorting,
+        spacing: styleWithSpacing
+      }
+    ), /* @__PURE__ */ React.createElement(
+      DataGridBody,
+      {
+        data,
+        headers: internalHeaders,
+        isLoading,
+        disableContextMenuColumn,
+        nestedRowConfig,
+        emptyLabel,
+        spacing: styleWithSpacing,
+        searchValue: search == null ? void 0 : search.initialSearchValue
+      },
+      children
+    ))),
+    paginationProps && !isLoading && /* @__PURE__ */ React.createElement(
+      Pagination,
+      {
+        ...paginationProps,
+        style: {
+          ...paginationProps.style,
+          paddingLeft: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingLeft,
+          paddingRight: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingRight
+        },
+        className: `${classes["pagination"]} ${paginationProps.className ?? ""}`
+      }
+    ),
+    inlineEditingActionButtons && /* @__PURE__ */ React.createElement("div", { className: `${classes["action-button"]}` }, inlineEditingActionButtons)
+  );
+};
+const DataGrid = React.forwardRef(DataGridInner);
+export {
+  DataGrid
+};
+//# sourceMappingURL=DataGrid.es.js.map

package/dist/components/DataGrid/DataGrid.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGrid.es.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, {\n  ComponentPropsWithRef,\n  Fragment,\n  ReactElement,\n  Ref,\n  useEffect,\n  useState\n} from \"react\";\nimport { Button, 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\";\nimport { DataGridToolbarWrapper } from \"./DataGridFilters/DataGridToolbarWrapper\";\nimport { DataGridSearchbar, DataGridSearchbarProps } from \"./DataGridFilters/DataGridSearchbar\";\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  /**\n   * @deprecated use the `toolbarButtons` prop instead\n   */\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  nestedRowConfig?: {\n    nestedItemsKey?: keyof T;\n  };\n  emptyLabel?: string;\n  paginationProps?: PaginationProps;\n  disableContextMenuColumn?: boolean;\n  enableExpandableRow?: boolean;\n  filters?: DataGridToolbarProps;\n  search?: DataGridSearchbarProps;\n  toolbarButtons?:\n    | ReactElement<ButtonProps, typeof Button>\n    | ReactElement<ButtonProps, typeof Button>[];\n  isLoading?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: Spacing;\n  inlineEditingActionButtons?: ReactElement | ReactElement[];\n}\n\nconst DataGridInner = <T extends object>(\n  {\n    children,\n    data,\n    initialSort,\n    onSort,\n    headers,\n    actions = {},\n    paginationProps,\n    nestedRowConfig,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    filters,\n    search,\n    toolbarButtons,\n    isLoading,\n    enableMultiSorting,\n    emptyLabel,\n    spacing,\n    style,\n    inlineEditingActionButtons,\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 || search || toolbarButtons ? (\n        <DataGridToolbarWrapper\n          filters={\n            <Fragment>\n              {search && <DataGridSearchbar {...search} />}\n              {filters && <DataGridToolbar {...filters} />}\n            </Fragment>\n          }\n          buttons={toolbarButtons}\n        />\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            enableNestedRows={!!nestedRowConfig}\n            enableMultiSorting={enableMultiSorting}\n            spacing={styleWithSpacing}\n          />\n          <DataGridBody\n            data={data}\n            headers={internalHeaders}\n            isLoading={isLoading}\n            disableContextMenuColumn={disableContextMenuColumn}\n            nestedRowConfig={nestedRowConfig}\n            emptyLabel={emptyLabel}\n            spacing={styleWithSpacing}\n            searchValue={search?.initialSearchValue}\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\n      {inlineEditingActionButtons && (\n        <div className={`${classes[\"action-button\"]}`}>{inlineEditingActionButtons}</div>\n      )}\n    </div>\n  );\n};\n\nexport const DataGrid = React.forwardRef(DataGridInner) as <T extends object>(\n  p: Props<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement;\n"],"names":[],"mappings":"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"}

package/dist/components/DataGrid/DataGrid.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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_grid-wrapper_7l1Pc{padding:.875rem 0}.DataGrid_table-wrapper_7l1Pc{overflow-x:auto;overflow-y:hidden}.DataGrid_table_7l1Pc{border-collapse:collapse;padding-top:.5rem;width:100%;position:relative}.DataGrid_pagination_7l1Pc{margin-top:.875rem;padding:0 1rem}.DataGrid_action-button_7l1Pc{display:flex;margin-top:2rem}.DataGrid_action-button_7l1Pc button{margin-right:1rem}@media only screen and (min-width: 50em){.DataGrid_pagination_7l1Pc{padding:0 1.25rem}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a="DataGrid_table_7l1Pc",t="DataGrid_pagination_7l1Pc",e={"grid-wrapper":"DataGrid_grid-wrapper_7l1Pc","table-wrapper":"DataGrid_table-wrapper_7l1Pc",table:a,pagination:t,"action-button":"DataGrid_action-button_7l1Pc"};exports.default=e,exports.pagination=t,exports.table=a;
+//# sourceMappingURL=DataGrid.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGrid.module.scss.cjs.js.map

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

package/dist/components/DataGrid/DataGrid.module.scss.es.js

@@ -0,0 +1,16 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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_grid-wrapper_7l1Pc{padding:.875rem 0}.DataGrid_table-wrapper_7l1Pc{overflow-x:auto;overflow-y:hidden}.DataGrid_table_7l1Pc{border-collapse:collapse;padding-top:.5rem;width:100%;position:relative}.DataGrid_pagination_7l1Pc{margin-top:.875rem;padding:0 1rem}.DataGrid_action-button_7l1Pc{display:flex;margin-top:2rem}.DataGrid_action-button_7l1Pc button{margin-right:1rem}@media only screen and (min-width: 50em){.DataGrid_pagination_7l1Pc{padding:0 1.25rem}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const table = "DataGrid_table_7l1Pc";
+const pagination = "DataGrid_pagination_7l1Pc";
+const classes = {
+  "grid-wrapper": "DataGrid_grid-wrapper_7l1Pc",
+  "table-wrapper": "DataGrid_table-wrapper_7l1Pc",
+  table,
+  pagination,
+  "action-button": "DataGrid_action-button_7l1Pc"
+};
+export {
+  classes as default,
+  pagination,
+  table
+};
+//# sourceMappingURL=DataGrid.module.scss.es.js.map

package/dist/components/DataGrid/DataGrid.module.scss.es.js.map

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

package/dist/components/DataGrid/DataGridActions/DataGridActions.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../Button/Button.cjs.js"),n=require("../../Button/IconButton.cjs.js"),a=require("../../Icon/Icon.cjs.js"),l=require("./DataGridActions.module.scss.cjs.js"),c=require("./DataGridColumnsToggle.cjs.js"),o=e.forwardRef((({className:o,enableAddBtn:r,enableColumnsBtn:s,enableSearchBtn:i,addBtnProps:u={},columnsBtnProps:m={},searchBtnProps:d={},searchIconBtnProps:h={},headers:I,onColumnToggled:E,children:B,...g},f)=>{const p=!(r||s||i),[N,j]=e.useState(!1),v=e.useRef(null),{children:C,...S}=u,{children:b,...$}=m,{children:T,...q}=d;return p?null:e.createElement("div",{...g,ref:f,className:`${l.default.actions} ${o??""}`},e.createElement("div",{className:l.default["left-actions"]},r&&e.createElement(t.Button,{color:"primary",startIcon:e.createElement(a.Icon,{icon:a.Icons.Plus}),title:"Add item",type:"button",variant:"outline",...S},C??"Add item")),e.createElement("div",{className:l.default["right-actions"]},s&&e.createElement(e.Fragment,null,e.createElement(t.Button,{startIcon:e.createElement(a.Icon,{icon:a.Icons.Change}),title:"Show/hide columns",variant:"text",...$,className:`${l.default.desktop} ${(null==m?void 0:m.className)??""}`,ref:v,onClick:()=>j(!0)},b??"Columns"),e.createElement(n.IconButton,{title:"Show/hide columns",...m,onClick:()=>j(!0),className:`${l.default.mobile} ${(null==m?void 0:m.className)??""}`},e.createElement(a.Icon,{icon:a.Icons.Change})),e.createElement(c.DataGridColumnsToggle,{"aria-hidden":!N,open:N,headers:I,onClose:()=>j(!1),onToggleClicked:E,anchorEl:v})),i&&e.createElement(e.Fragment,null,e.createElement(t.Button,{startIcon:e.createElement(a.Icon,{icon:a.Icons.TableSearch}),title:"Search",variant:"text",...q,className:`${l.default.desktop} ${(null==d?void 0:d.className)??""}`},T??"Search"),e.createElement(n.IconButton,{title:"Search",...h,className:`${l.default.mobile} ${(null==m?void 0:m.className)??""}`},e.createElement(a.Icon,{icon:a.Icons.TableSearch})))))}));exports.DataGridActions=o;
+//# sourceMappingURL=DataGridActions.cjs.js.map

package/dist/components/DataGrid/DataGridActions/DataGridActions.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridActions.cjs.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":["DataGridActions","React","forwardRef","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","createElement","classes","default","Button","color","startIcon","Icon","icon","Icons","Plus","title","type","variant","Fragment","Change","onClick","IconButton","DataGridColumnsToggle","open","onClose","onToggleClicked","anchorEl","TableSearch"],"mappings":"+TA2IaA,EAAkBC,EAAMC,YAjG6C,EAE9EC,YACAC,eACAC,mBACAC,kBACAC,cAAc,CAAC,EACfC,kBAAkB,CAAC,EACnBC,iBAAiB,CAAC,EAClBC,qBAAqB,CAAC,EACtBC,UACAC,kBACAC,cACGC,GAELC,KAEM,MAAAC,IAAaZ,GAAgBC,GAAoBC,IAChDW,EAAiBC,GAAsBC,EAAAA,UAAS,GACjDC,EAAgBC,SAA0B,OACxCR,SAAUS,KAAmBC,GAAoBhB,GACjDM,SAAUW,KAAuBC,GAAwBjB,GACzDK,SAAUa,KAAsBC,GAAuBlB,EAExD,OAAAO,EAAW,KACff,EAAA2B,cAAA,MAAA,IAAQd,EAAMC,MAAUZ,UAAW,GAAG0B,EAAQC,QAAS,WAAK3B,GAAa,MACxEF,EAAA2B,cAAC,OAAIzB,UAAW0B,EAAAC,QAAQ,iBACrB1B,GACCH,EAAA2B,cAACG,EAAAA,OAAA,CACCC,MAAM,UACNC,UAAWhC,EAAA2B,cAACM,EAAAA,KAAK,CAAAC,KAAMC,EAAAA,MAAMC,OAC7BC,MAAM,WACNC,KAAK,SACLC,QAAQ,aACJjB,GAEHD,GAAkB,aAIzBrB,EAAA2B,cAAC,MAAI,CAAAzB,UAAW0B,EAAAA,QAAQ,kBACrBxB,GACCJ,EAAA2B,cAACa,EAAAA,SACC,KAAAxC,EAAA2B,cAACG,EAAAA,OAAA,CACCE,UAAWhC,EAAA2B,cAACM,EAAAA,KAAK,CAAAC,KAAMC,EAAAA,MAAMM,SAC7BJ,MAAM,oBACNE,QAAQ,UACJf,EACJtB,UAAW,GAAG0B,EAAAA,QAAiB,YAAsB,MAAjBrB,OAAiB,EAAAA,EAAAL,YAAa,KAClEY,IAAKK,EACLuB,QAAS,IAAMzB,GAAmB,IAEjCM,GAAsB,WAEzBvB,EAAA2B,cAACgB,EAAAA,WAAA,CACCN,MAAM,uBACF9B,EACJmC,QAAS,IAAMzB,GAAmB,GAClCf,UAAW,GAAG0B,EAAAA,QAAgB,WAAsB,MAAjBrB,OAAiB,EAAAA,EAAAL,YAAa,MAEhEF,EAAA2B,cAAAM,EAAAA,KAAA,CAAKC,KAAMC,EAAAA,MAAMM,UAEpBzC,EAAA2B,cAACiB,EAAAA,sBAAA,CACC,eAAc5B,EACd6B,KAAM7B,EACNN,UACAoC,QAAS,IAAM7B,GAAmB,GAClC8B,gBAAiBpC,EACjBqC,SAAU7B,KAIfd,GACCL,EAAA2B,cAACa,EAAAA,SACC,KAAAxC,EAAA2B,cAACG,EAAAA,OAAA,CACCE,UAAWhC,EAAA2B,cAACM,EAAAA,KAAK,CAAAC,KAAMC,EAAAA,MAAMc,cAC7BZ,MAAM,SACNE,QAAQ,UACJb,EACJxB,UAAW,GAAG0B,EAAAA,QAAiB,YAAqB,MAAhBpB,OAAgB,EAAAA,EAAAN,YAAa,MAEhEuB,GAAqB,UAExBzB,EAAA2B,cAACgB,EAAAA,WAAA,CACCN,MAAM,YACF5B,EACJP,UAAW,GAAG0B,EAAAA,QAAgB,WAAsB,MAAjBrB,OAAiB,EAAAA,EAAAL,YAAa,MAEhEF,EAAA2B,cAAAM,EAAAA,KAAA,CAAKC,KAAMC,EAAAA,MAAMc,iBAK5B"}

package/dist/components/DataGrid/DataGridActions/DataGridActions.es.js

@@ -0,0 +1,93 @@
+import React, { useState, useRef, Fragment } from "react";
+import { Button } from "../../Button/Button.es.js";
+import { IconButton } from "../../Button/IconButton.es.js";
+import { Icon, Icons } from "../../Icon/Icon.es.js";
+import classes from "./DataGridActions.module.scss.es.js";
+import { DataGridColumnsToggle } from "./DataGridColumnsToggle.es.js";
+const DataGridActionsComponent = ({
+  className,
+  enableAddBtn,
+  enableColumnsBtn,
+  enableSearchBtn,
+  addBtnProps = {},
+  columnsBtnProps = {},
+  searchBtnProps = {},
+  searchIconBtnProps = {},
+  headers,
+  onColumnToggled,
+  children,
+  ...rest
+}, ref) => {
+  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 : /* @__PURE__ */ React.createElement("div", { ...rest, ref, className: `${classes["actions"]} ${className ?? ""}` }, /* @__PURE__ */ React.createElement("div", { className: classes["left-actions"] }, enableAddBtn && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "primary",
+      startIcon: /* @__PURE__ */ React.createElement(Icon, { icon: Icons.Plus }),
+      title: "Add item",
+      type: "button",
+      variant: "outline",
+      ...restAddBtnProps
+    },
+    addBtnChildren ?? "Add item"
+  )), /* @__PURE__ */ React.createElement("div", { className: classes["right-actions"] }, enableColumnsBtn && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      startIcon: /* @__PURE__ */ React.createElement(Icon, { icon: Icons.Change }),
+      title: "Show/hide columns",
+      variant: "text",
+      ...restColumnsBtnProps,
+      className: `${classes["desktop"]} ${(columnsBtnProps == null ? void 0 : columnsBtnProps.className) ?? ""}`,
+      ref: showColumnBtn,
+      onClick: () => setShowColsPopover(true)
+    },
+    columnsBtnChildren ?? "Columns"
+  ), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      title: "Show/hide columns",
+      ...columnsBtnProps,
+      onClick: () => setShowColsPopover(true),
+      className: `${classes["mobile"]} ${(columnsBtnProps == null ? void 0 : columnsBtnProps.className) ?? ""}`
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: Icons.Change })
+  ), /* @__PURE__ */ React.createElement(
+    DataGridColumnsToggle,
+    {
+      "aria-hidden": !showColsPopover,
+      open: showColsPopover,
+      headers,
+      onClose: () => setShowColsPopover(false),
+      onToggleClicked: onColumnToggled,
+      anchorEl: showColumnBtn
+    }
+  )), enableSearchBtn && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      startIcon: /* @__PURE__ */ React.createElement(Icon, { icon: Icons.TableSearch }),
+      title: "Search",
+      variant: "text",
+      ...restSearchBtnProps,
+      className: `${classes["desktop"]} ${(searchBtnProps == null ? void 0 : searchBtnProps.className) ?? ""}`
+    },
+    searchBtnChildren ?? "Search"
+  ), /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      title: "Search",
+      ...searchIconBtnProps,
+      className: `${classes["mobile"]} ${(columnsBtnProps == null ? void 0 : columnsBtnProps.className) ?? ""}`
+    },
+    /* @__PURE__ */ React.createElement(Icon, { icon: Icons.TableSearch })
+  ))));
+};
+const DataGridActions = React.forwardRef(DataGridActionsComponent);
+export {
+  DataGridActions
+};
+//# sourceMappingURL=DataGridActions.es.js.map

package/dist/components/DataGrid/DataGridActions/DataGridActions.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridActions.es.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/components/DataGrid/DataGridActions/DataGridActions.module.scss.cjs.js

@@ -0,0 +1,3 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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_actions_7l1Pc{margin-bottom:1rem;padding:0 1rem;display:flex;flex-wrap:wrap}.DataGridActions_left-actions_7l1Pc{flex:1}.DataGridActions_right-actions_7l1Pc{display:flex;gap:1rem}.DataGridActions_desktop_7l1Pc{display:none}@media only screen and (min-width: 50em){.DataGridActions_actions_7l1Pc{padding:0 1.25rem}}@media only screen and (min-width: 30em){.DataGridActions_desktop_7l1Pc{display:flex}.DataGridActions_mobile_7l1Pc{display:none}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="DataGridActions_actions_7l1Pc",o="DataGridActions_desktop_7l1Pc",i="DataGridActions_mobile_7l1Pc",e={actions:t,"left-actions":"DataGridActions_left-actions_7l1Pc","right-actions":"DataGridActions_right-actions_7l1Pc",desktop:o,mobile:i};exports.actions=t,exports.default=e,exports.desktop=o,exports.mobile=i;
+//# sourceMappingURL=DataGridActions.module.scss.cjs.js.map

package/dist/components/DataGrid/DataGridActions/DataGridActions.module.scss.cjs.js.map

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

package/dist/components/DataGrid/DataGridActions/DataGridActions.module.scss.es.js

@@ -0,0 +1,18 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('/*!\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_actions_7l1Pc{margin-bottom:1rem;padding:0 1rem;display:flex;flex-wrap:wrap}.DataGridActions_left-actions_7l1Pc{flex:1}.DataGridActions_right-actions_7l1Pc{display:flex;gap:1rem}.DataGridActions_desktop_7l1Pc{display:none}@media only screen and (min-width: 50em){.DataGridActions_actions_7l1Pc{padding:0 1.25rem}}@media only screen and (min-width: 30em){.DataGridActions_desktop_7l1Pc{display:flex}.DataGridActions_mobile_7l1Pc{display:none}}')),document.head.appendChild(e)}}catch(n){console.error("vite-plugin-css-injected-by-js",n)}}();
+const actions = "DataGridActions_actions_7l1Pc";
+const desktop = "DataGridActions_desktop_7l1Pc";
+const mobile = "DataGridActions_mobile_7l1Pc";
+const classes = {
+  actions,
+  "left-actions": "DataGridActions_left-actions_7l1Pc",
+  "right-actions": "DataGridActions_right-actions_7l1Pc",
+  desktop,
+  mobile
+};
+export {
+  actions,
+  classes as default,
+  desktop,
+  mobile
+};
+//# sourceMappingURL=DataGridActions.module.scss.es.js.map

package/dist/components/DataGrid/DataGridActions/DataGridActions.module.scss.es.js.map

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

package/dist/components/DataGrid/DataGridActions/DataGridColumnsToggle.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../../Button/IconButton.cjs.js"),t=require("../../Form/Toggle/Toggle.cjs.js"),o=require("../../Icon/Icon.cjs.js"),r=require("../../Popover/Popover.cjs.js"),l=require("../../Typography/Typography.cjs.js"),n=require("../../../util/helper.cjs.js"),s=require("./DataGridColumnsToggle.module.scss.cjs.js"),c=require("react-dom"),i=e.forwardRef((({open:i,headers:d,titleLabel:m="Show columns",closeButtonTitle:u="Close show columns dialog",onClose:g,onToggleClicked:p,className:h,domRoot:j=document.body,...T},y)=>{const[f]=e.useState(n.generateID()),b=f+"_header",q=d.map((a=>e.createElement(t.Toggle,{key:a.name,name:a.name,checked:!a.hidden,onChange:()=>p(a.name),label:a.headline})));return e.createElement(r.Popover,{...T,ref:y,className:`${s.default.popover} ${h}`,show:i,role:"dialog","aria-modal":"true","aria-labelledby":b},c.createPortal(e.createElement("div",{"aria-hidden":"true",className:s.default.backdrop,onClick:()=>g()}),j),e.createElement(e.Fragment,null,e.createElement("div",{className:s.default.header},e.createElement(l.Typography,{id:b,className:s.default.title,tag:"span",variant:"h4"},m),e.createElement(a.IconButton,{onClick:g,className:`${s.default["close-btn"]}`,title:u},e.createElement(o.Icon,{icon:o.Icons.Times}))),e.createElement("div",{className:s.default.content},q)))}));exports.DataGridColumnsToggle=i;
+//# sourceMappingURL=DataGridColumnsToggle.cjs.js.map

package/dist/components/DataGrid/DataGridActions/DataGridColumnsToggle.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridColumnsToggle.cjs.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      {createPortal(\n        <div\n          aria-hidden=\"true\"\n          className={classes[\"backdrop\"]}\n          onClick={handleBackdropClick}\n        ></div>,\n        domRoot\n      )}\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    </Popover>\n  );\n};\n\nexport const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);\n"],"names":["DataGridColumnsToggle","React","forwardRef","open","headers","titleLabel","closeButtonTitle","onClose","onToggleClicked","className","domRoot","document","body","rest","ref","id","useState","generateID","labelledId","toggles","map","item","createElement","Toggle","key","name","checked","hidden","onChange","label","headline","Popover","classes","default","show","role","createPortal","onClick","Fragment","Typography","tag","variant","IconButton","title","Icon","icon","Icons","Times"],"mappings":"wbAuGaA,EAAwBC,EAAMC,YAlE6C,EAEpFC,OACAC,UACAC,aAAa,eACbC,mBAAmB,4BACnBC,UACAC,kBACAC,YACAC,UAAUC,SAASC,QAChBC,GAELC,KAEA,MAAOC,GAAMC,EAAAA,SAASC,gBAChBC,EAAaH,EAAK,UAElBI,EAAUf,EAAQgB,KACtBC,GAAApB,EAAAqB,cAACC,EAAAA,OAAA,CACCC,IAAKH,EAAKI,KACVA,KAAMJ,EAAKI,KACXC,SAAUL,EAAKM,OACfC,SAAU,IAAMpB,EAAgBa,EAAKI,MACrCI,MAAOR,EAAKS,aAOd,OAAA7B,EAAAqB,cAACS,EAAAA,QAAA,IACKlB,EACJC,MACAL,UAAW,GAAGuB,EAAAC,QAAiB,WAAKxB,IACpCyB,KAAM/B,EACNgC,KAAK,SACL,aAAW,OACX,kBAAiBjB,GAEhBkB,EAAAA,aACCnC,EAAAqB,cAAC,MAAA,CACC,cAAY,OACZb,UAAWuB,UAAkB,SAC7BK,QAhBoB,IAAM9B,MAkB5BG,GAEFT,EAAAqB,cAACgB,EAAAA,cACErC,EAAAqB,cAAA,MAAA,CAAIb,UAAWuB,EAAQC,QAAQ,QAC7BhC,EAAAqB,cAAAiB,aAAA,CAAWxB,GAAIG,EAAYT,UAAWuB,UAAe,MAAGQ,IAAI,OAAOC,QAAQ,MACzEpC,GAEHJ,EAAAqB,cAACoB,EAAAA,WAAA,CACCL,QAAS9B,EACTE,UAAW,GAAGuB,UAAQ,eACtBW,MAAOrC,GAENL,EAAAqB,cAAAsB,EAAAA,KAAA,CAAKC,KAAMC,EAAAA,MAAMC,UAGrB9C,EAAAqB,cAAA,MAAA,CAAIb,UAAWuB,UAAiB,SAAIb,IAEzC"}