@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/transitions/collapse/styled-components.d.ts

@@ -1 +1,6 @@
-export declare const StyledContainer: import("../../style/styled").StyledComponent;
+export declare const getCollapseStylesClassName: (_: any, { $state, $dimension, $collapsedSize }: {
+    $state: any;
+    $dimension: any;
+    $collapsedSize: any;
+}) => string;
+export declare const StyledContainer: import("../../style").StyledComponent;

package/transitions/collapse/styled-components.js

@@ -1,26 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledContainer = void 0;
-var tslib_1 = require("tslib");
+exports.StyledContainer = exports.getCollapseStylesClassName = void 0;
 var style_1 = require("../../style");
 var Transition_1 = require("react-transition-group/Transition");
-function getCollapseStyles($duration, $timingFunction, $dimension, $collapsedSize) {
-    var _a, _b;
-    return _a = {},
-        _a[Transition_1.EXITED] = (_b = {},
-            _b[$dimension] = "".concat($collapsedSize, "px"),
-            _b.visibility = $collapsedSize ? 'visible' : 'hidden',
-            _b),
-        _a[Transition_1.EXITING] = {
-            transition: "".concat($dimension, " ").concat($duration.exit, "ms ").concat($timingFunction),
-        },
-        _a[Transition_1.ENTERING] = {
-            transition: "".concat($dimension, " ").concat($duration.enter, "ms ").concat($timingFunction),
-        },
-        _a[Transition_1.ENTERED] = {},
-        _a;
-}
-exports.StyledContainer = (0, style_1.styled)('div', 'overflow-hidden m-0 p-0', function (_, _a) {
-    var $state = _a.$state, $duration = _a.$duration, $timingFunction = _a.$timingFunction, $dimension = _a.$dimension, $collapsedSize = _a.$collapsedSize;
-    return ((0, tslib_1.__assign)({}, getCollapseStyles($duration, $timingFunction, $dimension, $collapsedSize)[$state]));
-});
+var getCollapseStylesClassName = function (_, _a) {
+    var _b;
+    var $state = _a.$state, $dimension = _a.$dimension, $collapsedSize = _a.$collapsedSize;
+    return ((_b = {},
+        _b[Transition_1.EXITED] = "overflow-hidden ".concat($collapsedSize ? 'visible' : 'hidden', " ").concat($dimension === 'height' ? 'h-[--sw-height]' : 'w-[--sw-width]'),
+        _b[Transition_1.EXITING] = "overflow-hidden timing-function-[--sw-timing-function] duration-[--sw-duration] ".concat($dimension === 'height' ? 'transition-height' : 'transition-width'),
+        _b[Transition_1.ENTERING] = "overflow-hidden timing-function-[--sw-timing-function] duration-[--sw-duration] ".concat($dimension === 'height' ? 'transition-height' : 'transition-width'),
+        _b[Transition_1.ENTERED] = '',
+        _b)[$state]);
+};
+exports.getCollapseStylesClassName = getCollapseStylesClassName;
+exports.StyledContainer = (0, style_1.styled)('div', 'm-0 p-0', exports.getCollapseStylesClassName);

package/transitions/collapse/types.d.ts

@@ -1,16 +1,16 @@
 import { Override } from '../../overrides';
 import { TransitionProps, Duration, TimingFunction } from '../transition';
