@bigbinary/neetoui 5.1.11 → 5.1.13

package/index.cjs.js

@@ -10667,7 +10667,7 @@ var getScrollbarWidth = function getScrollbarWidth() {
 var noop$2 = function noop() {};
 var hyphenize = function hyphenize(string) {
   var fallbackString = "nui";
-  if (string && string.replace) {
+  if (string && typeof string === "string" && string.replace) {
     return string.replace(/[\s_]/g, "-").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/-+/g, "-").toLowerCase();
   }
   return fallbackString;
@@ -10739,6 +10739,7 @@ var Portal$1 = function Portal(_ref, ref) {
   var children = _ref.children,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$E);
   return /*#__PURE__*/React__default["default"].createElement("div", _extends$4({
+    "data-cy": "neeto-backdrop",
     "data-testid": "neeto-backdrop",
     ref: ref
   }, otherProps), children);
@@ -14745,7 +14746,11 @@ var Tooltip = function Tooltip(_ref) {
     role: "tooltip",
     theme: theme,
     zIndex: 100001,
-    onCreate: setInstance
+    onCreate: function onCreate(instance) {
+      var _instance$popper$firs;
+      setInstance(instance);
+      (_instance$popper$firs = instance.popper.firstElementChild) === null || _instance$popper$firs === void 0 ? void 0 : _instance$popper$firs.setAttribute("data-cy", "tooltip-box");
+    }
   }, localProps, otherProps), /*#__PURE__*/React__default["default"].isValidElement(children) ? children : /*#__PURE__*/React__default["default"].createElement("span", null, children));
 };
 
@@ -14901,7 +14906,7 @@ var Divider = function Divider(props) {
 };
 
 var _excluded$B = ["children", "className"];
-var Menu$1 = function Menu(_ref) {
+var Menu$2 = function Menu(_ref) {
   var children = _ref.children,
     className = _ref.className,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$B);
@@ -15150,7 +15155,7 @@ var Dropdown = function Dropdown(_ref2) {
     onClick: onClick
   }, buttonProps)));
 };
-Dropdown.Menu = Menu$1;
+Dropdown.Menu = Menu$2;
 Dropdown.MenuItem = MenuItem;
 Dropdown.Divider = Divider;
 
@@ -17552,17 +17557,21 @@ var useTimeout = function useTimeout(callback, delay) {
 
 var Body$1 = function Body(_ref) {
   var children = _ref.children,
-    className = _ref.className;
+    className = _ref.className,
+    dataCy = _ref.dataCy;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames$1("neeto-ui-modal__body", className)
+    className: classnames$1("neeto-ui-modal__body", className),
+    "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : "modal-body"
   }, children);
 };
 
 var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
-    className = _ref.className;
+    className = _ref.className,
+    dataCy = _ref.dataCy;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames$1("neeto-ui-modal__footer", className)
+    className: classnames$1("neeto-ui-modal__footer", className),
+    "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : "modal-footer"
   }, children);
 };
 
@@ -17703,11 +17712,14 @@ var Header$1 = function Header(_ref) {
   var _ref$description = _ref.description,
     description = _ref$description === void 0 ? "" : _ref$description,
     children = _ref.children,
-    className = _ref.className;
+    className = _ref.className,
+    dataCy = _ref.dataCy;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames$1("neeto-ui-modal__header", className)
+    className: classnames$1("neeto-ui-modal__header", className),
+    "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : "modal-header"
   }, children, description && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-modal__header-desc"
