@useblu/ocean-react 1.133.0 → 1.134.1

package/index.js

@@ -5478,9 +5478,49 @@ var SkeletonBar = function (_a) {
     return (e.createElement("div", __assign$1({ className: "ods-skeleton-bar", style: { width: width, height: height } }, props)));
 };
 
-var ListSelectable = e.forwardRef(function (_a, ref) {
+var ListContainer = e.forwardRef(function (_a, ref) {
     var _b, _c;
-    var title = _a.title, description = _a.description, caption = _a.caption, strikethroughDescription = _a.strikethroughDescription, inverted = _a.inverted, loading = _a.loading, disabled = _a.disabled, checkbox = _a.checkbox, radio = _a.radio, className = _a.className, showDivider = _a.showDivider, indicator = _a.indicator, _d = _a.status, status = _d === void 0 ? 'default' : _d, _e = _a.type, type = _e === void 0 ? 'card' : _e, _f = _a.platform, platform = _f === void 0 ? 'web' : _f, rest = __rest$1(_a, ["title", "description", "caption", "strikethroughDescription", "inverted", "loading", "disabled", "checkbox", "radio", "className", "showDivider", "indicator", "status", "type", "platform"]);
+    var _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.showDivider, showDivider = _e === void 0 ? false : _e, _f = _a.hasError, hasError = _f === void 0 ? false : _f, highlight = _a.highlight, children = _a.children, className = _a.className, rest = __rest$1(_a, ["type", "showDivider", "hasError", "highlight", "children", "className"]);
+    return (e.createElement("div", { className: "ods-list-container" },
+        e.createElement("div", __assign$1({ ref: ref, className: classNames('ods-list-container__content', className, {
+                'ods-list-container__content--card': type === 'card',
+                'ods-list-container__content--card--error': type === 'card' && hasError,
+                'ods-list-container__content--text': type === 'text',
+            }) }, rest),
+            children,
+            showDivider && type === 'text' && (e.createElement("div", { className: "ods-list-container__content__divider" }))),
+        (highlight === null || highlight === void 0 ? void 0 : highlight.caption) && (e.createElement("div", { className: "ods-list-container__highlight", "data-testid": "list-container-highlight", style: { backgroundColor: (_b = highlight.backgroundColor) !== null && _b !== void 0 ? _b : '#F3F5FE' } },
+            e.createElement("p", { className: "ods-typography ods-typography__caption", style: { color: (_c = highlight.captionColor) !== null && _c !== void 0 ? _c : '#67697A' } }, highlight.caption)))));
+});
+ListContainer.displayName = 'ListContainer';
+
+var ListReadOnly = e.forwardRef(function (_a, ref) {
+    var _b;
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, icon = _a.icon, indicator = _a.indicator, _c = _a.type, type = _c === void 0 ? 'card' : _c, _d = _a.status, status = _d === void 0 ? 'default' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, className = _a.className, _h = _a.showDivider, showDivider = _h === void 0 ? false : _h, highlight = _a.highlight, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "icon", "indicator", "type", "status", "inverted", "disabled", "loading", "className", "showDivider", "highlight"]);
+    var renderLoadingContent = function () { return (e.createElement("div", { className: "ods-list-readonly__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-readonly__icon', {
+                'ods-list-readonly__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-readonly__trailing" },
+            e.createElement("div", { className: "ods-list-readonly__indicator" }, indicator))))); };
+    var cardClassName = classNames('ods-list-readonly', className, (_b = {
+            'ods-list-readonly--loading': loading,
+            'ods-list-readonly--disabled': disabled
+        },
+        _b["ods-list-readonly--".concat(type)] = type,
+        _b));
+    return (e.createElement(ListContainer, { type: type, showDivider: showDivider, highlight: highlight },
+        e.createElement("div", __assign$1({ ref: ref, "data-testid": "card-list-readonly", className: cardClassName }, rest), loading ? renderLoadingContent() : renderContent())));
+});
+ListReadOnly.displayName = 'ListReadOnly';
+
+var ListSelectable = e.forwardRef(function (_a, ref) {
+    var _b;
+    var title = _a.title, description = _a.description, caption = _a.caption, strikethroughDescription = _a.strikethroughDescription, inverted = _a.inverted, loading = _a.loading, disabled = _a.disabled, checkbox = _a.checkbox, radio = _a.radio, className = _a.className, showDivider = _a.showDivider, indicator = _a.indicator, isSelectableDisabled = _a.isSelectableDisabled, highlight = _a.highlight, _c = _a.status, status = _c === void 0 ? 'default' : _c, _d = _a.type, type = _d === void 0 ? 'card' : _d, _e = _a.platform, platform = _e === void 0 ? 'web' : _e, rest = __rest$1(_a, ["title", "description", "caption", "strikethroughDescription", "inverted", "loading", "disabled", "checkbox", "radio", "className", "showDivider", "indicator", "isSelectableDisabled", "highlight", "status", "type", "platform"]);
     var hasError = e.useMemo(function () { return (radio === null || radio === void 0 ? void 0 : radio.error) || (checkbox === null || checkbox === void 0 ? void 0 : checkbox.error); }, [radio === null || radio === void 0 ? void 0 : radio.error, checkbox === null || checkbox === void 0 ? void 0 : checkbox.error]);
     var isInputDisabled = e.useMemo(function () { return (radio === null || radio === void 0 ? void 0 : radio.disabled) || (checkbox === null || checkbox === void 0 ? void 0 : checkbox.disabled) || disabled; }, [radio === null || radio === void 0 ? void 0 : radio.disabled, checkbox === null || checkbox === void 0 ? void 0 : checkbox.disabled, disabled]);
     var internalList = e.useMemo(function () {
@@ -5506,18 +5546,17 @@ var ListSelectable = e.forwardRef(function (_a, ref) {
             e.createElement(SkeletonBar, { width: "40%", height: "16px" }),
             e.createElement(SkeletonBar, { width: "100%", height: "16px" })));
     }
-    return (e.createElement("div", { className: classNames('ods-list-selectable__root', (_b = {},
-            _b["ods-list-selectable__root--".concat(type)] = type,
-            _b["ods-list-selectable__root--".concat(type, "--error")] = hasError,
-            _b)) },
-        e.createElement("div", __assign$1({ className: classNames('ods-list-selectable', className, (_c = {
+    if (isSelectableDisabled) {
+        return (e.createElement(ListReadOnly, __assign$1({ title: title, description: description, status: status, type: type, inverted: inverted, disabled: disabled, loading: loading, className: className, showDivider: showDivider, indicator: indicator, caption: caption, strikethroughDescription: strikethroughDescription, highlight: highlight }, rest, { ref: ref })));
+    }
+    return (e.createElement(ListContainer, { type: type, showDivider: showDivider, hasError: hasError, highlight: highlight },
+        e.createElement("div", __assign$1({ className: classNames('ods-list-selectable', className, (_b = {
                     'ods-list-selectable--disabled': isInputDisabled
                 },
-                _c["ods-list-selectable--".concat(platform)] = platform,
-                _c)), ref: ref }, rest),
+                _b["ods-list-selectable--".concat(platform)] = platform,
+                _b)), ref: ref }, rest),
             checkbox && e.createElement(Checkbox, __assign$1({}, checkbox, { label: internalList })),
-            radio && e.createElement(Radio, __assign$1({}, radio, { label: internalList }))),
-        showDivider && type === 'text' && (e.createElement("div", { className: "ods-list-selectable__root--text--divider" }))));
+            radio && e.createElement(Radio, __assign$1({}, radio, { label: internalList })))));
 });
 ListSelectable.displayName = 'ListSelectable';
 
@@ -47806,7 +47845,7 @@ var AmountDetails = function (_a) {
 
 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, 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 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, highlight = _a.highlight, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "disabled", "loading", "icon", "indicator", "actionType", "menuActions", "menuPosition", "onClick", "className", "showDivider", "amountDetails", "position", "highlight"]);
     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) {
@@ -47860,40 +47899,14 @@ 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(ListContainer, { type: type, showDivider: showDivider, highlight: highlight },
+        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())));
 });
 ListAction.displayName = 'ListAction';
 
