@rws-aoa/react-library 5.1.1 → 6.0.0

package/dist/components/atoms/section-header/SectionHeader.js

@@ -1,6 +1,6 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import { Box as s, Typography as a, Divider as m, typographyClasses as l } from "@mui/material";
-import { l as p } from "../../../chunks/lodash.DOeeRDpT.js";
+import { l as p } from "../../../chunks/lodash.CA_K01A9.js";
 import { memo as x } from "react";
 const h = x(
   ({ title: i, subtitle: t = "", children: e, ...r }) => /* @__PURE__ */ n(

package/dist/components/atoms/section-header/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","sources":["../../../../src/components/atoms/section-header/SectionHeader.tsx"],"sourcesContent":["import { Box, Divider, Typography, typographyClasses, type BoxProps } from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type PropsWithChildren, type ReactNode } from 'react';\n\nexport interface AoaSectionHeaderProps extends Omit<BoxProps, 'title'> {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The content to show as subtitle, lighter grey and below the title\n   */\n  readonly subtitle?: ReactNode;\n  /**\n   * The title to show in the first Typography component\n   */\n  readonly title: ReactNode;\n}\n\n/**\n * Constructs a section header using pre-defined Rijks styling\n *\n * @param props - Props to pass to the section header\n * @example\n * ```jsx\n * <AoaSectionHeader title='This is a title' subtitle='And this is a subtitle' />\n * ```\n */\nexport const AoaSectionHeader = memo(\n  ({ title, subtitle = '', children, ...props }: PropsWithChildren<AoaSectionHeaderProps>) => {\n    return (\n      <Box\n        {...props}\n        sx={merge(\n          {\n            marginRight: 0,\n            marginBottom: 2,\n            'breakpoints.down(\"sm\")': {\n              flexBasis: '100%',\n              width: '100%',\n              marginRight: 0,\n\n              '&:not(:first-of-type)': {\n                marginTop: 3\n              }\n            },\n            [`.${typographyClasses.root}`]: {\n              fontFamily: 'var(--font-text)'\n            }\n          },\n          props.sx\n        )}\n      >\n        <Typography\n          color='textPrimary'\n          component='h1'\n          data-qa='section-title'\n          sx={{ fontSize: 'var(--font-size-h1)' }}\n          variant='h5'\n        >\n          {title}\n        </Typography>\n        {Boolean(subtitle) && (\n          <Typography\n            color='textSecondary'\n            component='span'\n            data-qa='section-subtitle'\n            sx={{ fontSize: 'var(--font-size-text)' }}\n            variant='subtitle1'\n          >\n            {subtitle}\n          </Typography>\n        )}\n        <Divider\n          sx={{\n            backgroundColor: 'var(--color-rijks-skyblue)',\n            marginBottom: 3,\n            paddingBottom: 0.25\n          }}\n        />\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["AoaSectionHeader","memo","title","subtitle","children","props","jsxs","Box","merge","typographyClasses","jsx","Typography","Divider"],"mappings":";;;;AA4BO,MAAMA,IAAmBC;AAAA,EAC9B,CAAC,EAAE,OAAAC,GAAO,UAAAC,IAAW,IAAI,UAAAC,GAAU,GAAGC,QAElC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,IAAIG,EAAA;AAAA,QACF;AAAA,UACE,aAAa;AAAA,UACb,cAAc;AAAA,UACd,0BAA0B;AAAA,YACxB,WAAW;AAAA,YACX,OAAO;AAAA,YACP,aAAa;AAAA,YAEb,yBAAyB;AAAA,cACvB,WAAW;AAAA,YAAA;AAAA,UAEf;AAAA,UACA,CAAC,IAAIC,EAAkB,IAAI,EAAE,GAAG;AAAA,YAC9B,YAAY;AAAA,UAAA;AAAA,QAEhB;AAAA,QACAJ,EAAM;AAAA,MACR;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,WAAQ;AAAA,YACR,IAAI,EAAE,UAAU,sBAAsB;AAAA,YACtC,SAAQ;AAAA,YAEP,UAAAT;AAAA,UAAA;AAAA,QACH;AAAA,QACC,EAAQC,KACP,gBAAAO;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,WAAQ;AAAA,YACR,IAAI,EAAE,UAAU,wBAAwB;AAAA,YACxC,SAAQ;AAAA,YAEP,UAAAR;AAAA,UAAA;AAAA,QACH;AAAA,QAEF,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiB;AAAA,cACjB,cAAc;AAAA,cACd,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,QACF;AAAA,QACCR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGN;"}
+{"version":3,"file":"SectionHeader.js","sources":["../../../../src/components/atoms/section-header/SectionHeader.tsx"],"sourcesContent":["import { Box, Divider, Typography, typographyClasses, type BoxProps } from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type PropsWithChildren, type ReactNode } from 'react';\n\nexport interface AoaSectionHeaderProps extends Omit<BoxProps, 'title'> {\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The content to show as subtitle, lighter grey and below the title\n   */\n  readonly subtitle?: ReactNode;\n  /**\n   * The title to show in the first Typography component\n   */\n  readonly title: ReactNode;\n}\n\n/**\n * Constructs a section header using pre-defined Rijks styling\n *\n * @param props - Props to pass to the section header\n * @example\n * ```jsx\n * <AoaSectionHeader title='This is a title' subtitle='And this is a subtitle' />\n * ```\n */\nexport const AoaSectionHeader = memo(\n  ({ title, subtitle = '', children, ...props }: PropsWithChildren<AoaSectionHeaderProps>) => {\n    return (\n      <Box\n        {...props}\n        sx={merge(\n          {\n            marginRight: 0,\n            marginBottom: 2,\n            'breakpoints.down(\"sm\")': {\n              flexBasis: '100%',\n              width: '100%',\n              marginRight: 0,\n\n              '&:not(:first-of-type)': {\n                marginTop: 3\n              }\n            },\n            [`.${typographyClasses.root}`]: {\n              fontFamily: 'var(--font-text)'\n            }\n          },\n          props.sx\n        )}\n      >\n        <Typography\n          color='textPrimary'\n          component='h1'\n          data-qa='section-title'\n          sx={{ fontSize: 'var(--font-size-h1)' }}\n          variant='h5'\n        >\n          {title}\n        </Typography>\n        {Boolean(subtitle) && (\n          <Typography\n            color='textSecondary'\n            component='span'\n            data-qa='section-subtitle'\n            sx={{ fontSize: 'var(--font-size-text)' }}\n            variant='subtitle1'\n          >\n            {subtitle}\n          </Typography>\n        )}\n        <Divider\n          sx={{\n            backgroundColor: 'var(--color-rijks-skyblue)',\n            marginBottom: 3,\n            paddingBottom: 0.25\n          }}\n        />\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["AoaSectionHeader","memo","title","subtitle","children","props","jsxs","Box","merge","typographyClasses","jsx","Typography","Divider"],"mappings":";;;;AA4BO,MAAMA,IAAmBC;AAAA,EAC9B,CAAC,EAAE,OAAAC,GAAO,UAAAC,IAAW,IAAI,UAAAC,GAAU,GAAGC,QAElC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,IAAIG,EAAAA;AAAAA,QACF;AAAA,UACE,aAAa;AAAA,UACb,cAAc;AAAA,UACd,0BAA0B;AAAA,YACxB,WAAW;AAAA,YACX,OAAO;AAAA,YACP,aAAa;AAAA,YAEb,yBAAyB;AAAA,cACvB,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,UAEF,CAAC,IAAIC,EAAkB,IAAI,EAAE,GAAG;AAAA,YAC9B,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,QAEFJ,EAAM;AAAA,MAAA;AAAA,MAGR,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,WAAQ;AAAA,YACR,IAAI,EAAE,UAAU,sBAAA;AAAA,YAChB,SAAQ;AAAA,YAEP,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,EAAQC,KACP,gBAAAO;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,WAAU;AAAA,YACV,WAAQ;AAAA,YACR,IAAI,EAAE,UAAU,wBAAA;AAAA,YAChB,SAAQ;AAAA,YAEP,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,iBAAiB;AAAA,cACjB,cAAc;AAAA,cACd,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,QAEDR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIT;"}

package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { CheckBoxOutlineBlank as t, CheckBox as l } from "@mui/icons-material";
 import { FormControlLabel as i, typographyClasses as m, Checkbox as s } from "@mui/material";
-import { l as a } from "../../../../chunks/lodash.DOeeRDpT.js";
+import { l as a } from "../../../../chunks/lodash.CA_K01A9.js";
 import { memo as c } from "react";
 import { FontNormalSxProps as n } from "../../../../_constants.js";
 const k = c(({ label: e, ...r }) => /* @__PURE__ */ o(

package/dist/components/atoms/selection-buttons/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/atoms/selection-buttons/checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon } from '@mui/icons-material';\nimport {\n  Checkbox as MUICheckbox,\n  FormControlLabel as MUIFormControlLabel,\n  typographyClasses,\n  type CheckboxProps as MUICheckboxProps\n} from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaCheckboxProps extends Omit<MUICheckboxProps, 'checkedIcon' | 'icon'> {\n  /**\n   * Whether this checkbox is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the checkbox\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a checkbox using pre-defined Rijks styling\n *\n * @param props - Props to pass to the checkbox\n * @example\n * ```jsx\n * <AoaCheckbox label=\"Demo checkbox\" checked={true} onChange={handleChange} />} />\n * ```\n */\n\nexport const AoaCheckbox = memo(({ label, ...props }: AoaCheckboxProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={\n        <MUICheckbox\n          {...props}\n          checkedIcon={<CheckBoxIcon color='inherit' fontSize='small' />}\n          icon={<CheckBoxOutlineBlankIcon color='inherit' fontSize='small' />}\n          sx={merge(\n            {\n              color: 'var(--color-primary)',\n\n              ':focus': {\n                outline: '2px dashed var(--color-text)',\n                outlineOffset: '-9px',\n                borderRadius: 0\n              },\n\n              ':disabled': {\n                color: 'var(--color-disabled)'\n              }\n            },\n            props.sx\n          )}\n        />\n      }\n      label={label}\n      sx={{ [`.${typographyClasses.root}`]: FontNormalSxProps }}\n    />\n  );\n});\n"],"names":["AoaCheckbox","memo","label","props","jsx","MUIFormControlLabel","MUICheckbox","CheckBoxIcon","CheckBoxOutlineBlankIcon","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;;AAoCO,MAAMA,IAAcC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAEzC,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SACE,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACE,GAAGH;AAAA,QACJ,aAAc,gBAAAC,EAAAG,GAAA,EAAa,OAAM,WAAU,UAAS,SAAQ;AAAA,QAC5D,MAAO,gBAAAH,EAAAI,GAAA,EAAyB,OAAM,WAAU,UAAS,SAAQ;AAAA,QACjE,IAAIC,EAAA;AAAA,UACF;AAAA,YACE,OAAO;AAAA,YAEP,UAAU;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,cAAc;AAAA,YAChB;AAAA,YAEA,aAAa;AAAA,cACX,OAAO;AAAA,YAAA;AAAA,UAEX;AAAA,UACAN,EAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,IAEF,OAAAD;AAAA,IACA,IAAI,EAAE,CAAC,IAAIQ,EAAkB,IAAI,EAAE,GAAGC,EAAkB;AAAA,EAAA;AAC1D,CAEH;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/atoms/selection-buttons/checkbox/Checkbox.tsx"],"sourcesContent":["import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon } from '@mui/icons-material';\nimport {\n  Checkbox as MUICheckbox,\n  FormControlLabel as MUIFormControlLabel,\n  typographyClasses,\n  type CheckboxProps as MUICheckboxProps\n} from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaCheckboxProps extends Omit<MUICheckboxProps, 'checkedIcon' | 'icon'> {\n  /**\n   * Whether this checkbox is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the checkbox\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a checkbox using pre-defined Rijks styling\n *\n * @param props - Props to pass to the checkbox\n * @example\n * ```jsx\n * <AoaCheckbox label=\"Demo checkbox\" checked={true} onChange={handleChange} />} />\n * ```\n */\n\nexport const AoaCheckbox = memo(({ label, ...props }: AoaCheckboxProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={\n        <MUICheckbox\n          {...props}\n          checkedIcon={<CheckBoxIcon color='inherit' fontSize='small' />}\n          icon={<CheckBoxOutlineBlankIcon color='inherit' fontSize='small' />}\n          sx={merge(\n            {\n              color: 'var(--color-primary)',\n\n              ':focus': {\n                outline: '2px dashed var(--color-text)',\n                outlineOffset: '-9px',\n                borderRadius: 0\n              },\n\n              ':disabled': {\n                color: 'var(--color-disabled)'\n              }\n            },\n            props.sx\n          )}\n        />\n      }\n      label={label}\n      sx={{ [`.${typographyClasses.root}`]: FontNormalSxProps }}\n    />\n  );\n});\n"],"names":["AoaCheckbox","memo","label","props","jsx","MUIFormControlLabel","MUICheckbox","CheckBoxIcon","CheckBoxOutlineBlankIcon","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;;AAoCO,MAAMA,IAAcC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAEzC,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SACE,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACE,GAAGH;AAAA,QACJ,aAAa,gBAAAC,EAACG,GAAA,EAAa,OAAM,WAAU,UAAS,SAAQ;AAAA,QAC5D,MAAM,gBAAAH,EAACI,GAAA,EAAyB,OAAM,WAAU,UAAS,SAAQ;AAAA,QACjE,IAAIC,EAAAA;AAAAA,UACF;AAAA,YACE,OAAO;AAAA,YAEP,UAAU;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,cAAc;AAAA,YAAA;AAAA,YAGhB,aAAa;AAAA,cACX,OAAO;AAAA,YAAA;AAAA,UACT;AAAA,UAEFN,EAAM;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,IAGJ,OAAAD;AAAA,IACA,IAAI,EAAE,CAAC,IAAIQ,EAAkB,IAAI,EAAE,GAAGC,EAAA;AAAA,EAAkB;AAAA,CAG7D;"}

package/dist/components/atoms/selection-buttons/radio-button/RadioButton.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { FormControlLabel as a, typographyClasses as l, Radio as m } from "@mui/material";
-import { l as s } from "../../../../chunks/lodash.DOeeRDpT.js";
+import { l as s } from "../../../../chunks/lodash.CA_K01A9.js";
 import { memo as e } from "react";
 import { FontNormalSxProps as i } from "../../../../_constants.js";
 const n = e(({ label: t, ...o }) => /* @__PURE__ */ r(

package/dist/components/atoms/selection-buttons/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../../../src/components/atoms/selection-buttons/radio-button/RadioButton.tsx"],"sourcesContent":["import {\n  FormControlLabel as MUIFormControlLabel,\n  Radio as MUIRadioButton,\n  typographyClasses,\n  type RadioProps as MUIRadioButtonProps\n} from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaRadioButtonProps extends MUIRadioButtonProps {\n  /**\n   * Whether this radio button is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the radio button\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a radio button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the radio button\n * @example\n * ```jsx\n * <AoaRadioButton label=\"Demo radio button\" />} />\n * ```\n */\n\nexport const AoaRadioButton = memo(({ label, ...props }: AoaRadioButtonProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={\n        <MUIRadioButton\n          {...props}\n          sx={merge(\n            {\n              color: 'var(--color-primary)',\n\n              ':focus': {\n                outline: '2px dashed var(--color-text)',\n                outlineOffset: '-8px'\n              },\n\n              ':disabled': {\n                color: 'var(--color-disabled)'\n              }\n            },\n            props.sx\n          )}\n        />\n      }\n      label={label}\n      sx={{ [`.${typographyClasses.root}`]: FontNormalSxProps }}\n    />\n  );\n});\n"],"names":["AoaRadioButton","memo","label","props","jsx","MUIFormControlLabel","MUIRadioButton","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;AAmCO,MAAMA,IAAiBC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAE5C,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SACE,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACE,GAAGH;AAAA,QACJ,IAAII,EAAA;AAAA,UACF;AAAA,YACE,OAAO;AAAA,YAEP,UAAU;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,YACjB;AAAA,YAEA,aAAa;AAAA,cACX,OAAO;AAAA,YAAA;AAAA,UAEX;AAAA,UACAJ,EAAM;AAAA,QAAA;AAAA,MACR;AAAA,IACF;AAAA,IAEF,OAAAD;AAAA,IACA,IAAI,EAAE,CAAC,IAAIM,EAAkB,IAAI,EAAE,GAAGC,EAAkB;AAAA,EAAA;AAC1D,CAEH;"}
+{"version":3,"file":"RadioButton.js","sources":["../../../../../src/components/atoms/selection-buttons/radio-button/RadioButton.tsx"],"sourcesContent":["import {\n  FormControlLabel as MUIFormControlLabel,\n  Radio as MUIRadioButton,\n  typographyClasses,\n  type RadioProps as MUIRadioButtonProps\n} from '@mui/material';\nimport { merge } from 'lodash';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaRadioButtonProps extends MUIRadioButtonProps {\n  /**\n   * Whether this radio button is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the radio button\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a radio button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the radio button\n * @example\n * ```jsx\n * <AoaRadioButton label=\"Demo radio button\" />} />\n * ```\n */\n\nexport const AoaRadioButton = memo(({ label, ...props }: AoaRadioButtonProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={\n        <MUIRadioButton\n          {...props}\n          sx={merge(\n            {\n              color: 'var(--color-primary)',\n\n              ':focus': {\n                outline: '2px dashed var(--color-text)',\n                outlineOffset: '-8px'\n              },\n\n              ':disabled': {\n                color: 'var(--color-disabled)'\n              }\n            },\n            props.sx\n          )}\n        />\n      }\n      label={label}\n      sx={{ [`.${typographyClasses.root}`]: FontNormalSxProps }}\n    />\n  );\n});\n"],"names":["AoaRadioButton","memo","label","props","jsx","MUIFormControlLabel","MUIRadioButton","merge","typographyClasses","FontNormalSxProps"],"mappings":";;;;;AAmCO,MAAMA,IAAiBC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAE5C,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SACE,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACE,GAAGH;AAAA,QACJ,IAAII,EAAAA;AAAAA,UACF;AAAA,YACE,OAAO;AAAA,YAEP,UAAU;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,YAAA;AAAA,YAGjB,aAAa;AAAA,cACX,OAAO;AAAA,YAAA;AAAA,UACT;AAAA,UAEFJ,EAAM;AAAA,QAAA;AAAA,MACR;AAAA,IAAA;AAAA,IAGJ,OAAAD;AAAA,IACA,IAAI,EAAE,CAAC,IAAIM,EAAkB,IAAI,EAAE,GAAGC,EAAA;AAAA,EAAkB;AAAA,CAG7D;"}

package/dist/components/atoms/selection-buttons/switch-button/SwitchButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchButton.js","sources":["../../../../../src/components/atoms/selection-buttons/switch-button/SwitchButton.tsx"],"sourcesContent":["import {\n  FormControlLabel as MUIFormControlLabel,\n  Switch as MUISwitchButton,\n  typographyClasses,\n  type SwitchProps as MUISwitchButtonProps,\n  switchClasses\n} from '@mui/material';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaSwitchButtonProps extends MUISwitchButtonProps {\n  /**\n   * Whether this switch button is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the switch button\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a switch button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the switch button\n * @example\n * ```jsx\n * <AoaSwitchButton label=\"Demo switch button\"  checked={true} onChange={handleChange} />} />\n * ```\n */\n\nexport const AoaSwitchButton = memo(({ label, ...props }: AoaSwitchButtonProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={<MUISwitchButton {...props} />}\n      label={label}\n      sx={{\n        [`.${typographyClasses.root}`]: FontNormalSxProps,\n        [`.${switchClasses.root}`]: {\n          color: 'var(--color-primary)',\n          width: '64px',\n\n          ':focus': {\n            outline: '2px dashed var(--color-text)',\n            outlineOffset: '-9px',\n            borderRadius: 0\n          },\n\n          ':disabled': {\n            color: 'var(--color-disabled)'\n          },\n\n          [`.${switchClasses.track}`]: {\n            height: '22px',\n            marginTop: '-4px',\n            marginLeft: '-3px',\n            borderRadius: '11px'\n          }\n        }\n      }}\n    />\n  );\n});\n"],"names":["AoaSwitchButton","memo","label","props","jsx","MUIFormControlLabel","MUISwitchButton","typographyClasses","FontNormalSxProps","switchClasses"],"mappings":";;;;AAmCO,MAAMA,IAAkBC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAE7C,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SAAS,gBAAAD,EAACE,GAAiB,EAAA,GAAGH,EAAO,CAAA;AAAA,IACrC,OAAAD;AAAA,IACA,IAAI;AAAA,MACF,CAAC,IAAIK,EAAkB,IAAI,EAAE,GAAGC;AAAA,MAChC,CAAC,IAAIC,EAAc,IAAI,EAAE,GAAG;AAAA,QAC1B,OAAO;AAAA,QACP,OAAO;AAAA,QAEP,UAAU;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,cAAc;AAAA,QAChB;AAAA,QAEA,aAAa;AAAA,UACX,OAAO;AAAA,QACT;AAAA,QAEA,CAAC,IAAIA,EAAc,KAAK,EAAE,GAAG;AAAA,UAC3B,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AACF,CAEH;"}
+{"version":3,"file":"SwitchButton.js","sources":["../../../../../src/components/atoms/selection-buttons/switch-button/SwitchButton.tsx"],"sourcesContent":["import {\n  FormControlLabel as MUIFormControlLabel,\n  Switch as MUISwitchButton,\n  typographyClasses,\n  type SwitchProps as MUISwitchButtonProps,\n  switchClasses\n} from '@mui/material';\nimport { memo, type ReactNode } from 'react';\nimport { FontNormalSxProps } from '../../../../_constants';\n\nexport interface AoaSwitchButtonProps extends MUISwitchButtonProps {\n  /**\n   * Whether this switch button is checked\n   */\n  readonly checked: boolean;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * The label that is shown after the switch button\n   */\n  readonly label: string;\n}\n\n/**\n * Constructs a switch button using pre-defined Rijks styling\n *\n * @param props - Props to pass to the switch button\n * @example\n * ```jsx\n * <AoaSwitchButton label=\"Demo switch button\"  checked={true} onChange={handleChange} />} />\n * ```\n */\n\nexport const AoaSwitchButton = memo(({ label, ...props }: AoaSwitchButtonProps): ReactNode => {\n  return (\n    <MUIFormControlLabel\n      control={<MUISwitchButton {...props} />}\n      label={label}\n      sx={{\n        [`.${typographyClasses.root}`]: FontNormalSxProps,\n        [`.${switchClasses.root}`]: {\n          color: 'var(--color-primary)',\n          width: '64px',\n\n          ':focus': {\n            outline: '2px dashed var(--color-text)',\n            outlineOffset: '-9px',\n            borderRadius: 0\n          },\n\n          ':disabled': {\n            color: 'var(--color-disabled)'\n          },\n\n          [`.${switchClasses.track}`]: {\n            height: '22px',\n            marginTop: '-4px',\n            marginLeft: '-3px',\n            borderRadius: '11px'\n          }\n        }\n      }}\n    />\n  );\n});\n"],"names":["AoaSwitchButton","memo","label","props","jsx","MUIFormControlLabel","MUISwitchButton","typographyClasses","FontNormalSxProps","switchClasses"],"mappings":";;;;AAmCO,MAAMA,IAAkBC,EAAK,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAE7C,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,SAAS,gBAAAD,EAACE,GAAA,EAAiB,GAAGH,EAAA,CAAO;AAAA,IACrC,OAAAD;AAAA,IACA,IAAI;AAAA,MACF,CAAC,IAAIK,EAAkB,IAAI,EAAE,GAAGC;AAAA,MAChC,CAAC,IAAIC,EAAc,IAAI,EAAE,GAAG;AAAA,QAC1B,OAAO;AAAA,QACP,OAAO;AAAA,QAEP,UAAU;AAAA,UACR,SAAS;AAAA,UACT,eAAe;AAAA,UACf,cAAc;AAAA,QAAA;AAAA,QAGhB,aAAa;AAAA,UACX,OAAO;AAAA,QAAA;AAAA,QAGT,CAAC,IAAIA,EAAc,KAAK,EAAE,GAAG;AAAA,UAC3B,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAAA,CAGL;"}

package/dist/components/atoms/table/Table.d.ts

@@ -1,34 +1,26 @@
 import { SxProps } from '@mui/material';
-import { DataGridProps, GridColDef, GridFilterModel, GridLocaleText, GridSortModel } from '@mui/x-data-grid';
-export interface AoaTableData<T extends object = any> {
+import { DataGridProps, GridColDef, GridGetRowsParams, GridLocaleText, GridPaginationModel, GridRowModel, GridValidRowModel } from '@mui/x-data-grid';
+export interface AoaTableData<T extends GridValidRowModel = GridValidRowModel> {
     /**
-     * The paged, filtered and sorted items from the database
-     */
-    items: T[];
-    /**
-     * The total number of items present in the database table
-     */
-    totalItems: number;
-}
-export type AoaTableColumns<T extends object = any> = GridColDef<T>[];
-export interface AoaTableQueryOptions {
-    /**
-     * Material UI's GridFilterModel
-     */
-    filterModel: GridFilterModel;
-    /**
-     * The current page of the table
+     * Additional `pageInfo` for advanced use-cases.
+     * `hasNextPage`: When row count is unknown/estimated, `hasNextPage` will be used to check if more records are available on server.
      */
-    page: number;
+    pageInfo?: {
+        hasNextPage?: boolean;
+        nextCursor?: string;
+    };
     /**
-     * The maximum number of items that are shown on a page
+     * To reflect updates in total `rowCount` (optional).
+     * Useful when the `rowCount` is inaccurate (for example when filtering) or not available upfront.
      */
-    pageSize: number;
+    rowCount?: number;
     /**
-     * Material UI's GridSortModel
+     * The paged, filtered and sorted items from the database
      */
-    sortModel: GridSortModel;
+    rows: GridRowModel<T>[];
 }
+export type AoaTableColumns<T extends object = any> = GridColDef<T>[];
+export type AoaTableQueryOptions = GridPaginationModel & Omit<GridGetRowsParams, 'end' | 'paginationModel' | 'start'>;
 type ModeProps = 
 /**
  * Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side
@@ -42,7 +34,7 @@ type ModeProps =
  */
  | {
     getData(queryOptions: AoaTableQueryOptions): Promise<void> | void;
-    mode?: never;
+    mode?: 'server';
 };
 export type AoaTableProps<T extends object = any> = ModeProps & {
     /**
@@ -64,7 +56,7 @@ export type AoaTableProps<T extends object = any> = ModeProps & {
     /**
      * Overwrite a safe selection of the {@link DataGrid} properties
      */
-    readonly dataGridOverridableProps?: Pick<DataGridProps<T>, 'checkboxSelection' | 'disableRowSelectionOnClick' | 'getRowId' | 'ignoreDiacritics' | 'isRowSelectable' | 'loading' | 'onRowSelectionModelChange' | 'rowSelectionModel'>;
+    readonly dataGridOverridableProps?: Pick<DataGridProps<T>, 'checkboxSelection' | 'disableColumnFilter' | 'disableRowSelectionOnClick' | 'getRowId' | 'ignoreDiacritics' | 'isRowSelectable' | 'loading' | 'onRowSelectionModelChange' | 'rowSelectionModel'>;
     /**
      * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting
      */
@@ -96,7 +88,6 @@ export type AoaTableProps<T extends object = any> = ModeProps & {
  * />
  * ```
  */
-declare function NonMemoizeAoaTable<T extends object = any>(props: AoaTableProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare const AoaTable: typeof NonMemoizeAoaTable;
+export declare function AoaTable<T extends object = any>({ ...props }: AoaTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Table.d.ts.map

package/dist/components/atoms/table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAM1B,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG;IAClD;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;AAEtE,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,WAAW,EAAE,eAAe,CAAC;IAC7B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,aAAa,CAAC;CAC1B;AAED,KAAK,SAAS;AACZ;;GAEG;AACD;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,OAAO,CAAC,YAAY,EAAE,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI,SAAS,GAAG;IAC9D;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,wBAAwB,CAAC,EAAE,IAAI,CACtC,aAAa,CAAC,CAAC,CAAC,EACd,mBAAmB,GACnB,4BAA4B,GAC5B,UAAU,GACV,kBAAkB,GAClB,iBAAiB,GACjB,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,CACtB,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IAC/D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAOF;;;;;;;;;;;;GAYG;AAEH,iBAAS,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CAiM1E;AAED,eAAO,MAAM,QAAQ,EAA+B,OAAO,kBAAkB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0C,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,iBAAiB,EAEtB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EAGvB,MAAM,kBAAkB,CAAC;AAM1B,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB;IAC3E;;;OAGG;IACH,QAAQ,CAAC,EAAE;QACT,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;AAEtE,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,KAAK,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;AAEtH,KAAK,SAAS;AACZ;;GAEG;AACD;IAAE,OAAO,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE;AACrC;;GAEG;GACD;IAAE,OAAO,CAAC,YAAY,EAAE,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE3F,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,IAAI,SAAS,GAAG;IAC9D;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,wBAAwB,CAAC,EAAE,IAAI,CACtC,aAAa,CAAC,CAAC,CAAC,EACd,mBAAmB,GACnB,qBAAqB,GACrB,4BAA4B,GAC5B,UAAU,GACV,kBAAkB,GAClB,iBAAiB,GACjB,SAAS,GACT,2BAA2B,GAC3B,mBAAmB,CACtB,CAAC;IACF;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IAC/D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AAEH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,GAAG,GAAG,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,2CA+P9E"}

package/dist/components/atoms/table/Table.js

@@ -1,110 +1,162 @@
-import { jsx as F } from "react/jsx-runtime";
-import { checkboxClasses as h, paginationItemClasses as P } from "@mui/material";
-import { DataGrid as p, gridClasses as o } from "@mui/x-data-grid";
-import { l as T } from "../../../chunks/lodash.DOeeRDpT.js";
-import { memo as j, useState as l, useCallback as f, useEffect as x } from "react";
-import { FontNormalSxProps as H } from "../../../_constants.js";
-import { QuickSearchToolbar as I } from "./_QuickSearchToolbar.js";
-function L(e) {
-  var m, k, v;
-  const [C, u] = l(!1), [i, S] = l({
+import { jsx as R } from "react/jsx-runtime";
+import { checkboxClasses as b, paginationItemClasses as G } from "@mui/material";
+import { GridLogicOperator as f, DataGrid as I, gridClasses as t } from "@mui/x-data-grid";
+import { l as p } from "../../../chunks/lodash.CA_K01A9.js";
+import { useState as r, useCallback as k, useEffect as v, useMemo as O } from "react";
+import { FontNormalSxProps as T } from "../../../_constants.js";
+import { QuickSearchToolbar as j } from "./_QuickSearchToolbar.js";
+function Z({ ...e }) {
+  const [h, d] = r(!1), [l, x] = r({
     page: 0,
     pageSize: 10
-  }), [n, M] = l([]), [s, y] = l({
+  }), [i, C] = r([]), [n, S] = r({
     items: []
-  }), r = e.mode ?? "server", c = r === "server", $ = f((t) => {
-    M(t);
-  }, []), w = f((t) => {
-    y(t);
-  }, []), [R, g] = l(((m = e.data) == null ? void 0 : m.totalItems) || 0);
-  async function b(t, a, d) {
-    if (c && e.getData) {
+  }), [w, M] = r(null), a = e.mode ?? "server", u = a === "server", y = k((o) => {
+    C(o);
+  }, []), $ = k((o) => {
+    S(o);
+  }, []), [P, g] = r(e.data?.rowCount ?? 0);
+  async function m(o, s, c) {
+    if (u && e.getData) {
       const D = async () => {
-        await e.getData({ ...t, sortModel: a, filterModel: d });
+        await e.getData({ ...o, sortModel: s, filterModel: c });
       };
-      u(!0), await D(), u(!1);
+      d(!0), await D(), d(!1);
     }
   }
-  return x(() => {
-    g((t) => {
-      var a;
-      return ((a = e.data) == null ? void 0 : a.totalItems) ?? t;
-    });
-  }, [(k = e.data) == null ? void 0 : k.totalItems, g]), x(() => {
-    b(i, n, s);
-  }, [i, n, s]), /* @__PURE__ */ F(
-    p,
+  v(() => {
+    g((o) => e.data?.rowCount ?? o);
+  }, [e.data?.rowCount, g]), v(() => {
+    m(l, i, n);
+  }, [l, i, n]);
+  const F = O(
+    () => ({
+      pagination: {
+        paginationModel: {
+          page: 0,
+          pageSize: 10
+        },
+        rowCount: 0
+      },
+      sorting: {
+        sortModel: e.initialSort ? [e.initialSort] : []
+      },
+      filter: {
+        filterModel: {
+          items: [],
+          logicOperator: f.And,
+          quickFilterLogicOperator: f.And,
+          quickFilterValues: []
+        }
+      }
+    }),
+    [e.initialSort]
+  ), L = p.merge(
+    {
+      columnHeaderSortIconLabel: "Sorteren",
+      filterPanelColumns: "Kolom",
+      filterPanelInputLabel: "Zoekterm",
+      filterPanelInputPlaceholder: "Zoeken...",
+      toolbarQuickFilterPlaceholder: "Zoeken...",
+      toolbarQuickFilterLabel: "Zoeken",
+      toolbarQuickFilterDeleteIconLabel: "Wissen",
+      noRowsLabel: "Geen regels beschikbaar",
+      noResultsOverlayLabel: "Geen regels gevonden.",
+      paginationItemAriaLabel: (o) => {
+        switch (o) {
+          /* v8 ignore next */
+          case "first":
+            return "Ga naar eerste pagina";
+          /* v8 ignore next */
+          case "last":
+            return "Ga naar laatste pagina";
+          case "next":
+            return "Ga naar volgende pagina";
+          case "previous":
+            return "Ga naar vorige pagina";
+        }
+      },
+      paginationDisplayedRows: ({ from: o, to: s, count: c }) => `${o} - ${s} van ${c}`,
+      paginationRowsPerPage: "Regels per pagina",
+      footerRowSelected: (o) => `${o} regels geselecteerd`
+    },
+    e.localeText
+  );
+  return /* @__PURE__ */ R(
+    I,
     {
       columns: e.columns,
-      "data-qa": e["data-qa"],
       disableColumnFilter: !0,
       disableColumnMenu: !0,
       disableColumnSelector: !0,
       disableDensitySelector: !0,
       disableRowSelectionOnClick: !0,
       disableVirtualization: !0,
-      filterMode: r,
+      filterMode: a,
       getRowHeight: () => "auto",
-      initialState: {
-        sorting: {
-          sortModel: e.initialSort ? [e.initialSort] : []
-        }
-      },
-      loading: C,
-      localeText: e.localeText ?? {
-        columnHeaderSortIconLabel: "Sorteren",
-        toolbarQuickFilterPlaceholder: "Zoeken...",
-        toolbarQuickFilterLabel: "Zoeken",
-        toolbarQuickFilterDeleteIconLabel: "Wissen",
-        noRowsLabel: "Geen regels beschikbaar",
-        noResultsOverlayLabel: "Geen regels gevonden.",
-        MuiTablePagination: {
-          labelDisplayedRows: ({ from: t, to: a, count: d }) => `${t} - ${a} van ${d}`,
-          labelRowsPerPage: "Regels per pagina"
-        },
-        footerRowSelected: (t) => `${t} regels geselecteerd`
-      },
-      onFilterModelChange: w,
-      onPaginationModelChange: S,
-      onSortModelChange: $,
+      ignoreDiacritics: !0,
+      initialState: F,
+      loading: h,
+      localeText: L,
+      onFilterModelChange: $,
+      onPaginationModelChange: x,
+      onSortModelChange: y,
       pageSizeOptions: [5, 10, 20, 40, 80],
-      paginationMode: r,
-      paginationModel: i,
-      rowCount: c ? R : void 0,
-      rows: (v = e.data) == null ? void 0 : v.items,
+      paginationMode: a,
+      paginationModel: l,
+      rowCount: u ? P : void 0,
+      rows: e.data?.rows,
+      showToolbar: !0,
       slotProps: {
+        filterPanel: {
+          filterFormProps: {
+            operatorInputProps: {
+              disabled: !0,
+              sx: { display: "none" }
+            },
+            valueInputProps: {
+              sx: {
+                marginLeft: "15px"
+              }
+            }
+          }
+        },
+        panel: {
+          target: w
+        },
         toolbar: {
+          setFilterButtonEl: M,
           showQuickFilter: !0,
           quickFilterProps: { debounceMs: 500 },
-          mode: r,
-          isServerMode: c,
-          getData: async () => b(i, n, s),
+          mode: a,
+          getData: async () => m(l, i, n),
           actionButtons: e.actionButtons,
           localeText: e.localeText
+        },
+        root: {
+          "data-qa": e["data-qa"]
         }
       },
-      slots: {
-        toolbar: I
-      },
-      sortingMode: r,
-      sx: T.merge(
+      slots: { toolbar: j },
+      sortingMode: a,
+      sx: p.merge(
         {
           border: 0,
           color: "var(--color-text)",
           letterSpacing: "normal",
           minHeight: "300px",
-          [`&.${o["root--densityCompact"]}`]: {
-            [`.${o.cell}`]: {
+          [`&.${t["root--densityCompact"]}`]: {
+            [`.${t.cell}`]: {
               py: "8px"
             }
           },
-          [`&.${o["root--densityStandard"]}`]: {
-            [`.${o.cell}`]: {
+          [`&.${t["root--densityStandard"]}`]: {
+            [`.${t.cell}`]: {
               py: "15px"
             }
           },
-          [`&.${o["root--densityComfortable"]}`]: {
-            [`.${o.cell}`]: {
+          [`&.${t["root--densityComfortable"]}`]: {
+            [`.${t.cell}`]: {
               py: "22px"
             }
           },
@@ -113,17 +165,17 @@ function L(e) {
            * Because a fixed height is not desirable, we set a min-height on the DataGrid and set
            * the min-height of the virtualScroller to half of that height.
            */
-          [`.${o.virtualScroller}`]: {
+          [`.${t.virtualScroller}`]: {
             minHeight: "150px",
             overflow: "hidden",
             position: "relative"
           },
-          [`.${o.columnHeaders}`]: {
+          [`.${t.columnHeader}`]: {
             "--DataGrid-containerBackground": "var(--color-rijks-skyblue)",
-            backgroundCcolor: "var(--color-rijks-skyblue)",
+            backgroundColor: "var(--color-rijks-skyblue)",
             color: "var(--color-text-light)"
           },
-          [`.${o.row}`]: {
+          [`.${t.row}`]: {
             ":hover": {
               backgroundColor: "var(--color-rijks-skyblue-light)"
             },
@@ -134,16 +186,16 @@ function L(e) {
               }
             }
           },
-          [`.${o.columnHeader}, .${o.cell}, .MuiDataGrid-columnsContainer`]: {
+          [`.${t.columnHeader}, .${t.cell}, .MuiDataGrid-columnsContainer`]: {
             borderRight: "1px solid var(--color-rijks-grey-2)"
           },
-          [`.${o.cell}`]: {
+          [`.${t.cell}`]: {
             color: "var(--color-text)"
           },
-          [`.${P.root}`]: {
+          [`.${G.root}`]: {
             borderRadius: 0
           },
-          [`.${h.root}`]: {
+          [`.${b.root}`]: {
             color: "var(--color-primary)",
             ":focus": {
               outline: "2px dashed var(--color-text)",
@@ -154,19 +206,18 @@ function L(e) {
               color: "var(--color-disabled)"
             }
           },
-          [`.${o.columnHeader} .${h.root}`]: {
+          [`.${t.columnHeader} .${b.root}`]: {
             color: "white"
           }
         },
         e.sx,
-        H
+        T
       ),
       ...e.dataGridOverridableProps
     }
   );
 }
-const E = j(L);
 export {
-  E as AoaTable
+  Z as AoaTable
 };
 //# sourceMappingURL=Table.js.map

package/dist/components/atoms/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { checkboxClasses, paginationItemClasses, type SxProps } from '@mui/material';\nimport {\n  DataGrid,\n  gridClasses,\n  type DataGridProps,\n  type GridColDef,\n  type GridFilterModel,\n  type GridLocaleText,\n  type GridSortModel\n} from '@mui/x-data-grid';\nimport { merge } from 'lodash';\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\nimport { QuickSearchToolbar } from './_QuickSearchToolbar';\n\nexport interface AoaTableData<T extends object = any> {\n  /**\n   * The paged, filtered and sorted items from the database\n   */\n  items: T[];\n  /**\n   * The total number of items present in the database table\n   */\n  totalItems: number;\n}\n\nexport type AoaTableColumns<T extends object = any> = GridColDef<T>[];\n\nexport interface AoaTableQueryOptions {\n  /**\n   * Material UI's GridFilterModel\n   */\n  filterModel: GridFilterModel;\n  /**\n   * The current page of the table\n   */\n  page: number;\n  /**\n   * The maximum number of items that are shown on a page\n   */\n  pageSize: number;\n  /**\n   * Material UI's GridSortModel\n   */\n  sortModel: GridSortModel;\n}\n\ntype ModeProps =\n  /**\n   * Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side\n   */\n  | { getData?: never; mode: 'client' }\n  /**\n   * The Redux action that takes PaginationModel as parameter to retrieve data from the server\n   */\n  | { getData(queryOptions: AoaTableQueryOptions): Promise<void> | void; mode?: never };\n\nexport type AoaTableProps<T extends object = any> = ModeProps & {\n  /**\n   * Action buttons shown in the toolbar of the table\n   */\n  readonly actionButtons?: JSX.Element[];\n  /**\n   * The column structure to display the data\n   */\n  readonly columns: GridColDef<T>[];\n  /**\n   * The TableData object to be displayed in the table\n   */\n  readonly data: AoaTableData<T>;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * Overwrite a safe selection of the {@link DataGrid} properties\n   */\n  readonly dataGridOverridableProps?: Pick<\n    DataGridProps<T>,\n    | 'checkboxSelection'\n    | 'disableRowSelectionOnClick'\n    | 'getRowId'\n    | 'ignoreDiacritics'\n    | 'isRowSelectable'\n    | 'loading'\n    | 'onRowSelectionModelChange'\n    | 'rowSelectionModel'\n  >;\n  /**\n   * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting\n   */\n  readonly initialSort?: { field: string; sort: 'asc' | 'desc' };\n  /**\n   * Overwrites the default labels when you need a different language than Dutch\n   */\n  readonly localeText?: GridLocaleText & { refreshTable: string };\n  /**\n   * Material UI's property to apply styling\n   */\n  readonly sx?: SxProps;\n};\n\ninterface PaginationModel {\n  page: number;\n  pageSize: number;\n}\n\n/**\n * Constructs a table using pre-defined Rijks styling\n *\n * @param props - Props to pass to the button\n * @example\n * ```jsx\n * <AoaTable\n *  getData={(queryOptions) => getMockData(queryOptions)}\n *  data={mockData}\n *  columns={[{ field: \"id\" }, { field: \"title\" }, { field: \"completed\" }]}\n * />\n * ```\n */\n\nfunction NonMemoizeAoaTable<T extends object = any>(props: AoaTableProps<T>) {\n  const [isLoading, setIsLoading] = useState(false);\n  const [paginationModel, setPaginationModel] = useState<PaginationModel>({\n    page: 0,\n    pageSize: 10\n  });\n  const [sortModel, setSortModel] = useState<GridSortModel>([]);\n  const [filterModel, setFilterModel] = useState<GridFilterModel>({\n    items: []\n  });\n\n  const mode = props.mode ?? 'server';\n  const isServerMode = mode === 'server';\n\n  const handleSortModelChange = useCallback((sortModel: GridSortModel) => {\n    setSortModel(sortModel);\n  }, []);\n\n  const onFilterChange = useCallback((filterModel: GridFilterModel) => {\n    setFilterModel(filterModel);\n  }, []);\n\n  const [rowCountState, setRowCountState] = useState(props.data?.totalItems || 0);\n\n  async function getData(paginationModel: PaginationModel, sortModel: GridSortModel, filterModel: GridFilterModel) {\n    if (isServerMode && props.getData) {\n      const fetchData = async () => {\n        await props.getData({ ...paginationModel, sortModel, filterModel });\n      };\n\n      setIsLoading(true);\n      await fetchData();\n      setIsLoading(false);\n    }\n  }\n\n  useEffect(() => {\n    setRowCountState((prevRowCountState) => props.data?.totalItems ?? prevRowCountState);\n  }, [props.data?.totalItems, setRowCountState]);\n\n  useEffect(() => {\n    void getData(paginationModel, sortModel, filterModel);\n    // ESLint tells us here that we should add the `getData` function, however,\n    // doing so will cause the fetching to loop infinity until the JavaScript heap overflows.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [paginationModel, sortModel, filterModel]);\n\n  return (\n    <DataGrid\n      columns={props.columns}\n      data-qa={props['data-qa']}\n      disableColumnFilter\n      disableColumnMenu\n      disableColumnSelector\n      disableDensitySelector\n      disableRowSelectionOnClick\n      disableVirtualization\n      filterMode={mode}\n      getRowHeight={() => 'auto'}\n      initialState={{\n        sorting: {\n          sortModel: props.initialSort ? [props.initialSort] : []\n        }\n      }}\n      loading={isLoading}\n      localeText={\n        props.localeText ?? {\n          columnHeaderSortIconLabel: 'Sorteren',\n          toolbarQuickFilterPlaceholder: 'Zoeken...',\n          toolbarQuickFilterLabel: 'Zoeken',\n          toolbarQuickFilterDeleteIconLabel: 'Wissen',\n          noRowsLabel: 'Geen regels beschikbaar',\n          noResultsOverlayLabel: 'Geen regels gevonden.',\n          MuiTablePagination: {\n            labelDisplayedRows: ({ from, to, count }) => `${from} - ${to} van ${count}`,\n            labelRowsPerPage: 'Regels per pagina'\n          },\n          footerRowSelected: (count) => `${count} regels geselecteerd`\n        }\n      }\n      onFilterModelChange={onFilterChange}\n      onPaginationModelChange={setPaginationModel}\n      onSortModelChange={handleSortModelChange}\n      pageSizeOptions={[5, 10, 20, 40, 80]}\n      paginationMode={mode}\n      paginationModel={paginationModel}\n      rowCount={isServerMode ? rowCountState : undefined}\n      rows={props.data?.items}\n      slotProps={{\n        toolbar: {\n          showQuickFilter: true,\n          quickFilterProps: { debounceMs: 500 },\n          mode,\n          isServerMode,\n          getData: async () => getData(paginationModel, sortModel, filterModel),\n          actionButtons: props.actionButtons,\n          localeText: props.localeText\n        }\n      }}\n      slots={{\n        toolbar: QuickSearchToolbar\n      }}\n      sortingMode={mode}\n      sx={merge(\n        {\n          border: 0,\n          color: 'var(--color-text)',\n          letterSpacing: 'normal',\n          minHeight: '300px',\n\n          [`&.${gridClasses['root--densityCompact']}`]: {\n            [`.${gridClasses.cell}`]: {\n              py: '8px'\n            }\n          },\n          [`&.${gridClasses['root--densityStandard']}`]: {\n            [`.${gridClasses.cell}`]: {\n              py: '15px'\n            }\n          },\n          [`&.${gridClasses['root--densityComfortable']}`]: {\n            [`.${gridClasses.cell}`]: {\n              py: '22px'\n            }\n          },\n\n          /**\n           * The 'no results' message does not show if the DataGrid does not have a fixed height.\n           * Because a fixed height is not desirable, we set a min-height on the DataGrid and set\n           * the min-height of the virtualScroller to half of that height.\n           */\n          [`.${gridClasses.virtualScroller}`]: {\n            minHeight: '150px',\n            overflow: 'hidden',\n            position: 'relative'\n          },\n\n          [`.${gridClasses.columnHeaders}`]: {\n            '--DataGrid-containerBackground': 'var(--color-rijks-skyblue)',\n            backgroundCcolor: 'var(--color-rijks-skyblue)',\n            color: 'var(--color-text-light)'\n          },\n\n          [`.${gridClasses.row}`]: {\n            ':hover': {\n              backgroundColor: 'var(--color-rijks-skyblue-light)'\n            },\n\n            ':nth-of-type(even)': {\n              backgroundColor: 'var(--color-rijks-grey-1)',\n\n              ':hover': {\n                backgroundColor: 'var(--color-rijks-skyblue-light)'\n              }\n            }\n          },\n\n          [`.${gridClasses.columnHeader}, .${gridClasses.cell}, .MuiDataGrid-columnsContainer`]: {\n            borderRight: '1px solid var(--color-rijks-grey-2)'\n          },\n\n          [`.${gridClasses.cell}`]: {\n            color: 'var(--color-text)'\n          },\n\n          [`.${paginationItemClasses.root}`]: {\n            borderRadius: 0\n          },\n\n          [`.${checkboxClasses.root}`]: {\n            color: 'var(--color-primary)',\n\n            ':focus': {\n              outline: '2px dashed var(--color-text)',\n              outlineOffset: '-9px',\n              borderRadius: 0\n            },\n\n            ':disabled': {\n              color: 'var(--color-disabled)'\n            }\n          },\n\n          [`.${gridClasses.columnHeader} .${checkboxClasses.root}`]: {\n            color: 'white'\n          }\n        },\n        props.sx,\n        FontNormalSxProps\n      )}\n      {...props.dataGridOverridableProps}\n    />\n  );\n}\n\nexport const AoaTable = memo(NonMemoizeAoaTable) as typeof NonMemoizeAoaTable;\n"],"names":["NonMemoizeAoaTable","props","isLoading","setIsLoading","useState","paginationModel","setPaginationModel","sortModel","setSortModel","filterModel","setFilterModel","mode","isServerMode","handleSortModelChange","useCallback","onFilterChange","rowCountState","setRowCountState","_a","getData","fetchData","useEffect","prevRowCountState","_b","jsx","DataGrid","from","to","count","_c","QuickSearchToolbar","merge","gridClasses","paginationItemClasses","checkboxClasses","FontNormalSxProps","AoaTable","memo"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../src/components/atoms/table/Table.tsx"],"sourcesContent":["import { checkboxClasses, paginationItemClasses, type SxProps } from '@mui/material';\nimport {\n  GridLogicOperator,\n  DataGrid,\n  gridClasses,\n  type DataGridProps,\n  type GridColDef,\n  type GridGetRowsParams,\n  type GridInitialState,\n  type GridLocaleText,\n  type GridPaginationModel,\n  type GridRowModel,\n  type GridValidRowModel,\n  type GridSortModel,\n  type GridFilterModel\n} from '@mui/x-data-grid';\nimport { merge } from 'lodash';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { FontNormalSxProps } from '../../../_constants';\nimport { QuickSearchToolbar } from './_QuickSearchToolbar';\n\nexport interface AoaTableData<T extends GridValidRowModel = GridValidRowModel> {\n  /**\n   * Additional `pageInfo` for advanced use-cases.\n   * `hasNextPage`: When row count is unknown/estimated, `hasNextPage` will be used to check if more records are available on server.\n   */\n  pageInfo?: {\n    hasNextPage?: boolean;\n    nextCursor?: string;\n  };\n  /**\n   * To reflect updates in total `rowCount` (optional).\n   * Useful when the `rowCount` is inaccurate (for example when filtering) or not available upfront.\n   */\n  rowCount?: number;\n  /**\n   * The paged, filtered and sorted items from the database\n   */\n  rows: GridRowModel<T>[];\n}\n\nexport type AoaTableColumns<T extends object = any> = GridColDef<T>[];\n\nexport type AoaTableQueryOptions = GridPaginationModel & Omit<GridGetRowsParams, 'end' | 'paginationModel' | 'start'>;\n\ntype ModeProps =\n  /**\n   * Overwrites the default mode (server) when you need pagination, filtering and sorting on the client side\n   */\n  | { getData?: never; mode: 'client' }\n  /**\n   * The Redux action that takes PaginationModel as parameter to retrieve data from the server\n   */\n  | { getData(queryOptions: AoaTableQueryOptions): Promise<void> | void; mode?: 'server' };\n\nexport type AoaTableProps<T extends object = any> = ModeProps & {\n  /**\n   * Action buttons shown in the toolbar of the table\n   */\n  readonly actionButtons?: JSX.Element[];\n  /**\n   * The column structure to display the data\n   */\n  readonly columns: GridColDef<T>[];\n  /**\n   * The TableData object to be displayed in the table\n   */\n  readonly data: AoaTableData<T>;\n  /**\n   * Data-qa tag for E2E test purposes\n   */\n  readonly 'data-qa'?: string;\n  /**\n   * Overwrite a safe selection of the {@link DataGrid} properties\n   */\n  readonly dataGridOverridableProps?: Pick<\n    DataGridProps<T>,\n    | 'checkboxSelection'\n    | 'disableColumnFilter'\n    | 'disableRowSelectionOnClick'\n    | 'getRowId'\n    | 'ignoreDiacritics'\n    | 'isRowSelectable'\n    | 'loading'\n    | 'onRowSelectionModelChange'\n    | 'rowSelectionModel'\n  >;\n  /**\n   * Sets the initial sortModel in case the required sorting differs from the back-end's default sorting\n   */\n  readonly initialSort?: { field: string; sort: 'asc' | 'desc' };\n  /**\n   * Overwrites the default labels when you need a different language than Dutch\n   */\n  readonly localeText?: GridLocaleText & { refreshTable: string };\n  /**\n   * Material UI's property to apply styling\n   */\n  readonly sx?: SxProps;\n};\n\n/**\n * Constructs a table using pre-defined Rijks styling\n *\n * @param props - Props to pass to the button\n * @example\n * ```jsx\n * <AoaTable\n *  getData={(queryOptions) => getMockData(queryOptions)}\n *  data={mockData}\n *  columns={[{ field: \"id\" }, { field: \"title\" }, { field: \"completed\" }]}\n * />\n * ```\n */\n\nexport function AoaTable<T extends object = any>({ ...props }: AoaTableProps<T>) {\n  const [isLoading, setIsLoading] = useState(false);\n  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({\n    page: 0,\n    pageSize: 10\n  });\n  const [sortModel, setSortModel] = useState<GridSortModel>([]);\n  const [filterModel, setFilterModel] = useState<GridFilterModel>({\n    items: []\n  });\n  const [filterButtonEl, setFilterButtonEl] = useState<HTMLButtonElement | null>(null);\n\n  const mode = props.mode ?? 'server';\n  const isServerMode = mode === 'server';\n\n  const handleSortModelChange = useCallback((sortModel: GridSortModel) => {\n    setSortModel(sortModel);\n  }, []);\n\n  const onFilterChange = useCallback((filterModel: GridFilterModel) => {\n    setFilterModel(filterModel);\n  }, []);\n\n  const [rowCountState, setRowCountState] = useState(props.data?.rowCount ?? 0);\n\n  async function getData(paginationModel: GridPaginationModel, sortModel: GridSortModel, filterModel: GridFilterModel) {\n    if (isServerMode && props.getData) {\n      const fetchData = async () => {\n        await props.getData({ ...paginationModel, sortModel, filterModel });\n      };\n\n      setIsLoading(true);\n      await fetchData();\n      setIsLoading(false);\n    }\n  }\n\n  useEffect(() => {\n    setRowCountState((prevRowCountState) => props.data?.rowCount ?? prevRowCountState);\n  }, [props.data?.rowCount, setRowCountState]);\n\n  useEffect(() => {\n    void getData(paginationModel, sortModel, filterModel);\n    // ESLint tells us here that we should add the `getData` function, however,\n    // doing so will cause the fetching to loop infinity until the JavaScript heap overflows.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [paginationModel, sortModel, filterModel]);\n\n  const initialState: GridInitialState = useMemo(\n    () => ({\n      pagination: {\n        paginationModel: {\n          page: 0,\n          pageSize: 10\n        },\n        rowCount: 0\n      },\n      sorting: {\n        sortModel: props.initialSort ? [props.initialSort] : []\n      },\n      filter: {\n        filterModel: {\n          items: [],\n          logicOperator: GridLogicOperator.And,\n          quickFilterLogicOperator: GridLogicOperator.And,\n          quickFilterValues: []\n        }\n      }\n    }),\n    [props.initialSort]\n  );\n\n  const mergedLocaleText = merge<\n    Partial<GridLocaleText & { refreshTable: string }>,\n    (GridLocaleText & { refreshTable: string }) | undefined\n  >(\n    {\n      columnHeaderSortIconLabel: 'Sorteren',\n      filterPanelColumns: 'Kolom',\n      filterPanelInputLabel: 'Zoekterm',\n      filterPanelInputPlaceholder: 'Zoeken...',\n      toolbarQuickFilterPlaceholder: 'Zoeken...',\n      toolbarQuickFilterLabel: 'Zoeken',\n      toolbarQuickFilterDeleteIconLabel: 'Wissen',\n      noRowsLabel: 'Geen regels beschikbaar',\n      noResultsOverlayLabel: 'Geen regels gevonden.',\n      paginationItemAriaLabel: (type) => {\n        switch (type) {\n          /* v8 ignore next */\n          case 'first':\n            /* v8 ignore next */\n            return 'Ga naar eerste pagina';\n          /* v8 ignore next */\n          case 'last':\n            /* v8 ignore next */\n            return 'Ga naar laatste pagina';\n          case 'next':\n            return 'Ga naar volgende pagina';\n          case 'previous':\n            return 'Ga naar vorige pagina';\n        }\n      },\n      paginationDisplayedRows: ({ from, to, count }) => `${from} - ${to} van ${count}`,\n      paginationRowsPerPage: 'Regels per pagina',\n      footerRowSelected: (count) => `${count} regels geselecteerd`\n    },\n    props.localeText\n  );\n\n  return (\n    <DataGrid\n      columns={props.columns}\n      disableColumnFilter\n      disableColumnMenu\n      disableColumnSelector\n      disableDensitySelector\n      disableRowSelectionOnClick\n      disableVirtualization\n      filterMode={mode}\n      getRowHeight={() => 'auto'}\n      ignoreDiacritics\n      initialState={initialState}\n      loading={isLoading}\n      localeText={mergedLocaleText}\n      onFilterModelChange={onFilterChange}\n      onPaginationModelChange={setPaginationModel}\n      onSortModelChange={handleSortModelChange}\n      pageSizeOptions={[5, 10, 20, 40, 80]}\n      paginationMode={mode}\n      paginationModel={paginationModel}\n      rowCount={isServerMode ? rowCountState : undefined}\n      rows={props.data?.rows}\n      showToolbar\n      slotProps={{\n        filterPanel: {\n          filterFormProps: {\n            operatorInputProps: {\n              disabled: true,\n              sx: { display: 'none' }\n            },\n            valueInputProps: {\n              sx: {\n                marginLeft: '15px'\n              }\n            }\n          }\n        },\n        panel: {\n          target: filterButtonEl\n        },\n        toolbar: {\n          setFilterButtonEl,\n          showQuickFilter: true,\n          quickFilterProps: { debounceMs: 500 },\n          mode,\n          getData: async () => getData(paginationModel, sortModel, filterModel),\n          actionButtons: props.actionButtons,\n          localeText: props.localeText\n        },\n        root: {\n          'data-qa': props['data-qa']\n        }\n      }}\n      slots={{ toolbar: QuickSearchToolbar }}\n      sortingMode={mode}\n      sx={merge(\n        {\n          border: 0,\n          color: 'var(--color-text)',\n          letterSpacing: 'normal',\n          minHeight: '300px',\n\n          [`&.${gridClasses['root--densityCompact']}`]: {\n            [`.${gridClasses.cell}`]: {\n              py: '8px'\n            }\n          },\n          [`&.${gridClasses['root--densityStandard']}`]: {\n            [`.${gridClasses.cell}`]: {\n              py: '15px'\n            }\n          },\n          [`&.${gridClasses['root--densityComfortable']}`]: {\n            [`.${gridClasses.cell}`]: {\n              py: '22px'\n            }\n          },\n\n          /**\n           * The 'no results' message does not show if the DataGrid does not have a fixed height.\n           * Because a fixed height is not desirable, we set a min-height on the DataGrid and set\n           * the min-height of the virtualScroller to half of that height.\n           */\n          [`.${gridClasses.virtualScroller}`]: {\n            minHeight: '150px',\n            overflow: 'hidden',\n            position: 'relative'\n          },\n\n          [`.${gridClasses.columnHeader}`]: {\n            '--DataGrid-containerBackground': 'var(--color-rijks-skyblue)',\n            backgroundColor: 'var(--color-rijks-skyblue)',\n            color: 'var(--color-text-light)'\n          },\n\n          [`.${gridClasses.row}`]: {\n            ':hover': {\n              backgroundColor: 'var(--color-rijks-skyblue-light)'\n            },\n\n            ':nth-of-type(even)': {\n              backgroundColor: 'var(--color-rijks-grey-1)',\n\n              ':hover': {\n                backgroundColor: 'var(--color-rijks-skyblue-light)'\n              }\n            }\n          },\n\n          [`.${gridClasses.columnHeader}, .${gridClasses.cell}, .MuiDataGrid-columnsContainer`]: {\n            borderRight: '1px solid var(--color-rijks-grey-2)'\n          },\n\n          [`.${gridClasses.cell}`]: {\n            color: 'var(--color-text)'\n          },\n\n          [`.${paginationItemClasses.root}`]: {\n            borderRadius: 0\n          },\n\n          [`.${checkboxClasses.root}`]: {\n            color: 'var(--color-primary)',\n\n            ':focus': {\n              outline: '2px dashed var(--color-text)',\n              outlineOffset: '-9px',\n              borderRadius: 0\n            },\n\n            ':disabled': {\n              color: 'var(--color-disabled)'\n            }\n          },\n\n          [`.${gridClasses.columnHeader} .${checkboxClasses.root}`]: {\n            color: 'white'\n          }\n        },\n        props.sx,\n        FontNormalSxProps\n      )}\n      {...props.dataGridOverridableProps}\n    />\n  );\n}\n"],"names":["AoaTable","props","isLoading","setIsLoading","useState","paginationModel","setPaginationModel","sortModel","setSortModel","filterModel","setFilterModel","filterButtonEl","setFilterButtonEl","mode","isServerMode","handleSortModelChange","useCallback","onFilterChange","rowCountState","setRowCountState","getData","fetchData","useEffect","prevRowCountState","initialState","useMemo","GridLogicOperator","mergedLocaleText","merge","type","from","to","count","jsx","DataGrid","QuickSearchToolbar","gridClasses","paginationItemClasses","checkboxClasses","FontNormalSxProps"],"mappings":"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"}

package/dist/components/atoms/table/_QuickSearchToolbar.d.ts

@@ -1,14 +1,15 @@
 import { GridLocaleText, GridToolbarProps, ToolbarPropsOverrides } from '@mui/x-data-grid';
+import { Dispatch, SetStateAction } from 'react';
 declare module '@mui/x-data-grid' {
     interface ToolbarPropsOverrides {
         actionButtons?: JSX.Element[];
         getData(this: void): void;
-        isServerMode: boolean;
         localeText?: GridLocaleText & {
             refreshTable: string;
         };
         mode: 'client' | 'server';
+        setFilterButtonEl: Dispatch<SetStateAction<HTMLButtonElement | null>>;
     }
 }
-export declare const QuickSearchToolbar: import('react').MemoExoticComponent<({ mode, isServerMode, actionButtons, getData, localeText, quickFilterProps }: GridToolbarProps & ToolbarPropsOverrides) => import("react/jsx-runtime").JSX.Element>;
+export declare function QuickSearchToolbar({ mode, actionButtons, localeText, getData, setFilterButtonEl }: GridToolbarProps & ToolbarPropsOverrides): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=_QuickSearchToolbar.d.ts.map

package/dist/components/atoms/table/_QuickSearchToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_QuickSearchToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAI1B,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAiB,qBAAqB;QACpC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAC1B,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,CAAC,EAAE,cAAc,GAAG;YAC5B,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;KAC3B;CACF;AAED,eAAO,MAAM,kBAAkB,qHAQ1B,gBAAgB,GAAG,qBAAqB,6CAoG5C,CAAC"}
+{"version":3,"file":"_QuickSearchToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/table/_QuickSearchToolbar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,QAAQ,EAAkB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAI3E,OAAO,QAAQ,kBAAkB,CAAC;IAChC,UAAiB,qBAAqB;QACpC,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAC1B,UAAU,CAAC,EAAE,cAAc,GAAG;YAC5B,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;QAC1B,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC,CAAC;KACvE;CACF;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,aAAa,EACb,UAAU,EACV,OAAO,EACP,iBAAiB,EAClB,EAAE,gBAAgB,GAAG,qBAAqB,2CA0J1C"}