@inseefr/lunatic 2.7.21 → 3.0.0-rc.10

package/lib/components/shared/Radio/RadioGroup.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroup = void 0;
+var _Fieldset = require("../Fieldset/Fieldset");
+var _ComponentErrors = require("../ComponentErrors/ComponentErrors");
+var _slottableComponent = require("../HOC/slottableComponent");
+var _getShortcutKey = require("../Checkbox/getShortcutKey");
+var _RadioOption = require("./RadioOption");
+var _useListKeyboardHandler = require("../../../hooks/useListKeyboardHandler");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Stack of radios fields surrounded by a fieldset
+ */
+function LunaticRadioGroup(_ref) {
+  var options = _ref.options,
+    value = _ref.value,
+    id = _ref.id,
+    label = _ref.label,
+    description = _ref.description,
+    onSelect = _ref.onSelect,
+    _ref$checkboxStyle = _ref.checkboxStyle,
+    checkboxStyle = _ref$checkboxStyle === void 0 ? false : _ref$checkboxStyle,
+    errors = _ref.errors,
+    className = _ref.className,
+    shortcut = _ref.shortcut,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    clearable = _ref.clearable;
+  var onKeyDown = (0, _useListKeyboardHandler.useListKeyboardHandler)(options, onSelect);
+  var maxIndex = options.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Fieldset.Fieldset, {
+    className: className,
+    legend: label,
+    description: description,
+    children: [options.map(function (option, index) {
+      var radioId = "lunatic-radio-".concat(id, "-").concat(option.value);
+      var codeModality = (0, _getShortcutKey.getShortcutKey)(index, maxIndex);
+      return /*#__PURE__*/(0, _react.createElement)(_RadioOption.RadioOption, _objectSpread(_objectSpread({}, option), {}, {
+        key: radioId,
+        id: radioId,
+        index: index,
+        checked: value === option.value,
+        onClick: onSelect,
+        onKeyDown: onKeyDown,
+        checkboxStyle: checkboxStyle,
+        codeModality: shortcut ? codeModality : undefined,
+        shortcut: shortcut,
+        disabled: disabled,
+        readOnly: readOnly,
+        invalid: !!errors
+      }));
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentErrors.ComponentErrors, {
+      errors: errors
+    })]
+  });
+}
+var RadioGroup = exports.RadioGroup = (0, _slottableComponent.slottableComponent)('RadioGroup', LunaticRadioGroup);

package/lib/components/shared/Radio/RadioOption.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioOption = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _reactKeyboardEventHandler = _interopRequireDefault(require("react-keyboard-event-handler"));
+var _function = require("../../../utils/function");
+var _Label = require("../Label/Label");
+var _slottableComponent = require("../HOC/slottableComponent");
+var _Icons = require("../Icons");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+/* eslint-disable jsx-a11y/role-supports-aria-props */
+
+function LunaticRadioOption(_ref) {
+  var checked = _ref.checked,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? _function.voidFunction : _ref$onClick,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    id = _ref.id,
+    disabled = _ref.disabled,
+    _ref$onKeyDown = _ref.onKeyDown,
+    onKeyDown = _ref$onKeyDown === void 0 ? _function.voidFunction : _ref$onKeyDown,
+    _ref$index = _ref.index,
+    index = _ref$index === void 0 ? -1 : _ref$index,
+    labelledBy = _ref.labelledBy,
+    checkboxStyle = _ref.checkboxStyle,
+    label = _ref.label,
+    description = _ref.description,
+    shortcut = _ref.shortcut,
+    codeModality = _ref.codeModality,
+    readOnly = _ref.readOnly,
+    invalid = _ref.invalid;
+  var spanEl = (0, _react.useRef)(null);
+  var Icon = getIcon(checked, checkboxStyle);
+  var tabIndex = checked ? 0 : -1;
+  var onClickOption = (0, _react.useCallback)(function () {
+    if (disabled || readOnly) {
+      return;
+    }
+    // on checkboxStyle, clicking on checked value unchecks it, so it acts as if empty answer was clicked
+    checkboxStyle && checked ? onClick(null) : onClick(value);
+  }, [value, onClick, checked, checkboxStyle, disabled, readOnly]);
+  var handleKeyDown = (0, _react.useCallback)(function (e) {
+    var _spanEl$current;
+    var key = e.key;
+    onKeyDown({
+      key: key,
+      index: index
+    });
+    (_spanEl$current = spanEl.current) === null || _spanEl$current === void 0 || _spanEl$current.blur();
+  }, [onKeyDown, index, spanEl]);
+  (0, _react.useEffect)(function () {
+    var current = spanEl.current;
+    if (current && checked) {
+      current.focus();
+    }
+  }, [checked, spanEl, value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "lunatic-radio-group-option",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('radio-modality', 'radio-modality-block', {
+          checked: checked,
+          disabled: disabled,
+          readOnly: readOnly
+        }),
+        "aria-invalid": invalid,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          id: id,
+          role: "radio",
+          className: "lunatic-input-radio",
+          "aria-checked": checked,
+          tabIndex: tabIndex,
+          onClick: onClickOption,
+          onKeyDown: handleKeyDown,
+          "aria-labelledby": labelledBy,
+          ref: spanEl,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Label.Label, {
+            id: labelledBy,
+            htmlFor: id,
+            description: description,
+            children: [codeModality && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "code-modality",
+              children: codeModality.toUpperCase()
+            }), label]
+          })]
+        })
+      })
+    }), shortcut && codeModality && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactKeyboardEventHandler["default"], {
+      handleKeys: [codeModality],
+      onKeyEvent: function onKeyEvent(key, e) {
+        e.preventDefault();
+        onClickOption();
+      },
+      handleFocusableElements: true
+    })]
+  });
+}
+function getIcon(checked, checkboxStyle) {
+  if (checked) {
+    if (checkboxStyle) {
+      return _Icons.CheckboxCheckedIcon;
+    }
+    return _Icons.RadioCheckedIcon;
+  }
+  if (checkboxStyle) {
+    return _Icons.CheckboxUncheckedIcon;
+  }
+  return _Icons.RadioUncheckedIcon;
+}
+var RadioOption = exports.RadioOption = (0, _slottableComponent.slottableComponent)('RadioOption', LunaticRadioOption);

