@innovaccer/design-system 2.22.0 → 2.23.0

package/css/src/components/pageHeader.css

@@ -1,9 +1,9 @@
-.PageHeader-wrapper {
-  padding: var(--spacing) var(--spacing-2);
+.PageHeader {
+  width: 100%;
 }
 
-.PageHeader-wrapper--separator {
-  border-bottom: var(--border);
+.PageHeader-wrapper {
+  padding: var(--spacing) var(--spacing-2) var(--spacing) 0;
 }
 
 .PageHeader-wrapper--withTabs {
@@ -36,12 +36,12 @@
   align-items: center;
 }
 
-.PageHeader-statusWrapper .StatusHints {
+.PageHeader-statusWrapper .StatusHint {
   margin-right: var(--spacing);
 }
 
 .PageHeader-navigationWrapper {
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-m);
 }
 
 .PageHeader .PageHeader-navigationWrapper {
@@ -50,6 +50,7 @@
   margin-top: 0 !important;
   padding-right: var(--spacing);
   padding-left: var(--spacing);
+  display: flex;
 }
 
 .PageHeader-title {

package/dist/.lib/tsconfig.type.tsbuildinfo

@@ -422,8 +422,8 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/icon/Icon.tsx": {
-        "version": "1663515e438053fe9b396fdb9c9349e622df3d1371e607a8cab96d1e676663b4",
-        "signature": "6e38c578d63e87920c2be85e89210227f76b482f68501f520f74ec154d8683a6",
+        "version": "76fab90ff6fdc52fe80a963ffec364e1500af3152fc0aa82cc84ca233c818cde",
+        "signature": "13c7197912e4415f8e45669697f035b60956612e8dde3f1141f305805fb2b45d",
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/icon/index.tsx": {
@@ -597,7 +597,7 @@
         "affectsGlobalScope": false
       },
       "../../core/components/atoms/dropdown/Dropdown.tsx": {
-        "version": "4134450fe08182e05aec4256bfd3d69c95e03b21a85cf9c5e829be5ccf832105",
+        "version": "afd814b303ff51113e809897d567e0c7ac77c61bcd46c0f942d3414bcdc35759",
         "signature": "c171f1203f6dc27aa75553acd55d26d8a6d9ed99c4c7ab6b457e52f29fcfbc1e",
         "affectsGlobalScope": false
       },
@@ -1456,9 +1456,14 @@
         "signature": "d0f06c76368a1badc37a1f9cfa3bf079912bd2f14c193a0973d577a929abd3c4",
         "affectsGlobalScope": false
       },
+      "../../core/components/organisms/pageHeader/utils.tsx": {
+        "version": "ecfded64fc18f71ca83c058d49cc1b76f35175f01122c3bbfaa142ebcc35fcc4",
+        "signature": "8b4bdadb0f1ea118ef924e8207dad0215ad1b4f3786232ec4ead75898273006f",
+        "affectsGlobalScope": false
+      },
       "../../core/components/organisms/pageHeader/PageHeader.tsx": {
-        "version": "5f019e305dfd68eded04b13c2d52a1d6bbce29abb94f87ed92e642a7a4298bd0",
-        "signature": "68e694cbf1378c86c4ebafe68adb2cac6a17333af8bb06b31892ce5297f38a25",
+        "version": "033d112f5e98dc0ef59834efca4baa83a27de9b3982c417883822811d01fdfa1",
+        "signature": "6795b787c8157cfbfe4f2859ac05ada02c45e15878294b23fe94bd43e2d60b9f",
         "affectsGlobalScope": false
       },
       "../../core/components/organisms/pageHeader/index.tsx": {
@@ -4655,6 +4660,9 @@
           "*",
           "*",
           "*",
+          "*",
+          "*",
+          "*",
           "*"
         ]
       },
