@zohodesk/components 1.0.0-alpha-259 → 1.0.0-alpha-261

package/README.md

@@ -32,21 +32,37 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
-# 1.0.0-alpha-259
+# 1.0.0-alpha-261
+
+- **Tab,Tabs** - Removed offsection property from css.
+- compileClassNames , mergeStyle utils added
+- index  export object fixed
+
+# 1.0.0-alpha-260
+
+- **TextBoxIcon** - OnClear Focus in TextBox issue Resolved.
 
-- **Avatar**
+- Suggestions - `listItemCustomProps` prop support given for all suggestion to control all listitems.
+
+- `isTextSelected` - common method added in utils to know any text highlighted or not.
+
+- **Popup** - Issue fix: While click on the document, popup won't close if any text highlighted in the product.
+
+# 1.0.0-alpha-259
 
+- **Avatar** 
+  
   `needInnerBorder` and `needDefaultBorder` prop has been added.
 
-  `xxsmall` option added for `size` prop.
+  `xxsmall` option added for size prop.
 
 - **AvatarTeam** - `needInnerBorder`, `needBorder` and `needDefaultBorder` props has been added.
 
 # 1.0.0-alpha-258
 
-- **CheckBox** - dataSlector prop changed to dataSelectorId.
+- **CheckBox** - dataSlector prop changed to `dataSelectorId`.
 
-- dataSelectorId prop added for all components
+- `dataSelectorId` prop added for all components
 
 # 1.0.0-alpha-257
 

package/es/DateTime/DateTimePopupHeader.js

@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 
 /** ** Components *** */
 import { Container, Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Heading from '../Heading/Heading';
 
 /** ** CSS *** */

package/es/DateTime/DateWidget.js

@@ -7,7 +7,7 @@ import datetime from '@zohodesk/datetimejs';
 /**** Components ****/
 import DateTime from './DateTime';
 import Popup from '../Popup/Popup';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { Container } from '../Layout';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 
@@ -829,10 +829,9 @@ class DateWidgetComponent extends React.Component {
       isError: false
     });
     value && onSelect && onSelect('', id);
-    this.valueInput && this.valueInput.focus({
-      preventScroll: true
-    });
+    // this.valueInput && this.valueInput.focus({ preventScroll: true });
   }
