@embeddable.com/remarkable-ui 2.0.28 → 2.0.30

package/dist/index.d.ts

@@ -286,7 +286,6 @@ declare const getTableTotalPages: (total: number | undefined, pageSize: number)
 declare const TablePagination: FC<TablePaginationProps>;
 
 declare const getChartColors: () => string[];
-declare const getChartContrastColors: () => string[];
 
 declare const getChartjsAxisOptionsPlugins: () => Partial<ChartOptions["plugins"]>;
 declare const getChartjsAxisOptionsScalesTicksDefault: () => Partial<CartesianTickOptions>;
@@ -324,6 +323,7 @@ type DateRangePickerFieldProps = {
     clearable?: boolean;
     onChange: (dateRange: DateRange | undefined) => void;
     submitLabel?: string;
+    avoidCollisions?: boolean;
 } & FieldHeaderProps & DateRangePickerProps;
 declare const DateRangePickerField: FC<DateRangePickerFieldProps>;
 
@@ -357,9 +357,11 @@ declare const TextField: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTM
     errorMessage?: string;
 } & FieldHeaderProps & React$1.RefAttributes<HTMLInputElement>>;
 
+type SelectFieldValue = string | number | boolean | undefined;
+
 type SelectListOptionIcon = React.ReactElement<SVGProps<SVGSVGElement>> | React.ReactElement<ImgHTMLAttributes<HTMLImageElement>>;
 type SelectListOptionProps = {
-    value?: string;
+    value?: SelectFieldValue;
     isSelected?: boolean;
     label: string;
     rightLabel?: string;
@@ -383,8 +385,9 @@ type MultiSelectFieldProps = {
     options: (SelectListOptionProps | SelectListOptionPropsWithCategory)[];
     placeholder?: string;
     submitLabel?: string;
-    values?: string[];
-    onChange: (value: string[]) => void;
+    values?: SelectFieldValue[];
+    avoidCollisions?: boolean;
+    onChange: (value: SelectFieldValue[]) => void;
     onSearch?: (search: string) => void;
     error?: boolean;
     errorMessage?: string;
@@ -394,17 +397,18 @@ declare const MultiSelectField: FC<MultiSelectFieldProps>;
 type SingleSelectFieldProps = {
     options: (SelectListOptionProps | SelectListOptionPropsWithCategory)[];
     startIcon?: React.ComponentType<IconProps>;
-    value?: string;
+    value?: SelectFieldValue;
     disabled?: boolean;
     placeholder?: string;
     searchable?: boolean;
     clearable?: boolean;
     isLoading?: boolean;
     noOptionsMessage?: string;
-    onChange: (value: string) => void;
+    onChange: (value: SelectFieldValue) => void;
     onSearch?: (search: string) => void;
     error?: boolean;
     errorMessage?: string;
+    avoidCollisions?: boolean;
 } & FieldHeaderProps;
 declare const SingleSelectField: FC<SingleSelectFieldProps>;
 
@@ -505,6 +509,7 @@ type DropdownProps = {
     open?: boolean;
     side?: React.ComponentProps<typeof DropdownMenu.Content>['side'];
     align?: React.ComponentProps<typeof DropdownMenu.Content>['align'];
+    avoidCollisions?: boolean;
     onOpenChange?: (open: boolean) => void;
 };
 declare const Dropdown: FC<DropdownProps>;
@@ -549,4 +554,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, 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, 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, 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 };
+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, 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, Typography, chartjsAxisOptionsLayoutPadding, 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 };

package/dist/index.js

@@ -76,12 +76,6 @@ var getChartColors = () => [
   getStyle("--em-sem-chart-color--9"),
   getStyle("--em-sem-chart-color--10")
 ];
-var getChartContrastColors = () => [
-  getStyle("--em-sem-chart-color--1"),
-  getStyle("--em-sem-chart-color--2"),
-  getStyle("--em-sem-chart-color--3"),
-  getStyle("--em-sem-chart-color--5")
-];
 
 // src/components/charts/bars/bars.utils.ts
 import { mergician as mergician2 } from "mergician";
