react-better-html 1.1.144 → 1.1.146

package/dist/index.d.mts

@@ -283,6 +283,7 @@ type ModalProps = {
     /** @requires ReactRouterDomPlugin */
     name?: string;
     overflow?: React.CSSProperties["overflow"];
+    withoutCloseButton?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
     children?: React.ReactNode;
@@ -735,6 +736,7 @@ type TableProps<DataItem> = {
     pageSize?: number;
     pageCount?: number;
     isInsideTableExpandRow?: boolean;
+    containsOverflowComponents?: boolean;
     getRowStyle?: (item: DataItem, index: number) => ComponentStyle;
     onClickRow?: (item: DataItem, index: number) => void;
     onClickAllCheckboxes?: (checked: boolean) => void;

package/dist/index.d.ts

@@ -283,6 +283,7 @@ type ModalProps = {
     /** @requires ReactRouterDomPlugin */
     name?: string;
     overflow?: React.CSSProperties["overflow"];
+    withoutCloseButton?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
     children?: React.ReactNode;
@@ -735,6 +736,7 @@ type TableProps<DataItem> = {
     pageSize?: number;
     pageCount?: number;
     isInsideTableExpandRow?: boolean;
+    containsOverflowComponents?: boolean;
     getRowStyle?: (item: DataItem, index: number) => ComponentStyle;
     onClickRow?: (item: DataItem, index: number) => void;
     onClickAllCheckboxes?: (checked: boolean) => void;

package/dist/index.js

@@ -3352,6 +3352,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
   headerBackgroundColor,
   name,
   overflow,
+  withoutCloseButton,
   onOpen,
   onClose,
   children
@@ -3386,6 +3387,15 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
       setIsOpenedLate(false);
     }, 0.2 * 1e3);
   }, [onClose, urlQuery, name]);
+  const onKeyDown = (0, import_react13.useCallback)(
+    (event) => {
+      if (event.key === "Escape") {
+        if (!withoutCloseButton) return;
+        event.preventDefault();
+      }
+    },
+    [withoutCloseButton]
+  );
   (0, import_react13.useImperativeHandle)(
     ref,
     () => {
@@ -3405,6 +3415,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
         colorTheme,
         opacity: !isOpened ? 0 : 1,
         onClose: onClickClose,
+        onKeyDown,
         ref: dialogRef,
         children: isOpenedLate ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Div_default.column,
@@ -3464,7 +3475,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
                               }
                             )
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                             Button_default.icon,
                             {
                               icon: "XMark",
@@ -3478,7 +3489,7 @@ var ModalComponent = (0, import_react13.forwardRef)(function Modal({
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Divider_default.horizontal, {})
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     Div_default,
                     {
@@ -7101,6 +7112,7 @@ var ToggleInput_default = {
         {
           alignItems: "center",
           gap: theme2.styles.gap,
+          isTabAccessed: true,
           onMouseDown: setIsMouseDown.setTrue,
           onMouseUp: setIsMouseDown.setFalse,
           onMouseOut: setIsMouseDown.setFalse,
@@ -7393,12 +7405,65 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = import_styled_components12.default.table.withConfig({
-  shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "colorTheme", "theme"].includes(prop)
+  shouldForwardProp: (prop) => ![
+    "isStriped",
+    "withHover",
+    "withStickyHeader",
+    "colorTheme",
+    "theme",
+    "containsOverflowComponents",
+    "withFooter"
+  ].includes(prop)
 })`
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
 
+   thead {
+      tr:first-child {
+         border-top-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         border-top-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+
+         th:first-child {
+            border-top-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         }
+
+         th:last-child {
+            border-top-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         }
+      }
+   }
+
+   tbody {
+      tr:last-child {
+         border-bottom-left-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         border-bottom-right-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+
+         td:first-child {
+            border-bottom-left-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         }
+
+         td:last-child {
+            border-bottom-right-radius: ${(props) => props.containsOverflowComponents && !props.withFooter ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         }
+      }
+   }
+
+   tfoot {
+      tr:last-child {
+         border-bottom-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         border-bottom-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+
+         td:first-child {
+            border-bottom-left-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         }
+
+         td:last-child {
+            border-bottom-right-radius: ${(props) => props.containsOverflowComponents ? `${props.theme.styles.borderRadius * 2 - 1}px` : void 0};
+         }
+      }
+   }
+
    tr {
       background-color: ${(props) => props.theme.colors.backgroundContent};
 
@@ -7491,6 +7556,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   pageSize,
   pageCount,
   isInsideTableExpandRow,
+  containsOverflowComponents,
   getRowStyle,
   onClickRow,
   onClickAllCheckboxes,
@@ -7580,14 +7646,14 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
           );
         }
         case "expand": {
-          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Div_default, { isTabAccessed: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             Icon_default,
             {
               name: "chevronDown",
               transform: `rotate(${expandedRows[itemIndex] ? 180 : 0}deg)`,
               transition: theme2.styles.transition
             }
-          );
+          ) });
         }
         default: {
           return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
@@ -7861,6 +7927,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     },
     [currentPage, setCurrentPage, pageCountInternal, setCheckedItems]
   );
+  const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -7868,7 +7935,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
       {
         border: `1px solid ${theme2.colors.border}`,
         borderRadius: theme2.styles.borderRadius * 2,
-        overflow: "auto",
+        overflow: !containsOverflowComponents ? "auto" : void 0,
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           TableStyledComponent,
@@ -7878,6 +7945,8 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
             withStickyHeader,
             colorTheme,
             theme: theme2,
+            containsOverflowComponents,
+            withFooter,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 ThStyledComponent,
@@ -7939,7 +8008,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                 ),
                 expandedRows[rowIndex] && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover isExpandRow", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: columns.length, children: renderExpandedRow(item, rowIndex) }) })
               ] }, JSON.stringify(item) + rowIndex)) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "withoutHover", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default.unknown, { children: noDataItemsMessage }) }) }) }),
-              pageSize !== void 0 && pageCountInternal > 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+              withFooter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: "isFooter", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                 Div_default.column,
                 {
                   position: "relative",