package/lib/components/shared/Radio/RadioOption.spec.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _RadioOption = require("./RadioOption");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('RadioOption', function () {
+  (0, _vitest.it)('renders the component with the correct label', function () {
+    var label = 'Test Option';
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioOption.RadioOption, {
+        id: "radio-option",
+        label: label
+      })),
+      getByText = _render.getByText;
+    (0, _vitest.expect)(getByText(label)).toBeInTheDocument();
+  });
+  (0, _vitest.it)('calls the onClick handler when clicked', function () {
+    var onClickMock = _vitest.vi.fn();
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioOption.RadioOption, {
+      id: "radio-option",
+      label: "Test Option",
+      onClick: onClickMock
+    }));
+    var option = _react.screen.getByRole('radio');
+    _react.fireEvent.click(option);
+    (0, _vitest.expect)(onClickMock).toHaveBeenCalled();
+  });
+  (0, _vitest.it)('sets the tabIndex to -1 when unchecked', function () {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioOption.RadioOption, {
+        id: "radio-option",
+        label: "Test Option",
+        checked: false
+      })),
+      getByRole = _render2.getByRole;
+    (0, _vitest.expect)(getByRole('radio')).toHaveAttribute('tabIndex', '-1');
+  });
+  (0, _vitest.it)('sets the tabIndex to 0 when checked', function () {
+    var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioOption.RadioOption, {
+        id: "radio-option",
+        label: "Test Option",
+        checked: true
+      })),
+      getByRole = _render3.getByRole;
+    (0, _vitest.expect)(getByRole('radio')).toHaveAttribute('tabIndex', '0');
+  });
+  (0, _vitest.it)('applies the disabled class when disabled prop is present', function () {
+    var _render4 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioOption.RadioOption, {
+        id: "radio-option",
+        label: "Test Option",
+        disabled: true
+      })),
+      getByRole = _render4.getByRole;
+    (0, _vitest.expect)(getByRole('radio').parentNode).toHaveClass('disabled');
+  });
+  (0, _vitest.it)('applies the checked class when checked prop is present', function () {
+    var _render5 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioOption.RadioOption, {
+        id: "radio-option",
+        label: "Test Option",
+        checked: true
+      })),
+      getByRole = _render5.getByRole;
+    (0, _vitest.expect)(getByRole('radio').parentNode).toHaveClass('checked');
+  });
+  (0, _vitest.it)('applies the code-modality class when codeModality prop is present', function () {
+    var _render6 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioOption.RadioOption, {
+        id: "radio-option",
+        label: "Test Option",
+        codeModality: "html"
+      })),
+      getByText = _render6.getByText;
+    (0, _vitest.expect)(getByText('HTML')).toHaveClass('code-modality');
+  });
+  (0, _vitest.it)('calls the onKeyDown handler when a key is pressed', function () {
+    var onKeyDownMock = _vitest.vi.fn();
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioOption.RadioOption, {
+      id: "radio-option",
+      label: "Test Option",
+      onKeyDown: onKeyDownMock
+    }));
+    var option = _react.screen.getByRole('radio');
+    _react.fireEvent.keyDown(option, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    (0, _vitest.expect)(onKeyDownMock).toHaveBeenCalled();
+  });
+});

