@useblu/ocean-react 1.115.0 → 1.117.0

package/index.js

@@ -5346,10 +5346,12 @@ var Checkbox = e.forwardRef(function (_a, ref) {
 Checkbox.displayName = 'Checkbox';
 
 var Radio = e.forwardRef(function (_a, ref) {
-    var className = _a.className, label = _a.label, id = _a.id, rest = __rest$1(_a, ["className", "label", "id"]);
+    var className = _a.className, label = _a.label, id = _a.id, error = _a.error, rest = __rest$1(_a, ["className", "label", "id", "error"]);
     return (e.createElement("label", { className: "ods-radio__root", htmlFor: id },
         e.createElement("input", __assign$1({ ref: ref, id: id, className: classNames('ods-radio', className) }, rest, { type: "radio" })),
-        e.createElement("span", { className: "ods-radio__checkmark" }),
+        e.createElement("span", { className: classNames('ods-radio__checkmark', {
+                'ods-radio__checkmark--error': error,
+            }) }),
         label && (e.createElement("span", { className: "ods-typography ods-typography__description ods-radio__label" }, label))));
 });
 Radio.displayName = 'Radio';
@@ -5366,6 +5368,79 @@ var TextArea = e.forwardRef(function (_a, ref) {
 });
 TextArea.displayName = 'TextArea';
 
+var ContentList = function (_a) {
+    var _b, _c, _d;
+    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? 'default' : _f;
+    return (e.createElement("div", { className: "ods-content-list" },
+        e.createElement("p", { className: classNames('ods-typography', (_b = {
+                    'ods-typography__paragraph': !inverted,
+                    'ods-typography__description': inverted
+                },
+                _b["ods-typography__paragraph--".concat(type)] = type && (!inverted || type === 'inactive'),
+                _b)) },
+            strikethroughDescription && type === 'strikethrough' && !inverted && (e.createElement("span", { className: "ods-typography__paragraph--strikethrough-text" }, strikethroughDescription)),
+            title),
+        description && (e.createElement("p", { className: classNames("ods-typography", (_c = {
+                    'ods-typography__description': !inverted,
+                    'ods-typography__paragraph': inverted
+                },
+                _c["ods-typography__paragraph--".concat(type)] = type && (inverted || type === 'inactive'),
+                _c)) },
+            strikethroughDescription && type === 'strikethrough' && inverted && (e.createElement("span", { className: "ods-typography__paragraph--strikethrough-text" }, strikethroughDescription)),
+            description)),
+        caption && (e.createElement("p", { className: classNames("ods-typography ods-typography__captionbold", (_d = {},
+                _d["ods-typography__paragraph--".concat(type)] = type && type === 'inactive',
+                _d)) }, caption))));
+};
+
+var SkeletonBar = function (_a) {
+    var width = _a.width, height = _a.height, props = __rest$1(_a, ["width", "height"]);
+    return (e.createElement("div", __assign$1({ className: "ods-skeleton-bar", style: { width: width, height: height } }, props)));
+};
+
+var ListSelectable = 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 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 () {
+        var _a;
+        return (e.createElement(e.Fragment, null,
+            e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: disabled ? 'inactive' : status }),
+            indicator && (e.createElement("div", { className: classNames('ods-list-selectable__indicator', (_a = {},
+                    _a["ods-list-selectable__indicator--".concat(platform)] = platform,
+                    _a)) }, indicator))));
+    }, [
+        title,
+        description,
+        caption,
+        strikethroughDescription,
+        inverted,
+        status,
+        indicator,
+        disabled,
+        platform,
+    ]);
+    if (loading) {
+        return (e.createElement("div", { className: "ods-list-selectable--loading" },
+            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 = {
+                    'ods-list-selectable--disabled': isInputDisabled
+                },
+                _c["ods-list-selectable--".concat(platform)] = platform,
+                _c)), 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" }))));
+});
+ListSelectable.displayName = 'ListSelectable';
+
 var TextListItem = e.forwardRef(function (_a, ref) {
     var title = _a.title, description = _a.description, caption = _a.caption, tagLabel = _a.tagLabel, infoText = _a.infoText, _b = _a.infoTextType, infoTextType = _b === void 0 ? 'neutral' : _b, withAction = _a.withAction, onActionClick = _a.onActionClick, checkbox = _a.checkbox, radio = _a.radio, disabled = _a.disabled, className = _a.className, rest = __rest$1(_a, ["title", "description", "caption", "tagLabel", "infoText", "infoTextType", "withAction", "onActionClick", "checkbox", "radio", "disabled", "className"]);
     var buttonElementRef = e.useRef(null);
@@ -47105,36 +47180,6 @@ var WebNotification = e.forwardRef(function (_a, ref) {
 });
 WebNotification.displayName = 'WebNotification';
 
-var ContentList = function (_a) {
-    var _b, _c, _d;
-    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _e = _a.inverted, inverted = _e === void 0 ? false : _e, _f = _a.type, type = _f === void 0 ? 'default' : _f;
-    return (e.createElement("div", { className: "ods-content-list" },
-        e.createElement("p", { className: classNames('ods-typography', (_b = {
-                    'ods-typography__paragraph': !inverted,
-                    'ods-typography__description': inverted
-                },
-                _b["ods-typography__paragraph--".concat(type)] = type && (!inverted || type === 'inactive'),
-                _b)) },
-            strikethroughDescription && type === 'strikethrough' && !inverted && (e.createElement("span", { className: "ods-typography__paragraph--strikethrough-text" }, strikethroughDescription)),
-            title),
-        description && (e.createElement("p", { className: classNames("ods-typography", (_c = {
-                    'ods-typography__description': !inverted,
-                    'ods-typography__paragraph': inverted
-                },
-                _c["ods-typography__paragraph--".concat(type)] = type && (inverted || type === 'inactive'),
-                _c)) },
-            strikethroughDescription && type === 'strikethrough' && inverted && (e.createElement("span", { className: "ods-typography__paragraph--strikethrough-text" }, strikethroughDescription)),
-            description)),
-        caption && (e.createElement("p", { className: classNames("ods-typography ods-typography__captionbold", (_d = {},
-                _d["ods-typography__paragraph--".concat(type)] = type && type === 'inactive',
-                _d)) }, caption))));
-};
-
-var SkeletonBar = function (_a) {
-    var width = _a.width, height = _a.height, props = __rest$1(_a, ["width", "height"]);
-    return (e.createElement("div", __assign$1({ className: "ods-skeleton-bar", style: { width: width, height: height } }, props)));
-};
-
 var SettingsListItem = function (_a) {
     var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, errorMessage = _a.errorMessage, button = _a.button, tag = _a.tag, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showDivider, showDivider = _d === void 0 ? true : _d, _e = _a.blocked, blocked = _e === void 0 ? false : _e, _f = _a.state, state = _f === void 0 ? 'default' : _f;
     return (e.createElement("div", { className: classNames('ods-settings-list-item', {
@@ -47330,7 +47375,7 @@ var MenuList = function (_a) {
     var menuContent = (e.createElement("ul", { ref: menuRef, className: classNames('ods-internal-list-actions__menu', "ods-internal-list-actions__menu--".concat(position), {
             'ods-internal-list-actions__menu--closing': isClosing,
             'ods-internal-list-actions__menu--portal': !isSwipeMode,
-        }), style: isSwipeMode ? undefined : menuStyle, role: "menu", "aria-orientation": isSwipeMode ? "horizontal" : "vertical", tabIndex: -1, onClick: handleMenuClick, onKeyDown: handleMenuKeyDown },
+        }), style: isSwipeMode ? undefined : menuStyle, role: "menu", "aria-orientation": isSwipeMode ? 'horizontal' : 'vertical', tabIndex: -1, onClick: handleMenuClick, onKeyDown: handleMenuKeyDown },
         isSwipeMode && (e.createElement(DragHandle, { onClose: onClose, onKeyDown: onDragHandleKeyDown })),
         actions.map(function (action) { return (e.createElement(MenuItem, { key: action.label, action: action, onClick: onActionClick })); })));
     if (isSwipeMode || typeof document === 'undefined') {
@@ -47385,8 +47430,7 @@ var InternalListActions = e.forwardRef(function (_a, forwardedRef) {
                 forwardedRef(wrapperRef.current);
             }
             else {
-                forwardedRef.current =
-                    wrapperRef.current;
+                forwardedRef.current = wrapperRef.current;
             }
         }
     }, [forwardedRef]);
@@ -47423,11 +47467,12 @@ var InternalListActions = e.forwardRef(function (_a, forwardedRef) {
 });
 InternalListActions.displayName = 'InternalListActions';
 
-var CardListAction = e.forwardRef(function (_a, ref) {
-    var title = _a.title, description = _a.description, strikethroughDescription = _a.strikethroughDescription, caption = _a.caption, _b = _a.inverted, inverted = _b === void 0 ? false : _b, _c = _a.type, type = _c === void 0 ? 'default' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, icon = _a.icon, indicator = _a.indicator, _f = _a.actionType, actionType = _f === void 0 ? 'chevron' : _f, menuActions = _a.menuActions, _g = _a.menuPosition, menuPosition = _g === void 0 ? 'bottom-right' : _g, onClick = _a.onClick, className = _a.className, rest = __rest$1(_a, ["title", "description", "strikethroughDescription", "caption", "inverted", "type", "disabled", "loading", "icon", "indicator", "actionType", "menuActions", "menuPosition", "onClick", "className"]);
+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 renderActionIcon = function () {
         if (actionType === 'chevron') {
-            return (e.createElement("div", { className: 'ods-card-list-action__action' },
+            return (e.createElement("div", { className: 'ods-list-action__action' },
                 e.createElement(re, { size: 20 })));
         }
         if (actionType === 'menu' || actionType === 'swipe') {
@@ -47435,25 +47480,29 @@ var CardListAction = e.forwardRef(function (_a, ref) {
         }
         return null;
     };
-    if (loading) {
-        return (e.createElement("button", __assign$1({ ref: ref, type: 'button', "data-testid": 'card-list-action', className: classNames('ods-card-list-action', 'ods-card-list-action--loading', className) }, rest),
-            e.createElement("div", { className: 'ods-card-list-action__skeleton' },
-                e.createElement(SkeletonBar, { width: '40%', height: '16px' }),
-                e.createElement(SkeletonBar, { width: '100%', height: '16px' }))));
-    }
-    return (e.createElement("button", __assign$1({ ref: ref, type: 'button', "data-testid": 'card-list-action', className: classNames('ods-card-list-action', className, {
-            'ods-card-list-action--disabled': disabled,
-            'ods-card-list-action--swipe-mode': actionType === 'swipe',
-        }), onClick: onClick, disabled: disabled }, rest),
-        icon && e.createElement("div", { className: classNames('ods-card-list-action__icon', {
-                'ods-card-list-action__icon--inactive': type === 'inactive',
-            }) }, icon),
-        e.createElement(ContentList, { title: title, description: description, strikethroughDescription: strikethroughDescription, caption: caption, inverted: inverted, type: type }),
-        e.createElement("div", { className: 'ods-card-list-action__trailing' },
-            indicator && (e.createElement("div", { className: 'ods-card-list-action__indicator' }, indicator)),
-            renderActionIcon())));
+    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 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()))); };
+    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'
+        },
+        _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' }))));
 });
-CardListAction.displayName = 'CardListAction';
+ListAction.displayName = 'ListAction';
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
@@ -47461,7 +47510,6 @@ exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button$1;
 exports.CardGroup = CardGroup;
-exports.CardListAction = CardListAction;
 exports.CardListItem = CardListItem;
 exports.Carousel = Carousel;
 exports.Chart = DoughnutChart;
@@ -47480,6 +47528,8 @@ exports.IconButton = IconButton;
 exports.Input = Input;
 exports.Link = Link;
 exports.List = List;
+exports.ListAction = ListAction;
+exports.ListSelectable = ListSelectable;
 exports.Modal = Modal;
 exports.Progress = Progress;
 exports.Radio = Radio;