+
   handleDateTimeClear(e) {
     this.handleDateClear();
     const {

package/es/DateTime/YearView.js

@@ -6,7 +6,7 @@ import { YearView_defaultProps } from './props/defaultProps';
 /**** Components ****/
 import { Virtualizer } from '@zohodesk/virtualizer';
 import { Container, Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Heading from '../Heading/Heading';
 /**** CSS ****/
 import style from './YearView.module.css';

package/es/DateTime/index.js

@@ -1 +1 @@
-export { default as DateWidget } from './DateWidget.js';
+export { default as DateWidget } from './DateWidget';

package/es/DropDown/index.js

@@ -0,0 +1,7 @@
+export { default as DropDown } from './DropDown';
+export { DropDownTarget } from './DropDown';
+export { DropDownItemContainer } from './DropDown';
+export { default as DropDownHeading } from './DropDownHeading';
+export { default as DropDownItem } from './DropDownItem';
+export { default as DropDownSearch } from './DropDownSearch';
+export { default as DropDownSeparator } from './DropDownSeparator';

package/es/Layout/index.js

@@ -1,11 +1,11 @@
 export { default as Container } from './Container';
 export { default as Box } from './Box';
-let Layout = {
-  docs: {
-    componentGroup: 'Layout',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  }
-};
-export { Layout };
+// let Layout = {
+//   docs: {
+//     componentGroup: 'Layout',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   }
+// };
+// export { Layout };

package/es/ListItem/ListItem.js

@@ -6,7 +6,7 @@ import ListContainer from './ListContainer';
 import { ListItemDefaultProps } from './props/defaultProps';
 import { ListItem_Props } from './props/propTypes';
 /**** Components ****/
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './ListItem.module.css';
 export default class ListItem extends React.Component {

package/es/ListItem/ListItemWithAvatar.js

@@ -9,7 +9,7 @@ import { ListItemWithAvatar_Props } from './props/propTypes';
 /**** Components ****/
 import Avatar from '../Avatar/Avatar';
 import AvatarTeam from '../AvatarTeam/AvatarTeam';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './ListItem.module.css';
 export default class ListItemWithAvatar extends React.PureComponent {

package/es/ListItem/ListItemWithIcon.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 /**** Libraries ****/
 import React from 'react';
 import { Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ListContainer from './ListContainer';
 import { ListItemWithIconDefaultProps } from './props/defaultProps';
 import { ListItemWithIcon_Props } from './props/propTypes';

package/es/ListItem/index.js

@@ -0,0 +1,6 @@
+export { default as ListContainer } from './ListContainer';
+export { default as ListItem } from './ListItem';
+export { default as ListItemWithAvatar } from './ListItemWithAvatar';
+export { default as ListItemWithCheckBox } from './ListItemWithCheckBox';
+export { default as ListItemWithIcon } from './ListItemWithIcon';
+export { default as ListItemWithRadio } from './ListItemWithRadio';

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -17,7 +17,7 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 
 /**** Icons ****/
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './MultiSelect.module.css';
 

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -14,7 +14,7 @@ import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '../Layout';
 import Card, { CardContent, CardHeader, CardFooter } from '../Card/Card';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import { getUniqueId } from '../Provider/IdProvider';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';

package/es/MultiSelect/MultiSelect.js

@@ -18,7 +18,7 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Icons ****/
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './MultiSelect.module.css';
 

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -20,7 +20,7 @@ import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 
 /**** Icons ****/
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 import style from './MultiSelect.module.css';
 

package/es/MultiSelect/Suggestions.js

@@ -52,7 +52,8 @@ export default class Suggestions extends React.PureComponent {
         optionType,
         iconSize,
         isDisabled,
-        listItemProps
+        listItemProps,
+        listItemCustomProps = {}
       } = suggestion;
       const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
@@ -61,7 +62,8 @@ export default class Suggestions extends React.PureComponent {
         ariaLabel: value
       });
       const commonProps = {
-        isDisabled
+        isDisabled,
+        ...listItemCustomProps
       };
       if (listItemProps) {
         commonProps.customProps = {

package/es/MultiSelect/index.js

@@ -0,0 +1,4 @@
+export { default as MultiSelect } from './MultiSelect';
+export { default as MultiSelectWithAvatar } from './MultiSelectWithAvatar';
+export { default as AdvancedMultiSelect } from './AdvancedMultiSelect';
+export { default as AdvancedGroupMultiSelect } from './AdvancedGroupMultiSelect';

package/es/PopOver/index.js

@@ -0,0 +1,3 @@
+export { default as PopOver } from './PopOver';
+export { PopOverTarget } from './PopOver';
+export { PopOverContainer } from './PopOver';

package/es/Popup/Popup.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
 
 /**** Methods ****/
-import { debounce, isDescendant } from '../utils/Common.js';
+import { debounce, isDescendant, isTextSelected } from '../utils/Common.js';
 import viewPort from './viewPort';
 import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from './PositionMapping.json';
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
@@ -352,7 +352,7 @@ const Popup = function (Component) {
         Object.keys(popups).forEach(groupName => {
           const groupPopups = popups[groupName] || [];
           groupPopups.forEach(popup => {
-            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && popup.setState({
+            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
               isPopupOpen: false,
               isPopupReady: false
             });

package/es/Provider/IdProvider.js

@@ -51,10 +51,11 @@ export function getUniqueId(Component, prefix) {
     callback
   });
 }
-let Provider = {
-  docs: {
-    componentGroup: 'Provider',
-    folderName: 'Functions'
-  }
-};
-export { Provider };
+
+// let Provider = {
+//   docs: {
+//     componentGroup: 'Provider',
+//     folderName: 'Functions'
+//   }
+// };
+// export { Provider };

package/es/Provider/index.js

@@ -0,0 +1,4 @@
+export { getLibraryConfig, setLibraryConfig } from './Config';
+export { default as LibraryContextProvider } from './LibraryContext';
+export { removeGlobalZIndexPrefix, setInitialZIndex, useZIndex, getZIndex } from './ZindexProvider';
+export { setGlobalIdPrefix, removeGlobalIdPrefix, useUniqueId, getUniqueId } from './IdProvider';

package/es/Responsive/index.js

@@ -1,8 +1,11 @@
-export * from './Responsive';
-let Responsive = {
-  docs: {
-    componentGroup: 'Layout',
-    folderName: 'Style Guide'
-  }
-};
-export { Responsive };
+export { ResponsiveSender as CustomResponsiveSender, ResponsiveReceiver as CustomResponsiveReceiver, useResponsiveReceiver as useCustomResponsiveReceiver } from './CustomResponsive';
+export { ResponsiveSender, ResponsiveReceiver, useResponsiveReceiver } from './Responsive';
+export { default as ResizeComponent } from './ResizeComponent';
+
+// let Responsive = {
+//   docs: {
+//     componentGroup: 'Layout',
+//     folderName: 'Style Guide'
+//   }
+// };
+// export { Responsive };

package/es/Select/GroupSelect.js

@@ -10,7 +10,7 @@ import Textbox from '../TextBox/TextBox';
 import Card, { CardHeader, CardContent, CardFooter } from '../Card/Card';
 import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 import DropDownHeading from '../DropDown/DropDownHeading';
 import { Container, Box } from '../Layout';

package/es/Select/Select.js

@@ -12,7 +12,7 @@ import Card, { CardHeader, CardContent, CardFooter } from '../Card/Card';
 import Suggestions from '../MultiSelect/Suggestions';
 import EmptyState from '../MultiSelect/EmptyState';
 import { getUniqueId } from '../Provider/IdProvider';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';

package/es/Select/SelectWithIcon.js

@@ -4,7 +4,7 @@ import { SelectWithIcon_propTypes } from './props/propTypes';
 /**** Components ****/
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import ListItemWithIcon from '../ListItem/ListItemWithIcon';
 import Card, { CardHeader, CardContent } from '../Card/Card';
 import EmptyState from '../MultiSelect/EmptyState';

package/es/Select/index.js

@@ -0,0 +1,4 @@
+export { default as Select } from './Select';
+export { default as GroupSelect } from './GroupSelect';
+export { default as SelectWithAvatar } from './SelectWithAvatar';
+export { default as SelectWithIcon } from './SelectWithIcon';

package/es/Tab/Tab.module.css

@@ -1,6 +1,5 @@
 .tab {
   text-transform: uppercase;
-  composes: offSelection from '../common/common.module.css';
   letter-spacing: 0.6px;
   text-decoration: none;
   cursor: pointer;

package/es/Tab/Tabs.js

@@ -15,7 +15,7 @@ import { remConvert, getTotalDimension, cs, bind, throttle } from '../utils/Comm
 import { Box, Container } from '../Layout';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import tabsStyle from './Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';

package/es/Tab/Tabs.module.css

@@ -1,6 +1,5 @@
 .tab {
   position: relative;
-  composes: offSelection from '../common/common.module.css';
   z-index: 1;
   --tab_position_gap: var(--zd_size22);
 }

package/es/Tag/Tag.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '../Avatar/Avatar';
 import { Container } from '../Layout';
 import Button from '../semantic/Button/Button';

package/es/TextBoxIcon/TextBoxIcon.js

@@ -4,7 +4,7 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import TextBox from '../TextBox/TextBox';
 import { Container, Box } from '../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
+import { Icon } from '@zohodesk/icons';
 import btnStyle from '../semantic/Button/semanticButton.module.css';
 import style from './TextBoxIcon.module.css';
 /* eslint-disable react/forbid-component-props */
@@ -17,6 +17,24 @@ export default class TextBoxIcon extends React.Component {
     };
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
+    this.handleRef = this.handleRef.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+  }
+  handleRef(ele) {
+    let {
+      inputRef
+    } = this.props;
+    this.inputEle = ele;
+    inputRef && inputRef(ele);
+  }
+  handleClear() {
+    let {
+      onClear
+    } = this.props;
+    onClear && onClear();
+    this.inputEle && this.inputEle.focus({
+      preventScroll: true
+    });
   }
   handleFocus(e) {
     const {
@@ -49,7 +67,6 @@ export default class TextBoxIcon extends React.Component {
       placeHolder,
       size,
       onKeyUp,
-      inputRef,
       isReadOnly,
       isDisabled,
       children,
@@ -121,7 +138,7 @@ export default class TextBoxIcon extends React.Component {
       onClick: onClick,
       isReadOnly: isReadOnly,
       isDisabled: isDisabled,
-      inputRef: inputRef,
+      inputRef: this.handleRef,
       needReadOnlyStyle: needReadOnlyStyle,
       isClickable: isClickable,
       onKeyPress: onKeyPress,
@@ -135,7 +152,7 @@ export default class TextBoxIcon extends React.Component {
       alignBox: "row"
     }, value && onClear && value.length > 1 && !isDisabled && !isReadOnly || showClearIcon ? /*#__PURE__*/React.createElement(Box, {
       className: `${btnStyle.buttonReset} ${style.icon}`,
-      onClick: onClear,
+      onClick: this.handleClear,
       dataId: `${dataId}_ClearIcon`,
       "data-title": clearText,
       tagName: "button"

package/es/VelocityAnimation/index.js

@@ -0,0 +1,2 @@
+export { default as VelocityAnimation } from './VelocityAnimation/VelocityAnimation';
+export { default as VelocityAnimationGroup } from './VelocityAnimationGroup/VelocityAnimationGroup';