@@ -6245,6 +6253,7 @@
         "../../node_modules/@types/node/util.d.ts"
       ],
       "../../core/components/organisms/pageHeader/PageHeader.tsx": [
+        "../../core/components/organisms/pageHeader/utils.tsx",
         "../../core/index.tsx",
         "../../core/utils/types.tsx",
         "../../node_modules/@types/node/util.d.ts",
@@ -6255,6 +6264,13 @@
         "../../core/components/organisms/pageHeader/PageHeader.tsx",
         "../../node_modules/@types/node/util.d.ts"
       ],
+      "../../core/components/organisms/pageHeader/utils.tsx": [
+        "../../core/components/organisms/pageHeader/PageHeader.tsx",
+        "../../core/index.tsx",
+        "../../node_modules/@types/node/util.d.ts",
+        "../../node_modules/@types/react/index.d.ts",
+        "../../node_modules/classnames/index.d.ts"
+      ],
       "../../core/components/organisms/table/DraggableDropdown.tsx": [
         "../../core/components/organisms/grid/utility.tsx",
         "../../core/index.tsx",
@@ -11956,6 +11972,7 @@
       "../../core/components/organisms/navigation/index.tsx",
       "../../core/components/organisms/pageHeader/PageHeader.tsx",
       "../../core/components/organisms/pageHeader/index.tsx",
+      "../../core/components/organisms/pageHeader/utils.tsx",
       "../../core/components/organisms/table/DraggableDropdown.tsx",
       "../../core/components/organisms/table/Header.tsx",
       "../../core/components/organisms/table/Table.tsx",

package/dist/core/components/atoms/icon/Icon.d.ts

@@ -17,7 +17,6 @@ export declare const Icon: {
     displayName: string;
     defaultProps: {
         size: number;
-        type: string;
     };
 };
 export default Icon;

package/dist/core/components/organisms/pageHeader/PageHeader.d.ts

@@ -11,6 +11,7 @@ export interface PageHeaderProps extends BaseProps {
     badge?: React.ReactNode;
     status?: React.ReactNode;
     meta?: React.ReactNode;
+    button?: React.ReactNode;
     navigationPosition: navigationPositionType;
     separator: boolean;
 }

package/dist/core/components/organisms/pageHeader/utils.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { navigationPositionType } from "./PageHeader";
+export declare const Status: (props: {
+    status: React.ReactNode;
+    meta: React.ReactNode;
+    navigationPosition: navigationPositionType;
+    navigation: React.ReactNode;
+    tabs: React.ReactNode;
+}) => JSX.Element;
+export declare const Action: (props: {
+    actions: React.ReactNode;
+    navigation: React.ReactNode;
+    stepper: React.ReactNode;
+}) => JSX.Element;
+export declare const Nav: (props: {
+    navigation: React.ReactNode;
+    stepper: React.ReactNode;
+}) => JSX.Element | null;
+export declare const CenterNav: (props: {
+    colSize: string;
+    breadcrumbs: React.ReactNode;
+    navigationPosition: navigationPositionType;
+    navigation: React.ReactNode;
+    stepper: React.ReactNode;
+}) => JSX.Element;
+export declare const BackButton: (props: {
+    button: React.ReactNode;
+}) => JSX.Element;
+export declare const Title: (props: {
+    badge: React.ReactNode;
+    title: string;
+}) => JSX.Element;

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1695891565938 
+   * Generated on: 1697533162404 
    *      Package: @innovaccer/design-system
-   *      Version: v2.22.0
+   *      Version: v2.23.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -2716,6 +2716,45 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
   });
 };
 
