@zohodesk/components 1.0.0-temp-203.2 → 1.0.0-temp-204

package/README.md

@@ -32,6 +32,31 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.39
+
+- **LibraryContext** - coloredTagVariant, hasTagColorInheritedToText properties added
+- **Tag** - customAttributes prop supported
+- **TextBoxIcon** - needInputFocusOnParentClick prop supported
+
+# 1.2.38
+
+- **renderRightPlaceholderNode**
+- renderRightPlaceholderNode support given for `CheckBox` `Textarea` `Select` `MultiSelect`  `TextBoxIcon`.
+- Json File Import Changed to JS modules in `Popup/PositionMapping` `DropBox/DropBoxPositionMapping`. 
+- **DateWidget** 
+- TextBoxIconProps key supported in customProps prop
+- **MultiSelect**
+- customProps prop added and TextBoxIconProps customization given (Prop Spreaded).
+- **Select**
+- TextBoxIconProps key supported in customProps prop
+- **SelectWithIcon**
+- customProps prop added and tooltip supported for dotted case
+
+# 1.2.37
+
+- **Tabs** 
+- dataID prop import missing for more menu dropdown issue fix (v0 and v1)
+
 # 1.2.36
 
 - **dataID & dataTestID** 

package/es/CheckBox/CheckBox.js

@@ -52,7 +52,8 @@ export default class CheckBox extends React.Component {
       a11y,
       customClass,
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      renderRightPlaceholderNode
     } = this.props;
     let {
       CheckBoxProps = {},
@@ -157,7 +158,7 @@ export default class CheckBox extends React.Component {
                             ${accessMode} ${customLabel}`,
       title: toolTip ? toolTip : text,
       ...LabelProps
-    })));
+    })), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/CheckBox/props/propTypes.js

@@ -37,5 +37,6 @@ export const propTypes = {
   customProps: PropTypes.shape({
     CheckBoxProps: PropTypes.object,
     LabelProps: PropTypes.object
-  })
+  }),
+  renderRightPlaceholderNode: PropTypes.node
 };

package/es/DateTime/DateWidget.js

@@ -1008,7 +1008,8 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
     const {
       DateTimeProps = {},
-      TextBoxProps = {}
+      TextBoxProps = {},
+      TextBoxIconProps = {}
     } = customProps;
     const {
       selected: value = '',
@@ -1062,11 +1063,15 @@ class DateWidgetComponent extends React.Component {
       isFocus: isPopupReady,
       autoComplete: false,
       a11y: a11y,
-      customProps: TextBoxProps
+      customProps: TextBoxProps,
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
       align: "both",
+      isCover: false,
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
-      dataId: `${dataId}_datePicker`
+      dataId: `${dataId}_datePicker`,
+      className: style.datePickIcon
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-datepicker",
       size: "12"

package/es/DateTime/DateWidget.module.css

@@ -3,6 +3,7 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
+.datePickIcon{height:100% }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }

package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -670,7 +670,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -770,7 +770,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -870,7 +870,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"

package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -52,7 +52,7 @@ exports[`DateWidget rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover coldir both"
+                class="datePickIcon inflex coldir both"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"

package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -77,7 +77,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -175,7 +175,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -273,7 +273,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useDropboxPosCalc from './useDropboxPosCalc';
 import cssJSLogic from './css/cssJSLogic';
-import { positionMapping } from '../DropBoxPositionMapping.json';
+import { positionMapping } from '../DropBoxPositionMapping.js';
 import { DropBoxElementDefaultProps } from './props/defaultProps';
 import { DropBoxElementPropTypes } from './props/propTypes';
 import { mergeStyle } from '@zohodesk/utils';

package/es/DropBox/DropBoxPositionMapping.js

@@ -0,0 +1,142 @@
+export const positionMapping = {
+  "bottomCenter": {
+    "direction": "bottom",
+    "arrowPosition": "mid",
+    "positionStyle": "bottomMid"
+  },
+  "bottomLeftToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomCenterToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomRightToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "bottomCenterToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topCenter": {
+    "direction": "top",
+    "arrowPosition": "mid",
+    "positionStyle": "topMid"
+  },
+  "topLeftToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topCenterToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topRightToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "topCenterToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightCenter": {
+    "direction": "right",
+    "arrowPosition": "mid",
+    "positionStyle": "rightMid"
+  },
+  "rightTopToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightCenterToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightBottomToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "rightCenterToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftCenter": {
+    "direction": "left",
+    "arrowPosition": "mid",
+    "positionStyle": "leftMid"
+  },
+  "leftTopToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftCenterToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftBottomToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "leftCenterToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "bottomRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  }
+};