+    className: "neeto-ui-modal__header-desc",
+    "data-cy": "modal-header-desc"
   }, /*#__PURE__*/React__default["default"].createElement(Typography, {
     lineHeight: "normal",
     style: "body2"
@@ -17800,6 +17812,7 @@ var Modal = function Modal(_ref) {
   }, otherProps), closeButton && /*#__PURE__*/React__default["default"].createElement(Button, {
     "aria-label": "Close",
     className: "neeto-ui-modal__close",
+    "data-cy": "modal-close-button",
     "data-testid": "close-button",
     icon: neetoIcons.Close,
     size: "small",
@@ -17863,6 +17876,7 @@ var Alert = function Alert(_ref) {
     closeButton: closeButton,
     closeOnEsc: closeOnEsc,
     closeOnOutsideClick: closeOnOutsideClick,
+    "data-cy": "alert-box",
     isOpen: isOpen,
     size: size,
     onClose: onClose
@@ -18215,6 +18229,7 @@ var Checkbox = /*#__PURE__*/React$5.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends$4({
     "aria-invalid": !!error,
     className: "neeto-ui-checkbox",
+    "data-cy": "".concat(hyphenize(renderLabel), "-checkbox-input"),
     id: id,
     name: id,
     ref: ref,
@@ -20314,6 +20329,7 @@ var DatePicker = /*#__PURE__*/React$5.forwardRef(function (_ref2, ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-input__wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement(Label, labelProps, label), /*#__PURE__*/React__default["default"].createElement(Component, _extends$4({
+    "data-cy": label ? "".concat(hyphenize(label), "-input") : "picker-input",
     defaultValue: convertToDayjsObjects(defaultValue),
     format: format,
     picker: picker,
@@ -23508,7 +23524,7 @@ var MenuPlacer = function MenuPlacer(props) {
     })
   });
 };
-var Menu = function Menu(props) {
+var Menu$1 = function Menu(props) {
   var children = props.children,
     className = props.className,
     cx = props.cx,
@@ -23753,7 +23769,7 @@ var valueContainerCSS = function valueContainerCSS(_ref2) {
     overflow: 'hidden'
   };
 };
-var ValueContainer = function ValueContainer(props) {
+var ValueContainer$1 = function ValueContainer(props) {
   var children = props.children,
     className = props.className,
     cx = props.cx,
@@ -23855,7 +23871,7 @@ var baseCSS = function baseCSS(_ref3) {
   };
 };
 var dropdownIndicatorCSS = baseCSS;
-var DropdownIndicator = function DropdownIndicator(props) {
+var DropdownIndicator$1 = function DropdownIndicator(props) {
   var children = props.children,
     className = props.className,
     cx = props.cx,
@@ -23870,7 +23886,7 @@ var DropdownIndicator = function DropdownIndicator(props) {
   }, innerProps), children || jsx(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
-var ClearIndicator = function ClearIndicator(props) {
+var ClearIndicator$1 = function ClearIndicator(props) {
   var children = props.children,
     className = props.className,
     cx = props.cx,
@@ -24227,7 +24243,7 @@ var MultiValueGeneric = function MultiValueGeneric(_ref4) {
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
-function MultiValueRemove$1(_ref5) {
+function MultiValueRemove$2(_ref5) {
   var children = _ref5.children,
     innerProps = _ref5.innerProps;
   return jsx("div", _extends$2({
@@ -24342,7 +24358,7 @@ var placeholderCSS = function placeholderCSS(_ref) {
     marginRight: spacing.baseUnit / 2
   };
 };
-var Placeholder = function Placeholder(props) {
+var Placeholder$1 = function Placeholder(props) {
   var children = props.children,
     className = props.className,
     cx = props.cx,
@@ -24390,9 +24406,9 @@ var SingleValue = function SingleValue(props) {
 };
 
 var components = {
-  ClearIndicator: ClearIndicator,
+  ClearIndicator: ClearIndicator$1,
   Control: Control,
-  DropdownIndicator: DropdownIndicator,
+  DropdownIndicator: DropdownIndicator$1,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
   Group: Group,
@@ -24401,7 +24417,7 @@ var components = {
   IndicatorSeparator: IndicatorSeparator,
   Input: Input,
   LoadingIndicator: LoadingIndicator,
-  Menu: Menu,
+  Menu: Menu$1,
   MenuList: MenuList,
   MenuPortal: MenuPortal,
   LoadingMessage: LoadingMessage,
@@ -24409,12 +24425,12 @@ var components = {
   MultiValue: MultiValue,
   MultiValueContainer: MultiValueContainer,
   MultiValueLabel: MultiValueLabel,
-  MultiValueRemove: MultiValueRemove$1,
+  MultiValueRemove: MultiValueRemove$2,
   Option: Option,
-  Placeholder: Placeholder,
+  Placeholder: Placeholder$1,
   SelectContainer: SelectContainer,
   SingleValue: SingleValue,
-  ValueContainer: ValueContainer
+  ValueContainer: ValueContainer$1
 };
 var defaultComponents = function defaultComponents(props) {
   return _objectSpread2(_objectSpread2({}, components), props.components);
@@ -27254,7 +27270,7 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
     className: "neeto-ui-email-input__suffix"
   }, suffix)) : null;
 };
-var MultiValueRemove = function MultiValueRemove(props) {
+var MultiValueRemove$1 = function MultiValueRemove(props) {
   return /*#__PURE__*/React__default["default"].createElement(components.MultiValueRemove, props, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
     size: 16
   }));
@@ -27293,7 +27309,7 @@ var CUSTOM_COMPONENTS = {
   DropdownIndicator: CustomDropdownIndicator,
   ClearIndicator: null,
   Control: CustomControl,
-  MultiValueRemove: MultiValueRemove,
+  MultiValueRemove: MultiValueRemove$1,
   ValueContainer: CustomValueContainer
 };
 
@@ -27692,6 +27708,7 @@ var Body = function Body(_ref) {
     _ref$hasFooter = _ref.hasFooter,
     hasFooter = _ref$hasFooter === void 0 ? true : _ref$hasFooter;
   return /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-cy": "pane-body",
     className: classnames$1("neeto-ui-pane__body neeto-ui-flex neeto-ui-flex-col neeto-ui-items-start neeto-ui-justify-start", _defineProperty$7({
       "neeto-ui-pane__body--has-footer": hasFooter
     }, className, className))
@@ -27712,7 +27729,8 @@ var Header = function Header(_ref) {
   var children = _ref.children,
     className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames$1("neeto-ui-pane__header", className)
+    className: classnames$1("neeto-ui-pane__header", className),
+    "data-cy": "pane-header"
   }, children);
 };
 
@@ -27805,6 +27823,7 @@ var Pane = function Pane(_ref) {
   }, otherProps), closeButton && /*#__PURE__*/React__default["default"].createElement(Button, {
     "aria-label": "Close",
     className: "neeto-ui-pane__close",
+    "data-cy": "pane-close-button",
     "data-testid": "close-button",
     icon: neetoIcons.Close,
     size: "small",
@@ -28082,14 +28101,60 @@ var STRATEGIES = {
   "default": "default",
   fixed: "fixed"
 };
+var DropdownIndicator = function DropdownIndicator(props) {
+  return /*#__PURE__*/React__default["default"].createElement(components.DropdownIndicator, props, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Down, {
+    size: 16
+  }));
+};
+var ClearIndicator = function ClearIndicator(props) {
+  return /*#__PURE__*/React__default["default"].createElement(components.ClearIndicator, props, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
+    size: 16
+  }));
+};
+var MultiValueRemove = function MultiValueRemove(props) {
+  return /*#__PURE__*/React__default["default"].createElement(components.MultiValueRemove, props, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
+    size: 16
+  }));
+};
 var CustomInput = function CustomInput(props) {
   var selectProps = props.selectProps;
   return /*#__PURE__*/React__default["default"].createElement(components.Input, _extends$4({}, props, {
-    "data-cy": selectProps && selectProps["data-cy"],
+    "data-cy": selectProps ? selectProps["data-cy"] : "select-input",
     "data-testid": selectProps && selectProps["data-testid"],
     maxLength: selectProps && selectProps.maxLength
   }));
 };
+var CustomOption = function CustomOption(props) {
+  return /*#__PURE__*/React__default["default"].createElement(components.Option, _extends$4({}, props, {
+    innerProps: _objectSpread$9(_objectSpread$9({}, props.innerProps), {}, {
+      "data-cy": "".concat(hyphenize(props.label), "-select-option")
+    })
+  }));
+};
+var Placeholder = function Placeholder(props) {
+  var selectProps = props.selectProps;
+  return /*#__PURE__*/React__default["default"].createElement(components.Placeholder, _extends$4({}, props, {
+    innerProps: _objectSpread$9(_objectSpread$9({}, props.innerProps), {}, {
+      "data-cy": selectProps ? "".concat(hyphenize(selectProps.label), "-select-placeholder") : "select-placeholder"
+    })
+  }));
+};
+var Menu = function Menu(props) {
+  var selectProps = props.selectProps;
+  return /*#__PURE__*/React__default["default"].createElement(components.Menu, _extends$4({}, props, {
+    innerProps: _objectSpread$9(_objectSpread$9({}, props.innerProps), {}, {
+      "data-cy": selectProps ? "".concat(hyphenize(selectProps.label), "-select-menu") : "select-menu"
+    })
+  }));
+};
+var ValueContainer = function ValueContainer(props) {
+  var selectProps = props.selectProps;
+  return /*#__PURE__*/React__default["default"].createElement(components.ValueContainer, _extends$4({}, props, {
+    innerProps: _objectSpread$9(_objectSpread$9({}, props.innerProps), {}, {
+      "data-cy": selectProps ? "".concat(hyphenize(selectProps.label), "-select-value-container") : "select-value-container"
+    })
+  }));
+};
 var Select = function Select(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? SIZES$2.medium : _ref$size,
@@ -28137,21 +28202,6 @@ var Select = function Select(_ref) {
     },
     menuPosition: "fixed"
   };
-  var DropdownIndicator = function DropdownIndicator(props) {
-    return /*#__PURE__*/React__default["default"].createElement(components.DropdownIndicator, props, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Down, {
-      size: 16
-    }));
-  };
-  var ClearIndicator = function ClearIndicator(props) {
-    return /*#__PURE__*/React__default["default"].createElement(components.ClearIndicator, props, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
-      size: 16
-    }));
-  };
-  var MultiValueRemove = function MultiValueRemove(props) {
-    return /*#__PURE__*/React__default["default"].createElement(components.MultiValueRemove, props, /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, {
-      size: 16
-    }));
-  };
   var options = otherProps.options,
     defaultOptions = otherProps.defaultOptions,
     getOptionValue = otherProps.getOptionValue;
@@ -28185,6 +28235,7 @@ var Select = function Select(_ref) {
     "data-cy": "".concat(hyphenize(label), "-select-container"),
     defaultValue: findInOptions(defaultValue),
     inputId: inputId,
+    label: label,
     ref: innerRef,
     value: findInOptions(value),
     className: classnames$1(["neeto-ui-react-select__container"], {
@@ -28195,9 +28246,13 @@ var Select = function Select(_ref) {
     }),
     components: _objectSpread$9({
       Input: CustomInput,
+      Option: CustomOption,
       DropdownIndicator: DropdownIndicator,
       ClearIndicator: ClearIndicator,
-      MultiValueRemove: MultiValueRemove
+      MultiValueRemove: MultiValueRemove,
+      Placeholder: Placeholder,
+      Menu: Menu,
+      ValueContainer: ValueContainer
     }, componentOverrides)
   }, portalProps, otherProps)), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__error",
@@ -28270,6 +28325,7 @@ var Switch = /*#__PURE__*/React$5.forwardRef(function (_ref, ref) {
     onChange: onChange
   }, otherProps)), /*#__PURE__*/React__default["default"].createElement("span", {
     "aria-hidden": "true",
+    "data-cy": "".concat(hyphenize(renderLabel), "-switch"),
     className: classnames$1("neeto-ui-switch", {
       "neeto-ui-switch--checked": !!checked
     })
@@ -34847,7 +34903,7 @@ var Table = function Table(_ref) {
     var headerHeight = headerRef.current ? headerRef.current.offsetHeight : TABLE_DEFAULT_HEADER_HEIGHT;
     setHeaderHeight(headerHeight);
     handleHeaderClasses();
-  }, 0);
+  }, 10);
   var _useReorderColumns = useReorderColumns({
       isEnabled: enableColumnReorder,
       columns: columns,
@@ -37818,6 +37874,7 @@ var TOAST_CONFIG = {
     return /*#__PURE__*/React__default["default"].createElement(neetoIcons.Close, _extends$4({
       className: "neeto-ui-toastr__close-button",
       color: "currentColor",
+      "data-cy": "toastr-close-button",
       size: 16,
       onClick: closeToast
     }, props));
@@ -37827,16 +37884,20 @@ var TOAST_CONFIG = {
 };
 var TOAST_ICON = {
   success: /*#__PURE__*/React__default["default"].createElement(neetoIcons.CheckCircle, {
-    className: "neeto-ui-text-white"
+    className: "neeto-ui-text-white",
+    "data-cy": "success-toast-icon"
   }),
   warning: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Warning, {
-    className: "neeto-ui-text-white"
+    className: "neeto-ui-text-white",
+    "data-cy": "warning-toast-icon"
   }),
   error: /*#__PURE__*/React__default["default"].createElement(neetoIcons.CloseCircle, {
-    className: "neeto-ui-white"
+    className: "neeto-ui-white",
+    "data-cy": "error-toast-icon"
   }),
   info: /*#__PURE__*/React__default["default"].createElement(neetoIcons.Info, {
-    className: "neeto-ui-text-white"
+    className: "neeto-ui-text-white",
+    "data-cy": "info-toast-icon"
   })
 };
 var toastrList = new UniqueArray();