@zohodesk/components 1.6.0 → 1.6.2

package/es/v1/Select/props/propTypes.js

@@ -1,297 +0,0 @@
-import PropTypes from 'prop-types';
-export const Select_propTypes = {
-  animationStyle: PropTypes.string,
-  autoComplete: PropTypes.bool,
-  autoSelectDebouneTime: PropTypes.number,
-  autoSelectOnType: PropTypes.bool,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  boxSize: PropTypes.string,
-  className: PropTypes.string,
-  closePopupOnly: PropTypes.func,
-  dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.string,
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  emptyMessage: PropTypes.string,
-  excludeOptions: PropTypes.array,
-  getChildren: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  getCustomEmptyState: PropTypes.func,
-  getFooter: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getPopupHandlers: PropTypes.func,
-  getRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  isDefaultSelectValue: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isParentBased: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupOpenOnEnter: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearchClearOnClose: PropTypes.bool,
-  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  maxLength: PropTypes.string,
-  needBorder: PropTypes.bool,
-  needCloseOnSelect: PropTypes.bool,
-  needListBorder: PropTypes.bool,
-  needLocalSearch: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  needSelectDownIcon: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onAddNewOption: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onDropBoxClose: PropTypes.func,
-  onDropBoxOpen: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onSearch: PropTypes.func,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }))]).isRequired,
-  placeHolder: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  searchBoxPlaceHolder: PropTypes.string,
-  searchBoxSize: PropTypes.string,
-  searchDebounceTime: PropTypes.number,
-  searchEmptyMessage: PropTypes.string,
-  selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })]),
-  size: PropTypes.oneOf(['small', 'medium']),
-  textBoxSize: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  textField: PropTypes.string,
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  valueField: PropTypes.string,
-  htmlId: PropTypes.string,
-  children: PropTypes.node,
-  onFocus: PropTypes.func,
-  iconOnHover: PropTypes.bool,
-  customProps: PropTypes.shape({
-    TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    DropdownSearchTextBoxProps: PropTypes.object,
-    listItemProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
-  }),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  openPopupOnly: PropTypes.bool,
-  ariaLabelledby: PropTypes.string,
-  positionsOffset: PropTypes.array,
-  targetOffset: PropTypes.array,
-  isRestrictScroll: PropTypes.bool,
-  dropBoxPortalId: PropTypes.string
-};
-export const GroupSelect_propTypes = {
-  groupedOptions: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    valueField: PropTypes.string,
-    textField: PropTypes.string,
-    options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    }))])
-  })),
-  selectedOption: PropTypes.shape({
-    groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  emptyMessage: PropTypes.string.isRequired,
-  placeHolder: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onKeyDown: PropTypes.func,
-  searchBoxPlaceHolder: PropTypes.string,
-  needSearch: PropTypes.bool,
-  searchEmptyMessage: PropTypes.string,
-  getRef: PropTypes.func,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  needSelectDownIcon: PropTypes.bool,
-  isPopupOpenOnEnter: PropTypes.bool,
-  maxLength: PropTypes.string,
-  needBorder: PropTypes.bool,
-  autoSelectOnType: PropTypes.bool,
-  autoSelectDebouneTime: PropTypes.number,
-  dataId: PropTypes.string,
-  dataIdSlctComp: PropTypes.string,
-  dataIdDownIcon: PropTypes.string,
-  dataIdSrchEmptyMsg: PropTypes.string,
-  isNextOptions: PropTypes.bool,
-  getNextOptions: PropTypes.func,
-  searchDebounceTime: PropTypes.func,
-  needLocalSearch: PropTypes.bool,
-  onSearch: PropTypes.func,
-  isSearchClearOnClose: PropTypes.bool,
-  animationStyle: PropTypes.string,
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  title: PropTypes.string,
-  needResponsive: PropTypes.bool,
-  className: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  searchBoxSize: PropTypes.string,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  needTick: PropTypes.bool,
-  children: PropTypes.node,
-  getFooter: PropTypes.func,
-  htmlId: PropTypes.string,
-  iconOnHover: PropTypes.bool,
-
-  /**** Popup Props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  closePopupOnly: PropTypes.func,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  isRestrictScroll: PropTypes.bool,
-  positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool
-};
-export const SelectWithAvatar_propTypes = { ...Select_propTypes,
-  textBoxClass: PropTypes.string,
-  imageField: PropTypes.string,
-  animationStyle: PropTypes.string,
-  avatarPalette: PropTypes.string,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  className: PropTypes.string,
-  closePopupOnly: PropTypes.func,
-  dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  emptyMessage: PropTypes.string,
-  excludeOptions: PropTypes.array,
-  getContainerRef: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getRef: PropTypes.func,
-  groupName: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  isDisabled: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearchClearOnClose: PropTypes.bool,
-  maxLength: PropTypes.string,
-  needBorder: PropTypes.bool,
-  needLocalSearch: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  onDropBoxClose: PropTypes.func,
-  onDropBoxOpen: PropTypes.func,
-  onRemove: PropTypes.func,
-  onSearch: PropTypes.func,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    text: PropTypes.string,
-    photoURL: PropTypes.string
-  }))]).isRequired,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  searchDebounceTime: PropTypes.number,
-  searchEmptyMessage: PropTypes.string,
-  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  size: PropTypes.oneOf(['small', 'medium']),
-  tagSize: PropTypes.string,
-  textBoxSize: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  textField: PropTypes.string,
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  valueField: PropTypes.string,
-  htmlId: PropTypes.string,
-  needEffect: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
-};
-export const SelectWithIcon_propTypes = {
-  animationStyle: PropTypes.oneOf(['default', 'bounce']),
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  dataId: PropTypes.string,
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  getContainerRef: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  iconClass: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  idKey: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  maxLength: PropTypes.string,
-  needIcon: PropTypes.bool,
-  needListBorder: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onChange: PropTypes.func,
-  options: PropTypes.array,
-  placeHolder: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  searchBoxPlaceHolder: PropTypes.string,
-  searchEmptyMessage: PropTypes.string,
-  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  selectedValue: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  textBoxVariant: PropTypes.oneOf(['primary', 'secondary', 'default']),
-  togglePopup: PropTypes.func,
-  valueKey: PropTypes.string,
-  htmlId: PropTypes.string,
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  title: PropTypes.string,
-  className: PropTypes.string,
-  needBorder: PropTypes.bool,
-  searchBoxSize: PropTypes.string,
-  needResponsive: PropTypes.bool,
-  boxSize: PropTypes.string,
-  emptyMessage: PropTypes.string,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  isRestrictScroll: PropTypes.bool,
-  positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object
-};

package/es/v1/Stencils/Stencils.js

@@ -1,26 +0,0 @@
-import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Stencils/Stencils.module.css";
-
-function Stencils(props) {
-  let {
-    shape,
-    size,
-    palette,
-    customClass
-  } = props;
-  size = shape === 'rect' ? style[size] : style[`c${size}`];
-  shape = shape === 'rect' ? style.rectangular : style.circle;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${style.container} ${shape} ${size} ${style[palette]} ${customClass}`
-  });
-}
-
-Stencils.propTypes = propTypes;
-Stencils.defaultProps = defaultProps;
-const MemoizedStencils = /*#__PURE__*/memo(Stencils);
-MemoizedStencils.propTypes = propTypes;
-MemoizedStencils.defaultProps = defaultProps;
-MemoizedStencils.displayName = 'Stencils';
-export default MemoizedStencils;

package/es/v1/Stencils/props/defaultProps.js

@@ -1,6 +0,0 @@
-export const defaultProps = {
-  palette: 'primary',
-  shape: 'rect',
-  size: 'medium',
-  customClass: ''
-};

package/es/v1/Stencils/props/propTypes.js

@@ -1,7 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  palette: PropTypes.oneOf(['primary', 'secondary', 'dark']),
-  shape: PropTypes.oneOf(['rect', 'circle']),
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'default']),
-  customClass: PropTypes.string
-};

