@embeddable.com/remarkable-ui 2.0.16 → 2.0.18

package/dist/{DateRangePicker-E7WV7TPK.css → DateRangePicker-PLOUUN7Q.css}

@@ -203,6 +203,14 @@
   align-items: center;
   gap: var(--rdp-dropdown-gap);
 }
+
+.rdp-dropdowns span {
+  color: var(--em-daterangepicker-label-color, #212129);
+  font-family: var(--em-daterangepicker-label-font-family, sans-serif);
+  font-size: var(--em-daterangepicker-label-font-size, 0.875rem);
+  font-weight: var(--em-daterangepicker-label-font-weight, 500);
+}
+
 .rdp-dropdown {
   z-index: 2;
 

package/dist/{DateRangePickerChevron.module-DWIFI5J2.module.css → DateRangePickerChevron.module-XDPDMPIS.module.css}

@@ -24,3 +24,15 @@
 .chevron:active {
   background: var(--em-daterangepicker-chevron--active, #ededf1);
 }
+
+.chevron.small {
+  background: unset;
+  width: calc(var(--em-daterangepicker-chevron-size, 2rem) / 2);
+  height: calc(var(--em-daterangepicker-chevron-size, 2rem) / 2);
+  padding: calc(var(--em-daterangepicker-chevron-padding, 0.5rem) / 2);
+}
+
+.chevron.small svg {
+  width: calc(var(--em-daterangepicker-chevron-icon-size, 1rem) / 2);
+  height: calc(var(--em-daterangepicker-chevron-icon-size, 1rem) / 2);
+}

package/dist/index.d.ts

@@ -472,11 +472,13 @@ type UseTableGetRowsPerPageProps = {
 };
 declare const useTableGetRowsPerPage: ({ availableHeight, headerHeight, rowHeight, footerHeight, }: UseTableGetRowsPerPageProps) => number;
 
-declare const getTableTotalPages: (total: number | undefined, pageSize: number) => number | undefined;
-
 declare const getChartColors: () => string[];
 declare const getChartContrastColors: () => string[];
 
+type TablePaginationProps = Pick<TablePaginatedProps<unknown>, 'page' | 'pageSize' | 'paginationLabel' | 'total' | 'onPageChange'>;
+declare const getTableTotalPages: (total: number | undefined, pageSize: number) => number | undefined;
+declare const TablePagination: FC<TablePaginationProps>;
+
 declare const getChartjsAxisOptionsPlugins: () => Partial<ChartOptions["plugins"]>;
 declare const getChartjsAxisOptionsScalesTicksDefault: () => Partial<CartesianTickOptions>;
 declare const getChartjsAxisOptionsScalesTicksMuted: () => Partial<CartesianTickOptions>;
@@ -494,6 +496,8 @@ declare const isSameDate: (a?: Date, b?: Date) => boolean;
 declare const isSameDateRange: (a?: DateRange, b?: DateRange) => boolean;
 declare const endOfDayUTC: (date: Date) => Date;
 
+declare const shallowEqual: (object1: any, object2: any) => boolean;
+
 declare function useDebounce<T extends (...args: any[]) => void>(fn: T, delay?: number): (...args: Parameters<T>) => void;
 
 type Size = {
@@ -502,4 +506,4 @@ type Size = {
 };
 declare const useResizeObserver: <T extends HTMLElement>(elRef: React.RefObject<T | null>, timeout?: number) => Size;
 
-export { ActionIcon, BarChart, type BarChartProps, Button, ButtonIcon, Card, CardContent, CardFeedback, CardHeader, type CssSize, DateRangePicker, DateRangePickerField, type DateRangePickerProps, DonutChart, type DonutLabelChartProps, Dropdown, type DropdownProps, FieldFeedback, type FieldFeedbackProps, FieldHeader, type FieldHeaderProps, GhostButton, HeatMap, type HeatMapProps, type HeatMapPropsDimension, type HeatMapPropsMeasure, type HeatMapPropsThreshold, KpiChart, LineChart, type LineChartProps, MultiSelectField, type MultiSelectFieldProps, NumberField, Overlay, PieChart, type PieChartProps, PivotTable, type PivotTableProps, type PivotTablePropsColumnDimension, type PivotTablePropsMeasure, type PivotTablePropsRowDimension, SelectFieldCategory, SelectFieldContent, SelectFieldContentList, SelectFieldTrigger, SelectListOption, type SelectListOptionProps, type SelectListOptionPropsWithCategory, SingleSelectField, type SingleSelectFieldProps, Skeleton, StylesKeys, Switch, TableHeaderAlign, type TableHeaderCell, type TableHeaderItem, type TableHeaderItemAlign, TablePaginated, type TablePaginatedProps, type TableSort, TableSortDirection, TextField, Typography, chartjsAxisOptionsLayoutPadding, endOfDayUTC, getBarChartData, getBarChartOptions, getChartColors, getChartContrastColors, getChartjsAxisOptions, getChartjsAxisOptionsPlugins, getChartjsAxisOptionsScales, getChartjsAxisOptionsScalesGrid, getChartjsAxisOptionsScalesGridColor, getChartjsAxisOptionsScalesTicksDefault, getChartjsAxisOptionsScalesTicksMuted, getChartjsAxisOptionsScalesTitle, getDonutChartOptions, getLineChartData, getLineChartOptions, getPieChartData, getPieChartOptions, getStyle, getStyleNumber, getTableTotalPages, isSameDate, isSameDateRange, useDebounce, useResizeObserver, useTableGetRowsPerPage };
+export { ActionIcon, BarChart, type BarChartProps, Button, ButtonIcon, Card, CardContent, CardFeedback, CardHeader, type CssSize, DateRangePicker, DateRangePickerField, type DateRangePickerProps, DonutChart, type DonutLabelChartProps, Dropdown, type DropdownProps, FieldFeedback, type FieldFeedbackProps, FieldHeader, type FieldHeaderProps, GhostButton, HeatMap, type HeatMapProps, type HeatMapPropsDimension, type HeatMapPropsMeasure, type HeatMapPropsThreshold, KpiChart, LineChart, type LineChartProps, MultiSelectField, type MultiSelectFieldProps, NumberField, Overlay, PieChart, type PieChartProps, PivotTable, type PivotTableProps, type PivotTablePropsColumnDimension, type PivotTablePropsMeasure, type PivotTablePropsRowDimension, SelectFieldCategory, SelectFieldContent, SelectFieldContentList, SelectFieldTrigger, SelectListOption, type SelectListOptionProps, type SelectListOptionPropsWithCategory, SingleSelectField, type SingleSelectFieldProps, Skeleton, StylesKeys, Switch, TableHeaderAlign, type TableHeaderCell, type TableHeaderItem, type TableHeaderItemAlign, TablePaginated, type TablePaginatedProps, TablePagination, type TablePaginationProps, type TableSort, TableSortDirection, TextField, Typography, chartjsAxisOptionsLayoutPadding, endOfDayUTC, getBarChartData, getBarChartOptions, getChartColors, getChartContrastColors, getChartjsAxisOptions, getChartjsAxisOptionsPlugins, getChartjsAxisOptionsScales, getChartjsAxisOptionsScalesGrid, getChartjsAxisOptionsScalesGridColor, getChartjsAxisOptionsScalesTicksDefault, getChartjsAxisOptionsScalesTicksMuted, getChartjsAxisOptionsScalesTitle, getDonutChartOptions, getLineChartData, getLineChartOptions, getPieChartData, getPieChartOptions, getStyle, getStyleNumber, getTableTotalPages, isSameDate, isSameDateRange, shallowEqual, useDebounce, useResizeObserver, useTableGetRowsPerPage };

package/dist/index.js

@@ -860,20 +860,24 @@ NumberField.displayName = "NumberField";
 // src/components/editors/dates/DateRangePicker/DateRangePicker.tsx
 import { useState as useState3 } from "react";
 import { DayPicker } from "react-day-picker";
-import "./DateRangePicker-E7WV7TPK.css";
+import "./DateRangePicker-PLOUUN7Q.css";
 
 // src/components/editors/dates/DateRangePicker/DateRangePickerChevron.tsx
 import { IconCaretDownFilled as IconCaretDownFilled2 } from "@tabler/icons-react";
-import styles21 from "./DateRangePickerChevron.module-DWIFI5J2.module.css";
+import styles21 from "./DateRangePickerChevron.module-XDPDMPIS.module.css";
+import clsx16 from "clsx";
 import { jsx as jsx23 } from "react/jsx-runtime";
+var SMALL_SIZE = 18;
 var DateRangePickerChevron = ({
-  orientation
+  orientation,
+  size
 }) => {
   const rotation = orientation === "left" ? "rotate(90deg)" : orientation === "right" ? "rotate(-90deg)" : void 0;
+  const isSmallChevron = size === SMALL_SIZE;
   return /* @__PURE__ */ jsx23(
     "button",
     {
-      className: styles21.chevron,
+      className: clsx16(styles21.chevron, isSmallChevron && styles21.small),
       style: {
         transform: rotation
       },
@@ -907,6 +911,8 @@ var DateRangePicker = ({
     }
     onChange(range);
   };
+  const now = /* @__PURE__ */ new Date();
+  const endMonth = new Date(now.getFullYear() + 2, now.getMonth());
   return /* @__PURE__ */ jsx24(
     DayPicker,
     {
@@ -920,7 +926,10 @@ var DateRangePicker = ({
       onSelect: handleChange,
       selected: value,
       timeZone: "UTC",
-      showOutsideDays: true
+      showOutsideDays: true,
+      captionLayout: "dropdown-years",
+      endMonth,
+      animate: true
     }
   );
 };
@@ -930,8 +939,8 @@ import { useState as useState4 } from "react";
 import styles22 from "./DateRangePickerField.module-CURG3KIS.module.css";
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var getDateRangePickerLabel = (dateRange, displayValue) => {
-  if (dateRange === void 0) return void 0;
-  if (displayValue) return displayValue;
+  if (!dateRange) return void 0;
+  if (displayValue || displayValue === "") return displayValue;
   const { from, to } = dateRange;
   if (!from || !to) return void 0;
   return `${from ? from.toLocaleDateString() : ""} - ${to ? to.toLocaleDateString() : ""}`;
@@ -1635,7 +1644,7 @@ import styles26 from "./KpiChart.module-2LUIN66C.module.css";
 
 // src/components/charts/kpis/components/KpiChartChange.tsx
 import styles25 from "./KpiChartChange.module-BAW7YCOW.module.css";
-import clsx16 from "clsx";
+import clsx17 from "clsx";
 import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
 import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var getChangeClass = (isPositive, invertChangeColors) => {
@@ -1667,11 +1676,11 @@ var KpiChartChange = ({
   const Icon = isPositive ? IconTrendingUp : IconTrendingDown;
   const showNoPreviousData = showChangeAsPercentage && Number(comparisonValue) === 0;
   return /* @__PURE__ */ jsxs15("div", { className: styles25.kpiChangeContainerSizeGuide, children: [
-    /* @__PURE__ */ jsxs15("div", { className: clsx16(styles25.kpiChartChangeContainer, styles25.hidden), children: [
+    /* @__PURE__ */ jsxs15("div", { className: clsx17(styles25.kpiChartChangeContainer, styles25.hidden), children: [
       /* @__PURE__ */ jsxs15(
         "span",
         {
-          className: clsx16(styles25.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
+          className: clsx17(styles25.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
           children: [
             /* @__PURE__ */ jsx28(Icon, {}),
             /* @__PURE__ */ jsx28("span", { children: displayValue })
@@ -1684,7 +1693,7 @@ var KpiChartChange = ({
       !equalComparison && /* @__PURE__ */ jsxs15(
         "span",
         {
-          className: clsx16(
+          className: clsx17(
             styles25.kpiChangeBadge,
             getChangeClass(isPositive, invertChangeColors)
           ),
@@ -1958,7 +1967,7 @@ var PieChart = ({
 // src/components/charts/tables/Table/TablePaginated.tsx
 import * as React3 from "react";
 import styles32 from "./tables.module-GNDYDW3Z.module.css";
-import clsx19 from "clsx";
+import clsx20 from "clsx";
 
 // src/components/charts/tables/Table/components/TablePagination/TablePagination.tsx
 import {
@@ -2056,7 +2065,7 @@ var TableHeaderAlign = {
 
 // src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
 import tableStyles from "./tables.module-GNDYDW3Z.module.css";
-import clsx17 from "clsx";
+import clsx18 from "clsx";
 import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var getHeaderAriaSort = (sort, header) => {
   return sort?.id === header.id ? sort.direction === "asc" ? "ascending" : "descending" : "none";
@@ -2098,7 +2107,7 @@ var TableHeader = ({
     }
   };
   return /* @__PURE__ */ jsx34("thead", { className: styles30.tableHeader, children: /* @__PURE__ */ jsxs18("tr", { children: [
-    showIndex && /* @__PURE__ */ jsx34("th", { className: clsx17(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
+    showIndex && /* @__PURE__ */ jsx34("th", { className: clsx18(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
     headers.map((header) => /* @__PURE__ */ jsx34(
       "th",
       {
@@ -2125,7 +2134,7 @@ var TableHeader = ({
 
 // src/components/charts/tables/Table/components/TableBody/TableBody.tsx
 import styles31 from "./TableBody.module-ARNVVKDL.module.css";
-import clsx18 from "clsx";
+import clsx19 from "clsx";
 import { IconCopy, IconCopyCheckFilled } from "@tabler/icons-react";
 import { useState as useState6 } from "react";
 import tableStyles2 from "./tables.module-GNDYDW3Z.module.css";
@@ -2142,9 +2151,9 @@ var TableBody = ({
     "tr",
     {
       onClick: () => onRowIndexClick?.(rowIndex),
-      className: clsx18(rowIndex === rows.length - 1 && tableStyles2.tableLastRow),
+      className: clsx19(rowIndex === rows.length - 1 && tableStyles2.tableLastRow),
       children: [
-        showIndex && /* @__PURE__ */ jsx35("td", { className: clsx18(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
+        showIndex && /* @__PURE__ */ jsx35("td", { className: clsx19(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
         headers.map((header, cellIndex) => /* @__PURE__ */ jsx35(
           TableBodyCell,
           {
@@ -2188,7 +2197,7 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
             title: `Copy: ${String(value)}`,
             onMouseDown: handleCopy,
             icon: isPressedCopy ? IconCopyCheckFilled : IconCopy,
-            className: clsx18(
+            className: clsx19(
               styles31.copyButton,
               header.align === TableHeaderAlign.RIGHT && styles31.leftAlign
             ),
@@ -2221,7 +2230,7 @@ var TablePaginated = React3.forwardRef(
       onPageChange,
       onSortChange
     } = props;
-    return /* @__PURE__ */ jsxs20("div", { ref, className: clsx19(styles32.tableContainer, className), children: [
+    return /* @__PURE__ */ jsxs20("div", { ref, className: clsx20(styles32.tableContainer, className), children: [
       /* @__PURE__ */ jsx36("div", { className: styles32.tableContainerScroll, children: /* @__PURE__ */ jsxs20("table", { className: styles32.table, children: [
         /* @__PURE__ */ jsx36(
           TableHeader,
@@ -2262,7 +2271,7 @@ TablePaginated.displayName = "TablePaginated";
 // src/components/charts/tables/PivotTable/PivotTable.tsx
 import { useEffect as useEffect6, useMemo as useMemo3, useState as useState7 } from "react";
 import tableStyles3 from "./tables.module-GNDYDW3Z.module.css";
-import clsx20 from "clsx";
+import clsx21 from "clsx";
 
 // src/components/charts/tables/tables.utils.ts
 var getTableCellWidthStyle = (width) => {
@@ -2393,10 +2402,10 @@ var PivotTable = ({
     };
   }, [progressive, batchSize, batchDelayMs, rowValues.length, data]);
   const visibleRows = progressive ? rowValues.slice(0, visibleCount) : rowValues;
-  return /* @__PURE__ */ jsx37("div", { className: clsx20(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx37("div", { className: clsx21(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx37(
     "div",
     {
-      className: clsx20(
+      className: clsx21(
         tableStyles3.tableAdjustedContainer,
         (!columnWidth || !firstColumnWidth) && tableStyles3.fullWidth
       ),
@@ -2538,7 +2547,7 @@ var PivotTable = ({
                   "th",
                   {
                     scope: "row",
-                    className: clsx20(tableStyles3.stickyFirstColumn, tableStyles3.boltCell),
+                    className: clsx21(tableStyles3.stickyFirstColumn, tableStyles3.boltCell),
                     title: totalLabel,
                     children: totalLabel
                   }
@@ -2590,7 +2599,7 @@ var PivotTable = ({
 // src/components/charts/tables/HeatMap/HeatMap.tsx
 import { useMemo as useMemo4, useCallback } from "react";
 import tableStyles4 from "./tables.module-GNDYDW3Z.module.css";
-import clsx21 from "clsx";
+import clsx22 from "clsx";
 
 // src/components/charts/tables/HeatMap/HeatMap.utils.ts
 var clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
@@ -2812,10 +2821,10 @@ var HeatMap = ({
     },
     [domainMin, domainMax, rawMin, rawMax, minColor, midColor, maxColor]
   );
-  return /* @__PURE__ */ jsx38("div", { className: clsx21(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx38("div", { className: clsx22(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx38(
     "div",
     {
-      className: clsx21(
+      className: clsx22(
         tableStyles4.tableAdjustedContainer,
         (!columnWidth || !firstColumnWidth) && tableStyles4.fullWidth
       ),
@@ -2881,6 +2890,21 @@ var useTableGetRowsPerPage = ({
   return Math.max(0, rows);
 }, [availableHeight, headerHeight, rowHeight, footerHeight]);
 
+// src/utils/object.utils.ts
+var shallowEqual = (object1, object2) => {
+  const keys1 = Object.keys(object1 ?? {});
+  const keys2 = Object.keys(object2 ?? {});
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    if (object1[key]?.toString() !== object2[key]?.toString()) {
+      return false;
+    }
+  }
+  return true;
+};
+
 // src/hooks/useDebounce.hook.ts
 import { useRef as useRef9, useEffect as useEffect7, useCallback as useCallback2 } from "react";
 function useDebounce(fn, delay = 300) {
@@ -2941,6 +2965,7 @@ export {
   Switch,
   TableHeaderAlign,
   TablePaginated,
+  TablePagination,
   TableSortDirection,
   TextField,
   Typography,
@@ -2968,6 +2993,7 @@ export {
   getTableTotalPages,
   isSameDate,
   isSameDateRange,
+  shallowEqual,
   styles,
   useDebounce,
   useResizeObserver,