reshaped 3.9.0-canary.9 → 3.9.1-canary.2

package/dist/components/Flyout/utilities/safeArea.d.ts

@@ -0,0 +1,10 @@
+import type * as G from "../../../types/global";
+type SafePolygonOptions = {
+    contentRef: React.RefObject<HTMLElement | null>;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    position: string | null | undefined;
+    onClose: () => void;
+    origin: G.Coordinates;
+};
+export declare function createSafeArea(options: SafePolygonOptions): () => void;
+export {};

package/dist/components/Flyout/utilities/safeArea.js

@@ -0,0 +1,100 @@
+/**
+ * Checks if a point is inside a triangle using barycentric coordinates
+ */
+function isPointInTriangle(point, triangle) {
+    const [p1, p2, p3] = triangle;
+    const denominator = (p2.y - p3.y) * (p1.x - p3.x) + (p3.x - p2.x) * (p1.y - p3.y);
+    const a = ((p2.y - p3.y) * (point.x - p3.x) + (p3.x - p2.x) * (point.y - p3.y)) / denominator;
+    const b = ((p3.y - p1.y) * (point.x - p3.x) + (p1.x - p3.x) * (point.y - p3.y)) / denominator;
+    const c = 1 - a - b;
+    return a >= 0 && a <= 1 && b >= 0 && b <= 1 && c >= 0 && c <= 1;
+}
+/**
+ * Gets the two closest corners of the content element based on the flyout position
+ */
+function getContentCorners(contentRect, position) {
+    const corners = {
+        topLeft: { x: contentRect.left, y: contentRect.top },
+        topRight: { x: contentRect.right, y: contentRect.top },
+        bottomLeft: { x: contentRect.left, y: contentRect.bottom },
+        bottomRight: { x: contentRect.right, y: contentRect.bottom },
+    };
+    if (position?.startsWith("bottom")) {
+        return [corners.topLeft, corners.topRight];
+    }
+    else if (position?.startsWith("top")) {
+        return [corners.bottomLeft, corners.bottomRight];
+    }
+    else if (position?.startsWith("start")) {
+        return [corners.topRight, corners.bottomRight];
+    }
+    else {
+        return [corners.topLeft, corners.bottomLeft];
+    }
+}
+/**
+ * Checks if the mouse is over the trigger or content elements
+ */
+function isMouseOverElement(point, contentRef, triggerRef) {
+    const elements = document.elementsFromPoint(point.x, point.y);
+    return elements.some((el) => (contentRef.current && contentRef.current.contains(el)) ||
+        (triggerRef.current && triggerRef.current.contains(el)));
+}
+export function createSafeArea(options) {
+    const { contentRef, triggerRef, position, onClose, origin: passedOrigin } = options;
+    if (!contentRef.current) {
+        // If content doesn't exist, just close immediately
+        onClose();
+        return () => { };
+    }
+    const contentRect = contentRef.current.getBoundingClientRect();
+    const [corner1, corner2] = getContentCorners(contentRect, position);
+    // Add buffer to origin based on position to extend safe area
+    const buffer = 10;
+    const origin = { x: passedOrigin.x, y: passedOrigin.y };
+    if (position?.startsWith("bottom")) {
+        origin.y -= buffer;
+    }
+    else if (position?.startsWith("top")) {
+        origin.y += buffer;
+    }
+    else if (position?.startsWith("start")) {
+        origin.x += buffer;
+    }
+    else if (position?.startsWith("end")) {
+        origin.x -= buffer;
+    }
+    const triangle = [origin, corner1, corner2];
+    let timeoutId = null;
+    const cleanup = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        if (timeoutId)
+            clearTimeout(timeoutId);
+    };
+    // Start timeout for 1 second
+    const startTimeout = () => {
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            onClose();
+            cleanup();
+        }, 1000);
+    };
+    const handleMouseMove = (e) => {
+        const currentPoint = { x: e.clientX, y: e.clientY };
+        if (isMouseOverElement(currentPoint, contentRef, triggerRef)) {
+            cleanup();
+            return;
+        }
+        if (isPointInTriangle(currentPoint, triangle)) {
+            startTimeout();
+        }
+        else {
+            onClose();
+            cleanup();
+        }
+    };
+    startTimeout();
+    document.addEventListener("mousemove", handleMouseMove);
+    return cleanup;
+}

