@embeddable.com/remarkable-ui 2.0.44 → 2.0.46

package/dist/index.d.ts

@@ -84,6 +84,11 @@ type KpiChartProps = {
     valueFormatter?: (value: number) => string;
 };
 
+declare const getKpiDisplayValue: ({ value, displayNullAs, valueFormatter, }: {
+    value: number | null | undefined;
+    displayNullAs: string | number;
+    valueFormatter?: (value: number) => string;
+}) => string | number;
 declare const KpiChart: FC<KpiChartProps>;
 
 type PieChartConfigurationProps = {
@@ -384,6 +389,7 @@ declare const SelectListOption: FC<SelectListOptionProps>;
 type MultiSelectFieldProps = {
     startIcon?: React.ComponentType<IconProps>;
     disabled?: boolean;
+    disableApplyButton?: boolean;
     isClearable?: boolean;
     isLoading?: boolean;
     isSearchable?: boolean;
@@ -394,6 +400,7 @@ type MultiSelectFieldProps = {
     values?: string[];
     avoidCollisions?: boolean;
     onChange: (value: string[]) => void;
+    onPendingChange?: (values: string[]) => void;
     onSearch?: (search: string) => void;
     error?: boolean;
     errorMessage?: string;
@@ -595,4 +602,4 @@ declare const endOfDayUTC: (date: Date) => Date;
 
 declare const shallowEqual: (object1: any, object2: any) => boolean;
 
-export { ActionIcon, BarChart, type BarChartProps, Button, ButtonIcon, Card, CardContent, CardFeedback, CardHeader, type CssSize, DateRangePicker, DateRangePickerField, type DateRangePickerProps, Divider, DonutChart, type DonutLabelChartProps, Dropdown, type DropdownProps, FieldFeedback, type FieldFeedbackProps, FieldHeader, type FieldHeaderProps, GhostButton, GhostButtonIcon, HeatMap, type HeatMapProps, type HeatMapPropsDimension, type HeatMapPropsMeasure, type HeatMapPropsThreshold, KpiChart, LineChart, type LineChartProps, Markdown, MarkdownEditor, 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, TableBody, TableBodyCellWithCopy, type TableBodyProps, TableHeader, TableHeaderAlign, type TableHeaderCell, type TableHeaderCellStyle, type TableHeaderItem, type TableHeaderItemAlign, type TableHeaderProps, TablePaginated, type TablePaginatedProps, TablePagination, type TablePaginationProps, TableScrollable, type TableScrollableHandle, type TableScrollableProps, type TableSort, TableSortDirection, TextField, Tooltip, Typography, chartjsAxisOptionsLayoutPadding, chartjsAxisOptionsLayoutPaddingLarge, endOfDayUTC, getBarChartData, getBarChartOptions, getChartColors, getChartjsAxisOptions, getChartjsAxisOptionsPlugins, getChartjsAxisOptionsScales, getChartjsAxisOptionsScalesGrid, getChartjsAxisOptionsScalesGridColor, getChartjsAxisOptionsScalesTicksDefault, getChartjsAxisOptionsScalesTicksMuted, getChartjsAxisOptionsScalesTitle, getDonutChartOptions, getLineChartData, getLineChartOptions, getPieChartData, getPieChartOptions, getStyle, getStyleNumber, getTableTotalPages, isSameDate, isSameDateRange, shallowEqual, useDebounce, useResizeObserver, useTableGetRowsPerPage };
+export { ActionIcon, BarChart, type BarChartProps, Button, ButtonIcon, Card, CardContent, CardFeedback, CardHeader, type CssSize, DateRangePicker, DateRangePickerField, type DateRangePickerProps, Divider, DonutChart, type DonutLabelChartProps, Dropdown, type DropdownProps, FieldFeedback, type FieldFeedbackProps, FieldHeader, type FieldHeaderProps, GhostButton, GhostButtonIcon, HeatMap, type HeatMapProps, type HeatMapPropsDimension, type HeatMapPropsMeasure, type HeatMapPropsThreshold, KpiChart, LineChart, type LineChartProps, Markdown, MarkdownEditor, 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, TableBody, TableBodyCellWithCopy, type TableBodyProps, TableHeader, TableHeaderAlign, type TableHeaderCell, type TableHeaderCellStyle, type TableHeaderItem, type TableHeaderItemAlign, type TableHeaderProps, TablePaginated, type TablePaginatedProps, TablePagination, type TablePaginationProps, TableScrollable, type TableScrollableHandle, type TableScrollableProps, type TableSort, TableSortDirection, TextField, Tooltip, Typography, chartjsAxisOptionsLayoutPadding, chartjsAxisOptionsLayoutPaddingLarge, endOfDayUTC, getBarChartData, getBarChartOptions, getChartColors, getChartjsAxisOptions, getChartjsAxisOptionsPlugins, getChartjsAxisOptionsScales, getChartjsAxisOptionsScalesGrid, getChartjsAxisOptionsScalesGridColor, getChartjsAxisOptionsScalesTicksDefault, getChartjsAxisOptionsScalesTicksMuted, getChartjsAxisOptionsScalesTitle, getDonutChartOptions, getKpiDisplayValue, getLineChartData, getLineChartOptions, getPieChartData, getPieChartOptions, getStyle, getStyleNumber, getTableTotalPages, isSameDate, isSameDateRange, shallowEqual, useDebounce, useResizeObserver, useTableGetRowsPerPage };

package/dist/index.js

@@ -683,6 +683,18 @@ var ConditionalWrapper_default = ConditionalWrapper;
 
 // src/components/charts/kpis/KpiChart.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var getKpiDisplayValue = ({
+  value,
+  displayNullAs,
+  valueFormatter
+}) => {
+  if (value == null) {
+    if (displayNullAs === "") return "";
+    const numericDisplayNullAs = Number(displayNullAs);
+    return Number.isNaN(numericDisplayNullAs) ? displayNullAs : valueFormatter?.(numericDisplayNullAs) ?? numericDisplayNullAs;
+  }
+  return valueFormatter?.(value) ?? value;
+};
 var KpiChart = ({
   value,
   valueFontSize,
@@ -698,7 +710,7 @@ var KpiChart = ({
   valueFormatter
 }) => {
   const hasComparisonValue = comparisonValue !== void 0;
-  const displayValue = value == null ? displayNullAs : valueFormatter?.(value) ?? value;
+  const displayValue = getKpiDisplayValue({ value, displayNullAs, valueFormatter });
   const autoResizeValueFontSize = !valueFontSize;
   return /* @__PURE__ */ jsxs2("div", { className: styles5.kpiChartContainer, children: [
     /* @__PURE__ */ jsx5("div", { className: styles5.kpiChartValueContainer, children: /* @__PURE__ */ jsx5(
@@ -2787,6 +2799,7 @@ var MultiSelectField = ({
   label,
   required,
   disabled,
+  disableApplyButton,
   isClearable,
   isLoading,
   isSearchable,
@@ -2797,6 +2810,7 @@ var MultiSelectField = ({
   values = [],
   avoidCollisions,
   onChange,
+  onPendingChange,
   onSearch,
   error = false,
   errorMessage
@@ -2809,6 +2823,7 @@ var MultiSelectField = ({
   useSelectSearchFocus(isOpen, searchFieldRef);
   useEffect8(() => {
     setPreValues(values);
+    onPendingChange?.(values);
   }, [JSON.stringify(values)]);
   useEffect8(() => {
     if (isLoading) {
@@ -2834,9 +2849,13 @@ var MultiSelectField = ({
     e.preventDefault();
     if (!newValue) return;
     if (preValues.includes(newValue)) {
-      setPreValues(preValues.filter((v) => v !== newValue));
+      const next = preValues.filter((v) => v !== newValue);
+      setPreValues(next);
+      onPendingChange?.(next);
     } else {
-      setPreValues([...preValues, newValue]);
+      const next = [...preValues, newValue];
+      setPreValues(next);
+      onPendingChange?.(next);
     }
   };
   const handleSearch = (newSearch) => {
@@ -2852,6 +2871,7 @@ var MultiSelectField = ({
   const handleClearAll = () => {
     setSearchValue("");
     onSearch?.("");
+    onPendingChange?.([]);
     onChange([]);
   };
   const hasError = error || !!errorMessage;
@@ -2920,7 +2940,7 @@ var MultiSelectField = ({
             Button,
             {
               className: styles23.submitButton,
-              disabled: isSubmitDisabled || isLoading,
+              disabled: isSubmitDisabled || isLoading || disableApplyButton,
               variant: "primary",
               size: "medium",
               onClick: () => handleSave(preValues),
@@ -3550,6 +3570,7 @@ export {
   getChartjsAxisOptionsScalesTicksMuted,
   getChartjsAxisOptionsScalesTitle,
   getDonutChartOptions,
+  getKpiDisplayValue,
   getLineChartData,
   getLineChartOptions,
   getPieChartData,