@muraldevkit/ui-toolkit 4.68.0-dev-NFbt.1 → 4.68.0-dev-5W5E.1

package/dist/esm/components/table/MrlTableCell/MrlTableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlTableCell.js","sources":["../../../../../src/components/table/MrlTableCell/MrlTableCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../utils';\nimport type { MrlTableColumnSticky } from '../MrlSmartTable';\n\nimport styles from './MrlTableCell.module.scss';\nimport { MrlTableCellHorizontalAlign } from '../constants';\n\nconst COMPONENT_NAME = 'MrlTableCell';\n\nexport interface MrlTableCellProps extends React.ComponentPropsWithoutRef<'td'> {\n\t/**\n\t * An element id (and if not provided, a unique value decorated\n\t * to prevent conflict with aria controls will be generated).\n\t *\n\t * @default `${id}-mrl-table-cell`\n\t */\n\tid?: string;\n\t/**\n\t * Whether this cell is sticky 'left' or sticky 'right' or not sticky at all\n\t */\n\tsticky?: MrlTableColumnSticky;\n\thasScrollShadowLeft?: boolean;\n\thasScrollShadowRight?: boolean;\n\thorizontalAlign?: MrlTableCellHorizontalAlign;\n}\n\n/**\n * MrlTableCell Component\n *\n * @param {MrlTableCellProps} props - MrlTableCell component props\n * @returns a table cell element\n */\nexport function MrlTableCell(props: MrlTableCellProps): JSX.Element {\n\tconst { hasScrollShadowLeft, hasScrollShadowRight, className, sticky, horizontalAlign, ...rest } =\n\t\tprops;\n\tconst idRef = React.useRef<string>(rest.id || getUniqueId('mrl-table-cell'));\n\tconst classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME], {\n\t\t[`${styles['sticky']} ${styles[`${sticky}`]}`]: !!sticky,\n\t\t[`${styles['align-right']}`]: horizontalAlign === 'right',\n\t\t[`${styles[`left-shadow`]}`]: sticky === 'left' && hasScrollShadowLeft,\n\t\t[`${styles[`right-shadow`]}`]: sticky === 'right' && hasScrollShadowRight\n\t});\n\treturn <td className={classes} id={idRef.current} data-sticky={!!sticky} {...rest} />;\n}\n"],"names":["COMPONENT_NAME","MrlTableCell","props","hasScrollShadowLeft","hasScrollShadowRight","className","sticky","horizontalAlign","rest","_objectWithoutProperties","_excluded","idRef","React","useRef","id","getUniqueId","classes","classnames","styles","_defineProperty","concat","createElement","_extends","current"],"mappings":";;;;;;;AAQA,IAAMA,cAAc,GAAG,cAAc;AAmBrC;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,YAAYA,CAACC,KAAwB,EAAe;AACnE,EAAA,IAAQC,mBAAmB,GAC1BD,KAAK,CADEC,mBAAmB;IAAEC,oBAAoB,GAChDF,KAAK,CADuBE,oBAAoB;IAAEC,SAAS,GAC3DH,KAAK,CAD6CG,SAAS;IAAEC,MAAM,GACnEJ,KAAK,CADwDI,MAAM;IAAEC,eAAe,GACpFL,KAAK,CADgEK,eAAe;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAC7FP,KAAK,EAAAQ,SAAA,CAAA;AACN,EAAA,IAAMC,KAAK,GAAGC,KAAK,CAACC,MAAM,CAASL,IAAI,CAACM,EAAE,IAAIC,WAAW,CAAC,gBAAgB,CAAC,CAAC;AAC5E,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACZ,SAAS,EAAEL,cAAc,EAAEkB,MAAM,CAAClB,cAAc,CAAC,EAAAmB,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA,EAAA,EAAA,EAAA,CAAAC,MAAA,CACvEF,MAAM,CAAC,QAAQ,CAAC,EAAA,GAAA,CAAA,CAAAE,MAAA,CAAIF,MAAM,CAAA,EAAA,CAAAE,MAAA,CAAId,MAAM,CAAA,CAAG,CAAA,EAAK,CAAC,CAACA,MAAM,CAAA,EAAA,EAAA,CAAAc,MAAA,CACpDF,MAAM,CAAC,aAAa,CAAC,CAAA,EAAKX,eAAe,KAAK,OAAO,CAAA,EAAA,EAAA,CAAAa,MAAA,CACrDF,MAAM,CAAA,aAAA,CAAe,CAAA,EAAKZ,MAAM,KAAK,MAAM,IAAIH,mBAAmB,CAAA,EAAA,EAAA,CAAAiB,MAAA,CAClEF,MAAM,CAAA,cAAA,CAAgB,CAAA,EAAKZ,MAAM,KAAK,OAAO,IAAIF,oBAAoB,CACzE,CAAC;AACF,EAAA,oBAAOQ,KAAA,CAAAS,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AAAIjB,IAAAA,SAAS,EAAEW,OAAQ;IAACF,EAAE,EAAEH,KAAK,CAACY,OAAQ;AAAC,IAAA,aAAA,EAAa,CAAC,CAACjB;GAAO,EAAKE,IAAI,CAAG,CAAC;AACtF;;;;"}
+{"version":3,"file":"MrlTableCell.js","sources":["../../../../../src/components/table/MrlTableCell/MrlTableCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../utils';\nimport type { MrlTableColumnSticky } from '../MrlSmartTable';\n\nimport styles from './MrlTableCell.module.scss';\nimport { MrlTableCellHorizontalAlign } from '../constants';\n\nconst COMPONENT_NAME = 'MrlTableCell';\n\nexport interface MrlTableCellProps extends React.ComponentPropsWithoutRef<'td'> {\n\t/**\n\t * An element id (and if not provided, a unique value decorated\n\t * to prevent conflict with aria controls will be generated).\n\t *\n\t * @default `${id}-mrl-table-cell`\n\t */\n\tid?: string;\n\t/**\n\t * Whether this cell is sticky 'left' or sticky 'right' or not sticky at all\n\t */\n\tsticky?: MrlTableColumnSticky;\n\thasScrollShadowLeft?: boolean;\n\thasScrollShadowRight?: boolean;\n\thorizontalAlign?: MrlTableCellHorizontalAlign;\n}\n\n/**\n * MrlTableCell Component\n *\n * @param {MrlTableCellProps} props - MrlTableCell component props\n * @returns a table cell element\n */\nexport function MrlTableCell(props: MrlTableCellProps): JSX.Element {\n\tconst { hasScrollShadowLeft, hasScrollShadowRight, className, sticky, horizontalAlign, ...rest } =\n\t\tprops;\n\tconst idRef = React.useRef<string>(rest.id || getUniqueId('mrl-table-cell'));\n\tconst classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME], {\n\t\t[`${styles['sticky']} ${styles[`${sticky}`]}`]: !!sticky,\n\t\t[`${styles['align-right']}`]: horizontalAlign === 'right',\n\t\t[`${styles[`left-shadow`]}`]: sticky === 'left' && hasScrollShadowLeft,\n\t\t[`${styles[`right-shadow`]}`]: sticky === 'right' && hasScrollShadowRight\n\t});\n\treturn <td className={classes} id={idRef.current} data-sticky={!!sticky} {...rest} />;\n}\n"],"names":["COMPONENT_NAME","MrlTableCell","props","hasScrollShadowLeft","hasScrollShadowRight","className","sticky","horizontalAlign","rest","_objectWithoutProperties","_excluded","idRef","React","useRef","id","getUniqueId","classes","classnames","styles","concat","createElement","_extends","current"],"mappings":";;;;;;;AAQA,IAAMA,cAAc,GAAG,cAAc;AAmBrC;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,YAAYA,CAACC,KAAwB,EAAe;AACnE,EAAA,IAAQC,mBAAmB,GAC1BD,KAAK,CADEC,mBAAmB;IAAEC,oBAAoB,GAChDF,KAAK,CADuBE,oBAAoB;IAAEC,SAAS,GAC3DH,KAAK,CAD6CG,SAAS;IAAEC,MAAM,GACnEJ,KAAK,CADwDI,MAAM;IAAEC,eAAe,GACpFL,KAAK,CADgEK,eAAe;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAC7FP,KAAK,EAAAQ,SAAA,CAAA;AACN,EAAA,IAAMC,KAAK,GAAGC,KAAK,CAACC,MAAM,CAASL,IAAI,CAACM,EAAE,IAAIC,WAAW,CAAC,gBAAgB,CAAC,CAAC;AAC5E,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACZ,SAAS,EAAEL,cAAc,EAAEkB,MAAM,CAAClB,cAAc,CAAC,EAAE;AAC7E,IAAA,CAAA,EAAA,CAAAmB,MAAA,CAAID,MAAM,CAAC,QAAQ,CAAC,OAAAC,MAAA,CAAID,MAAM,CAAA,EAAA,CAAAC,MAAA,CAAIb,MAAM,EAAG,CAAA,GAAK,CAAC,CAACA,MAAM;IACxD,CAAA,EAAA,CAAAa,MAAA,CAAID,MAAM,CAAC,aAAa,CAAC,CAAA,GAAKX,eAAe,KAAK,OAAO;IACzD,CAAA,EAAA,CAAAY,MAAA,CAAID,MAAM,CAAA,aAAA,CAAe,IAAKZ,MAAM,KAAK,MAAM,IAAIH,mBAAmB;IACtE,CAAA,EAAA,CAAAgB,MAAA,CAAID,MAAM,CAAA,cAAA,CAAgB,IAAKZ,MAAM,KAAK,OAAO,IAAIF;AACtD,GAAC,CAAC;AACF,EAAA,oBAAOQ,KAAA,CAAAQ,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AAAIhB,IAAAA,SAAS,EAAEW,OAAQ;IAACF,EAAE,EAAEH,KAAK,CAACW,OAAQ;AAAC,IAAA,aAAA,EAAa,CAAC,CAAChB;GAAO,EAAKE,IAAI,CAAG,CAAC;AACtF;;;;"}