package/lib/components/shared/Table/Table.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _slottableComponent = require("../HOC/slottableComponent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function LunaticTable(_ref) {
+  var className = _ref.className,
+    id = _ref.id,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+    id: "table-".concat(id),
+    className: (0, _classnames["default"])('lunatic-table', className),
+    children: children
+  });
+}
+var Table = exports.Table = (0, _slottableComponent.slottableComponent)('Table', LunaticTable);

package/lib/components/shared/Table/Table.spec.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _Table = require("./Table");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('Table', function () {
+  (0, _vitest.it)('renders without crashing', function () {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        id: "test-table"
+      })),
+      getByRole = _render.getByRole;
+    (0, _vitest.expect)(getByRole('table')).toBeInTheDocument();
+  });
+  (0, _vitest.it)('applies custom className when provided', function () {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
+        id: "test-table",
+        className: "custom-class"
+      })),
+      getByRole = _render2.getByRole;
+    (0, _vitest.expect)(getByRole('table')).toHaveClass('custom-class');
+  });
+});

package/lib/components/shared/Table/TableHeader.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableHeader = TableHeader;
+var _Th = require("./Th");
+var _Thead = require("./Thead");
+var _Tr = require("./Tr");
+var _jsxRuntime = require("react/jsx-runtime");
+function TableHeader(_ref) {
+  var id = _ref.id,
+    header = _ref.header;
+  if (!Array.isArray(header)) {
+    return null;
+  }
+  var content = header.map(function (_ref2, index) {
+    var label = _ref2.label,
+      rowspan = _ref2.rowspan,
+      colspan = _ref2.colspan;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Th.Th, {
+      id: id,
+      row: 0,
+      index: index,
+      rowSpan: rowspan,
+      colSpan: colspan,
+      children: label
+    }, index);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Thead.Thead, {
+    id: id,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tr.Tr, {
+      id: id,
+      row: 0,
+      children: content
+    })
+  });
+}

package/lib/components/shared/Table/Tbody.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tbody = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _slottableComponent = require("../HOC/slottableComponent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function LunaticTbody(_ref) {
+  var id = _ref.id,
+    className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+    id: id ? "lunatic-table-tbody-".concat(id) : undefined,
+    className: (0, _classnames["default"])('lunatic-table-tbody', className),
+    children: children
+  });
+}
+var Tbody = exports.Tbody = (0, _slottableComponent.slottableComponent)('Tbody', LunaticTbody);

package/lib/components/shared/Table/Tbody.spec.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _Tbody = require("./Tbody");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('Tbody component', function () {
+  (0, _vitest.it)('renders the component with the correct props and children', function () {
+    var testId = 'test-id';
+    var testClass = 'test-class';
+    var testContent = 'Test content';
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tbody.Tbody, {
+        id: testId,
+        className: testClass,
+        children: testContent
+      })),
+      getByRole = _render.getByRole,
+      getByText = _render.getByText;
+    var tbodyElement = getByRole('rowgroup');
+    (0, _vitest.expect)(tbodyElement).toHaveAttribute('id', "lunatic-table-tbody-".concat(testId));
+    (0, _vitest.expect)(tbodyElement).toHaveClass('lunatic-table-tbody');
+    (0, _vitest.expect)(tbodyElement).toHaveClass(testClass);
+    (0, _vitest.expect)(getByText(testContent)).toBeInTheDocument();
+  });
+  (0, _vitest.it)('renders the component without an ID or class when not provided', function () {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tbody.Tbody, {})),
+      getByRole = _render2.getByRole;
+    var tbodyElement = getByRole('rowgroup');
+    (0, _vitest.expect)(tbodyElement).not.toHaveAttribute('id');
+    (0, _vitest.expect)(tbodyElement).toHaveClass('lunatic-table-tbody');
+  });
+});

package/lib/components/shared/Table/Td.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Td = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _slottableComponent = require("../HOC/slottableComponent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function LunaticTd(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    row = _ref.row,
+    index = _ref.index,
+    className = _ref.className,
+    colSpan = _ref.colSpan,
+    rowSpan = _ref.rowSpan;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+    id: "lunatic-table-td-".concat(id, "-").concat(row, "-").concat(index),
+    className: (0, _classnames["default"])('lunatic-table-td', className),
+    colSpan: colSpan,
+    rowSpan: rowSpan,
+    children: children
+  });
+}
+var Td = exports.Td = (0, _slottableComponent.slottableComponent)('Td', LunaticTd);

