@mmb-digital/ds-lilly 0.10.8 → 0.10.10

package/dist/ds-lilly.js

@@ -97676,7 +97676,7 @@ function createDomMotionComponent(key) {
 
 
 var CollapseHeader = function (_a) {
-    var header = _a.header, iconBackground = _a.iconBackground, iconBadge = _a.iconBadge, _b = _a.iconBadgePosition, iconBadgePosition = _b === void 0 ? 'bottomRight' : _b, iconName = _a.iconName, _c = _a.iconSize, iconSize = _c === void 0 ? 'large' : _c, isCollapsible = _a.isCollapsible, isIconAlignTop = _a.isIconAlignTop, isIconRight = _a.isIconRight, isInteractive = _a.isInteractive, onToggle = _a.onToggle;
+    var header = _a.header, iconBackground = _a.iconBackground, iconBadge = _a.iconBadge, _b = _a.iconBadgePosition, iconBadgePosition = _b === void 0 ? 'bottomRight' : _b, iconColor = _a.iconColor, iconName = _a.iconName, _c = _a.iconSize, iconSize = _c === void 0 ? 'large' : _c, isCollapsible = _a.isCollapsible, isIconAlignTop = _a.isIconAlignTop, isIconRight = _a.isIconRight, isInteractive = _a.isInteractive, onToggle = _a.onToggle;
     var _d = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useContext"])(contexts_CardContext), hasCustomTrigger = _d.hasCustomTrigger, identification = _d.identification, isOpened = _d.isOpened, withoutOpener = _d.withoutOpener;
     var handleOnToggle = function (event) { return !hasCustomTrigger && onToggle(event); };
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { "aria-controls": isCollapsible && !hasCustomTrigger ? identification + "_content" : undefined, "aria-expanded": isCollapsible && !hasCustomTrigger ? isOpened : undefined, className: classBinder_cx('c-card__header', {
@@ -97686,7 +97686,7 @@ var CollapseHeader = function (_a) {
                 'c-card__icon--alignTop': isIconAlignTop,
                 'c-card__icon--right': isIconRight
             }) },
-            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { backgroundColor: iconBackground, badge: iconBadge, badgePosition: iconBadgePosition, name: iconName, size: iconSize }))),
+            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { backgroundColor: iconBackground, badge: iconBadge, badgePosition: iconBadgePosition, color: iconColor, name: iconName, size: iconSize }))),
         header && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "c-card__header__text", id: identification + "_header" }, header)),
         !hasCustomTrigger && !withoutOpener && (isInteractive || isCollapsible) && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-card__collapseIcon c-card__collapseIcon--right') },
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: isCollapsible ? 'arrowDown' : 'arrowRight', size: "small" })))));
@@ -97702,7 +97702,7 @@ var CollapseHeader = function (_a) {
 
 var Card = function (_a) {
     var _b;
-    var allowEventPropagation = _a.allowEventPropagation, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children, disabledTooltip = _a.disabledTooltip, disabledTooltipType = _a.disabledTooltipType, _c = _a.hasCustomTrigger, hasCustomTrigger = _c === void 0 ? false : _c, collapseHeader = _a.header, iconBackgroundColor = _a.iconBackgroundColor, iconBadge = _a.iconBadge, _d = _a.iconBadgePosition, iconBadgePosition = _d === void 0 ? 'bottomRight' : _d, iconName = _a.iconName, iconSize = _a.iconSize, isCollapsible = _a.isCollapsible, isDisabled = _a.isDisabled, isIconAlignTop = _a.isIconAlignTop, isIconRight = _a.isIconRight, isInteractive = _a.isInteractive, _e = _a.isOpen, isOpen = _e === void 0 ? false : _e, isSelected = _a.isSelected, onClick = _a.onClick, onRef = _a.onRef, onToggle = _a.onToggle, shadowSize = _a.shadowSize, size = _a.size, testId = _a.testId, theme = _a.theme, _f = _a.withoutOpener, withoutOpener = _f === void 0 ? false : _f, _g = _a.withoutRole, withoutRole = _g === void 0 ? false : _g;
+    var allowEventPropagation = _a.allowEventPropagation, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children, disabledTooltip = _a.disabledTooltip, disabledTooltipType = _a.disabledTooltipType, _c = _a.hasCustomTrigger, hasCustomTrigger = _c === void 0 ? false : _c, collapseHeader = _a.header, iconBackgroundColor = _a.iconBackgroundColor, iconBadge = _a.iconBadge, _d = _a.iconBadgePosition, iconBadgePosition = _d === void 0 ? 'bottomRight' : _d, iconColor = _a.iconColor, iconName = _a.iconName, iconSize = _a.iconSize, isCollapsible = _a.isCollapsible, isDisabled = _a.isDisabled, isIconAlignTop = _a.isIconAlignTop, isIconRight = _a.isIconRight, isInteractive = _a.isInteractive, _e = _a.isOpen, isOpen = _e === void 0 ? false : _e, isSelected = _a.isSelected, onClick = _a.onClick, onRef = _a.onRef, onToggle = _a.onToggle, shadowSize = _a.shadowSize, size = _a.size, testId = _a.testId, theme = _a.theme, _f = _a.withoutOpener, withoutOpener = _f === void 0 ? false : _f, _g = _a.withoutRole, withoutRole = _g === void 0 ? false : _g;
     var identification = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useMemo"])(function () { return "card_" + cuid_default()(); }, []);
     var _h = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(isOpen), isOpened = _h[0], setIsOpened = _h[1];
     var cardRef = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useRef"])(null);
@@ -97713,6 +97713,12 @@ var Card = function (_a) {
             : isHovered
                 ? "" + iconBackgroundColor.replace('Normal', 'Hover')
                 : "" + iconBackgroundColor);
+    var iconColorName = iconColor &&
+        (isActive
+            ? "" + iconColor.replace('Normal', 'Active')
+            : isHovered
+                ? "" + iconColor.replace('Normal', 'Hover')
+                : iconColor);
     var handleOnClick = function (event) {
         if (isDisabled)
             return;
@@ -97763,7 +97769,7 @@ var Card = function (_a) {
             _b["c-card--" + shadowSize + "Shadow"] = shadowSize,
             _b["c-card--" + size] = size,
             _b), theme), "data-testid": testId, role: isInteractive && !withoutRole ? 'button' : undefined, tabIndex: (isInteractive || isCollapsible) && !withoutRole ? 0 : undefined, onClick: handleOnClick, onKeyDown: handleKeyDown },
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(CollapseHeader, { header: collapseHeader ? collapseHeader : children, iconBackground: iconBackground, iconBadge: iconBadge, iconBadgePosition: iconBadgePosition, iconName: iconName, iconSize: iconSize, isCollapsible: isCollapsible, isIconAlignTop: isIconAlignTop, isIconRight: isIconRight, isInteractive: isInteractive, onToggle: handleOnToggle }),
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(CollapseHeader, { header: collapseHeader ? collapseHeader : children, iconBackground: iconBackground, iconBadge: iconBadge, iconBadgePosition: iconBadgePosition, iconColor: iconColorName, iconName: iconName, iconSize: iconSize, isCollapsible: isCollapsible, isIconAlignTop: isIconAlignTop, isIconRight: isIconRight, isInteractive: isInteractive, onToggle: handleOnToggle }),
         isCollapsible ? (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(AnimatePresence, { initial: false }, isOpened && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(motion.div, { key: "content", animate: "open", "aria-labelledby": identification + "_header", className: classBinder_cx('c-card__motion'), exit: "collapsed", initial: "collapsed", role: "region", transition: { duration: 0.6, ease: [0.04, 0.62, 0.23, 0.98] }, variants: {
                 open: { opacity: 1, height: 'auto' },
                 collapsed: { opacity: 0, height: 0 }
@@ -109044,6 +109050,7 @@ var Select2 = function (_a) {
             (_f = document.getElementById(itemElementId)) === null || _f === void 0 ? void 0 : _f.scrollIntoView({ block: 'nearest' });
         }
     }, [isCategorised, name]);
+    var focusSelect = function () { return setTimeout(function () { var _a; return (_a = document.getElementById(name + "_button")) === null || _a === void 0 ? void 0 : _a.focus(); }); };
     var handleComboBoxClick = function () {
         if (!isDropdownVisible) {
             setTimeout(function () {
@@ -109061,7 +109068,7 @@ var Select2 = function (_a) {
             }, 100);
         }
         if (isDropdownVisible) {
-            setTimeout(function () { var _a; return (_a = document.getElementById(name + "_button")) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+            focusSelect();
         }
         setIsDropdownVisible(!isDropdownVisible);
     };
@@ -109077,10 +109084,12 @@ var Select2 = function (_a) {
     var handleOptionClick = function (item) {
         propagateChange(item);
         setIsDropdownVisible(false);
+        focusSelect();
     };
     var handleEmptyOptionClick = function () {
         propagateChange();
         setIsDropdownVisible(false);
+        focusSelect();
     };
     var selectFocusedItem = function () {
         var itemIndex = itemsIndex[currentItemPosition];

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

@@ -20,6 +20,8 @@ export interface CardPropsType extends ComponentPropsType, DisabledTooltipPropsT
     iconBackgroundColor?: BackgroundColorType;
     /** Icon badge */
     iconBadge?: AvatarPropsType | IconPropsType;
+    /** Color of icon SVG fill from palette--(light|dark).scss example orangeDark */
+    iconColor?: string;
     /** Icon badge position */
     iconBadgePosition?: IconBadgePosition;
     /** Define Icon name if you want some to be displayed. */
@@ -57,6 +59,6 @@ export interface CardPropsType extends ComponentPropsType, DisabledTooltipPropsT
 }
 export declare type ShadowSizeType = 'small' | 'medium' | 'large' | 'no';
 declare type CardBackgroundColorType = 'cloud' | 'grey' | 'gold' | 'primaryDark' | 'transparent';
-export declare const Card: ({ allowEventPropagation, backgroundColor, borderColor, children, disabledTooltip, disabledTooltipType, hasCustomTrigger, header: collapseHeader, iconBackgroundColor, iconBadge, iconBadgePosition, iconName, iconSize, isCollapsible, isDisabled, isIconAlignTop, isIconRight, isInteractive, isOpen, isSelected, onClick, onRef, onToggle, shadowSize, size, testId, theme, withoutOpener, withoutRole }: CardPropsType) => JSX.Element;
+export declare const Card: ({ allowEventPropagation, backgroundColor, borderColor, children, disabledTooltip, disabledTooltipType, hasCustomTrigger, header: collapseHeader, iconBackgroundColor, iconBadge, iconBadgePosition, iconColor, iconName, iconSize, isCollapsible, isDisabled, isIconAlignTop, isIconRight, isInteractive, isOpen, isSelected, onClick, onRef, onToggle, shadowSize, size, testId, theme, withoutOpener, withoutRole }: CardPropsType) => JSX.Element;
 export {};
 //# sourceMappingURL=Card.d.ts.map

package/dist/types/src/components/Components/Card/_elements_/CollapseHeader.d.ts

@@ -8,6 +8,7 @@ export interface CollapseHeaderPropsType {
     iconBackground?: BackgroundColorType;
     iconBadge?: AvatarPropsType | IconPropsType;
     iconBadgePosition?: IconBadgePosition;
+    iconColor?: string;
     iconName: CardPropsType['iconName'];
     iconSize?: IconSizeType;
     isCollapsible: CardPropsType['isCollapsible'];
@@ -16,5 +17,5 @@ export interface CollapseHeaderPropsType {
     isInteractive: CardPropsType['isInteractive'];
     onToggle: (event: SyntheticEvent) => void;
 }
-export declare const CollapseHeader: ({ header, iconBackground, iconBadge, iconBadgePosition, iconName, iconSize, isCollapsible, isIconAlignTop, isIconRight, isInteractive, onToggle }: CollapseHeaderPropsType) => JSX.Element;
+export declare const CollapseHeader: ({ header, iconBackground, iconBadge, iconBadgePosition, iconColor, iconName, iconSize, isCollapsible, isIconAlignTop, isIconRight, isInteractive, onToggle }: CollapseHeaderPropsType) => JSX.Element;
 //# sourceMappingURL=CollapseHeader.d.ts.map

package/package.json

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