@useblu/ocean-react 1.131.0 → 1.133.0

package/index.es.js

@@ -34592,35 +34592,65 @@ var getInputPlaceholder = function (localeOption) {
 
 function useDisabledDaysTooltip(disabledDaysMessage) {
     var _a = e.useState(false), showDisabledTooltip = _a[0], setShowDisabledTooltip = _a[1];
+    var _b = e.useState(''), tooltipMessage = _b[0], setTooltipMessage = _b[1];
+    var _c = e.useState(null), tooltipPosition = _c[0], setTooltipPosition = _c[1];
     var tooltipTimerRef = e.useRef(null);
-    var handleDisabledDayClick = e.useCallback(function () {
-        if (disabledDaysMessage) {
-            if (tooltipTimerRef.current)
-                clearTimeout(tooltipTimerRef.current);
-            setShowDisabledTooltip(true);
-            tooltipTimerRef.current = setTimeout(function () { return setShowDisabledTooltip(false); }, 4000);
-        }
+    var lastDisabledClickRef = e.useRef(null);
+    var resolveMessage = e.useCallback(function (day) {
+        var _a;
+        if (!disabledDaysMessage)
+            return '';
+        if (typeof disabledDaysMessage === 'string')
+            return disabledDaysMessage;
+        if (!day)
+            return '';
+        var entry = disabledDaysMessage.find(function (e) { return isSameDay(e.date, day); });
+        return (_a = entry === null || entry === void 0 ? void 0 : entry.message) !== null && _a !== void 0 ? _a : '';
     }, [disabledDaysMessage]);
-    var handleEnabledDayClick = e.useCallback(function () {
-        setShowDisabledTooltip(false);
-    }, []);
+    var handleCalendarClick = e.useCallback(function (event) {
+        if (!disabledDaysMessage)
+            return;
+        var target = event.target;
+        var disabledDay = target.closest('button.ods-date__disabled');
+        if (!disabledDay)
+            return;
+        var message = resolveMessage(lastDisabledClickRef.current);
+        if (!message)
+            return;
+        var container = event.currentTarget;
+        var containerRect = container.getBoundingClientRect();
+        var dayRect = disabledDay.getBoundingClientRect();
+        var arrowLeft = dayRect.left - containerRect.left + dayRect.width / 2;
+        var top = dayRect.top - containerRect.top - 12;
+        if (tooltipTimerRef.current)
+            clearTimeout(tooltipTimerRef.current);
+        setTooltipMessage(message);
+        setTooltipPosition({ top: top, arrowLeft: arrowLeft });
+        setShowDisabledTooltip(true);
+        tooltipTimerRef.current = setTimeout(function () { return setShowDisabledTooltip(false); }, 5000);
+    }, [disabledDaysMessage, resolveMessage]);
     var createDayClickHandler = e.useCallback(function (originalHandler) {
         return function (day, modifiers) {
             if (modifiers.disabled) {
-                handleDisabledDayClick();
+                lastDisabledClickRef.current = day;
                 return;
             }
-            handleEnabledDayClick();
+            lastDisabledClickRef.current = null;
+            setShowDisabledTooltip(false);
+            setTooltipPosition(null);
             originalHandler(day);
         };
-    }, [handleDisabledDayClick, handleEnabledDayClick]);
+    }, []);
     e.useEffect(function () { return function () {
         if (tooltipTimerRef.current)
             clearTimeout(tooltipTimerRef.current);
     }; }, []);
     return {
         showDisabledTooltip: showDisabledTooltip,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
         createDayClickHandler: createDayClickHandler,
+        handleCalendarClick: handleCalendarClick,
     };
 }
 
@@ -34636,7 +34666,7 @@ function useDatePickerSingle(_a) {
     var _c = e.useState(''), currentField = _c[0], setCurrentField = _c[1];
     var _d = e.useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
     var _e = e.useState(''), datePickerCache = _e[0], setDatePickerCache = _e[1];
-    var _f = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _f.showDisabledTooltip, createDayClickHandler = _f.createDayClickHandler;
+    var _f = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _f.showDisabledTooltip, tooltipMessage = _f.tooltipMessage, tooltipPosition = _f.tooltipPosition, createDayClickHandler = _f.createDayClickHandler, handleCalendarClick = _f.handleCalendarClick;
     var fromDate = parse$1(value || '', localeDateFormat, new Date());
     var updateState = function (updateData, updateCache) {
         onSelect(updateData);
@@ -34721,6 +34751,9 @@ function useDatePickerSingle(_a) {
         handleCloseByOutside: handleCloseByOutside,
         currentMonthToDisplay: currentMonthToDisplay,
         showDisabledTooltip: showDisabledTooltip,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
+        handleCalendarClick: handleCalendarClick,
         handleDayClickWithModifiers: handleDayClickWithModifiers,
     };
 }
@@ -34756,10 +34789,12 @@ var DatePickerHeader = function (_a) {
 };
 
 var DisabledDaysTooltip = function (_a) {
-    var message = _a.message, show = _a.show, _b = _a.testId, testId = _b === void 0 ? 'datepicker-disabled-tooltip' : _b;
-    if (!show)
+    var message = _a.message, show = _a.show, position = _a.position, _b = _a.testId, testId = _b === void 0 ? 'datepicker-disabled-tooltip' : _b;
+    if (!show || !position)
         return null;
-    return (e.createElement("div", { className: "ods-date__disabled-tooltip", role: "tooltip", "data-testid": testId }, message));
+    return (e.createElement("div", { className: "ods-date__disabled-tooltip", role: "tooltip", "data-testid": testId, style: { top: "".concat(position.top, "px") } },
+        message,
+        e.createElement("div", { className: "ods-date__disabled-tooltip__arrow", style: { left: "".concat(position.arrowLeft, "px") } })));
 };
 
 var DatePickerSingle = e.forwardRef(function (_a, ref) {
@@ -34770,13 +34805,11 @@ var DatePickerSingle = e.forwardRef(function (_a, ref) {
         startsToday: startsToday,
         locale: locale,
         disabledDaysMessage: disabledDaysMessage,
-    }), input1Ref = _c.input1Ref, showDayPicker = _c.showDayPicker, selectedDay = _c.selectedDay, CustomStyles = _c.CustomStyles, localeOption = _c.localeOption, currentField = _c.currentField, inputPlaceholder = _c.inputPlaceholder, inputChange = _c.inputChange, createHandleToggleClick = _c.createHandleToggleClick, formatDay = _c.formatDay, handleCloseByOutside = _c.handleCloseByOutside, currentMonthToDisplay = _c.currentMonthToDisplay, showDisabledTooltip = _c.showDisabledTooltip, handleDayClickWithModifiers = _c.handleDayClickWithModifiers;
+    }), input1Ref = _c.input1Ref, showDayPicker = _c.showDayPicker, selectedDay = _c.selectedDay, CustomStyles = _c.CustomStyles, localeOption = _c.localeOption, currentField = _c.currentField, inputPlaceholder = _c.inputPlaceholder, inputChange = _c.inputChange, createHandleToggleClick = _c.createHandleToggleClick, formatDay = _c.formatDay, handleCloseByOutside = _c.handleCloseByOutside, currentMonthToDisplay = _c.currentMonthToDisplay, showDisabledTooltip = _c.showDisabledTooltip, tooltipMessage = _c.tooltipMessage, tooltipPosition = _c.tooltipPosition, handleCalendarClick = _c.handleCalendarClick, handleDayClickWithModifiers = _c.handleDayClickWithModifiers;
     var calendarOpen = inline || showDayPicker;
     var CaptionWithTooltip = function (_a) {
         var displayMonth = _a.displayMonth;
-        return (e.createElement(e.Fragment, null,
-            DatePickerHeader({ displayMonth: displayMonth, locale: localeOption, mode: 'single' }),
-            disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: disabledDaysMessage, show: showDisabledTooltip }))));
+        return (e.createElement(e.Fragment, null, DatePickerHeader({ displayMonth: displayMonth, locale: localeOption, mode: 'single' })));
     };
     return (e.createElement("div", null,
         calendarOpen && !inline && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
@@ -34788,10 +34821,11 @@ var DatePickerSingle = e.forwardRef(function (_a, ref) {
                             'date-field-focussed': currentField === 'start-date',
                         }), name: "start-date", value: value, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && helperText) || undefined, maxLength: 10 }))),
                 inline && label && (e.createElement("div", { className: "ods-date__inline-label" }, label)),
