@zohodesk/dot 1.2.0 → 1.2.1

package/es/form/fields/TextareaField/props/propTypes.js

@@ -14,7 +14,6 @@ export const propTypes = {
   maxLength: PropTypes.number,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
   placeHolder: PropTypes.string,
   textBoxSize: PropTypes.string,
   textBoxVariant: PropTypes.string,
@@ -30,5 +29,6 @@ export const propTypes = {
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),
-  ...FieldCommonPropTypes()
+  htmlId: PropTypes.string,
+  ...FieldCommonPropTypes
 };

package/es/form/fields/ValidationMessage/props/propTypes.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   clipped: PropTypes.bool,
-  id: PropTypes.string,
   onClick: PropTypes.func,
   palette: PropTypes.oneOf(['primary', 'mandatory', 'danger']),
   size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large']),
@@ -10,5 +9,8 @@ export const propTypes = {
   a11y: PropTypes.shape({
     role: PropTypes.string
   }),
-  tooltip: PropTypes.string
+  tooltip: PropTypes.string,
+  htmlFor: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/form/fields/props/FieldCommonPropTypes.js

@@ -1,23 +1,17 @@
 import PropTypes from 'prop-types';
-export const FieldCommonPropTypes = () => {
-  return {
-    ePhiData: PropTypes.shape({
-      ePhiTitle: PropTypes.string,
-      ePhiText: PropTypes.string,
-      ePhiStatus: PropTypes.bool
-    }),
-    dataId: PropTypes.string,
-    infoText: PropTypes.string,
-    lockedInfoText: PropTypes.string,
-    isLocked: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isReadOnly: PropTypes.bool,
-    isMandatory: PropTypes.bool,
-    renderLabelProps: PropTypes.shape({
-      start: PropTypes.func,
-      middle: PropTypes.func,
-      end: PropTypes.func
-    }),
-    dataSelectorId: PropTypes.bool
-  };
-};
+export const FieldCommonPropTypes = {
+  dataId: PropTypes.string,
+  infoText: PropTypes.string,
+  lockedInfoText: PropTypes.string,
+  isLocked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isMandatory: PropTypes.bool,
+  renderLabelProps: PropTypes.shape({
+    start: PropTypes.func,
+    middle: PropTypes.func,
+    end: PropTypes.func
+  }),
+  dataSelectorId: PropTypes.bool
+};
+;

package/es/form/layout/Section/props/propTypes.js

@@ -5,5 +5,7 @@ export const propTypes = {
   containerClass: PropTypes.string,
   dataId: PropTypes.string,
   title: PropTypes.string,
-  titleClass: PropTypes.string
+  titleClass: PropTypes.string,
+  column: PropTypes.string,
+  formName: PropTypes.string
 };

package/es/list/Comment/props/propTypes.js

@@ -2,8 +2,5 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   className: PropTypes.string,
   count: PropTypes.string,
-  features: PropTypes.array,
-  iconTitle: PropTypes.string,
-  module: PropTypes.string,
   onClick: PropTypes.func
 };

package/es/list/GridStencils/props/propTypes.js

@@ -3,5 +3,6 @@ export const propTypes = {
   from: PropTypes.string,
   isThreeLayout: PropTypes.bool,
   lineBar: PropTypes.string,
-  styles: PropTypes.object
+  styles: PropTypes.object,
+  order: PropTypes.number
 };

package/es/list/Icons/props/propTypes.js

@@ -48,8 +48,6 @@ export const SmartIcon_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  features: PropTypes.array,
   iconClass: PropTypes.string,
-  module: PropTypes.string,
   onClick: PropTypes.func
 };

package/es/list/SecondaryText/props/propTypes.js