+var iconTypeMapper = {
+  timelapse: 'outlined',
+  content_copy: 'outlined',
+  speed: 'outlined',
+  add_circle_outline: 'outlined',
+  turned_in_not: 'outlined',
+  important_devices: 'outlined',
+  thumb_down_off_alt: 'outlined',
+  alarm_on: 'outlined',
+  calendar_view_month: 'outlined',
+  aspect_ratio: 'outlined',
+  change_history: 'outlined',
+  arrow_circle_down: 'outlined',
+  card_membership: 'outlined',
+  query_builder: 'outlined',
+  copyright: 'outlined',
+  arrow_circle_up: 'outlined',
+  alarm: 'outlined',
+  work_outline: 'outlined',
+  bookmark_border: 'outlined',
+  delete_outline: 'outlined',
+  credit_card: 'outlined',
+  highlight_of: 'outlined',
+  check_circle_outline: 'outlined',
+  help_outline: 'outlined',
+  schedule: 'outlined',
+  radio_button_unchecked: 'outlined',
+  radio_button_checked: 'outlined',
+  "delete": 'outlined'
+};
+/**
+ *
+ * <pre class="DocPage-codeBlock mx-6 mb-7">
+ *  Following Icons are mapped to **outlined** type by default:
+ *  <br />
+ *  timelapse,  content_copy,  speed,  add_circle_outline,  turned_in_not,  important_devices,  thumb_down_off_alt,  alarm_on,  calendar_view_month,  aspect_ratio,  change_history,  arrow_circle_down,  card_membership,  query_builder,  copyright,  arrow_circle_up,  alarm,  work_outline,  bookmark_border,  delete_outline,  credit_card,  highlight_of,  check_circle_outline, help_outline,  schedule,  radio_button_unchecked,  radio_button_checked,  delete
+ * </pre>
+ */
+
 var Icon = function Icon(props) {
   var _classNames;
 
@@ -2733,7 +2772,7 @@ var Icon = function Icon(props) {
     filled: 'rounded',
     'two-tone': 'rounded'
   };
-  var type = props.type && mapper[props.type] || props.type;
+  var type = props.type && mapper[props.type] || props.type || name && iconTypeMapper[name] || 'rounded';
 
   var getIconAppearance = function getIconAppearance(iconColor) {
     var x = iconColor.indexOf('_');
@@ -2762,8 +2801,7 @@ var Icon = function Icon(props) {
 };
 Icon.displayName = 'Icon';
 Icon.defaultProps = {
-  size: 16,
-  type: 'rounded'
+  size: 16
 };
 
 var _excluded$A = ["children", "componentType", "className"];
@@ -5624,7 +5662,7 @@ var inputRef = /*#__PURE__*/React.createRef();
  *      const errorMessages = {
  *        'FAILED\_TO\_FETCH': 'Failed to fetch data',
  *        'NO\_RECORDS\_FOUND': 'No results found',
- *        'DEFAULT': 'No results found'
+ *        'DEFAULT': 'No record available'
  *      }
  *      return(
  *        \<Heading>{errorMessages[errorType]}\</Heading>
@@ -5737,8 +5775,18 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
 
           var disabledOptions = _this.getDisabledOptions(unSelectedGroup.slice(0, _this.staticLimit));
 
+          var errorResult = errorType;
+
+          if (optionsLength === 0 && searchTerm === '') {
+            errorResult = 'DEFAULT';
+          } else if (searchTerm !== '') {
+            errorResult = 'NO_RECORDS_FOUND';
+          } else {
+            errorResult = 'FAILED_TO_FETCH';
+          }
+
           _this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
-            errorType: fetchOptions && errorType !== 'NO_RECORDS_FOUND' ? 'FAILED_TO_FETCH' : errorType,
+            errorType: fetchOptions ? errorResult : errorType,
             scrollIndex: res.scrollToIndex || 0,
             optionsLength: optionsLength,
             loading: false,
@@ -5754,6 +5802,11 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
 
           if (updatedAsync || withSearch) (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
         }
+      })["catch"](function () {
+        _this.setState({
+          errorType: fetchOptions ? 'FAILED_TO_FETCH' : errorType,
+          loading: false
+        });
       });
     });
 
@@ -15589,7 +15642,7 @@ Collapsible.defaultProps = {
   withTrigger: true
 };
 
