react-better-html 1.1.145 → 1.1.147

package/dist/index.d.mts

@@ -736,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

@@ -736,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

@@ -3909,7 +3909,7 @@ var Chip_default = Chip2;
 
 // src/components/InputField.tsx
 var import_react20 = require("react");
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 
 // src/constants/countries.ts
 var countries = [
@@ -5813,6 +5813,7 @@ var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
 var import_react19 = require("react");
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var getMonthName = (month, short = false) => {
   return [
@@ -5842,6 +5843,16 @@ var getWeekDayName = (day, short = false) => {
   ][day];
 };
 var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
+var yearsRange = Array.from({ length: 100 + 1 + 50 }, (_, index) => index + (/* @__PURE__ */ new Date()).getFullYear() - 100);
+var SelectComponent = import_styled_components10.default.select.withConfig({
+  shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
+})`
+   position: absolute;
+   top: 50%;
+   right: 0;
+   transform: translateY(-50%);
+   opacity: 0;
+`;
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = useTheme();
   const [currentDate, setCurrentDate] = (0, import_react19.useState)(value ? new Date(value) : void 0);
@@ -5882,6 +5893,9 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`
     );
   }, [onChange]);
+  const onChangeYearSelect = (0, import_react19.useCallback)((event) => {
+    setCurrentYear(parseInt(event.target.value));
+  }, []);
   const firstDayOfMonth = (0, import_react19.useMemo)(() => {
     const day = new Date(currentYear, currentMonth, 1).getDay();
     return day === 0 ? 6 : day - 1;
@@ -5906,10 +5920,13 @@ function Calendar({ value, minDate, maxDate, onChange }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Text_default, { fontWeight: 700, children: [
-        getMonthName(currentMonth),
-        " ",
-        currentYear
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: currentYear }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "chevronDown", size: 12 }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectComponent, { theme: theme2, value: currentYear, onChange: onChangeYearSelect, children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year)) })
+        ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
@@ -5996,7 +6013,7 @@ var buttonWidth = 50;
 var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
 var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
-var InputElement = import_styled_components10.default.input.withConfig({
+var InputElement = import_styled_components11.default.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
    position: relative;
@@ -6040,6 +6057,7 @@ var InputElement = import_styled_components10.default.input.withConfig({
    &[type="date"],
    &[type="datetime-local"],
    &[type="time"] {
+      min-height: 48px;
       -webkit-appearance: none;
       -moz-appearance: textfield;
 
@@ -6103,7 +6121,7 @@ var InputElement = import_styled_components10.default.input.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var TextareaElement = import_styled_components10.default.textarea.withConfig({
+var TextareaElement = import_styled_components11.default.textarea.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
    width: 100%;
@@ -6869,12 +6887,12 @@ var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
 var import_react21 = require("react");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components12 = __toESM(require("styled-components"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
-var InputElement2 = import_styled_components11.default.input.withConfig({
+var InputElement2 = import_styled_components12.default.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle"].includes(prop)
 })`
    position: relative;
@@ -6910,7 +6928,7 @@ var InputElement2 = import_styled_components11.default.input.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var SwitchElement = import_styled_components11.default.div.withConfig({
+var SwitchElement = import_styled_components12.default.div.withConfig({
   shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "normalStyle", "hoverStyle"].includes(prop)
 })`
    --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
@@ -7112,7 +7130,9 @@ var ToggleInput_default = {
         {
           alignItems: "center",
           gap: theme2.styles.gap,
+          borderRadius: 999,
           isTabAccessed: true,
+          onClick: onClickElement,
           onMouseDown: setIsMouseDown.setTrue,
           onMouseUp: setIsMouseDown.setFalse,
           onMouseOut: setIsMouseDown.setFalse,
@@ -7126,7 +7146,6 @@ var ToggleInput_default = {
               checked,
               disabled: disabled ?? false,
               isMouseDown,
-              onClick: onClickElement,
               id: readyId,
               role: "switch",
               "aria-checked": checked,
@@ -7400,17 +7419,70 @@ var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
 var import_react25 = require("react");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 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)
+var TableStyledComponent = import_styled_components13.default.table.withConfig({
+  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};
 
@@ -7431,13 +7503,13 @@ var TableStyledComponent = import_styled_components12.default.table.withConfig({
          }
       }
 
-      ${(props) => props.isStriped ? import_styled_components12.css`
+      ${(props) => props.isStriped ? import_styled_components13.css`
                  &:nth-child(even) {
                     background-color: ${props.theme.colors.backgroundSecondary};
                  }
               ` : ""}
 
-      ${(props) => props.withHover ? import_styled_components12.css`
+      ${(props) => props.withHover ? import_styled_components13.css`
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
@@ -7466,7 +7538,7 @@ var TableStyledComponent = import_styled_components12.default.table.withConfig({
       }
    }
 `;
-var ThStyledComponent = import_styled_components12.default.th.withConfig({
+var ThStyledComponent = import_styled_components13.default.th.withConfig({
   shouldForwardProp: (prop) => !["width", "minWidth", "maxWidth", "textAlign"].includes(prop)
 })`
    ${(props) => props.width ? `width: ${props.width}px;` : ""}
@@ -7474,7 +7546,7 @@ var ThStyledComponent = import_styled_components12.default.th.withConfig({
    ${(props) => props.maxWidth ? `max-width: ${props.maxWidth}px;` : ""}
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
 `;
-var TdStyledComponent = import_styled_components12.default.td.withConfig({
+var TdStyledComponent = import_styled_components13.default.td.withConfig({
   shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop)
 })`
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
@@ -7503,6 +7575,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
   pageSize,
   pageCount,
   isInsideTableExpandRow,
+  containsOverflowComponents,
   getRowStyle,
   onClickRow,
   onClickAllCheckboxes,
@@ -7873,6 +7946,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)(
@@ -7880,7 +7954,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,
@@ -7890,6 +7964,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,
@@ -7951,7 +8027,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",
@@ -8180,61 +8256,61 @@ var Table_default = Table2;
 
 // src/components/Tooltip.tsx
 var import_react26 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var tooltipContainerStyle = (props) => ({
-  top: import_styled_components13.css`
+  top: import_styled_components14.css`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
       ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"}
    `,
-  bottom: import_styled_components13.css`
+  bottom: import_styled_components14.css`
       top: calc(100% + ${props.gap}px + ${props.arrowSize}px);
       ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"};
    `,
-  left: import_styled_components13.css`
+  left: import_styled_components14.css`
       ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
       right: calc(100% + ${props.gap}px + ${props.arrowSize}px);
    `,
-  right: import_styled_components13.css`
+  right: import_styled_components14.css`
       ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
       left: calc(100% + ${props.gap}px + ${props.arrowSize}px);
    `
 });
 var tooltipPositionStyle = (props) => ({
   top: {
-    opened: import_styled_components13.css`
+    opened: import_styled_components14.css`
          transform: translateX(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: import_styled_components13.css`
+    closed: import_styled_components14.css`
          transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(${props.theme.styles.gap}px);
       `
   },
   bottom: {
-    opened: import_styled_components13.css`
+    opened: import_styled_components14.css`
          transform: translateX(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: import_styled_components13.css`
+    closed: import_styled_components14.css`
          transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(-${props.theme.styles.gap}px);
       `
   },
   left: {
-    opened: import_styled_components13.css`
+    opened: import_styled_components14.css`
          transform: translateY(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: import_styled_components13.css`
+    closed: import_styled_components14.css`
          transform: translateX(${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
       `
   },
   right: {
-    opened: import_styled_components13.css`
+    opened: import_styled_components14.css`
          transform: translateY(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: import_styled_components13.css`
+    closed: import_styled_components14.css`
          transform: translateX(-${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
       `
   }
 });
-var TooltipContainer = import_styled_components13.default.div.withConfig({
+var TooltipContainer = import_styled_components14.default.div.withConfig({
   shouldForwardProp: (prop) => !["theme", "position", "align", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
 })`
    position: absolute;