@useblu/ocean-react 1.117.0 → 1.118.0

package/index.js

@@ -47399,13 +47399,28 @@ var TriggerButton = function (_a) {
 };
 
 var InternalListActions = e.forwardRef(function (_a, forwardedRef) {
-    var actions = _a.actions, _b = _a.actionType, actionType = _b === void 0 ? 'menu' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.position, position = _d === void 0 ? 'bottom-right' : _d, className = _a.className, rest = __rest$1(_a, ["actions", "actionType", "disabled", "position", "className"]);
+    var actions = _a.actions, _b = _a.actionType, actionType = _b === void 0 ? 'menu' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.position, position = _d === void 0 ? 'bottom-right' : _d, className = _a.className, onOpenChange = _a.onOpenChange, rest = __rest$1(_a, ["actions", "actionType", "disabled", "position", "className", "onOpenChange"]);
     var _e = e.useState(false), isOpen = _e[0], setIsOpen = _e[1];
     var _f = e.useState(false), isClosing = _f[0], setIsClosing = _f[1];
     var wrapperRef = e.useRef(null);
     var triggerRef = e.useRef(null);
     var menuRef = e.useRef(null);
     var isSwipeMode = actionType === 'swipe';
+    var notifyOpenChange = function (open) {
+        if (open && isSwipeMode && menuRef.current) {
+            requestAnimationFrame(function () {
+                var _a;
+                var menuWidth = ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true, menuWidth);
+            });
+        }
+        else if (open) {
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+        }
+        else {
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+        }
+    };
     var handleSwipeLeft = function () {
         setIsOpen(true);
         setIsClosing(false);
@@ -47413,6 +47428,7 @@ var InternalListActions = e.forwardRef(function (_a, forwardedRef) {
     var handleClose = function () {
         if (isSwipeMode) {
             setIsClosing(true);
+            notifyOpenChange(false);
             setTimeout(function () {
                 setIsOpen(false);
                 setIsClosing(false);
@@ -47420,6 +47436,7 @@ var InternalListActions = e.forwardRef(function (_a, forwardedRef) {
         }
         else {
             setIsOpen(false);
+            notifyOpenChange(false);
         }
     };
     useSwipeGesture(triggerRef, isSwipeMode, isOpen, handleSwipeLeft);
@@ -47434,6 +47451,11 @@ var InternalListActions = e.forwardRef(function (_a, forwardedRef) {
             }
         }
     }, [forwardedRef]);
+    e.useEffect(function () {
+        if (isOpen && isSwipeMode && !isClosing) {
+            notifyOpenChange(true);
+        }
+    }, [isOpen, isSwipeMode, isClosing]);
     var handleToggle = function () {
         if (!disabled) {
             if (isOpen) {
@@ -47470,31 +47492,43 @@ InternalListActions.displayName = 'InternalListActions';
 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 _l = e.useState(false), isSwipeOpen = _l[0], setIsSwipeOpen = _l[1];
+    var _m = e.useState(0), menuWidth = _m[0], setMenuWidth = _m[1];
+    var handleSwipeOpenChange = function (isOpen, width) {
+        setIsSwipeOpen(isOpen);
+        if (width !== undefined) {
+            setMenuWidth(width);
+        }
+    };
     var renderActionIcon = function () {
         if (actionType === 'chevron') {
             return (e.createElement("div", { className: 'ods-list-action__action' },
                 e.createElement(re, { size: 20 })));
         }
         if (actionType === 'menu' || actionType === 'swipe') {
-            return (e.createElement(InternalListActions, { actions: menuActions || [], disabled: disabled, position: menuPosition, actionType: actionType }));
+            return (e.createElement(InternalListActions, { actions: menuActions || [], disabled: disabled, position: menuPosition, actionType: actionType, onOpenChange: actionType === 'swipe' ? handleSwipeOpenChange : undefined }));
         }
         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 contentStyle = isSwipeOpen && menuWidth > 0
+        ? { transform: "translateX(-".concat(menuWidth, "px)") }
+        : {};
     var renderContent = function () { return (e.createElement(e.Fragment, null,
-        icon && (e.createElement("div", { className: classNames('ods-list-action__icon', {
-                'ods-list-action__icon--inactive': status === 'inactive',
-            }) }, icon)),
-        e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status }),
-        e.createElement("div", { className: 'ods-list-action__trailing' },
-            indicator && (e.createElement("div", { className: 'ods-list-action__indicator' }, indicator)),
-            renderActionIcon()))); };
+        e.createElement("div", { className: 'ods-list-action__content', style: contentStyle },
+            icon && (e.createElement("div", { className: classNames('ods-list-action__icon', {
+                    'ods-list-action__icon--inactive': status === 'inactive',
+                }) }, 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))),
+        renderActionIcon())); };
     var buttonClassName = classNames('ods-list-action', className, (_b = {
             'ods-list-action--loading': loading,
             'ods-list-action--disabled': disabled,
-            'ods-list-action--swipe-mode': actionType === 'swipe'
+            'ods-list-action--swipe-mode': actionType === 'swipe',
+            'ods-list-action--swipe-open': isSwipeOpen
         },
         _b["ods-list-action--".concat(type)] = type,
         _b));
@@ -47504,12 +47538,51 @@ var ListAction = e.forwardRef(function (_a, ref) {
 });
 ListAction.displayName = 'ListAction';
 
+var ListExpandable = 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.loading, loading = _f === void 0 ? false : _f, icon = _a.icon, indicator = _a.indicator, controlledExpanded = _a.expanded, _g = _a.defaultExpanded, defaultExpanded = _g === void 0 ? false : _g, onToggle = _a.onToggle, children = _a.children, className = _a.className, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.showDivider, showDivider = _j === void 0 ? false : _j, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "loading", "icon", "indicator", "expanded", "defaultExpanded", "onToggle", "children", "className", "disabled", "showDivider"]);
+    var _k = e.useState(defaultExpanded), internalExpanded = _k[0], setInternalExpanded = _k[1];
+    var isControlled = controlledExpanded !== undefined;
+    var isExpanded = isControlled ? controlledExpanded : internalExpanded;
+    var handleToggle = function () {
+        var newExpandedState = !isExpanded;
+        if (!isControlled) {
+            setInternalExpanded(newExpandedState);
+        }
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(newExpandedState);
+    };
+    var renderLoadingContent = function () { return (e.createElement("div", { className: "ods-list-expandable__skeleton" },
+        e.createElement(SkeletonBar, { width: "40%", 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(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: status }),
+        e.createElement("div", { className: "ods-list-expandable__trailing" },
+            indicator && (e.createElement("div", { className: "ods-list-expandable__indicator" }, indicator)),
+            e.createElement("div", { className: "ods-list-expandable__action" }, isExpanded ? e.createElement(ae, { size: 20 }) : e.createElement(ee, { size: 20 }))))); };
+    var containerClassName = classNames('ods-list-expandable', className, (_b = {
+            'ods-list-expandable--expanded': isExpanded,
+            '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": "list-expandable", className: containerClassName }, rest),
+        e.createElement("button", { type: "button", className: "ods-list-expandable__main", onClick: loading ? undefined : handleToggle, disabled: disabled || loading, "aria-expanded": isExpanded, "aria-label": "".concat(isExpanded ? 'Recolher' : 'Expandir', " ").concat(title), "data-testid": "list-expandable-button" }, loading ? renderLoadingContent() : renderContent()),
+        showDivider && e.createElement("div", { className: "ods-list-expandable__divider", "data-testid": "list-expandable-divider" }),
+        isExpanded && children && (e.createElement("div", { className: "ods-list-expandable__content" }, children))));
+});
+ListExpandable.displayName = 'ListExpandable';
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button$1;
 exports.CardGroup = CardGroup;
+exports.CardListExpandable = ListExpandable;
 exports.CardListItem = CardListItem;
 exports.Carousel = Carousel;
 exports.Chart = DoughnutChart;