@innovaccer/design-system 2.17.0 → 2.19.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1690223582934 
+   * Generated on: 1692978951022 
    *      Package: @innovaccer/design-system
-   *      Version: v2.17.0
+   *      Version: v2.19.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -2622,7 +2622,7 @@ var isSpaceKey = function isSpaceKey(e) {
   return e.key === 'Space';
 };
 
-var _excluded$y = ["onClick", "onKeyDown", "role"];
+var _excluded$y = ["onClick", "onKeyDown", "role", "tabIndex"];
 var allowed = {
   button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
   link: new Set(['Enter']),
@@ -2645,12 +2645,13 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
       _onKeyDown = _ref.onKeyDown,
       _ref$role = _ref.role,
       role = _ref$role === void 0 ? 'button' : _ref$role,
+      tabIndex = _ref.tabIndex,
       rest = _objectWithoutProperties(_ref, _excluded$y);
 
   return _objectSpread2({}, onClick ? {
     onClick: onClick,
     role: role,
-    tabIndex: 0,
+    tabIndex: tabIndex || 0,
     'aria-label': rest['aria-label'],
     onKeyDown: function onKeyDown(e) {
       if (_onKeyDown) {
@@ -2670,6 +2671,7 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
     }
   } : {
     role: role,
+    tabIndex: tabIndex,
     'aria-label': rest['aria-label']
   });
 };
@@ -2775,7 +2777,8 @@ var GenericChip = function GenericChip(props) {
       className = props.className,
       selected = props.selected,
       onClose = props.onClose,
-      onClick = props.onClick;
+      onClick = props.onClick,
+      labelPrefix = props.labelPrefix;
   var baseProps = extractBaseProps(props);
 
   var iconClass = function iconClass(align) {
@@ -2809,11 +2812,16 @@ var GenericChip = function GenericChip(props) {
 
   var renderLabel = function renderLabel() {
     if (typeof label === 'string') {
-      return /*#__PURE__*/React.createElement(Text, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, labelPrefix && /*#__PURE__*/React.createElement(Text, {
+        "data-test": "DesignSystem-GenericChip--LabelPrefix",
+        weight: "medium",
+        color: textColor,
+        className: "Chip-text mr-3"
+      }, labelPrefix), /*#__PURE__*/React.createElement(Text, {
         "data-test": "DesignSystem-GenericChip--Text",
         color: textColor,
         className: "Chip-text"
-      }, label);
+      }, label));
     }
 
     return label;
@@ -2863,7 +2871,8 @@ var Chip = function Chip(props) {
       onClose = props.onClose,
       onClick = props.onClick,
       name = props.name,
-      className = props.className;
+      className = props.className,
+      labelPrefix = props.labelPrefix;
   var baseProps = extractBaseProps(props);
 
   var onCloseHandler = function onCloseHandler() {
@@ -2890,7 +2899,8 @@ var Chip = function Chip(props) {
     className: chipClass,
     onClose: onCloseHandler,
     onClick: onClickHandler,
-    name: name
+    name: name,
+    labelPrefix: labelPrefix
   }));
 };
 Chip.displayName = 'Chip';
@@ -3245,7 +3255,7 @@ var Trigger$1 = function Trigger(props) {
   }));
 };
 
-var _excluded$t = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children"];
+var _excluded$t = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"];
 var DatePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(DatePicker, _React$Component);
 
@@ -3387,6 +3397,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           showTodayDate = _this$props4$showToda === void 0 ? true : _this$props4$showToda,
           _this$props4$children = _this$props4.children,
           children = _this$props4$children === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : _this$props4$children,
+          view = _this$props4.view,
           rest = _objectWithoutProperties(_this$props4, _excluded$t);
 
       var date = this.state.date;
@@ -3411,16 +3422,23 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         return !isTodayDateDisabled;
       };
 
