@synerise/ds-information-card 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.6.2...@synerise/ds-information-card@0.7.0) (2024-11-28)
+
+
+### Features
+
+* **items-roll:** replaced Menu.Item with ListItem ([2cfcbdc](https://github.com/Synerise/synerise-design/commit/2cfcbdc501c0ad21557372c0f9d9cb76b3d034cb))
+
+
+
+
+
 ## [0.6.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-information-card@0.6.1...@synerise/ds-information-card@0.6.2) (2024-11-21)
 
 

package/dist/InformationCard.js

@@ -1,9 +1,6 @@
 var _excluded = ["actionButton", "actionButtonTooltipText", "actionButtonCallback", "actionsMenu", "asTooltip", "avatarTooltipText", "copyTooltip", "copiedTooltip", "renderFooter", "renderBadge", "subtitle", "title", "notice", "footerText", "icon", "iconColor", "descriptionConfig", "className", "renderAdditionalDescription", "propertyListItems", "summaryItems"];
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import { SegmentM } from '@synerise/ds-icon';
 import Card from '@synerise/ds-card';
@@ -19,38 +16,34 @@ import { InformationCardPropertyList } from './InformationCardPropertyList/Infor
 import { InformationCardSummary } from './InformationCardSummary/InformationCardSummary';
 var InformationCard = forwardRef(function (_ref, ref) {
   var actionButton = _ref.actionButton,
-      actionButtonTooltipText = _ref.actionButtonTooltipText,
-      actionButtonCallback = _ref.actionButtonCallback,
-      actionsMenu = _ref.actionsMenu,
-      asTooltip = _ref.asTooltip,
-      avatarTooltipText = _ref.avatarTooltipText,
-      copyTooltip = _ref.copyTooltip,
-      copiedTooltip = _ref.copiedTooltip,
-      renderFooter = _ref.renderFooter,
-      _renderBadge2 = _ref.renderBadge,
-      subtitle = _ref.subtitle,
-      title = _ref.title,
-      notice = _ref.notice,
-      footerText = _ref.footerText,
-      _ref$icon = _ref.icon,
-      iconElement = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(SegmentM, null) : _ref$icon,
-      iconColor = _ref.iconColor,
-      descriptionConfig = _ref.descriptionConfig,
-      className = _ref.className,
-      renderAdditionalDescription = _ref.renderAdditionalDescription,
-      propertyListItems = _ref.propertyListItems,
-      summaryItems = _ref.summaryItems,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    actionButtonTooltipText = _ref.actionButtonTooltipText,
+    actionButtonCallback = _ref.actionButtonCallback,
+    actionsMenu = _ref.actionsMenu,
+    asTooltip = _ref.asTooltip,
+    avatarTooltipText = _ref.avatarTooltipText,
+    copyTooltip = _ref.copyTooltip,
+    copiedTooltip = _ref.copiedTooltip,
+    renderFooter = _ref.renderFooter,
+    _renderBadge2 = _ref.renderBadge,
+    subtitle = _ref.subtitle,
+    title = _ref.title,
+    notice = _ref.notice,
+    footerText = _ref.footerText,
+    _ref$icon = _ref.icon,
+    iconElement = _ref$icon === void 0 ? /*#__PURE__*/React.createElement(SegmentM, null) : _ref$icon,
+    iconColor = _ref.iconColor,
+    descriptionConfig = _ref.descriptionConfig,
+    className = _ref.className,
+    renderAdditionalDescription = _ref.renderAdditionalDescription,
+    propertyListItems = _ref.propertyListItems,
+    summaryItems = _ref.summaryItems,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(false),
-      isActionsMenuVisible = _useState[0],
-      setIsActionsMenuVisible = _useState[1];
-
+    isActionsMenuVisible = _useState[0],
+    setIsActionsMenuVisible = _useState[1];
   var mainSlideRef = useRef(null);
-
   var _useResizeObserver = useResizeObserver(mainSlideRef),
-      height = _useResizeObserver.height;
-
+    height = _useResizeObserver.height;
   var copyableSlot = function copyableSlot(content) {
     return /*#__PURE__*/React.createElement(RowWrapper, {
       copyable: true
@@ -68,12 +61,11 @@ var InformationCard = forwardRef(function (_ref, ref) {
       }
     })));
   };
+  var hasFooter = !!(footerText || actionButton || actionsMenu);
 
-  var hasFooter = !!(footerText || actionButton || actionsMenu); // eslint-disable-next-line react-hooks/exhaustive-deps
-
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(function () {
     var _mainSlideRef$current;
-
     if (!((_mainSlideRef$current = mainSlideRef.current) != null && _mainSlideRef$current.clientWidth)) {
       setIsActionsMenuVisible(false);
     }
@@ -94,7 +86,6 @@ var InformationCard = forwardRef(function (_ref, ref) {
     background: "white",
     renderBadge: function renderBadge() {
       var _renderBadge;
-
       return _renderBadge2 !== null && /*#__PURE__*/React.createElement("div", {
         style: {
           marginRight: '16px'

package/dist/InformationCard.styles.js

@@ -1,7 +1,5 @@
 var _templateObject;
-
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
 import styled, { createGlobalStyle, css } from 'styled-components';
 import { CardStyles } from '@synerise/ds-card';
 import { DescriptionCopyable } from '@synerise/ds-description';
@@ -40,7 +38,7 @@ export var FlexGrow = styled.div.withConfig({
   componentId: "zxu5qa-5"
 })(["flex-grow:", ";"], function (_ref) {
   var _ref$grow = _ref.grow,
-      grow = _ref$grow === void 0 ? 1 : _ref$grow;
+    grow = _ref$grow === void 0 ? 1 : _ref$grow;
   return grow;
 });
 export var ActionButtonContainer = styled.div.withConfig({
@@ -83,18 +81,18 @@ export var DescriptionWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__DescriptionWrapper",
   componentId: "zxu5qa-12"
 })(["padding:0 16px;"]);
+
 /**
  * This component can be used to style container with popovers/tooltips to disable arrow.
  */
-
 export var HidePopoverArrowWrapper = styled.div.withConfig({
   displayName: "InformationCardstyles__HidePopoverArrowWrapper",
   componentId: "zxu5qa-13"
 })([".ant-popover-arrow-content,.ant-tooltip-arrow-content{display:none;}"]);
+
 /**
  * Should be mounted in application where.
  */
-
 export var GlobalCSSHidePopoverArrow = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  .ant-popover-arrow-content,.ant-tooltip-arrow-content {\n    display: none;\n}"])));
 export var ExtraInfo = styled.div.withConfig({
   displayName: "InformationCardstyles__ExtraInfo",

package/dist/InformationCard.utils.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import Alert from '@synerise/ds-alert';
 import Avatar, { ObjectAvatar } from '@synerise/ds-avatar';
@@ -23,7 +22,7 @@ export function getInitials(name) {
 }
 export function Initials(_ref) {
   var name = _ref.name,
-      children = _ref.children;
+    children = _ref.children;
   return /*#__PURE__*/React.createElement(Badge, null, /*#__PURE__*/React.createElement(Avatar, {
     size: "medium",
     shape: "circle",
@@ -34,13 +33,11 @@ export function buildIconBadge(data) {
   var avatarExtra = {
     object: {}
   };
-
   if (data.avatarTooltipText) {
     avatarExtra.object = {
       description: data.avatarTooltipText
     };
   }
-
   return /*#__PURE__*/React.createElement(ObjectAvatar, _extends({}, avatarExtra, {
     color: data.iconColor,
     iconComponent: /*#__PURE__*/React.createElement(Icon, {

package/dist/InformationCardActions/InformationCardActions.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Dropdown from '@synerise/ds-dropdown';
@@ -9,10 +8,10 @@ import * as S from '../InformationCard.styles';
 var NAV_HEIGHT = 61;
 export var InformationCardActions = function InformationCardActions(_ref) {
   var onHeaderClick = _ref.onHeaderClick,
-      navigationLabel = _ref.navigationLabel,
-      items = _ref.items,
-      menuProps = _ref.menuProps,
-      maxHeight = _ref.maxHeight;
+    navigationLabel = _ref.navigationLabel,
+    items = _ref.items,
+    menuProps = _ref.menuProps,
+    maxHeight = _ref.maxHeight;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown.BackAction, {
     label: navigationLabel || /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "DS.INFORMATION-CARD.QUICK-ACTIONS",

package/dist/InformationCardDescription/InformationCardDescription.js

@@ -1,17 +1,14 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useState } from 'react';
 import SubtleForm from '@synerise/ds-subtle-form';
 import * as S from '../InformationCard.styles';
 export var InformationCardDescription = function InformationCardDescription(_ref) {
   var _ref$extraInformation = _ref.extraInformation,
-      extraInformation = _ref$extraInformation === void 0 ? undefined : _ref$extraInformation,
-      descriptionConfig = _ref.descriptionConfig;
-
+    extraInformation = _ref$extraInformation === void 0 ? undefined : _ref$extraInformation,
+    descriptionConfig = _ref.descriptionConfig;
   var _useState = useState(''),
-      description = _useState[0],
-      setDescription = _useState[1];
-
+    description = _useState[0],
+    setDescription = _useState[1];
   var renderDescription = function renderDescription() {
     if (descriptionConfig) {
       return typeof descriptionConfig === 'string' ? /*#__PURE__*/React.createElement(S.NonEditableWrapper, null, descriptionConfig) : /*#__PURE__*/React.createElement(SubtleForm.TextArea, _extends({
@@ -32,10 +29,8 @@ export var InformationCardDescription = function InformationCardDescription(_ref
         disabled: descriptionConfig.disabled
       }));
     }
-
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   };
-
   return /*#__PURE__*/React.createElement(S.DescriptionWrapper, {
     "data-testid": "information-card-description"
   }, /*#__PURE__*/React.createElement(S.AlertWrapper, null, extraInformation), descriptionConfig && renderDescription());

package/dist/InformationCardFooter/InformationCardFooter.js

@@ -7,14 +7,14 @@ import Button from '@synerise/ds-button';
 import * as S from '../InformationCard.styles';
 export var InformationCardFooter = function InformationCardFooter(_ref) {
   var _ref$actionButton = _ref.actionButton,
-      actionButton = _ref$actionButton === void 0 ? false : _ref$actionButton,
-      actionButtonCallback = _ref.actionButtonCallback,
-      actionsMenuButtonLabel = _ref.actionsMenuButtonLabel,
-      actionsMenuButtonOnClick = _ref.actionsMenuButtonOnClick,
-      _ref$actionButtonTool = _ref.actionButtonTooltipText,
-      actionButtonTooltipText = _ref$actionButtonTool === void 0 ? '' : _ref$actionButtonTool,
-      _ref$text = _ref.text,
-      text = _ref$text === void 0 ? '' : _ref$text;
+    actionButton = _ref$actionButton === void 0 ? false : _ref$actionButton,
+    actionButtonCallback = _ref.actionButtonCallback,
+    actionsMenuButtonLabel = _ref.actionsMenuButtonLabel,
+    actionsMenuButtonOnClick = _ref.actionsMenuButtonOnClick,
+    _ref$actionButtonTool = _ref.actionButtonTooltipText,
+    actionButtonTooltipText = _ref$actionButtonTool === void 0 ? '' : _ref$actionButtonTool,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? '' : _ref$text;
   return /*#__PURE__*/React.createElement(S.FooterWrapper, {
     "data-testid": "information-card-footer",
     style: {

package/dist/InformationCardPropertyList/InformationCardPropertyList.js

@@ -6,17 +6,17 @@ export var InformationCardPropertyList = function InformationCardPropertyList(_r
     "data-testid": "information-card-property-list"
   }, items == null ? void 0 : items.map(function (_ref2) {
     var type = _ref2.type,
-        label = _ref2.label,
-        value = _ref2.value;
-
+      label = _ref2.label,
+      value = _ref2.value,
+      key = _ref2.key;
     if (type === 'divider') {
       return /*#__PURE__*/React.createElement(S.Divider, {
-        dashed: true
+        dashed: true,
+        key: key
       });
     }
-
     return /*#__PURE__*/React.createElement(S.InformationCardPropertyItem, {
-      key: ""
+      key: key
     }, label && /*#__PURE__*/React.createElement(S.InformationCardPropertyItemLabel, null, label, ":"), /*#__PURE__*/React.createElement(S.InformationCardPropertyItemValue, null, value));
   }));
 };

package/dist/InformationCardPropertyList/InformationCardPropertyList.types.d.ts

@@ -1,8 +1,9 @@
-import type { ReactNode } from 'react';
+import type { Key, ReactNode } from 'react';
 export type InformationCardPropertyItemTypes = 'divider';
 export type InformationCardPropertyItem = {
     label: ReactNode;
     value?: ReactNode;
+    key?: Key;
     type?: InformationCardPropertyItemTypes;
 };
 export type InformationCardPropertyListProps = {

package/dist/InformationCardSummary/InformationCardSummary.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import Tooltip from '@synerise/ds-tooltip/dist/Tooltip';
 import * as S from '../InformationCard.styles';
@@ -9,10 +8,13 @@ export var InformationCardSummary = function InformationCardSummary(_ref) {
     "data-testid": "information-card-summary"
   }, items == null ? void 0 : items.map(function (_ref2) {
     var icon = _ref2.icon,
-        label = _ref2.label,
-        tooltip = _ref2.tooltip,
-        tooltipProps = _ref2.tooltipProps;
-    var item = /*#__PURE__*/React.createElement(S.InformationCardSummaryItem, null, icon && /*#__PURE__*/React.createElement("div", null, icon), label && /*#__PURE__*/React.createElement("div", null, label));
+      label = _ref2.label,
+      tooltip = _ref2.tooltip,
+      tooltipProps = _ref2.tooltipProps,
+      key = _ref2.key;
+    var item = /*#__PURE__*/React.createElement(S.InformationCardSummaryItem, {
+      key: key
+    }, icon && /*#__PURE__*/React.createElement("div", null, icon), label && /*#__PURE__*/React.createElement("div", null, label));
     return tooltip ? /*#__PURE__*/React.createElement(Tooltip, _extends({
       title: tooltip
     }, tooltipProps), item) : item;

package/dist/InformationCardSummary/InformationCardSummary.types.d.ts

@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react';
-import { TooltipProps } from '@synerise/ds-tooltip';
+import type { ReactNode, Key } from 'react';
+import type { TooltipProps } from '@synerise/ds-tooltip';
 export type InformationCardSummaryItem = {
     label: ReactNode;
     icon: ReactNode;
     tooltip?: ReactNode;
     tooltipProps?: TooltipProps;
+    key?: Key;
 };
 export type InformationCardSummaryProps = {
     items?: InformationCardSummaryItem[];

package/dist/InformationCardTooltip/InformationCardTooltip.js

@@ -1,9 +1,6 @@
 var _excluded = ["triggerProps", "children", "style", "informationCardProps"];
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 import React, { useCallback, useMemo } from 'react';
 import Trigger from 'rc-trigger';
 import { useTheme } from '@synerise/ds-core';
@@ -12,13 +9,11 @@ import { TRIGGER_PLACEMENTS } from './InformationCard.constants';
 import * as S from './InformationCardTooltip.styles';
 export var InformationCardTooltip = function InformationCardTooltip(_ref) {
   var _triggerProps$default;
-
   var triggerProps = _ref.triggerProps,
-      children = _ref.children,
-      style = _ref.style,
-      informationCardProps = _ref.informationCardProps,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    children = _ref.children,
+    style = _ref.style,
+    informationCardProps = _ref.informationCardProps,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var dsTheme = useTheme();
   var zIndex = parseInt(dsTheme.variables['zindex-tooltip'], 10);
   var renderedInfocard = useMemo(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-information-card",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "InformationCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,20 +35,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.38",
-    "@synerise/ds-avatar": "^0.17.21",
-    "@synerise/ds-badge": "^0.8.19",
-    "@synerise/ds-button": "^0.21.19",
-    "@synerise/ds-card": "^0.19.16",
-    "@synerise/ds-description": "^0.4.2",
-    "@synerise/ds-divider": "^0.7.15",
-    "@synerise/ds-dropdown": "^0.18.24",
-    "@synerise/ds-icon": "^0.67.0",
-    "@synerise/ds-menu": "^0.20.6",
-    "@synerise/ds-scrollbar": "^0.11.19",
-    "@synerise/ds-subtle-form": "^0.9.136",
-    "@synerise/ds-tooltip": "^0.14.49",
-    "@synerise/ds-typography": "^0.16.6",
+    "@synerise/ds-alert": "^0.8.39",
+    "@synerise/ds-avatar": "^0.17.22",
+    "@synerise/ds-badge": "^0.8.20",
+    "@synerise/ds-button": "^0.21.20",
+    "@synerise/ds-card": "^0.19.17",
+    "@synerise/ds-description": "^0.4.3",
+    "@synerise/ds-divider": "^0.7.16",
+    "@synerise/ds-dropdown": "^0.18.25",
+    "@synerise/ds-icon": "^0.67.1",
+    "@synerise/ds-menu": "^0.20.7",
+    "@synerise/ds-scrollbar": "^0.11.20",
+    "@synerise/ds-subtle-form": "^0.9.137",
+    "@synerise/ds-tooltip": "^0.14.50",
+    "@synerise/ds-typography": "^0.16.7",
     "@synerise/ds-utils": "^0.31.2",
     "rc-trigger": "5.2.5"
   },
@@ -58,5 +58,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "5.0.1"
   },
-  "gitHead": "05f083c767e2cec3c2f91c9475aee89852a77d6c"
+  "gitHead": "4a56ee7ef816c22341ce704154dc7aa65b7d1dcc"
 }