-                !disabled && calendarOpen && (e.createElement("div", { "data-testid": "datepicker-calendar" },
+                !disabled && calendarOpen && (e.createElement("div", { "data-testid": "datepicker-calendar", className: "ods-date__calendar-container", role: "presentation", onClick: handleCalendarClick },
                     e.createElement(DayPicker, { mode: "single", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles(inline), className: className, onDayClick: handleDayClickWithModifiers, formatters: { formatDay: formatDay }, selected: selectedDay, disabled: startsToday ? { before: new Date() } : disabledDays, defaultMonth: currentMonthToDisplay, components: {
                             Caption: CaptionWithTooltip,
-                        } })))))));
+                        } }),
+                    disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: tooltipMessage, show: showDisabledTooltip, position: tooltipPosition }))))))));
 });
 DatePickerSingle.displayName = 'DatePickerSingle';
 
@@ -34808,7 +34842,7 @@ function useDatePicker(_a) {
     var _d = e.useState(), currentMonthToDisplay = _d[0], setCurrentMonthToDisplay = _d[1];
     var _e = e.useState({ from: '', to: '' }), datePickerCache = _e[0], setDatePickerCache = _e[1];
     var _f = e.useState(false), firstInputClicked = _f[0], setFirstInputClicked = _f[1];
-    var _g = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _g.showDisabledTooltip, createDayClickHandler = _g.createDayClickHandler;
+    var _g = useDisabledDaysTooltip(disabledDaysMessage), showDisabledTooltip = _g.showDisabledTooltip, tooltipMessage = _g.tooltipMessage, tooltipPosition = _g.tooltipPosition, createDayClickHandler = _g.createDayClickHandler, handleCalendarClick = _g.handleCalendarClick;
     var fromDate = parse$1(values.from, localeDateFormat, new Date());
     var toDate = parse$1(values.to, localeDateFormat, new Date());
     var updateState = function (updateData, updateCache) {
@@ -34961,6 +34995,9 @@ function useDatePicker(_a) {
         handleDayClick: handleDayClick,
         handleDayClickWithModifiers: handleDayClickWithModifiers,
         showDisabledTooltip: showDisabledTooltip,
+        tooltipMessage: tooltipMessage,
+        tooltipPosition: tooltipPosition,
+        handleCalendarClick: handleCalendarClick,
         inputChange: inputChange,
         createHandleToggleClick: createHandleToggleClick,
         formatDay: formatDay,
@@ -34978,7 +35015,7 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
         startsToday: startsToday,
         locale: locale,
         disabledDaysMessage: disabledDaysMessage,
-    }), input1Ref = _b.input1Ref, input2Ref = _b.input2Ref, showDayPicker = _b.showDayPicker, selectedDays = _b.selectedDays, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, inputPlaceholder = _b.inputPlaceholder, handleDayMouseEnter = _b.handleDayMouseEnter, handleDayClickWithModifiers = _b.handleDayClickWithModifiers, showDisabledTooltip = _b.showDisabledTooltip, handleDisplayMonth = _b.handleDisplayMonth, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside, currentMonthToDisplay = _b.currentMonthToDisplay;
+    }), input1Ref = _b.input1Ref, input2Ref = _b.input2Ref, showDayPicker = _b.showDayPicker, selectedDays = _b.selectedDays, CustomStyles = _b.CustomStyles, localeOption = _b.localeOption, currentField = _b.currentField, inputPlaceholder = _b.inputPlaceholder, handleDayMouseEnter = _b.handleDayMouseEnter, handleDayClickWithModifiers = _b.handleDayClickWithModifiers, showDisabledTooltip = _b.showDisabledTooltip, tooltipMessage = _b.tooltipMessage, tooltipPosition = _b.tooltipPosition, handleCalendarClick = _b.handleCalendarClick, handleDisplayMonth = _b.handleDisplayMonth, inputChange = _b.inputChange, createHandleToggleClick = _b.createHandleToggleClick, formatDay = _b.formatDay, handleCloseByOutside = _b.handleCloseByOutside, currentMonthToDisplay = _b.currentMonthToDisplay;
     return (e.createElement("div", null,
         showDayPicker && (e.createElement("div", { className: "ods-date-background", "data-testid": "date-picker-outside", onClick: handleCloseByOutside })),
         e.createElement("div", __assign$1({ className: classNames('ods-date', className), ref: ref }, rest),
@@ -34993,15 +35030,14 @@ var DatePickerRange = e.forwardRef(function (_a, ref) {
                     e.createElement(Input, { ref: input2Ref, "data-testid": "datepicker-input-2", id: "end-date", type: "text", className: classNames({
                             'date-field-focussed': currentField === 'end-date',
                         }), name: "end-date", value: values.to, onChange: (editable && inputChange) || undefined, placeholder: inputPlaceholder, adornment: e.createElement(On, { size: 20, stroke: "#B6B9CC" }), autoComplete: "off", readOnly: !editable, disabled: disabled, error: !disabled && error, inputMode: "numeric", helperText: (!disabled && !showDayPicker && helperText) || undefined, maxLength: 10 })),
-                !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar" },
+                !disabled && showDayPicker && (e.createElement("div", { "data-testid": "datepicker-calendar", className: "ods-date__calendar-container", role: "presentation", onClick: handleCalendarClick },
                     e.createElement(DayPicker, { mode: "range", locale: localeOption, weekStartsOn: 0, classNames: CustomStyles, className: className, onDayClick: handleDayClickWithModifiers, onDayMouseEnter: function (day) { return handleDayMouseEnter(day); }, formatters: { formatDay: formatDay }, selected: selectedDays, disabled: startsToday ? { before: new Date() } : disabledDays, defaultMonth: currentMonthToDisplay, components: {
                             Caption: function (_a) {
                                 var displayMonth = _a.displayMonth;
-                                return (e.createElement(e.Fragment, null,
-                                    e.createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }),
-                                    disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: disabledDaysMessage, show: showDisabledTooltip }))));
+                                return (e.createElement(DatePickerHeader, { locale: localeOption, displayMonth: handleDisplayMonth(displayMonth) }));
                             },
-                        } })))))));
+                        } }),
+                    disabledDaysMessage && (e.createElement(DisabledDaysTooltip, { message: tooltipMessage, show: showDisabledTooltip, position: tooltipPosition }))))))));
 });
 DatePickerRange.displayName = 'DatePickerRange';
 
