@useblu/ocean-react 1.70.1 → 1.73.0

package/index.js

@@ -6675,6 +6675,74 @@ var TextArea = e__default["default"].forwardRef(function (_a, ref) {
 });
 TextArea.displayName = 'TextArea';
 
+var TextListItem = e__default["default"].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$2(_a, ["title", "description", "caption", "tagLabel", "infoText", "infoTextType", "withAction", "onActionClick", "checkbox", "radio", "disabled", "className"]);
+    var buttonElementRef = e.useRef(null);
+    var divElementRef = e.useRef(null);
+    var _c = e.useState(false), isWide = _c[0], setIsWide = _c[1];
+    e.useEffect(function () {
+        var updateWidth = function () {
+            if (buttonElementRef.current) {
+                var width = buttonElementRef.current.offsetWidth;
+                setIsWide(width >= 992);
+            }
+            if (divElementRef.current) {
+                var width = divElementRef.current.offsetWidth;
+                setIsWide(width >= 992);
+            }
+        };
+        updateWidth();
+        window.addEventListener('resize', updateWidth);
+        return function () {
+            window.removeEventListener('resize', updateWidth);
+        };
+    }, []);
+    var textListitem = e.useMemo(function () { return (e__default["default"].createElement("div", __assign$2({ className: classNames('ods-text-list-item', className, {
+            'ods-text-list-item--with-action': withAction,
+            'ods-text-list-item--wide': isWide,
+            'ods-text-list-item--selectable': checkbox || radio
+        }), ref: ref }, rest),
+        e__default["default"].createElement("div", { className: classNames('ods-text-list-item__default-content', {
+                'ods-text-list-item__default-content--disabled': disabled
+            }) },
+            e__default["default"].createElement("p", { className: "ods-typography ods-typography__paragraph" },
+                title,
+                tagLabel && (e__default["default"].createElement(Tag, { type: "neutral", size: "medium" }, tagLabel))),
+            e__default["default"].createElement("p", { className: "ods-typography ods-typography__description" }, description),
+            caption && (e__default["default"].createElement("p", { className: "ods-typography ods-typography__captionbold" }, caption))),
+        infoText && (e__default["default"].createElement("p", { className: classNames('ods-typography ods-typography__description', 'ods-text-list-item__info-text', "ods-text-list-item__info-text--".concat(infoTextType)) }, infoText)),
+        withAction && e__default["default"].createElement(re, null))); }, [
+        title,
+        description,
+        caption,
+        tagLabel,
+        infoText,
+        infoTextType,
+        withAction,
+        checkbox,
+        radio,
+        className,
+        isWide,
+        ref,
+        rest,
+        disabled,
+    ]);
+    if (checkbox) {
+        return (e__default["default"].createElement("div", { className: classNames('ods-text-list-item-selectable', {
+                'ods-text-list-item-selectable--disabled': disabled
+            }), ref: divElementRef },
+            e__default["default"].createElement(Checkbox, __assign$2({ disabled: disabled }, checkbox, { label: textListitem }))));
+    }
+    if (radio) {
+        return (e__default["default"].createElement("div", { className: classNames('ods-text-list-item-selectable', {
+                'ods-text-list-item-selectable--disabled': disabled
+            }), ref: divElementRef },
+            e__default["default"].createElement(Radio, __assign$2({ disabled: disabled }, radio, { label: textListitem }))));
+    }
+    return (e__default["default"].createElement("button", { ref: buttonElementRef, onClick: onActionClick, type: "button", className: "ods-text-list-item--button" }, textListitem));
+});
+TextListItem.displayName = 'TextListItem';
+
 var Context = e__default["default"].createContext({});
 
 var Option = e__default["default"].memo(function (option) {
@@ -48351,6 +48419,7 @@ exports.SubHeader = SubHeader;
 exports.Switch = Switch;
 exports.Tag = Tag;
 exports.TextArea = TextArea;
+exports.TextListItem = TextListItem;
 exports.TokenInput = TokenInput;
 exports.TopBar = TopBar;
 exports.TransactionListItem = TransactionListItem;