@onewelcome/react-lib-components 6.7.1 → 7.1.0

package/dist/esm/DataGrid/DataGridFilters/DataGridFilterService.esm.js

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { DefaultOperators } from './DataGridFilters.interfaces.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 useDataGridFilter = (mode, columnsMetadata) => {
+    const [column, setColumn] = useState("");
+    const [operator, setOperator] = useState("");
+    const [operators, setOperators] = useState(Object.values(DefaultOperators));
+    const [values, setValues] = useState([]);
+    const [pickedValues, setPickedValues] = useState([]);
+    //user can extend the list of picked values with custom ones. We need to make sure that the default list includes the user created values.
+    const mergeCustomValuesWithPredefined = (values, pickedValues) => {
+        return Array.from(new Set([...values, ...pickedValues]));
+    };
+    const resetFields = () => {
+        setColumn("");
+        setOperator("");
+        setValues([]);
+        setPickedValues([]);
+    };
+    const initialiseFilterValues = (filter) => {
+        if (mode === "ADD") {
+            const firstColumnMetadata = columnsMetadata[0];
+            if (!firstColumnMetadata) {
+                return;
+            }
+            setColumn(firstColumnMetadata.name);
+            setOperator(firstColumnMetadata.operators
+                ? firstColumnMetadata.operators[0]
+                : Object.values(DefaultOperators)[0]);
+            firstColumnMetadata.operators && setOperators(firstColumnMetadata.operators);
+            firstColumnMetadata.defaultValues && setValues(firstColumnMetadata.defaultValues);
+        }
+        if (mode === "EDIT" && filter) {
+            const { column, operator, value } = filter;
+            const columnMetadata = columnsMetadata.find(({ name }) => name === column);
+            if (!columnMetadata) {
+                return;
+            }
+            const { defaultValues, operators } = columnMetadata;
+            setColumn(column);
+            setOperator(operator);
+            operators && setOperators(operators);
+            setPickedValues(value);
+            setValues(mergeCustomValuesWithPredefined(defaultValues || [], value));
+        }
+    };
+    return {
+        resetFields,
+        initialiseFilterValues,
+        operator,
+        setOperator,
+        operators,
+        setOperators,
+        column,
+        setColumn,
+        values,
+        setValues,
+        pickedValues,
+        setPickedValues
+    };
+};
+
+export { useDataGridFilter };
+//# sourceMappingURL=DataGridFilterService.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilterService.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridFilterService.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 { useState } from \"react\";\nimport {\n  DataGridColumnMetadata,\n  DefaultOperators,\n  Filter,\n  FilterEditorMode\n} from \"./DataGridFilters.interfaces\";\n\nexport const useDataGridFilter = (\n  mode: FilterEditorMode,\n  columnsMetadata: DataGridColumnMetadata[]\n) => {\n  const [column, setColumn] = useState(\"\");\n  const [operator, setOperator] = useState(\"\");\n  const [operators, setOperators] = useState<string[]>(Object.values(DefaultOperators));\n  const [values, setValues] = useState<string[]>([]);\n  const [pickedValues, setPickedValues] = useState<string[]>([]);\n\n  //user can extend the list of picked values with custom ones. We need to make sure that the default list includes the user created values.\n  const mergeCustomValuesWithPredefined = (values: string[], pickedValues: string[]) => {\n    return Array.from(new Set([...values, ...pickedValues]));\n  };\n\n  const resetFields = () => {\n    setColumn(\"\");\n    setOperator(\"\");\n    setValues([]);\n    setPickedValues([]);\n  };\n\n  const initialiseFilterValues = (filter?: Filter) => {\n    if (mode === \"ADD\") {\n      const firstColumnMetadata = columnsMetadata[0];\n\n      if (!firstColumnMetadata) {\n        return;\n      }\n\n      setColumn(firstColumnMetadata.name);\n      setOperator(\n        firstColumnMetadata.operators\n          ? firstColumnMetadata.operators[0]\n          : Object.values(DefaultOperators)[0]\n      );\n      firstColumnMetadata.operators && setOperators(firstColumnMetadata.operators);\n      firstColumnMetadata.defaultValues && setValues(firstColumnMetadata.defaultValues);\n    }\n\n    if (mode === \"EDIT\" && filter) {\n      const { column, operator, value } = filter;\n      const columnMetadata = columnsMetadata.find(({ name }) => name === column);\n\n      if (!columnMetadata) {\n        return;\n      }\n\n      const { defaultValues, operators } = columnMetadata;\n\n      setColumn(column);\n      setOperator(operator);\n      operators && setOperators(operators);\n      setPickedValues(value);\n      setValues(mergeCustomValuesWithPredefined(defaultValues || [], value));\n    }\n  };\n\n  return {\n    resetFields,\n    initialiseFilterValues,\n    operator,\n    setOperator,\n    operators,\n    setOperators,\n    column,\n    setColumn,\n    values,\n    setValues,\n    pickedValues,\n    setPickedValues\n  };\n};\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;AAcG;MAUU,iBAAiB,GAAG,CAC/B,IAAsB,EACtB,eAAyC,KACvC;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC7C,IAAA,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAW,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACtF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;;AAG/D,IAAA,MAAM,+BAA+B,GAAG,CAAC,MAAgB,EAAE,YAAsB,KAAI;AACnF,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;AAC3D,KAAC,CAAC;IAEF,MAAM,WAAW,GAAG,MAAK;QACvB,SAAS,CAAC,EAAE,CAAC,CAAC;QACd,WAAW,CAAC,EAAE,CAAC,CAAC;QAChB,SAAS,CAAC,EAAE,CAAC,CAAC;QACd,eAAe,CAAC,EAAE,CAAC,CAAC;AACtB,KAAC,CAAC;AAEF,IAAA,MAAM,sBAAsB,GAAG,CAAC,MAAe,KAAI;AACjD,QAAA,IAAI,IAAI,KAAK,KAAK,EAAE;AAClB,YAAA,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;YAE/C,IAAI,CAAC,mBAAmB,EAAE;gBACxB,OAAO;aACR;AAED,YAAA,SAAS,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;YACpC,WAAW,CACT,mBAAmB,CAAC,SAAS;AAC3B,kBAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC;kBAChC,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CACvC,CAAC;YACF,mBAAmB,CAAC,SAAS,IAAI,YAAY,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;YAC7E,mBAAmB,CAAC,aAAa,IAAI,SAAS,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC;SACnF;AAED,QAAA,IAAI,IAAI,KAAK,MAAM,IAAI,MAAM,EAAE;YAC7B,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;AAC3C,YAAA,MAAM,cAAc,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC;YAE3E,IAAI,CAAC,cAAc,EAAE;gBACnB,OAAO;aACR;AAED,YAAA,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,cAAc,CAAC;YAEpD,SAAS,CAAC,MAAM,CAAC,CAAC;YAClB,WAAW,CAAC,QAAQ,CAAC,CAAC;AACtB,YAAA,SAAS,IAAI,YAAY,CAAC,SAAS,CAAC,CAAC;YACrC,eAAe,CAAC,KAAK,CAAC,CAAC;YACvB,SAAS,CAAC,+BAA+B,CAAC,aAAa,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;SACxE;AACH,KAAC,CAAC;IAEF,OAAO;QACL,WAAW;QACX,sBAAsB;QACtB,QAAQ;QACR,WAAW;QACX,SAAS;QACT,YAAY;QACZ,MAAM;QACN,SAAS;QACT,MAAM;QACN,SAAS;QACT,YAAY;QACZ,eAAe;KAChB,CAAC;AACJ;;;;"}

package/dist/esm/DataGrid/DataGridFilters/DataGridFilterTag.esm.js