package/dist/components/Grid/Grid.types.d.ts

@@ -2,7 +2,7 @@ import type { Property } from "csstype";
 import type React from "react";
 import type * as TStyles from "../../styles/types";
 import type * as G from "../../types/global";
-export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Gap between grid items */
     gap?: G.Responsive<number>;
     /** Horizontal gap between grid items */
@@ -34,13 +34,13 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Custom root element html tag */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 };
-export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Grid area for template syntax */
     area?: string;
     /** Starting column position */
@@ -58,7 +58,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Custom item element html tag */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the item element */
     className?: G.ClassName;
     /** Additional attributes for the item element */

package/dist/components/HiddenInput/HiddenInput.js

@@ -12,8 +12,7 @@ const HiddenInput = (props) => {
     const formControl = useFormControl();
     const name = checkboxGroup?.name ?? radioGroup?.name ?? props.name;
     const disabled = formControl?.disabled ?? props.disabled ?? checkboxGroup?.disabled ?? radioGroup?.disabled;
-    const checked = (value && checkboxGroup?.value?.includes(value)) ||
-        radioGroup?.value === value ||
+    const checked = (value && (checkboxGroup?.value?.includes(value) ?? radioGroup?.value === value)) ||
         props.checked;
     const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
     const handleChange = (event) => {
@@ -28,7 +27,7 @@ const HiddenInput = (props) => {
         if (radioGroup?.onChange)
             radioGroup.onChange(changeArgs);
     };
-    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur }));
+    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur, "data-rs-hidden-input": true }));
 };
 HiddenInput.displayName = "HiddenInput";
 export default HiddenInput;

package/dist/components/Image/Image.js

@@ -38,7 +38,7 @@ const Image = (props) => {
                 src: fallback ?? "",
                 alt: alt ?? "",
                 role: alt ? undefined : "presentation",
-                className: imageClassNames,
+                className: rootClassNames,
                 style,
             };
             // eslint-disable-next-line jsx-a11y/alt-text

package/dist/components/Modal/Modal.js

@@ -7,7 +7,6 @@ import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
 import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
 import s from "./Modal.module.css";
@@ -90,7 +89,6 @@ const Modal = (props) => {
         // Prevent the drag handling when browser is trying to navigate to a previous page
         if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
             return;
-        disableUserSelect();
         disableScroll();
         setDragging(true);
     };