-var ListReadOnly = e.forwardRef(function (_a, ref) {
-    var _b;
-    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, icon = _a.icon, indicator = _a.indicator, _c = _a.type, type = _c === void 0 ? 'card' : _c, _d = _a.status, status = _d === void 0 ? 'default' : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.loading, loading = _g === void 0 ? false : _g, className = _a.className, _h = _a.showDivider, showDivider = _h === void 0 ? false : _h, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "icon", "indicator", "type", "status", "inverted", "disabled", "loading", "className", "showDivider"]);
-    var renderLoadingContent = function () { return (e.createElement("div", { className: 'ods-list-readonly__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-readonly__icon', {
-                'ods-list-readonly__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-readonly__trailing' },
-            e.createElement("div", { className: 'ods-list-readonly__indicator' }, indicator))))); };
-    var cardClassName = classNames('ods-list-readonly', className, (_b = {
-            'ods-list-readonly--loading': loading,
-            'ods-list-readonly--disabled': disabled
-        },
-        _b["ods-list-readonly--".concat(type)] = type,
-        _b));
-    return (e.createElement("div", { className: 'ods-list-readonly__container' },
-        e.createElement("div", __assign$1({ ref: ref, "data-testid": 'card-list-readonly', className: cardClassName }, rest), loading ? renderLoadingContent() : renderContent()),
-        showDivider && type === 'text' && (e.createElement("div", { className: 'ods-list-readonly__divider' }))));
-});
-ListReadOnly.displayName = 'ListReadOnly';
-
 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 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, highlight = _a.highlight, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "loading", "icon", "indicator", "expanded", "defaultExpanded", "onToggle", "children", "className", "disabled", "showDivider", "highlight"]);
     var _k = e.useState(defaultExpanded), internalExpanded = _k[0], setInternalExpanded = _k[1];
     var isControlled = controlledExpanded !== undefined;
     var isExpanded = isControlled ? controlledExpanded : internalExpanded;