@@ -0,0 +1,54 @@
+import React, { Fragment } from 'react';
+import { Icon, Icons } from '../../Icon/Icon.esm.js';
+import { RemoveButton } from '../../Tag/RemoveButton.esm.js';
+import { Typography } from '../../Typography/Typography.esm.js';
+import classes from './DataGridFilter.module.scss.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 EditTagContent = ({ filter }) => {
+    const { column, operator, value } = filter;
+    return (React.createElement(Fragment, null,
+        column,
+        " ",
+        operator,
+        " ",
+        value.length > 0 && React.createElement("b", null, value[0]),
+        value.length >= 2 && (React.createElement(React.Fragment, null,
+            " ",
+            "or ",
+            React.createElement("b", null,
+                " ",
+                value.length - 1,
+                " other")))));
+};
+const DataGridFilterTagComponent = ({ triggerRef, filter, mode, onFilterRemove, onFilterOpen, translations, ...rest }, ref) => {
+    const { addButtonCaption = "Add filter" } = translations || {};
+    const shouldRenderAddTag = mode === "ADD";
+    const shouldRenderEditTag = mode === "EDIT" && filter;
+    return (React.createElement("div", { ...rest, ref: triggerRef, className: classes["filter-wrapper"] },
+        React.createElement("button", { type: "button", className: classes["filter-button"], onClick: onFilterOpen },
+            shouldRenderAddTag && (React.createElement(Fragment, null,
+                React.createElement(Icon, { icon: Icons.AddCircle }),
+                React.createElement(Typography, { variant: "body", className: classes["caption"] }, addButtonCaption))),
+            shouldRenderEditTag && (React.createElement(Typography, { variant: "body", className: classes["caption"] },
+                React.createElement(EditTagContent, { filter: filter })))),
+        shouldRenderEditTag && React.createElement(RemoveButton, { onRemove: onFilterRemove })));
+};
+const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);
+
+export { DataGridFilterTag, DataGridFilterTagComponent };
+//# sourceMappingURL=DataGridFilterTag.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilterTag.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridFilterTag.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, ForwardRefRenderFunction, Fragment } from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { RemoveButton } from \"../../Tag/RemoveButton\";\nimport { Typography } from \"../../Typography/Typography\";\nimport classes from \"./DataGridFilter.module.scss\";\nimport { Filter, FilterEditorMode, TagTranslations } from \"./DataGridFilters.interfaces\";\n\nexport interface DataGridFilterTagProps extends ComponentPropsWithRef<\"div\"> {\n  triggerRef: React.Ref<HTMLDivElement>;\n  filter?: Filter;\n  mode: FilterEditorMode;\n  onFilterRemove: () => void;\n  onFilterOpen: () => void;\n  translations?: TagTranslations;\n}\n\nconst EditTagContent = ({ filter }: { filter: Filter }) => {\n  const { column, operator, value } = filter;\n\n  return (\n    <Fragment>\n      {column} {operator} {value.length > 0 && <b>{value[0]}</b>}\n      {value.length >= 2 && (\n        <>\n          {\" \"}\n          or <b> {value.length - 1} other</b>\n        </>\n      )}\n    </Fragment>\n  );\n};\n\nexport const DataGridFilterTagComponent: ForwardRefRenderFunction<\n  HTMLDivElement,\n  DataGridFilterTagProps\n> = (\n  {\n    triggerRef,\n    filter,\n    mode,\n    onFilterRemove,\n    onFilterOpen,\n    translations,\n\n    ...rest\n  }: DataGridFilterTagProps,\n  ref\n) => {\n  const { addButtonCaption = \"Add filter\" } = translations || {};\n  const shouldRenderAddTag = mode === \"ADD\";\n  const shouldRenderEditTag = mode === \"EDIT\" && filter;\n\n  return (\n    <div {...rest} ref={triggerRef} className={classes[\"filter-wrapper\"]}>\n      <button type=\"button\" className={classes[\"filter-button\"]} onClick={onFilterOpen}>\n        {shouldRenderAddTag && (\n          <Fragment>\n            <Icon icon={Icons.AddCircle} />\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {addButtonCaption}\n            </Typography>\n          </Fragment>\n        )}\n        {shouldRenderEditTag && (\n          <Typography variant=\"body\" className={classes[\"caption\"]}>\n            <EditTagContent filter={filter} />\n          </Typography>\n        )}\n      </button>\n      {shouldRenderEditTag && <RemoveButton onRemove={onFilterRemove} />}\n    </div>\n  );\n};\n\nexport const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);\n"],"names":[],"mappings":";;;;;;AAAA;;;;;;;;;;;;;;AAcG;AAkBH,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAsB,KAAI;IACxD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;IAE3C,QACE,oBAAC,QAAQ,EAAA,IAAA;QACN,MAAM;;QAAG,QAAQ;;QAAG,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,+BAAI,KAAK,CAAC,CAAC,CAAC,CAAK;AACzD,QAAA,KAAK,CAAC,MAAM,IAAI,CAAC,KAChB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;YACG,GAAG;;AACD,YAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA;;gBAAK,KAAK,CAAC,MAAM,GAAG,CAAC;yBAAW,CAClC,CACJ,CACQ,EACX;AACJ,CAAC,CAAC;AAEW,MAAA,0BAA0B,GAGnC,CACF,EACE,UAAU,EACV,MAAM,EACN,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,YAAY,EAEZ,GAAG,IAAI,EACgB,EACzB,GAAG,KACD;IACF,MAAM,EAAE,gBAAgB,GAAG,YAAY,EAAE,GAAG,YAAY,IAAI,EAAE,CAAC;AAC/D,IAAA,MAAM,kBAAkB,GAAG,IAAI,KAAK,KAAK,CAAC;AAC1C,IAAA,MAAM,mBAAmB,GAAG,IAAI,KAAK,MAAM,IAAI,MAAM,CAAC;AAEtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAS,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAAA;AAClE,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,OAAO,EAAE,YAAY,EAAA;YAC7E,kBAAkB,KACjB,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACP,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,KAAK,CAAC,SAAS,EAAI,CAAA;AAC/B,gBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAA,EACrD,gBAAgB,CACN,CACJ,CACZ;AACA,YAAA,mBAAmB,KAClB,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,EAAA;gBACtD,KAAC,CAAA,aAAA,CAAA,cAAc,IAAC,MAAM,EAAE,MAAM,EAAI,CAAA,CACvB,CACd,CACM;QACR,mBAAmB,IAAI,KAAC,CAAA,aAAA,CAAA,YAAY,EAAC,EAAA,QAAQ,EAAE,cAAc,EAAA,CAAI,CAC9D,EACN;AACJ,EAAE;AAEW,MAAA,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,0BAA0B;;;;"}

package/dist/esm/DataGrid/DataGridFilters/DataGridFilters.interfaces.esm.js

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+var DefaultOperators;
+(function (DefaultOperators) {
+    DefaultOperators["is"] = "is";
+    DefaultOperators["isNot"] = "is not";
+    DefaultOperators["contains"] = "contains";
+    DefaultOperators["doesNotContain"] = "does not contain";
+    DefaultOperators["isEmpty"] = "is empty";
+})(DefaultOperators || (DefaultOperators = {}));
+
+export { DefaultOperators };
+//# sourceMappingURL=DataGridFilters.interfaces.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridFilters.interfaces.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.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\nexport interface Filter {\n  id: string;\n  column: string;\n  operator: string;\n  value: string[];\n}\n\nexport type FiltersAction =\n  | {\n      type: \"add\";\n      payload: Filter;\n    }\n  | {\n      type: \"edit\";\n      payload: Filter;\n    }\n  | {\n      type: \"remove\";\n      payload: { id: string };\n    }\n  | {\n      type: \"clear\";\n    };\n\nexport type FiltersState = {\n  filters: Filter[];\n};\n\nexport type FilterEditorMode = \"ADD\" | \"EDIT\";\n\nexport enum DefaultOperators {\n  is = \"is\",\n  isNot = \"is not\",\n  contains = \"contains\",\n  doesNotContain = \"does not contain\",\n  isEmpty = \"is empty\"\n}\n\nexport interface DataGridColumnMetadata {\n  name: string;\n  headline: string;\n  operators?: string[];\n  defaultValues?: string[];\n}\n\nexport interface PopoverTranslations {\n  columnSelectLabel?: string;\n  operatorSelectLabel?: string;\n  valueSelectLabel?: string;\n  addNewValueLabel?: string;\n  addNewValueButtonTitle?: string;\n  submitButtonTitle?: string;\n  cancelButtonTitle?: string;\n}\n\nexport interface TagTranslations {\n  addButtonCaption?: string;\n}\n\nexport interface ToolbarTranslations {\n  clearButtonCaption?: string;\n}\n\nexport interface FiltersTranslations {\n  toolbar?: ToolbarTranslations;\n  tag?: TagTranslations;\n  popover?: PopoverTranslations;\n}\n"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;AAcG;IAgCS,iBAMX;AAND,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,OAAA,CAAA,GAAA,QAAgB,CAAA;AAChB,IAAA,gBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrB,IAAA,gBAAA,CAAA,gBAAA,CAAA,GAAA,kBAAmC,CAAA;AACnC,IAAA,gBAAA,CAAA,SAAA,CAAA,GAAA,UAAoB,CAAA;AACtB,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,GAM3B,EAAA,CAAA,CAAA;;;;"}

package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.esm.js