package/es/ListItem/ListItemWithAvatar.js

@@ -74,7 +74,9 @@ export default class ListItemWithAvatar extends React.PureComponent {
       a11y,
       customClass,
       customProps,
-      needMultiLineText
+      needMultiLineText,
+      onAvatarClick,
+      avatarSize
     } = this.props;
     let {
       ListItemProps = {},
@@ -119,7 +121,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       className: style.leftAvatar
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
-      size: "small",
+      size: avatarSize,
       src: imgSrc,
       needTitle: needAvatarTitle,
       textPalette: isDarkPalette ? 'white' : '',
@@ -127,16 +129,18 @@ export default class ListItemWithAvatar extends React.PureComponent {
       customClass: {
         customAvatar: customAvatar,
         customAvatarTeam: customAvatarTeam
-      }
+      },
+      onClick: onAvatarClick
     }) : /*#__PURE__*/React.createElement(Avatar, {
       name: name,
-      size: "small",
+      size: avatarSize,
       src: imgSrc,
       initial: initial,
       textPalette: isDarkPalette ? 'white' : '',
       needTitle: needAvatarTitle,
       palette: isDarkPalette ? 'info' : avatarPalette,
-      customClass: customAvatar
+      customClass: customAvatar,
+      onClick: onAvatarClick
     })) : null, value ? /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       shrink: true,

package/es/ListItem/props/defaultProps.js

