@innovaccer/design-system 2.38.1 → 2.40.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1720783452832 
+   * Generated on: 1722261465945 
    *      Package: @innovaccer/design-system
-   *      Version: v2.38.1
+   *      Version: v2.40.0
    *      License: MIT
    *         Docs: https://mds.innovaccer.com
    */
@@ -2750,7 +2750,9 @@
         return labelText;
       };
 
-      return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Tooltip, {
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-inline-flex"
+      }, /*#__PURE__*/React__namespace.createElement(Tooltip, {
         showTooltip: isTextTruncated,
         "data-test": "DesignSystem-GenericChip--Tooltip",
         tooltip: getTooltipText()
@@ -6568,10 +6570,12 @@
         }
       }, [ref.current]);
       var setCursorPosition = React__namespace.useCallback(function (val) {
-        return setSelectionPos({
-          start: val,
-          end: val
-        });
+        if (document && document.activeElement === ref.current) {
+          setSelectionPos({
+            start: val,
+            end: val
+          });
+        }
       }, [setSelectionPos]);
       var insertAtIndex = React__namespace.useCallback(function (currValue, index, iterator) {
         if (iterator === void 0) {
@@ -8530,7 +8534,7 @@
 
         _this.state = {
           animationKeyframe: '',
-          isOpen: _this.props.open || false,
+          isOpen: _this.props.open && !_this.props.disabled || false,
           uniqueKey: ''
         };
         _this.hoverableDelay = 100;
@@ -8570,7 +8574,7 @@
             animationKeyframe: ''
           });
 
-          if (this.props.open) {
+          if (this.props.open && !this.props.disabled) {
             var triggerElement = this.triggerRef.current;
             var zIndex = this.getZIndexForLayer(triggerElement);
             this.setState({
@@ -8677,8 +8681,9 @@
         var _a = this.props,
             trigger = _a.trigger,
             on = _a.on,
-            triggerClass = _a.triggerClass;
-        var options = on === 'hover' ? {
+            triggerClass = _a.triggerClass,
+            disabled = _a.disabled;
+        var options = on === 'hover' && !disabled ? {
           ref: ref,
           onMouseEnter: this.handleMouseEnter,
           onMouseLeave: this.handleMouseLeave,
@@ -8688,8 +8693,7 @@
           ref: ref,
           onClick: function onClick(ev) {
             ev.stopPropagation();
-
-            _this.togglePopper('onClick');
+            !disabled && _this.togglePopper('onClick');
           }
         };
         var classes = classNames__default["default"]('PopperWrapper-trigger', triggerClass);
@@ -8873,7 +8877,8 @@
         closeOnBackdropClick: true,
         hoverable: true,
         appendToBody: true,
-        style: {}
+        style: {},
+        disabled: false
       };
       return PopperWrapper;
     }(React__namespace.Component);
@@ -12500,7 +12505,8 @@
 
       var children = props.children,
           onTabChange = props.onTabChange,
-          className = props.className;
+          className = props.className,
+          size = props.size;
       var baseProps = extractBaseProps(props);
       var tabs = Array.isArray(children) ? children : [children];
       var totalTabs = tabs.length;
@@ -12525,7 +12531,7 @@
         var _b = child.props,
             label = _b.label,
             disabled = _b.disabled;
-        var tabHeaderClass = classNames__default["default"]((_a = {}, _a['Tab'] = true, _a['Tab--disabled'] = disabled, _a['Tab--active'] = !disabled && active === index, _a));
+        var tabHeaderClass = classNames__default["default"]((_a = {}, _a['Tab'] = true, _a['Tab--disabled'] = disabled, _a['Tab--active'] = !disabled && active === index, _a['Tab--regular'] = size === 'regular', _a['Tab--small'] = size === 'small', _a));
         return /*#__PURE__*/React__namespace.createElement("div", {
           "data-test": "DesignSystem-Tabs--Header",
           key: index,
@@ -12547,6 +12553,9 @@
       }, tabs[active]));
     };
     TabsWrapper.displayName = 'TabsWrapper';
+    TabsWrapper.defaultProps = {
+      size: 'regular'
+    };
 
     var Tab = function Tab(props) {
       var children = props.children;
@@ -12581,7 +12590,9 @@
           withSeparator = props.withSeparator,
           onTabChange = props.onTabChange,
           className = props.className,
-          headerClassName = props.headerClassName;
+          headerClassName = props.headerClassName,
+          size = props.size,
+          maxWidth = props.maxWidth;
       var baseProps = extractBaseProps(props);
       var tabRefs = [];
       var tabs = children ? filterTabs(children) : props.tabs;
@@ -12720,27 +12731,41 @@
       };
 
       var renderTab = function renderTab(tab, index) {
-        var _a;
+        var _a, _b;
 
-        var _b = tab,
-            _c = _b.label,
-            label = _c === void 0 ? '' : _c,
-            disabled = _b.disabled,
-            isDismissible = _b.isDismissible,
-            _d = _b.onDismiss,
-            onDismiss = _d === void 0 ? function () {} : _d;
+        var elementRef = /*#__PURE__*/React__namespace.createRef();
+        var _c = tab,
+            _d = _c.label,
+            label = _d === void 0 ? '' : _d,
+            disabled = _c.disabled,
+            isDismissible = _c.isDismissible,
+            _e = _c.onDismiss,
+            onDismiss = _e === void 0 ? function () {} : _e;
 
         if (typeof label !== 'string') {
           return label;
         }
 
         var textAppearance = activeIndex === index ? 'link' : disabled ? 'disabled' : 'subtle';
-        var tabTextClass = classNames__default["default"]((_a = {}, _a['Tab-selected'] = !disabled && activeIndex === index, _a));
-        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, renderInfo(tab, index), /*#__PURE__*/React__namespace.createElement(Text, {
+        var tabTextClass = classNames__default["default"]((_a = {}, _a['ellipsis--noWrap'] = true, _a['Tab-selected'] = !disabled && activeIndex === index, _a));
+        var tabClass = classNames__default["default"]((_b = {}, _b['Tab--regular'] = size === 'regular', _b['Tab--small'] = size === 'small', _b['Tab--overflow'] = true, _b));
+        return /*#__PURE__*/React__namespace.createElement(Tooltip, {
+          showOnTruncation: true,
+          tooltip: label,
+          elementRef: elementRef,
+          triggerClass: "ellipsis--noWrap flex-grow-0"
+        }, /*#__PURE__*/React__namespace.createElement("span", {
+          className: tabClass,
+          "data-test": "DesignSystem-Tabs--TextWrapper",
+          style: {
+            maxWidth: maxWidth
+          }
+        }, renderInfo(tab, index), /*#__PURE__*/React__namespace.createElement(Text, {
           "data-test": "DesignSystem-Tabs--Text",
           appearance: textAppearance,
-          className: tabTextClass
-        }, label), isDismissible && renderDismissIcon(tab, index, onDismiss));
+          className: tabTextClass,
+          ref: elementRef
+        }, label), isDismissible && renderDismissIcon(tab, index, onDismiss)));
       };
 
       var renderTabs = tabs.map(function (tab, index) {
@@ -12780,7 +12805,9 @@
     Tabs.displayName = 'Tabs';
     Tabs.defaultProps = {
       withSeparator: true,
-      tabs: []
+      tabs: [],
+      size: 'regular',
+      maxWidth: 'var(--spacing-9)'
     };
 
     var accepts = function accepts(file, acceptedFiles) {
@@ -21100,6 +21127,84 @@
       position: 'bottom-start'
     };
 
+    var KeyElement = function KeyElement(props) {
+      var children = props.children,
+          icon = props.icon,
+          iconOptions = props.iconOptions,
+          iconAlign = props.iconAlign,
+          label = props.label,
+          className = props.className;
+      var baseProps = extractBaseProps(props);
+      var iconClassNames = classNames__default["default"]('py-2', {
+        'mr-3': iconAlign === 'left',
+        'ml-3': iconAlign === 'right'
+      });
+      var keyClassNames = classNames__default["default"]('d-flex', 'align-items-center', className);
+
+      if (children) {
+        return /*#__PURE__*/React__namespace.createElement("dt", __assign$1({
+          "data-test": "DesignSystem-KeyValuePair-KeyElement"
+        }, baseProps), children);
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("dt", __assign$1({
+        "data-test": "DesignSystem-KeyValuePair-KeyElement"
+      }, baseProps, {
+        className: keyClassNames
+      }), icon && iconAlign === 'left' && /*#__PURE__*/React__namespace.createElement(Icon, __assign$1({
+        appearance: "subtle",
+        name: icon,
+        className: iconClassNames,
+        "data-test": "DesignSystem-KeyValuePair-Icon--Left"
+      }, iconOptions)), label && /*#__PURE__*/React__namespace.createElement(Text, {
+        weight: "medium",
+        appearance: "subtle"
+      }, label), icon && iconAlign === 'right' && /*#__PURE__*/React__namespace.createElement(Icon, __assign$1({
+        appearance: "subtle",
+        name: icon,
+        className: iconClassNames,
+        "data-test": "DesignSystem-KeyValuePair-Icon--Right"
+      }, iconOptions)));
+    };
+    KeyElement.defaultProps = {
+      iconAlign: 'left'
+    };
+
+    var ValueElement = function ValueElement(props) {
+      var children = props.children,
+          value = props.value,
+          className = props.className;
+      var baseProps = extractBaseProps(props);
+      var valueClassNames = classNames__default["default"]('m-0', className);
+
+      if (children) {
+        return /*#__PURE__*/React__namespace.createElement("dd", __assign$1({
+          "data-test": "DesignSystem-KeyValuePair-ValueElement"
+        }, baseProps, {
+          className: valueClassNames
+        }), children);
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("dd", __assign$1({
+        "data-test": "DesignSystem-KeyValuePair-ValueElement"
+      }, baseProps, {
+        className: valueClassNames
+      }), value && /*#__PURE__*/React__namespace.createElement(Text, null, value));
+    };
+
+    var KeyValuePair = function KeyValuePair(props) {
+      var children = props.children,
+          className = props.className;
+      var pairClassNames = classNames__default["default"]('m-0', className);
+      return /*#__PURE__*/React__namespace.createElement("dl", __assign$1({
+        "data-test": "DesignSystem-KeyValuePair"
+      }, props, {
+        className: pairClassNames
+      }), children);
+    };
+    KeyValuePair.Key = KeyElement;
+    KeyValuePair.Value = ValueElement;
+
     var img$4 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C10 5.52285 5.52285 10 0 10C5.52285 10 10 14.4772 10 20C10 14.4772 14.4772 10 20 10C14.4772 10 10 5.52285 10 0ZM20 14C20 17.3137 17.3137 20 14 20C17.3137 20 20 22.6863 20 26C20 22.6863 22.6863 20 26 20C22.6863 20 20 17.3137 20 14Z' fill='%231f1f1f'/%3e%3c/svg%3e";
 
     var img$3 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C10 5.52285 5.52285 10 0 10C5.52285 10 10 14.4772 10 20C10 14.4772 14.4772 10 20 10C14.4772 10 10 5.52285 10 0ZM20 14C20 17.3137 17.3137 20 14 20C17.3137 20 20 22.6863 20 26C20 22.6863 22.6863 20 26 20C22.6863 20 20 17.3137 20 14Z' fill='%23A6A6A6'/%3e%3c/svg%3e";
@@ -25502,7 +25607,7 @@
     AIResponse.ActionBar = ChatActionBar;
     AIResponse.Body = ChatBody;
 
-    var version = "2.38.1";
+    var version = "2.40.0";
 
     exports.AIButton = AIButton;
     exports.AIChip = AIChip;
@@ -25555,6 +25660,7 @@
     exports.InlineMessage = InlineMessage;
     exports.Input = Input;
     exports.InputMask = X;
+    exports.KeyValuePair = KeyValuePair;
     exports.Label = Label;
     exports.Legend = Legend;
     exports.Link = Link;