package/lib/components/shared/Table/Td.spec.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _Td = require("./Td");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+(0, _vitest.describe)('Td', function () {
+  (0, _vitest.it)('renders a td element with the correct props and children', function () {
+    var id = 'test-id';
+    var row = 1;
+    var index = 2;
+    var className = 'test-class';
+    var colSpan = 2;
+    var rowSpan = 3;
+    var children = 'Test content';
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Td.Td, {
+              id: id,
+              row: row,
+              index: index,
+              className: className,
+              colSpan: colSpan,
+              rowSpan: rowSpan,
+              children: children
+            })
+          })
+        })
+      })),
+      getByRole = _render.getByRole;
+    var td = getByRole('cell', {
+      name: children
+    });
+    (0, _vitest.expect)(td).toHaveAttribute('id', "lunatic-table-td-".concat(id, "-").concat(row, "-").concat(index));
+    (0, _vitest.expect)(td).toHaveClass('lunatic-table-td');
+    (0, _vitest.expect)(td).toHaveClass(className);
+    (0, _vitest.expect)(td).toHaveAttribute('colspan', colSpan.toString());
+    (0, _vitest.expect)(td).toHaveAttribute('rowspan', rowSpan.toString());
+  });
+});

package/lib/components/shared/Table/Th.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Th = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _slottableComponent = require("../HOC/slottableComponent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function LunaticTh(_ref) {
+  var id = _ref.id,
+    index = _ref.index,
+    children = _ref.children,
+    className = _ref.className,
+    colSpan = _ref.colSpan,
+    rowSpan = _ref.rowSpan;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+    id: "lunatic-table-th-".concat(id, "-").concat(index),
+    className: (0, _classnames["default"])('lunatic-table-th', className),
+    colSpan: colSpan,
+    rowSpan: rowSpan,
+    children: children
+  });
+}
+var Th = exports.Th = (0, _slottableComponent.slottableComponent)('Th', LunaticTh);

package/lib/components/shared/Table/Th.spec.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _Th = require("./Th");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+(0, _vitest.describe)('<Th />', function () {
+  var props = {
+    id: 'test-id',
+    index: 1,
+    colSpan: 2,
+    rowSpan: 3,
+    className: 'test-class',
+    children: 'test children'
+  };
+  (0, _vitest.it)('renders children', function () {
+    var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Th.Th, _objectSpread({}, props))
+        })
+      })),
+      getByRole = _render.getByRole;
+    (0, _vitest.expect)(getByRole('columnheader')).toHaveTextContent(props.children);
+  });
+  (0, _vitest.it)('renders with correct attributes', function () {
+    var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Th.Th, _objectSpread({}, props))
+        })
+      })),
+      getByRole = _render2.getByRole;
+    var th = getByRole('columnheader');
+    (0, _vitest.expect)(th).toHaveAttribute('id', "lunatic-table-th-".concat(props.id, "-").concat(props.index));
+    (0, _vitest.expect)(th).toHaveAttribute('colSpan', props.colSpan.toString());
+    (0, _vitest.expect)(th).toHaveAttribute('rowSpan', props.rowSpan.toString());
+    (0, _vitest.expect)(th).toHaveClass(props.className);
+  });
+});

package/lib/components/shared/Table/Thead.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Thead = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _slottableComponent = require("../HOC/slottableComponent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function LunaticThead(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    className = _ref.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+    id: "lunatic-table-thead-".concat(id),
+    className: (0, _classnames["default"])('lunatic-table-thead', className),
+    children: children
+  });
+}
+var Thead = exports.Thead = (0, _slottableComponent.slottableComponent)('Thead', LunaticThead);

package/lib/components/shared/Table/Thead.spec.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _Thead = require("./Thead");
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+(0, _vitest.describe)('Thead', function () {
+  (0, _vitest.it)('renders with the correct ID', function () {
+    var props = {
+      id: 'test'
+    };
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Thead.Thead, _objectSpread({}, props)));
+    (0, _vitest.expect)(_react.screen.getByRole('rowgroup')).toHaveAttribute('id', 'lunatic-table-thead-test');
+  });
+  (0, _vitest.it)('renders with the correct class name', function () {
+    var props = {
+      id: 'test',
+      className: 'test'
+    };
+    (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Thead.Thead, _objectSpread({}, props)));
+    (0, _vitest.expect)(_react.screen.getByRole('rowgroup')).toHaveClass('lunatic-table-thead test');
+  });
+});

package/lib/components/shared/Table/Tr.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tr = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _slottableComponent = require("../HOC/slottableComponent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function LunaticTr(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    className = _ref.className,
+    row = _ref.row;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+    id: "lunatic-table-tr-".concat(id, "-").concat(row),
+    className: (0, _classnames["default"])('lunatic-table-tr', className),
+    children: children
+  });
+}
+var Tr = exports.Tr = (0, _slottableComponent.slottableComponent)('Tr', LunaticTr);