@@ -47749,9 +47785,26 @@ var InternalListActions = forwardRef(function (_a, forwardedRef) {
 });
 InternalListActions.displayName = 'InternalListActions';
 
+var AmountDetails = function (_a) {
+    var amount = _a.amount, _b = _a.type, type = _b === void 0 ? 'default' : _b, indicator = _a.indicator, _c = _a.indicatorSize, indicatorSize = _c === void 0 ? 'small' : _c, _d = _a.showIndicator, showIndicator = _d === void 0 ? true : _d, additionalData = _a.additionalData, _e = _a.showAdditionalData, showAdditionalData = _e === void 0 ? true : _e;
+    var isNegative = type === 'negative';
+    var isPositive = type === 'positive';
+    return (e.createElement("div", { className: "ods-amount-details" },
+        e.createElement("div", { className: "ods-amount-details__main" },
+            isNegative ? (e.createElement("div", { className: "ods-amount-details__amount-row" },
+                e.createElement("span", { className: "ods-amount-details__amount-sign" }, "- "),
+                e.createElement("p", { className: "ods-amount-details__amount" }, amount))) : (e.createElement("p", { className: classNames('ods-amount-details__amount', {
+                    'ods-amount-details__amount--positive': isPositive,
+                }) }, amount)),
+            showIndicator && indicator && (e.createElement("div", { className: classNames('ods-amount-details__indicator', {
+                    'ods-amount-details__indicator--medium': indicatorSize === 'medium',
+                }) }, indicator))),
+        showAdditionalData && additionalData && (e.createElement(Typography, { variant: "captionbold", className: "ods-amount-details__caption" }, additionalData))));
+};
+
 var ListAction = e.forwardRef(function (_a, ref) {
     var _b;
-    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, icon = _a.icon, indicator = _a.indicator, _h = _a.actionType, actionType = _h === void 0 ? 'chevron' : _h, menuActions = _a.menuActions, _j = _a.menuPosition, menuPosition = _j === void 0 ? 'bottom-right' : _j, onClick = _a.onClick, className = _a.className, _k = _a.showDivider, showDivider = _k === void 0 ? false : _k, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "disabled", "loading", "icon", "indicator", "actionType", "menuActions", "menuPosition", "onClick", "className", "showDivider"]);
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _c = _a.inverted, inverted = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.status, status = _e === void 0 ? 'default' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, icon = _a.icon, indicator = _a.indicator, _h = _a.actionType, actionType = _h === void 0 ? 'chevron' : _h, menuActions = _a.menuActions, _j = _a.menuPosition, menuPosition = _j === void 0 ? 'bottom-right' : _j, onClick = _a.onClick, className = _a.className, _k = _a.showDivider, showDivider = _k === void 0 ? false : _k, amountDetails = _a.amountDetails, position = _a.position, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "disabled", "loading", "icon", "indicator", "actionType", "menuActions", "menuPosition", "onClick", "className", "showDivider", "amountDetails", "position"]);
     var _l = useState(false), isSwipeOpen = _l[0], setIsSwipeOpen = _l[1];
     var _m = useState(0), menuWidth = _m[0], setMenuWidth = _m[1];
     var handleSwipeOpenChange = function (isOpen, width) {
@@ -47762,7 +47815,7 @@ var ListAction = e.forwardRef(function (_a, ref) {
     };
     var renderActionIcon = function () {
         if (actionType === 'chevron') {
-            return (e.createElement("div", { className: 'ods-list-action__action' },
+            return (e.createElement("div", { className: "ods-list-action__action" },
                 e.createElement(re, { size: 20 })));
         }
         if (actionType === 'menu' || actionType === 'swipe') {
@@ -47770,19 +47823,32 @@ var ListAction = e.forwardRef(function (_a, ref) {
         }
         return null;
     };
-    var renderLoadingContent = function () { return (e.createElement("div", { className: 'ods-list-action__skeleton' },
-        e.createElement(SkeletonBar, { width: '40%', height: '16px' }),
-        e.createElement(SkeletonBar, { width: '100%', height: '16px' }))); };
+    var renderLoadingContent = function () { return (e.createElement("div", { className: "ods-list-action__skeleton" },
+        e.createElement(SkeletonBar, { width: "40%", height: "16px" }),
+        e.createElement(SkeletonBar, { width: "100%", height: "16px" }))); };
     var contentStyle = isSwipeOpen && menuWidth > 0
         ? { transform: "translateX(-".concat(menuWidth, "px)") }
         : {};
+    var showLeading = position && icon;
+    var showLineAbove = position === 'middle' || position === 'last';
+    var showLineBelow = position === 'first' || position === 'middle';
     var renderContent = function () { return (e.createElement(e.Fragment, null,
-        e.createElement("div", { className: 'ods-list-action__content', style: contentStyle },
-            icon && (e.createElement("div", { className: classNames('ods-list-action__icon', {
+        e.createElement("div", { className: "ods-list-action__content", style: contentStyle },
+            showLeading ? (e.createElement("div", { className: "ods-list-action__position" },
+                e.createElement("div", { className: classNames('ods-list-action__position-line', {
+                        'ods-list-action__position-line--visible': showLineAbove,
+                    }) }),
+                e.createElement("div", { className: classNames('ods-list-action__icon', {
+                        'ods-list-action__icon--inactive': status === 'inactive',
+                    }) }, icon),
+                e.createElement("div", { className: classNames('ods-list-action__position-line', {
+                        'ods-list-action__position-line--visible': showLineBelow,
+                    }) }))) : (icon && (e.createElement("div", { className: classNames('ods-list-action__icon', {
                     'ods-list-action__icon--inactive': status === 'inactive',
-                }) }, icon)),
+                }) }, icon))),
             e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status }),
-            indicator && (e.createElement("div", { className: 'ods-list-action__indicator' }, indicator))),
+            amountDetails && e.createElement(AmountDetails, __assign$1({ type: status }, amountDetails)),
+            indicator && (e.createElement("div", { className: "ods-list-action__indicator" }, indicator))),
         renderActionIcon())); };
     var buttonClassName = classNames('ods-list-action', className, (_b = {
             'ods-list-action--loading': loading,
@@ -47792,9 +47858,9 @@ var ListAction = e.forwardRef(function (_a, ref) {
         },
         _b["ods-list-action--".concat(type)] = type,
         _b));
-    return (e.createElement("div", { className: 'ods-list-action__container' },
-        e.createElement("button", __assign$1({ ref: ref, type: 'button', "data-testid": 'list-action', className: buttonClassName, onClick: loading ? undefined : onClick, disabled: disabled || loading }, rest), loading ? renderLoadingContent() : renderContent()),
-        showDivider && type === 'text' && (e.createElement("div", { className: 'ods-list-action__divider' }))));
+    return (e.createElement("div", { className: "ods-list-action__container" },
+        e.createElement("button", __assign$1({ ref: ref, type: "button", "data-testid": "list-action", className: buttonClassName, onClick: loading ? undefined : onClick, disabled: disabled || loading }, rest), loading ? renderLoadingContent() : renderContent()),
+        showDivider && type === 'text' && (e.createElement("div", { className: "ods-list-action__divider" }))));
 });
 ListAction.displayName = 'ListAction';
 
@@ -47861,6 +47927,48 @@ var ListExpandable = e.forwardRef(function (_a, ref) {
 });
 ListExpandable.displayName = 'ListExpandable';
 
+var TransactionListExpandable = e.forwardRef(function (_a, ref) {
+    var _b;
+    var title = _a.title, description = _a.description, caption = _a.caption, amount = _a.amount, _c = _a.amountType, amountType = _c === void 0 ? 'default' : _c, amountIndicator = _a.amountIndicator, _d = _a.showAmountIndicator, showAmountIndicator = _d === void 0 ? true : _d, additionalData = _a.additionalData, _e = _a.inverted, inverted = _e === void 0 ? true : _e, _f = _a.type, type = _f === void 0 ? 'card' : _f, _g = _a.status, status = _g === void 0 ? 'default' : _g, _h = _a.loading, loading = _h === void 0 ? false : _h, icon = _a.icon, _j = _a.expanded, expanded = _j === void 0 ? false : _j, onToggle = _a.onToggle, children = _a.children, supportingText = _a.supportingText, className = _a.className, _k = _a.disabled, disabled = _k === void 0 ? false : _k, _l = _a.showDivider, showDivider = _l === void 0 ? false : _l, rest = __rest$1(_a, ["title", "description", "caption", "amount", "amountType", "amountIndicator", "showAmountIndicator", "additionalData", "inverted", "type", "status", "loading", "icon", "expanded", "onToggle", "children", "supportingText", "className", "disabled", "showDivider"]);
+    var handleToggle = function () {
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded);
+    };
+    var renderLoadingContent = function () { return (e.createElement(e.Fragment, null,
+        e.createElement("div", { className: "ods-list-expandable__icon", "aria-hidden": true },
+            e.createElement(SkeletonBar, { width: "24px", height: "24px" })),
+        e.createElement("div", { className: "ods-list-expandable__skeleton ods-list-expandable__transaction-content" },
+            e.createElement("div", { className: "ods-list-expandable__skeleton-list" },
+                e.createElement(SkeletonBar, { width: "33%", height: "16px" }),
+                e.createElement(SkeletonBar, { width: "100%", height: "16px" })),
+            e.createElement("div", { className: "ods-list-expandable__skeleton-amount" },
+                e.createElement(SkeletonBar, { width: "100%", height: "16px" }),
+                e.createElement(SkeletonBar, { width: "100%", height: "16px" }))))); };
+    var renderContent = function () { return (e.createElement(e.Fragment, null,
+        icon && (e.createElement("div", { className: classNames('ods-list-expandable__icon', {
+                'ods-list-expandable__icon--inactive': status === 'inactive',
+            }) }, icon)),
+        e.createElement("div", { className: "ods-list-expandable__transaction-content" },
+            e.createElement(ContentList, { title: title, description: description, caption: caption, inverted: inverted, type: status }),
+            e.createElement(AmountDetails, { amount: amount, type: amountType, indicator: amountIndicator, indicatorSize: "medium", showIndicator: showAmountIndicator, additionalData: additionalData, showAdditionalData: Boolean(additionalData) })),
+        e.createElement("div", { className: "ods-list-expandable__trailing" },
+            e.createElement("div", { className: "ods-list-expandable__action" }, expanded ? e.createElement(ae, { size: 20 }) : e.createElement(ee, { size: 20 }))))); };
+    var containerClassName = classNames('ods-list-expandable', 'ods-list-expandable--transaction', className, (_b = {
+            'ods-list-expandable--expanded': expanded,
+            'ods-list-expandable--disabled': disabled,
+            'ods-list-expandable--loading': loading
+        },
+        _b["ods-list-expandable--".concat(type)] = type,
+        _b));
+    return (e.createElement("div", __assign$1({ ref: ref, "data-testid": "transaction-list-expandable", className: containerClassName }, rest),
+        e.createElement("button", { type: "button", className: "ods-list-expandable__main", onClick: loading ? undefined : handleToggle, disabled: disabled || loading, "aria-expanded": expanded, "aria-label": "".concat(expanded ? 'Recolher' : 'Expandir', " ").concat(title), "data-testid": "transaction-list-expandable-button" }, loading ? renderLoadingContent() : renderContent()),
+        showDivider && !expanded && (e.createElement("div", { className: "ods-list-expandable__divider", "data-testid": "transaction-list-expandable-divider" })),
+        expanded && !loading && (children || supportingText) && (e.createElement(e.Fragment, null,
+            children && (e.createElement("div", { className: "ods-list-expandable__content ods-list-expandable__content--transaction" }, children)),
+            supportingText && (e.createElement("div", { className: "ods-list-expandable__footer", "data-testid": "transaction-list-expandable-supporting-text" }, supportingText)),
+            showDivider && (e.createElement("div", { className: "ods-list-expandable__divider", "data-testid": "transaction-list-expandable-divider" }))))));
+});
+TransactionListExpandable.displayName = 'TransactionListExpandable';
+
 var isListItemString = function (item) {
     return typeof item === 'object' && item !== null && 'description' in item;
 };
@@ -47937,5 +48045,5 @@ var ListSettings = e.forwardRef(function (_a, ref) {
 });
 ListSettings.displayName = 'ListSettings';
 
-export { Accordion, Alert, Badge, Breadcrumb, Button$1 as Button, CardGroup, CardListItem, Carousel, DoughnutChart as Chart, Checkbox, Chips, Col, Container, ContextualMenu, ContextualMenuItem, CrossSellCard, DatePickerSingle as DatePicker, DatePickerRange as DateRange, Divider, DoughnutChart, Drawer, index$1 as Grid, IconButton, Input, InternalContextualHero, Link, List, ListAction, ListExpandable, ListReadOnly, ListSelectable, ListSettings, Modal, Progress, Radio, Row$1 as Row, Search, Select, SelectAutocomplete, SettingsListItem, Shortcut, Snackbar, Stepper, Steps, SubHeader, Switch, Tag, TextArea, TextListItem, TokenInput, TopBar, TransactionListItem, Typography, UnorderedListItem, WebNotification };
+export { Accordion, Alert, Badge, Breadcrumb, Button$1 as Button, CardGroup, CardListItem, Carousel, DoughnutChart as Chart, Checkbox, Chips, Col, Container, ContextualMenu, ContextualMenuItem, CrossSellCard, DatePickerSingle as DatePicker, DatePickerRange as DateRange, Divider, DoughnutChart, Drawer, index$1 as Grid, IconButton, Input, InternalContextualHero, Link, List, ListAction, ListExpandable, ListReadOnly, ListSelectable, ListSettings, Modal, Progress, Radio, Row$1 as Row, Search, Select, SelectAutocomplete, SettingsListItem, Shortcut, Snackbar, Stepper, Steps, SubHeader, Switch, Tag, TextArea, TextListItem, TokenInput, TopBar, TransactionListExpandable, TransactionListItem, Typography, UnorderedListItem, WebNotification };
 //# sourceMappingURL=index.es.js.map