@@ -30,7 +30,6 @@ export const ContactName_propTypes = {
   isPaidUser: PropTypes.bool,
   notAccessible: PropTypes.bool,
   onClick: PropTypes.func,
-  sentimentTitle: PropTypes.string,
   sentimentType: PropTypes.oneOf(['positive', 'negative', 'neutral']),
   text: PropTypes.string,
   urlData: PropTypes.object,

package/es/list/UserTime/props/propTypes.js

@@ -10,5 +10,9 @@ export const propTypes = {
   later: PropTypes.string,
   textClass: PropTypes.string,
   title: PropTypes.string,
-  to: PropTypes.string
+  to: PropTypes.string,
+  type: PropTypes.string,
+  page: PropTypes.string,
+  isNeedTime: PropTypes.bool,
+  isOverdue: PropTypes.bool
 };

package/es/list/status/StatusDropdown/props/propTypes.js

@@ -47,5 +47,7 @@ export const propTypes = {
   title: PropTypes.string,
   togglePopup: PropTypes.func,
   value: PropTypes.node,
-  needMultiLineText: PropTypes.bool
+  needMultiLineText: PropTypes.bool,
+  onSelectLabel: PropTypes.func,
+  top: PropTypes.number
 };

package/es/lookup/Lookup/props/propTypes.js

@@ -15,5 +15,8 @@ export const propTypes = {
   onKeyDown: PropTypes.func,
   childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
   needFocusScope: PropTypes.bool,
-  customProps: PropTypes.object
+  customProps: PropTypes.object,
+  forwardRef: PropTypes.object,
+  onClick: PropTypes.func,
+  onClose: PropTypes.func
 };

package/es/lookup/header/ViewDropDown/props/propTypes.js

@@ -2,26 +2,21 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   emptyMessage: PropTypes.string,
   needSearch: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    text: PropTypes.string
-  }))]).isRequired,
   searchBoxPlaceHolder: PropTypes.string,
   searchEmptyMessage: PropTypes.string,
-  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  valueField: PropTypes.string,
-  textField: PropTypes.string,
-  needLocalSearch: PropTypes.bool,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
 
   /**** Popup props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
   removeClose: PropTypes.func,
   closePopupOnly: PropTypes.func,
   position: PropTypes.string,
   getTargetRef: PropTypes.func,
-  getContainerRef: PropTypes.func
+  getContainerRef: PropTypes.func,
+  defaultDropBoxPosition: PropTypes.string,
+  animationStyle: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  searchBoxVariant: PropTypes.string,
+  maxLength: PropTypes.string
 };

package/es/setup/table/TableHead/props/propTypes.js

@@ -3,5 +3,6 @@ export const propTypes = {
   children: PropTypes.element,
   className: PropTypes.string,
   onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func
+  onMouseLeave: PropTypes.func,
+  dataId: PropTypes.string
 };

package/es/v1/ChannelIcon/ChannelIcon.js

@@ -0,0 +1,92 @@
+import React, { Component } from 'react';
+import { Icon } from '@zohodesk/icons';
+import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
+import AvatarIcon from '../../avatar/AvatarIcon/AvatarIcon';
+import { defaultProps } from '../../ChannelIcon/props/defaultProps';
+import { propTypes } from '../../ChannelIcon/props/propTypes';
+import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
+import style from '../../ChannelIcon/ChannelIcon.module.css';
+
+const ChannelIcon = props => {
+  let {
+    name,
+    action,
+    iconSize,
+    iconTitle,
+    size,
+    topicIcon,
+    topicIconTitle,
+    topicIconSize,
+    topicIconColor,
+    iconClass,
+    dataId,
+    className,
+    palette,
+    textPalette,
+    customTextClass,
+    iconColor,
+    needTopicBorder,
+    topicClass,
+    renderIconOnly,
+    iconName,
+    title,
+    dataSelectorId
+  } = props;
+  let defaultChannelObj = name && !iconName && getChannelMappingObj()[name.toUpperCase()];
+  let customizedChannelName = null;
+
+  if (!defaultChannelObj) {
+    customizedChannelName = name;
+  } else {
+    iconName = defaultChannelObj[action];
+  }
+
+  return /*#__PURE__*/React.createElement("span", {
+    className: style.container,
+    "data-selector-id": dataSelectorId
+  }, customizedChannelName ? /*#__PURE__*/React.createElement(Avatar, {
+    name: customizedChannelName,
+    size: size,
+    palette: palette,
+    textPalette: textPalette,
+    customClass: customTextClass,
+    dataId: dataId,
+    needTitle: title,
+    title: title
+  }) : !renderIconOnly ? iconName ? /*#__PURE__*/React.createElement(AvatarIcon, {
+    name: iconName,
+    iconSize: iconSize,
+    size: size,
+    iconClass: `${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''} ${iconClass ? iconClass : ''} `,
+    dataId: dataId,
+    className: className,
+    iconColor: iconColor,
+    title: iconTitle
+  }) : /*#__PURE__*/React.createElement(Avatar, {
+    name: name,
+    size: size,
+    palette: palette,
+    textPalette: textPalette,
+    customClass: customTextClass,
+    needTitle: title,
+    title: title
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: `${iconClass ? iconClass : ''} ${style.iconStyle} ${name && action ? style[`${name.toLowerCase()}_${action.toLowerCase()}`] : ''}`,
+    title: iconTitle,
+    dataId: dataId
+  }), topicIcon ? /*#__PURE__*/React.createElement("span", {
+    className: `${style.thread} ${needTopicBorder ? style.threadBorder : ''} ${topicClass ? topicClass : ''}`,
+    "data-title": topicIconTitle
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: topicIcon,
+    size: topicIconSize,
+    iconClass: style[`topic_${topicIconColor}`] ? `${style.topicIcon} ${style[`topic_${topicIconColor}`]}` : '',
+    dataId: dataId
+  })) : null);
+};
+
+ChannelIcon.defaultProps = defaultProps;
+ChannelIcon.propTypes = propTypes;
+export default ChannelIcon;

