@mmb-digital/ds-lilly 0.8.0 → 0.8.3

package/dist/ds-lilly.js

@@ -86950,7 +86950,7 @@ var Tooltip = function (_a) {
         offset: [0, verticalOffset]
     }), getArrowProps = _l.getArrowProps, getTooltipProps = _l.getTooltipProps, setTooltipRef = _l.setTooltipRef, setTriggerRef = _l.setTriggerRef, visible = _l.visible;
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null,
-        Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["cloneElement"])(children, { ref: setTriggerRef, tabIndex: 0, 'aria-describedBy': identifier }),
+        Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["cloneElement"])(children, { ref: setTriggerRef, tabIndex: 0, 'aria-describedby': identifier }),
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { "aria-hidden": visible, "aria-live": "polite", className: "c-tooltip-wrapper", id: identifier, role: "tooltip", tabIndex: -1 }, visible && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", Tooltip_assign({ ref: setTooltipRef, "data-testid": testId }, getTooltipProps({
             className: classBinder_cx('c-tooltip', "c-tooltip--" + type, "c-tooltip--" + placement, { 'upper-case': isUpperCased, 'c-tooltip--bold': isBold }, theme)
         })),
@@ -96629,7 +96629,7 @@ var getTextAlignClass = function (align) {
     }
 };
 var ContentTable = function (_a) {
-    var caption = _a.caption, _b = _a.columns, columns = _b === void 0 ? [] : _b, hasIcons = _a.hasIcons, _c = _a.hideSubtitleOnExpand, hideSubtitleOnExpand = _c === void 0 ? true : _c, children = _a.children, isCaptionHidden = _a.isCaptionHidden, isCollapsible = _a.isCollapsible, titleHeader = _a.titleHeader, _d = _a.titleAlignContent, titleAlignContent = _d === void 0 ? 'left' : _d, withoutOpeners = _a.withoutOpeners;
+    var caption = _a.caption, _b = _a.columns, columns = _b === void 0 ? [] : _b, hasIcons = _a.hasIcons, _c = _a.hideSubtitleOnExpand, hideSubtitleOnExpand = _c === void 0 ? true : _c, children = _a.children, isCaptionHidden = _a.isCaptionHidden, isCollapsible = _a.isCollapsible, testId = _a.testId, titleHeader = _a.titleHeader, _d = _a.titleAlignContent, titleAlignContent = _d === void 0 ? 'left' : _d, withoutOpeners = _a.withoutOpeners;
     var ref = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])(null);
     var width = useContainerDimensions(ref).width;
     var isMobileDeviceView = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () { return width <= CARD_WIDTH_BREAKPOINT.TABLET; }, [width]);
