@zohodesk/dot 1.1.0 → 1.2.0

package/es/v1/ActionButton/ActionButton.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import { defaultProps } from '../../ActionButton/props/defaultProps';
+import { propTypes } from '../../ActionButton/props/propTypes';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import { Icon } from '@zohodesk/icons';
+import Button from '@zohodesk/components/lib/Button/Button';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
+import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import style from '../../ActionButton/ActionButton.module.css';
+
+function ActionButton(props) {
+  let {
+    isLoading,
+    onClick,
+    size,
+    dataId,
+    dataSelectorId,
+    isArrow,
+    text,
+    subText,
+    arrowBoxSize,
+    palette,
+    onHover,
+    position,
+    className,
+    iconName,
+    iconSize,
+    dataTitle,
+    isDisabled,
+    isPopupOpen,
+    removeClose,
+    children,
+    dropBoxClass,
+    isBoxPaddingNeed,
+    getContainerRef,
+    getTargetRef,
+    removeChildrenTooltip,
+    innerClassName,
+    popupGroup,
+    togglePopup,
+    defaultPosition
+  } = props;
+
+  const handleTogglePopup = e => {
+    togglePopup(e, defaultPosition);
+  };
+
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    className: ` ${style.container} ${style[palette + 'Box']} ${style[size]} ${className} ${isDisabled ? CssProvider('isDisabled') : ''} ${!onClick ? style.wholeDiv : ''} `,
+    onClick: onHover ? removeClose : !onClick ? handleTogglePopup : undefined,
+    onMouseEnter: !onClick ? onHover && handleTogglePopup : undefined,
+    onMouseLeave: !onClick ? onHover && handleTogglePopup : undefined,
+    eleRef: getTargetRef,
+    dataSelectorId: dataSelectorId
+  }, isLoading ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    status: "loading",
+    palette: palette,
+    size: "medium",
+    customClass: {
+      customButton: style.btn
+    },
+    text: text
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    onClick: onClick,
+    dataId: dataId,
+    className: `${btnStyle.buttonReset} ${style.contentBox} ${style[palette + 'Btn']} ${style[size + '_btnBox']} ${children ? style.contentBoxBdr : style.contentBoxBdrRds} ${style.clickable} ${innerClassName} `,
+    "data-title": dataTitle,
+    tagName: "button",
+    tabIndex: "0"
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: style.contentwrapper
+  }, /*#__PURE__*/React.createElement(Container, {
+    isCover: false,
+    alignBox: "row",
+    align: "vertical"
+  }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: `${style.iconClr} ${text ? style.iconMrgn : ''}`
+  }) : null, text ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true,
+    className: style.txt,
+    "data-title": removeChildrenTooltip ? null : text
+  }, text) : null)), subText ? /*#__PURE__*/React.createElement(Box, {
+    "data-title": removeChildrenTooltip ? null : subText,
+    className: style.subTxt
+  }, subText) : null)), children ? /*#__PURE__*/React.createElement(Box, {
+    onClick: onClick ? !onHover && handleTogglePopup : undefined,
+    onMouseEnter: onClick ? onHover && handleTogglePopup : undefined,
+    onMouseLeave: onClick ? onHover && handleTogglePopup : undefined,
+    className: `${btnStyle.buttonReset} ${style[arrowBoxSize + '_arrowBox']} ${style[palette + 'Arw']}  ${style.arrowWrapper} ${isPopupOpen ? style.arrowActive : ''}`,
+    dataId: `${dataId}_arrowButton`,
+    tabIndex: "0",
+    tagName: "button",
+    dataSelectorId: `${dataSelectorId}_arrowButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "both"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-down",
+    size: "6",
+    iconClass: style.arrow
+  })), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+    size: "small",
+    isActive: isPopupOpen,
+    boxPosition: position,
+    isAnimate: true,
+    isArrow: isArrow,
+    customClass: {
+      customDropBoxWrap: dropBoxClass
+    },
+    isBoxPaddingNeed: isBoxPaddingNeed,
+    getRef: getContainerRef,
+    popupGroup: popupGroup,
+    needFocusScope: true,
+    onClose: handleTogglePopup
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true,
+    scroll: "vertical"
+  }, children)) : null) : null));
+}
+
+ActionButton.defaultProps = defaultProps;
+ActionButton.propTypes = propTypes; // ActionButton.docs = {
+//   componentGroup: 'Atom'
+// };
+
+export default Popup(ActionButton);

package/es/v1/AlphabeticList/AlphabeticList.js

@@ -0,0 +1,90 @@
+/*** Libraries ***/
+import React, { memo } from 'react';
+import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from '../../AlphabeticList/props/defaultProps';
+import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from '../../AlphabeticList/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+/*** CSS ***/
+
+import style from '../../AlphabeticList/AlphabeticList.module.css';
+const AlphabeticListItemMemo = /*#__PURE__*/memo(AlphabeticListItem);
+
+function AlphabeticList(props) {
+  let {
+    onSelect,
+    selectedCharacter,
+    align,
+    type,
+    i18nKeys,
+    dataId,
+    dataSelectorId
+  } = props;
+  let {
+    allText = 'All',
+    allTitle = 'All'
+  } = i18nKeys;
+  let alignType = align === 'vertical' ? style.column : style.row;
+  let letters = type == 'alphabeticalwithhash' ? AlphabeticCharactersWithHash : type == 'alphabetical' ? AlphabeticCharacters : NumberList;
+
+  const handleSelectAll = () => {
+    onSelect && selectedCharacter != 'ALL' && onSelect('ALL');
+  };
+
+  const handleSelect = id => {
+    onSelect && selectedCharacter !== id && onSelect(id);
+  };
+
+  return /*#__PURE__*/React.createElement(Container, {
+    tagName: "ul",
+    isCover: false,
+    alignBox: align === 'vertical' ? 'column' : 'row',
+    className: `${style.container} ${alignType} ${type != 'alphabetical' ? style.numbers : ''}`,
+    dataId: "navigationDiv",
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/React.createElement(Box, {
+    tagName: "li",
+    className: `${style.list} ${style.title} ${selectedCharacter === 'ALL' ? style.selected : ''}`,
+    dataId: `All_${dataId}`
+  }, /*#__PURE__*/React.createElement("span", {
+    onClick: handleSelectAll,
+    className: `${style.heading} ${style.letter}`,
+    "data-title": allTitle
+  }, allText)), letters.map(letter => /*#__PURE__*/React.createElement(AlphabeticListItemMemo, {
+    id: letter,
+    isActive: letter === selectedCharacter,
+    onClick: handleSelect,
+    text: letter,
+    key: letter,
+    dataId: dataId
+  })));
+}
+
+AlphabeticList.propTypes = AlphabeticList_propTypes;
+AlphabeticList.defaultProps = AlphabeticList_defaultProps;
+
+function AlphabeticListItem(props) {
+  let {
+    isActive,
+    text,
+    dataId,
+    onClick,
+    id
+  } = props;
+
+  const handleClick = () => {
+    onClick && onClick(id);
+  };
+
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    tagName: "li",
+    className: `${style.list} ${isActive ? style.selected : ''}`,
+    onClick: handleClick,
+    dataId: `${text}_${dataId}`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.letter
+  }, text));
+}
+
+AlphabeticListItem.propTypes = AlphabeticListItem_propTypes;
+AlphabeticListItem.defaultProps = AlphabeticListItem_defaultProps;
+export default /*#__PURE__*/memo(AlphabeticList);

package/es/v1/Drawer/Drawer.js

@@ -0,0 +1,271 @@
+import React, { useRef } from 'react';
+import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from '../../Drawer/props/defaultProps';
+import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from '../../Drawer/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { Icon } from '@zohodesk/icons';
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+import Heading from '@zohodesk/components/lib/Heading/Heading';
+import FreezeLayer from '../../FreezeLayer/FreezeLayer';
+import FormAction from '../FormAction/FormAction';
+import IconButton from '../IconButton/IconButton';
+import style from '../../Drawer/Drawer.module.css';
+export function Header(props) {
+  let {
+    title,
+    onClose,
+    children,
+    className,
+    paddingSize,
+    closeTitle,
+    iconName,
+    iconSize,
+    onIconClick,
+    isIconBold,
+    dataId,
+    flexible,
+    getChildren,
+    iconTitle,
+    isBoxIcon,
+    getTitleChildren
+  } = props;
+  return /*#__PURE__*/React.createElement(CardHeader, {
+    customClass: `${style.header} ${style[`${paddingSize}HeaderPadding`]} ${className ? className : ''}`,
+    dataId: dataId
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: style.subheader
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    align: "vertical"
+  }, iconName ? /*#__PURE__*/React.createElement(Box, {
+    className: style.iconWrapper
+  }, isBoxIcon ? /*#__PURE__*/React.createElement(IconButton, {
+    iconName: iconName,
+    iconSize: iconSize,
+    onClick: onIconClick,
+    hoverType: "border",
+    isBold: isIconBold,
+    title: iconTitle
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    onClick: onIconClick,
+    title: iconTitle
+  })) : null, title || getTitleChildren ? /*#__PURE__*/React.createElement(Box, {
+    flexible: flexible,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "vertical"
+  }, title ? /*#__PURE__*/React.createElement(Box, {
+    "data-title": title,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Heading, {
+    title: title,
+    className: style.title,
+    a11y: {
+      tabindex: '0'
+    }
+  })) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onClose,
+    dataId: "closeButton",
+    title: closeTitle,
+    iconName: "ZD-cross",
+    iconSize: "11",
+    a11y: {
+      ariaLabel: 'Close'
+    }
+  })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getChildren())) : null);
+}
+Header.propTypes = Header_propTypes;
+Header.defaultProps = Header_defaultProps;
+export function Content(props) {
+  let {
+    children,
+    className,
+    paddingSize,
+    eleRef
+  } = props;
+  return /*#__PURE__*/React.createElement(CardContent, {
+    scroll: "vertical",
+    isScrollAttribute: true,
+    customClass: `${className ? className : ''} ${paddingSize ? style[`${paddingSize}ContentPadding`] : ''}`,
+    eleRef: eleRef
+  }, children);
+}
+Content.propTypes = Content_propTypes;
+export function Footer(props) {
+  let {
+    paddingLeftSize,
+    paddingRightClass,
+    children,
+    size
+  } = props;
+  return /*#__PURE__*/React.createElement(FormAction, {
+    size: size,
+    paddingLeftSize: paddingLeftSize,
+    paddingRightClass: paddingRightClass
+  }, children);
+}
+Footer.propTypes = Footer_propTypes;
+Footer.defaultProps = Footer_defaultProps;
+export default function Drawer(props) {
+  const contentRef = useRef(null);
+  const getNextIndex = useZIndex();
+
+  function drawers(uptoTablet, styleByResolutions) {
+    let {
+      children,
+      size,
+      paddingSize,
+      subDrawerActive,
+      subDrawerChildren,
+      onBodyClick,
+      onClose,
+      needFocusScope,
+      customProps
+    } = props;
+    const {
+      focusScopeProps = {}
+    } = customProps;
+    const {
+      autoFocus = true,
+      restoreFocus = true,
+      needArrowLoop = false,
+      needTabLoop = true,
+      enableEnterAction = false
+    } = focusScopeProps;
+    let childrenWithProps = React.Children.map(children, child => {
+      if (child.type === Header || child.type === Footer || child.type === Content) {
+        let {
+          paddingSize: childPaddingSize
+        } = child.props || {};
+        return paddingSize || childPaddingSize ? /*#__PURE__*/React.cloneElement(child, {
+          paddingSize: childPaddingSize ? childPaddingSize : paddingSize
+        }) : child;
+      }
+
+      return child;
+    });
+    let content = /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      "data-a11y-need-focus-style": "false",
+      tabindex: -1,
+      eleRef: contentRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
+      className: style.columns
+    }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: "slideRight",
+      isActive: subDrawerActive
+    }, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
+      className: styleByResolutions,
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: contentRef,
+      autoFocus: autoFocus,
+      needTabLoop: needTabLoop,
+      restoreFocus: restoreFocus,
+      needArrowLoop: needArrowLoop,
+      onClose: onClose,
+      enableEnterAction: enableEnterAction
+    }, content) : content);
+  }
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 768
+      }])
+    };
+  }
+
+  let {
+    needFreeze,
+    palette,
+    isActive,
+    onClose,
+    forwardRef,
+    responsiveId,
+    subDrawerSize,
+    subDrawerClass,
+    subDrawerActive,
+    customClass,
+    needAutoZindex,
+    innerPortalName
+  } = props;
+  return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, _ref2 => {
+    let {
+      uptoTablet
+    } = _ref2;
+    let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${uptoTablet ? `${style.secondMobDrawer} ${style.mbleSize}` : `${style[subDrawerSize]}`} `;
+    return needFreeze ? /*#__PURE__*/React.createElement(FreezeLayer, {
+      onClick: onClose,
+      isActive: isActive,
+      animationName: "fade",
+      childAnimationName: "slideRight",
+      palette: palette,
+      forwardRef: forwardRef,
+      customClass: customClass,
+      needAutoZindex: needAutoZindex
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, uptoTablet ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }) : null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      className: uptoTablet ? style.mobModal : style.drawerModal
+    }, !subDrawerActive && innerPortalName ? /*#__PURE__*/React.createElement("div", {
+      "data-portal": innerPortalName
+    }) : null)), drawers(uptoTablet, styleByResolutions))))) : /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      isActive: isActive,
+      name: "slideRight"
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "right",
+      alignBox: "row",
+      scroll: "none",
+      eleRef: forwardRef,
+      className: `${style.isOverlay} ${customClass}`,
+      style: isActive && needAutoZindex ? {
+        zIndex: `${getNextIndex()}`
+      } : {}
+    }, drawers(uptoTablet, styleByResolutions)));
+  });
+}
+Drawer.propTypes = Drawer_propTypes;
+Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/es/v1/FlipCard/FlipCard.js