-var Status = function Status(props) {
+var Status$1 = function Status(props) {
   var type = props.type,
       time = props.time,
       className = props.className,
@@ -15684,7 +15737,7 @@ var Status = function Status(props) {
       return null;
   }
 };
-Status.displayName = 'Status';
+Status$1.displayName = 'Status';
 
 var Box = function Box(props) {
   var _classNames;
@@ -15765,7 +15818,7 @@ var ChatMessage = function ChatMessage(props) {
     typingText: typingText,
     isTyping: isTyping,
     statusType: statusType
-  }), !isTyping && statusOptions && /*#__PURE__*/React.createElement(Status, statusOptions));
+  }), !isTyping && statusOptions && /*#__PURE__*/React.createElement(Status$1, statusOptions));
 };
 ChatMessage.displayName = 'ChatMessage';
 
@@ -21312,9 +21365,84 @@ Navigation.defaultProps = {
   rounded: false
 };
 
-var PageHeader = function PageHeader(props) {
-  var _classNames;
+var Status = function Status(props) {
+  var status = props.status,
+      meta = props.meta,
+      navigationPosition = props.navigationPosition,
+      navigation = props.navigation,
+      tabs = props.tabs;
+  var statusClasses = classnames({
+    'PageHeader-statusWrapper': true,
+    'mb-3': navigationPosition === 'bottom' && navigation || tabs
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (status || meta) && /*#__PURE__*/React.createElement("div", {
+    className: statusClasses,
+    "data-test": "DesignSystem-PageHeader--Status"
+  }, status, meta));
+};
+var Action = function Action(props) {
+  var actions = props.actions,
+      navigation = props.navigation,
+      stepper = props.stepper;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, actions ? /*#__PURE__*/React.createElement(Column, {
+    size: "4",
+    sizeXL: "4",
+    sizeM: "4",
+    "data-test": "DesignSystem-PageHeader--Actions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "PageHeader-actionsWrapper"
+  }, actions)) : (navigation || stepper) && /*#__PURE__*/React.createElement(Column, {
+    size: "4",
+    sizeXL: "4",
+    sizeM: "4",
+    "data-test": "DesignSystem-PageHeader--Actions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "PageHeader-actionsWrapper"
+  })));
+};
+var Nav = function Nav(props) {
+  var navigation = props.navigation,
+      stepper = props.stepper;
+
+  if (!navigation && !stepper) {
+    return null;
+  }
 
+  return /*#__PURE__*/React.createElement("div", {
+    className: "PageHeader-navigationWrapper",
+    "data-test": "DesignSystem-PageHeader--Nav"
+  }, navigation || stepper);
+};
+var CenterNav = function CenterNav(props) {
+  var colSize = props.colSize,
+      breadcrumbs = props.breadcrumbs,
+      navigationPosition = props.navigationPosition;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (!breadcrumbs || navigationPosition === 'center') && colSize === '4' && /*#__PURE__*/React.createElement(Column, {
+    size: "4",
+    sizeXL: "4",
+    sizeM: "4",
+    "data-test": "DesignSystem-PageHeader--CenterNav"
+  }, /*#__PURE__*/React.createElement(Nav, props)));
+};
+var BackButton = function BackButton(props) {
+  var button = props.button;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, button && /*#__PURE__*/React.createElement("div", {
+    className: "mr-5 my-3",
+    "data-test": "DesignSystem-PageHeader--Button"
+  }, button));
+};
+var Title = function Title(props) {
+  var badge = props.badge,
+      title = props.title;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "PageHeader-titleWrapper",
+    "data-test": "DesignSystem-PageHeader--Title"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    className: "PageHeader-title"
+  }, title), badge);
+};
+
+var PageHeader = function PageHeader(props) {
   var title = props.title,
       navigation = props.navigation,
       stepper = props.stepper,
@@ -21326,57 +21454,64 @@ var PageHeader = function PageHeader(props) {
       status = props.status,
       meta = props.meta,
       navigationPosition = props.navigationPosition,
-      className = props.className;
+      className = props.className,
+      button = props.button;
   var baseProps = extractBaseProps(props);
-  var wrapperClasses = classnames((_classNames = {
+  var wrapperClasses = classnames(_defineProperty$1({
     'PageHeader-wrapper': true
-  }, _defineProperty$1(_classNames, 'PageHeader-wrapper--separator', separator), _defineProperty$1(_classNames, 'PageHeader-wrapper--withTabs', tabs), _classNames), className);
+  }, 'PageHeader-wrapper--withTabs', tabs), className);
   var classes = classnames({
     PageHeader: true
   });
-
-  var renderNav = function renderNav() {
-    if (!navigation && !stepper) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: "PageHeader-navigationWrapper"
-    }, navigation || stepper);
-  };
-
   var colSize = (navigation || stepper) && navigationPosition === 'center' ? '4' : actions ? '8' : '12';