@@ -108,7 +106,6 @@ const Modal = (props) => {
         if (!dragging)
             return;
         const handleDragEnd = () => {
-            enableUserSelect();
             enableScroll();
             setDragging(false);
             // Close only when dragging in the closing direction

package/dist/components/Popover/Popover.module.css

@@ -1 +1 @@
-.content{--rs-border-w:1px;border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
+.content{--rs-border-w:1px;border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content--variant-headless{border:none}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-focus:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-shadow-focus-inset:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100vh;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
+@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-focus:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-shadow-focus-inset:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100dvh;scroll-behavior:smooth}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0s!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}

package/dist/components/ScrollArea/ScrollArea.js

@@ -4,8 +4,8 @@ import React, { forwardRef } from "react";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
 import { classNames } from "../../utilities/props.js";
+import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./ScrollArea.module.css";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
@@ -41,14 +41,14 @@ const ScrollAreaBar = (props) => {
         const total = vertical ? elBar.scrollHeight : elBar.scrollWidth;
         onThumbMoveRef.current?.({ value: diff / total, type: "relative" });
     }, [vertical, dragging, onThumbMoveRef]);
-    const handleDragEnd = React.useCallback(() => {
-        setDragging(false);
-        enableUserSelect();
-    }, []);
     const handleDragStart = () => {
         setDragging(true);
-        disableUserSelect();
+        disableScroll();
     };
+    const handleDragEnd = React.useCallback(() => {
+        setDragging(false);
+        enableScroll();
+    }, []);
     React.useEffect(() => {
         if (!dragging)
             return;

package/dist/components/Select/Select.js

@@ -9,7 +9,7 @@ const Select = (props) => {
     return (_jsx(SelectRoot, { ...props, children: (props) => {
             const { options } = props;
             const hasOptionChildren = React.Children.toArray(children).some((child) => {
-                return React.isValidElement(child) && child.type === "option";
+                return (React.isValidElement(child) && (child.type === "option" || child.type === "optgroup"));
             });
             const hasOptions = Boolean(options || hasOptionChildren);
             if (!hasOptions) {

package/dist/components/Select/SelectCustomControlled.js

@@ -68,7 +68,6 @@ const SelectCustomControlled = (props) => {
             return child;
         });
     };
-    // eslint-disable-next-line react-hooks/refs
     const resolvedChildren = traverseOptionList(children);
     const handleKeyDown = (e) => {
         const key = e.key;

package/dist/components/Slider/SliderControlled.js

@@ -5,7 +5,7 @@ import { useFormControl } from "../FormControl/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useRTL from "../../hooks/useRTL.js";
-import { enableUserSelect, disableUserSelect, triggerChangeEvent } from "../../utilities/dom/index.js";
+import { triggerChangeEvent } from "../../utilities/dom/index.js";
 import { classNames } from "../../utilities/props.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./Slider.module.css";
@@ -144,30 +144,31 @@ const SliderControlled = (props) => {
             handleMinChange(nextValue);
         if (closestId === maxId)
             handleMaxChange(nextValue);
-        disableUserSelect();
-        disableScroll();
         setDraggingId(closestId);
     };
     const handleMinDragStart = (e) => {
         if (disabled)
             return;
         e.stopPropagation();
+        disableScroll();
         setDraggingId(minId);
     };
     const handleMaxDragStart = (e) => {
         if (disabled)
             return;
         e.stopPropagation();
+        disableScroll();
         setDraggingId(maxId);
     };
     const handleDragStop = React.useCallback(() => {
         if (draggingId === minId && minValue !== undefined) {
             handleMinChange(minValue, { commit: true });
+            minInputRef.current?.focus();
         }
         if (draggingId === maxId) {
             handleMaxChange(maxValue, { commit: true });
+            maxInputRef.current?.focus();
         }
-        enableUserSelect();
         enableScroll();
         setDraggingId(null);
     }, [minValue, maxValue, handleMinChange, handleMaxChange, draggingId, minId, maxId]);

package/dist/components/Tabs/Tabs.module.css

@@ -1 +1 @@
-@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.item{color:var(--rs-color-foreground-neutral)}@media (hover:hover) and (pointer:fine){.item:not(.--item-disabled,.--item-active):hover{color:var(--rs-color-foreground-neutral-faded)}}.item.--item-disabled{color:var(--rs-color-foreground-disabled)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.--panel-hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0;overflow:hidden}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}
+@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{--rs-tabs-gap:var(--rs-unit-x6);box-sizing:initial;isolation:isolate;max-width:100%;position:relative}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.list{gap:var(--rs-tabs-gap)}.list,.listItem{position:relative}.listItem{flex-shrink:0}.button{--rs-tabs-focus-ring-inset:calc(var(--rs-unit-x2) * -1);position:relative;width:100%;z-index:1;-webkit-tap-highlight-color:transparent;border-radius:var(--rs-radius-medium)}[data-rs-keyboard] .button:focus:after{border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-focus-inset);content:"";inset:0;inset-inline:var(--rs-tabs-focus-ring-inset);pointer-events:none;position:absolute}.buttonContent{align-items:center;border-radius:var(--rs-radius-medium);box-sizing:border-box;display:flex;width:100%}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.item{color:var(--rs-color-foreground-neutral)}.item:after{content:"";opacity:0;pointer-events:none}.item--active.item:after{opacity:1}.item.item--disabled{color:var(--rs-color-foreground-disabled)}.root:not(:has(.selector)) .item:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.item:after,.selector{background:var(--rs-color-border-primary);border-radius:var(--rs-radius-medium);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.selector.selector--hidden{visibility:hidden}.selector.selector--animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control.control--next{inset-inline-end:0}.control.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.panel.panel--hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .item:after{inset-inline:0;bottom:0;height:2px}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin-block:var(--rs-unit-x1)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column{--rs-tabs-gap:var(--rs-unit-x1)}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .item:after{inset-block:0;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);inset-inline-end:0;top:0;width:2px}.--direction-column .button{--rs-tabs-focus-ring-inset:0;margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills,.--variant-pills-elevated{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .button,.--variant-pills-elevated .button{--rs-tabs-focus-ring-inset:0;margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--variant-pills .item:after,.--variant-pills-elevated .item:after{background-color:var(--rs-color-background-neutral);z-index:0}.--variant-pills-elevated.--direction-column .item:after,.--variant-pills.--direction-column .item:after{width:100%}.--variant-pills-elevated.--direction-column .selector,.--variant-pills.--direction-column .selector{left:0}.--variant-pills-elevated.--direction-row .item:after,.--variant-pills.--direction-row .item:after{height:100%}.--variant-pills-elevated.--direction-row .selector,.--variant-pills.--direction-row .selector{top:0}.--variant-pills .item--active:after,.--variant-pills .selector{opacity:.6}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills-elevated .item:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);border-radius:calc(var(--rs-radius-medium) - 1px);box-shadow:var(--rs-shadow-raised);box-sizing:border-box}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0;min-width:0}.--item-width-equal .buttonText{overflow:hidden;text-overflow:ellipsis}.--item-width-equal .button{--rs-tabs-focus-ring-inset:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}

package/dist/components/Tabs/Tabs.types.d.ts

@@ -53,6 +53,8 @@ export type BaseProps = {
     size?: "medium" | "large";
     /** Name of the tab buttons group when used as a form control */
     name?: string;
+    /** Disable the animation of the tab button selection */
+    disableSelectionAnimation?: boolean;
     /** Callback when the active tab value changes */
     onChange?: (args: {
         value: string;
@@ -75,7 +77,7 @@ export type UncontrolledProps = BaseProps & {
     defaultValue?: string;
 };
 export type Props = ControlledProps | UncontrolledProps;
-export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction"> & {
+export type Context = Pick<BaseProps, "itemWidth" | "onChange" | "variant" | "name" | "direction" | "disableSelectionAnimation"> & {
     size: NonNullable<BaseProps["size"]>;
     value?: string;
     setDefaultValue: (value: string) => void;

package/dist/components/Tabs/TabsContext.d.ts

@@ -12,6 +12,7 @@ export declare const useTabs: (value?: string) => {
         name?: string;
     }) => void) | undefined;
     itemWidth?: "equal" | undefined;
+    disableSelectionAnimation?: boolean | undefined;
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;
     setDefaultValue: (value: string) => void;

package/dist/components/Tabs/TabsControlled.js

@@ -4,10 +4,9 @@ import React from "react";
 import useElementId from "../../hooks/useElementId.js";
 import { TabsProvider } from "./TabsContext.js";
 const TabsControlled = (props) => {
-    const { children, value, onChange, onSilentChange, itemWidth, variant, name, direction = "row", size = "medium", } = props;
+    const { children, value, onChange, onSilentChange, itemWidth, variant, name, disableSelectionAnimation, direction = "row", size = "medium", } = props;
     const id = useElementId();
     const elActiveRef = React.useRef(null);
-    // eslint-disable-next-line react-hooks/refs
     const elPrevActiveRef = React.useRef(elActiveRef.current);
     const elScrollableRef = React.useRef(null);
     const [selection, setSelection] = React.useState({
@@ -38,6 +37,7 @@ const TabsControlled = (props) => {
             elScrollableRef,
             selection,
             setSelection,
+            disableSelectionAnimation,
         }, children: children }));
 };
 TabsControlled.displayName = "TabsControlled";

package/dist/components/Tabs/TabsItem.js

@@ -16,7 +16,7 @@ const TabsItem = React.forwardRef((props, ref) => {
     const itemRef = React.useRef(null);
     const active = tabsValue === value;
     const visuallySelected = active && selection.status === "idle";
-    const itemClassNames = classNames(s.item, visuallySelected && s["--item-active"], disabled && s["--item-disabled"]);
+    const itemClassNames = classNames(s.item, visuallySelected && s["item--active"], disabled && s["item--disabled"]);
     const isFormControl = !!name;
     const tabAttributes = {
         role: "tab",
@@ -60,7 +60,7 @@ const TabsItem = React.forwardRef((props, ref) => {
             return;
         updateRefs();
     }, [active, updateRefs]);
-    return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, insetFocus: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: {
+    return (_jsx("div", { ...attributes, className: itemClassNames, ref: itemRef, role: "presentation", children: _jsxs(Actionable, { ref: ref, href: href, disableFocusRing: true, disabled: disabled, onClick: !name ? handleChange : undefined, className: s.button, as: name ? "label" : undefined, attributes: {
                 ...(!isFormControl && tabAttributes),
                 "aria-controls": panelId,
                 id: buttonId,

package/dist/components/Tabs/TabsList.js

@@ -22,11 +22,11 @@ const findParentItem = (el, rootEl) => {
 };
 const TabsList = (props) => {
     const { children, className, attributes } = props;
-    const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, } = useTabs();
+    const { value, setDefaultValue, itemWidth, variant, name, direction, size, selection, setSelection, elActiveRef, elPrevActiveRef, elScrollableRef, disableSelectionAnimation, } = useTabs();
     const [rtl] = useRTL();
     const fadeSide = useFadeSide(elScrollableRef, { disabled: itemWidth === "equal" });
     const rootClassNames = classNames(s.root, size && s[`--size-${size}`], direction && s[`--direction-${direction}`], itemWidth && s[`--item-width-${itemWidth}`], variant && s[`--variant-${variant}`], fadeSide && s["--scrollable"], (fadeSide === "start" || fadeSide === "both") && s["--fade-start"], (fadeSide === "end" || fadeSide === "both") && s["--fade-end"], className);
-    const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["--selector-hidden"], selection.status === "animated" && s["--selector-animated"]);
+    const selectorClassNames = classNames(s.selector, selection.status === "idle" && s["selector--hidden"], selection.status === "animated" && s["selector--animated"]);
     const handleNextClick = () => {
         elScrollableRef.current.scrollBy({
             // Using ceil here since during the second navigation half of the value may be
@@ -79,8 +79,12 @@ const TabsList = (props) => {
         const selectionStyle = getElementSelectionStyle(elPrevActiveRef.current);
         if (!selectionStyle)
             return;
+        if (disableSelectionAnimation) {
+            setSelection({ ...selectionStyle, status: "idle" });
+            return;
+        }
         setSelection({ ...selectionStyle, status: "prepared" });
-    }, [value, getElementSelectionStyle]);
+    }, [value, getElementSelectionStyle, disableSelectionAnimation]);
     useIsomorphicLayoutEffect(() => {
         if (selection.status !== "prepared" || !elActiveRef.current)
             return;
@@ -94,12 +98,12 @@ const TabsList = (props) => {
                                 return null;
                             const props = child.props;
                             return (_jsx("div", { className: s.listItem, "data-rs-tabs-item": true, children: child }, props.value || child.key || index));
-                        }), _jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
+                        }), !disableSelectionAnimation && (_jsx("div", { onTransitionEnd: handleTransitionEnd, className: selectorClassNames, style: {
                                 "--rs-tab-selection-x": selection.left,
                                 "--rs-tab-selection-y": selection.top,
                                 "--rs-tab-selection-scale-x": selection.scaleX,
                                 "--rs-tab-selection-scale-y": selection.scaleY,
-                            } })] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
+                            } }))] }) }), _jsx(Actionable, { onClick: handlePrevClick, touchHitbox: true, attributes: { "aria-hidden": true, tabIndex: -1 }, className: [
                     s.control,
                     s["control--prev"],
                     (fadeSide === "start" || fadeSide === "both") && s["control--active"],

package/dist/components/Tabs/TabsPanel.js

@@ -11,7 +11,7 @@ const TabsPanel = (props) => {
     const [needsTabIndex, setNeedsTabIndex] = React.useState(true);
     const rootRef = React.useRef(null);
     const active = panelValue === value;
-    const panelClassNames = classNames(s.panel, !active && s["--panel-hidden"], className);
+    const panelClassNames = classNames(s.panel, !active && s["panel--hidden"], className);
     React.useEffect(() => {
         const el = rootRef.current;
         if (!el)

package/dist/components/Text/Text.d.ts

@@ -1,6 +1,6 @@
 import type * as T from "./Text.types";
 declare const Text: {
-    <As extends keyof React.JSX.IntrinsicElements>(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
+    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Text;

package/dist/components/Text/Text.types.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
-export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Text render variant */
     variant?: G.Responsive<Variant>;
     /** Text font weight */
@@ -20,12 +20,12 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     maxLines?: number;
     /** Render as a numeric value to preserve the width of each character */
     numeric?: true;
-    /** Render as a different html tag */
-    as?: TagName;
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
+    /** Render as a different html tag */
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
 };

package/dist/components/Toast/ToastContainer.js

@@ -89,7 +89,6 @@ const ToastContainer = (props) => {
             // Height + padding + borders
             height: status === "entered" ? `calc(${toastHeight}px + var(--rs-unit-x2) + 2px)` : 0,
             // Disable transition when height of the toast can change
-            // eslint-disable-next-line react-hooks/refs
             transitionDuration: resizingRef.current ? "0s" : undefined,
         }, onTransitionEnd: handleTransitionEnd, onFocus: stopTimer, onBlur: startTimer, children: _jsx("span", { className: s.wrapper, children: _jsx(Toast, { ...toastProps, collapsed: index > 0 && !inspected, attributes: { ...toastProps.attributes, ref: wrapperRef } }) }) }));
 };

package/dist/components/Tooltip/Tooltip.js

@@ -5,12 +5,12 @@ import Text from "../Text/index.js";
 import Theme from "../Theme/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
-    const { text, children, position = "bottom", color = "inverted", ...flyoutProps } = props;
+    const { text, children, position = "bottom", color = "inverted", contentMaxWidth = "360px", ...flyoutProps } = props;
     if (!text)
         return children({ ref: null });
     return (_jsxs(Flyout, { ...flyoutProps, position: position, triggerType: "hover", 
         // Disable group timeouts by default since it's not controlled by the default user events
-        groupTimeouts: flyoutProps.active === undefined ? true : false, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+        groupTimeouts: flyoutProps.active === undefined ? true : false, contentMaxWidth: contentMaxWidth, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: color, children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 Tooltip.displayName = "Tooltip";
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);max-width:360px;padding:var(--rs-unit-x1) var(--rs-unit-x2)}
+.root{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);padding:var(--rs-unit-x1) var(--rs-unit-x2)}

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
     /** Node for inserting children */
     children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
     /** Text content for the tooltip */

package/dist/components/View/View.types.d.ts

@@ -3,11 +3,11 @@ import type * as TStyles from "../../styles/types";
 import type * as G from "../../types/global";
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
 export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
-export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Node for inserting the content */
     children?: React.ReactNode;
     /** Render as a different element */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Render a divider between each child */
     divided?: boolean;
     /** Flex direction for the content */
@@ -97,7 +97,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 } & Pick<ItemProps, "grow" | "shrink">;
-export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Flex order of the item inside the parent */
     order?: G.Responsive<number>;
     /** Number of columns the item should span in the parent, View uses 12 columns */
@@ -109,7 +109,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
     /** Individual gap before the item, overrides the parent View gap */
     gapBefore?: G.Responsive<number> | "auto";
     /** Render as a different element */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
     /** Additional classname for the root element */

package/dist/components/_private/Expandable/Expandable.js

@@ -10,9 +10,7 @@ const Expandable = (props) => {
     const rootRef = React.useRef(null);
     const mountedRef = React.useRef(false);
     const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
-    const contentClassNames = classNames(s.root, 
-    // eslint-disable-next-line react-hooks/refs
-    mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
+    const contentClassNames = classNames(s.root, mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
     const handleTransitionEnd = (e) => {
         if (e.propertyName !== "height")
             return;

package/dist/components/_private/Portal/Portal.js

@@ -18,7 +18,6 @@ const Portal = (props) => {
     const { children, targetRef } = props;
     const mountedToggle = useToggle();
     const rootRef = React.useRef(null);
-    // eslint-disable-next-line react-hooks/refs
     const rootNode = rootRef.current?.getRootNode();
     const isShadowDom = rootNode instanceof ShadowRoot;
     const defaultTargetEl = isShadowDom ? rootNode : document.body;
@@ -31,7 +30,6 @@ const Portal = (props) => {
      */
     const portal = usePortalScope();
     const nextScopeRef = targetRef || portal.scopeRef;
-    // eslint-disable-next-line react-hooks/refs
     const targetEl = nextScopeRef?.current || defaultTargetEl;
     useIsomorphicLayoutEffect(() => {
         mountedToggle.activate();
@@ -39,7 +37,6 @@ const Portal = (props) => {
     }, []);
     /* Preserve the current theme when rendered in body */
     return [
-        // eslint-disable-next-line react-hooks/refs
         ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl),
         // Make sure this element doesn't affect components using :last-child when their children use portals
         !mountedToggle.active && _jsx("div", { ref: rootRef, className: s.root }, "root"),

package/dist/core/Actionable/Actionable.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Actionable.types";
+declare const Actionable: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<T.Ref>>;
+export default Actionable;