@@ -47922,10 +47935,11 @@ var ListExpandable = e.forwardRef(function (_a, ref) {
         },
         _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))));
+    return (e.createElement(ListContainer, { type: type, showDivider: false, highlight: highlight, ref: ref },
+        e.createElement("div", __assign$1({ "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';
 
@@ -48016,7 +48030,7 @@ InternalContextualHero.displayName = 'InternalContextualHero';
 
 var ListSettings = 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, _h = _a.actionType, actionType = _h === void 0 ? 'button' : _h, _j = _a.buttonLabel, buttonLabel = _j === void 0 ? 'Label' : _j, _k = _a.buttonSize, buttonSize = _k === void 0 ? 'sm' : _k, _l = _a.buttonVariant, buttonVariant = _l === void 0 ? 'primary' : _l, _m = _a.toggleChecked, toggleChecked = _m === void 0 ? false : _m, onButtonClick = _a.onButtonClick, onToggleChange = _a.onToggleChange, _o = _a.showDivider, showDivider = _o === void 0 ? false : _o, className = _a.className, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "disabled", "loading", "icon", "actionType", "buttonLabel", "buttonSize", "buttonVariant", "toggleChecked", "onButtonClick", "onToggleChange", "showDivider", "className"]);
+    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, _h = _a.actionType, actionType = _h === void 0 ? 'button' : _h, _j = _a.buttonLabel, buttonLabel = _j === void 0 ? 'Label' : _j, _k = _a.buttonSize, buttonSize = _k === void 0 ? 'sm' : _k, _l = _a.buttonVariant, buttonVariant = _l === void 0 ? 'primary' : _l, _m = _a.toggleChecked, toggleChecked = _m === void 0 ? false : _m, onButtonClick = _a.onButtonClick, onToggleChange = _a.onToggleChange, _o = _a.showDivider, showDivider = _o === void 0 ? false : _o, highlight = _a.highlight, className = _a.className, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "status", "disabled", "loading", "icon", "actionType", "buttonLabel", "buttonSize", "buttonVariant", "toggleChecked", "onButtonClick", "onToggleChange", "showDivider", "highlight", "className"]);
     var renderActionElement = function () {
         if (actionType === 'button') {
             return (e.createElement(Button$1, { variant: buttonVariant, size: buttonSize, onClick: onButtonClick, disabled: disabled }, buttonLabel));
@@ -48041,9 +48055,8 @@ var ListSettings = e.forwardRef(function (_a, ref) {
         },
         _b["ods-list-settings--".concat(type)] = type,
         _b));
-    return (e.createElement("div", { className: "ods-list-settings__container" },
-        e.createElement("div", __assign$1({ ref: ref, "data-testid": "list-settings", className: containerClassName }, rest), loading ? renderLoadingContent() : renderContent()),
-        showDivider && type === 'text' && (e.createElement("div", { className: "ods-list-settings__divider" }))));
+    return (e.createElement(ListContainer, { type: type, showDivider: showDivider, highlight: highlight },
+        e.createElement("div", __assign$1({ ref: ref, "data-testid": "list-settings", className: containerClassName }, rest), loading ? renderLoadingContent() : renderContent())));
 });
 ListSettings.displayName = 'ListSettings';