@sprinklrjs/spaceweb 11.0.0 → 12.33.2-rc.1

package/esm/tooltip/tooltip.js

@@ -1,16 +1,17 @@
 import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 // TODO: baseui/tooltip is using Popover internally which we cannot override
-import { Tooltip as BaseTooltip } from 'baseui/tooltip';
+import { Tooltip as BaseTooltip } from '../baseui/tooltip';
 import * as React from 'react';
+import { useMemo } from 'react';
 import { PopoverChildEnhancer } from '../popover/PopoverEnahncer';
-import { useConvertOverrides } from '../helpers/baseui/useConvertOverrides';
 import { LayersManager, Z_INDEX } from '../layer';
-import { useOverrides } from '../overrides';
+import { mergeOverrides, useOverrides } from '../overrides';
 import { useFocusLock, useContent } from '../popover/hooks';
 import useUniqueId from '../hooks/useUniqueId';
 import { getArrowStyle, getBodyStyle, innerStyles } from './overrides';
 import { StyledLabel } from './styled-component';
+import { getPopperOptions } from '../popover/utils';
 var DISABLED_FOCUS_PROPS = {
     autoFocus: false,
     focusLock: false,
@@ -19,28 +20,34 @@ var DISABLED_FOCUS_PROPS = {
 // @ts-ignore
 BaseTooltip.displayName = 'BaseUITooltip';
 var Tooltip = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, label = _a.label, content = _a.content, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, children = _a.children, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.triggerType, triggerType = _d === void 0 ? 'hover' : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, _f = _a.focusLock, focusLock = _f === void 0 ? false : _f, _g = _a.placement, placement = _g === void 0 ? 'auto' : _g, restProps = __rest(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement"]);
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, label = _a.label, content = _a.content, _c = _a.overrides, overrides = _c === void 0 ? {} : _c, children = _a.children, targetElement = _a.targetElement, isOpen = _a.isOpen, _d = _a.triggerType, triggerType = _d === void 0 ? 'hover' : _d, _e = _a.returnFocus, returnFocus = _e === void 0 ? triggerType === 'click' : _e, _f = _a.focusLock, focusLock = _f === void 0 ? false : _f, _g = _a.placement, placement = _g === void 0 ? 'auto' : _g, popperOptions = _a.popperOptions, ignoreBoundary = _a.ignoreBoundary, _h = _a.viewportAsBoundary, viewportAsBoundary = _h === void 0 ? true : _h, _j = _a.intent, intent = _j === void 0 ? 'default' : _j, restProps = __rest(_a, ["size", "label", "content", "overrides", "children", "targetElement", "isOpen", "triggerType", "returnFocus", "focusLock", "placement", "popperOptions", "ignoreBoundary", "viewportAsBoundary", "intent"]);
     var focusLockProps = useFocusLock({ returnFocus: returnFocus, focusLock: focusLock });
-    var sharedProps = { $size: size, $label: !!label };
-    var _h = __read(useOverrides(overrides.Label, StyledLabel), 2), Label = _h[0], labelProps = _h[1];
+    var sharedProps = useMemo(function () { return ({ $size: size, $label: !!label, $intent: intent }); }, [intent, label, size]);
+    var _k = __read(useOverrides(overrides.Label, StyledLabel), 2), Label = _k[0], labelProps = _k[1];
     // add label on top of content
     var contentToDisplay = [];
     if (label) {
         contentToDisplay.push(_jsx(Label, __assign({}, labelProps, sharedProps, { children: label }), "label"));
     }
     contentToDisplay.push(_jsx(React.Fragment, { children: typeof content === 'function' ? content() : content }, "content"));
-    var childNode = children;
+    var childNode;
     if (typeof children === 'function') {
         childNode = children({ isOpen: isOpen });
     }
-    var _j = useContent({ content: contentToDisplay }), setContentHost = _j.setContentHost, wrappedContent = _j.wrappedContent;
-    var _overrides = useConvertOverrides({
-        Body: { style: getBodyStyle, props: sharedProps },
-        Arrow: { style: getArrowStyle, props: sharedProps },
-        Inner: { style: innerStyles, props: __assign(__assign({}, sharedProps), { ref: setContentHost }) },
-    }, overrides, [overrides, size, label, setContentHost]);
+    else {
+        childNode = children;
+    }
+    var _l = useContent({ content: contentToDisplay }), setContentHost = _l.setContentHost, wrappedContent = _l.wrappedContent;
+    var _overrides = useMemo(function () {
+        return mergeOverrides({
+            Body: { style: getBodyStyle, props: sharedProps },
+            Arrow: { style: getArrowStyle, props: sharedProps },
+            Inner: { style: innerStyles, props: __assign(__assign({}, sharedProps), { ref: setContentHost }) },
+        }, overrides);
+    }, [overrides, setContentHost, sharedProps]);
     var id = useUniqueId();
-    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BaseTooltip, __assign({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
+    var mergedPopperOptions = useMemo(function () { return (__assign(__assign({}, getPopperOptions({ ignoreBoundary: ignoreBoundary, viewportAsBoundary: viewportAsBoundary })), popperOptions)); }, [popperOptions, ignoreBoundary, viewportAsBoundary]);
+    return (_jsx(LayersManager, __assign({ zIndex: Z_INDEX.POPOVER }, { children: _jsx(BaseTooltip, __assign({ id: id }, restProps, { triggerType: triggerType, isOpen: isOpen, overrides: _overrides, content: wrappedContent, placement: placement }, focusLockProps, (triggerType === 'hover' ? DISABLED_FOCUS_PROPS : {}), { popperOptions: mergedPopperOptions }, { children: _jsx(PopoverChildEnhancer, __assign({ targetElement: targetElement }, { children: childNode }), void 0) }), void 0) }), void 0));
 };
 Tooltip.displayName = 'Tooltip';
 export default Tooltip;

package/esm/tooltip/types.d.ts

@@ -1,12 +1,14 @@
-import { TetherPlacement } from 'baseui/layer';
-import { SharedStylePropsArg } from 'baseui/popover';
-import { StatefulTooltipProps as BaseStatefulTooltipProps, TooltipProps as BaseTooltipProps } from 'baseui/tooltip';
+import { TetherPlacement } from '../baseui/layer';
+import { SharedStylePropsArg } from '../baseui/popover';
+import { StatefulTooltipProps as BaseStatefulTooltipProps, TooltipProps as BaseTooltipProps } from '../baseui/tooltip';
 import * as React from 'react';
 import { Override } from '../overrides';
 import { TriggerType } from '../popover';
+import type { Intent } from '../types';
 declare type SpacewebSharedProps = {
     $size: Size;
     $label: boolean;
+    $intent: Intent;
 };
 export declare type Size = 'sm' | 'md' | 'lg';
 export declare type SharedProps = SharedStylePropsArg & SpacewebSharedProps;
@@ -39,6 +41,8 @@ export declare type StatefulTooltipProps = Omit<BaseStatefulTooltipProps, 'overr
     dismissOnEsc?: boolean;
     triggerType?: TriggerType;
     placement?: TetherPlacement;
+    viewportAsBoundary?: boolean;
+    intent?: Intent;
 } & DeprecatedProps;
 export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'children' | 'autoFocus' | 'focusLock' | 'returnFocus' | 'triggerType' | 'placement'> & {
     overrides?: {
@@ -54,6 +58,8 @@ export declare type TooltipProps = Omit<BaseTooltipProps, 'overrides' | 'childre
     targetElement?: HTMLElement | null;
     triggerType?: TriggerType;
     placement?: TetherPlacement;
+    viewportAsBoundary?: boolean;
+    intent?: Intent;
 } & DeprecatedProps;
 export type { Placement, TriggerType, AccessibilityType } from '../popover';
-export type { StatefulTooltipContainerProps } from 'baseui/tooltip';
+export type { StatefulTooltipContainerProps } from '../baseui/tooltip';

package/esm/transitions/collapse/collapse.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { CollapseProps } from './types';
+declare const Collapse: {
+    ({ visible, timingFunction, children, onEnter, onEntering, onEntered, onExit, onExited, onExiting, disableExitTransition, disableEnterTransition, enableAppearTransition, containerRef, duration, dimension, overrides, collapsedSize, unmountOnExit, ...props }: CollapseProps): ReactElement;
+    displayName: string;
+};
+export default Collapse;

package/esm/transitions/collapse/collapse.js

@@ -0,0 +1,64 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import BaseTransition from 'react-transition-group/Transition';
+import { forceReflow } from '../transition/helperFunction';
+import useCombinedHandler from '../../hooks/useCombinedHandler';
+import { StyledContainer } from './styled-components';
+import { useOverrides } from '../../overrides';
+import useCombinedRefs from '../../hooks/useCombinedRef';
+import { DEFAULT_TIMING_FUNCTION, DEFAULT_DURATION } from '../transition/constants';
+import usePreferredReducedMotion from '../../hooks/usePreferredReducedMotion';
+var Collapse = function (_a) {
+    var _b = _a.visible, visible = _b === void 0 ? true : _b, _c = _a.timingFunction, timingFunction = _c === void 0 ? DEFAULT_TIMING_FUNCTION : _c, children = _a.children, onEnter = _a.onEnter, onEntering = _a.onEntering, onEntered = _a.onEntered, onExit = _a.onExit, onExited = _a.onExited, onExiting = _a.onExiting, _d = _a.disableExitTransition, disableExitTransition = _d === void 0 ? false : _d, _e = _a.disableEnterTransition, disableEnterTransition = _e === void 0 ? false : _e, _f = _a.enableAppearTransition, enableAppearTransition = _f === void 0 ? false : _f, _g = _a.containerRef, containerRef = _g === void 0 ? null : _g, _h = _a.duration, duration = _h === void 0 ? { enter: DEFAULT_DURATION, exit: DEFAULT_DURATION } : _h, _j = _a.dimension, dimension = _j === void 0 ? 'height' : _j, overrides = _a.overrides, _k = _a.collapsedSize, collapsedSize = _k === void 0 ? 0 : _k, unmountOnExit = _a.unmountOnExit, props = __rest(_a, ["visible", "timingFunction", "children", "onEnter", "onEntering", "onEntered", "onExit", "onExited", "onExiting", "disableExitTransition", "disableEnterTransition", "enableAppearTransition", "containerRef", "duration", "dimension", "overrides", "collapsedSize", "unmountOnExit"]);
+    var prefersReducedMotion = usePreferredReducedMotion();
+    var nodeRef = useRef(null);
+    var mergedRef = useCombinedRefs(nodeRef, containerRef);
+    // eslint-disable-next-line no-param-reassign
+    if (unmountOnExit)
+        collapsedSize = 0;
+    var scrollKey = dimension === 'height' ? 'scrollHeight' : 'scrollWidth';
+    // accepting duration as both number and object
+    var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
+    var handleEnter = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = collapsedSize ? "".concat(collapsedSize, "px") : '0px';
+        }
+    }, onEnter);
+    var handleEntering = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = "".concat(nodeRef.current[scrollKey], "px");
+        }
+    }, onEntering);
+    var handleEntered = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = '';
+        }
+    }, onEntered);
+    var handleExit = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = "".concat(nodeRef.current[scrollKey], "px");
+            forceReflow(nodeRef.current);
+        }
+    }, onExit);
+    var handleExiting = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = "".concat(collapsedSize, "px");
+        }
+    }, onExiting);
+    var handleExited = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            nodeRef.current.style[dimension] = "".concat(collapsedSize, "px");
+        }
+    }, onExited);
+    var _l = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Container, StyledContainer), 2), Container = _l[0], containerProps = _l[1];
+    var sharedProps = {
+        $duration: durationProp,
+        $timingFunction: timingFunction,
+        $dimension: dimension,
+        $collapsedSize: collapsedSize,
+    };
+    return prefersReducedMotion ? (_jsx(Container, __assign({}, containerProps, sharedProps, { children: visible ? children : null }), void 0)) : (_jsx(BaseTransition, __assign({ in: visible }, props, { unmountOnExit: unmountOnExit, timeout: durationProp, nodeRef: nodeRef, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, enter: !disableEnterTransition, exit: !disableExitTransition, appear: enableAppearTransition }, { children: function (state) { return (_jsx(Container, __assign({ ref: mergedRef, "$state": state }, sharedProps, containerProps, { children: children }), void 0)); } }), void 0));
+};
+Collapse.displayName = 'Collapse';
+export default Collapse;

