@useblu/ocean-react 1.63.0 → 1.64.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.64.0](https://github.com/ocean-ds/ocean-web/compare/v1.63.1...v1.64.0) (2024-06-26)
+
+### Features
+
+- update card list item component ([#1113](https://github.com/ocean-ds/ocean-web/issues/1113)) ([1c8cf3d](https://github.com/ocean-ds/ocean-web/commit/1c8cf3df19e2d0313d11a06975e845fcf23788a4))
+
 # [1.63.0](https://github.com/ocean-ds/ocean-web/compare/v1.62.2...v1.63.0) (2024-06-20)
 
 ### Features

package/CardListItem/CardListItem.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
-interface CardListItemProps {
+declare const CardListItem: React.ForwardRefExoticComponent<{
     title: string;
-    description?: string;
-    caption?: string;
+    description?: string | undefined;
+    caption?: string | undefined;
     actionIcon?: React.ReactNode;
     leadingIcon?: React.ReactNode;
-    size?: 'small' | 'medium';
-    disabled?: boolean;
-    fullWidth?: boolean;
-    onClick?: () => void;
-}
-declare const CardListItem: ({ title, description, caption, leadingIcon, actionIcon, size, disabled, fullWidth, onClick, }: CardListItemProps) => JSX.Element;
+    size?: "small" | "medium" | undefined;
+    disabled?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    loading?: boolean | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 export default CardListItem;
 //# sourceMappingURL=CardListItem.d.ts.map

package/CardListItem/CardListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardListItem.d.ts","sourceRoot":"","sources":["../../src/CardListItem/CardListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,YAAY,kGAUf,iBAAiB,KAAG,WA+BtB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CardListItem.d.ts","sourceRoot":"","sources":["../../src/CardListItem/CardListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AA8CpE,QAAA,MAAM,YAAY;WAvCT,MAAM;;;iBAYA,MAAM,SAAS;kBAId,MAAM,SAAS;;;;qBAgBb,IAAI;;kLAmFrB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/index.es.js

@@ -47878,19 +47878,27 @@ var Shortcut = function (_a) {
         size === 'medium' && description && (e.createElement("span", { className: classNames('ods-shortcut__description', 'ods-typography', 'ods-typography__description') }, description))));
 };
 
-var CardListItem = function (_a) {
-    var title = _a.title, description = _a.description, caption = _a.caption, leadingIcon = _a.leadingIcon, actionIcon = _a.actionIcon, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, onClick = _a.onClick;
-    return (e.createElement("div", { "data-testid": "card-list-item", className: classNames('ods-card-list-item', "ods-card-list-item--size-".concat(size), { 'ods-card-list-item--disabled': disabled }, { 'ods-card-list-item--full-width': fullWidth }), onClick: function () {
+var CardListItem = forwardRef(function (_a, ref) {
+    var title = _a.title, description = _a.description, caption = _a.caption, leadingIcon = _a.leadingIcon, actionIcon = _a.actionIcon, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, onClick = _a.onClick, loading = _a.loading, rest = __rest$2(_a, ["title", "description", "caption", "leadingIcon", "actionIcon", "size", "disabled", "fullWidth", "onClick", "loading"]);
+    return loading ? (e.createElement("div", __assign$2({ ref: ref }, rest, { "data-testid": "card-list-item", className: classNames('ods-card-list-item', "ods-card-list-item--size-".concat(size), { 'ods-card-list-item--full-width': fullWidth }, {
+            'ods-card-list-item--loading': loading
+        }) }),
+        e.createElement("div", { className: "ods-card-list-item__circle" }),
+        e.createElement("div", { className: "ods-card-list-item__lines" },
+            e.createElement("div", { className: "ods-card-list-item__lines__line1" }),
+            e.createElement("div", { className: "ods-card-list-item__lines__line2" }),
+            size === 'medium' && (e.createElement("div", { className: "ods-card-list-item__lines__line3" }))))) : (e.createElement("div", __assign$2({ ref: ref }, rest, { "data-testid": "card-list-item", className: classNames('ods-card-list-item', "ods-card-list-item--size-".concat(size), { 'ods-card-list-item--disabled': disabled }, { 'ods-card-list-item--full-width': fullWidth }), onClick: function () {
             if (!disabled && onClick)
                 onClick();
-        } },
+        } }),
         leadingIcon && (e.createElement("div", { className: "ods-card-list-item__leading-icon" }, leadingIcon)),
         e.createElement("div", { className: "ods-card-list-item__content" },
             e.createElement("div", { className: "ods-card-list-item__content__title" }, title),
             description && (e.createElement("div", { className: "ods-card-list-item__content__description" }, description)),
             caption && size === 'medium' && (e.createElement("div", { className: "ods-card-list-item__content__caption" }, caption))),
         actionIcon && (e.createElement("div", { className: "ods-card-list-item__action" }, actionIcon))));
-};
+});
+CardListItem.displayName = 'CardListItem';
 
 var Options = function (_a) {
     var options = _a.options, selectedOptions = _a.selectedOptions, clearLabel = _a.clearLabel, filterLabel = _a.filterLabel, multiChoice = _a.multiChoice, onSelect = _a.onSelect, filterOptions = _a.filterOptions, clearOptions = _a.clearOptions;