remoraid 3.1.1 → 3.3.2

package/README.md

@@ -1,11 +1,15 @@
 # Usage
 
 Import Mantine and Remoraid styles once at the root of your application.
-`@mantine/dates/styles.css` is required when using `remoraid/jsonforms`.
+Some subpackages require additional Mantine stylesheets:
+
+- `@mantine/dates/styles.css` when using `remoraid/jsonforms`
+- `@mantine/charts/styles.css` when using `remoraid/data-visualization`
 
 ```typescript
 import "@mantine/core/styles.css";
 import "@mantine/dates/styles.css";
+import "@mantine/charts/styles.css";
 import "remoraid/core/styles.css";
 ```
 

package/dist/core/index.cjs

@@ -5967,6 +5967,18 @@ var createRemoraidTheme = (customTheme, dependencies) => {
         ["medium" /* Medium */]: { size: 24, stroke: 1.7 },
         ["large" /* Large */]: { size: 28, stroke: 1.7 },
         ["huge" /* Huge */]: { size: 44, stroke: 1.7 }
+      },
+      Scroller: {
+        edgeGradientColor: "transparent",
+        className: "remoraid-masked-scroller",
+        startControlIcon: /* @__PURE__ */ jsx_runtime3.jsx(import_icons_react.IconArrowLeft, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        }),
+        endControlIcon: /* @__PURE__ */ jsx_runtime3.jsx(import_icons_react.IconArrowRight, {
+          size: "var(--remoraid-icon-size-extraSmall)",
+          stroke: "var(--remoraid-icon-stroke-extraSmall)"
+        })
       }
     }
   };
@@ -5978,7 +5990,8 @@ var getCssVars = (theme) => {
     transitionDurations,
     primaryGutter,
     containerSize,
-    transparentBackground
+    transparentBackground,
+    componentsProps: { icons }
   } = theme;
   return {
     "--mantine-color-body": bodyColor,
@@ -5990,6 +6003,11 @@ var getCssVars = (theme) => {
     ...Object.entries(transitionDurations).reduce((t, [key, value]) => ({
       ...t,
       [`--remoraid-transition-duration-${key}`]: `${value}ms`
+    }), {}),
+    ...Object.entries(icons).reduce((t, [key, { size, stroke }]) => ({
+      ...t,
+      [`--remoraid-icon-size-${key}`]: typeof size === "number" ? `${size}px` : size,
+      [`--remoraid-icon-stroke-${key}`]: `${stroke}`
     }), {})
   };
 };
@@ -7483,23 +7501,28 @@ var import_react20 = require("react");
 
 // src/core/components/ScrollableChipGroup/index.tsx
 var import_core15 = require("@mantine/core");