package/esm/transitions/collapse/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Collapse } from './collapse';
+export type { CollapseProps, CollapseSharedProps, Dimension, } from './types';
+export type { TransitionCallbacks, Duration, TimingFunction, } from '../transition/index';

package/esm/transitions/collapse/index.js

@@ -0,0 +1 @@
+export { default as Collapse } from './collapse';

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

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

package/esm/transitions/collapse/styled-components.js

@@ -0,0 +1,23 @@
+import { __assign } from "tslib";
+import { styled } from '../../style';
+import { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
+function getCollapseStyles($duration, $timingFunction, $dimension, $collapsedSize) {
+    var _a, _b;
+    return _a = {},
+        _a[EXITED] = (_b = {},
+            _b[$dimension] = "".concat($collapsedSize, "px"),
+            _b.visibility = $collapsedSize ? 'visible' : 'hidden',
+            _b),
+        _a[EXITING] = {
+            transition: "".concat($dimension, " ").concat($duration.exit, "ms ").concat($timingFunction),
+        },
+        _a[ENTERING] = {
+            transition: "".concat($dimension, " ").concat($duration.enter, "ms ").concat($timingFunction),
+        },
+        _a[ENTERED] = {},
+        _a;
+}
+export var StyledContainer = 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 (__assign({}, getCollapseStyles($duration, $timingFunction, $dimension, $collapsedSize)[$state]));
+});