package/es/v1/ExternalLink/ExternalLink.js

@@ -0,0 +1,49 @@
+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); }
+
+/**** Libraries ****/
+import React from 'react';
+import { defaultProps } from '../../ExternalLink/props/defaultProps';
+import { propTypes } from '../../ExternalLink/props/propTypes';
+/**** CSS ****/
+
+import style from '../../ExternalLink/ExternalLink.module.css';
+
+const ExternalLink = props => {
+  const {
+    href,
+    title,
+    target,
+    className,
+    children,
+    rel,
+    dataId,
+    onClick,
+    customProps
+  } = props;
+
+  let addHttp = url => {
+    let regEx = new RegExp(/(^(ftp|https|mailto|tel|http|simplehelp|dynamicsnav?):)/i);
+
+    if (!regEx.test(url)) {
+      return `http://${url}`;
+    }
+
+    return url;
+  };
+
+  let urlOutput = href && typeof href !== 'boolean' ? addHttp(String(href)) : 'javascript:void(0);';
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: urlOutput,
+    target: target,
+    className: `${style.link} ${className ? className : ''}`,
+    "data-title": title,
+    rel: rel,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    onClick: onClick
+  }, customProps), children);
+};
+
+ExternalLink.defaultProps = defaultProps;
+ExternalLink.propTypes = propTypes;
+export default ExternalLink;

package/es/v1/NewStar/NewStar.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Icon } from '@zohodesk/icons';
+import { Container } from '@zohodesk/components/lib/Layout';
+import { defaultProps } from '../../NewStar/props/defaultProps';
+import { propTypes } from '../../NewStar/props/propTypes';
+import style from '../../NewStar/NewStar.module.css';
+
+const NewStar = props => {
+  const {
+    palette,
+    customClass,
+    position
+  } = props;
+  const alignPosition = {
+    topRight: {
+      className: style.topRight // align: 'right',
+      // alignBox: 'row',
+      // reverse: 'wrap'
+
+    },
+    topLeft: {
+      className: style.topLeft // align: 'left',
+      // alignBox: 'row',
+      // reverse: 'wrap'
+
+    },
+    bottomLeft: {
+      className: style.bottomLeft // align: 'left',
+      // alignBox: 'column-reverse',
+      // reverse: 'wrap'
+
+    },
+    bottomRight: {
+      className: style.bottomRight // align: 'right',
+      // alignBox: 'column',
+      // reverse: 'wrap-reverse'
+
+    }
+  };
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    className: `${style.star} ${alignPosition[position].className} ${customClass}`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-snippetStar",
+    iconClass: `${style[palette]} ${style.starOne}`,
+    size: "10"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-snippetStar",
+    iconClass: `${style[palette]} ${style.starTwo}`,
+    size: "10"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-snippetStar",
+    iconClass: `${style[palette]} ${style.starThree}`,
+    size: "10"
+  }));
+};
+
+NewStar.propTypes = propTypes;
+NewStar.defaultProps = defaultProps;
+export default NewStar;

package/es/v1/lookup/header/Close/Close.js