@@ -0,0 +1,130 @@
+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); }
+
+import React from 'react';
+import { defaultProps } from '../../FlipCard/props/defaultProps';
+import { propTypes } from '../../FlipCard/props/propTypes';
+import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
+import { Container } from '@zohodesk/components/lib/Layout';
+import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
+import ChannelIcon from '../../ChannelIcon/ChannelIcon';
+import AvatarIcon from '../../avatar/AvatarIcon/AvatarIcon';
+import AvatarUser from '../../avatar/AvatarUser/AvatarUser';
+import { stopBubbling } from '../../utils/General';
+import style from '../../FlipCard/FlipCard.module.css';
+export default function FlipCard(props) {
+  let {
+    id,
+    action,
+    name,
+    initial,
+    isChecked,
+    noNeedFlip,
+    size,
+    channel,
+    isPaidUser,
+    isPortalUser,
+    src,
+    icon,
+    iconSize,
+    iconClass,
+    ticListContainer,
+    ticList,
+    dataId,
+    className,
+    palette,
+    textPalette,
+    customTextClass,
+    frontClass,
+    needTitle,
+    iconColor,
+    tourId,
+    isFilledCheckbox,
+    channelTitle,
+    customProps
+  } = props;
+  const {
+    CheckBoxProps = {},
+    ChannelIconProps = {},
+    AvatarIconProps = {},
+    AvatarUserProps = {}
+  } = customProps;
+
+  const onClick = e => {
+    if (!noNeedFlip) {
+      stopBubbling(e);
+    }
+  };
+
+  const onChange = (isChecked, e) => {
+    let {
+      onChange
+    } = props;
+    stopBubbling(e);
+    onChange(id, isChecked, e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
+    onClick: onClick,
+    "data-id": ticListContainer,
+    "data-test-id": ticListContainer,
+    "data-tour": tourId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "data-id": ticList,
+    "data-test-id": ticList
+  }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    className: `${style.front} ${frontClass ? frontClass : ''}`
+  }, /*#__PURE__*/React.createElement(CheckBox, _extends({
+    isFilled: isFilledCheckbox,
+    checked: isChecked,
+    onChange: onChange,
+    id: `checkbox_${id}`,
+    dataId: `listViewCheckBox_${id}`
+  }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    className: style.back
+  }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, _extends({
+    name: channel,
+    action: action,
+    size: size,
+    iconSize: iconSize,
+    iconClass: iconClass,
+    dataId: channel,
+    className: className,
+    palette: palette,
+    textPalette: textPalette,
+    customTextClass: customTextClass,
+    iconColor: iconColor,
+    title: channelTitle,
+    iconTitle: channelTitle
+  }, ChannelIconProps)) : icon ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
+    name: icon,
+    iconSize: iconSize,
+    size: size,
+    iconClass: iconClass,
+    dataId: icon,
+    className: className,
+    iconColor: iconColor,
+    title: needTitle ? name : ''
+  }, AvatarIconProps)) : /*#__PURE__*/React.createElement(AvatarUser, _extends({
+    name: name,
+    initial: initial,
+    size: size,
+    isPaid: isPaidUser,
+    isPortal: isPortalUser,
+    src: src,
+    dataId: dataId,
+    needTitle: needTitle,
+    palette: palette,
+    textPalette: textPalette,
+    customTextClass: customTextClass
+  }, AvatarUserProps)))));
+}
+FlipCard.propTypes = propTypes;
+FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
+//   FlipCard.docs = {
+//     componentGroup: 'Molecule'
+//   }; 
+// }