package/dist/esm/components/table/MrlTableColumn/MrlTableColumn.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlTableColumn.module.scss.js';
@@ -20,7 +20,13 @@ function MrlTableColumn(props) {
     horizontalAlign = props.horizontalAlign,
     rest = _objectWithoutProperties(props, _excluded);
   var idRef = React.useRef(rest.id || getUniqueId('mrl-table-column'));
-  var classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles['clickable'], !!rest.onClick), styles['align-right'], horizontalAlign === 'right'), "".concat(styles['sticky'], " ").concat(styles["".concat(sticky)]), !!sticky), "".concat(styles["left-shadow"]), sticky === 'left' && hasScrollShadowLeft), "".concat(styles["right-shadow"]), sticky === 'right' && hasScrollShadowRight));
+  var classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME], {
+    [styles['clickable']]: !!rest.onClick,
+    [styles['align-right']]: horizontalAlign === 'right',
+    ["".concat(styles['sticky'], " ").concat(styles["".concat(sticky)])]: !!sticky,
+    ["".concat(styles["left-shadow"])]: sticky === 'left' && hasScrollShadowLeft,
+    ["".concat(styles["right-shadow"])]: sticky === 'right' && hasScrollShadowRight
+  });
   return /*#__PURE__*/React.createElement("th", _extends({
     className: classes,
     id: idRef.current,

package/dist/esm/components/table/MrlTableColumn/MrlTableColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlTableColumn.js","sources":["../../../../../src/components/table/MrlTableColumn/MrlTableColumn.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../utils';\nimport type { MrlTableColumnSticky } from '../MrlSmartTable';\n\nimport styles from './MrlTableColumn.module.scss';\nimport { MrlTableCellHorizontalAlign } from '../constants';\n\nconst COMPONENT_NAME = 'MrlTableColumn';\n\nexport interface MrlTableColumnProps extends React.ComponentPropsWithoutRef<'th'> {\n\t/**\n\t * An element id (and if not provided, a unique value decorated\n\t * to prevent conflict with aria controls will be generated).\n\t *\n\t * @default `${id}-mrl-table-column`\n\t */\n\tid?: string;\n\t/**\n\t * Whether this column is sticky 'left' or sticky 'right' or not sticky at all\n\t */\n\tsticky?: MrlTableColumnSticky;\n\thasScrollShadowLeft?: boolean;\n\thasScrollShadowRight?: boolean;\n\thorizontalAlign?: MrlTableCellHorizontalAlign;\n}\n\n/**\n * MrlTableColumn Component\n *\n * @param {MrlTableColumnProps} props - MrlTableColumn component props\n * @returns a table column element\n */\nexport function MrlTableColumn(props: MrlTableColumnProps): JSX.Element {\n\tconst { hasScrollShadowLeft, hasScrollShadowRight, className, sticky, horizontalAlign, ...rest } =\n\t\tprops;\n\tconst idRef = React.useRef<string>(rest.id || getUniqueId('mrl-table-column'));\n\tconst classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME], {\n\t\t[styles['clickable']]: !!rest.onClick,\n\t\t[styles['align-right']]: horizontalAlign === 'right',\n\t\t[`${styles['sticky']} ${styles[`${sticky}`]}`]: !!sticky,\n\t\t[`${styles[`left-shadow`]}`]: sticky === 'left' && hasScrollShadowLeft,\n\t\t[`${styles[`right-shadow`]}`]: sticky === 'right' && hasScrollShadowRight\n\t});\n\treturn <th className={classes} id={idRef.current} data-sticky={!!sticky} {...rest} />;\n}\n"],"names":["COMPONENT_NAME","MrlTableColumn","props","hasScrollShadowLeft","hasScrollShadowRight","className","sticky","horizontalAlign","rest","_objectWithoutProperties","_excluded","idRef","React","useRef","id","getUniqueId","classes","classnames","styles","_defineProperty","onClick","concat","createElement","_extends","current"],"mappings":";;;;;;;AAQA,IAAMA,cAAc,GAAG,gBAAgB;AAmBvC;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAACC,KAA0B,EAAe;AACvE,EAAA,IAAQC,mBAAmB,GAC1BD,KAAK,CADEC,mBAAmB;IAAEC,oBAAoB,GAChDF,KAAK,CADuBE,oBAAoB;IAAEC,SAAS,GAC3DH,KAAK,CAD6CG,SAAS;IAAEC,MAAM,GACnEJ,KAAK,CADwDI,MAAM;IAAEC,eAAe,GACpFL,KAAK,CADgEK,eAAe;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAC7FP,KAAK,EAAAQ,SAAA,CAAA;AACN,EAAA,IAAMC,KAAK,GAAGC,KAAK,CAACC,MAAM,CAASL,IAAI,CAACM,EAAE,IAAIC,WAAW,CAAC,kBAAkB,CAAC,CAAC;AAC9E,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACZ,SAAS,EAAEL,cAAc,EAAEkB,MAAM,CAAClB,cAAc,CAAC,EAAAmB,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,KAC1ED,MAAM,CAAC,WAAW,CAAC,EAAG,CAAC,CAACV,IAAI,CAACY,OAAO,GACpCF,MAAM,CAAC,aAAa,CAAC,EAAGX,eAAe,KAAK,OAAO,CAAA,EAAA,EAAA,CAAAc,MAAA,CAChDH,MAAM,CAAC,QAAQ,CAAC,EAAA,GAAA,CAAA,CAAAG,MAAA,CAAIH,MAAM,CAAA,EAAA,CAAAG,MAAA,CAAIf,MAAM,CAAA,CAAG,GAAK,CAAC,CAACA,MAAM,CAAA,EAAA,EAAA,CAAAe,MAAA,CACpDH,MAAM,eAAe,CAAA,EAAKZ,MAAM,KAAK,MAAM,IAAIH,mBAAmB,CAAA,EAAA,EAAA,CAAAkB,MAAA,CAClEH,MAAM,CAAA,cAAA,CAAgB,GAAKZ,MAAM,KAAK,OAAO,IAAIF,oBAAoB,CACzE,CAAC;AACF,EAAA,oBAAOQ,KAAA,CAAAU,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AAAIlB,IAAAA,SAAS,EAAEW,OAAQ;IAACF,EAAE,EAAEH,KAAK,CAACa,OAAQ;AAAC,IAAA,aAAA,EAAa,CAAC,CAAClB;GAAO,EAAKE,IAAI,CAAG,CAAC;AACtF;;;;"}
+{"version":3,"file":"MrlTableColumn.js","sources":["../../../../../src/components/table/MrlTableColumn/MrlTableColumn.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../utils';\nimport type { MrlTableColumnSticky } from '../MrlSmartTable';\n\nimport styles from './MrlTableColumn.module.scss';\nimport { MrlTableCellHorizontalAlign } from '../constants';\n\nconst COMPONENT_NAME = 'MrlTableColumn';\n\nexport interface MrlTableColumnProps extends React.ComponentPropsWithoutRef<'th'> {\n\t/**\n\t * An element id (and if not provided, a unique value decorated\n\t * to prevent conflict with aria controls will be generated).\n\t *\n\t * @default `${id}-mrl-table-column`\n\t */\n\tid?: string;\n\t/**\n\t * Whether this column is sticky 'left' or sticky 'right' or not sticky at all\n\t */\n\tsticky?: MrlTableColumnSticky;\n\thasScrollShadowLeft?: boolean;\n\thasScrollShadowRight?: boolean;\n\thorizontalAlign?: MrlTableCellHorizontalAlign;\n}\n\n/**\n * MrlTableColumn Component\n *\n * @param {MrlTableColumnProps} props - MrlTableColumn component props\n * @returns a table column element\n */\nexport function MrlTableColumn(props: MrlTableColumnProps): JSX.Element {\n\tconst { hasScrollShadowLeft, hasScrollShadowRight, className, sticky, horizontalAlign, ...rest } =\n\t\tprops;\n\tconst idRef = React.useRef<string>(rest.id || getUniqueId('mrl-table-column'));\n\tconst classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME], {\n\t\t[styles['clickable']]: !!rest.onClick,\n\t\t[styles['align-right']]: horizontalAlign === 'right',\n\t\t[`${styles['sticky']} ${styles[`${sticky}`]}`]: !!sticky,\n\t\t[`${styles[`left-shadow`]}`]: sticky === 'left' && hasScrollShadowLeft,\n\t\t[`${styles[`right-shadow`]}`]: sticky === 'right' && hasScrollShadowRight\n\t});\n\treturn <th className={classes} id={idRef.current} data-sticky={!!sticky} {...rest} />;\n}\n"],"names":["COMPONENT_NAME","MrlTableColumn","props","hasScrollShadowLeft","hasScrollShadowRight","className","sticky","horizontalAlign","rest","_objectWithoutProperties","_excluded","idRef","React","useRef","id","getUniqueId","classes","classnames","styles","onClick","concat","createElement","_extends","current"],"mappings":";;;;;;;AAQA,IAAMA,cAAc,GAAG,gBAAgB;AAmBvC;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,cAAcA,CAACC,KAA0B,EAAe;AACvE,EAAA,IAAQC,mBAAmB,GAC1BD,KAAK,CADEC,mBAAmB;IAAEC,oBAAoB,GAChDF,KAAK,CADuBE,oBAAoB;IAAEC,SAAS,GAC3DH,KAAK,CAD6CG,SAAS;IAAEC,MAAM,GACnEJ,KAAK,CADwDI,MAAM;IAAEC,eAAe,GACpFL,KAAK,CADgEK,eAAe;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAC7FP,KAAK,EAAAQ,SAAA,CAAA;AACN,EAAA,IAAMC,KAAK,GAAGC,KAAK,CAACC,MAAM,CAASL,IAAI,CAACM,EAAE,IAAIC,WAAW,CAAC,kBAAkB,CAAC,CAAC;AAC9E,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACZ,SAAS,EAAEL,cAAc,EAAEkB,MAAM,CAAClB,cAAc,CAAC,EAAE;IAC7E,CAACkB,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAACV,IAAI,CAACW,OAAO;AACrC,IAAA,CAACD,MAAM,CAAC,aAAa,CAAC,GAAGX,eAAe,KAAK,OAAO;AACpD,IAAA,CAAA,EAAA,CAAAa,MAAA,CAAIF,MAAM,CAAC,QAAQ,CAAC,OAAAE,MAAA,CAAIF,MAAM,CAAA,EAAA,CAAAE,MAAA,CAAId,MAAM,EAAG,CAAA,GAAK,CAAC,CAACA,MAAM;IACxD,CAAA,EAAA,CAAAc,MAAA,CAAIF,MAAM,CAAA,aAAA,CAAe,IAAKZ,MAAM,KAAK,MAAM,IAAIH,mBAAmB;IACtE,CAAA,EAAA,CAAAiB,MAAA,CAAIF,MAAM,CAAA,cAAA,CAAgB,IAAKZ,MAAM,KAAK,OAAO,IAAIF;AACtD,GAAC,CAAC;AACF,EAAA,oBAAOQ,KAAA,CAAAS,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AAAIjB,IAAAA,SAAS,EAAEW,OAAQ;IAACF,EAAE,EAAEH,KAAK,CAACY,OAAQ;AAAC,IAAA,aAAA,EAAa,CAAC,CAACjB;GAAO,EAAKE,IAAI,CAAG,CAAC;AACtF;;;;"}

package/dist/esm/components/table/MrlTableRow/MrlTableRow.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlTableRow.module.scss.js';
@@ -20,15 +20,17 @@ var MrlTableRow = /*#__PURE__*/React.forwardRef(function MrlTableRow(_ref, ref)
   var id = rest.id;
   var idRef = React.useRef(id || getUniqueId('mrl-table-row'));
   var classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME]);
-  var handleKeyDown = function handleKeyDown(e) {
+  var handleKeyDown = e => {
     if (e.key === 'Enter' && onClick) {
       onClick(e);
     }
   };
-  var getRef = function getRef(element) {
+  var getRef = element => {
     if (element && itemId) {
       if (typeof ref === 'function') {
-        ref(_defineProperty({}, itemId, element));
+        ref({
+          [itemId]: element
+        });
       } else if (ref !== null && ref !== void 0 && ref.current) {
         ref.current[itemId] = element;
       }
@@ -39,7 +41,7 @@ var MrlTableRow = /*#__PURE__*/React.forwardRef(function MrlTableRow(_ref, ref)
     id: idRef.current,
     ref: getRef
   }, onClick && {
-    onClick: onClick,
+    onClick,
     onKeyDown: handleKeyDown,
     tabIndex: 0
   }, rest));

package/dist/esm/components/table/MrlTableRow/MrlTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlTableRow.js","sources":["../../../../../src/components/table/MrlTableRow/MrlTableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../utils';\n\nimport styles from './MrlTableRow.module.scss';\n\nconst COMPONENT_NAME = 'MrlTableRow';\n\nexport interface MrlTableRowProps extends React.ComponentPropsWithoutRef<'tr'> {\n\t/**\n\t * An element id (and if not provided, a unique value decorated\n\t * to prevent conflict with aria controls will be generated).\n\t *\n\t * @default `${id}-mrl-table-row`\n\t */\n\tid?: string;\n\t/**\n\t * Id of the MrlTableItem associated with the table row\n\t */\n\titemId?: string;\n\t/**\n\t *\n\t * Custom click handler to be used for mouse and keyboard selection of table row\n\t */\n\tonClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent) => void;\n}\n\n/**\n * MrlTableRow Component\n *\n * @param {MrlTableRowProps} props - MrlTableRow component props\n * @returns a table row element\n */\nexport const MrlTableRow = React.forwardRef<Record<string, HTMLTableRowElement>, MrlTableRowProps>(\n\tfunction MrlTableRow(\n\t\t{ className, itemId, onClick, ...rest }: MrlTableRowProps,\n\t\tref\n\t): JSX.Element {\n\t\tconst { id } = rest;\n\t\tconst idRef = React.useRef<string>(id || getUniqueId('mrl-table-row'));\n\t\tconst classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME]);\n\n\t\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\t\tif (e.key === 'Enter' && onClick) {\n\t\t\t\tonClick(e);\n\t\t\t}\n\t\t};\n\n\t\tconst getRef = (element: HTMLTableRowElement | null) => {\n\t\t\tif (element && itemId) {\n\t\t\t\tif (typeof ref === 'function') {\n\t\t\t\t\tref({ [itemId]: element });\n\t\t\t\t} else if (ref?.current) {\n\t\t\t\t\tref.current[itemId] = element;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<tr\n\t\t\t\tclassName={classes}\n\t\t\t\tid={idRef.current}\n\t\t\t\tref={getRef}\n\t\t\t\t{...(onClick && { onClick, onKeyDown: handleKeyDown, tabIndex: 0 })}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t}\n);\n"],"names":["COMPONENT_NAME","MrlTableRow","React","forwardRef","_ref","ref","className","itemId","onClick","rest","_objectWithoutProperties","_excluded","id","idRef","useRef","getUniqueId","classes","classnames","styles","handleKeyDown","e","key","getRef","element","_defineProperty","current","createElement","_extends","onKeyDown","tabIndex"],"mappings":";;;;;;;AAMA,IAAMA,cAAc,GAAG,aAAa;AAqBpC;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAU,CAC1C,SAASF,WAAWA,CAAAG,IAAA,EAEnBC,GAAG,EACW;AAAA,EAAA,IAFZC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AAGrC,EAAA,IAAQC,EAAE,GAAKH,IAAI,CAAXG,EAAE;AACV,EAAA,IAAMC,KAAK,GAAGX,KAAK,CAACY,MAAM,CAASF,EAAE,IAAIG,WAAW,CAAC,eAAe,CAAC,CAAC;AACtE,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACX,SAAS,EAAEN,cAAc,EAAEkB,MAAM,CAAClB,cAAc,CAAC,CAAC;AAE7E,EAAA,IAAMmB,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,CAAsB,EAAK;AACjD,IAAA,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIb,OAAO,EAAE;MACjCA,OAAO,CAACY,CAAC,CAAC;AACX,IAAA;EACD,CAAC;AAED,EAAA,IAAME,MAAM,GAAG,SAATA,MAAMA,CAAIC,OAAmC,EAAK;IACvD,IAAIA,OAAO,IAAIhB,MAAM,EAAE;AACtB,MAAA,IAAI,OAAOF,GAAG,KAAK,UAAU,EAAE;AAC9BA,QAAAA,GAAG,CAAAmB,eAAA,CAAA,EAAA,EAAIjB,MAAM,EAAGgB,OAAO,CAAE,CAAC;MAC3B,CAAC,MAAM,IAAIlB,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAA,MAAA,IAAHA,GAAG,CAAEoB,OAAO,EAAE;AACxBpB,QAAAA,GAAG,CAACoB,OAAO,CAAClB,MAAM,CAAC,GAAGgB,OAAO;AAC9B,MAAA;AACD,IAAA;EACD,CAAC;AAED,EAAA,oBACCrB,KAAA,CAAAwB,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AACCrB,IAAAA,SAAS,EAAEU,OAAQ;IACnBJ,EAAE,EAAEC,KAAK,CAACY,OAAQ;AAClBpB,IAAAA,GAAG,EAAEiB;AAAO,GAAA,EACPd,OAAO,IAAI;AAAEA,IAAAA,OAAO,EAAPA,OAAO;AAAEoB,IAAAA,SAAS,EAAET,aAAa;AAAEU,IAAAA,QAAQ,EAAE;GAAG,EAC9DpB,IAAI,CACR,CAAC;AAEJ,CACD;;;;"}
+{"version":3,"file":"MrlTableRow.js","sources":["../../../../../src/components/table/MrlTableRow/MrlTableRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getUniqueId } from '../../../utils';\n\nimport styles from './MrlTableRow.module.scss';\n\nconst COMPONENT_NAME = 'MrlTableRow';\n\nexport interface MrlTableRowProps extends React.ComponentPropsWithoutRef<'tr'> {\n\t/**\n\t * An element id (and if not provided, a unique value decorated\n\t * to prevent conflict with aria controls will be generated).\n\t *\n\t * @default `${id}-mrl-table-row`\n\t */\n\tid?: string;\n\t/**\n\t * Id of the MrlTableItem associated with the table row\n\t */\n\titemId?: string;\n\t/**\n\t *\n\t * Custom click handler to be used for mouse and keyboard selection of table row\n\t */\n\tonClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent) => void;\n}\n\n/**\n * MrlTableRow Component\n *\n * @param {MrlTableRowProps} props - MrlTableRow component props\n * @returns a table row element\n */\nexport const MrlTableRow = React.forwardRef<Record<string, HTMLTableRowElement>, MrlTableRowProps>(\n\tfunction MrlTableRow(\n\t\t{ className, itemId, onClick, ...rest }: MrlTableRowProps,\n\t\tref\n\t): JSX.Element {\n\t\tconst { id } = rest;\n\t\tconst idRef = React.useRef<string>(id || getUniqueId('mrl-table-row'));\n\t\tconst classes = classnames(className, COMPONENT_NAME, styles[COMPONENT_NAME]);\n\n\t\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\t\tif (e.key === 'Enter' && onClick) {\n\t\t\t\tonClick(e);\n\t\t\t}\n\t\t};\n\n\t\tconst getRef = (element: HTMLTableRowElement | null) => {\n\t\t\tif (element && itemId) {\n\t\t\t\tif (typeof ref === 'function') {\n\t\t\t\t\tref({ [itemId]: element });\n\t\t\t\t} else if (ref?.current) {\n\t\t\t\t\tref.current[itemId] = element;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<tr\n\t\t\t\tclassName={classes}\n\t\t\t\tid={idRef.current}\n\t\t\t\tref={getRef}\n\t\t\t\t{...(onClick && { onClick, onKeyDown: handleKeyDown, tabIndex: 0 })}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t}\n);\n"],"names":["COMPONENT_NAME","MrlTableRow","React","forwardRef","_ref","ref","className","itemId","onClick","rest","_objectWithoutProperties","_excluded","id","idRef","useRef","getUniqueId","classes","classnames","styles","handleKeyDown","e","key","getRef","element","current","createElement","_extends","onKeyDown","tabIndex"],"mappings":";;;;;;;AAMA,IAAMA,cAAc,GAAG,aAAa;AAqBpC;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAU,CAC1C,SAASF,WAAWA,CAAAG,IAAA,EAEnBC,GAAG,EACW;AAAA,EAAA,IAFZC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA;AAGrC,EAAA,IAAQC,EAAE,GAAKH,IAAI,CAAXG,EAAE;AACV,EAAA,IAAMC,KAAK,GAAGX,KAAK,CAACY,MAAM,CAASF,EAAE,IAAIG,WAAW,CAAC,eAAe,CAAC,CAAC;AACtE,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACX,SAAS,EAAEN,cAAc,EAAEkB,MAAM,CAAClB,cAAc,CAAC,CAAC;EAE7E,IAAMmB,aAAa,GAAIC,CAAsB,IAAK;AACjD,IAAA,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIb,OAAO,EAAE;MACjCA,OAAO,CAACY,CAAC,CAAC;AACX,IAAA;EACD,CAAC;EAED,IAAME,MAAM,GAAIC,OAAmC,IAAK;IACvD,IAAIA,OAAO,IAAIhB,MAAM,EAAE;AACtB,MAAA,IAAI,OAAOF,GAAG,KAAK,UAAU,EAAE;AAC9BA,QAAAA,GAAG,CAAC;AAAE,UAAA,CAACE,MAAM,GAAGgB;AAAQ,SAAC,CAAC;MAC3B,CAAC,MAAM,IAAIlB,GAAG,KAAA,IAAA,IAAHA,GAAG,KAAA,MAAA,IAAHA,GAAG,CAAEmB,OAAO,EAAE;AACxBnB,QAAAA,GAAG,CAACmB,OAAO,CAACjB,MAAM,CAAC,GAAGgB,OAAO;AAC9B,MAAA;AACD,IAAA;EACD,CAAC;AAED,EAAA,oBACCrB,KAAA,CAAAuB,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AACCpB,IAAAA,SAAS,EAAEU,OAAQ;IACnBJ,EAAE,EAAEC,KAAK,CAACW,OAAQ;AAClBnB,IAAAA,GAAG,EAAEiB;AAAO,GAAA,EACPd,OAAO,IAAI;IAAEA,OAAO;AAAEmB,IAAAA,SAAS,EAAER,aAAa;AAAES,IAAAA,QAAQ,EAAE;GAAG,EAC9DnB,IAAI,CACR,CAAC;AAEJ,CACD;;;;"}

package/dist/esm/components/table/utils.js

@@ -11,7 +11,7 @@ import { MrlSortDirection } from './constants.js';
  * @returns {number} A negative number if a occurs before b; positive if the
  * a occurs after b; 0 if they are equivalent.
  */
-var sortAlphabeticallyAsCoercedStrings = function sortAlphabeticallyAsCoercedStrings(a, b) {
+var sortAlphabeticallyAsCoercedStrings = (a, b) => {
   return "".concat(a).localeCompare("".concat(b));
 };
 
@@ -36,9 +36,7 @@ var keyFor = function keyFor(prefix, elementType) {
  * @param {MrlSortDirection} direction the sort direction
  * @returns {typeof sortAsc | typeof sortDes} the icon
  */
-var sortIcon = function sortIcon(direction) {
-  return direction > 0 ? sortAsc : sortDes;
-};
+var sortIcon = direction => direction > 0 ? sortAsc : sortDes;
 
 /**
  * Provides text label based on sort direction.
@@ -46,9 +44,7 @@ var sortIcon = function sortIcon(direction) {
  * @param {MrlSortDirection} direction the sort direction
  * @returns {string} the text label
  */
-var sortText = function sortText(direction) {
-  return direction > 0 ? 'ascending' : 'descending';
-};
+var sortText = direction => direction > 0 ? 'ascending' : 'descending';
 
 /**
  * Provides next sort direction based on current direction.
@@ -56,9 +52,7 @@ var sortText = function sortText(direction) {
  * @param {MrlSortDirection} current sort direction
  * @returns {MrlSortDirection} next sort direction
  */
-var nextSortDirection = function nextSortDirection(current) {
-  return current ? current * -1 : MrlSortDirection.ASC;
-};
+var nextSortDirection = current => current ? current * -1 : MrlSortDirection.ASC;
 
 export { keyFor, nextSortDirection, sortAlphabeticallyAsCoercedStrings, sortIcon, sortText };
 //# sourceMappingURL=utils.js.map

package/dist/esm/components/table/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import { sortAsc, sortDes } from '@muraldevkit/ds-icons';\nimport { MrlSortDirection } from './constants';\n\n/**\n * Used as a generic sort comparator for unknown types by coercing each value\n * to a string and sorting alphabetically. It will likely produce unexpected and/or\n * undesirable results for anything other than the most basic text or numeric data.\n *\n * @param {unknown} a first of two values\n * @param {unknown} b second of two values\n * @returns {number} A negative number if a occurs before b; positive if the\n * a occurs after b; 0 if they are equivalent.\n */\nexport const sortAlphabeticallyAsCoercedStrings = (a: unknown, b: unknown): number => {\n\treturn `${a}`.localeCompare(`${b}`);\n};\n\n/**\n * Used to generate consistent keys for the entire structure of MrlSmartTable\n *\n * @param {string} prefix the unique structure prefix\n * @param {string} elementType the element type to generate a key for\n * @param {string[]} keys a set of properties to uniquely identify the element\n * @returns {string} the generated key\n */\nexport const keyFor = (\n\tprefix: string,\n\telementType: 'header' | 'column' | 'body' | 'row' | 'row-cell',\n\t...keys: string[]\n): string => `${prefix}-${elementType}-${keys.join('-')}`;\n\n/**\n * Provides sort icon based on direction.\n *\n * @param {MrlSortDirection} direction the sort direction\n * @returns {typeof sortAsc | typeof sortDes} the icon\n */\nexport const sortIcon = (direction: MrlSortDirection): typeof sortAsc | typeof sortDes =>\n\tdirection > 0 ? sortAsc : sortDes;\n\n/**\n * Provides text label based on sort direction.\n *\n * @param {MrlSortDirection} direction the sort direction\n * @returns {string} the text label\n */\nexport const sortText = (direction: MrlSortDirection): string =>\n\tdirection > 0 ? 'ascending' : 'descending';\n\n/**\n * Provides next sort direction based on current direction.\n *\n * @param {MrlSortDirection} current sort direction\n * @returns {MrlSortDirection} next sort direction\n */\nexport const nextSortDirection = (current?: MrlSortDirection): MrlSortDirection =>\n\tcurrent ? current * -1 : MrlSortDirection.ASC;\n"],"names":["sortAlphabeticallyAsCoercedStrings","a","b","concat","localeCompare","keyFor","prefix","elementType","_len","arguments","length","keys","Array","_key","join","sortIcon","direction","sortAsc","sortDes","sortText","nextSortDirection","current","MrlSortDirection","ASC"],"mappings":";;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,kCAAkC,GAAG,SAArCA,kCAAkCA,CAAIC,CAAU,EAAEC,CAAU,EAAa;EACrF,OAAO,EAAA,CAAAC,MAAA,CAAGF,CAAC,CAAA,CAAGG,aAAa,CAAA,EAAA,CAAAD,MAAA,CAAID,CAAC,CAAE,CAAC;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,MAAM,GAAG,SAATA,MAAMA,CAClBC,MAAc,EACdC,WAA8D,EAAA;EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAC3DC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAA,CAAA,GAAAA,IAAA,WAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAJF,IAAAA,IAAI,CAAAE,IAAA,GAAA,CAAA,CAAA,GAAAJ,SAAA,CAAAI,IAAA,CAAA;AAAA,EAAA;AAAA,EAAA,OAAA,EAAA,CAAAV,MAAA,CACQG,MAAM,EAAA,GAAA,CAAA,CAAAH,MAAA,CAAII,WAAW,EAAA,GAAA,CAAA,CAAAJ,MAAA,CAAIQ,IAAI,CAACG,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA;;AAEvD;AACA;AACA;AACA;AACA;AACA;IACaC,QAAQ,GAAG,SAAXA,QAAQA,CAAIC,SAA2B,EAAA;AAAA,EAAA,OACnDA,SAAS,GAAG,CAAC,GAAGC,OAAO,GAAGC,OAAO;AAAA;;AAElC;AACA;AACA;AACA;AACA;AACA;IACaC,QAAQ,GAAG,SAAXA,QAAQA,CAAIH,SAA2B,EAAA;AAAA,EAAA,OACnDA,SAAS,GAAG,CAAC,GAAG,WAAW,GAAG,YAAY;AAAA;;AAE3C;AACA;AACA;AACA;AACA;AACA;IACaI,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,OAA0B,EAAA;EAAA,OAC3DA,OAAO,GAAGA,OAAO,GAAG,EAAE,GAAGC,gBAAgB,CAACC,GAAG;AAAA;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import { sortAsc, sortDes } from '@muraldevkit/ds-icons';\nimport { MrlSortDirection } from './constants';\n\n/**\n * Used as a generic sort comparator for unknown types by coercing each value\n * to a string and sorting alphabetically. It will likely produce unexpected and/or\n * undesirable results for anything other than the most basic text or numeric data.\n *\n * @param {unknown} a first of two values\n * @param {unknown} b second of two values\n * @returns {number} A negative number if a occurs before b; positive if the\n * a occurs after b; 0 if they are equivalent.\n */\nexport const sortAlphabeticallyAsCoercedStrings = (a: unknown, b: unknown): number => {\n\treturn `${a}`.localeCompare(`${b}`);\n};\n\n/**\n * Used to generate consistent keys for the entire structure of MrlSmartTable\n *\n * @param {string} prefix the unique structure prefix\n * @param {string} elementType the element type to generate a key for\n * @param {string[]} keys a set of properties to uniquely identify the element\n * @returns {string} the generated key\n */\nexport const keyFor = (\n\tprefix: string,\n\telementType: 'header' | 'column' | 'body' | 'row' | 'row-cell',\n\t...keys: string[]\n): string => `${prefix}-${elementType}-${keys.join('-')}`;\n\n/**\n * Provides sort icon based on direction.\n *\n * @param {MrlSortDirection} direction the sort direction\n * @returns {typeof sortAsc | typeof sortDes} the icon\n */\nexport const sortIcon = (direction: MrlSortDirection): typeof sortAsc | typeof sortDes =>\n\tdirection > 0 ? sortAsc : sortDes;\n\n/**\n * Provides text label based on sort direction.\n *\n * @param {MrlSortDirection} direction the sort direction\n * @returns {string} the text label\n */\nexport const sortText = (direction: MrlSortDirection): string =>\n\tdirection > 0 ? 'ascending' : 'descending';\n\n/**\n * Provides next sort direction based on current direction.\n *\n * @param {MrlSortDirection} current sort direction\n * @returns {MrlSortDirection} next sort direction\n */\nexport const nextSortDirection = (current?: MrlSortDirection): MrlSortDirection =>\n\tcurrent ? current * -1 : MrlSortDirection.ASC;\n"],"names":["sortAlphabeticallyAsCoercedStrings","a","b","concat","localeCompare","keyFor","prefix","elementType","_len","arguments","length","keys","Array","_key","join","sortIcon","direction","sortAsc","sortDes","sortText","nextSortDirection","current","MrlSortDirection","ASC"],"mappings":";;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaA,kCAAkC,GAAGA,CAACC,CAAU,EAAEC,CAAU,KAAa;EACrF,OAAO,EAAA,CAAAC,MAAA,CAAGF,CAAC,CAAA,CAAGG,aAAa,CAAA,EAAA,CAAAD,MAAA,CAAID,CAAC,CAAE,CAAC;AACpC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMG,MAAM,GAAG,SAATA,MAAMA,CAClBC,MAAc,EACdC,WAA8D,EAAA;EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAC3DC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAA,CAAA,GAAAA,IAAA,WAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAJF,IAAAA,IAAI,CAAAE,IAAA,GAAA,CAAA,CAAA,GAAAJ,SAAA,CAAAI,IAAA,CAAA;AAAA,EAAA;AAAA,EAAA,OAAA,EAAA,CAAAV,MAAA,CACQG,MAAM,EAAA,GAAA,CAAA,CAAAH,MAAA,CAAII,WAAW,EAAA,GAAA,CAAA,CAAAJ,MAAA,CAAIQ,IAAI,CAACG,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA;;AAEvD;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,QAAQ,GAAIC,SAA2B,IACnDA,SAAS,GAAG,CAAC,GAAGC,OAAO,GAAGC;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACO,IAAMC,QAAQ,GAAIH,SAA2B,IACnDA,SAAS,GAAG,CAAC,GAAG,WAAW,GAAG;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACO,IAAMI,iBAAiB,GAAIC,OAA0B,IAC3DA,OAAO,GAAGA,OAAO,GAAG,EAAE,GAAGC,gBAAgB,CAACC;;;;"}

package/dist/esm/components/tabs/MrlTab/MrlTab.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlTab.module.scss.js';
@@ -10,7 +10,7 @@ var _excluded = ["className", "icon", "id", "hookClick", "text"];
  * @param {MrlTabProps} props the props for your MrlTab
  * @returns {React.ReactElement} an a element containing the text you pass
  */
-var MrlTab = function MrlTab(_ref) {
+var MrlTab = _ref => {
   var className = _ref.className,
     icon = _ref.icon,
     id = _ref.id,
@@ -21,9 +21,14 @@ var MrlTab = function MrlTab(_ref) {
     activeTab = _useMrlTabContext.activeTab,
     setActiveTab = _useMrlTabContext.setActiveTab;
   var active = activeTab === id;
-  var buttonClasses = classnames(className, 'mrl-tab', _defineProperty(_defineProperty({}, styles['MrlTab'], true), styles['MrlTab-selected'], active));
-  var textClasses = classnames('mrl-tab--text', _defineProperty({}, styles['MrlTab-Text'], true));
-  var handleClick = function handleClick(id) {
+  var buttonClasses = classnames(className, 'mrl-tab', {
+    [styles['MrlTab']]: true,
+    [styles['MrlTab-selected']]: active
+  });
+  var textClasses = classnames('mrl-tab--text', {
+    [styles['MrlTab-Text']]: true
+  });
+  var handleClick = id => {
     if (hookClick) {
       hookClick();
     }
@@ -35,9 +40,7 @@ var MrlTab = function MrlTab(_ref) {
     "data-qa": "".concat(id, "-tab"),
     "data-roving": "true",
     id: id,
-    onClick: function onClick() {
-      return handleClick(id);
-    },
+    onClick: () => handleClick(id),
     role: "tab",
     tabIndex: active ? 0 : -1,
     type: "button"

package/dist/esm/components/tabs/MrlTab/MrlTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlTab.js","sources":["../../../../../src/components/tabs/MrlTab/MrlTab.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { useMrlTabContext } from '../../..';\n\n/** MrlTab and MrlTabLink share styles as they should look identical */\nimport styles from './MrlTab.module.scss';\n\nexport interface MrlTabProps extends React.ComponentProps<'button'> {\n\t/** Class to be applied to the button element of the MrlTab */\n\tclassName?: string;\n\ticon?: React.ReactElement;\n\t/**\n\t * The id that will be passed to the MrlTabContext to set the active state.\n\t * NOTE: This must match the `tabId` set on `MrlTabContent`!\n\t */\n\tid: string;\n\t/** An addition function to call when clicking on a tab */\n\thookClick?: () => void;\n\ttext: string;\n}\n\n/**\n * Renders a tab component\n * @param {MrlTabProps} props the props for your MrlTab\n * @returns {React.ReactElement} an a element containing the text you pass\n */\nexport const MrlTab = ({\n\tclassName,\n\ticon,\n\tid,\n\thookClick,\n\ttext,\n\t...rest\n}: MrlTabProps): React.ReactElement => {\n\tconst { activeTab, setActiveTab } = useMrlTabContext();\n\tconst active = activeTab === id;\n\tconst buttonClasses = classnames(className, 'mrl-tab', {\n\t\t[styles['MrlTab']]: true,\n\t\t[styles['MrlTab-selected']]: active\n\t});\n\n\tconst textClasses = classnames('mrl-tab--text', {\n\t\t[styles['MrlTab-Text']]: true\n\t});\n\n\tconst handleClick = (id: string) => {\n\t\tif (hookClick) {\n\t\t\thookClick();\n\t\t}\n\n\t\tsetActiveTab(id);\n\t};\n\n\treturn (\n\t\t<button\n\t\t\t{...rest}\n\t\t\taria-selected={active}\n\t\t\tclassName={buttonClasses}\n\t\t\tdata-qa={`${id}-tab`}\n\t\t\tdata-roving=\"true\"\n\t\t\tid={id}\n\t\t\tonClick={() => handleClick(id)}\n\t\t\trole=\"tab\"\n\t\t\ttabIndex={active ? 0 : -1}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t{!!icon && <span className={styles['MrlTab-icon']}>{icon}</span>}\n\t\t\t<span className={textClasses}>{text}</span>\n\t\t</button>\n\t);\n};\n"],"names":["MrlTab","_ref","className","icon","id","hookClick","text","rest","_objectWithoutProperties","_excluded","_useMrlTabContext","useMrlTabContext","activeTab","setActiveTab","active","buttonClasses","classnames","_defineProperty","styles","textClasses","handleClick","React","createElement","_extends","concat","onClick","role","tabIndex","type"],"mappings":";;;;;;;AAqBA;AACA;AACA;AACA;AACA;IACaA,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAOoB;AAAA,EAAA,IANtCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,IAAI,GAAAL,IAAA,CAAJK,IAAI;AACDC,IAAAA,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA;AAEP,EAAA,IAAAC,iBAAA,GAAoCC,gBAAgB,EAAE;IAA9CC,SAAS,GAAAF,iBAAA,CAATE,SAAS;IAAEC,YAAY,GAAAH,iBAAA,CAAZG,YAAY;AAC/B,EAAA,IAAMC,MAAM,GAAGF,SAAS,KAAKR,EAAE;EAC/B,IAAMW,aAAa,GAAGC,UAAU,CAACd,SAAS,EAAE,SAAS,EAAAe,eAAA,CAAAA,eAAA,CAAA,EAAA,EACnDC,MAAM,CAAC,QAAQ,CAAC,EAAG,IAAI,CAAA,EACvBA,MAAM,CAAC,iBAAiB,CAAC,EAAGJ,MAAM,CACnC,CAAC;AAEF,EAAA,IAAMK,WAAW,GAAGH,UAAU,CAAC,eAAe,EAAAC,eAAA,CAAA,EAAA,EAC5CC,MAAM,CAAC,aAAa,CAAC,EAAG,IAAI,CAC7B,CAAC;AAEF,EAAA,IAAME,WAAW,GAAG,SAAdA,WAAWA,CAAIhB,EAAU,EAAK;AACnC,IAAA,IAAIC,SAAS,EAAE;AACdA,MAAAA,SAAS,EAAE;AACZ,IAAA;IAEAQ,YAAY,CAACT,EAAE,CAAC;EACjB,CAAC;AAED,EAAA,oBACCiB,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAAC,QAAA,KACKhB,IAAI,EAAA;AACR,IAAA,eAAA,EAAeO,MAAO;AACtBZ,IAAAA,SAAS,EAAEa,aAAc;IACzB,SAAA,EAAA,EAAA,CAAAS,MAAA,CAAYpB,EAAE,EAAA,MAAA,CAAO;AACrB,IAAA,aAAA,EAAY,MAAM;AAClBA,IAAAA,EAAE,EAAEA,EAAG;IACPqB,OAAO,EAAE,SAATA,OAAOA,GAAA;MAAA,OAAQL,WAAW,CAAChB,EAAE,CAAC;IAAA,CAAC;AAC/BsB,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,QAAQ,EAAEb,MAAM,GAAG,CAAC,GAAG,EAAG;AAC1Bc,IAAAA,IAAI,EAAC;AAAQ,GAAA,CAAA,EAEZ,CAAC,CAACzB,IAAI,iBAAIkB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMpB,SAAS,EAAEgB,MAAM,CAAC,aAAa;AAAE,GAAA,EAAEf,IAAW,CAAC,eAChEkB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMpB,IAAAA,SAAS,EAAEiB;GAAY,EAAEb,IAAW,CACnC,CAAC;AAEX;;;;"}
+{"version":3,"file":"MrlTab.js","sources":["../../../../../src/components/tabs/MrlTab/MrlTab.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { useMrlTabContext } from '../../..';\n\n/** MrlTab and MrlTabLink share styles as they should look identical */\nimport styles from './MrlTab.module.scss';\n\nexport interface MrlTabProps extends React.ComponentProps<'button'> {\n\t/** Class to be applied to the button element of the MrlTab */\n\tclassName?: string;\n\ticon?: React.ReactElement;\n\t/**\n\t * The id that will be passed to the MrlTabContext to set the active state.\n\t * NOTE: This must match the `tabId` set on `MrlTabContent`!\n\t */\n\tid: string;\n\t/** An addition function to call when clicking on a tab */\n\thookClick?: () => void;\n\ttext: string;\n}\n\n/**\n * Renders a tab component\n * @param {MrlTabProps} props the props for your MrlTab\n * @returns {React.ReactElement} an a element containing the text you pass\n */\nexport const MrlTab = ({\n\tclassName,\n\ticon,\n\tid,\n\thookClick,\n\ttext,\n\t...rest\n}: MrlTabProps): React.ReactElement => {\n\tconst { activeTab, setActiveTab } = useMrlTabContext();\n\tconst active = activeTab === id;\n\tconst buttonClasses = classnames(className, 'mrl-tab', {\n\t\t[styles['MrlTab']]: true,\n\t\t[styles['MrlTab-selected']]: active\n\t});\n\n\tconst textClasses = classnames('mrl-tab--text', {\n\t\t[styles['MrlTab-Text']]: true\n\t});\n\n\tconst handleClick = (id: string) => {\n\t\tif (hookClick) {\n\t\t\thookClick();\n\t\t}\n\n\t\tsetActiveTab(id);\n\t};\n\n\treturn (\n\t\t<button\n\t\t\t{...rest}\n\t\t\taria-selected={active}\n\t\t\tclassName={buttonClasses}\n\t\t\tdata-qa={`${id}-tab`}\n\t\t\tdata-roving=\"true\"\n\t\t\tid={id}\n\t\t\tonClick={() => handleClick(id)}\n\t\t\trole=\"tab\"\n\t\t\ttabIndex={active ? 0 : -1}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t{!!icon && <span className={styles['MrlTab-icon']}>{icon}</span>}\n\t\t\t<span className={textClasses}>{text}</span>\n\t\t</button>\n\t);\n};\n"],"names":["MrlTab","_ref","className","icon","id","hookClick","text","rest","_objectWithoutProperties","_excluded","_useMrlTabContext","useMrlTabContext","activeTab","setActiveTab","active","buttonClasses","classnames","styles","textClasses","handleClick","React","createElement","_extends","concat","onClick","role","tabIndex","type"],"mappings":";;;;;;;AAqBA;AACA;AACA;AACA;AACA;AACO,IAAMA,MAAM,GAAGC,IAAA,IAOiB;AAAA,EAAA,IANtCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,IAAI,GAAAL,IAAA,CAAJK,IAAI;AACDC,IAAAA,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA,CAAA;AAEP,EAAA,IAAAC,iBAAA,GAAoCC,gBAAgB,EAAE;IAA9CC,SAAS,GAAAF,iBAAA,CAATE,SAAS;IAAEC,YAAY,GAAAH,iBAAA,CAAZG,YAAY;AAC/B,EAAA,IAAMC,MAAM,GAAGF,SAAS,KAAKR,EAAE;AAC/B,EAAA,IAAMW,aAAa,GAAGC,UAAU,CAACd,SAAS,EAAE,SAAS,EAAE;AACtD,IAAA,CAACe,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI;AACxB,IAAA,CAACA,MAAM,CAAC,iBAAiB,CAAC,GAAGH;AAC9B,GAAC,CAAC;AAEF,EAAA,IAAMI,WAAW,GAAGF,UAAU,CAAC,eAAe,EAAE;AAC/C,IAAA,CAACC,MAAM,CAAC,aAAa,CAAC,GAAG;AAC1B,GAAC,CAAC;EAEF,IAAME,WAAW,GAAIf,EAAU,IAAK;AACnC,IAAA,IAAIC,SAAS,EAAE;AACdA,MAAAA,SAAS,EAAE;AACZ,IAAA;IAEAQ,YAAY,CAACT,EAAE,CAAC;EACjB,CAAC;AAED,EAAA,oBACCgB,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAAC,QAAA,KACKf,IAAI,EAAA;AACR,IAAA,eAAA,EAAeO,MAAO;AACtBZ,IAAAA,SAAS,EAAEa,aAAc;IACzB,SAAA,EAAA,EAAA,CAAAQ,MAAA,CAAYnB,EAAE,EAAA,MAAA,CAAO;AACrB,IAAA,aAAA,EAAY,MAAM;AAClBA,IAAAA,EAAE,EAAEA,EAAG;AACPoB,IAAAA,OAAO,EAAEA,MAAML,WAAW,CAACf,EAAE,CAAE;AAC/BqB,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,QAAQ,EAAEZ,MAAM,GAAG,CAAC,GAAG,EAAG;AAC1Ba,IAAAA,IAAI,EAAC;AAAQ,GAAA,CAAA,EAEZ,CAAC,CAACxB,IAAI,iBAAIiB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMnB,SAAS,EAAEe,MAAM,CAAC,aAAa;AAAE,GAAA,EAAEd,IAAW,CAAC,eAChEiB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMnB,IAAAA,SAAS,EAAEgB;GAAY,EAAEZ,IAAW,CACnC,CAAC;AAEX;;;;"}

package/dist/esm/components/tabs/MrlTabContent/MrlTabContent.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import styles from './MrlTabContent.module.scss.js';
@@ -6,7 +6,7 @@ import { getFocusableElementsInsideElement } from '../../../utils/trapFocus/inde
 import { useMrlTabContext } from '../MrlTabs/MrlTabs.js';
 
 var _excluded = ["children", "className", "tabId"];
-var MrlTabContent = /*#__PURE__*/React.memo(function (_ref) {
+var MrlTabContent = /*#__PURE__*/React.memo(_ref => {
   var children = _ref.children,
     className = _ref.className,
     tabId = _ref.tabId,
@@ -19,8 +19,11 @@ var MrlTabContent = /*#__PURE__*/React.memo(function (_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusableElementsInPanel = _React$useState2[0],
     setFocusableElementsInPanel = _React$useState2[1];
-  var containerClass = classnames(className, 'mrl-tab-content', _defineProperty(_defineProperty({}, styles.MrlTabContent, true), styles['MrlTabContent-hidden'], isHidden));
-  React.useEffect(function () {
+  var containerClass = classnames(className, 'mrl-tab-content', {
+    [styles.MrlTabContent]: true,
+    [styles['MrlTabContent-hidden']]: isHidden
+  });
+  React.useEffect(() => {
     var focusableElements = getFocusableElementsInsideElement(panelRef.current);
     setFocusableElementsInPanel(focusableElements);
   }, []);

package/dist/esm/components/tabs/MrlTabContent/MrlTabContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlTabContent.js","sources":["../../../../../src/components/tabs/MrlTabContent/MrlTabContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getFocusableElementsInsideElement, useMrlTabContext } from '../../../';\n\nimport styles from './MrlTabContent.module.scss';\n\nexport interface MrlTabContentPropTypes {\n\tchildren: React.ReactNode;\n\t/** Class to be applied to the container element of the MrlTabContent */\n\tclassName?: string;\n\t/** The id of the tab button associated to this content */\n\ttabId: string;\n}\n\nexport const MrlTabContent: React.FC<MrlTabContentPropTypes> = React.memo(\n\t({ children, className, tabId, ...rest }: MrlTabContentPropTypes) => {\n\t\tconst { activeTab } = useMrlTabContext();\n\t\tconst isHidden = activeTab !== tabId;\n\n\t\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\t\tconst [focusableElementsInPanel, setFocusableElementsInPanel] = React.useState<HTMLElement[]>(\n\t\t\t[]\n\t\t);\n\n\t\tconst containerClass = classnames(className, 'mrl-tab-content', {\n\t\t\t[styles.MrlTabContent]: true,\n\t\t\t[styles['MrlTabContent-hidden']]: isHidden\n\t\t});\n\n\t\tReact.useEffect(() => {\n\t\t\tconst focusableElements = getFocusableElementsInsideElement(panelRef.current as HTMLElement);\n\t\t\tsetFocusableElementsInPanel(focusableElements);\n\t\t}, []);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\taria-labelledby={tabId}\n\t\t\t\tclassName={containerClass}\n\t\t\t\trole=\"tabpanel\"\n\t\t\t\ttabIndex={focusableElementsInPanel.length ? -1 : 0}\n\t\t\t\tref={panelRef}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nMrlTabContent.displayName = 'MrlTabContent';\n"],"names":["MrlTabContent","React","memo","_ref","children","className","tabId","rest","_objectWithoutProperties","_excluded","_useMrlTabContext","useMrlTabContext","activeTab","isHidden","panelRef","useRef","_React$useState","useState","_React$useState2","_slicedToArray","focusableElementsInPanel","setFocusableElementsInPanel","containerClass","classnames","_defineProperty","styles","useEffect","focusableElements","getFocusableElementsInsideElement","current","createElement","_extends","role","tabIndex","length","ref","displayName"],"mappings":";;;;;;;;AAcO,IAAMA,aAA+C,gBAAGC,KAAK,CAACC,IAAI,CACxE,UAAAC,IAAA,EAAqE;AAAA,EAAA,IAAlEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AACrC,EAAA,IAAAC,iBAAA,GAAsBC,gBAAgB,EAAE;IAAhCC,SAAS,GAAAF,iBAAA,CAATE,SAAS;AACjB,EAAA,IAAMC,QAAQ,GAAGD,SAAS,KAAKN,KAAK;AAEpC,EAAA,IAAMQ,QAAQ,GAAGb,KAAK,CAACc,MAAM,CAAiB,IAAI,CAAC;AACnD,EAAA,IAAAC,eAAA,GAAgEf,KAAK,CAACgB,QAAQ,CAC7E,EACD,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAFMI,IAAAA,wBAAwB,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,2BAA2B,GAAAH,gBAAA,CAAA,CAAA,CAAA;EAI5D,IAAMI,cAAc,GAAGC,UAAU,CAAClB,SAAS,EAAE,iBAAiB,EAAAmB,eAAA,CAAAA,eAAA,CAAA,EAAA,EAC5DC,MAAM,CAACzB,aAAa,EAAG,IAAI,CAAA,EAC3ByB,MAAM,CAAC,sBAAsB,CAAC,EAAGZ,QAAQ,CAC1C,CAAC;EAEFZ,KAAK,CAACyB,SAAS,CAAC,YAAM;AACrB,IAAA,IAAMC,iBAAiB,GAAGC,iCAAiC,CAACd,QAAQ,CAACe,OAAsB,CAAC;IAC5FR,2BAA2B,CAACM,iBAAiB,CAAC;EAC/C,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,oBACC1B,KAAA,CAAA6B,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACC,IAAA,iBAAA,EAAiBzB,KAAM;AACvBD,IAAAA,SAAS,EAAEiB,cAAe;AAC1BU,IAAAA,IAAI,EAAC,UAAU;IACfC,QAAQ,EAAEb,wBAAwB,CAACc,MAAM,GAAG,EAAE,GAAG,CAAE;AACnDC,IAAAA,GAAG,EAAErB;GAAS,EACVP,IAAI,CAAA,EAEPH,QACG,CAAC;AAER,CACD;AAEAJ,aAAa,CAACoC,WAAW,GAAG,eAAe;;;;"}
+{"version":3,"file":"MrlTabContent.js","sources":["../../../../../src/components/tabs/MrlTabContent/MrlTabContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { getFocusableElementsInsideElement, useMrlTabContext } from '../../../';\n\nimport styles from './MrlTabContent.module.scss';\n\nexport interface MrlTabContentPropTypes {\n\tchildren: React.ReactNode;\n\t/** Class to be applied to the container element of the MrlTabContent */\n\tclassName?: string;\n\t/** The id of the tab button associated to this content */\n\ttabId: string;\n}\n\nexport const MrlTabContent: React.FC<MrlTabContentPropTypes> = React.memo(\n\t({ children, className, tabId, ...rest }: MrlTabContentPropTypes) => {\n\t\tconst { activeTab } = useMrlTabContext();\n\t\tconst isHidden = activeTab !== tabId;\n\n\t\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\t\tconst [focusableElementsInPanel, setFocusableElementsInPanel] = React.useState<HTMLElement[]>(\n\t\t\t[]\n\t\t);\n\n\t\tconst containerClass = classnames(className, 'mrl-tab-content', {\n\t\t\t[styles.MrlTabContent]: true,\n\t\t\t[styles['MrlTabContent-hidden']]: isHidden\n\t\t});\n\n\t\tReact.useEffect(() => {\n\t\t\tconst focusableElements = getFocusableElementsInsideElement(panelRef.current as HTMLElement);\n\t\t\tsetFocusableElementsInPanel(focusableElements);\n\t\t}, []);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\taria-labelledby={tabId}\n\t\t\t\tclassName={containerClass}\n\t\t\t\trole=\"tabpanel\"\n\t\t\t\ttabIndex={focusableElementsInPanel.length ? -1 : 0}\n\t\t\t\tref={panelRef}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nMrlTabContent.displayName = 'MrlTabContent';\n"],"names":["MrlTabContent","React","memo","_ref","children","className","tabId","rest","_objectWithoutProperties","_excluded","_useMrlTabContext","useMrlTabContext","activeTab","isHidden","panelRef","useRef","_React$useState","useState","_React$useState2","_slicedToArray","focusableElementsInPanel","setFocusableElementsInPanel","containerClass","classnames","styles","useEffect","focusableElements","getFocusableElementsInsideElement","current","createElement","_extends","role","tabIndex","length","ref","displayName"],"mappings":";;;;;;;;AAcO,IAAMA,aAA+C,gBAAGC,KAAK,CAACC,IAAI,CACxEC,IAAA,IAAqE;AAAA,EAAA,IAAlEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA;AACrC,EAAA,IAAAC,iBAAA,GAAsBC,gBAAgB,EAAE;IAAhCC,SAAS,GAAAF,iBAAA,CAATE,SAAS;AACjB,EAAA,IAAMC,QAAQ,GAAGD,SAAS,KAAKN,KAAK;AAEpC,EAAA,IAAMQ,QAAQ,GAAGb,KAAK,CAACc,MAAM,CAAiB,IAAI,CAAC;AACnD,EAAA,IAAAC,eAAA,GAAgEf,KAAK,CAACgB,QAAQ,CAC7E,EACD,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA,EAAA,CAAA,CAAA;AAFMI,IAAAA,wBAAwB,GAAAF,gBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,2BAA2B,GAAAH,gBAAA,CAAA,CAAA,CAAA;AAI5D,EAAA,IAAMI,cAAc,GAAGC,UAAU,CAAClB,SAAS,EAAE,iBAAiB,EAAE;AAC/D,IAAA,CAACmB,MAAM,CAACxB,aAAa,GAAG,IAAI;AAC5B,IAAA,CAACwB,MAAM,CAAC,sBAAsB,CAAC,GAAGX;AACnC,GAAC,CAAC;EAEFZ,KAAK,CAACwB,SAAS,CAAC,MAAM;AACrB,IAAA,IAAMC,iBAAiB,GAAGC,iCAAiC,CAACb,QAAQ,CAACc,OAAsB,CAAC;IAC5FP,2BAA2B,CAACK,iBAAiB,CAAC;EAC/C,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,oBACCzB,KAAA,CAAA4B,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACC,IAAA,iBAAA,EAAiBxB,KAAM;AACvBD,IAAAA,SAAS,EAAEiB,cAAe;AAC1BS,IAAAA,IAAI,EAAC,UAAU;IACfC,QAAQ,EAAEZ,wBAAwB,CAACa,MAAM,GAAG,EAAE,GAAG,CAAE;AACnDC,IAAAA,GAAG,EAAEpB;GAAS,EACVP,IAAI,CAAA,EAEPH,QACG,CAAC;AAER,CACD;AAEAJ,aAAa,CAACmC,WAAW,GAAG,eAAe;;;;"}

package/dist/esm/components/tabs/MrlTabGroup/MrlTabGroup.js

@@ -8,7 +8,7 @@ import { MrlSvg } from '../../svg/MrlSvg/MrlSvg.js';
 import { preventDefault } from '../../../utils/preventDefault/preventDefault.js';
 
 var _excluded = ["children", "className", "disablePageControls", "label"];
-var MrlTabGroup = /*#__PURE__*/React.memo(function (_ref) {
+var MrlTabGroup = /*#__PURE__*/React.memo(_ref => {
   var children = _ref.children,
     className = _ref.className,
     disablePageControls = _ref.disablePageControls,
@@ -31,10 +31,10 @@ var MrlTabGroup = /*#__PURE__*/React.memo(function (_ref) {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     tabButtons = _React$useState6[0],
     setTabButtons = _React$useState6[1];
-  var prevPage = React.useCallback(function () {
+  var prevPage = React.useCallback(() => {
     setPage(page - 1);
   }, [page]);
-  var nextPage = React.useCallback(function () {
+  var nextPage = React.useCallback(() => {
     setPage(page + 1);
   }, [page]);
 
@@ -42,7 +42,7 @@ var MrlTabGroup = /*#__PURE__*/React.memo(function (_ref) {
   // Keyboard Navigation
   // **************************
 
-  var handleKeyUp = function handleKeyUp(e) {
+  var handleKeyUp = e => {
     var actions = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
     if (actions.includes(e.key)) {
       preventDefault(e);
@@ -53,11 +53,9 @@ var MrlTabGroup = /*#__PURE__*/React.memo(function (_ref) {
    * Focus management when someone is using a keyboard to navigate the menu
    * @param e - keyboard event
    */
-  var handleKeyDown = function handleKeyDown(e) {
+  var handleKeyDown = e => {
     var _tabButtons$nextIndex, _tabButtons$nextIndex2, _tabButtons$nextIndex3, _tabButtons$nextIndex4, _tabButtons$, _tabButtons$2, _tabButtons$lastTab, _tabButtons$lastTab2;
-    var currentIndex = tabButtons.findIndex(function (item) {
-      return document.activeElement === item;
-    });
+    var currentIndex = tabButtons.findIndex(item => document.activeElement === item);
     var nextIndex;
     var lastTab = tabButtons.length - 1;
     switch (e.key) {
@@ -87,7 +85,7 @@ var MrlTabGroup = /*#__PURE__*/React.memo(function (_ref) {
         break;
     }
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _tabGroup$current;
     var foundMenuItems = Array.from(((_tabGroup$current = tabGroup.current) === null || _tabGroup$current === void 0 ? void 0 : _tabGroup$current.querySelectorAll('[role="tab"]')) || []);
     setTabButtons(foundMenuItems);
@@ -97,7 +95,7 @@ var MrlTabGroup = /*#__PURE__*/React.memo(function (_ref) {
   // End Keyboard Navigation
   // **************************
 
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!tabGroup.current || tabGroup.current.offsetWidth === 0) {
       return;
     }

package/dist/esm/components/tabs/MrlTabGroup/MrlTabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlTabGroup.js","sources":["../../../../../src/components/tabs/MrlTabGroup/MrlTabGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { chevronLeft, chevronRight } from '@muraldevkit/ds-icons';\nimport { MrlIconButton, MrlSvg } from '../../';\nimport { TabActionType } from '../constants';\nimport { preventDefault } from '../../../utils';\n\nimport styles from './MrlTabGroup.module.scss';\n\nexport interface MrlTabGroupPropTypes {\n\tchildren: React.ReactNode;\n\t/** Class to be applied to the container element of the MrlTabGroup */\n\tclassName?: string;\n\tdisablePageControls?: boolean;\n\t/** A hidden label for the tab group for accessiblity purposes */\n\tlabel?: string;\n}\n\nexport const MrlTabGroup: React.FC<MrlTabGroupPropTypes> = React.memo(\n\t({ children, className, disablePageControls, label, ...rest }: MrlTabGroupPropTypes) => {\n\t\tconst [page, setPage] = React.useState(0);\n\t\t// We need `pageCount` in the state so when the component is mounted\n\t\t// the values of `isFirstPage` and `isLastPage` are correctly calculated.\n\t\tconst [pageCount, setPageCount] = React.useState(0);\n\n\t\tconst tabGroup = React.useRef<HTMLDivElement>(null);\n\t\tconst prevButtonContainer = React.useRef<HTMLDivElement>(null);\n\t\tconst nextButtonContainer = React.useRef<HTMLDivElement>(null);\n\t\tconst [tabButtons, setTabButtons] = React.useState<HTMLButtonElement[]>([]);\n\n\t\tconst prevPage = React.useCallback(() => {\n\t\t\tsetPage(page - 1);\n\t\t}, [page]);\n\n\t\tconst nextPage = React.useCallback(() => {\n\t\t\tsetPage(page + 1);\n\t\t}, [page]);\n\n\t\t// **************************\n\t\t// Keyboard Navigation\n\t\t// **************************\n\n\t\tconst handleKeyUp = (e: React.KeyboardEvent) => {\n\t\t\tconst actions: TabActionType[] = [\n\t\t\t\t'ArrowUp',\n\t\t\t\t'ArrowDown',\n\t\t\t\t'ArrowLeft',\n\t\t\t\t'ArrowRight',\n\t\t\t\t'Home',\n\t\t\t\t'End'\n\t\t\t];\n\n\t\t\tif (actions.includes(e.key as TabActionType)) {\n\t\t\t\tpreventDefault(e);\n\t\t\t}\n\t\t};\n\n\t\t/**\n\t\t * Focus management when someone is using a keyboard to navigate the menu\n\t\t * @param e - keyboard event\n\t\t */\n\t\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\t\tconst currentIndex = tabButtons.findIndex((item) => document.activeElement === item);\n\t\t\tlet nextIndex: number;\n\t\t\tconst lastTab = tabButtons.length - 1;\n\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\tnextIndex = currentIndex < tabButtons.length - 1 ? currentIndex + 1 : currentIndex;\n\t\t\t\t\ttabButtons[nextIndex]?.focus();\n\t\t\t\t\ttabButtons[nextIndex]?.click();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : 0;\n\t\t\t\t\ttabButtons[nextIndex]?.focus();\n\t\t\t\t\ttabButtons[nextIndex]?.click();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'Home':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\ttabButtons[0]?.focus();\n\t\t\t\t\ttabButtons[0]?.click();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'End':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\ttabButtons[lastTab]?.focus();\n\t\t\t\t\ttabButtons[lastTab]?.click();\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t};\n\n\t\tReact.useEffect(() => {\n\t\t\tconst foundMenuItems = Array.from(\n\t\t\t\ttabGroup.current?.querySelectorAll('[role=\"tab\"]') || []\n\t\t\t) as HTMLButtonElement[];\n\n\t\t\tsetTabButtons(foundMenuItems);\n\t\t}, [prevPage, nextPage]);\n\n\t\t// **************************\n\t\t// End Keyboard Navigation\n\t\t// **************************\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!tabGroup.current || tabGroup.current.offsetWidth === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst totalPages = Math.ceil(tabGroup.current.scrollWidth / tabGroup.current.offsetWidth);\n\n\t\t\tsetPageCount(totalPages);\n\t\t}, [tabGroup]);\n\n\t\tconst previousButton = (\n\t\t\t<div\n\t\t\t\tclassName={`${styles['MrlTabGroup-nav']} ${styles['MrlTabGroup-prev']}`}\n\t\t\t\tref={prevButtonContainer}\n\t\t\t>\n\t\t\t\t<div className={`${styles['MrlTabGroup-fade']} ${styles['MrlTabGroup-fadePrev']}`} />\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tclassName={styles['MrlTabGroup-prevButton']}\n\t\t\t\t\ticon={<MrlSvg svg={chevronLeft} />}\n\t\t\t\t\tonClick={prevPage}\n\t\t\t\t\tdata-qa=\"previous-categories-button\"\n\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\tposition=\"right\"\n\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\ttext=\"Previous\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\n\t\tconst nextButton = (\n\t\t\t<div\n\t\t\t\tclassName={`${styles['MrlTabGroup-nav']} ${styles['MrlTabGroup-next']}`}\n\t\t\t\tref={nextButtonContainer}\n\t\t\t>\n\t\t\t\t<div className={`${styles['MrlTabGroup-fade']} ${styles['MrlTabGroup-fadeNext']}`} />\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tclassName={styles['MrlTabGroup-nextButton']}\n\t\t\t\t\ticon={<MrlSvg svg={chevronRight} />}\n\t\t\t\t\tonClick={nextPage}\n\t\t\t\t\tdata-qa=\"next-categories-button\"\n\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\tposition=\"left\"\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\ttext=\"Next\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\n\t\tconst isFirstPage = page === 0;\n\t\t// If we don't have any pages yet (at rendering time for instance) don't show the arrow.\n\t\tconst isLastPage = pageCount === 0 || page === pageCount - 1;\n\n\t\tlet pxToTranslate: number | null = null;\n\t\tconst fadePx = 3.4375 * 16;\n\n\t\t// Check if the component was mounted and has more than one page\n\t\tif (tabGroup.current && pageCount !== 1) {\n\t\t\tconst pxPerPage = -tabGroup.current.offsetWidth * page;\n\t\t\tconst fadeOffset = isFirstPage || isLastPage ? fadePx : fadePx * 2;\n\t\t\tconst pxRemainingInContainer =\n\t\t\t\ttabGroup.current.offsetWidth - tabGroup.current.scrollWidth - fadeOffset;\n\n\t\t\tpxToTranslate = Math.max(pxPerPage, pxRemainingInContainer);\n\t\t}\n\n\t\tconst containerClass = classnames(className, 'mrl-tab-group', styles.MrlTabGroup);\n\n\t\t// We do not need the tablist to be focusable, as the contents within it are\n\t\t/* eslint-disable jsx-a11y/interactive-supports-focus */\n\t\treturn (\n\t\t\t<div {...rest} className={styles['MrlTabGroup-container']}>\n\t\t\t\t{!disablePageControls && !isFirstPage && previousButton}\n\t\t\t\t<div\n\t\t\t\t\taria-label={label ? label : undefined}\n\t\t\t\t\tclassName={containerClass}\n\t\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tref={tabGroup}\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\tstyle={pxToTranslate ? { transform: `translateX(${pxToTranslate / 16}rem)` } : undefined}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!disablePageControls && !isLastPage && nextButton}\n\t\t\t</div>\n\t\t);\n\t\t/* eslint-enable jsx-a11y/interactive-supports-focus */\n\t}\n);\n\nMrlTabGroup.displayName = 'MrlTabGroup';\n"],"names":["MrlTabGroup","React","memo","_ref","children","className","disablePageControls","label","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","page","setPage","_React$useState3","_React$useState4","pageCount","setPageCount","tabGroup","useRef","prevButtonContainer","nextButtonContainer","_React$useState5","_React$useState6","tabButtons","setTabButtons","prevPage","useCallback","nextPage","handleKeyUp","e","actions","includes","key","preventDefault","handleKeyDown","_tabButtons$nextIndex","_tabButtons$nextIndex2","_tabButtons$nextIndex3","_tabButtons$nextIndex4","_tabButtons$","_tabButtons$2","_tabButtons$lastTab","_tabButtons$lastTab2","currentIndex","findIndex","item","document","activeElement","nextIndex","lastTab","length","focus","click","useEffect","_tabGroup$current","foundMenuItems","Array","from","current","querySelectorAll","offsetWidth","totalPages","Math","ceil","scrollWidth","previousButton","createElement","concat","styles","ref","MrlIconButton","icon","MrlSvg","svg","chevronLeft","onClick","kind","position","size","state","tabIndex","text","nextButton","chevronRight","isFirstPage","isLastPage","pxToTranslate","fadePx","pxPerPage","fadeOffset","pxRemainingInContainer","max","containerClass","classnames","_extends","undefined","onKeyUp","onKeyDown","role","style","transform","displayName"],"mappings":"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"}
+{"version":3,"file":"MrlTabGroup.js","sources":["../../../../../src/components/tabs/MrlTabGroup/MrlTabGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { chevronLeft, chevronRight } from '@muraldevkit/ds-icons';\nimport { MrlIconButton, MrlSvg } from '../../';\nimport { TabActionType } from '../constants';\nimport { preventDefault } from '../../../utils';\n\nimport styles from './MrlTabGroup.module.scss';\n\nexport interface MrlTabGroupPropTypes {\n\tchildren: React.ReactNode;\n\t/** Class to be applied to the container element of the MrlTabGroup */\n\tclassName?: string;\n\tdisablePageControls?: boolean;\n\t/** A hidden label for the tab group for accessiblity purposes */\n\tlabel?: string;\n}\n\nexport const MrlTabGroup: React.FC<MrlTabGroupPropTypes> = React.memo(\n\t({ children, className, disablePageControls, label, ...rest }: MrlTabGroupPropTypes) => {\n\t\tconst [page, setPage] = React.useState(0);\n\t\t// We need `pageCount` in the state so when the component is mounted\n\t\t// the values of `isFirstPage` and `isLastPage` are correctly calculated.\n\t\tconst [pageCount, setPageCount] = React.useState(0);\n\n\t\tconst tabGroup = React.useRef<HTMLDivElement>(null);\n\t\tconst prevButtonContainer = React.useRef<HTMLDivElement>(null);\n\t\tconst nextButtonContainer = React.useRef<HTMLDivElement>(null);\n\t\tconst [tabButtons, setTabButtons] = React.useState<HTMLButtonElement[]>([]);\n\n\t\tconst prevPage = React.useCallback(() => {\n\t\t\tsetPage(page - 1);\n\t\t}, [page]);\n\n\t\tconst nextPage = React.useCallback(() => {\n\t\t\tsetPage(page + 1);\n\t\t}, [page]);\n\n\t\t// **************************\n\t\t// Keyboard Navigation\n\t\t// **************************\n\n\t\tconst handleKeyUp = (e: React.KeyboardEvent) => {\n\t\t\tconst actions: TabActionType[] = [\n\t\t\t\t'ArrowUp',\n\t\t\t\t'ArrowDown',\n\t\t\t\t'ArrowLeft',\n\t\t\t\t'ArrowRight',\n\t\t\t\t'Home',\n\t\t\t\t'End'\n\t\t\t];\n\n\t\t\tif (actions.includes(e.key as TabActionType)) {\n\t\t\t\tpreventDefault(e);\n\t\t\t}\n\t\t};\n\n\t\t/**\n\t\t * Focus management when someone is using a keyboard to navigate the menu\n\t\t * @param e - keyboard event\n\t\t */\n\t\tconst handleKeyDown = (e: React.KeyboardEvent) => {\n\t\t\tconst currentIndex = tabButtons.findIndex((item) => document.activeElement === item);\n\t\t\tlet nextIndex: number;\n\t\t\tconst lastTab = tabButtons.length - 1;\n\n\t\t\tswitch (e.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\tnextIndex = currentIndex < tabButtons.length - 1 ? currentIndex + 1 : currentIndex;\n\t\t\t\t\ttabButtons[nextIndex]?.focus();\n\t\t\t\t\ttabButtons[nextIndex]?.click();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : 0;\n\t\t\t\t\ttabButtons[nextIndex]?.focus();\n\t\t\t\t\ttabButtons[nextIndex]?.click();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'Home':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\ttabButtons[0]?.focus();\n\t\t\t\t\ttabButtons[0]?.click();\n\t\t\t\t\tbreak;\n\n\t\t\t\tcase 'End':\n\t\t\t\t\tpreventDefault(e);\n\t\t\t\t\ttabButtons[lastTab]?.focus();\n\t\t\t\t\ttabButtons[lastTab]?.click();\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t};\n\n\t\tReact.useEffect(() => {\n\t\t\tconst foundMenuItems = Array.from(\n\t\t\t\ttabGroup.current?.querySelectorAll('[role=\"tab\"]') || []\n\t\t\t) as HTMLButtonElement[];\n\n\t\t\tsetTabButtons(foundMenuItems);\n\t\t}, [prevPage, nextPage]);\n\n\t\t// **************************\n\t\t// End Keyboard Navigation\n\t\t// **************************\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!tabGroup.current || tabGroup.current.offsetWidth === 0) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst totalPages = Math.ceil(tabGroup.current.scrollWidth / tabGroup.current.offsetWidth);\n\n\t\t\tsetPageCount(totalPages);\n\t\t}, [tabGroup]);\n\n\t\tconst previousButton = (\n\t\t\t<div\n\t\t\t\tclassName={`${styles['MrlTabGroup-nav']} ${styles['MrlTabGroup-prev']}`}\n\t\t\t\tref={prevButtonContainer}\n\t\t\t>\n\t\t\t\t<div className={`${styles['MrlTabGroup-fade']} ${styles['MrlTabGroup-fadePrev']}`} />\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tclassName={styles['MrlTabGroup-prevButton']}\n\t\t\t\t\ticon={<MrlSvg svg={chevronLeft} />}\n\t\t\t\t\tonClick={prevPage}\n\t\t\t\t\tdata-qa=\"previous-categories-button\"\n\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\tposition=\"right\"\n\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\ttext=\"Previous\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\n\t\tconst nextButton = (\n\t\t\t<div\n\t\t\t\tclassName={`${styles['MrlTabGroup-nav']} ${styles['MrlTabGroup-next']}`}\n\t\t\t\tref={nextButtonContainer}\n\t\t\t>\n\t\t\t\t<div className={`${styles['MrlTabGroup-fade']} ${styles['MrlTabGroup-fadeNext']}`} />\n\t\t\t\t<MrlIconButton\n\t\t\t\t\tclassName={styles['MrlTabGroup-nextButton']}\n\t\t\t\t\ticon={<MrlSvg svg={chevronRight} />}\n\t\t\t\t\tonClick={nextPage}\n\t\t\t\t\tdata-qa=\"next-categories-button\"\n\t\t\t\t\tkind=\"ghost\"\n\t\t\t\t\tposition=\"left\"\n\t\t\t\t\tstate=\"default\"\n\t\t\t\t\tsize=\"xsmall\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\ttext=\"Next\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\n\t\tconst isFirstPage = page === 0;\n\t\t// If we don't have any pages yet (at rendering time for instance) don't show the arrow.\n\t\tconst isLastPage = pageCount === 0 || page === pageCount - 1;\n\n\t\tlet pxToTranslate: number | null = null;\n\t\tconst fadePx = 3.4375 * 16;\n\n\t\t// Check if the component was mounted and has more than one page\n\t\tif (tabGroup.current && pageCount !== 1) {\n\t\t\tconst pxPerPage = -tabGroup.current.offsetWidth * page;\n\t\t\tconst fadeOffset = isFirstPage || isLastPage ? fadePx : fadePx * 2;\n\t\t\tconst pxRemainingInContainer =\n\t\t\t\ttabGroup.current.offsetWidth - tabGroup.current.scrollWidth - fadeOffset;\n\n\t\t\tpxToTranslate = Math.max(pxPerPage, pxRemainingInContainer);\n\t\t}\n\n\t\tconst containerClass = classnames(className, 'mrl-tab-group', styles.MrlTabGroup);\n\n\t\t// We do not need the tablist to be focusable, as the contents within it are\n\t\t/* eslint-disable jsx-a11y/interactive-supports-focus */\n\t\treturn (\n\t\t\t<div {...rest} className={styles['MrlTabGroup-container']}>\n\t\t\t\t{!disablePageControls && !isFirstPage && previousButton}\n\t\t\t\t<div\n\t\t\t\t\taria-label={label ? label : undefined}\n\t\t\t\t\tclassName={containerClass}\n\t\t\t\t\tonKeyUp={handleKeyUp}\n\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\tref={tabGroup}\n\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\tstyle={pxToTranslate ? { transform: `translateX(${pxToTranslate / 16}rem)` } : undefined}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{!disablePageControls && !isLastPage && nextButton}\n\t\t\t</div>\n\t\t);\n\t\t/* eslint-enable jsx-a11y/interactive-supports-focus */\n\t}\n);\n\nMrlTabGroup.displayName = 'MrlTabGroup';\n"],"names":["MrlTabGroup","React","memo","_ref","children","className","disablePageControls","label","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","page","setPage","_React$useState3","_React$useState4","pageCount","setPageCount","tabGroup","useRef","prevButtonContainer","nextButtonContainer","_React$useState5","_React$useState6","tabButtons","setTabButtons","prevPage","useCallback","nextPage","handleKeyUp","e","actions","includes","key","preventDefault","handleKeyDown","_tabButtons$nextIndex","_tabButtons$nextIndex2","_tabButtons$nextIndex3","_tabButtons$nextIndex4","_tabButtons$","_tabButtons$2","_tabButtons$lastTab","_tabButtons$lastTab2","currentIndex","findIndex","item","document","activeElement","nextIndex","lastTab","length","focus","click","useEffect","_tabGroup$current","foundMenuItems","Array","from","current","querySelectorAll","offsetWidth","totalPages","Math","ceil","scrollWidth","previousButton","createElement","concat","styles","ref","MrlIconButton","icon","MrlSvg","svg","chevronLeft","onClick","kind","position","size","state","tabIndex","text","nextButton","chevronRight","isFirstPage","isLastPage","pxToTranslate","fadePx","pxPerPage","fadeOffset","pxRemainingInContainer","max","containerClass","classnames","_extends","undefined","onKeyUp","onKeyDown","role","style","transform","displayName"],"mappings":"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"}

package/dist/esm/components/tabs/MrlTabLink/MrlTabLink.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import { NavLink } from 'react-router-dom';
@@ -12,7 +12,7 @@ var _excluded = ["className", "children", "icon", "id", "hookClick", "text", "to
  * @param {MrlTabLinkProps} props the props for your MrlTabLink
  * @returns {React.ReactElement} an a element containing the text you pass
  */
-var MrlTabLink = function MrlTabLink(_ref) {
+var MrlTabLink = _ref => {
   var className = _ref.className,
     children = _ref.children,
     icon = _ref.icon,
@@ -25,9 +25,14 @@ var MrlTabLink = function MrlTabLink(_ref) {
     activeTab = _useMrlTabContext.activeTab,
     setActiveTab = _useMrlTabContext.setActiveTab;
   var active = activeTab === id;
-  var buttonClasses = classnames(className, 'mrl-tab', _defineProperty(_defineProperty({}, styles['MrlTab'], true), styles['MrlTab-selected'], active));
-  var textClasses = classnames('mrl-tab--text', _defineProperty({}, styles['MrlTab-Text'], true));
-  var handleClick = function handleClick(id) {
+  var buttonClasses = classnames(className, 'mrl-tab', {
+    [styles['MrlTab']]: true,
+    [styles['MrlTab-selected']]: active
+  });
+  var textClasses = classnames('mrl-tab--text', {
+    [styles['MrlTab-Text']]: true
+  });
+  var handleClick = id => {
     if (hookClick) {
       hookClick();
     }
@@ -39,9 +44,7 @@ var MrlTabLink = function MrlTabLink(_ref) {
     "data-qa": "".concat(id, "-tab"),
     "data-roving": "true",
     id: id,
-    onClick: function onClick() {
-      return handleClick(id);
-    },
+    onClick: () => handleClick(id),
     role: "tab",
     tabIndex: active ? 0 : -1,
     to: to

package/dist/esm/components/tabs/MrlTabLink/MrlTabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"MrlTabLink.js","sources":["../../../../../src/components/tabs/MrlTabLink/MrlTabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useMrlTabContext } from '../../..';\n\n/** MrlTab and MrlTabLink share styles as they should look identical */\nimport styles from '../MrlTab/MrlTab.module.scss';\n\nexport interface MrlTabLinkProps extends NavLinkProps {\n\t/** Class to be applied to the NavLink element of the MrlTabLink */\n\tclassName?: string;\n\t/** Children to be rendered within the text component */\n\tchildren?: React.ReactNode;\n\ticon?: React.ReactElement;\n\t/**\n\t * The id that will be passed to the MrlTabContext to set the active state.\n\t * NOTE: This must match the `tabId` set on `MrlTabContent`!\n\t */\n\tid: string;\n\t/** An addition function to call when clicking on a tab */\n\thookClick?: () => void;\n\t/**\n\t * Textual content when it's a static string; if you have nested elements,\n\t * use children to provide content\n\t */\n\ttext?: string;\n}\n\n/**\n * Renders a tab component\n *\n * @param {MrlTabLinkProps} props the props for your MrlTabLink\n * @returns {React.ReactElement} an a element containing the text you pass\n */\nexport const MrlTabLink = ({\n\tclassName,\n\tchildren,\n\ticon,\n\tid,\n\thookClick,\n\ttext,\n\tto,\n\t...remainingProps\n}: MrlTabLinkProps): React.ReactElement => {\n\tconst { activeTab, setActiveTab } = useMrlTabContext();\n\tconst active = activeTab === id;\n\tconst buttonClasses = classnames(className, 'mrl-tab', {\n\t\t[styles['MrlTab']]: true,\n\t\t[styles['MrlTab-selected']]: active\n\t});\n\n\tconst textClasses = classnames('mrl-tab--text', {\n\t\t[styles['MrlTab-Text']]: true\n\t});\n\n\tconst handleClick = (id: string) => {\n\t\tif (hookClick) {\n\t\t\thookClick();\n\t\t}\n\n\t\tsetActiveTab(id);\n\t};\n\n\treturn (\n\t\t<NavLink\n\t\t\taria-selected={active}\n\t\t\tclassName={buttonClasses}\n\t\t\tdata-qa={`${id}-tab`}\n\t\t\tdata-roving=\"true\"\n\t\t\tid={id}\n\t\t\tonClick={() => handleClick(id)}\n\t\t\trole=\"tab\"\n\t\t\ttabIndex={active ? 0 : -1}\n\t\t\tto={to}\n\t\t\t{...remainingProps}\n\t\t>\n\t\t\t{!!icon && <span className={styles['MrlTab-icon']}>{icon}</span>}\n\t\t\t{!!text && <span className={textClasses}>{text}</span>}\n\t\t\t{!!children && <span className={textClasses}>{children}</span>}\n\t\t</NavLink>\n\t);\n};\n"],"names":["MrlTabLink","_ref","className","children","icon","id","hookClick","text","to","remainingProps","_objectWithoutProperties","_excluded","_useMrlTabContext","useMrlTabContext","activeTab","setActiveTab","active","buttonClasses","classnames","_defineProperty","styles","textClasses","handleClick","React","createElement","NavLink","_extends","concat","onClick","role","tabIndex"],"mappings":";;;;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA;IACaA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EASoB;AAAA,EAAA,IAR1CC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IACFC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IACJC,EAAE,GAAAP,IAAA,CAAFO,EAAE;AACCC,IAAAA,cAAc,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA;AAEjB,EAAA,IAAAC,iBAAA,GAAoCC,gBAAgB,EAAE;IAA9CC,SAAS,GAAAF,iBAAA,CAATE,SAAS;IAAEC,YAAY,GAAAH,iBAAA,CAAZG,YAAY;AAC/B,EAAA,IAAMC,MAAM,GAAGF,SAAS,KAAKT,EAAE;EAC/B,IAAMY,aAAa,GAAGC,UAAU,CAAChB,SAAS,EAAE,SAAS,EAAAiB,eAAA,CAAAA,eAAA,CAAA,EAAA,EACnDC,MAAM,CAAC,QAAQ,CAAC,EAAG,IAAI,CAAA,EACvBA,MAAM,CAAC,iBAAiB,CAAC,EAAGJ,MAAM,CACnC,CAAC;AAEF,EAAA,IAAMK,WAAW,GAAGH,UAAU,CAAC,eAAe,EAAAC,eAAA,CAAA,EAAA,EAC5CC,MAAM,CAAC,aAAa,CAAC,EAAG,IAAI,CAC7B,CAAC;AAEF,EAAA,IAAME,WAAW,GAAG,SAAdA,WAAWA,CAAIjB,EAAU,EAAK;AACnC,IAAA,IAAIC,SAAS,EAAE;AACdA,MAAAA,SAAS,EAAE;AACZ,IAAA;IAEAS,YAAY,CAACV,EAAE,CAAC;EACjB,CAAC;AAED,EAAA,oBACCkB,KAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACP,IAAA,eAAA,EAAeV,MAAO;AACtBd,IAAAA,SAAS,EAAEe,aAAc;IACzB,SAAA,EAAA,EAAA,CAAAU,MAAA,CAAYtB,EAAE,EAAA,MAAA,CAAO;AACrB,IAAA,aAAA,EAAY,MAAM;AAClBA,IAAAA,EAAE,EAAEA,EAAG;IACPuB,OAAO,EAAE,SAATA,OAAOA,GAAA;MAAA,OAAQN,WAAW,CAACjB,EAAE,CAAC;IAAA,CAAC;AAC/BwB,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,QAAQ,EAAEd,MAAM,GAAG,CAAC,GAAG,EAAG;AAC1BR,IAAAA,EAAE,EAAEA;GAAG,EACHC,cAAc,GAEjB,CAAC,CAACL,IAAI,iBAAImB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMtB,SAAS,EAAEkB,MAAM,CAAC,aAAa;GAAE,EAAEhB,IAAW,CAAC,EAC/D,CAAC,CAACG,IAAI,iBAAIgB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMtB,IAAAA,SAAS,EAAEmB;GAAY,EAAEd,IAAW,CAAC,EACrD,CAAC,CAACJ,QAAQ,iBAAIoB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMtB,IAAAA,SAAS,EAAEmB;GAAY,EAAElB,QAAe,CACrD,CAAC;AAEZ;;;;"}
+{"version":3,"file":"MrlTabLink.js","sources":["../../../../../src/components/tabs/MrlTabLink/MrlTabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useMrlTabContext } from '../../..';\n\n/** MrlTab and MrlTabLink share styles as they should look identical */\nimport styles from '../MrlTab/MrlTab.module.scss';\n\nexport interface MrlTabLinkProps extends NavLinkProps {\n\t/** Class to be applied to the NavLink element of the MrlTabLink */\n\tclassName?: string;\n\t/** Children to be rendered within the text component */\n\tchildren?: React.ReactNode;\n\ticon?: React.ReactElement;\n\t/**\n\t * The id that will be passed to the MrlTabContext to set the active state.\n\t * NOTE: This must match the `tabId` set on `MrlTabContent`!\n\t */\n\tid: string;\n\t/** An addition function to call when clicking on a tab */\n\thookClick?: () => void;\n\t/**\n\t * Textual content when it's a static string; if you have nested elements,\n\t * use children to provide content\n\t */\n\ttext?: string;\n}\n\n/**\n * Renders a tab component\n *\n * @param {MrlTabLinkProps} props the props for your MrlTabLink\n * @returns {React.ReactElement} an a element containing the text you pass\n */\nexport const MrlTabLink = ({\n\tclassName,\n\tchildren,\n\ticon,\n\tid,\n\thookClick,\n\ttext,\n\tto,\n\t...remainingProps\n}: MrlTabLinkProps): React.ReactElement => {\n\tconst { activeTab, setActiveTab } = useMrlTabContext();\n\tconst active = activeTab === id;\n\tconst buttonClasses = classnames(className, 'mrl-tab', {\n\t\t[styles['MrlTab']]: true,\n\t\t[styles['MrlTab-selected']]: active\n\t});\n\n\tconst textClasses = classnames('mrl-tab--text', {\n\t\t[styles['MrlTab-Text']]: true\n\t});\n\n\tconst handleClick = (id: string) => {\n\t\tif (hookClick) {\n\t\t\thookClick();\n\t\t}\n\n\t\tsetActiveTab(id);\n\t};\n\n\treturn (\n\t\t<NavLink\n\t\t\taria-selected={active}\n\t\t\tclassName={buttonClasses}\n\t\t\tdata-qa={`${id}-tab`}\n\t\t\tdata-roving=\"true\"\n\t\t\tid={id}\n\t\t\tonClick={() => handleClick(id)}\n\t\t\trole=\"tab\"\n\t\t\ttabIndex={active ? 0 : -1}\n\t\t\tto={to}\n\t\t\t{...remainingProps}\n\t\t>\n\t\t\t{!!icon && <span className={styles['MrlTab-icon']}>{icon}</span>}\n\t\t\t{!!text && <span className={textClasses}>{text}</span>}\n\t\t\t{!!children && <span className={textClasses}>{children}</span>}\n\t\t</NavLink>\n\t);\n};\n"],"names":["MrlTabLink","_ref","className","children","icon","id","hookClick","text","to","remainingProps","_objectWithoutProperties","_excluded","_useMrlTabContext","useMrlTabContext","activeTab","setActiveTab","active","buttonClasses","classnames","styles","textClasses","handleClick","React","createElement","NavLink","_extends","concat","onClick","role","tabIndex"],"mappings":";;;;;;;;AA4BA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,UAAU,GAAGC,IAAA,IASiB;AAAA,EAAA,IAR1CC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,EAAE,GAAAJ,IAAA,CAAFI,EAAE;IACFC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,IAAI,GAAAN,IAAA,CAAJM,IAAI;IACJC,EAAE,GAAAP,IAAA,CAAFO,EAAE;AACCC,IAAAA,cAAc,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA,CAAA;AAEjB,EAAA,IAAAC,iBAAA,GAAoCC,gBAAgB,EAAE;IAA9CC,SAAS,GAAAF,iBAAA,CAATE,SAAS;IAAEC,YAAY,GAAAH,iBAAA,CAAZG,YAAY;AAC/B,EAAA,IAAMC,MAAM,GAAGF,SAAS,KAAKT,EAAE;AAC/B,EAAA,IAAMY,aAAa,GAAGC,UAAU,CAAChB,SAAS,EAAE,SAAS,EAAE;AACtD,IAAA,CAACiB,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI;AACxB,IAAA,CAACA,MAAM,CAAC,iBAAiB,CAAC,GAAGH;AAC9B,GAAC,CAAC;AAEF,EAAA,IAAMI,WAAW,GAAGF,UAAU,CAAC,eAAe,EAAE;AAC/C,IAAA,CAACC,MAAM,CAAC,aAAa,CAAC,GAAG;AAC1B,GAAC,CAAC;EAEF,IAAME,WAAW,GAAIhB,EAAU,IAAK;AACnC,IAAA,IAAIC,SAAS,EAAE;AACdA,MAAAA,SAAS,EAAE;AACZ,IAAA;IAEAS,YAAY,CAACV,EAAE,CAAC;EACjB,CAAC;AAED,EAAA,oBACCiB,KAAA,CAAAC,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACP,IAAA,eAAA,EAAeT,MAAO;AACtBd,IAAAA,SAAS,EAAEe,aAAc;IACzB,SAAA,EAAA,EAAA,CAAAS,MAAA,CAAYrB,EAAE,EAAA,MAAA,CAAO;AACrB,IAAA,aAAA,EAAY,MAAM;AAClBA,IAAAA,EAAE,EAAEA,EAAG;AACPsB,IAAAA,OAAO,EAAEA,MAAMN,WAAW,CAAChB,EAAE,CAAE;AAC/BuB,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,QAAQ,EAAEb,MAAM,GAAG,CAAC,GAAG,EAAG;AAC1BR,IAAAA,EAAE,EAAEA;GAAG,EACHC,cAAc,GAEjB,CAAC,CAACL,IAAI,iBAAIkB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;IAAMrB,SAAS,EAAEiB,MAAM,CAAC,aAAa;GAAE,EAAEf,IAAW,CAAC,EAC/D,CAAC,CAACG,IAAI,iBAAIe,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMrB,IAAAA,SAAS,EAAEkB;GAAY,EAAEb,IAAW,CAAC,EACrD,CAAC,CAACJ,QAAQ,iBAAImB,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMrB,IAAAA,SAAS,EAAEkB;GAAY,EAAEjB,QAAe,CACrD,CAAC;AAEZ;;;;"}

package/dist/esm/components/tabs/MrlTabs/MrlTabs.js

@@ -1,10 +1,10 @@
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
 import classnames from 'classnames';
 import { MrlTabContext } from '../../../contexts/MrlTabContext/MrlTabContext.js';
 
 var _excluded = ["capitalizeTabTitles", "children", "className", "selectedTab", "size", "spaceTabsEvenly"];
-var MrlTabs = /*#__PURE__*/React.memo(function (_ref) {
+var MrlTabs = /*#__PURE__*/React.memo(_ref => {
   var capitalizeTabTitles = _ref.capitalizeTabTitles,
     children = _ref.children,
     className = _ref.className,
@@ -18,23 +18,25 @@ var MrlTabs = /*#__PURE__*/React.memo(function (_ref) {
     activeTab = _React$useState2[0],
     setActiveTab = _React$useState2[1];
   var tabsRef = React.useRef(null);
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _tabsRef$current;
     var foundTabs = Array.from(((_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.querySelectorAll('[role="tab"]')) || []);
-    var tabIds = foundTabs.map(function (tab) {
-      return tab.id;
-    });
+    var tabIds = foundTabs.map(tab => tab.id);
     var selectedTabValid = selectedTab && tabIds.indexOf(selectedTab);
 
     // If we have a valid `selectedTab` - use it
     // Otherwise, set the first tab to active.
     setActiveTab(selectedTabValid ? selectedTab : tabIds[0]);
   }, [selectedTab]);
-  var containerClass = classnames(className, 'mrl-tabs', _defineProperty(_defineProperty(_defineProperty({}, "MrlTabs-".concat(size), size !== 'small'), 'MrlTabs-caps', capitalizeTabTitles), 'MrlTabs-evenSpacing', spaceTabsEvenly));
+  var containerClass = classnames(className, 'mrl-tabs', {
+    ["MrlTabs-".concat(size)]: size !== 'small',
+    ['MrlTabs-caps']: capitalizeTabTitles,
+    ['MrlTabs-evenSpacing']: spaceTabsEvenly
+  });
   return /*#__PURE__*/React.createElement(MrlTabContext.Provider, {
     value: {
-      activeTab: activeTab,
-      setActiveTab: setActiveTab
+      activeTab,
+      setActiveTab
     }
   }, /*#__PURE__*/React.createElement("div", _extends({
     className: containerClass