@@ -0,0 +1,30 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { defaultProps } from '../../../../lookup/header/Close/props/defaultProps';
+import { propTypes } from '../../../../lookup/header/Close/props/propTypes';
+/*** FontIcons ***/
+
+import IconButton from './../../../IconButton/IconButton';
+
+function Close(props) {
+  let {
+    onClose,
+    dataId,
+    title
+  } = props;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    dataId: dataId,
+    onClick: onClose,
+    iconName: "ZD-cross",
+    iconSize: "11",
+    title: title
+  });
+}
+
+Close.propTypes = propTypes;
+Close.defaultProps = defaultProps;
+const MemoizedClose = /*#__PURE__*/memo(Close);
+MemoizedClose.propTypes = propTypes;
+MemoizedClose.defaultProps = defaultProps;
+MemoizedClose.displayName = 'Close';
+export default MemoizedClose;

package/es/v1/lookup/header/ModuleHeader/ModuleHeader.js

@@ -0,0 +1,75 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { defaultProps } from '../../../../lookup/header/ModuleHeader/props/defaultProps';
+import { propTypes } from '../../../../lookup/header/ModuleHeader/props/propTypes';
+/*** Components ***/
+
+import Title from '../Title/Title';
+import Close from '../Close/Close';
+import Search from '../Search/Search';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+/*** CSS ***/
+
+import commonStyle from '../../../../lookup/header/lookupHeaderCommon.module.css';
+import commonResponsive from '../../../../lookup/header/lookupHeaderCommonResponsive.module.css';
+/*eslint-disable react/forbid-component-props */
+
+function ModuleHeader(props) {
+  const {
+    title = '',
+    needSearch = false,
+    onLookupClose,
+    searchStr = '',
+    onSearch,
+    onSearchChange,
+    searchPlaceHolder,
+    needOnTypeSearch,
+    getSearchBoxRef,
+    miniDescription,
+    dataId,
+    closeTitle,
+    onSearchKeyDown,
+    palette
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${commonStyle.container} ${commonStyle[`${palette}`]}`,
+    isCover: false,
+    wrap: "wrap",
+    dataId: dataId
+  }, onLookupClose ? /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.closeContainer
+  }, /*#__PURE__*/React.createElement(Close, {
+    dataId: "close",
+    onClose: onLookupClose,
+    title: closeTitle
+  })) : null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.title
+  }, /*#__PURE__*/React.createElement(Title, {
+    text: title
+  })), miniDescription && /*#__PURE__*/React.createElement("div", {
+    className: commonStyle.para
+  }, miniDescription)), needSearch && /*#__PURE__*/React.createElement(Box, {
+    className: `${commonStyle.searchContainer} ${commonResponsive.searchContainer}`
+  }, /*#__PURE__*/React.createElement(Search, {
+    onSearch: onSearch,
+    searchStr: searchStr,
+    onChange: onSearchChange,
+    placeHolder: searchPlaceHolder,
+    dataId: "search",
+    needOnTypeSearch: needOnTypeSearch,
+    getRef: getSearchBoxRef,
+    onKeyDown: onSearchKeyDown
+  })));
+}
+
+ModuleHeader.propTypes = propTypes;
+ModuleHeader.defaultProps = defaultProps;
+const MemoizedModuleHeader = /*#__PURE__*/memo(ModuleHeader);
+MemoizedModuleHeader.propTypes = propTypes;
+MemoizedModuleHeader.defaultProps = defaultProps;
+MemoizedModuleHeader.displayName = 'Close';
+export default MemoizedModuleHeader;

package/es/v1/lookup/header/Search/Search.js

@@ -0,0 +1,177 @@
+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); }
+
+/* eslint-disable react/forbid-component-props */
+
+/*** Libraries ***/
+import React, { useState } from 'react';
+import { SearchUI_defaultProps } from '../../../../lookup/header/Search/props/defaultProps';
+import { Search_propTypes, SearchUI_propTypes } from '../../../../lookup/header/Search/props/propTypes';
+/** * Components ** */
+
+import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Icon } from '@zohodesk/icons';
+import ToggleDropDown from '../../../../dropdown/ToggleDropDown/ToggleDropDown';
+/** * Methods ** */
+
+import { debounce } from '@zohodesk/components/lib/utils/debounce';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
+/** * CSS ** */
+
+import style from '../../../../lookup/header/Search/LookupSearch.module.css';
+export default function Search(props) {
+  const {
+    options,
+    onSelect,
+    value,
+    selectedId,
+    onFocus,
+    onBlur,
+    getRef
+  } = props;
+  const [isFocus, setFocus] = useState(false);
+  const [isDropDownOpen, setDropDownOpen] = useState(false);
+
+  const handleDropDownOpen = () => {
+    setDropDownOpen(true);
+  };
+
+  const handleDropDownClose = () => {
+    setDropDownOpen(false);
+  };
+
+  const handleTextBoxFocus = e => {
+    setFocus(true);
+    onFocus && onFocus(e);
+  };
+
+  const handleTextBoxBlur = e => {
+    setFocus(false);
+    onBlur && onBlur(e);
+  };
+
+  const handleGetTextBoxRef = el => {
+    // textBox = el;
+    getRef && getRef(el);
+  };
+
+  const searchUIExtraProps = {
+    isFocus: isFocus || isDropDownOpen,
+    onFocus: handleTextBoxFocus,
+    onBlur: handleTextBoxBlur,
+    getRef: handleGetTextBoxRef
+  };
+  return options ? /*#__PURE__*/React.createElement(ToggleDropDown, {
+    value: value,
+    options: options,
+    onClick: onSelect,
+    needTick: true,
+    isArrow: false,
+    isToggleStateNeeded: true,
+    selectedId: selectedId,
+    onDropDownOpen: handleDropDownOpen,
+    onDropDownClose: handleDropDownClose
+  }, /*#__PURE__*/React.createElement(SearchUI, _extends({}, props, searchUIExtraProps))) : /*#__PURE__*/React.createElement(SearchUI, _extends({}, props, searchUIExtraProps));
+}
+Search.propTypes = Search_propTypes;
+
+function SearchUI(props) {
+  const {
+    dataId,
+    searchStr,
+    placeHolder,
+    getRef,
+    title,
+    isBoxed,
+    isSearchIconNeed,
+    options,
+    activeClass,
+    isFocus,
+    onFocus,
+    onBlur,
+    onSearch,
+    needOnTypeSearch,
+    onKeyDown,
+    onChange
+  } = props;
+
+  const handleSearch = () => {
+    onSearch && onSearch();
+  };
+
+  const debounceHandleSearch = debounce(handleSearch, 500);
+
+  const handleKeyDown = e => {
+    const {
+      keyCode
+    } = e;
+    onKeyDown && onKeyDown(e);
+
+    if (keyCode === 13) {
+      !needOnTypeSearch && onSearch && onSearch();
+    }
+  };
+
+  const handleChange = value => {
+    onChange && onChange(value);
+    needOnTypeSearch && debounceHandleSearch();
+  };
+
+  const handleClear = e => {
+    cancelBubblingEffect(e);
+    onChange && onChange('');
+    debounceHandleSearch();
+  };
+
+  return /*#__PURE__*/React.createElement(Container, {
+    isCover: false,
+    alignBox: "row",
+    align: "vertical",
+    className: `${style.searchStyle} ${isBoxed ? style.boxStyle : ''} ${isFocus ? `${style.active} ${activeClass ? activeClass : ''} ` : ''} ${searchStr || isFocus ? style.focusWidth : ''}`
+  }, options && /*#__PURE__*/React.createElement(Container, {
+    className: `${style.drpSearchBox} ${isFocus ? style.lineActive : ''}`,
+    isCover: false,
+    align: "vertical",
+    alignBox: "row",
+    "data-title": title
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-search",
+    size: "11"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: "7",
+    iconClass: style.iconArrow
+  })), isSearchIconNeed && /*#__PURE__*/React.createElement(Box, {
+    className: style.searchIconBox
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-search",
+    size: "11"
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+    customClass: {
+      customTextBox: `${isBoxed ? style.inputBox : ''}`
+    },
+    customProps: {
+      TextBoxProps: {
+        'data-a11y-autofocus': true
+      }
+    },
+    placeHolder: placeHolder,
+    value: searchStr,
+    onChange: handleChange,
+    onClick: cancelBubblingEffect,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: handleKeyDown,
+    onMouseDown: cancelBubblingEffect,
+    dataId: dataId,
+    size: "small",
+    inputRef: getRef,
+    onClear: handleClear,
+    onClearMouseDown: cancelBubblingEffect
+  })));
+}
+
+SearchUI.defaultProps = SearchUI_defaultProps;
+SearchUI.propTypes = SearchUI_propTypes;