package/es/v1/Tab/Tab.js

@@ -1,106 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from "./props/defaultProps";
-import { Tab_propTypes } from "./props/propTypes";
-import { Box, Container } from "../Layout";
-import { cs } from "../../utils/Common";
-import styles from "./v1Tab.module.css";
-const tabTypes = {
-  alpha: {
-    active: 'alphaActive',
-    tab: 'tabAlpha'
-  },
-  beta: {
-    active: 'betaActive',
-    tab: 'tabBeta'
-  },
-  delta: {
-    active: 'deltaActive',
-    tab: 'tabDelta'
-  }
-};
-export default function Tab(_ref) {
-  let {
-    id,
-    style,
-    text,
-    children,
-    className,
-    dataId,
-    dataSelectorId,
-    title,
-    titlePosition,
-    activeClass,
-    href,
-    isLink,
-    isDisabled,
-    tourId,
-    onClick,
-    isActive,
-    getTabRef,
-    onSelect,
-    type,
-    isAnimate,
-    needBorder,
-    needAppearance,
-    align,
-    isVirtual,
-    customProps
-  } = _ref;
-  let clickListener = useCallback(event => {
-    if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
-      event && event.stopPropagation();
-      return;
-    }
-
-    event && event.preventDefault();
-    onSelect(id);
-    onClick && onClick(event);
-  }, [id, isLink, onSelect, onClick]);
-  let styleContent = useMemo(() => tabTypes[type] || {
-    active: 'active',
-    tab: 'tab'
-  }, [type]);
-  let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
-  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
-  let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
-  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
-  let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
-  return /*#__PURE__*/React.createElement(Box, {
-    tourId: tourId,
-    tagName: isLink ? 'a' : 'div',
-    className: tabClass,
-    dataId: `${dataId}_Tab`,
-    onClick: !isDisabled ? clickListener : undefined,
-    style: style,
-    eleRef: getTab,
-    "data-title": title,
-    "data-title-position": titlePosition,
-    adjust: true,
-    href: isLink ? href : undefined,
-    "data-key": id,
-    role: "link",
-    "aria-controls": id,
-    "aria-selected": isActive ? true : false,
-    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
-    "aria-label": text ? text : null,
-    dataSelectorId: dataSelectorId,
-    ...customProps
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "both",
-    className: styles.textContainer
-  }, text && /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    adjust: true,
-    className: styles.tabText
-  }, text), children ? /*#__PURE__*/React.createElement(Box, {
-    shrink: true
-  }, children) : null));
-}
-Tab.defaultProps = Tab_defaultProps;
-Tab.propTypes = Tab_propTypes; // if (__DOCS__) {
-//   Tab.docs = {
-//     componentGroup: 'Tab',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/v1/Tab/TabContent.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { TabContent_defaultProps } from "./props/defaultProps";
-import { TabContent_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-import style from "./v1TabContent.module.css";
-/* eslint-disable react/forbid-component-props */
-
-const TabContent = _ref => {
-  let {
-    children,
-    scroll,
-    dataId,
-    id,
-    dataSelectorId
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Container, {
-    className: style.container,
-    scroll: scroll,
-    dataId: `${dataId}_TabContent`,
-    isScrollAttribute: true,
-    "aria-labelledby": id,
-    tabindex: "-1",
-    role: "tabpanel",
-    dataSelectorId: dataSelectorId
-  }, children);
-};
-
-TabContent.defaultProps = TabContent_defaultProps;
-TabContent.propTypes = TabContent_propTypes;
-export default TabContent;

package/es/v1/Tab/TabContentWrapper.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import { TabContentWrapper_defaultProps } from "./props/defaultProps";
-import { TabContentWrapper_propTypes } from "./props/propTypes";
-import { Box } from "../Layout";
-/* eslint-disable react/forbid-component-props */
-
-const TabContentWrapper = _ref => {
-  let {
-    style,
-    className,
-    children,
-    dataId,
-    selectedTab,
-    onScroll,
-    dataSelectorId,
-    tagName,
-    a11y
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    style: style,
-    dataId: dataId,
-    className: className,
-    onScroll: onScroll,
-    dataSelectorId: dataSelectorId,
-    tagName: tagName,
-    ...a11y
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
-};
-
-TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
-TabContentWrapper.propTypes = TabContentWrapper_propTypes;
-export default TabContentWrapper;

package/es/v1/Tab/TabWrapper.js

@@ -1,55 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { TabWrapper_defaultProps } from "./props/defaultProps";
-import { TabWrapper_propTypes } from "./props/propTypes";
-import { Container } from "../Layout";
-
-function TabWrapper(_ref) {
-  let {
-    defaultTab,
-    hookToDisableInternalState,
-    onSelect,
-    type,
-    isAnimate,
-    needTabBorder,
-    needBorder,
-    needPadding,
-    needAppearance,
-    align,
-    dataId,
-    children,
-    dataSelectorId
-  } = _ref;
-  let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
-  const setSelectedTab = useCallback(id => {
-    if (!hookToDisableInternalState) {
-      setSelected(id);
-    }
-
-    onSelect && onSelect(id);
-  }, [hookToDisableInternalState, onSelect]);
-  return /*#__PURE__*/React.createElement(Container, {
-    alignBox: align === 'vertical' ? 'column' : 'row',
-    dataId: dataId,
-    dataSelectorId: dataSelectorId
-  }, React.Children.map(children, child => {
-    let TabsChild = child.type;
-    let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
-    return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
-    , { ...child.props,
-      selectedTab: selectedTab,
-      onSelect: setSelectedTab,
-      type: type,
-      isAnimate: isAnimate,
-      needTabBorder: needTabBorder,
-      needBorder: needBorder,
-      needPadding: needPadding,
-      needAppearance: needAppearance,
-      hookToDisableInternalState: hookToDisableInternalState,
-      align: align
-    });
-  }));
-}
-
-TabWrapper.propTypes = TabWrapper_propTypes;
-TabWrapper.defaultProps = TabWrapper_defaultProps;
-export default TabWrapper;