@@ -0,0 +1,62 @@
+import React, { useReducer } from 'react';
+import { DataGridFilter } from './DataGridFilter.esm.js';
+import classes from './DataGridToolbar.module.scss.esm.js';
+import { Typography } from '../../Typography/Typography.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 filtersReducer = (state, action) => {
+    switch (action.type) {
+        case "add":
+            return { ...state, filters: [...state.filters, { ...action.payload }] };
+        case "edit":
+            return {
+                ...state,
+                filters: [
+                    ...state.filters.map(value => {
+                        if (value.id === action.payload.id) {
+                            return action.payload;
+                        }
+                        return value;
+                    })
+                ]
+            };
+        case "remove":
+            return {
+                ...state,
+                filters: [...state.filters.filter(value => value.id !== action.payload.id)]
+            };
+        case "clear":
+            return { ...state, filters: [] };
+    }
+};
+const DataGridToolbarComponent = ({ columnsMetadata, filterValues, translations, onFilterAdd, onFilterEdit, onFilterDelete, onFiltersClear, ...rest }, ref) => {
+    const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });
+    const { clearButtonCaption = "Clear all filters" } = (translations === null || translations === void 0 ? void 0 : translations.toolbar) || {};
+    return (React.createElement("div", { ...rest, ref: ref, className: classes["toolbar"] },
+        state.filters.map(filter => (React.createElement(DataGridFilter, { mode: "EDIT", key: filter.id, filter: filter, columnsMetadata: columnsMetadata, dispatch: dispatch, onFilterEdit: onFilterEdit, onFilterDelete: onFilterDelete, tagTranslations: translations === null || translations === void 0 ? void 0 : translations.tag, popoverTranslations: translations === null || translations === void 0 ? void 0 : translations.popover }))),
+        React.createElement("div", { className: classes["actions-wrapper"] },
+            React.createElement(DataGridFilter, { mode: "ADD", columnsMetadata: columnsMetadata, dispatch: dispatch, onFilterAdd: onFilterAdd, tagTranslations: translations === null || translations === void 0 ? void 0 : translations.tag, popoverTranslations: translations === null || translations === void 0 ? void 0 : translations.popover }),
+            state.filters.length >= 1 && (React.createElement("button", { type: "button", className: classes["clear-button"], onClick: () => {
+                    dispatch({ type: "clear" });
+                    onFiltersClear && onFiltersClear();
+                } },
+                React.createElement(Typography, { variant: "body", className: classes["caption"] }, clearButtonCaption))))));
+};
+const DataGridToolbar = React.forwardRef(DataGridToolbarComponent);
+
+export { DataGridToolbar, DataGridToolbarComponent };
+//# sourceMappingURL=DataGridToolbar.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataGridToolbar.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridFilters/DataGridToolbar.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, ForwardRefRenderFunction, useReducer } from \"react\";\nimport { DataGridFilter } from \"./DataGridFilter\";\nimport classes from \"./DataGridToolbar.module.scss\";\nimport {\n  DataGridColumnMetadata,\n  Filter,\n  FiltersAction,\n  FiltersState,\n  FiltersTranslations\n} from \"./DataGridFilters.interfaces\";\nimport { Typography } from \"../../Typography/Typography\";\n\nexport interface DataGridToolbarProps extends ComponentPropsWithRef<\"div\"> {\n  columnsMetadata: DataGridColumnMetadata[];\n  filterValues?: Filter[];\n  translations?: FiltersTranslations;\n  onFilterAdd?: (filter: Filter) => void;\n  onFilterEdit?: (filter: Filter) => void;\n  onFilterDelete?: (id: string) => void;\n  onFiltersClear?: () => void;\n}\n\nconst filtersReducer = (state: FiltersState, action: FiltersAction): FiltersState => {\n  switch (action.type) {\n    case \"add\":\n      return { ...state, filters: [...state.filters, { ...action.payload }] };\n    case \"edit\":\n      return {\n        ...state,\n        filters: [\n          ...state.filters.map(value => {\n            if (value.id === action.payload.id) {\n              return action.payload;\n            }\n            return value;\n          })\n        ]\n      };\n    case \"remove\":\n      return {\n        ...state,\n        filters: [...state.filters.filter(value => value.id !== action.payload.id)]\n      };\n    case \"clear\":\n      return { ...state, filters: [] };\n  }\n};\n\nexport const DataGridToolbarComponent: ForwardRefRenderFunction<\n  HTMLDivElement,\n  DataGridToolbarProps\n> = (\n  {\n    columnsMetadata,\n    filterValues,\n    translations,\n    onFilterAdd,\n    onFilterEdit,\n    onFilterDelete,\n    onFiltersClear,\n    ...rest\n  },\n  ref\n) => {\n  const [state, dispatch] = useReducer(filtersReducer, { filters: filterValues || [] });\n  const { clearButtonCaption = \"Clear all filters\" } = translations?.toolbar || {};\n  return (\n    <div {...rest} ref={ref} className={classes[\"toolbar\"]}>\n      {state.filters.map(filter => (\n        <DataGridFilter\n          mode=\"EDIT\"\n          key={filter.id}\n          filter={filter}\n          columnsMetadata={columnsMetadata}\n          dispatch={dispatch}\n          onFilterEdit={onFilterEdit}\n          onFilterDelete={onFilterDelete}\n          tagTranslations={translations?.tag}\n          popoverTranslations={translations?.popover}\n        />\n      ))}\n      <div className={classes[\"actions-wrapper\"]}>\n        <DataGridFilter\n          mode=\"ADD\"\n          columnsMetadata={columnsMetadata}\n          dispatch={dispatch}\n          onFilterAdd={onFilterAdd}\n          tagTranslations={translations?.tag}\n          popoverTranslations={translations?.popover}\n        />\n        {state.filters.length >= 1 && (\n          <button\n            type=\"button\"\n            className={classes[\"clear-button\"]}\n            onClick={() => {\n              dispatch({ type: \"clear\" });\n              onFiltersClear && onFiltersClear();\n            }}\n          >\n            <Typography variant=\"body\" className={classes[\"caption\"]}>\n              {clearButtonCaption}\n            </Typography>\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const DataGridToolbar = React.forwardRef(DataGridToolbarComponent);\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridFilters/DataGridToolbar.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 */\n/*!\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 */.DataGridToolbar-module_sr-only__Xirwy{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DataGridToolbar-module_hidden__cjs5x{display:none}.DataGridToolbar-module_slide-in__t3lbD{animation:DataGridToolbar-module_slide-in__t3lbD .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridToolbar-module_slide-in__t3lbD{animation-duration:.1ms}}.DataGridToolbar-module_slide-out__-mEfY{animation:DataGridToolbar-module_slide-out__-mEfY .5s forwards}@media (prefers-reduced-motion:reduce){.DataGridToolbar-module_slide-out__-mEfY{animation-duration:.1ms}}@keyframes DataGridToolbar-module_slide-in__t3lbD{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes DataGridToolbar-module_slide-out__-mEfY{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.DataGridToolbar-module_toolbar__SeZ6y{flex-wrap:wrap;padding-bottom:1rem;width:100%}.DataGridToolbar-module_toolbar__SeZ6y,.DataGridToolbar-module_toolbar__SeZ6y .DataGridToolbar-module_actions-wrapper__oEYeN{align-items:center;display:flex;gap:.5rem;justify-content:flex-start}.DataGridToolbar-module_toolbar__SeZ6y .DataGridToolbar-module_clear-button__4Zdc7{background:none;border:none;cursor:pointer}.DataGridToolbar-module_toolbar__SeZ6y .DataGridToolbar-module_clear-button__4Zdc7:focus-visible{border-radius:var(--focus-border-radius);outline:.125rem solid var(--color-focus);outline-offset:0}.DataGridToolbar-module_toolbar__SeZ6y .DataGridToolbar-module_clear-button__4Zdc7 .DataGridToolbar-module_caption__Jf-jO{color:var(--color-primary500);font-size:var(--font-size-data-grid);line-height:var(--data-grid-line-height);margin:0;text-decoration:underline}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkVG9vbGJhci5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlQTs7Ozs7Ozs7Ozs7Ozs7RUFjRTtBQUNGOzs7Ozs7Ozs7Ozs7OztFQWNFLENBQ0YsdUNBT0Usa0JBQXNCLENBQ3RCLFFBQVMsQ0FMVCxVQUFXLENBRVgsV0FBWSxDQUNaLGVBQWdCLENBRmhCLFNBQVUsQ0FIVixpQkFBa0IsQ0FDbEIsU0FPRixDQUVBLHNDQUNFLFlBQ0YsQ0FFQSx3Q0FDRSw2REFDRixDQUNBLHVDQUNFLHdDQUNFLHVCQUNGLENBQ0YsQ0FFQSx5Q0FDRSw4REFDRixDQUNBLHVDQUNFLHlDQUNFLHVCQUNGLENBQ0YsQ0FFQSxrREFDRSxHQUNFLDJCQUNGLENBQ0EsR0FDRSx1QkFDRixDQUNGLENBQ0EsbURBQ0UsR0FDRSx1QkFDRixDQUNBLEdBQ0UsMkJBQ0YsQ0FDRixDQUNBLHVDQUlFLGNBQWUsQ0FHZixtQkFBb0IsQ0FEcEIsVUFFRixDQUNBLDZIQVBFLGtCQUFtQixDQURuQixZQUFhLENBSWIsU0FBVyxDQUZYLDBCQVdGLENBQ0EsbUZBQ0UsZUFBZ0IsQ0FDaEIsV0FBWSxDQUNaLGNBQ0YsQ0FDQSxpR0FHRSx3Q0FBeUMsQ0FGekMsd0NBQTBDLENBQzFDLGdCQUVGLENBQ0EsMEhBS0UsNkJBQThCLENBSDlCLG9DQUFxQyxDQUNyQyx3Q0FBeUMsQ0FGekMsUUFBUyxDQUdULHlCQUVGIiwiZmlsZSI6IkRhdGFHcmlkVG9vbGJhci5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgMjAyMiBPbmVXZWxjb21lIEIuVi5cbiAqXG4gKiAgICBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogICAgeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogICAgWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogICAgICAgIGh0dHA6Ly93d3cuYXBhY2hlLm9yZy9saWNlbnNlcy9MSUNFTlNFLTIuMFxuICpcbiAqICAgIFVubGVzcyByZXF1aXJlZCBieSBhcHBsaWNhYmxlIGxhdyBvciBhZ3JlZWQgdG8gaW4gd3JpdGluZywgc29mdHdhcmVcbiAqICAgIGRpc3RyaWJ1dGVkIHVuZGVyIHRoZSBMaWNlbnNlIGlzIGRpc3RyaWJ1dGVkIG9uIGFuIFwiQVMgSVNcIiBCQVNJUyxcbiAqICAgIFdJVEhPVVQgV0FSUkFOVElFUyBPUiBDT05ESVRJT05TIE9GIEFOWSBLSU5ELCBlaXRoZXIgZXhwcmVzcyBvciBpbXBsaWVkLlxuICogICAgU2VlIHRoZSBMaWNlbnNlIGZvciB0aGUgc3BlY2lmaWMgbGFuZ3VhZ2UgZ292ZXJuaW5nIHBlcm1pc3Npb25zIGFuZFxuICogICAgbGltaXRhdGlvbnMgdW5kZXIgdGhlIExpY2Vuc2UuXG4gKi9cbi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4vKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLnNyLW9ubHkge1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHdpZHRoOiAxcHg7XG4gIGhlaWdodDogMXB4O1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IC0xcHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGNsaXA6IHJlY3QoMCwgMCwgMCwgMCk7XG4gIGJvcmRlcjogMDtcbn1cblxuLmhpZGRlbiB7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbi5zbGlkZS1pbiB7XG4gIGFuaW1hdGlvbjogc2xpZGUtaW4gMC41cyBmb3J3YXJkcztcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1pbiB7XG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAwLjFtcztcbiAgfVxufVxuXG4uc2xpZGUtb3V0IHtcbiAgYW5pbWF0aW9uOiBzbGlkZS1vdXQgMC41cyBmb3J3YXJkcztcbn1cbkBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gIC5zbGlkZS1vdXQge1xuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xbXM7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBzbGlkZS1pbiB7XG4gIDAlIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMTAwdmgpO1xuICB9XG4gIDEwMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbn1cbkBrZXlmcmFtZXMgc2xpZGUtb3V0IHtcbiAgMCUge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwJSk7XG4gIH1cbiAgMTAwJSB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMHZoKTtcbiAgfVxufVxuLnRvb2xiYXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgZ2FwOiAwLjVyZW07XG4gIHdpZHRoOiAxMDAlO1xuICBwYWRkaW5nLWJvdHRvbTogMXJlbTtcbn1cbi50b29sYmFyIC5hY3Rpb25zLXdyYXBwZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG4gIGdhcDogMC41cmVtO1xufVxuLnRvb2xiYXIgLmNsZWFyLWJ1dHRvbiB7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGJvcmRlcjogbm9uZTtcbiAgY3Vyc29yOiBwb2ludGVyO1xufVxuLnRvb2xiYXIgLmNsZWFyLWJ1dHRvbjpmb2N1cy12aXNpYmxlIHtcbiAgb3V0bGluZTogMC4xMjVyZW0gc29saWQgdmFyKC0tY29sb3ItZm9jdXMpO1xuICBvdXRsaW5lLW9mZnNldDogMDtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tZm9jdXMtYm9yZGVyLXJhZGl1cyk7XG59XG4udG9vbGJhciAuY2xlYXItYnV0dG9uIC5jYXB0aW9uIHtcbiAgbWFyZ2luOiAwO1xuICBmb250LXNpemU6IHZhcigtLWZvbnQtc2l6ZS1kYXRhLWdyaWQpO1xuICBsaW5lLWhlaWdodDogdmFyKC0tZGF0YS1ncmlkLWxpbmUtaGVpZ2h0KTtcbiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7XG4gIGNvbG9yOiB2YXIoLS1jb2xvci1wcmltYXJ5NTAwKTtcbn0iXX0= */";
+var classes = {"sr-only":"DataGridToolbar-module_sr-only__Xirwy","hidden":"DataGridToolbar-module_hidden__cjs5x","slide-in":"DataGridToolbar-module_slide-in__t3lbD","slide-out":"DataGridToolbar-module_slide-out__-mEfY","toolbar":"DataGridToolbar-module_toolbar__SeZ6y","actions-wrapper":"DataGridToolbar-module_actions-wrapper__oEYeN","clear-button":"DataGridToolbar-module_clear-button__4Zdc7","caption":"DataGridToolbar-module_caption__Jf-jO"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=DataGridToolbar.module.scss.esm.js.map

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

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

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

@@ -1,2 +1,73 @@
-import e,{useState as n,useEffect as t}from"react";import{DataGridHeaderCell as i}from"./DataGridHeaderCell.esm.js";import o from"./DataGridHeader.module.esm.js";const d=[void 0,"ASC","DESC"];const l=({initialSort:l,onSort:a,headers:r,disableContextMenuColumn:c,enableMultiSorting:s,spacing:m,...u},v)=>{const[g,f]=n(l!==null&&l!==void 0?l:[]);t((()=>{f(l!==null&&l!==void 0?l:[])}),[l]);const p=e=>{const n=d.findIndex((n=>n===e));return d[n+1%d.length]};const h=e=>{const n=g.find((n=>n.name===e));const t=s?g.filter((n=>n.name!==e)):[];const i=p(n===null||n===void 0?void 0:n.direction);return i?[{name:e,direction:i},...t]:t};const S=e=>{const n=h(e);a===null||a===void 0?void 0:a(n);f(n)};const x=r.map(((n,t)=>{var o,d;if(n.hidden)return null;let l={textAlign:(o=n.align)!==null&&o!==void 0?o:"left"};if(t===0)l.paddingLeft=m===null||m===void 0?void 0:m.paddingLeft;if(t===r.length-1&&c)l.paddingRight=m===null||m===void 0?void 0:m.paddingRight;const s=g.find((e=>e.name===n.name));return e.createElement(i,{key:n.name,name:n.name,headline:n.headline,disableSorting:(d=n.disableSorting)!==null&&d!==void 0?d:!a,onSort:S,activeSortDirection:s===null||s===void 0?void 0:s.direction,style:l})}));return e.createElement("thead",{...u,ref:v},e.createElement("tr",{className:o["row"]},x,!c&&e.createElement("td",{style:{paddingRight:m===null||m===void 0?void 0:m.paddingRight},"aria-label":"context menu",className:o["context-menu"]})))};const a=e.forwardRef(l);export{a as DataGridHeader};
+import React, { useState, useEffect } from 'react';
+import { DataGridHeaderCell } from './DataGridHeaderCell.esm.js';
+import classes from './DataGridHeader.module.scss.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 sortingStates = [undefined, "ASC", "DESC"];
+const DataGridHeaderComponent = ({ initialSort, onSort, headers, disableContextMenuColumn, enableExpandableRow, enableMultiSorting, spacing, ...rest }, ref) => {
+    const [sortList, setSortList] = useState(initialSort !== null && initialSort !== void 0 ? initialSort : []);
+    useEffect(() => {
+        setSortList(initialSort !== null && initialSort !== void 0 ? initialSort : []);
+    }, [initialSort]);
+    const calculateNextSortState = (direction) => {
+        const currentDirectionIdx = sortingStates.findIndex(item => item === direction);
+        return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];
+    };
+    /**
+     * The sortList contains sorting columns objects. The order of those objects determines priorities of sorting.
+     * Last modified sorting column has the highest priority.
+     */
+    const updateSortList = (name) => {
+        const current = sortList.find(item => item.name === name);
+        const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];
+        const newSortDirection = calculateNextSortState(current === null || current === void 0 ? void 0 : current.direction);
+        return newSortDirection
+            ? [{ name, direction: newSortDirection }, ...restSortList]
+            : restSortList;
+    };
+    const wrapOnSort = (name) => {
+        const newSort = updateSortList(name);
+        onSort === null || onSort === void 0 ? void 0 : onSort(newSort);
+        setSortList(newSort);
+    };
+    const headerCells = headers.map((header, index) => {
+        var _a, _b;
+        if (header.hidden) {
+            return null;
+        }
+        let headerStyle = {
+            textAlign: (_a = header.align) !== null && _a !== void 0 ? _a : "left"
+        };
+        if (index === 0) {
+            headerStyle.paddingLeft = spacing === null || spacing === void 0 ? void 0 : spacing.paddingLeft;
+        }
+        if (index === headers.length - 1 && disableContextMenuColumn) {
+            headerStyle.paddingRight = spacing === null || spacing === void 0 ? void 0 : spacing.paddingRight;
+        }
+        const sort = sortList.find(item => item.name === header.name);
+        return (React.createElement(DataGridHeaderCell, { key: header.name, name: header.name, headline: header.headline, disableSorting: (_b = header.disableSorting) !== null && _b !== void 0 ? _b : !onSort, onSort: wrapOnSort, activeSortDirection: sort === null || sort === void 0 ? void 0 : sort.direction, style: headerStyle }));
+    });
+    return (React.createElement("thead", { ...rest, ref: ref },
+        React.createElement("tr", { className: classes["row"] },
+            enableExpandableRow && (React.createElement("td", { style: { paddingRight: spacing === null || spacing === void 0 ? void 0 : spacing.paddingRight }, "aria-label": "expandable row" })),
+            headerCells,
+            !disableContextMenuColumn && (React.createElement("td", { style: { paddingRight: spacing === null || spacing === void 0 ? void 0 : spacing.paddingRight }, "aria-label": "context menu", className: classes["context-menu"] })))));
+};
+const DataGridHeader = React.forwardRef(DataGridHeaderComponent);
+
+export { DataGridHeader };
 //# sourceMappingURL=DataGridHeader.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeader.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridHeader/DataGridHeader.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, ComponentPropsWithRef, useEffect, useState } from \"react\";\nimport { Direction, HeaderCell, OnSortFunction, Sort } from \"../datagrid.interfaces\";\nimport { DataGridHeaderCell } from \"./DataGridHeaderCell\";\nimport classes from \"./DataGridHeader.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"thead\"> {\n  headers: HeaderCell[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  disableContextMenuColumn?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: React.CSSProperties;\n}\n\nconst sortingStates = [undefined, \"ASC\", \"DESC\"] as (Direction | undefined)[];\n\nconst DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement, Props> = (\n  {\n    initialSort,\n    onSort,\n    headers,\n    disableContextMenuColumn,\n    enableMultiSorting,\n    spacing,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [sortList, setSortList] = useState(initialSort ?? []);\n\n  useEffect(() => {\n    setSortList(initialSort ?? []);\n  }, [initialSort]);\n\n  const calculateNextSortState = (direction?: Direction) => {\n    const currentDirectionIdx = sortingStates.findIndex(item => item === direction);\n    return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];\n  };\n\n  /**\n   * The sortList contains sorting columns objects. The order of those objects determinates priorities of sorting.\n   * Last modified sorting column has the highest priority.\n   */\n  const updateSortList = (name: string): Sort => {\n    const current = sortList.find(item => item.name === name);\n    const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];\n    const newSortDirection = calculateNextSortState(current?.direction);\n    return newSortDirection\n      ? [{ name, direction: newSortDirection }, ...restSortList]\n      : restSortList;\n  };\n\n  const wrapOnSort = (name: string) => {\n    const newSort = updateSortList(name);\n    onSort?.(newSort);\n    setSortList(newSort);\n  };\n\n  const headerCells = headers.map((header, index) => {\n    if (header.hidden) {\n      return null;\n    }\n\n    let headerStyle: React.CSSProperties = {\n      textAlign: header.align ?? \"left\"\n    };\n\n    if (index === 0) {\n      headerStyle.paddingLeft = spacing?.paddingLeft;\n    }\n    if (index === headers.length - 1 && disableContextMenuColumn) {\n      headerStyle.paddingRight = spacing?.paddingRight;\n    }\n\n    const sort = sortList.find(item => item.name === header.name);\n    return (\n      <DataGridHeaderCell\n        key={header.name}\n        name={header.name}\n        headline={header.headline}\n        disableSorting={header.disableSorting ?? !onSort}\n        onSort={wrapOnSort}\n        activeSortDirection={sort?.direction}\n        style={headerStyle}\n      />\n    );\n  });\n\n  return (\n    <thead {...rest} ref={ref}>\n      <tr className={classes[\"row\"]}>\n        {headerCells}\n        {!disableContextMenuColumn && (\n          <td\n            style={{ paddingRight: spacing?.paddingRight }}\n            aria-label=\"context menu\"\n            className={classes[\"context-menu\"]}\n          ></td>\n        )}\n      </tr>\n    </thead>\n  );\n};\n\nexport const DataGridHeader = React.forwardRef(DataGridHeaderComponent);\n"],"names":["sortingStates","undefined","DataGridHeaderComponent","initialSort","onSort","headers","disableContextMenuColumn","enableMultiSorting","spacing","rest","ref","sortList","setSortList","useState","useEffect","calculateNextSortState","direction","currentDirectionIdx","findIndex","item","length","updateSortList","name","current","find","restSortList","filter","newSortDirection","wrapOnSort","newSort","headerCells","map","header","index","hidden","headerStyle","textAlign","_a","align","paddingLeft","paddingRight","sort","React","DataGridHeaderCell","key","headline","disableSorting","_b","activeSortDirection","style","createElement","className","classes","DataGridHeader","forwardRef"],"mappings":"kKA8BA,MAAMA,EAAgB,MAACC,EAAW,MAAO,QAEzC,MAAMC,EAAoF,EAEtFC,cACAC,SACAC,UACAC,2BACAC,qBACAC,aACGC,GAELC,KAEA,MAAOC,EAAUC,GAAeC,EAASV,IAAW,MAAXA,SAAA,EAAAA,EAAe,IAExDW,GAAU,KACRF,EAAYT,IAAA,MAAAA,WAAAA,EAAe,GAAG,GAC7B,CAACA,IAEJ,MAAMY,EAA0BC,IAC9B,MAAMC,EAAsBjB,EAAckB,WAAUC,GAAQA,IAASH,IACrE,OAAOhB,EAAciB,EAAuB,EAAIjB,EAAcoB,OAAQ,EAOxE,MAAMC,EAAkBC,IACtB,MAAMC,EAAUZ,EAASa,MAAKL,GAAQA,EAAKG,OAASA,IACpD,MAAMG,EAAelB,EAAqBI,EAASe,QAAOP,GAAQA,EAAKG,OAASA,IAAQ,GACxF,MAAMK,EAAmBZ,EAAuBQ,IAAO,MAAPA,SAAO,OAAA,EAAPA,EAASP,WACzD,OAAOW,EACH,CAAC,CAAEL,OAAMN,UAAWW,MAAuBF,GAC3CA,CAAY,EAGlB,MAAMG,EAAcN,IAClB,MAAMO,EAAUR,EAAeC,GAC/BlB,UAAAA,SAAM,OAAA,EAANA,EAASyB,GACTjB,EAAYiB,EAAQ,EAGtB,MAAMC,EAAczB,EAAQ0B,KAAI,CAACC,EAAQC,aACvC,GAAID,EAAOE,OACT,OAAO,KAGT,IAAIC,EAAmC,CACrCC,WAAWC,EAAAL,EAAOM,4BAAS,QAG7B,GAAIL,IAAU,EACZE,EAAYI,YAAc/B,IAAO,MAAPA,SAAA,OAAA,EAAAA,EAAS+B,YAErC,GAAIN,IAAU5B,EAAQe,OAAS,GAAKd,EAClC6B,EAAYK,aAAehC,IAAO,MAAPA,SAAA,OAAA,EAAAA,EAASgC,aAGtC,MAAMC,EAAO9B,EAASa,MAAKL,GAAQA,EAAKG,OAASU,EAAOV,OACxD,OACEoB,gBAACC,EAAkB,CACjBC,IAAKZ,EAAOV,KACZA,KAAMU,EAAOV,KACbuB,SAAUb,EAAOa,SACjBC,gBAAgBC,EAAAf,EAAOc,kBAAkB,MAAAC,SAAA,EAAAA,GAAC3C,EAC1CA,OAAQwB,EACRoB,oBAAqBP,UAAAA,SAAI,OAAA,EAAJA,EAAMzB,UAC3BiC,MAAOd,GAET,IAGJ,OACEO,EAAWQ,cAAA,QAAA,IAAAzC,EAAMC,IAAKA,GACpBgC,EAAAQ,cAAA,KAAA,CAAIC,UAAWC,EAAQ,QACpBtB,GACCxB,GACAoC,EAAAQ,cAAA,KAAA,CACED,MAAO,CAAET,aAAchC,IAAA,MAAAA,kBAAAA,EAASgC,cACrB,aAAA,eACXW,UAAWC,EAAQ,mBAK3B,EAGS,MAAAC,EAAiBX,EAAMY,WAAWpD"}