+      var todayChipClass = classnames({
+        'd-flex justify-content-center': true,
+        'pb-5': size === 'small',
+        'pb-6': size === 'large',
+        'pt-3': size === 'large' && view === 'year'
+      });
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "d-flex"
       }, children, /*#__PURE__*/React.createElement(Calendar, _extends$2({}, rest, {
         size: size,
         date: currDate,
+        view: view,
         disabledBefore: dateDisabledBefore,
         disabledAfter: dateDisabledAfter,
         onDateChange: this.onDateChangeHandler
       }))), showTodayDate && /*#__PURE__*/React.createElement("div", {
-        className: "d-flex justify-content-center pb-6",
+        className: todayChipClass,
         "data-test": "DesignSystem-Select--TodaysDate-wrapper"
       }, /*#__PURE__*/React.createElement(Chip, {
         label: "Today, ".concat(todayMonthAndDate),
@@ -4108,7 +4126,8 @@ var TimePickerWithSearch = function TimePickerWithSearch(props) {
       showDuration = props.showDuration,
       noResultMessage = props.noResultMessage,
       disabledSlotList = props.disabledSlotList,
-      fetchTimeOptions = props.fetchTimeOptions;
+      fetchTimeOptions = props.fetchTimeOptions,
+      error = props.error;
 
   var _React$useState = React.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4205,7 +4224,8 @@ var TimePickerWithSearch = function TimePickerWithSearch(props) {
     staticLimit: dropdownOptionList.length,
     onPopperToggle: function onPopperToggle() {
       setOpenPopover(!openPopover);
-    }
+    },
+    error: error
   });
 };
 TimePickerWithSearch.defaultProps = {
@@ -4220,7 +4240,8 @@ var TimePickerWithInput = function TimePickerWithInput(props) {
       inputFormat = props.inputFormat,
       outputFormat = props.outputFormat,
       onTimeChange = props.onTimeChange,
-      timeProp = props.time;
+      timeProp = props.time,
+      error = props.error;
 
   var _React$useState = React.useState(timeProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -4285,6 +4306,7 @@ var TimePickerWithInput = function TimePickerWithInput(props) {
     onChange: onChangeHandler,
     onClear: onClearHandler,
     onBlur: onBlurHandler,
+    error: error,
     id: "parent-TimePicker"
   }));
 };
@@ -6884,6 +6906,7 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
       'd-flex flex-column flex-grow-1': true
     }, className);
   }, [className]);
+  var isValueEqualPlaceholder = value === defaultPlaceholderValue;
   return /*#__PURE__*/React.createElement("div", {
     className: classes,
     "data-test": "DesignSystem-InputMask--Wrapper"
@@ -6892,8 +6915,13 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     error: error,
     required: required,
     onFocus: onFocusHandler,
-    onChange: onChangeHandler,
-    onClear: onClearHandler,
+    onChange: onChangeHandler
+    /**
+     * input right cross icon should be visible only
+     * when user provides value
+     */
+    ,
+    onClear: !isValueEqualPlaceholder ? onClearHandler : undefined,
     onBlur: onBlurHandler,
     onPaste: onPasteHandler,
     autoComplete: 'off',
@@ -6982,7 +7010,7 @@ var Label = function Label(props) {
     "data-test": "DesignSystem-Label--Text",
     className: classes,
     componentType: "label"
-  }, rest), children), renderInfo(required, optional), info && renderIndicator(info));
+  }, rest), children, renderInfo(required, optional), info && renderIndicator(info)));
 };
 Label.displayName = 'Label';
 