package/esm/transitions/collapse/types.d.ts

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

package/esm/transitions/collapse/types.js

@@ -0,0 +1 @@
+export {};

package/esm/transitions/fade/fade.d.ts

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

package/esm/transitions/fade/fade.js

@@ -0,0 +1,27 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Transition } from '../transition/index';
+import { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
+import { DEFAULT_DURATION, DEFAULT_TIMING_FUNCTION } from '../transition/constants';
+var Fade = function (_a) {
+    var _b;
+    var _c = _a.duration, duration = _c === void 0 ? DEFAULT_DURATION : _c, _d = _a.timingFunction, timingFunction = _d === void 0 ? DEFAULT_TIMING_FUNCTION : _d, children = _a.children, props = __rest(_a, ["duration", "timingFunction", "children"]);
+    var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
+    var fadeStyles = (_b = {},
+        _b[ENTERING] = {
+            opacity: 1,
+            transition: "opacity ".concat(durationProp.enter, "ms ").concat(timingFunction),
+        },
+        _b[ENTERED] = {},
+        _b[EXITING] = {
+            opacity: 0,
+            transition: "opacity ".concat(durationProp.exit, "ms ").concat(timingFunction),
+        },
+        _b[EXITED] = {
+            opacity: 0,
+        },
+        _b);
+    return (_jsx(Transition, __assign({}, props, { animationStyles: fadeStyles, duration: duration }, { children: children }), void 0));
+};
+Fade.displayName = 'Fade';
+export default Fade;

package/esm/transitions/fade/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Fade } from './fade';
+export type { FadeProps } from './types';
+export type { TransitionCallbacks, Duration, TimingFunction } from '../transition/index';