+{"version":3,"file":"DataGridHeader.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridHeader/DataGridHeader.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, ComponentPropsWithRef, useEffect, useState } from \"react\";\nimport { Direction, HeaderCell, OnSortFunction, Sort } from \"../datagrid.interfaces\";\nimport { DataGridHeaderCell } from \"./DataGridHeaderCell\";\nimport classes from \"./DataGridHeader.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"thead\"> {\n  headers: HeaderCell[];\n  initialSort?: Sort;\n  onSort?: OnSortFunction;\n  enableExpandableRow?: boolean;\n  disableContextMenuColumn?: boolean;\n  enableMultiSorting?: boolean;\n  spacing?: React.CSSProperties;\n}\n\nconst sortingStates = [undefined, \"ASC\", \"DESC\"] as (Direction | undefined)[];\n\nconst DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement, Props> = (\n  {\n    initialSort,\n    onSort,\n    headers,\n    disableContextMenuColumn,\n    enableExpandableRow,\n    enableMultiSorting,\n    spacing,\n    ...rest\n  }: Props,\n  ref\n) => {\n  const [sortList, setSortList] = useState(initialSort ?? []);\n\n  useEffect(() => {\n    setSortList(initialSort ?? []);\n  }, [initialSort]);\n\n  const calculateNextSortState = (direction?: Direction) => {\n    const currentDirectionIdx = sortingStates.findIndex(item => item === direction);\n    return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];\n  };\n\n  /**\n   * The sortList contains sorting columns objects. The order of those objects determines priorities of sorting.\n   * Last modified sorting column has the highest priority.\n   */\n  const updateSortList = (name: string): Sort => {\n    const current = sortList.find(item => item.name === name);\n    const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];\n    const newSortDirection = calculateNextSortState(current?.direction);\n    return newSortDirection\n      ? [{ name, direction: newSortDirection }, ...restSortList]\n      : restSortList;\n  };\n\n  const wrapOnSort = (name: string) => {\n    const newSort = updateSortList(name);\n    onSort?.(newSort);\n    setSortList(newSort);\n  };\n\n  const headerCells = headers.map((header, index) => {\n    if (header.hidden) {\n      return null;\n    }\n\n    let headerStyle: React.CSSProperties = {\n      textAlign: header.align ?? \"left\"\n    };\n\n    if (index === 0) {\n      headerStyle.paddingLeft = spacing?.paddingLeft;\n    }\n    if (index === headers.length - 1 && disableContextMenuColumn) {\n      headerStyle.paddingRight = spacing?.paddingRight;\n    }\n\n    const sort = sortList.find(item => item.name === header.name);\n    return (\n      <DataGridHeaderCell\n        key={header.name}\n        name={header.name}\n        headline={header.headline}\n        disableSorting={header.disableSorting ?? !onSort}\n        onSort={wrapOnSort}\n        activeSortDirection={sort?.direction}\n        style={headerStyle}\n      />\n    );\n  });\n\n  return (\n    <thead {...rest} ref={ref}>\n      <tr className={classes[\"row\"]}>\n        {enableExpandableRow && (\n          <td style={{ paddingRight: spacing?.paddingRight }} aria-label=\"expandable row\"></td>\n        )}\n        {headerCells}\n        {!disableContextMenuColumn && (\n          <td\n            style={{ paddingRight: spacing?.paddingRight }}\n            aria-label=\"context menu\"\n            className={classes[\"context-menu\"]}\n          ></td>\n        )}\n      </tr>\n    </thead>\n  );\n};\n\nexport const DataGridHeader = React.forwardRef(DataGridHeaderComponent);\n"],"names":[],"mappings":"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"}