-export declare type Dimension = 'height' | 'width';
-export declare type CollapseSharedProps = {
+export type Dimension = 'height' | 'width';
+export type CollapseSharedProps = {
     $timingFunction?: TimingFunction;
     $duration?: Duration;
     $dimension?: Dimension;
     $collapsedSize?: number;
 };
-declare type CollapseOverrides = {
+type CollapseOverrides = {
     Container?: Override<CollapseSharedProps>;
 };
-export declare type CollapseProps = Omit<TransitionProps, 'overrides' | 'animationStyles'> & {
+export type CollapseProps = Omit<TransitionProps, 'overrides' | 'animationStyles'> & {
     dimension?: Dimension;
     overrides?: CollapseOverrides;
     collapsedSize?: number;

package/transitions/fade/fade.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { FadeProps } from './types';
 declare const Fade: {
-    ({ duration, timingFunction, children, ...props }: FadeProps): ReactElement;
+    ({ duration, timingFunction, children, style, ...props }: FadeProps): ReactElement;
     displayName: string;
 };
 export default Fade;

package/transitions/fade/fade.js

@@ -1,29 +1,31 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var index_1 = require("../transition/index");
 var Transition_1 = require("react-transition-group/Transition");
 var constants_1 = require("../transition/constants");
+var fadeClassNames = (_a = {},
+    _a[Transition_1.EXITED] = 'opacity-0',
+    _a[Transition_1.EXITING] = 'timing-function-[--sw-timing-function] opacity-0 transition-opacity duration-[--sw-duration]',
+    _a[Transition_1.ENTERING] = 'timing-function-[--sw-timing-function] opacity-1 transition-opacity duration-[--sw-duration]',
+    _a[Transition_1.ENTERED] = '',
+    _a);
 var Fade = function (_a) {
-    var _b;
-    var _c = _a.duration, duration = _c === void 0 ? constants_1.DEFAULT_DURATION : _c, _d = _a.timingFunction, timingFunction = _d === void 0 ? constants_1.DEFAULT_TIMING_FUNCTION : _d, children = _a.children, props = (0, tslib_1.__rest)(_a, ["duration", "timingFunction", "children"]);
+    var _b = _a.duration, duration = _b === void 0 ? constants_1.DEFAULT_DURATION : _b, _c = _a.timingFunction, timingFunction = _c === void 0 ? constants_1.DEFAULT_TIMING_FUNCTION : _c, children = _a.children, style = _a.style, props = tslib_1.__rest(_a, ["duration", "timingFunction", "children", "style"]);
     var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
-    var fadeStyles = (_b = {},
-        _b[Transition_1.ENTERING] = {
-            opacity: 1,
-            transition: "opacity ".concat(durationProp.enter, "ms ").concat(timingFunction),
-        },
-        _b[Transition_1.ENTERED] = {},
-        _b[Transition_1.EXITING] = {
-            opacity: 0,
-            transition: "opacity ".concat(durationProp.exit, "ms ").concat(timingFunction),
-        },
-        _b[Transition_1.EXITED] = {
-            opacity: 0,
-        },
-        _b);
-    return ((0, jsx_runtime_1.jsx)(index_1.Transition, (0, tslib_1.__assign)({}, props, { animationStyles: fadeStyles, duration: duration }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(index_1.Transition, tslib_1.__assign({}, props, { style: [
+            // @ts-ignore
+            function (_, _a) {
+                var $state = _a.$state;
+                return ({
+                    '--sw-duration': $state === 'entering' ? "".concat(durationProp === null || durationProp === void 0 ? void 0 : durationProp.enter, "ms") : "".concat(durationProp === null || durationProp === void 0 ? void 0 : durationProp.exit, "ms"),
+                    '--sw-timing-function': timingFunction,
+                });
+            },
+            style,
+        ], animationStyles: fadeClassNames, duration: duration }, { children: children })));
 };
 Fade.displayName = 'Fade';
 exports.default = Fade;

package/transitions/fade/types.d.ts

@@ -1,9 +1,9 @@
 import { Override } from '../../overrides';
 import { TimingFunction, TransitionProps } from '../transition';
-declare type FadeOverrides = {
+type FadeOverrides = {
     Container?: Override<any>;
 };
-export declare type FadeProps = Omit<TransitionProps, 'overrides' | 'animationStyles'> & {
+export type FadeProps = Omit<TransitionProps, 'overrides' | 'animationStyles'> & {
     overrides?: FadeOverrides;
     timingFunction?: TimingFunction;
 };

package/transitions/grow/grow.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { GrowProps } from './types';
 declare const Grow: {
-    ({ duration, timingFunction, children, ...props }: GrowProps): ReactElement;
+    ({ duration, timingFunction, children, style, ...props }: GrowProps): ReactElement;
     displayName: string;
 };
 export default Grow;

package/transitions/grow/grow.js

@@ -1,32 +1,32 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var index_1 = require("../transition/index");
 var Transition_1 = require("react-transition-group/Transition");
 var constants_1 = require("../transition/constants");
+var growClassNames = (_a = {},
+    _a[Transition_1.EXITED] = 'opacity-0 scale-80',
+    _a[Transition_1.EXITING] = 'opacity-0 scale-80 timing-function-[--sw-timing-function] transition-opacity-transform' +
+        ' duration-[--sw-duration]',
+    _a[Transition_1.ENTERING] = 'opacity-1 scale-1 timing-function-[--sw-timing-function] transition-opacity-transform duration-[--sw-duration]',
+    _a[Transition_1.ENTERED] = '',
+    _a);
 var Grow = function (_a) {
-    var _b;
-    var _c = _a.duration, duration = _c === void 0 ? constants_1.DEFAULT_DURATION : _c, _d = _a.timingFunction, timingFunction = _d === void 0 ? constants_1.DEFAULT_TIMING_FUNCTION : _d, children = _a.children, props = (0, tslib_1.__rest)(_a, ["duration", "timingFunction", "children"]);
+    var _b = _a.duration, duration = _b === void 0 ? constants_1.DEFAULT_DURATION : _b, _c = _a.timingFunction, timingFunction = _c === void 0 ? constants_1.DEFAULT_TIMING_FUNCTION : _c, children = _a.children, style = _a.style, props = tslib_1.__rest(_a, ["duration", "timingFunction", "children", "style"]);
     var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
-    var growStyles = (_b = {},
-        _b[Transition_1.ENTERING] = {
-            opacity: 1,
-            transform: 'scale(1)',
-            transition: "opacity ".concat(durationProp.enter, "ms ").concat(timingFunction, ",transform ").concat(durationProp.enter, "ms ").concat(timingFunction),
-        },
-        _b[Transition_1.ENTERED] = {},
-        _b[Transition_1.EXITING] = {
-            opacity: 0,
-            transform: 'scale(0.8)',
-            transition: "opacity ".concat(durationProp.exit, "ms ").concat(timingFunction, ",transform ").concat(durationProp.enter, "ms ").concat(timingFunction),
-        },
-        _b[Transition_1.EXITED] = {
-            opacity: 0,
-            transform: 'scale(0.8)',
-        },
-        _b);
-    return ((0, jsx_runtime_1.jsx)(index_1.Transition, (0, tslib_1.__assign)({}, props, { animationStyles: growStyles, duration: duration }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsx)(index_1.Transition, tslib_1.__assign({}, props, { style: [
+            // @ts-ignore
+            function (_, _a) {
+                var $state = _a.$state;
+                return ({
+                    '--sw-duration': $state === 'entering' ? "".concat(durationProp === null || durationProp === void 0 ? void 0 : durationProp.enter, "ms") : "".concat(durationProp === null || durationProp === void 0 ? void 0 : durationProp.exit, "ms"),
+                    '--sw-timing-function': timingFunction,
+                });
+            },
+            style,
+        ], animationStyles: growClassNames, duration: duration }, { children: children })));
 };
 Grow.displayName = 'Grow';
 exports.default = Grow;

package/transitions/grow/types.d.ts

@@ -1,9 +1,9 @@
 import { Override } from '../../overrides';
 import { TimingFunction, TransitionProps } from '../transition';
-export declare type GrowOverrides = {
+export type GrowOverrides = {
     Container?: Override<any>;
 };
-export declare type GrowProps = Omit<TransitionProps, 'overrides' | 'animationStyles'> & {
+export type GrowProps = Omit<TransitionProps, 'overrides' | 'animationStyles'> & {
     overrides?: GrowOverrides;
     timingFunction?: TimingFunction;
 };

package/transitions/transition/SwitchTransition.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { SwitchTransitionProps } from 'react-transition-group/SwitchTransition';
+declare const SwitchTransitionWrapper: (props: SwitchTransitionProps) => ReactElement;
+export default SwitchTransitionWrapper;

package/transitions/transition/SwitchTransition.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var SwitchTransition_1 = tslib_1.__importDefault(require("react-transition-group/SwitchTransition"));
+// components
+var box_1 = require("../../box");
+// hooks
+var usePreferredReducedMotion_1 = tslib_1.__importDefault(require("../../hooks/usePreferredReducedMotion"));
+var SwitchTransitionWrapper = function (props) {
+    var prefersReduced = (0, usePreferredReducedMotion_1.default)();
+    return prefersReduced ? ((0, jsx_runtime_1.jsx)(box_1.Box, { children: props.children })) : ((0, jsx_runtime_1.jsx)(SwitchTransition_1.default, tslib_1.__assign({}, props, { children: props.children })));
+};
+exports.default = SwitchTransitionWrapper;

package/transitions/transition/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Transition } from './transition';
 export { default as TransitionGroup } from './transitionGroup';
+export { default as SwitchTransition } from './SwitchTransition';
 export type { TransitionProps, TransitionSharedProps, AnimationStyles, TransitionCallbacks, Duration, TimingFunction, } from './types';
 export { ENTERED, ENTERING, EXITED, EXITING } from './constants';

package/transitions/transition/index.js

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EXITING = exports.EXITED = exports.ENTERING = exports.ENTERED = exports.TransitionGroup = exports.Transition = void 0;
+exports.EXITING = exports.EXITED = exports.ENTERING = exports.ENTERED = exports.SwitchTransition = exports.TransitionGroup = exports.Transition = void 0;
 var transition_1 = require("./transition");
 Object.defineProperty(exports, "Transition", { enumerable: true, get: function () { return __importDefault(transition_1).default; } });
 var transitionGroup_1 = require("./transitionGroup");
 Object.defineProperty(exports, "TransitionGroup", { enumerable: true, get: function () { return __importDefault(transitionGroup_1).default; } });
+var SwitchTransition_1 = require("./SwitchTransition");
+Object.defineProperty(exports, "SwitchTransition", { enumerable: true, get: function () { return __importDefault(SwitchTransition_1).default; } });
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "ENTERED", { enumerable: true, get: function () { return constants_1.ENTERED; } });
 Object.defineProperty(exports, "ENTERING", { enumerable: true, get: function () { return constants_1.ENTERING; } });

package/transitions/transition/styled-component.d.ts

@@ -1 +1 @@
-export declare const StyledContainer: import("../../style/styled").StyledComponent;
+export declare const StyledContainer: import("../../style").StyledComponent;

package/transitions/transition/styled-component.js

@@ -4,20 +4,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledContainer = void 0;
 var style_1 = require("../../style");
 var Transition_1 = require("react-transition-group/Transition");
-var constants_1 = require("./constants");
 var defaultStyles = (_a = {},
-    _a[Transition_1.ENTERING] = {
-        opacity: 1,
-        transition: "opacity ".concat(constants_1.DEFAULT_DURATION, "ms ").concat(constants_1.DEFAULT_TIMING_FUNCTION),
-    },
-    _a[Transition_1.ENTERED] = {},
-    _a[Transition_1.EXITING] = {
-        opacity: 0,
-        transition: "opacity ".concat(constants_1.DEFAULT_DURATION, "ms ").concat(constants_1.DEFAULT_TIMING_FUNCTION),
-    },
-    _a[Transition_1.EXITED] = {
-        opacity: 0,
-    },
+    _a[Transition_1.ENTERING] = 'opacity-1 transition-opacity duration-150',
+    _a[Transition_1.ENTERED] = '',
+    _a[Transition_1.EXITING] = 'opacity-0 transition-opacity duration-150',
+    _a[Transition_1.EXITED] = 'opacity-0',
     _a);
 exports.StyledContainer = (0, style_1.styled)('div', function (_, _a) {
     var $state = _a.$state, $animationStyles = _a.$animationStyles;

package/transitions/transition/transition.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { TransitionProps } from './types';
 declare const Transition: {
-    ({ visible, children, duration, overrides, containerRef, onEnter, onExit, animationStyles, disableExitTransition, disableEnterTransition, enableAppearTransition, ...props }: TransitionProps): ReactElement;
+    ({ visible, children, duration, overrides, containerRef, style, className, onEnter, onExit, animationStyles, disableExitTransition, disableEnterTransition, enableAppearTransition, ...restProps }: TransitionProps): ReactElement;
     displayName: string;
 };
 export default Transition;

package/transitions/transition/transition.js

@@ -3,17 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var Transition_1 = (0, tslib_1.__importDefault)(require("react-transition-group/Transition"));
+var Transition_1 = tslib_1.__importDefault(require("react-transition-group/Transition"));
 var styled_component_1 = require("./styled-component");
 var overrides_1 = require("../../overrides");
 var helperFunction_1 = require("./helperFunction");
-var useCombinedRef_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedRef"));
-var useCombinedHandler_1 = (0, tslib_1.__importDefault)(require("../../hooks/useCombinedHandler"));
+var useCombinedRef_1 = tslib_1.__importDefault(require("../../hooks/useCombinedRef"));
+var useCombinedHandler_1 = tslib_1.__importDefault(require("../../hooks/useCombinedHandler"));
 var constants_1 = require("./constants");
-var usePreferredReducedMotion_1 = (0, tslib_1.__importDefault)(require("../../hooks/usePreferredReducedMotion"));
+var usePreferredReducedMotion_1 = tslib_1.__importDefault(require("../../hooks/usePreferredReducedMotion"));
 var Transition = function (_a) {
-    var _b = _a.visible, visible = _b === void 0 ? true : _b, children = _a.children, _c = _a.duration, duration = _c === void 0 ? constants_1.DEFAULT_DURATION : _c, overrides = _a.overrides, _d = _a.containerRef, containerRef = _d === void 0 ? null : _d, onEnter = _a.onEnter, onExit = _a.onExit, _e = _a.animationStyles, animationStyles = _e === void 0 ? null : _e, _f = _a.disableExitTransition, disableExitTransition = _f === void 0 ? false : _f, _g = _a.disableEnterTransition, disableEnterTransition = _g === void 0 ? false : _g, _h = _a.enableAppearTransition, enableAppearTransition = _h === void 0 ? false : _h, props = (0, tslib_1.__rest)(_a, ["visible", "children", "duration", "overrides", "containerRef", "onEnter", "onExit", "animationStyles", "disableExitTransition", "disableEnterTransition", "enableAppearTransition"]);
+    var _b = _a.visible, visible = _b === void 0 ? true : _b, children = _a.children, _c = _a.duration, duration = _c === void 0 ? constants_1.DEFAULT_DURATION : _c, overrides = _a.overrides, _d = _a.containerRef, containerRef = _d === void 0 ? null : _d, style = _a.style, className = _a.className, onEnter = _a.onEnter, onExit = _a.onExit, _e = _a.animationStyles, animationStyles = _e === void 0 ? null : _e, _f = _a.disableExitTransition, disableExitTransition = _f === void 0 ? false : _f, _g = _a.disableEnterTransition, disableEnterTransition = _g === void 0 ? false : _g, _h = _a.enableAppearTransition, enableAppearTransition = _h === void 0 ? false : _h, restProps = tslib_1.__rest(_a, ["visible", "children", "duration", "overrides", "containerRef", "style", "className", "onEnter", "onExit", "animationStyles", "disableExitTransition", "disableEnterTransition", "enableAppearTransition"]);
     var prefersReducedMotion = (0, usePreferredReducedMotion_1.default)();
+    var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
     var nodeRef = (0, react_1.useRef)(null);
     var mergedRef = (0, useCombinedRef_1.default)(nodeRef, containerRef);
     var handleEnter = (0, useCombinedHandler_1.default)(function () {
@@ -28,9 +29,10 @@ var Transition = function (_a) {
     }, onExit);
     var sharedProps = {
         $animationStyles: animationStyles,
+        $duration: durationProp,
     };
-    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Container, styled_component_1.StyledContainer), 2), Container = _j[0], containerProps = _j[1];
-    return prefersReducedMotion ? ((0, jsx_runtime_1.jsx)(Container, (0, tslib_1.__assign)({}, containerProps, sharedProps, { children: visible ? children : null }), void 0)) : ((0, jsx_runtime_1.jsx)(Transition_1.default, (0, tslib_1.__assign)({ in: visible }, props, { onEnter: handleEnter, onExit: handleExit, timeout: duration, nodeRef: nodeRef, enter: !disableEnterTransition, exit: !disableExitTransition, appear: enableAppearTransition }, { children: function (state) { return ((0, jsx_runtime_1.jsx)(Container, (0, tslib_1.__assign)({ ref: mergedRef, "$state": state }, sharedProps, containerProps, { children: children }), void 0)); } }), void 0));
+    var _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Container, styled_component_1.StyledContainer), 2), Container = _j[0], containerProps = _j[1];
+    return prefersReducedMotion ? ((0, jsx_runtime_1.jsx)(Container, tslib_1.__assign({}, sharedProps, containerProps, { style: [style, containerProps === null || containerProps === void 0 ? void 0 : containerProps.style], className: [className, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className] }, restProps, { children: visible ? children : null }))) : ((0, jsx_runtime_1.jsx)(Transition_1.default, tslib_1.__assign({ in: visible }, restProps, { onEnter: handleEnter, onExit: handleExit, timeout: duration, nodeRef: nodeRef, enter: !disableEnterTransition, exit: !disableExitTransition, appear: enableAppearTransition }, { children: function (state) { return ((0, jsx_runtime_1.jsx)(Container, tslib_1.__assign({ ref: mergedRef, "$state": state }, sharedProps, containerProps, { style: [style, containerProps === null || containerProps === void 0 ? void 0 : containerProps.style], className: [className, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className] }, { children: children }))); } })));
 };
 Transition.displayName = 'Transition';
 exports.default = Transition;

package/transitions/transition/transitionGroup.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var usePreferredReducedMotion_1 = (0, tslib_1.__importDefault)(require("../../hooks/usePreferredReducedMotion"));
+var usePreferredReducedMotion_1 = tslib_1.__importDefault(require("../../hooks/usePreferredReducedMotion"));
 var react_transition_group_1 = require("react-transition-group");
 var box_1 = require("../../box");
 var TransitionGroupWrapper = function (_a) {
-    var props = (0, tslib_1.__rest)(_a, []);
+    var props = tslib_1.__rest(_a, []);
     var prefersReduced = (0, usePreferredReducedMotion_1.default)();
-    return prefersReduced ? (0, jsx_runtime_1.jsx)(box_1.Box, { children: props.children }, void 0) : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, (0, tslib_1.__assign)({}, props, { children: [" ", props.children] }), void 0);
+    return prefersReduced ? (0, jsx_runtime_1.jsx)(box_1.Box, { children: props.children }) : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, tslib_1.__assign({}, props, { children: [" ", props.children] }));
 };
 exports.default = TransitionGroupWrapper;

package/transitions/transition/types.d.ts

@@ -1,19 +1,21 @@
 import React, { CSSProperties, ReactNode } from 'react';
 import { Override } from '../../overrides';
 import CSS from 'csstype';
-export declare type AnimationStatus = 'entered' | 'entering' | 'exited' | 'exiting';
-export declare type Duration = {
+import { SpacewebComponentProps } from '../../types';
+export type AnimationStatus = 'entered' | 'entering' | 'exited' | 'exiting';
+export type Duration = {
     enter: number;
     exit: number;
 };
-export declare type TimingFunction = CSSProperties['transitionTimingFunction'];
-export declare type TransitionSharedProps = {
+export type TimingFunction = CSSProperties['transitionTimingFunction'];
+export type TransitionSharedProps = {
     $animationStyles?: AnimationStyles | null;
+    $duration?: Duration | number;
 };
-declare type TransitionOverrides = {
+type TransitionOverrides = {
     Container?: Override<TransitionSharedProps>;
 };
-export declare type TransitionCallbacks = {
+export type TransitionCallbacks = {
     onEnter?: (isAppearing: boolean) => void;
     onEntering?: (isAppearing: boolean) => void;
     onEntered?: (isAppearing: boolean) => void;
@@ -21,7 +23,7 @@ export declare type TransitionCallbacks = {
     onExiting?: () => void;
     onExited?: () => void;
 };
-export declare type TransitionProps = TransitionCallbacks & {
+export type TransitionProps = SpacewebComponentProps<TransitionCallbacks> & {
     overrides?: TransitionOverrides;
     containerRef?: React.Ref<HTMLElement>;
     visible?: boolean;
@@ -34,7 +36,7 @@ export declare type TransitionProps = TransitionCallbacks & {
     disableExitTransition?: boolean;
     animationStyles?: AnimationStyles | null;
 };
-export declare type AnimationStyles = {
-    [status in AnimationStatus]: CSS.Properties<string | number>;
+export type AnimationStyles = {
+    [status in AnimationStatus]: CSS.Properties<string | number> | string;
 };
 export {};

package/truncateWithTooltip/TruncateWithTooltip.d.ts

@@ -1,4 +1,7 @@
 import { ReactElement } from 'react';
 import type { TruncateWithTooltipProps } from './types';
-declare const TruncateWithTooltip: import("react").MemoExoticComponent<({ children, tooltipClassName, prefixEl, suffixEl, overrides, maxLines, maxWidth, className, }: TruncateWithTooltipProps) => ReactElement>;
+export declare const INITIAL_STATE: {
+    readonly isOpen: true;
+};
+declare const TruncateWithTooltip: import("react").MemoExoticComponent<({ children, maskWidth, tooltipClassName, prefixEl, suffixEl, overrides, truncationType, maxLines, maxWidth, className, noTooltipOnTruncation, }: TruncateWithTooltipProps) => ReactElement>;
 export default TruncateWithTooltip;

package/truncateWithTooltip/TruncateWithTooltip.js

@@ -1,22 +1,50 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.INITIAL_STATE = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 // Libraries
 var react_1 = require("react");
 // Hooks
+var style_1 = require("../style");
 var overrides_1 = require("../overrides");
 var useTruncateWithTooltip_1 = require("./hooks/useTruncateWithTooltip");
 // Components
 var box_1 = require("../box");
-var tooltip_1 = require("../tooltip");
-var INITIAL_STATE = { isOpen: true };
+var stateful_tooltip_1 = tslib_1.__importDefault(require("../tooltip/stateful-tooltip"));
+exports.INITIAL_STATE = { isOpen: true };
 var TruncateWithTooltip = (0, react_1.memo)(function (_a) {
-    var children = _a.children, tooltipClassName = _a.tooltipClassName, prefixEl = _a.prefixEl, suffixEl = _a.suffixEl, overrides = _a.overrides, maxLines = _a.maxLines, maxWidth = _a.maxWidth, _b = _a.className, className = _b === void 0 ? (maxLines !== null && maxLines !== void 0 ? maxLines : 1) > 1 ? 'break-words' : 'break-all' : _b;
-    var _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Tooltip, tooltip_1.StatefulTooltip), 2), TooltipComponent = _c[0], tooltipProps = _c[1];
-    var _d = (0, useTruncateWithTooltip_1.useTruncateWithTooltip)(), onMouseEnter = _d.onMouseEnter, onMouseLeave = _d.onMouseLeave, renderTooltip = _d.renderTooltip, elementRef = _d.elementRef;
-    var el = ((0, jsx_runtime_1.jsxs)(box_1.Box, (0, tslib_1.__assign)({ "data-testid": "content", className: [className, 'flex items-center', maxWidth ? { maxWidth: "".concat(maxWidth, "rem") } : undefined], onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: [prefixEl, (0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ ref: elementRef, className: [maxLines ? ['line-clamp-1 whitespace-normal', { WebkitLineClamp: maxLines }] : ['truncate']] }, { children: children }), void 0), suffixEl] }), void 0));
-    return renderTooltip ? ((0, jsx_runtime_1.jsx)(TooltipComponent, (0, tslib_1.__assign)({ content: (0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ "data-testid": "tooltip", className: tooltipClassName !== null && tooltipClassName !== void 0 ? tooltipClassName : 'max-w-2xl break-words' }, { children: children }), void 0), placement: "bottom", accessibilityType: "tooltip", initialState: INITIAL_STATE }, tooltipProps, { children: el }), void 0)) : (el);
+    var children = _a.children, _b = _a.maskWidth, maskWidth = _b === void 0 ? 1.6 : _b, tooltipClassName = _a.tooltipClassName, prefixEl = _a.prefixEl, suffixEl = _a.suffixEl, overrides = _a.overrides, _c = _a.truncationType, truncationType = _c === void 0 ? 'ellipsis' : _c, maxLines = _a.maxLines, maxWidth = _a.maxWidth, className = _a.className, _d = _a.noTooltipOnTruncation, noTooltipOnTruncation = _d === void 0 ? false : _d;
+    var _e = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Tooltip, stateful_tooltip_1.default), 2), TooltipComponent = _e[0], tooltipProps = _e[1];
+    var _f = (0, useTruncateWithTooltip_1.useTruncateWithTooltip)(), mouseEventProps = _f.mouseEventProps, renderTooltip = _f.renderTooltip, elementRef = _f.elementRef;
+    var isRTL = (0, style_1.useStyle)().isRTL;
+    var isTruncationEllipsis = truncationType === 'ellipsis';
+    var shouldRenderTooltipOnTruncation = renderTooltip && !noTooltipOnTruncation;
+    var contentEl = ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ ref: elementRef, 
+        // @ts-ignore
+        style: { '--sw-webkit-line-clamp': maxLines }, className: isTruncationEllipsis
+            ? // webkit-line-clamp-[--sw-webkit-line-clamp] overrides the webkit-line-clamp property from line-clamp-1
+                [maxLines ? ['line-clamp-1 whitespace-normal webkit-line-clamp-[--sw-webkit-line-clamp]'] : 'truncate']
+            : 'whitespace-no-wrap overflow-hidden' }, { children: children })));
+    var wrapWithTooltip = function (bodyEl) { return ((0, jsx_runtime_1.jsx)(TooltipComponent, tslib_1.__assign({ content: (0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "data-testid": "tooltip", className: tooltipClassName !== null && tooltipClassName !== void 0 ? tooltipClassName : 'max-w-2xl break-words' }, { children: children })), placement: "bottom", accessibilityType: "tooltip", initialState: exports.INITIAL_STATE }, mouseEventProps, tooltipProps, { children: bodyEl }))); };
+    if (isTruncationEllipsis) {
+        var bodyEl_1 = ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ "data-testid": "content", className: [
+                (maxLines !== null && maxLines !== void 0 ? maxLines : 1) > 1 ? 'break-words' : 'break-all',
+                'flex items-center',
+                className,
+                maxWidth ? 'max-w-[--sw-max-width]' : '',
+            ], 
+            // @ts-ignore
+            style: { '--sw-max-width': "".concat(maxWidth, "rem") } }, mouseEventProps, { children: [prefixEl, contentEl, suffixEl] })));
+        return shouldRenderTooltipOnTruncation ? wrapWithTooltip(bodyEl_1) : bodyEl_1;
+    }
+    var bodyEl = ((0, jsx_runtime_1.jsxs)(box_1.Box, { children: [prefixEl, contentEl, suffixEl] }));
+    return ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "data-testid": "content", className: ['w-full', className, maxWidth ? 'max-w-[--sw-max-width]' : ''], style: {
+            // @ts-ignore
+            '--sw-max-width': "".concat(maxWidth, "rem"),
+            maskImage: "linear-gradient(".concat(isRTL ? '-90deg' : '90deg', ", #000 0%, #000 calc(100% - ").concat(maskWidth, "rem), transparent)"),
+        } }, mouseEventProps, { children: shouldRenderTooltipOnTruncation ? wrapWithTooltip(bodyEl) : bodyEl })));
 });
 TruncateWithTooltip.displayName = 'TruncateWithTooltip';