@@ -248,11 +242,11 @@ var getChartjsAxisOptionsScalesGridColor = (ctx) => {
 
 // src/components/charts/bars/bars.utils.ts
 var getBarChartData = (data) => {
-  const chartContrastColors = getChartContrastColors();
+  const chartColors = getChartColors();
   return {
     ...data,
     datasets: data.datasets?.map((dataset, index) => {
-      const colors = chartContrastColors[index % chartContrastColors.length];
+      const colors = chartColors[index % chartColors.length];
       const defaultDataset = {
         ...dataset,
         backgroundColor: colors,
@@ -491,11 +485,11 @@ import { mergician as mergician5 } from "mergician";
 // src/components/charts/lines/lines.utils.ts
 import { mergician as mergician4 } from "mergician";
 var getLineChartData = (data) => {
-  const chartContrastColors = getChartContrastColors();
+  const chartColors = getChartColors();
   const mergedData = {
     ...data,
     datasets: data.datasets?.map((dataset, index) => {
-      const colors = chartContrastColors[index % chartContrastColors.length];
+      const colors = chartColors[index % chartColors.length];
       const defaultDataset = {
         backgroundColor: colors,
         borderColor: colors
@@ -2150,11 +2144,21 @@ var Dropdown = ({
   open,
   side = "bottom",
   align = "start",
+  avoidCollisions = true,
   onOpenChange
 }) => {
-  return /* @__PURE__ */ jsxs11(DropdownMenu.Root, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs11(DropdownMenu.Root, { open, onOpenChange, modal: false, children: [
     /* @__PURE__ */ jsx19(DropdownMenu.Trigger, { asChild: true, disabled, children: triggerComponent }),
-    /* @__PURE__ */ jsx19(DropdownMenu.Content, { side, align, style: { zIndex: 5 }, children })
+    /* @__PURE__ */ jsx19(
+      DropdownMenu.Content,
+      {
+        side,
+        align,
+        style: { zIndex: 5 },
+        avoidCollisions,
+        children
+      }
+    )
   ] });
 };
 
@@ -2329,6 +2333,7 @@ var DateRangePickerField = ({
   clearable,
   numberOfMonths = 1,
   submitLabel = "Apply",
+  avoidCollisions,
   onChange
 }) => {
   const [isOpen, setIsOpen] = useState6(false);
@@ -2360,6 +2365,7 @@ var DateRangePickerField = ({
         open: isOpen,
         onOpenChange: handleOpenChange,
         disabled,
+        avoidCollisions,
         triggerComponent: /* @__PURE__ */ jsx24(
           SelectFieldTrigger,
           {
@@ -2634,6 +2640,7 @@ var MultiSelectField = ({
   placeholder,
   submitLabel = "Apply",
   values = [],
+  avoidCollisions,
   onChange,
   onSearch,
   error = false,
@@ -2670,7 +2677,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 == null) return;
     if (preValues.includes(newValue)) {
       setPreValues(preValues.filter((v) => v !== newValue));
     } else {
@@ -2701,6 +2708,7 @@ var MultiSelectField = ({
         open: isOpen,
         onOpenChange: setIsOpen,
         disabled,
+        avoidCollisions,
         triggerComponent: /* @__PURE__ */ jsx30(
           SelectFieldTrigger,
           {
@@ -2740,7 +2748,7 @@ var MultiSelectField = ({
                   startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx30(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx30(IconSquare, {}),
                   ...option
                 },
-                option?.value ?? option.label
+                option?.value ? option.value.toString() : option.label
               ))
             ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx30(
               SelectListOption,
@@ -2749,7 +2757,7 @@ var MultiSelectField = ({
                 startIcon: preValues.includes(option.value) ? /* @__PURE__ */ jsx30(IconSquareCheckFilled, {}) : /* @__PURE__ */ jsx30(IconSquare, {}),
                 ...option
               },
-              option?.value ?? option.label
+              option?.value ? option.value.toString() : option.label
             )),
             noOptionsMessage && displayOptions.length === 0 && /* @__PURE__ */ jsx30(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
           ] }),
@@ -2780,7 +2788,7 @@ import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 var SingleSelectField = ({
   label,
   required,
-  value = "",
+  value,
   startIcon,
   options,
   disabled,
@@ -2788,6 +2796,7 @@ var SingleSelectField = ({
   searchable,
   clearable,
   isLoading,
+  avoidCollisions,
   noOptionsMessage = "No options available",
   onChange,
   onSearch,
@@ -2796,17 +2805,19 @@ var SingleSelectField = ({
 }) => {
   const [isOpen, setIsOpen] = useState8(false);
   const [searchValue, setSearchValue] = useState8("");
-  const [selectedLabel, setSelectedLabel] = useState8(value);
+  const [selectedLabel, setSelectedLabel] = useState8(value?.toString() ?? "");
   const searchFieldRef = useRef11(null);
   useSelectSearchFocus(isOpen, searchFieldRef);
   useEffect9(() => {
-    if (!value) {
+    if (value == null) {
       setSelectedLabel("");
       return;
     }
-    const option = options.find((opt) => opt.value === value);
-    if (option) {
-      setSelectedLabel(option.label);
+    const selectedOption = options.find((opt) => opt.value === value);
+    if (selectedOption) {
+      setSelectedLabel(selectedOption.label);
+    } else {
+      setSelectedLabel("");
     }
   }, [value, options]);
   const debouncedSearch = useMemo5(() => onSearch ? debounce(onSearch) : void 0, [onSearch]);
@@ -2814,13 +2825,13 @@ var SingleSelectField = ({
   const groupedOptions = useMemo5(() => groupOptionsByCategory(displayOptions), [displayOptions]);
   const handleChange = (newValue) => {
     setSearchValue("");
-    onChange(newValue ?? "");
+    onChange(newValue);
     onSearch?.("");
-    if (newValue === "") {
-      setSelectedLabel("");
+    const selectedOption = options.find((opt) => opt.value === newValue);
+    if (selectedOption) {
+      setSelectedLabel(selectedOption.label);
     } else {
-      const option = options.find((opt) => opt.value === newValue);
-      if (option) setSelectedLabel(option.label);
+      setSelectedLabel("");
     }
   };
   const handleSearch = (newSearch) => {
@@ -2836,6 +2847,7 @@ var SingleSelectField = ({
         open: isOpen,
         onOpenChange: setIsOpen,
         disabled,
+        avoidCollisions,
         triggerComponent: /* @__PURE__ */ jsx31(
           SelectFieldTrigger,
           {
@@ -2844,7 +2856,7 @@ var SingleSelectField = ({
             placeholder,
             disabled,
             valueLabel: selectedLabel,
-            onClear: () => handleChange(""),
+            onClear: () => handleChange(void 0),
             isClearable: clearable,
             isLoading,
             error: hasError
@@ -2875,7 +2887,7 @@ var SingleSelectField = ({
                   isSelected: option.value === value,
                   ...option
                 },
-                option?.value ?? option.label
+                option?.value ? option.value.toString() : option.label
               ))
             ] }, category)) : displayOptions.map((option) => /* @__PURE__ */ jsx31(
               SelectListOption,
@@ -2884,7 +2896,7 @@ var SingleSelectField = ({
                 isSelected: option.value === value,
                 ...option
               },
-              option?.value ?? option.label
+              option?.value ? option.value.toString() : option.label
             )),
             options.length === 0 && /* @__PURE__ */ jsx31(SelectListOption, { disabled: true, value: "empty", label: noOptionsMessage })
           ] })
@@ -3121,7 +3133,6 @@ export {
   getBarChartData,
   getBarChartOptions,
   getChartColors,
-  getChartContrastColors,
   getChartjsAxisOptions,
   getChartjsAxisOptionsPlugins,
   getChartjsAxisOptionsScales,