package/esm/transitions/fade/index.js

@@ -0,0 +1 @@
+export { default as Fade } from './fade';

package/esm/transitions/fade/types.d.ts

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

package/esm/transitions/fade/types.js

@@ -0,0 +1 @@
+export {};

package/esm/transitions/grow/grow.d.ts

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

package/esm/transitions/grow/grow.js

@@ -0,0 +1,30 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Transition } from '../transition/index';
+import { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
+import { DEFAULT_DURATION, DEFAULT_TIMING_FUNCTION } from '../transition/constants';
+var Grow = function (_a) {
+    var _b;
+    var _c = _a.duration, duration = _c === void 0 ? DEFAULT_DURATION : _c, _d = _a.timingFunction, timingFunction = _d === void 0 ? DEFAULT_TIMING_FUNCTION : _d, children = _a.children, props = __rest(_a, ["duration", "timingFunction", "children"]);
+    var durationProp = typeof duration === 'number' ? { enter: duration, exit: duration } : duration;
+    var growStyles = (_b = {},
+        _b[ENTERING] = {
+            opacity: 1,
+            transform: 'scale(1)',
+            transition: "opacity ".concat(durationProp.enter, "ms ").concat(timingFunction, ",transform ").concat(durationProp.enter, "ms ").concat(timingFunction),
+        },
+        _b[ENTERED] = {},
+        _b[EXITING] = {
+            opacity: 0,
+            transform: 'scale(0.8)',
+            transition: "opacity ".concat(durationProp.exit, "ms ").concat(timingFunction, ",transform ").concat(durationProp.enter, "ms ").concat(timingFunction),
+        },
+        _b[EXITED] = {
+            opacity: 0,
+            transform: 'scale(0.8)',
+        },
+        _b);
+    return (_jsx(Transition, __assign({}, props, { animationStyles: growStyles, duration: duration }, { children: children }), void 0));
+};
+Grow.displayName = 'Grow';
+export default Grow;

package/esm/transitions/grow/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Grow } from './grow';
+export type { GrowProps } from './types';
+export type { TransitionCallbacks, Duration, TimingFunction } from '../transition/index';

package/esm/transitions/grow/index.js

@@ -0,0 +1 @@
+export { default as Grow } from './grow';

package/esm/transitions/grow/types.d.ts

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

package/esm/transitions/grow/types.js

@@ -0,0 +1 @@
+export {};

package/esm/transitions/transition/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ENTERED = "entered";
+export declare const ENTERING = "entering";
+export declare const EXITING = "exiting";
+export declare const EXITED = "exited";
+export declare const DEFAULT_DURATION = 150;
+export declare const DEFAULT_TIMING_FUNCTION = "linear";

package/esm/transitions/transition/constants.js

@@ -0,0 +1,6 @@
+export var ENTERED = 'entered';
+export var ENTERING = 'entering';
+export var EXITING = 'exiting';
+export var EXITED = 'exited';
+export var DEFAULT_DURATION = 150;
+export var DEFAULT_TIMING_FUNCTION = 'linear';

package/esm/transitions/transition/helperFunction.d.ts

@@ -0,0 +1 @@
+export declare const forceReflow: (node: HTMLDivElement) => void;

package/esm/transitions/transition/helperFunction.js

@@ -0,0 +1,5 @@
+// reading a dimension prop will cause the browser to recalculate,
+// which will let our animations work
+export var forceReflow = function (node) {
+    node.scrollTop;
+};

package/esm/transitions/transition/index.d.ts

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

package/esm/transitions/transition/index.js

@@ -0,0 +1,3 @@
+export { default as Transition } from './transition';
+export { default as TransitionGroup } from './transitionGroup';
+export { ENTERED, ENTERING, EXITED, EXITING } from './constants';

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

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

package/esm/transitions/transition/styled-component.js

@@ -0,0 +1,24 @@
+var _a;
+import { styled } from '../../style';
+import { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
+import { DEFAULT_TIMING_FUNCTION, DEFAULT_DURATION } from './constants';
+var defaultStyles = (_a = {},
+    _a[ENTERING] = {
+        opacity: 1,
+        transition: "opacity ".concat(DEFAULT_DURATION, "ms ").concat(DEFAULT_TIMING_FUNCTION),
+    },
+    _a[ENTERED] = {},
+    _a[EXITING] = {
+        opacity: 0,
+        transition: "opacity ".concat(DEFAULT_DURATION, "ms ").concat(DEFAULT_TIMING_FUNCTION),
+    },
+    _a[EXITED] = {
+        opacity: 0,
+    },
+    _a);
+export var StyledContainer = styled('div', function (_, _a) {
+    var $state = _a.$state, $animationStyles = _a.$animationStyles;
+    if ($animationStyles)
+        return $animationStyles[$state];
+    return defaultStyles[$state];
+});

package/esm/transitions/transition/transition.d.ts

@@ -0,0 +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;
+    displayName: string;
+};
+export default Transition;

package/esm/transitions/transition/transition.js

@@ -0,0 +1,34 @@
+import { __assign, __read, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import BaseTransition from 'react-transition-group/Transition';
+import { StyledContainer } from './styled-component';
+import { useOverrides } from '../../overrides';
+import { forceReflow } from './helperFunction';
+import useCombinedRefs from '../../hooks/useCombinedRef';
+import useCombinedHandler from '../../hooks/useCombinedHandler';
+import { DEFAULT_DURATION } from './constants';
+import usePreferredReducedMotion from '../../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 ? 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 = __rest(_a, ["visible", "children", "duration", "overrides", "containerRef", "onEnter", "onExit", "animationStyles", "disableExitTransition", "disableEnterTransition", "enableAppearTransition"]);
+    var prefersReducedMotion = usePreferredReducedMotion();
+    var nodeRef = useRef(null);
+    var mergedRef = useCombinedRefs(nodeRef, containerRef);
+    var handleEnter = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            forceReflow(nodeRef.current);
+        }
+    }, onEnter);
+    var handleExit = useCombinedHandler(function () {
+        if (nodeRef.current) {
+            forceReflow(nodeRef.current);
+        }
+    }, onExit);
+    var sharedProps = {
+        $animationStyles: animationStyles,
+    };
+    var _j = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Container, StyledContainer), 2), Container = _j[0], containerProps = _j[1];
+    return prefersReducedMotion ? (_jsx(Container, __assign({}, containerProps, sharedProps, { children: visible ? children : null }), void 0)) : (_jsx(BaseTransition, __assign({ in: visible }, props, { onEnter: handleEnter, onExit: handleExit, timeout: duration, nodeRef: nodeRef, enter: !disableEnterTransition, exit: !disableExitTransition, appear: enableAppearTransition }, { children: function (state) { return (_jsx(Container, __assign({ ref: mergedRef, "$state": state }, sharedProps, containerProps, { children: children }), void 0)); } }), void 0));
+};
+Transition.displayName = 'Transition';
+export default Transition;

package/esm/transitions/transition/transitionGroup.d.ts

@@ -0,0 +1,4 @@
+declare const TransitionGroupWrapper: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TransitionGroupWrapper;

package/esm/transitions/transition/transitionGroup.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import usePreferredReducedMotion from '../../hooks/usePreferredReducedMotion';
+import { TransitionGroup } from 'react-transition-group';
+import { Box } from '../../box';
+var TransitionGroupWrapper = function (_a) {
+    var props = __rest(_a, []);
+    var prefersReduced = usePreferredReducedMotion();
+    return prefersReduced ? _jsx(Box, { children: props.children }, void 0) : _jsxs(TransitionGroup, __assign({}, props, { children: [" ", props.children] }), void 0);
+};
+export default TransitionGroupWrapper;

package/esm/transitions/transition/types.d.ts