@@ -13787,7 +13815,7 @@ var ChipInput = function ChipInput(props) {
   }, [value]);
   var ChipInputClass = classnames((_classNames = {
     ChipInput: true
-  }, _defineProperty$1(_classNames, 'ChipInput--disabled', disabled), _defineProperty$1(_classNames, 'ChipInput--withChips', chips.length > 0), _classNames), className);
+  }, _defineProperty$1(_classNames, 'ChipInput--disabled', disabled), _defineProperty$1(_classNames, 'ChipInput--withChips', chips && chips.length > 0), _classNames), className);
 
   var onUpdateChips = function onUpdateChips(updatedChips) {
     if (onChange) onChange(updatedChips);
@@ -13873,7 +13901,7 @@ var ChipInput = function ChipInput(props) {
       type: type,
       disabled: disabled,
       key: index,
-      className: "my-2 mx-2",
+      className: "my-3 mx-2",
       onClick: function onClick() {
         return _onClick && _onClick(chip, index);
       },
@@ -13888,11 +13916,15 @@ var ChipInput = function ChipInput(props) {
     /* TODO(a11y): fix accessibility  */
 
     /* eslint-disable  */
-    React.createElement("div", _extends$2({
+    React.createElement("div", {
+      "data-test": "DesignSystem-ChipInput--Border",
+      className: "ChipInput-border"
+    }, /*#__PURE__*/React.createElement("div", _extends$2({
       "data-test": "DesignSystem-ChipInput"
     }, baseProps, {
       className: ChipInputClass,
-      onClick: onClickHandler
+      onClick: onClickHandler,
+      tabIndex: disabled ? -1 : 0
     }), /*#__PURE__*/React.createElement("div", {
       className: "ChipInput-wrapper"
     }, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", {
@@ -13900,7 +13932,7 @@ var ChipInput = function ChipInput(props) {
       ref: inputRef,
       className: "ChipInput-input",
       autoFocus: autoFocus,
-      placeholder: placeholder,
+      placeholder: chips && chips.length > 0 ? '' : placeholder,
       disabled: disabled,
       value: inputValue,
       onBlur: onBlur,
@@ -13910,10 +13942,11 @@ var ChipInput = function ChipInput(props) {
     })), chips.length > 0 && /*#__PURE__*/React.createElement(Icon, {
       "data-test": "DesignSystem-ChipInput--Icon",
       name: "close",
-      appearance: "subtle",
+      appearance: disabled ? 'disabled' : 'subtle',
       className: "ChipInput-icon",
-      onClick: onDeleteAllHandler
-    }))
+      onClick: onDeleteAllHandler,
+      tabIndex: disabled ? -1 : 0
+    })))
   );
 };
 ChipInput.displayName = 'ChipInput';
@@ -15944,15 +15977,10 @@ var EditableInput = function EditableInput(props) {
         position: "right",
         className: "px-6 py-6 d-flex align-items-center",
         on: "hover"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        name: "error",
-        appearance: 'alert',
-        className: "mr-4"
-      }), /*#__PURE__*/React.createElement(Text, {
-        "data-test": "DesignSystem-EditableInput--ErrorPopper",
-        appearance: "destructive",
-        weight: "medium"
-      }, errorMessage)) : inputComponent;
+      }, /*#__PURE__*/React.createElement(InlineMessage, {
+        appearance: "alert",
+        description: errorMessage
+      })) : inputComponent;
     }
 
     return /*#__PURE__*/React.createElement("div", {
@@ -18972,52 +19000,6 @@ var context = /*#__PURE__*/React.createContext(_objectSpread2(_objectSpread2({},
 }));
 var GridProvider = context.Provider;
 
-var GridNestedRow = function GridNestedRow(props) {
-  var context$1 = React.useContext(context);
-  var schema = context$1.schema,
-      loading = context$1.loading,
-      nestedRowRenderer = context$1.nestedRowRenderer;
-  var data = props.data,
-      rowIndex = props.rowIndex;
-  if (nestedRowRenderer) return nestedRowRenderer({
-    data: data,
-    schema: schema,
-    loading: loading,
-    rowIndex: rowIndex
-  }); // return (
-  //   <Text>{JSON.stringify(data)}</Text>
-  // )
-  // const {
-  //   schema: propSchema
-  // } = _this.props;
-  // if (data._expanded) {
-  //   const showHead = data._expanded.showHead;
-  //   const schema = data._expanded.schema || propSchema;
-  //   let gridData = data._expanded.data;
-  //   if (!gridData) {
-  //     const {
-  //       _uid,
-  //       _expanded,
-  //       ...rest
-  //     } = data;
-  //     gridData = [rest];
-  //   }
-  //   return (
-  //     <div className="Grid-expandedRow">
-  //       <Grid
-  //         key={'expanedRow'}
-  //         showHead={showHead}
-  //         data={gridData}
-  //         schema={schema}
-  //         totalRecords={gridData.length}
-  //       />
-  //     </div>
-  //   );
-  // }
-
-  return null;
-};
-
 var HeaderCell = function HeaderCell(props) {
   var context$1 = React.useContext(context);
   var schema = props.schema,
@@ -19204,7 +19186,8 @@ var BodyCell = function BodyCell(props) {
       schema = props.schema,
       expandedState = props.expandedState,
       rowIndex = props.rowIndex,
-      colIndex = props.colIndex;
+      colIndex = props.colIndex,
+      nestedRowData = props.nestedRowData;
   var size = context$1.size,
       loading = context$1.loading,
       nestedRows = context$1.nestedRows;
@@ -19222,20 +19205,15 @@ var BodyCell = function BodyCell(props) {
     loading: loading,
     expanded: expanded
   };
-  var nestedProps = {
-    data: data,
-    rowIndex: rowIndex
-  };
-  var isNestedRowDisabled = !GridNestedRow(nestedProps);
   return /*#__PURE__*/React.createElement("div", {
     className: "Grid-cellContent"
-  }, colIndex === 0 && nestedRows && /*#__PURE__*/React.createElement(React.Fragment, null, !isNestedRowDisabled ? /*#__PURE__*/React.createElement(Icon, {
+  }, colIndex === 0 && nestedRows && /*#__PURE__*/React.createElement(React.Fragment, null, nestedRowData ? /*#__PURE__*/React.createElement(Icon, {
     className: 'Grid-nestedRowTrigger',
     name: expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
     size: 20,
     appearance: 'default',
     onClick: function onClick(e) {
-      if (!isNestedRowDisabled) {
+      if (nestedRowData) {
         e.stopPropagation();
         setExpanded(!expanded);
       }
@@ -19261,7 +19239,8 @@ var Cell = function Cell(props) {
       onMenuChange = _ref.onMenuChange,
       onFilterChange = _ref.onFilterChange,
       updateColumnSchema = _ref.updateColumnSchema,
-      reorderColumn = _ref.reorderColumn;
+      reorderColumn = _ref.reorderColumn,
+      nestedRowData = _ref.nestedRowData;
   var draggable = context$1.draggable,
       separator = context$1.separator,
       nestedRows = context$1.nestedRows,
@@ -19360,7 +19339,8 @@ var Cell = function Cell(props) {
     colIndex: colIndex,
     data: data,
     schema: schema,
-    expandedState: expandedState
+    expandedState: expandedState,
+    nestedRowData: nestedRowData
   }));
 };
 
@@ -19436,6 +19416,54 @@ var GridHead = function GridHead(props) {
   }, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')));
 };
 
+var GridNestedRow = function GridNestedRow(props) {
+  var context$1 = React.useContext(context);
+  var schema = context$1.schema,
+      loading = context$1.loading,
+      nestedRowRenderer = context$1.nestedRowRenderer;
+  var data = props.data,
+      rowIndex = props.rowIndex,
+      expanded = props.expanded;
+  if (nestedRowRenderer) return nestedRowRenderer({
+    data: data,
+    schema: schema,
+    loading: loading,
+    rowIndex: rowIndex,
+    expanded: expanded
+  }); // return (
+  //   <Text>{JSON.stringify(data)}</Text>
+  // )
+  // const {
+  //   schema: propSchema
+  // } = _this.props;
+  // if (data._expanded) {
+  //   const showHead = data._expanded.showHead;
+  //   const schema = data._expanded.schema || propSchema;
+  //   let gridData = data._expanded.data;
+  //   if (!gridData) {
+  //     const {
+  //       _uid,
+  //       _expanded,
+  //       ...rest
+  //     } = data;
+  //     gridData = [rest];
+  //   }
+  //   return (
+  //     <div className="Grid-expandedRow">
+  //       <Grid
+  //         key={'expanedRow'}
+  //         showHead={showHead}
+  //         data={gridData}
+  //         schema={schema}
+  //         totalRecords={gridData.length}
+  //       />
+  //     </div>
+  //   );
+  // }
+
+  return null;
+};
+
 var GridRow = function GridRow(props) {
   var context$1 = React.useContext(context);
   var type = context$1.type,
@@ -19478,6 +19506,12 @@ var GridRow = function GridRow(props) {
   var unpinnedSchema = schema.filter(function (s) {
     return !s.hidden && !s.pinned;
   });
+  var nestedProps = {
+    data: data,
+    rowIndex: rI,
+    expanded: expanded
+  };
+  var nestedRowData = GridNestedRow(nestedProps);
 
   var renderCheckbox = function renderCheckbox(show) {
     if (!show || !withCheckbox) return null;
@@ -19520,7 +19554,8 @@ var GridRow = function GridRow(props) {
           firstCell: !index,
           schema: s,
           data: data,
-          expandedState: [expanded, setExpanded]
+          expandedState: [expanded, setExpanded],
+          nestedRowData: nestedRowData
         });
       }));
     }
@@ -19540,10 +19575,7 @@ var GridRow = function GridRow(props) {
     ref: rowRef
   }, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')), nestedRows && expanded && /*#__PURE__*/React.createElement("div", {
     className: "Grid-nestedRow"
-  }, /*#__PURE__*/React.createElement(GridNestedRow, {
-    data: data,
-    rowIndex: rI
-  })));
+  }, nestedRowData));
 };
 GridRow.defaultProps = {
   data: {}
@@ -21817,6 +21849,6 @@ LinkButton.defaultProps = {
   iconAlign: 'left'
 };
 
-var version = "2.17.0";
+var version = "2.19.0";
 
 export { 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, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };