@embeddable.com/remarkable-ui 2.0.45 → 3.0.0

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 = {
@@ -366,8 +371,8 @@ declare const TextField: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTM
 } & FieldHeaderProps & React$1.RefAttributes<HTMLInputElement>>;
 
 type SelectListOptionIcon = React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<ImgHTMLAttributes<HTMLImageElement>>;
-type SelectListOptionProps = {
-    value?: string;
+type SelectListOptionProps<T = string> = {
+    value?: T;
     isSelected?: boolean;
     label: string;
     rightLabel?: string;
@@ -376,31 +381,10 @@ type SelectListOptionProps = {
     disabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 };
-type SelectListOptionPropsWithCategory = SelectListOptionProps & {
+type SelectListOptionPropsWithCategory<T = string> = SelectListOptionProps<T> & {
     category: string;
 };
-declare const SelectListOption: FC<SelectListOptionProps>;
-
-type MultiSelectFieldProps = {
-    startIcon?: React.ComponentType<IconProps>;
-    disabled?: boolean;
-    disableApplyButton?: boolean;
-    isClearable?: boolean;
-    isLoading?: boolean;
-    isSearchable?: boolean;
-    noOptionsMessage?: string;
-    options: (SelectListOptionProps | SelectListOptionPropsWithCategory)[];
-    placeholder?: string;
-    submitLabel?: string;
-    values?: string[];
-    avoidCollisions?: boolean;
-    onChange: (value: string[]) => void;
-    onPendingChange?: (values: string[]) => void;
-    onSearch?: (search: string) => void;
-    error?: boolean;
-    errorMessage?: string;
-} & FieldHeaderProps;
-declare const MultiSelectField: FC<MultiSelectFieldProps>;
+declare const SelectListOption: <T>({ value, isSelected, label, rightLabel, startIcon, endIcon, disabled, ...props }: SelectListOptionProps<T>) => react_jsx_runtime.JSX.Element;
 
 type DropdownProps = {
     triggerComponent: React.ReactNode;
@@ -414,24 +398,48 @@ type DropdownProps = {
 };
 declare const Dropdown: FC<DropdownProps>;
 
-type SingleSelectFieldProps = {
-    options: (SelectListOptionProps | SelectListOptionPropsWithCategory)[];
+type SelectOptionValue = string | number | boolean;
+type SingleSelectFieldProps<T extends SelectOptionValue> = {
+    options: SelectListOptionProps<T>[];
     startIcon?: React.ComponentType<IconProps>;
-    value?: string;
+    value?: T | null;
     disabled?: boolean;
     placeholder?: string;
     searchable?: boolean;
     clearable?: boolean;
     isLoading?: boolean;
     noOptionsMessage?: string;
-    onChange: (value: string) => void;
+    onChange: (value: T | null) => void;
     onSearch?: (search: string) => void;
     error?: boolean;
     errorMessage?: string;
     avoidCollisions?: boolean;
     variant?: 'default' | 'ghost';
+    triggerComponent?: React.ReactNode;
 } & FieldHeaderProps & Pick<DropdownProps, 'side' | 'align'>;
-declare const SingleSelectField: FC<SingleSelectFieldProps>;
+declare function SingleSelectField<T extends SelectOptionValue>({ label, required, value, startIcon, options, disabled, placeholder, searchable, clearable, isLoading, avoidCollisions, noOptionsMessage, onChange, onSearch, error, errorMessage, side, align, variant, triggerComponent, }: SingleSelectFieldProps<T>): react_jsx_runtime.JSX.Element;
+
+type MultiSelectFieldProps<T extends SelectOptionValue> = {
+    startIcon?: React.ComponentType<IconProps>;
+    disabled?: boolean;
+    disableApplyButton?: boolean;
+    isClearable?: boolean;
+    isLoading?: boolean;
+    isSearchable?: boolean;
+    noOptionsMessage?: string;
+    options: (SelectListOptionProps<T> | SelectListOptionPropsWithCategory<T>)[];
+    placeholder?: string;
+    submitLabel?: string;
+    values?: T[];
+    avoidCollisions?: boolean;
+    onChange: (value: T[]) => void;
+    onPendingChange?: (values: T[]) => void;
+    onSearch?: (search: string) => void;
+    error?: boolean;
+    errorMessage?: string;
+    triggerComponent?: React.ReactNode;
+} & FieldHeaderProps;
+declare function MultiSelectField<T extends SelectOptionValue>({ startIcon, label, required, disabled, disableApplyButton, isClearable, isLoading, isSearchable, noOptionsMessage, options, placeholder, submitLabel, values, avoidCollisions, onChange, onPendingChange, onSearch, error, errorMessage, triggerComponent, }: MultiSelectFieldProps<T>): react_jsx_runtime.JSX.Element;
 
 type SelectFieldContentProps = {
     children: ReactNode;
@@ -597,4 +605,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, type SelectOptionValue, 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(
@@ -2715,7 +2727,7 @@ var SelectListOption = ({
         disabled && styles21.disabled,
         isSelected && styles21.selected
       ),
-      "data-value": value,
+      "data-value": String(value),
       ...props,
       children: [
         /* @__PURE__ */ jsxs18("span", { className: styles21.leftContent, children: [
@@ -2734,7 +2746,7 @@ var SelectListOption = ({
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.utils.ts
 var groupOptionsByCategory = (options) => {
   const result = options.reduce((acc, option) => {
-    if ("category" in option && option.category) {
+    if (option.category) {
       const category = option.category;
       if (!acc[category]) {
         acc[category] = [];
@@ -2782,7 +2794,7 @@ function debounce(fn, delay = 300) {
 
 // src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
 import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
-var MultiSelectField = ({
+function MultiSelectField({
   startIcon,
   label,
   required,
@@ -2801,8 +2813,9 @@ var MultiSelectField = ({
   onPendingChange,
   onSearch,
   error = false,
-  errorMessage
-}) => {
+  errorMessage,
+  triggerComponent
+}) {
   const [isOpen, setIsOpen] = useState8(false);
   const [searchValue, setSearchValue] = useState8("");
   const [preValues, setPreValues] = useState8(values);
@@ -2835,7 +2848,7 @@ var MultiSelectField = ({
   const isSubmitDisabled = preValues.every((preValue) => values.includes(preValue)) && values.every((value) => preValues.includes(value));
   const handleSelectOption = (e, newValue) => {
     e.preventDefault();
-    if (!newValue) return;
+    if (newValue === void 0) return;
     if (preValues.includes(newValue)) {
       const next = preValues.filter((v) => v !== newValue);
       setPreValues(next);
@@ -2862,6 +2875,19 @@ var MultiSelectField = ({
     onPendingChange?.([]);
     onChange([]);
   };
+  const renderOption = (option) => {
+    const { value: optionValue, category: _category, ...optionRest } = option;
+    return /* @__PURE__ */ jsx31(
+      SelectListOption,
+      {
+        value: optionValue,
+        onClick: (e) => handleSelectOption(e, optionValue),
+        startIcon: optionValue !== void 0 && preValues.includes(optionValue) ? /* @__PURE__ */ jsx31(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx31(IconSquare, {}),
+        ...optionRest
+      },
+      String(optionValue)
+    );
+  };
   const hasError = error || !!errorMessage;
   return /* @__PURE__ */ jsxs19("div", { children: [
     /* @__PURE__ */ jsx31(FieldHeader, { label, required }),
@@ -2872,7 +2898,7 @@ var MultiSelectField = ({
         onOpenChange: setIsOpen,
         disabled,
         avoidCollisions,
-        triggerComponent: /* @__PURE__ */ jsx31(
+        triggerComponent: triggerComponent ?? /* @__PURE__ */ jsx31(
           SelectFieldTrigger,
           {
             startIcon,
@@ -2904,24 +2930,8 @@ var MultiSelectField = ({
           /* @__PURE__ */ jsxs19(SelectFieldContentList, { disabled: isLoading, children: [
             groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs19(Fragment6, { children: [
               /* @__PURE__ */ jsx31(SelectFieldCategory, { label: category }),
-              categoryOptions.map((option) => /* @__PURE__ */ jsx31(
-                SelectListOption,
-                {
-                  onClick: (e) => handleSelectOption(e, option.value),
-                  startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx31(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx31(IconSquare, {}),
-                  ...option
-                },
-                option?.value ?? option.label
-              ))
-            ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx31(
-              SelectListOption,
-              {
-                onClick: (e) => handleSelectOption(e, option.value),
-                startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx31(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx31(IconSquare, {}),
-                ...option
-              },
-              option?.value ?? option.label
-            )),
+              categoryOptions.map(renderOption)
+            ] }, category)) : displayOptions.map(renderOption),
             noOptionsMessage && displayOptions.length === 0 && /* @__PURE__ */ jsx31(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
           ] }),
           /* @__PURE__ */ jsx31(
@@ -2941,17 +2951,17 @@ var MultiSelectField = ({
     ),
     errorMessage && /* @__PURE__ */ jsx31(FieldFeedback, { message: errorMessage, variant: "error" })
   ] });
-};
+}
 
 // src/components/editors/selects/SingleSelectField/SingleSelectField.tsx
 import { Fragment as Fragment7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef11, useState as useState9 } from "react";
 import { IconSearch as IconSearch2 } from "@tabler/icons-react";
 import styles24 from "./selects.module-MRJADSDF.module.css";
 import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
-var SingleSelectField = ({
+function SingleSelectField({
   label,
   required,
-  value = "",
+  value = null,
   startIcon,
   options,
   disabled,
@@ -2967,15 +2977,16 @@ var SingleSelectField = ({
   errorMessage,
   side,
   align,
-  variant
-}) => {
+  variant,
+  triggerComponent
+}) {
   const [isOpen, setIsOpen] = useState9(false);
   const [searchValue, setSearchValue] = useState9("");
-  const [selectedLabel, setSelectedLabel] = useState9(value);
+  const [selectedLabel, setSelectedLabel] = useState9("");
   const searchFieldRef = useRef11(null);
   useSelectSearchFocus(isOpen, searchFieldRef);
   useEffect9(() => {
-    if (!value) {
+    if (value === null) {
       setSelectedLabel("");
       return;
     }
@@ -2989,9 +3000,9 @@ var SingleSelectField = ({
   const groupedOptions = useMemo6(() => groupOptionsByCategory(displayOptions), [displayOptions]);
   const handleChange = (newValue) => {
     setSearchValue("");
-    onChange(newValue ?? "");
+    onChange(newValue);
     onSearch?.("");
-    if (newValue === "") {
+    if (newValue === null) {
       setSelectedLabel("");
     } else {
       const option = options.find((opt) => opt.value === newValue);
@@ -3002,6 +3013,19 @@ var SingleSelectField = ({
     setSearchValue(newSearch);
     debouncedSearch?.(newSearch);
   };
+  const renderOption = (option) => {
+    const { value: optionValue, category: _category, ...optionRest } = option;
+    return /* @__PURE__ */ jsx32(
+      SelectListOption,
+      {
+        value: optionValue,
+        onClick: () => handleChange(optionValue ?? null),
+        isSelected: optionValue === value,
+        ...optionRest
+      },
+      String(optionValue)
+    );
+  };
   const hasError = error || !!errorMessage;
   return /* @__PURE__ */ jsxs20("div", { children: [
     /* @__PURE__ */ jsx32(FieldHeader, { label, required }),
@@ -3014,7 +3038,7 @@ var SingleSelectField = ({
         avoidCollisions,
         side,
         align,
-        triggerComponent: /* @__PURE__ */ jsx32(
+        triggerComponent: triggerComponent ?? /* @__PURE__ */ jsx32(
           SelectFieldTrigger,
           {
             startIcon,
@@ -3022,7 +3046,7 @@ var SingleSelectField = ({
             placeholder,
             disabled,
             valueLabel: selectedLabel,
-            onClear: () => handleChange(""),
+            onClear: () => handleChange(null),
             isClearable: clearable,
             isLoading,
             error: hasError,
@@ -3047,32 +3071,16 @@ var SingleSelectField = ({
           /* @__PURE__ */ jsxs20(SelectFieldContentList, { disabled: isLoading, children: [
             groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
               /* @__PURE__ */ jsx32(SelectFieldCategory, { label: category }),
-              categoryOptions.map((option) => /* @__PURE__ */ jsx32(
-                SelectListOption,
-                {
-                  onClick: () => handleChange(option?.value),
-                  isSelected: option.value === value,
-                  ...option
-                },
-                option?.value ?? option.label
-              ))
-            ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx32(
-              SelectListOption,
-              {
-                onClick: () => handleChange(option?.value),
-                isSelected: option.value === value,
-                ...option
-              },
-              option?.value ?? option.label
-            )),
-            options.length === 0 && /* @__PURE__ */ jsx32(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
+              categoryOptions.map(renderOption)
+            ] }, category)) : displayOptions.map(renderOption),
+            noOptionsMessage && displayOptions.length === 0 && /* @__PURE__ */ jsx32(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
           ] })
         ] })
       }
     ),
     errorMessage && /* @__PURE__ */ jsx32(FieldFeedback, { message: errorMessage, variant: "error" })
   ] });
-};
+}
 
 // src/components/editors/Switch/Switch.tsx
 import clsx18 from "clsx";
@@ -3558,6 +3566,7 @@ export {
   getChartjsAxisOptionsScalesTicksMuted,
   getChartjsAxisOptionsScalesTitle,
   getDonutChartOptions,
+  getKpiDisplayValue,
   getLineChartData,
   getLineChartOptions,
   getPieChartData,