+var import_lodash14 = __toESM(require_lodash());
 var jsx_runtime26 = require("react/jsx-runtime");
 function ScrollableChipGroup({
   value,
-  ref,
   onChange,
   gap = "xs",
   componentsProps,
   children
 }) {
-  return /* @__PURE__ */ jsx_runtime26.jsx(import_core15.ScrollArea, {
-    ref,
-    ...componentsProps?.ScrollArea,
-    style: { contain: "inline-size", ...componentsProps?.ScrollArea?.style },
+  const theme = useRemoraidTheme();
+  return /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Scroller, {
+    ...theme.componentsProps?.Scroller,
+    ...componentsProps?.Scroller,
+    className: clsx_default("remoraid-masked-scroller", theme.componentsProps?.Scroller?.className, componentsProps?.Scroller?.className),
+    style: import_lodash14.merge({ contain: "inline-size" }, theme.componentsProps?.Scroller?.style, componentsProps?.Scroller?.style),
+    attributes: import_lodash14.merge({
+      container: { "data-remoraid-scroller-container": true }
+    }, theme.componentsProps?.Scroller?.attributes, componentsProps?.Scroller?.attributes),
     children: /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Chip.Group, {
       value,
       onChange,
-      ...componentsProps?.chipGroup,
+      ...componentsProps?.ChipGroup,
       multiple: true,
       children: /* @__PURE__ */ jsx_runtime26.jsx(import_core15.Flex, {
         justify: "flex-start",
@@ -7514,12 +7537,12 @@ function ScrollableChipGroup({
 }
 
 // src/core/components/WidgetSelectionHeader/index.tsx
-var import_lodash14 = __toESM(require_lodash());
+var import_lodash15 = __toESM(require_lodash());
 var jsx_runtime27 = require("react/jsx-runtime");
 function WidgetSelectionHeader({
   title,
   pinnableSection = "top" /* Top */,
-  initiallyPinned = true,
+  initiallyPinned: initiallyPinnedProp,
   disabledWidgets,
   componentsProps
 }) {
@@ -7535,6 +7558,7 @@ function WidgetSelectionHeader({
   if (!page) {
     throw new InvalidComponentUsageError("WidgetSelectionHeader", "must be used as child of 'Page'.");
   }
+  const initiallyPinned = pinnableSection ? initiallyPinnedProp ?? true : false;
   const [hover, setHover] = import_react20.useState(false);
   const [isPinned, setIsPinned] = import_react20.useState(initiallyPinned);
   const handleEnter = () => {
@@ -7543,7 +7567,7 @@ function WidgetSelectionHeader({
   const handleLeave = () => {
     setHover(false);
   };
-  const scrollAreaRef = import_react20.useRef(null);
+  const containerRef = import_react20.useRef(null);
   const widgets = widgetsContext2.widgets[page.pageId] ?? {};
   const selectedWidgets = Object.entries(widgets).reduce((t, [widgetId, widget]) => widget?.selected ? [...t, widgetId] : t, []);
   const element = /* @__PURE__ */ jsx_runtime27.jsxs(import_core16.Flex, {
@@ -7551,6 +7575,7 @@ function WidgetSelectionHeader({
     align: "center",
     gap: "md",
     ...componentsProps?.container,
+    ref: containerRef,
     onMouseEnter: (e) => {
       if (!pinnableSection) {
         handleEnter();
@@ -7561,13 +7586,14 @@ function WidgetSelectionHeader({
       if (!pinnableSection) {
         handleLeave();
       }
-      componentsProps?.container?.onMouseEnter?.(e);
+      componentsProps?.container?.onMouseLeave?.(e);
     },
     className: clsx_default(!pinnableSection ? "remoraid-non-widget-segment" : undefined, !pinnableSection ? "remoraid-segment" : undefined, componentsProps?.container?.className),
     children: [
       /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Text, {
         size: "md",
         ...componentsProps?.title,
+        style: { whiteSpace: "nowrap", ...componentsProps?.title?.style },
         children: title ?? page.name
       }),
       /* @__PURE__ */ jsx_runtime27.jsx(import_core16.Divider, {
@@ -7576,13 +7602,17 @@ function WidgetSelectionHeader({
       }),
       isPageRegistered(page.pageId) && /* @__PURE__ */ jsx_runtime27.jsx(ScrollableChipGroup, {
         value: selectedWidgets,
-        ref: scrollAreaRef,
         ...componentsProps?.ScrollableChipGroup,
         onChange: (value) => {
           updateWidgetSelectionBulk(page.pageId, value);
           componentsProps?.ScrollableChipGroup?.onChange?.(value);
         },
-        componentsProps: import_lodash14.merge({ ScrollArea: { flex: 1 } }, componentsProps?.ScrollableChipGroup?.componentsProps),
+        componentsProps: import_lodash15.merge({
+          Scroller: {
+            flex: 1,
+            miw: 0
+          }
+        }, componentsProps?.ScrollableChipGroup?.componentsProps),
         children: Object.entries(widgets).map(([widgetId, widget]) => {
           if (!widget) {
             return;
@@ -7603,12 +7633,15 @@ function WidgetSelectionHeader({
                       ...theme.componentsProps.icons.extraSmall
                     }),
                     ...componentsProps?.Chip,
-                    styles: import_lodash14.merge({
+                    styles: import_lodash15.merge({
                       label: {
                         transition: "background-color var(--remoraid-transition-duration-short)"
                       }
                     }, componentsProps?.Chip?.styles),
-                    id: `remoraid-widget-selection-header-chip-${widgetId}`,
+                    wrapperProps: {
+                      ...componentsProps?.Chip?.wrapperProps,
+                      id: `remoraid-widget-selection-header-chip-${widgetId}`
+                    },
                     children: widget.name
                   })
                 })
@@ -7649,19 +7682,20 @@ function WidgetSelectionHeader({
     if (!activeWidget) {
       return;
     }
-    if (!isPinned) {
+    if (!containerRef?.current) {
       return;
     }
-    if (!scrollAreaRef?.current) {
+    const activeWidgetChipElement = containerRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
+    if (!activeWidgetChipElement) {
       return;
     }
-    const activeWidgetChipElement = scrollAreaRef.current.querySelector(`#remoraid-widget-selection-header-chip-${activeWidget}`);
-    if (!activeWidgetChipElement) {
+    const scrollContainerElement = activeWidgetChipElement.closest("[data-remoraid-scroller-container]");
+    if (!scrollContainerElement) {
       return;
     }
-    activeWidgetChipElement.scrollIntoView({
-      behavior: "smooth",
-      inline: "center"
+    scrollContainerElement.scrollTo({
+      left: activeWidgetChipElement.offsetLeft - scrollContainerElement.clientWidth / 2 + activeWidgetChipElement.clientWidth / 2,
+      behavior: "smooth"
     });
   }, [activeWidget]);
   if (pinnableSection) {
@@ -7745,7 +7779,7 @@ function BadgeMinimal({
 }
 
 // src/core/components/BadgeGroup/index.tsx
-var import_lodash15 = __toESM(require_lodash());
+var import_lodash16 = __toESM(require_lodash());
 var jsx_runtime29 = require("react/jsx-runtime");
 var react = require("react");
 function BadgeGroup({
@@ -7793,7 +7827,7 @@ function BadgeGroup({
                 ...componentsProps?.cumulativeBadge,
                 style: {
                   cursor: "pointer",
-                  ...import_lodash15.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
+                  ...import_lodash16.merge(transitionStyle, componentsProps?.cumulativeBadge?.style)
                 },
                 children: [
                   numVisibleBadges,
@@ -7817,7 +7851,7 @@ function BadgeGroup({
 }
 // src/core/components/AlertMinimal/index.tsx
 var import_core19 = require("@mantine/core");
-var import_lodash16 = __toESM(require_lodash());
+var import_lodash17 = __toESM(require_lodash());
 var jsx_runtime30 = require("react/jsx-runtime");
 function AlertMinimal({
   category,
@@ -7834,7 +7868,7 @@ function AlertMinimal({
     icon: Icon4,
     iconSize = "small" /* Small */,
     componentsProps
-  } = import_lodash16.merge({}, theme.componentsProps.alerts[category], props);
+  } = import_lodash17.merge({}, theme.componentsProps.alerts[category], props);
   return /* @__PURE__ */ jsx_runtime30.jsx(import_core19.Transition, {
     mounted,
     transition: "fade",
@@ -7848,10 +7882,10 @@ function AlertMinimal({
       onClose,
       withCloseButton: onClose !== undefined,
       icon: Icon4 ? /* @__PURE__ */ jsx_runtime30.jsx(Icon4, {
-        ...import_lodash16.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
+        ...import_lodash17.merge({}, theme.componentsProps.icons[iconSize], componentsProps?.icon)
       }) : undefined,
       ...componentsProps?.alert,
-      style: import_lodash16.merge(transitionStyle, componentsProps?.alert?.style),
+      style: import_lodash17.merge(transitionStyle, componentsProps?.alert?.style),
       children: [
         text,
         children
@@ -7863,7 +7897,7 @@ function AlertMinimal({
 var import_core20 = require("@mantine/core");
 var import_react22 = require("react");
 var import_icons_react10 = require("@tabler/icons-react");
-var import_lodash17 = __toESM(require_lodash());
+var import_lodash18 = __toESM(require_lodash());
 var jsx_runtime31 = require("react/jsx-runtime");
 function WidgetWrapper({
   config,
@@ -7934,7 +7968,7 @@ function WidgetWrapper({
         handleLeave(e);
         componentsProps?.container?.onMouseLeave?.(e);
       },
-      style: import_lodash17.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
+      style: import_lodash18.merge(transitionStyle, { flexDirection: "column" }, componentsProps?.container?.style),
       className: clsx_default("remoraid-segment", componentsProps?.container?.className),
       id: config.widgetId,
       children: [
@@ -8008,7 +8042,7 @@ function WidgetWrapper({
 // src/core/components/Widget/index.tsx
 var import_core21 = require("@mantine/core");
 var import_react23 = require("react");
-var import_lodash18 = __toESM(require_lodash());
+var import_lodash19 = __toESM(require_lodash());
 var jsx_runtime32 = require("react/jsx-runtime");
 var react2 = require("react");
 function Widget({
@@ -8080,7 +8114,7 @@ function Widget({
                     size: "sm",
                     c: "dimmed",
                     ...componentsProps?.description,
-                    style: import_lodash18.merge(transitionStyle, componentsProps?.description?.style),
+                    style: import_lodash19.merge(transitionStyle, componentsProps?.description?.style),
                     children: description
                   })
                 })
@@ -8351,7 +8385,7 @@ var SettingsTable_default = Object.assign(SettingsTable, {
   Row
 });
 // src/core/components/NavbarSettingsWidget/index.tsx
-var import_lodash19 = __toESM(require_lodash());
+var import_lodash20 = __toESM(require_lodash());
 var import_core25 = require("@mantine/core");
 var jsx_runtime39 = require("react/jsx-runtime");
 var defaultNavbarSettingsWidgetId = "navbar-settings";
@@ -8387,7 +8421,7 @@ function NavbarSettingsWidget({
         navbar: initialUserExperience.navbar
       }));
     },
-    custom: !import_lodash19.isEqual(userExperience.navbar, initialUserExperience.navbar),
+    custom: !import_lodash20.isEqual(userExperience.navbar, initialUserExperience.navbar),
     children: /* @__PURE__ */ jsx_runtime39.jsxs(SettingsTable_default, {
       ...componentsProps?.table,
       children: [
@@ -8445,7 +8479,7 @@ function NavbarSettingsWidget({
   });
 }
 // src/core/components/FooterSettingsWidget/index.tsx
-var import_lodash20 = __toESM(require_lodash());
+var import_lodash21 = __toESM(require_lodash());
 var import_core26 = require("@mantine/core");
 var jsx_runtime40 = require("react/jsx-runtime");
 var defaultFooterSettingsWidgetId = "footer-settings";
@@ -8476,7 +8510,7 @@ function FooterSettingsWidget({
         footer: initialUserExperience.footer
       }));
     },
-    custom: !import_lodash20.isEqual(userExperience.footer, initialUserExperience.footer),
+    custom: !import_lodash21.isEqual(userExperience.footer, initialUserExperience.footer),
     children: /* @__PURE__ */ jsx_runtime40.jsxs(SettingsTable_default, {
       ...componentsProps?.table,
       children: [

package/dist/core/index.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren as PropsWithChildren7, ReactNode as ReactNode7 } from "react";
-import { MantineBreakpoint, MantineColorScheme, MantineSize, MantineTheme } from "@mantine/core";
+import { MantineBreakpoint, MantineColorScheme, MantineSize, MantineTheme, ScrollerProps } from "@mantine/core";
 import { Icon as Icon2, IconProps as IconProps2 } from "@tabler/icons-react";
 import React2, { Dispatch, MouseEventHandler, ReactElement, SetStateAction } from "react";
 import { PartialDeep } from "type-fest";
@@ -168,8 +168,9 @@ interface RemoraidTheme {
 	transparentBackground?: string;
 	spacingPx?: Record<MantineSize, number>;
 	componentsProps: {
-		icons: Record<RemoraidIconSize, Partial<IconProps2>>
+		icons: Record<RemoraidIconSize, Partial<IconProps2> & Required<Pick<IconProps2, "size" | "stroke">>>
 		alerts: Record<AlertCategory, Omit<Partial<AlertMinimalProps>, "category">>
+		Scroller: Partial<ScrollerProps>
 	};
 }
 interface RemoraidThemeDependencies {
@@ -600,20 +601,19 @@ declare const defaultUserExperienceCookieName = "remoraid-core-user-experience";
 declare const useRemoraidUserExperience: () => UserExperienceContext<CoreUserExperience>;
 import { ChipProps, DividerProps, FlexProps as FlexProps2, MenuProps as MenuProps2, TextProps } from "@mantine/core";
 import { ReactNode as ReactNode27 } from "react";
-import { ChipGroupProps, FlexProps, MantineSize as MantineSize7, ScrollAreaProps as ScrollAreaProps2 } from "@mantine/core";
-import { PropsWithChildren as PropsWithChildren17, ReactNode as ReactNode26, RefObject as RefObject2 } from "react";
+import { ChipGroupProps, FlexProps, MantineSize as MantineSize7, ScrollerProps as ScrollerProps2 } from "@mantine/core";
+import { PropsWithChildren as PropsWithChildren17, ReactNode as ReactNode26 } from "react";
 interface ScrollableChipGroupProps {
 	value: string[];
-	ref?: RefObject2<HTMLDivElement | null>;
 	onChange?: (value: string[]) => void;
 	gap?: MantineSize7 | number;
 	componentsProps?: {
-		chipGroup?: Partial<ChipGroupProps<true>>
 		container?: Partial<FlexProps>
-		ScrollArea?: Partial<ScrollAreaProps2>
+		ChipGroup?: Partial<ChipGroupProps<true>>
+		Scroller?: Partial<ScrollerProps2>
 	};
 }
-declare function ScrollableChipGroup2({ value, ref, onChange, gap, componentsProps, children }: PropsWithChildren17<ScrollableChipGroupProps>): ReactNode26;
+declare function ScrollableChipGroup2({ value, onChange, gap, componentsProps, children }: PropsWithChildren17<ScrollableChipGroupProps>): ReactNode26;
 interface WidgetSelectionHeaderProps {
 	title?: string;
 	pinnableSection?: FrameLayoutSection.Top | FrameLayoutSection.Bottom | null;
@@ -629,7 +629,7 @@ interface WidgetSelectionHeaderProps {
 		Pinnable?: Partial<PinnableProps>
 	};
 }
-declare function WidgetSelectionHeader({ title, pinnableSection, initiallyPinned, disabledWidgets, componentsProps }: WidgetSelectionHeaderProps): ReactNode27;
+declare function WidgetSelectionHeader({ title, pinnableSection, initiallyPinned: initiallyPinnedProp, disabledWidgets, componentsProps }: WidgetSelectionHeaderProps): ReactNode27;
 import { BadgeProps as BadgeProps2, GroupProps as GroupProps3, HoverCardProps, MantineBreakpoint as MantineBreakpoint4, MantineSize as MantineSize8, StackProps as StackProps2, TransitionProps as TransitionProps7 } from "@mantine/core";
 import { ReactNode as ReactNode29 } from "react";
 import { BadgeProps, TooltipProps as TooltipProps3, TransitionProps as TransitionProps6 } from "@mantine/core";
@@ -823,7 +823,7 @@ declare function ContextClusterProvider<
 	Context,
 	StaticID extends string = never
 >({ cluster, values, children }: PropsWithChildren25<ContextClusterProviderProps<Context, StaticID>>): ReactNode41;
-import { BoxProps as BoxProps4, InputWrapperProps, ScrollAreaProps as ScrollAreaProps3 } from "@mantine/core";
+import { BoxProps as BoxProps4, InputWrapperProps, ScrollAreaProps as ScrollAreaProps2 } from "@mantine/core";
 import { PropsWithChildren as PropsWithChildren26, ReactNode as ReactNode42 } from "react";
 interface InputWrapperScrollAreaProps {
 	label?: string;
@@ -833,7 +833,7 @@ interface InputWrapperScrollAreaProps {
 	required?: boolean;
 	componentsProps?: {
 		container?: Partial<InputWrapperProps>
-		ScrollArea?: Partial<ScrollAreaProps3>
+		ScrollArea?: Partial<ScrollAreaProps2>
 		childrenContainer?: Partial<BoxProps4>
 	};
 }