@@ -39,6 +39,7 @@ export const ListItemWithAvatarDefaultProps = {
   needTick: false,
   palette: 'default',
   size: 'medium',
+  avatarSize: 'small',
   value: 'List',
   dataId: 'listAvatar',
   needBorder: true,

package/es/ListItem/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { propTypes as AvatarProps } from '../../Avatar/props/propTypes.js';
 export const ListContainer_Props = {
   active: PropTypes.bool,
   autoHover: PropTypes.bool,
@@ -87,6 +88,7 @@ export const ListItemWithAvatar_Props = {
   onMouseEnter: PropTypes.func,
   palette: PropTypes.oneOf(['dark']),
   size: PropTypes.string,
+  avatarSize: AvatarProps.size,
   title: PropTypes.string,
   value: PropTypes.string,
   a11y: PropTypes.shape({
@@ -102,7 +104,8 @@ export const ListItemWithAvatar_Props = {
   needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
-  })
+  }),
+  onAvatarClick: PropTypes.func
 };
 export const ListItemWithCheckBox_Props = {
   active: PropTypes.bool,

package/es/MultiSelect/MultiSelect.js

@@ -864,7 +864,8 @@ export class MultiSelectComponent extends React.Component {
       dataId,
       setAriaId,
       isPopupOpen,
-      ariaErrorId
+      ariaErrorId,
+      customProps
     } = this.props;
     let {
       isActive,
@@ -886,6 +887,9 @@ export class MultiSelectComponent extends React.Component {
       disabledOptions
     });
     const isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
+    let {
+      TextBoxIconProps = {}
+    } = customProps;
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -941,10 +945,14 @@ export class MultiSelectComponent extends React.Component {
         ariaDescribedby: ariaErrorId,
         ariaLabelledby: ariaLabelledby
       },
-      autoComplete: autoComplete
+      autoComplete: autoComplete,
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
+      isCover: false,
       alignBox: "row",
-      align: "vertical"
+      align: "vertical",
+      className: style.rightPlaceholder
     }, isShowClearIcon ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.delete} ${style[`${palette}Delete`]}`,
       dataId: `${dataId}_clearIcon`,

package/es/MultiSelect/MultiSelect.module.css

@@ -202,3 +202,7 @@
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0;
 }
+
+.rightPlaceholder{
+  height: 100% ;
+}

package/es/MultiSelect/Suggestions.js

@@ -15,6 +15,7 @@ export default class Suggestions extends React.PureComponent {
       getRef,
       hoverOption,
       onClick,
+      onAvatarClick,
       onMouseEnter,
       needTick,
       needBorder,
@@ -83,6 +84,7 @@ export default class Suggestions extends React.PureComponent {
           key: `${id}avatarListItem`,
           name: value,
           onClick: onClick,
+          onAvatarClick: onAvatarClick,
           onMouseEnter: onMouseEnter,
           value: value,
           title: value,

package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -70,7 +70,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
                 data-test-id="boxComponent"
               >
                 <div
-                  class="flex cover rowdir vCenter"
+                  class="rightPlaceholder inflex rowdir vCenter"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"

package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -69,7 +69,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
                 data-test-id="boxComponent"
               >
                 <div
-                  class="flex cover rowdir vCenter"
+                  class="rightPlaceholder inflex rowdir vCenter"
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"

package/es/MultiSelect/props/defaultProps.js

@@ -111,7 +111,8 @@ export const MultiSelect_defaultProps = {
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
   cardHeaderName: '',
-  needResponsive: true
+  needResponsive: true,
+  customProps: {}
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'

package/es/MultiSelect/props/propTypes.js

@@ -104,7 +104,10 @@ export const MultiSelect_propTypes = {
   needSelectAll: PropTypes.bool,
   selectAllText: PropTypes.string,
   setAriaId: PropTypes.string,
-  ariaErrorId: PropTypes.string
+  ariaErrorId: PropTypes.string,
+  customProps: PropTypes.shape({
+    TextBoxIconProps: PropTypes.object
+  })
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -158,6 +161,7 @@ export const Suggestions_propTypes = {
   needBorder: PropTypes.bool,
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
+  onAvatarClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   palette: PropTypes.string,
   selectedOptions: PropTypes.array,

package/es/Popup/Popup.js

@@ -6,7 +6,7 @@ import hoistStatics from 'hoist-non-react-statics';
 
 import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../utils/Common.js';
 import viewPort from './viewPort';
-import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from './PositionMapping.json';
+import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from './PositionMapping.js';
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
 let lastOpenedGroup = [];
 let popups = {};

package/es/Popup/PositionMapping.js

@@ -0,0 +1,72 @@
+export const absolutePositionMapping = {
+  "bottomCenter": "bottomCenter",
+  "bottomRight": "bottomLeftToRight",
+  "bottomLeft": "bottomRightToLeft",
+  "topCenter": "topCenter",
+  "topRight": "topLeftToRight",
+  "topLeft": "topRightToLeft",
+  "rightCenter": "rightCenter",
+  "rightBottom": "rightTopToBottom",
+  "rightTop": "rightBottomToTop",
+  "leftCenter": "leftCenter",
+  "leftBottom": "leftTopToBottom",
+  "leftTop": "leftBottomToTop",
+  "bottomLeftToRight": "bottomLeftToRight",
+  "bottomRightToLeft": "bottomRightToLeft",
+  "topLeftToRight": "topLeftToRight",
+  "topRightToLeft": "topRightToLeft",
+  "rightTopToBottom": "rightTopToBottom",
+  "rightBottomToTop": "rightBottomToTop",
+  "leftTopToBottom": "leftTopToBottom"
+};
+export const rtlAbsolutePositionMapping = {
+  "bottomCenter": "bottomCenter",
+  "bottomRight": "bottomRightToLeft",
+  "bottomLeft": "bottomLeftToRight",
+  "topCenter": "topCenter",
+  "topRight": "topRightToLeft",
+  "topLeft": "topLeftToRight",
+  "rightCenter": "leftCenter",
+  "rightBottom": "leftTopToBottom",
+  "rightTop": "leftBottomToTop",
+  "leftCenter": "rightCenter",
+  "leftBottom": "rightTopToBottom",
+  "leftTop": "rightBottomToTop",
+  "bottomLeftToRight": "bottomLeftToRight",
+  "bottomRightToLeft": "bottomRightToLeft",
+  "topLeftToRight": "topLeftToRight",
+  "topRightToLeft": "topRightToLeft",
+  "rightTopToBottom": "rightTopToBottom",
+  "rightBottomToTop": "rightBottomToTop",
+  "leftTopToBottom": "leftTopToBottom"
+};
+export const rtlFixedPositionMapping = {
+  "bottomCenter": "bottomCenter",
+  "bottomLeftToRight": "bottomRightToLeft",
+  "bottomCenterToRight": "bottomCenterToLeft",
+  "bottomRightToLeft": "bottomLeftToRight",
+  "bottomCenterToLeft": "bottomCenterToRight",
+  "topCenter": "topCenter",
+  "topLeftToRight": "topRightToLeft",
+  "topCenterToRight": "topCenterToLeft",
+  "topRightToLeft": "topLeftToRight",
+  "topCenterToLeft": "topCenterToRight",
+  "rightTopToBottom": "leftTopToBottom",
+  "rightCenterToBottom": "leftCenterToBottom",
+  "rightCenter": "leftCenter",
+  "rightBottomToTop": "leftBottomToTop",
+  "rightCenterToTop": "leftCenterToTop",
+  "leftTopToBottom": "rightTopToBottom",
+  "leftCenterToBottom": "rightCenterToBottom",
+  "leftCenter": "rightCenter",
+  "leftBottomToTop": "rightBottomToTop",
+  "leftCenterToTop": "rightCenterToTop",
+  "bottomRight": "bottomLeft",
+  "bottomLeft": "bottomRight",
+  "topRight": "topLeft",
+  "topLeft": "topRight",
+  "rightBottom": "leftBottom",
+  "rightTop": "leftTop",
+  "leftBottom": "rightBottom",
+  "leftTop": "rightTop"
+};

package/es/Provider/LibraryContext.js

@@ -5,13 +5,17 @@ import { getLibraryConfig } from './Config';
 
 const LibraryContextProvider = _ref => {
   let {
-    isReducedMotion = getLibraryConfig('isReducedMotion'),
-    direction = getLibraryConfig('direction'),
+    isReducedMotion,
+    direction,
+    coloredTagVariant,
+    hasTagColorInheritedToText,
     children
   } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
-    direction
+    direction,
+    coloredTagVariant,
+    hasTagColorInheritedToText
   });
 
   function setGlobalContext(key, data) {
@@ -32,6 +36,14 @@ const LibraryContextProvider = _ref => {
 LibraryContextProvider.propTypes = {
   children: PropTypes.node.isRequired,
   isReducedMotion: PropTypes.bool,
+  coloredTagVariant: PropTypes.oneOf(['bold', 'subtle', 'minimal']),
+  hasTagColorInheritedToText: PropTypes.bool,
   direction: PropTypes.string
 };
+LibraryContextProvider.defaultProps = {
+  isReducedMotion: getLibraryConfig('isReducedMotion'),
+  direction: getLibraryConfig('direction'),
+  coloredTagVariant: 'bold',
+  hasTagColorInheritedToText: true
+};
 export default LibraryContextProvider;

package/es/Provider/LibraryContextInit.js

@@ -1,3 +1,3 @@
 import React from 'react';
-const LibraryContext = /*#__PURE__*/React.createContext();
+const LibraryContext = /*#__PURE__*/React.createContext({});
 export default LibraryContext;