+TruncateWithTooltip.__standard = 'Component';
 exports.default = TruncateWithTooltip;

package/truncateWithTooltip/hooks/useTruncateWithTooltip.d.ts

@@ -1,7 +1,9 @@
-import { RefObject } from 'react';
-export declare const useTruncateWithTooltip: () => {
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
+import { RefObject, MouseEventHandler } from 'react';
+export declare const useTruncateWithTooltip: (noTooltipOnTruncation?: boolean, onMouseEnter?: MouseEventHandler, onMouseLeave?: MouseEventHandler) => {
+    mouseEventProps: {
+        onMouseEnter?: MouseEventHandler | undefined;
+        onMouseLeave?: MouseEventHandler | undefined;
+    };
     elementRef: RefObject<HTMLElement>;
     renderTooltip: boolean;
 };

package/truncateWithTooltip/hooks/useTruncateWithTooltip.js

@@ -4,27 +4,39 @@ exports.useTruncateWithTooltip = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
 var DELAY = 200;
-var useTruncateWithTooltip = function () {
-    var _a = (0, tslib_1.__read)((0, react_1.useState)(false), 2), renderTooltip = _a[0], setRenderTooltip = _a[1];
+var useTruncateWithTooltip = function (noTooltipOnTruncation, onMouseEnter, onMouseLeave) {
+    if (noTooltipOnTruncation === void 0) { noTooltipOnTruncation = false; }
+    var _a = tslib_1.__read((0, react_1.useState)(false), 2), renderTooltip = _a[0], setRenderTooltip = _a[1];
     var timeoutRef = (0, react_1.useRef)();
     var elementRef = (0, react_1.useRef)(null);
-    var onMouseEnter = (0, react_1.useCallback)(function () {
+    var handleOnMouseEnter = (0, react_1.useCallback)(function (e) {
         timeoutRef.current = setTimeout(function () {
             if (!elementRef.current) {
                 return;
             }
             var _a = elementRef.current, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            if (scrollWidth > clientWidth || scrollHeight > clientHeight) {
+            // Added + 2 to accomodated for different font style and slight line height issues
+            if (scrollWidth > clientWidth || scrollHeight > clientHeight + 2) {
                 setRenderTooltip(true);
             }
             else {
                 setRenderTooltip(false);
             }
         }, DELAY);
-    }, []);
-    var onMouseLeave = (0, react_1.useCallback)(function () {
+        onMouseEnter && onMouseEnter(e);
+    }, [onMouseEnter]);
+    var handleOnMouseLeave = (0, react_1.useCallback)(function (e) {
         clearTimeout(timeoutRef.current);
-    }, []);
-    return { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, elementRef: elementRef, renderTooltip: renderTooltip };
+        setRenderTooltip(false);
+        onMouseLeave && onMouseLeave(e);
+    }, [onMouseLeave]);
+    return {
+        mouseEventProps: {
+            onMouseEnter: noTooltipOnTruncation ? onMouseEnter : handleOnMouseEnter,
+            onMouseLeave: noTooltipOnTruncation ? onMouseLeave : handleOnMouseLeave,
+        },
+        elementRef: elementRef,
+        renderTooltip: !noTooltipOnTruncation && renderTooltip,
+    };
 };
 exports.useTruncateWithTooltip = useTruncateWithTooltip;

package/truncateWithTooltip/types.d.ts

@@ -1,16 +1,20 @@
-/// <reference types="react" />
-import { ClassName } from '../types';
-import { TooltipProps } from '../tooltip';
-import { Override } from '../overrides';
-export declare type TruncateWithTooltipProps = {
+import type { ClassName } from '../types';
+import type { TooltipProps } from '../tooltip';
+import type { Override } from '../overrides';
+import type { ReactNode, ReactElement } from 'react';
+type TruncationType = 'ellipsis' | 'gradient';
+export type TruncateWithTooltipProps = {
     className?: ClassName;
+    truncationType?: TruncationType;
     tooltipClassName?: ClassName;
-    prefixEl?: React.ReactElement | null;
-    suffixEl?: React.ReactElement | null;
-    children: string;
+    prefixEl?: ReactElement | null;
+    suffixEl?: ReactElement | null;
+    maskWidth?: number;
+    children?: ReactNode;
     overrides?: {
         Tooltip?: Override<TooltipProps & Record<string, any>>;
     };
+    noTooltipOnTruncation?: boolean;
 } & ({
     maxLines: number;
     maxWidth?: never;
@@ -18,3 +22,4 @@ export declare type TruncateWithTooltipProps = {
     maxWidth: number;
     maxLines?: never;
 });
+export {};