Merge pull request #520 from AnnMarieW/mantne-7.17

Update for Mantine 17.0

Author: AnnMarieW

CHANGELOG.md

@@ -2,8 +2,12 @@
 
 # [Unreleased]
 
+### Added
+- Added `middlewares` prop to `Tooltip` and `overscrollBehavior` prop to `ScrollArea` (New props as of Manitine 7.17). #520 by @AnnMarie
+
 ### Changed
-- `notification` will now automatically set its `action` to `hide` when closed, this avoids issues where a `callback` error would re-trigger the component.
+- `notification` will now automatically set its `action` to `hide` when closed, this avoids issues where a `callback` error would re-trigger the component. #523 by @BSd3v
+- Removed `draggable` and `speed` prop from `Carousel` since these props are not supported in Embla Carousel V8. #520 by @AnnMarieW
 
 # 1.0.0rc2
 
@@ -18,7 +22,7 @@
 -   Upgraded to latest Mantine (7.17.0)
 
 ### Fixed
-- Corrected an error in the `Alert` component when the `duration` prop prop was set when using dash>=3 #516 by @AnnMarieW
+- Corrected an error in the `Alert` component when the `duration` prop was set when using dash>=3 #516 by @AnnMarieW
 
 # 1.0.0rc1
 

src/ts/components/core/ScrollArea.tsx

@@ -5,23 +5,6 @@ import React from "react";
 import { getLoadingState } from "../../utils/dash3";
 
 interface Props extends ScrollAreaProps, DashBaseProps {
-    /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 0.75rem */
-    scrollbarSize?: number | string;
-    /**
-     * Defines scrollbars behavior, `hover` by default
-     * - `hover` – scrollbars are visible when mouse is over the scroll area
-     * - `scroll` – scrollbars are visible when the scroll area is scrolled
-     * - `always` – scrollbars are always visible
-     * - `never` – scrollbars are always hidden
-     * - `auto` – similar to `overflow: auto` – scrollbars are always visible when the content is overflowing
-     * */
-    type?: "auto" | "always" | "scroll" | "hover" | "never";
-    /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`, `1000` by default */
-    scrollHideDelay?: number;
-    /** Axis at which scrollbars must be rendered, `'xy'` by default */
-    scrollbars?: "x" | "y" | "xy" | false;
-    /** Determines whether scrollbars should be offset with padding on given axis, `false` by default */
-    offsetScrollbars?: boolean | "x" | "y";
     /** Content */
     children?: React.ReactNode;
 }

src/ts/components/core/tooltip/Tooltip.tsx

@@ -19,7 +19,7 @@ interface Props extends TooltipBaseProps, DashBaseProps {
     closeDelay?: number;
     /** Controlled opened state */
     opened?: boolean;
-    /** Space between target element and tooltip in px, `5` by default */
+    /** Space between target element and tooltip in px, `5` by default.  Number or FloatingAxesOffsets. */
     offset?: number | FloatingAxesOffsets;
     /** Determines whether the tooltip should have an arrow, `false` by default */
     withArrow?: boolean;

src/ts/components/extensions/carousel/Carousel.tsx

@@ -31,14 +31,10 @@ interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     slidesToScroll?: number | "auto";
     /** Determines whether gap between slides should be treated as part of the slide size, `true` by default */
     includeGapInSize?: boolean;
-    /** Determines whether the carousel can be scrolled with mouse and touch interactions, `true` by default */
-    draggable?: boolean;
     /** Determines whether momentum scrolling should be enabled, `false` by default */
     dragFree?: boolean;
     /** Enables infinite looping. `true` by default, automatically falls back to `false` if slide content isn't enough to loop. */
     loop?: boolean;
-    /** Adjusts scroll speed when triggered by any of the methods. Higher numbers enables faster scrolling. */
-    speed?: number;
     /** Index of initial slide */
     initialSlide?: number;
     /** Choose a fraction representing the percentage portion of a slide that needs to be visible in order to be considered in view. For example, 0.5 equals 50%. */

src/ts/props/scrollarea.ts

@@ -20,6 +20,6 @@ export interface ScrollAreaProps extends BoxProps, StylesApiProps {
     scrollbars?: "x" | "y" | "xy" | false;
     /** Determines whether scrollbars should be offset with padding on given axis, `false` by default */
     offsetScrollbars?: boolean | "x" | "y";
-    /** Content */
-    children?: React.ReactNode;
+    /** Defines `overscroll-behavior` of the viewport. https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior */
+    overscrollBehavior?: React.CSSProperties['overscrollBehavior'];
 }

src/ts/props/tooltip.ts

@@ -23,4 +23,6 @@ export interface TooltipBaseProps extends BoxProps, StylesApiProps {
     disabled?: boolean;
     /** Props to pass down to the portal when withinPortal is true */
     portalProps?: object;
+    /** Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default */
+    middlewares?: object;
 }