package/dist/esm/DataGrid/DataGridHeader/DataGridHeader.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 */.DataGridHeader-module_row__JAYva{height:2.5rem}.DataGridHeader-module_context-menu__NuTeS{box-sizing:border-box;width:4.125rem}@media only screen and (min-width:50em){.DataGridHeader-module_thead__8Hifa:after{left:1.25rem;width:calc(100% - 2.5rem)}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkSGVhZGVyLm1vZHVsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7OztFQWNFLENBQ0Ysa0NBQ0UsYUFDRixDQUVBLDJDQUVFLHFCQUFzQixDQUR0QixjQUVGLENBRUEsd0NBQ0UsMENBRUUsWUFBYSxDQURiLHlCQUVGLENBQ0YiLCJmaWxlIjoiRGF0YUdyaWRIZWFkZXIubW9kdWxlLnNjc3MiLCJzb3VyY2VzQ29udGVudCI6WyIvKiFcbiAqIENvcHlyaWdodCAyMDIyIE9uZVdlbGNvbWUgQi5WLlxuICpcbiAqICAgIExpY2Vuc2VkIHVuZGVyIHRoZSBBcGFjaGUgTGljZW5zZSwgVmVyc2lvbiAyLjAgKHRoZSBcIkxpY2Vuc2VcIik7XG4gKiAgICB5b3UgbWF5IG5vdCB1c2UgdGhpcyBmaWxlIGV4Y2VwdCBpbiBjb21wbGlhbmNlIHdpdGggdGhlIExpY2Vuc2UuXG4gKiAgICBZb3UgbWF5IG9idGFpbiBhIGNvcHkgb2YgdGhlIExpY2Vuc2UgYXRcbiAqXG4gKiAgICAgICAgaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogICAgVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogICAgZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogICAgV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiAgICBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiAgICBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuLnJvdyB7XG4gIGhlaWdodDogMi41cmVtO1xufVxuXG4uY29udGV4dC1tZW51IHtcbiAgd2lkdGg6IDQuMTI1cmVtO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuXG5AbWVkaWEgb25seSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDUwZW0pIHtcbiAgLnRoZWFkOjphZnRlciB7XG4gICAgd2lkdGg6IGNhbGMoMTAwJSAtIDIuNXJlbSk7XG4gICAgbGVmdDogMS4yNXJlbTtcbiAgfVxufSJdfQ== */";
+var classes = {"row":"DataGridHeader-module_row__JAYva","context-menu":"DataGridHeader-module_context-menu__NuTeS","thead":"DataGridHeader-module_thead__8Hifa"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=DataGridHeader.module.scss.esm.js.map

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

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

package/dist/esm/DataGrid/DataGridHeader/DataGridHeaderCell.esm.js

@@ -1,2 +1,47 @@
-import e,{Fragment as n}from"react";import{Icon as t,Icons as r}from"../../Icon/Icon.esm.js";import a from"./DataGridHeaderCell.module.esm.js";const o={ASC:"ascending",DESC:"descending"};const c=({headline:c,name:i,disableSorting:l,activeSortDirection:s,onSort:m,...d},E)=>{const u=()=>{m===null||m===void 0?void 0:m(i)};const p=()=>{const o=e=>{const n=[a["indicator"]];s&&n.push(s===e?a["active"]:a["hidden"]);return n};return e.createElement(n,null,e.createElement(t,{className:o("ASC").join(" "),icon:r.TriangleUp}),e.createElement(t,{className:o("DESC").join(" "),icon:r.TriangleDown}))};const S=e.createElement(n,null,e.createElement("span",{className:a["headline"]},c),!l&&e.createElement("div",{className:a["sorting-indicator-container"]},p()));return e.createElement("th",{...d,ref:E,className:a["header-cell"],"aria-sort":s&&o[s]},l?e.createElement("div",{key:i},S):e.createElement("button",{key:i,onClick:u},S))};const i=e.forwardRef(c);export{i as DataGridHeaderCell};
+import React, { Fragment } from 'react';
+import { Icon, Icons } from '../../Icon/Icon.esm.js';
+import classes from './DataGridHeaderCell.module.scss.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 ariaSortMapping = {
+    ASC: "ascending",
+    DESC: "descending"
+};
+const DataGridHeaderCellComponent = ({ headline, name, disableSorting, activeSortDirection, onSort, ...rest }, ref) => {
+    const onCellClick = () => {
+        onSort === null || onSort === void 0 ? void 0 : onSort(name);
+    };
+    const sortingIndicator = () => {
+        const getSortingIndicatorClasses = (direction) => {
+            const sortingIndicatorClasses = [classes["indicator"]];
+            activeSortDirection &&
+                sortingIndicatorClasses.push(activeSortDirection === direction ? classes["active"] : classes["hidden"]);
+            return sortingIndicatorClasses;
+        };
+        return (React.createElement(Fragment, null,
+            React.createElement(Icon, { className: getSortingIndicatorClasses("ASC").join(" "), icon: Icons.TriangleUp }),
+            React.createElement(Icon, { className: getSortingIndicatorClasses("DESC").join(" "), icon: Icons.TriangleDown })));
+    };
+    const innerContent = (React.createElement(Fragment, null,
+        React.createElement("span", { className: classes["headline"] }, headline),
+        !disableSorting && (React.createElement("div", { className: classes["sorting-indicator-container"] }, sortingIndicator()))));
+    return (React.createElement("th", { ...rest, ref: ref, className: classes["header-cell"], "aria-sort": activeSortDirection && ariaSortMapping[activeSortDirection] }, disableSorting ? (React.createElement("div", { key: name }, innerContent)) : (React.createElement("button", { key: name, onClick: onCellClick }, innerContent))));
+};
+const DataGridHeaderCell = React.forwardRef(DataGridHeaderCellComponent);
+
+export { DataGridHeaderCell };
 //# sourceMappingURL=DataGridHeaderCell.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataGridHeaderCell.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridHeader/DataGridHeaderCell.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, ComponentPropsWithRef, Fragment } from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Direction } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridHeaderCell.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"th\"> {\n  headline: string;\n  name: string;\n  disableSorting?: boolean;\n  activeSortDirection?: Direction;\n  onSort?: (name: string) => void;\n}\n\nconst ariaSortMapping = {\n  ASC: \"ascending\",\n  DESC: \"descending\"\n} as const;\n\nconst DataGridHeaderCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (\n  { headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props,\n  ref\n) => {\n  const onCellClick = () => {\n    onSort?.(name);\n  };\n\n  const sortingIndicator = () => {\n    const getSortingIndicatorClasses = (direction: Direction) => {\n      const sortingIndicatorClasses = [classes[\"indicator\"]];\n      activeSortDirection &&\n        sortingIndicatorClasses.push(\n          activeSortDirection === direction ? classes[\"active\"] : classes[\"hidden\"]\n        );\n      return sortingIndicatorClasses;\n    };\n\n    return (\n      <Fragment>\n        <Icon className={getSortingIndicatorClasses(\"ASC\").join(\" \")} icon={Icons.TriangleUp} />\n        <Icon className={getSortingIndicatorClasses(\"DESC\").join(\" \")} icon={Icons.TriangleDown} />\n      </Fragment>\n    );\n  };\n\n  const innerContent = (\n    <Fragment>\n      <span className={classes[\"headline\"]}>{headline}</span>\n      {!disableSorting && (\n        <div className={classes[\"sorting-indicator-container\"]}>{sortingIndicator()}</div>\n      )}\n    </Fragment>\n  );\n\n  return (\n    <th\n      {...rest}\n      ref={ref}\n      className={classes[\"header-cell\"]}\n      aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}\n    >\n      {disableSorting ? (\n        <div key={name}>{innerContent}</div>\n      ) : (\n        <button key={name} onClick={onCellClick}>\n          {innerContent}\n        </button>\n      )}\n    </th>\n  );\n};\n\nexport const DataGridHeaderCell = React.forwardRef(DataGridHeaderCellComponent);\n"],"names":["ariaSortMapping","ASC","DESC","DataGridHeaderCellComponent","headline","name","disableSorting","activeSortDirection","onSort","rest","ref","onCellClick","sortingIndicator","getSortingIndicatorClasses","direction","sortingIndicatorClasses","classes","push","React","Fragment","createElement","Icon","className","join","icon","Icons","TriangleUp","TriangleDown","innerContent","key","onClick","DataGridHeaderCell","forwardRef"],"mappings":"+IA6BA,MAAMA,EAAkB,CACtBC,IAAK,YACLC,KAAM,cAGR,MAAMC,EAAqF,EACvFC,WAAUC,OAAMC,iBAAgBC,sBAAqBC,YAAWC,GAClEC,KAEA,MAAMC,EAAc,KAClBH,UAAAA,SAAM,OAAA,EAANA,EAASH,EAAK,EAGhB,MAAMO,EAAmB,KACvB,MAAMC,EAA8BC,IAClC,MAAMC,EAA0B,CAACC,EAAQ,cACzCT,GACEQ,EAAwBE,KACtBV,IAAwBO,EAAYE,EAAQ,UAAYA,EAAQ,WAEpE,OAAOD,CAAuB,EAGhC,OACEG,gBAACC,EAAQ,KACPD,EAAAE,cAACC,EAAK,CAAAC,UAAWT,EAA2B,OAAOU,KAAK,KAAMC,KAAMC,EAAMC,aAC1ER,EAACE,cAAAC,GAAKC,UAAWT,EAA2B,QAAQU,KAAK,KAAMC,KAAMC,EAAME,eAE7E,EAGJ,MAAMC,EACJV,EAAAE,cAACD,EAAQ,KACPD,EAAME,cAAA,OAAA,CAAAE,UAAWN,EAAQ,aAAcZ,IACrCE,GACAY,EAAKE,cAAA,MAAA,CAAAE,UAAWN,EAAQ,gCAAiCJ,MAK/D,OACEM,EACME,cAAA,KAAA,IAAAX,EACJC,IAAKA,EACLY,UAAWN,EAAQ,eAAc,YACtBT,GAAuBP,EAAgBO,IAEjDD,EACCY,EAAKE,cAAA,MAAA,CAAAS,IAAKxB,GAAOuB,GAEjBV,EAAAE,cAAA,SAAA,CAAQS,IAAKxB,EAAMyB,QAASnB,GACzBiB,GAIP,EAGS,MAAAG,EAAqBb,EAAMc,WAAW7B"}
+{"version":3,"file":"DataGridHeaderCell.esm.js","sources":["../../../../../../src/components/DataGrid/DataGridHeader/DataGridHeaderCell.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, ComponentPropsWithRef, Fragment } from \"react\";\nimport { Icon, Icons } from \"../../Icon/Icon\";\nimport { Direction } from \"../datagrid.interfaces\";\nimport classes from \"./DataGridHeaderCell.module.scss\";\n\nexport interface Props extends ComponentPropsWithRef<\"th\"> {\n  headline: string;\n  name: string;\n  disableSorting?: boolean;\n  activeSortDirection?: Direction;\n  onSort?: (name: string) => void;\n}\n\nconst ariaSortMapping = {\n  ASC: \"ascending\",\n  DESC: \"descending\"\n} as const;\n\nconst DataGridHeaderCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (\n  { headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props,\n  ref\n) => {\n  const onCellClick = () => {\n    onSort?.(name);\n  };\n\n  const sortingIndicator = () => {\n    const getSortingIndicatorClasses = (direction: Direction) => {\n      const sortingIndicatorClasses = [classes[\"indicator\"]];\n      activeSortDirection &&\n        sortingIndicatorClasses.push(\n          activeSortDirection === direction ? classes[\"active\"] : classes[\"hidden\"]\n        );\n      return sortingIndicatorClasses;\n    };\n\n    return (\n      <Fragment>\n        <Icon className={getSortingIndicatorClasses(\"ASC\").join(\" \")} icon={Icons.TriangleUp} />\n        <Icon className={getSortingIndicatorClasses(\"DESC\").join(\" \")} icon={Icons.TriangleDown} />\n      </Fragment>\n    );\n  };\n\n  const innerContent = (\n    <Fragment>\n      <span className={classes[\"headline\"]}>{headline}</span>\n      {!disableSorting && (\n        <div className={classes[\"sorting-indicator-container\"]}>{sortingIndicator()}</div>\n      )}\n    </Fragment>\n  );\n\n  return (\n    <th\n      {...rest}\n      ref={ref}\n      className={classes[\"header-cell\"]}\n      aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}\n    >\n      {disableSorting ? (\n        <div key={name}>{innerContent}</div>\n      ) : (\n        <button key={name} onClick={onCellClick}>\n          {innerContent}\n        </button>\n      )}\n    </th>\n  );\n};\n\nexport const DataGridHeaderCell = React.forwardRef(DataGridHeaderCellComponent);\n"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;AAcG;AAeH,MAAM,eAAe,GAAG;AACtB,IAAA,GAAG,EAAE,WAAW;AAChB,IAAA,IAAI,EAAE,YAAY;CACV,CAAC;AAEX,MAAM,2BAA2B,GAA0D,CACzF,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,EAAE,GAAG,IAAI,EAAS,EAC/E,GAAG,KACD;IACF,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,aAAN,MAAM,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAN,MAAM,CAAG,IAAI,CAAC,CAAC;AACjB,KAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;AAC5B,QAAA,MAAM,0BAA0B,GAAG,CAAC,SAAoB,KAAI;YAC1D,MAAM,uBAAuB,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC;YACvD,mBAAmB;gBACjB,uBAAuB,CAAC,IAAI,CAC1B,mBAAmB,KAAK,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAC,CAC1E,CAAC;AACJ,YAAA,OAAO,uBAAuB,CAAC;AACjC,SAAC,CAAC;QAEF,QACE,oBAAC,QAAQ,EAAA,IAAA;AACP,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAE,0BAA0B,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,EAAI,CAAA;YACxF,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,SAAS,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,YAAY,EAAA,CAAI,CAClF,EACX;AACJ,KAAC,CAAC;AAEF,IAAA,MAAM,YAAY,IAChB,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;QACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,EAAA,EAAG,QAAQ,CAAQ;AACtD,QAAA,CAAC,cAAc,KACd,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,OAAO,CAAC,6BAA6B,CAAC,IAAG,gBAAgB,EAAE,CAAO,CACnF,CACQ,CACZ,CAAC;IAEF,QACE,KACM,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAA,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,aAAa,CAAC,EAAA,WAAA,EACtB,mBAAmB,IAAI,eAAe,CAAC,mBAAmB,CAAC,EAAA,EAErE,cAAc,IACb,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,EAAG,EAAA,YAAY,CAAO,KAEpC,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EACpC,EAAA,YAAY,CACN,CACV,CACE,EACL;AACJ,CAAC,CAAC;AAEW,MAAA,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAAC,2BAA2B;;;;"}

package/dist/esm/DataGrid/DataGridHeader/DataGridHeaderCell.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 */.DataGridHeaderCell-module_header-cell__proHM{font-weight:400;padding:.625rem .75rem;text-align:left}.DataGridHeaderCell-module_header-cell__proHM:first-child{padding-left:1rem}.DataGridHeaderCell-module_header-cell__proHM:last-child{padding-right:1rem}.DataGridHeaderCell-module_header-cell__proHM>*{display:inline-flex}.DataGridHeaderCell-module_header-cell__proHM>button{align-items:center;background:none;border:0;cursor:pointer;display:inline-flex;margin:0;padding:0}.DataGridHeaderCell-module_headline__cmx1r{color:var(--default);font-family:var(--font-family);font-size:var(--font-size-data-grid);font-weight:700;line-height:var(--data-grid-line-height)}.DataGridHeaderCell-module_sorting-indicator-container__G5sPI{display:flex;flex-direction:column;justify-content:center;padding-left:.5rem}.DataGridHeaderCell-module_sorting-indicator-container__G5sPI>*{font-size:.625rem}.DataGridHeaderCell-module_sorting-indicator-container__G5sPI .DataGridHeaderCell-module_indicator__xaM3k{color:var(--greyed-out)}.DataGridHeaderCell-module_sorting-indicator-container__G5sPI .DataGridHeaderCell-module_indicator__xaM3k.DataGridHeaderCell-module_active__vg3wV{color:var(--color-primary)}.DataGridHeaderCell-module_sorting-indicator-container__G5sPI .DataGridHeaderCell-module_indicator__xaM3k.DataGridHeaderCell-module_hidden__MAOV3{visibility:hidden}@media only screen and (min-width:50em){.DataGridHeaderCell-module_header-cell__proHM:first-child{padding-left:1.25rem}.DataGridHeaderCell-module_header-cell__proHM:last-child{padding-right:1.25rem}}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkRhdGFHcmlkSGVhZGVyQ2VsbC5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7RUFjRSxDQUNGLDhDQUNFLGVBQW1CLENBRW5CLHNCQUF5QixDQUR6QixlQUVGLENBQ0EsMERBQ0UsaUJBQ0YsQ0FDQSx5REFDRSxrQkFDRixDQUNBLGdEQUNFLG1CQUNGLENBQ0EscURBT0Usa0JBQW1CLENBSG5CLGVBQWdCLENBRGhCLFFBQVMsQ0FFVCxjQUFlLENBQ2YsbUJBQW9CLENBSnBCLFFBQVMsQ0FEVCxTQU9GLENBRUEsMkNBS0Usb0JBQXFCLENBSnJCLDhCQUErQixDQUMvQixvQ0FBcUMsQ0FFckMsZUFBZ0IsQ0FEaEIsd0NBR0YsQ0FFQSw4REFDRSxZQUFhLENBQ2IscUJBQXNCLENBRXRCLHNCQUF1QixDQUR2QixrQkFFRixDQUNBLGdFQUNFLGlCQUNGLENBQ0EsMEdBQ0UsdUJBQ0YsQ0FDQSxrSkFDRSwwQkFDRixDQUNBLGtKQUNFLGlCQUNGLENBRUEsd0NBQ0UsMERBQ0Usb0JBQ0YsQ0FDQSx5REFDRSxxQkFDRixDQUNGIiwiZmlsZSI6IkRhdGFHcmlkSGVhZGVyQ2VsbC5tb2R1bGUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIVxuICogQ29weXJpZ2h0IDIwMjIgT25lV2VsY29tZSBCLlYuXG4gKlxuICogICAgTGljZW5zZWQgdW5kZXIgdGhlIEFwYWNoZSBMaWNlbnNlLCBWZXJzaW9uIDIuMCAodGhlIFwiTGljZW5zZVwiKTtcbiAqICAgIHlvdSBtYXkgbm90IHVzZSB0aGlzIGZpbGUgZXhjZXB0IGluIGNvbXBsaWFuY2Ugd2l0aCB0aGUgTGljZW5zZS5cbiAqICAgIFlvdSBtYXkgb2J0YWluIGEgY29weSBvZiB0aGUgTGljZW5zZSBhdFxuICpcbiAqICAgICAgICBodHRwOi8vd3d3LmFwYWNoZS5vcmcvbGljZW5zZXMvTElDRU5TRS0yLjBcbiAqXG4gKiAgICBVbmxlc3MgcmVxdWlyZWQgYnkgYXBwbGljYWJsZSBsYXcgb3IgYWdyZWVkIHRvIGluIHdyaXRpbmcsIHNvZnR3YXJlXG4gKiAgICBkaXN0cmlidXRlZCB1bmRlciB0aGUgTGljZW5zZSBpcyBkaXN0cmlidXRlZCBvbiBhbiBcIkFTIElTXCIgQkFTSVMsXG4gKiAgICBXSVRIT1VUIFdBUlJBTlRJRVMgT1IgQ09ORElUSU9OUyBPRiBBTlkgS0lORCwgZWl0aGVyIGV4cHJlc3Mgb3IgaW1wbGllZC5cbiAqICAgIFNlZSB0aGUgTGljZW5zZSBmb3IgdGhlIHNwZWNpZmljIGxhbmd1YWdlIGdvdmVybmluZyBwZXJtaXNzaW9ucyBhbmRcbiAqICAgIGxpbWl0YXRpb25zIHVuZGVyIHRoZSBMaWNlbnNlLlxuICovXG4uaGVhZGVyLWNlbGwge1xuICBmb250LXdlaWdodDogbm9ybWFsO1xuICB0ZXh0LWFsaWduOiBsZWZ0O1xuICBwYWRkaW5nOiAwLjYyNXJlbSAwLjc1cmVtO1xufVxuLmhlYWRlci1jZWxsOmZpcnN0LWNoaWxkIHtcbiAgcGFkZGluZy1sZWZ0OiAxcmVtO1xufVxuLmhlYWRlci1jZWxsOmxhc3QtY2hpbGQge1xuICBwYWRkaW5nLXJpZ2h0OiAxcmVtO1xufVxuLmhlYWRlci1jZWxsID4gKiB7XG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xufVxuLmhlYWRlci1jZWxsID4gYnV0dG9uIHtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwO1xuICBib3JkZXI6IDA7XG4gIGJhY2tncm91bmQ6IG5vbmU7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG59XG5cbi5oZWFkbGluZSB7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS1mb250LWZhbWlseSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tZm9udC1zaXplLWRhdGEtZ3JpZCk7XG4gIGxpbmUtaGVpZ2h0OiB2YXIoLS1kYXRhLWdyaWQtbGluZS1oZWlnaHQpO1xuICBmb250LXdlaWdodDogNzAwO1xuICBjb2xvcjogdmFyKC0tZGVmYXVsdCk7XG59XG5cbi5zb3J0aW5nLWluZGljYXRvci1jb250YWluZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBwYWRkaW5nLWxlZnQ6IDAuNXJlbTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG59XG4uc29ydGluZy1pbmRpY2F0b3ItY29udGFpbmVyID4gKiB7XG4gIGZvbnQtc2l6ZTogMC42MjVyZW07XG59XG4uc29ydGluZy1pbmRpY2F0b3ItY29udGFpbmVyIC5pbmRpY2F0b3Ige1xuICBjb2xvcjogdmFyKC0tZ3JleWVkLW91dCk7XG59XG4uc29ydGluZy1pbmRpY2F0b3ItY29udGFpbmVyIC5pbmRpY2F0b3IuYWN0aXZlIHtcbiAgY29sb3I6IHZhcigtLWNvbG9yLXByaW1hcnkpO1xufVxuLnNvcnRpbmctaW5kaWNhdG9yLWNvbnRhaW5lciAuaW5kaWNhdG9yLmhpZGRlbiB7XG4gIHZpc2liaWxpdHk6IGhpZGRlbjtcbn1cblxuQG1lZGlhIG9ubHkgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA1MGVtKSB7XG4gIC5oZWFkZXItY2VsbDpmaXJzdC1jaGlsZCB7XG4gICAgcGFkZGluZy1sZWZ0OiAxLjI1cmVtO1xuICB9XG4gIC5oZWFkZXItY2VsbDpsYXN0LWNoaWxkIHtcbiAgICBwYWRkaW5nLXJpZ2h0OiAxLjI1cmVtO1xuICB9XG59Il19 */";
+var classes = {"header-cell":"DataGridHeaderCell-module_header-cell__proHM","headline":"DataGridHeaderCell-module_headline__cmx1r","sorting-indicator-container":"DataGridHeaderCell-module_sorting-indicator-container__G5sPI","indicator":"DataGridHeaderCell-module_indicator__xaM3k","active":"DataGridHeaderCell-module_active__vg3wV","hidden":"DataGridHeaderCell-module_hidden__MAOV3"};
+styleInject(css_248z);
+
+export { classes as default };
+//# sourceMappingURL=DataGridHeaderCell.module.scss.esm.js.map

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

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