@@ -0,0 +1,40 @@
+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 = {
+    enter: number;
+    exit: number;
+};
+export declare type TimingFunction = CSSProperties['transitionTimingFunction'];
+export declare type TransitionSharedProps = {
+    $animationStyles?: AnimationStyles | null;
+};
+declare type TransitionOverrides = {
+    Container?: Override<TransitionSharedProps>;
+};
+export declare type TransitionCallbacks = {
+    onEnter?: (isAppearing: boolean) => void;
+    onEntering?: (isAppearing: boolean) => void;
+    onEntered?: (isAppearing: boolean) => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+};
+export declare type TransitionProps = TransitionCallbacks & {
+    overrides?: TransitionOverrides;
+    containerRef?: React.Ref<HTMLElement>;
+    visible?: boolean;
+    children: ReactNode;
+    duration?: Duration | number;
+    enableAppearTransition?: boolean;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    disableEnterTransition?: boolean;
+    disableExitTransition?: boolean;
+    animationStyles?: AnimationStyles | null;
+};
+export declare type AnimationStyles = {
+    [status in AnimationStatus]: CSS.Properties<string | number>;
+};
+export {};

package/esm/transitions/transition/types.js

@@ -0,0 +1 @@
+export {};

package/esm/truncateWithTooltip/TruncateWithTooltip.d.ts

@@ -0,0 +1,4 @@
+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 default TruncateWithTooltip;

package/esm/truncateWithTooltip/TruncateWithTooltip.js

@@ -0,0 +1,20 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { memo } from 'react';
+// Hooks
+import { useOverrides } from '../overrides';
+import { useTruncateWithTooltip } from './hooks/useTruncateWithTooltip';
+// Components
+import { Box } from '../box';
+import { StatefulTooltip } from '../tooltip';
+var INITIAL_STATE = { isOpen: true };
+var TruncateWithTooltip = 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 = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.Tooltip, StatefulTooltip), 2), TooltipComponent = _c[0], tooltipProps = _c[1];
+    var _d = useTruncateWithTooltip(), onMouseEnter = _d.onMouseEnter, onMouseLeave = _d.onMouseLeave, renderTooltip = _d.renderTooltip, elementRef = _d.elementRef;
+    var el = (_jsxs(Box, __assign({ "data-testid": "content", className: [className, 'flex items-center', maxWidth ? { maxWidth: "".concat(maxWidth, "rem") } : undefined], onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { children: [prefixEl, _jsx(Box, __assign({ ref: elementRef, className: [maxLines ? ['line-clamp-1 whitespace-normal', { WebkitLineClamp: maxLines }] : ['truncate']] }, { children: children }), void 0), suffixEl] }), void 0));
+    return renderTooltip ? (_jsx(TooltipComponent, __assign({ content: _jsx(Box, __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);
+});
+TruncateWithTooltip.displayName = 'TruncateWithTooltip';
+export default TruncateWithTooltip;

package/esm/truncateWithTooltip/hooks/useTruncateWithTooltip.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+export declare const useTruncateWithTooltip: () => {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    elementRef: RefObject<HTMLElement>;
+    renderTooltip: boolean;
+};

package/esm/truncateWithTooltip/hooks/useTruncateWithTooltip.js

@@ -0,0 +1,26 @@
+import { __read } from "tslib";
+import { useState, useCallback, useRef } from 'react';
+var DELAY = 200;
+export var useTruncateWithTooltip = function () {
+    var _a = __read(useState(false), 2), renderTooltip = _a[0], setRenderTooltip = _a[1];
+    var timeoutRef = useRef();
+    var elementRef = useRef(null);
+    var onMouseEnter = useCallback(function () {
+        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) {
+                setRenderTooltip(true);
+            }
+            else {
+                setRenderTooltip(false);
+            }
+        }, DELAY);
+    }, []);
+    var onMouseLeave = useCallback(function () {
+        clearTimeout(timeoutRef.current);
+    }, []);
+    return { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, elementRef: elementRef, renderTooltip: renderTooltip };
+};

package/esm/truncateWithTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TruncateWithTooltip } from './TruncateWithTooltip';
+export type { TruncateWithTooltipProps } from './types';

package/esm/truncateWithTooltip/index.js

@@ -0,0 +1 @@
+export { default as TruncateWithTooltip } from './TruncateWithTooltip';