@@ -96643,7 +96643,7 @@ var ContentTable = function (_a) {
         titleAlignContent: titleAlignContent,
         withoutOpeners: withoutOpeners
     };
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("table", { ref: ref, className: "c-contentTable" },
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("table", { ref: ref, className: "c-contentTable", "data-testid": testId },
         caption && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("caption", { className: isCaptionHidden ? 'u-vHide' : '' }, caption),
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("thead", null,
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("tr", { className: "c-contentTable__header" },
@@ -96749,7 +96749,7 @@ var Tag = function (_a) {
 
 var ContentTableRow = function (_a) {
     var _b;
-    var amount = _a.amount, amountSubtitle = _a.amountSubtitle, amountSubtitleType = _a.amountSubtitleType, ariaLabel = _a.ariaLabel, _c = _a.buttons, buttons = _c === void 0 ? [] : _c, _d = _a.columns, columns = _d === void 0 ? [] : _d, currencyCode = _a.currencyCode, customIcon = _a.customIcon, children = _a.children, iconName = _a.iconName, iconBackgroundColor = _a.iconBackgroundColor, _e = _a.iconBadgePosition, iconBadgePosition = _e === void 0 ? 'bottomRight' : _e, id = _a.id, _f = _a.isOpen, isOpen = _f === void 0 ? false : _f, _g = _a.subtitles, subtitles = _g === void 0 ? [] : _g, subtitleTagIconBackgroundColor = _a.subtitleTagIconBackgroundColor, subtitleTagIconName = _a.subtitleTagIconName, subtitleTagIconImageUrl = _a.subtitleTagIconImageUrl, subtitleTagText = _a.subtitleTagText, title = _a.title, _h = _a.titleSize, titleSize = _h === void 0 ? 'h2' : _h, _j = _a.titleVisual, titleVisual = _j === void 0 ? 'h6' : _j;
+    var amount = _a.amount, amountCurrencyCode = _a.amountCurrencyCode, amountLocale = _a.amountLocale, amountMaximumFractionDigits = _a.amountMaximumFractionDigits, amountMinimumFractionDigits = _a.amountMinimumFractionDigits, amountSubtitle = _a.amountSubtitle, amountSubtitleType = _a.amountSubtitleType, ariaLabel = _a.ariaLabel, _c = _a.buttons, buttons = _c === void 0 ? [] : _c, _d = _a.columns, columns = _d === void 0 ? [] : _d, customIcon = _a.customIcon, children = _a.children, iconName = _a.iconName, iconBackgroundColor = _a.iconBackgroundColor, _e = _a.iconBadgePosition, iconBadgePosition = _e === void 0 ? 'bottomRight' : _e, id = _a.id, _f = _a.isOpen, isOpen = _f === void 0 ? false : _f, onToggle = _a.onToggle, _g = _a.subtitles, subtitles = _g === void 0 ? [] : _g, subtitleTagIconBackgroundColor = _a.subtitleTagIconBackgroundColor, subtitleTagIconName = _a.subtitleTagIconName, subtitleTagIconImageUrl = _a.subtitleTagIconImageUrl, subtitleTagText = _a.subtitleTagText, testId = _a.testId, title = _a.title, _h = _a.titleSize, titleSize = _h === void 0 ? 'h2' : _h, _j = _a.titleVisual, titleVisual = _j === void 0 ? 'h6' : _j;
     var _k = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useContext"])(contexts_ContentTableContext), columnsDefinition = _k.columns, hasIcons = _k.hasIcons, hideSubtitleOnExpand = _k.hideSubtitleOnExpand, isCollapsible = _k.isCollapsible, isMobileDeviceView = _k.isMobileDeviceView, titleAlignContent = _k.titleAlignContent, withoutOpeners = _k.withoutOpeners;
     var _l = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () {
         var buttonsColumn = buttons ? columnsDefinition[columnsDefinition.length - 1] : undefined;
@@ -96767,8 +96767,10 @@ var ContentTableRow = function (_a) {
     var _m = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(isOpen), isOpened = _m[0], setIsOpened = _m[1];
     Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () { return setIsOpened(isOpen); }, [isOpen]);
     var handleToggle = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useCallback"])(function () {
-        setIsOpened(!isOpened);
-    }, [setIsOpened, isOpened]);
+        var next = !isOpened;
+        setIsOpened(next);
+        onToggle && onToggle(next);
+    }, [setIsOpened, isOpened, onToggle]);
     var hasSubtitleTag = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () { return (subtitleTagIconName || subtitleTagIconImageUrl) && subtitleTagText; }, [
         subtitleTagIconName,
         subtitleTagIconImageUrl,
@@ -96792,7 +96794,7 @@ var ContentTableRow = function (_a) {
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("tr", { "aria-controls": id ? id + "-content" : undefined, "aria-expanded": isCollapsible && isOpened, "aria-label": ariaLabel, className: classBinder_cx('c-contentTableRow', {
                 'c-contentTableRow--collapsible': isCollapsible,
                 'c-contentTableRow--collapsible--open': isCollapsible && isOpened
-            }), id: id, role: isCollapsible ? 'button' : undefined, tabIndex: isCollapsible ? 0 : undefined, onClick: isCollapsible ? handleToggle : undefined, onKeyDown: handleKeyDown },
+            }), "data-testid": testId, id: id, role: isCollapsible ? 'button' : undefined, tabIndex: isCollapsible ? 0 : undefined, onClick: isCollapsible ? handleToggle : undefined, onKeyDown: handleKeyDown },
             hasIcons && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("td", { className: "c-contentTableRow__column c-contentTableRow__iconColumn" },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-contentTableRow__iconColumn__icon', "c-contentTableRow__iconColumn__icon" + ucfirst(iconBadgePosition)) },
                     iconName && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { backgroundColor: iconBackgroundColor, name: iconName, size: "xLarge" }),
@@ -96817,7 +96819,7 @@ var ContentTableRow = function (_a) {
             }),
             amountColumn && !(isMobileDeviceView && amountColumn.hideOnMobile) && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("td", { className: classBinder_cx('c-contentTableRow__column c-contentTableRow__amountColumn', getTextAlignClass(amountColumn.alignContent)) },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx({ 'c-contentTableRow__column--hidden': amountColumn.hideOnExpand && isOpened }) },
-                    amount !== undefined && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(AmountWithUnit, { isBold: true, amount: amount, unitAfter: currencyCode }),
+                    amount !== undefined && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(AmountWithUnit, { isBold: true, amount: amount, locale: amountLocale, maximumFractionDigits: amountMaximumFractionDigits, minimumFractionDigits: amountMinimumFractionDigits, unitAfter: amountCurrencyCode })),
                     amountSubtitle && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Text, { component: "div", size: "xSmall", type: amountSubtitleType }, amountSubtitle))))),
             buttonsColumn && !(isMobileDeviceView && buttonsColumn.hideOnMobile) && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("td", { className: classBinder_cx('c-contentTableRow__column c-contentTableRow__buttonsColumn', getTextAlignClass(buttonsColumn.alignContent)) },
                 external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx({ 'c-contentTableRow__column--hidden': buttonsColumn.hideOnExpand && isOpened }) }, buttons.map(function (button) {

package/dist/types/src/components/Components/ContentTable/ContentTable.d.ts

@@ -24,5 +24,5 @@ export interface ContentTablePropsType extends ComponentPropsType {
     isCollapsible?: boolean;
 }
 export declare const getTextAlignClass: (align?: string | undefined) => string | undefined;
-export declare const ContentTable: ({ caption, columns, hasIcons, hideSubtitleOnExpand, children, isCaptionHidden, isCollapsible, titleHeader, titleAlignContent, withoutOpeners }: ContentTablePropsType) => JSX.Element;
+export declare const ContentTable: ({ caption, columns, hasIcons, hideSubtitleOnExpand, children, isCaptionHidden, isCollapsible, testId, titleHeader, titleAlignContent, withoutOpeners }: ContentTablePropsType) => JSX.Element;
 //# sourceMappingURL=ContentTable.d.ts.map

package/dist/types/src/components/Components/ContentTable/ContentTableRow.d.ts

@@ -10,14 +10,20 @@ export interface ContentTableRowPropsType extends ComponentPropsType {
     columns?: ReactNode[][];
     /** Amount column content */
     amount?: number;
+    /** Amount currency code */
+    amountCurrencyCode?: string;
+    /** Amount locale */
+    amountLocale?: string;
+    /** The maximum number of amount fraction digits */
+    amountMaximumFractionDigits?: number;
+    /** The minimum number of amount fraction digits */
+    amountMinimumFractionDigits?: number;
     /** Amount subtitle */
     amountSubtitle?: ReactNode;
     /** Amount subtitle type */
     amountSubtitleType?: TextType;
     /** Buttons column content */
     buttons?: ReactElement[];
-    /** Amount currency code */
-    currencyCode?: string;
     /** Custom row icon */
     customIcon?: ReactNode;
     /** Content to render on expand */
@@ -32,6 +38,8 @@ export interface ContentTableRowPropsType extends ComponentPropsType {
     id?: string;
     /** Flag whether row is expanded */
     isOpen?: boolean;
+    /** Callback called on expand/collapse */
+    onToggle?: (isOpened: boolean) => void;
     /** Title column content */
     title: ReactNode;
     /** Title size */
@@ -49,5 +57,5 @@ export interface ContentTableRowPropsType extends ComponentPropsType {
     /** Subtitle tag content */
     subtitleTagText?: ReactNode;
 }
-export declare const ContentTableRow: ({ amount, amountSubtitle, amountSubtitleType, ariaLabel, buttons, columns, currencyCode, customIcon, children, iconName, iconBackgroundColor, iconBadgePosition, id, isOpen, subtitles, subtitleTagIconBackgroundColor, subtitleTagIconName, subtitleTagIconImageUrl, subtitleTagText, title, titleSize, titleVisual }: ContentTableRowPropsType) => JSX.Element;
+export declare const ContentTableRow: ({ amount, amountCurrencyCode, amountLocale, amountMaximumFractionDigits, amountMinimumFractionDigits, amountSubtitle, amountSubtitleType, ariaLabel, buttons, columns, customIcon, children, iconName, iconBackgroundColor, iconBadgePosition, id, isOpen, onToggle, subtitles, subtitleTagIconBackgroundColor, subtitleTagIconName, subtitleTagIconImageUrl, subtitleTagText, testId, title, titleSize, titleVisual }: ContentTableRowPropsType) => JSX.Element;
 //# sourceMappingURL=ContentTableRow.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/ds-lilly",
-  "version": "0.8.0",
+  "version": "0.8.3",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": false,