-  return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
+  var centerNavProps = {
+    colSize: colSize,
+    breadcrumbs: breadcrumbs,
+    navigationPosition: navigationPosition,
+    navigation: navigation,
+    stepper: stepper
+  };
+  var statusProps = {
+    status: status,
+    meta: meta,
+    navigationPosition: navigationPosition,
+    navigation: navigation,
+    tabs: tabs
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": "DesignSystem-PageHeader"
+  }, /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
     className: wrapperClasses
-  }), breadcrumbs, /*#__PURE__*/React.createElement("div", {
+  }), breadcrumbs && /*#__PURE__*/React.createElement("div", {
+    className: "pl-6",
+    "data-test": "DesignSystem-PageHeader--Breadcrumbs"
+  }, breadcrumbs), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex pl-6"
+  }, /*#__PURE__*/React.createElement(BackButton, {
+    button: button
+  }), /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
     size: colSize,
     sizeXL: colSize,
     sizeM: colSize
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "PageHeader-titleWrapper"
-  }, /*#__PURE__*/React.createElement(Heading, {
-    className: "PageHeader-title"
-  }, title), badge)), (!breadcrumbs || navigationPosition === 'center') && colSize === '4' && /*#__PURE__*/React.createElement(Column, {
-    size: "4",
-    sizeXL: "4",
-    sizeM: "4"
-  }, renderNav()), actions ? /*#__PURE__*/React.createElement(Column, {
-    size: "4",
-    sizeXL: "4",
-    sizeM: "4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "PageHeader-actionsWrapper"
-  }, actions)) : (navigation || stepper) && /*#__PURE__*/React.createElement(Column, {
-    size: "4",
-    sizeXL: "4",
-    sizeM: "4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "PageHeader-actionsWrapper"
-  })))), (status || meta) && /*#__PURE__*/React.createElement("div", {
-    className: "PageHeader-statusWrapper"
-  }, status, meta), breadcrumbs && navigationPosition === 'bottom' && renderNav(), tabs && /*#__PURE__*/React.createElement("div", null, tabs));
+  }, /*#__PURE__*/React.createElement(Title, {
+    badge: badge,
+    title: title
+  })), /*#__PURE__*/React.createElement(CenterNav, centerNavProps), /*#__PURE__*/React.createElement(Action, {
+    actions: actions,
+    navigation: navigation,
+    stepper: stepper
+  })), /*#__PURE__*/React.createElement(Status, statusProps))), /*#__PURE__*/React.createElement("div", {
+    className: "pl-3"
+  }, navigationPosition === 'bottom' && /*#__PURE__*/React.createElement(Nav, {
+    navigation: navigation,
+    stepper: stepper
+  }), tabs && /*#__PURE__*/React.createElement("div", {
+    "data-test": "DesignSystem-PageHeader--Tabs"
+  }, tabs))), separator && /*#__PURE__*/React.createElement(Divider, {
+    appearance: "header"
+  }));
 };
 PageHeader.defaultProps = {
   navigationPosition: 'center',
@@ -22159,6 +22294,6 @@ SelectionCard.defaultProps = {
 SelectionCard.useMultiSelect = useMultiSelect;
 SelectionCard.useSingleSelect = useSingleSelect;
 
-var version = "2.22.0";
+var version = "2.23.0";
 
 export { ActionCard, Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };