@zohodesk/components 1.6.0 → 1.6.2

package/es/v1/ListItem/ListItem.js

@@ -1,123 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import { Box } from "../Layout";
-import ListContainer from "./ListContainer";
-import { ListItemDefaultProps } from "./props/defaultProps";
-import { ListItem_Props } from "./props/propTypes";
-/**** Components ****/
-
-import { Icon } from '@zohodesk/icons';
-/**** CSS ****/
-
-import style from "../../ListItem/ListItem.module.css";
-
-const ListItem = props => {
-  let {
-    size,
-    active,
-    highlight,
-    value,
-    autoHover,
-    palette,
-    title,
-    disableTitle,
-    needTick,
-    isLink,
-    href,
-    target,
-    needBorder,
-    isDisabled,
-    children,
-    dataId,
-    dataSelectorId,
-    a11y,
-    customClass,
-    customProps,
-    needMultiLineText,
-    getRef,
-    index,
-    id,
-    onClick,
-    onMouseEnter
-  } = props;
-
-  function handleRef(ele) {
-    getRef && getRef(ele, index, id);
-  }
-
-  function handleClick(e) {
-    onClick && onClick(id, value, index, e);
-  }
-
-  function handleMouseEnter(e) {
-    onMouseEnter && onMouseEnter(id, value, index, e);
-  }
-
-  let {
-    ListItemProps = {},
-    ContainerProps = {}
-  } = customProps;
-  let {
-    customListItem = '',
-    customTickIcon = ''
-  } = customClass;
-  const listA11y = {
-    ariaHidden: true,
-    role: 'option',
-    ...a11y
-  };
-  let {
-    ariaHidden
-  } = listA11y;
-  let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
-  let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
-  return /*#__PURE__*/React.createElement(ListContainer, {
-    a11y: listA11y,
-    size: size,
-    palette: palette,
-    highlight: highlight,
-    isDisabled: isDisabled,
-    active: active,
-    autoHover: autoHover,
-    needTick: needTick,
-    needBorder: needBorder,
-    customClass: customListItem,
-    dataId: dataIdString,
-    dataSelectorId: `${dataSelectorId}`,
-    isLink: isLink,
-    href: href,
-    target: target,
-    disableTitle: disableTitle,
-    title: title,
-    onClick: handleClick,
-    onMouseEnter: handleMouseEnter,
-    eleRef: handleRef,
-    customProps: ListItemProps,
-    ...ContainerProps
-  }, value ? /*#__PURE__*/React.createElement(Box, {
-    shrink: true,
-    adjust: true,
-    className: needMultiLineText ? style.multiLineValue : style.value
-  }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
-    shrink: true,
-    adjust: true,
-    className: style.children
-  }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-    className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
-    "aria-hidden": ariaHidden,
-    dataId: `${dataIdString}_tickIcon`,
-    dataSelectorId: `${dataSelectorId}_tickIcon`
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ZD-ticknew",
-    size: "8"
-  })) : null);
-};
-
-export default ListItem;
-ListItem.defaultProps = ListItemDefaultProps;
-ListItem.propTypes = ListItem_Props; // if (__DOCS__) {
-//   ListItem.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/v1/ListItem/ListItemWithAvatar.js

@@ -1,143 +0,0 @@
-/**** Libraries ****/
-import React, { memo } from 'react';
-import { Box } from "../Layout";
-import ListContainer from "./ListContainer";
-import { ListItemWithAvatarDefaultProps } from "./props/defaultProps";
-import { ListItemWithAvatar_Props } from "./props/propTypes";
-/**** Components ****/
-
-import Avatar from "../Avatar/Avatar";
-import AvatarTeam from "../AvatarTeam/AvatarTeam";
-import { Icon } from '@zohodesk/icons';
-/**** CSS ****/
-
-import style from "../../ListItem/ListItem.module.css";
-
-const ListItemWithAvatar = props => {
-  let {
-    size,
-    active,
-    highlight,
-    value,
-    name,
-    imgSrc,
-    autoHover,
-    isTeam,
-    palette,
-    title,
-    needTick,
-    dataId,
-    dataSelectorId,
-    initial,
-    isDisabled,
-    needBorder,
-    disableTitle,
-    needAvatarTitle,
-    avatarPalette,
-    a11y,
-    customClass,
-    customProps,
-    needMultiLineText,
-    index,
-    id,
-    getRef,
-    onClick,
-    onMouseEnter
-  } = props;
-
-  function handleRef(ele) {
-    getRef && getRef(ele, index, id);
-  }
-
-  function handleClick(e) {
-    onClick && onClick(id, value, index, e);
-  }
-
-  function handleMouseEnter(e) {
-    onMouseEnter && onMouseEnter(id, value, index, e);
-  }
-
-  let {
-    ListItemProps = {},
-    ContainerProps = {}
-  } = customProps;
-  let {
-    customListItem = '',
-    customAvatar = '',
-    customAvatarTeam = ''
-  } = customClass;
-  const listA11y = {
-    ariaHidden: true,
-    role: 'option',
-    ...a11y
-  };
-  let {
-    ariaHidden
-  } = listA11y;
-  let isDarkPalette = palette === 'dark';
-  let dataIdString = value ? value : dataId;
-  return /*#__PURE__*/React.createElement(ListContainer, {
-    a11y: listA11y,
-    size: size,
-    palette: palette,
-    highlight: highlight,
-    isDisabled: isDisabled,
-    active: active,
-    autoHover: autoHover,
-    needTick: needTick,
-    needBorder: needBorder,
-    customClass: customListItem,
-    dataId: `${dataIdString}_ListItemWithAvatar`,
-    dataSelectorId: `${dataSelectorId}`,
-    onClick: handleClick,
-    onMouseEnter: handleMouseEnter,
-    eleRef: handleRef,
-    disableTitle: disableTitle,
-    title: null,
-    customProps: ListItemProps,
-    ...ContainerProps
-  }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
-    className: style.leftAvatar
-  }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
-    name: name,
-    size: "small",
-    src: imgSrc,
-    needTitle: needAvatarTitle,
-    textPalette: isDarkPalette ? 'white' : '',
-    palette: isDarkPalette ? 'info' : avatarPalette,
-    customClass: {
-      customAvatar: customAvatar,
-      customAvatarTeam: customAvatarTeam
-    }
-  }) : /*#__PURE__*/React.createElement(Avatar, {
-    name: name,
-    size: "small",
-    src: imgSrc,
-    initial: initial,
-    textPalette: isDarkPalette ? 'white' : '',
-    needTitle: needAvatarTitle,
-    palette: isDarkPalette ? 'info' : avatarPalette,
-    customClass: customAvatar
-  })) : null, value ? /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    shrink: true,
-    "data-title": isDisabled ? null : title,
-    className: needMultiLineText ? style.multiLineValue : style.value
-  }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
-    className: style.tickIcon,
-    "aria-hidden": ariaHidden,
-    dataId: `${dataIdString}_tickIcon`,
-    dataSelectorId: `${dataSelectorId}_tickIcon`
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ZD-ticknew",
-    size: "8"
-  })) : null);
-};
-
-ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
-ListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
-const MemoizedListItemWithAvatar = /*#__PURE__*/memo(ListItemWithAvatar);
-MemoizedListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
-MemoizedListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
-MemoizedListItemWithAvatar.displayName = 'ListItemWithAvatar';
-export default MemoizedListItemWithAvatar;

package/es/v1/ListItem/ListItemWithCheckBox.js

@@ -1,104 +0,0 @@
-import React from 'react';
-import ListContainer from "./ListContainer";
-import { ListItemWithCheckBoxDefaultProps } from "./props/defaultProps";
-import { ListItemWithCheckBox_Props } from "./props/propTypes";
-import CheckBox from "../CheckBox/CheckBox";
-import { Box } from "../Layout";
-import style from "../../ListItem/ListItem.module.css";
-
-const ListItemWithCheckBox = props => {
-  let {
-    size,
-    active,
-    highlight,
-    value,
-    checked,
-    autoHover,
-    palette,
-    dataId,
-    dataSelectorId,
-    title,
-    isDisabled,
-    disableTitle,
-    a11y,
-    customClass,
-    customProps,
-    needMultiLineText,
-    id,
-    index,
-    onHover,
-    onClick,
-    getRef
-  } = props;
-
-  function handleRef(ele) {
-    getRef && getRef(ele, index);
-  }
-
-  function handleClick(e) {
-    onClick && onClick(id, value, index, e);
-  }
-
-  function handleHover(e) {
-    onHover && onHover(id, value, index, e);
-  }
-
-  const listA11y = {
-    role: 'option',
-    ...a11y
-  };
-  let {
-    ListItemProps = {},
-    ContainerProps = {}
-  } = customProps;
-  let {
-    customListItem = '',
-    customCheckBox = '',
-    customLabel = ''
-  } = customClass;
-  return /*#__PURE__*/React.createElement(ListContainer, {
-    a11y: listA11y,
-    size: size,
-    palette: palette,
-    highlight: highlight,
-    isDisabled: isDisabled,
-    active: active,
-    autoHover: autoHover,
-    customClass: customListItem,
-    dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
-    dataSelectorId: dataSelectorId,
-    onClick: handleClick,
-    onMouseOver: handleHover,
-    eleRef: handleRef,
-    disableTitle: disableTitle,
-    title: null,
-    customProps: ListItemProps,
-    ...ContainerProps
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: style.iconBox,
-    dataId: `${dataId ? dataId : value}_checkBox`
-  }, /*#__PURE__*/React.createElement(CheckBox, {
-    checked: checked,
-    a11y: {
-      ariaHidden: true
-    },
-    customClass: {
-      customCheckBox: customCheckBox,
-      customLabel: customLabel
-    }
-  })), /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    shrink: true,
-    "data-title": isDisabled ? null : title,
-    className: needMultiLineText ? style.multiLineValue : style.value
-  }, value));
-};
-
-export default ListItemWithCheckBox;
-ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;
-ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props; // if (__DOCS__) {
-//   ListItemWithCheckBox.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/v1/ListItem/ListItemWithIcon.js

@@ -1,126 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-import { Box } from "../Layout";
-import { Icon } from '@zohodesk/icons';
-import ListContainer from "./ListContainer";
-import { ListItemWithIconDefaultProps } from "./props/defaultProps";
-import { ListItemWithIcon_Props } from "./props/propTypes";
-/**** CSS ****/
-
-import style from "../../ListItem/ListItem.module.css";
-
-const ListItemWithIcon = props => {
-  let {
-    size,
-    active,
-    highlight,
-    value,
-    iconName,
-    iconSize,
-    autoHover,
-    palette,
-    iconClass,
-    dataId,
-    dataSelectorId,
-    title,
-    needTick,
-    isLink,
-    href,
-    target,
-    needBorder,
-    isDisabled,
-    disableTitle,
-    a11y,
-    customClass,
-    customProps,
-    needMultiLineText,
-    getRef,
-    onClick,
-    onMouseEnter,
-    index,
-    id
-  } = props;
-
-  function handleRef(ele) {
-    getRef && getRef(ele, index, id);
-  }
-
-  function handleClick(e) {
-    onClick && onClick(id, value, index, e);
-  }
-
-  function handleMouseEnter(e) {
-    onMouseEnter && onMouseEnter(id, value, index, e);
-  }
-
-  let {
-    ListItemProps = {},
-    ContainerProps = {}
-  } = customProps;
-  const listA11y = {
-    ariaHidden: true,
-    role: 'option',
-    ...a11y
-  };
-  let {
-    ariaHidden
-  } = listA11y;
-  let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
-  return /*#__PURE__*/React.createElement(ListContainer, {
-    a11y: listA11y,
-    size: size,
-    palette: palette,
-    highlight: highlight,
-    isDisabled: isDisabled,
-    active: active,
-    autoHover: autoHover,
-    needTick: needTick,
-    needBorder: needBorder,
-    customClass: customClass,
-    dataId: dataIdString,
-    dataSelectorId: dataSelectorId,
-    isLink: isLink,
-    href: href,
-    target: target,
-    onClick: handleClick,
-    onMouseOver: handleMouseEnter,
-    eleRef: handleRef,
-    disableTitle: disableTitle,
-    title: null,
-    customProps: ListItemProps,
-    ...ContainerProps
-  }, iconName && /*#__PURE__*/React.createElement(Box, {
-    "aria-hidden": true,
-    className: style.iconBox,
-    dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
-  }, /*#__PURE__*/React.createElement(Icon, {
-    iconClass: iconClass,
-    name: iconName,
-    size: iconSize
-  })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
-    className: iconClass
-  }) : null, value && /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    shrink: true,
-    className: needMultiLineText ? style.multiLineValue : style.value,
-    "data-title": isDisabled ? null : title,
-    dataId: `${dataIdString}_Text`
-  }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
-    className: style.tickIcon,
-    "aria-hidden": ariaHidden,
-    dataId: `${dataIdString}_tickIcon`,
-    dataSelectorId: `${dataSelectorId}_tickIcon`
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "ZD-ticknew",
-    size: "8"
-  })) : null);
-};
-
-export default ListItemWithIcon;
-ListItemWithIcon.defaultProps = ListItemWithIconDefaultProps;
-ListItemWithIcon.propTypes = ListItemWithIcon_Props; // if (__DOCS__) {
-//   ListItemWithIcon.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/v1/ListItem/ListItemWithRadio.js

@@ -1,105 +0,0 @@
-import React from 'react';
-import Radio from "../Radio/Radio";
-import { Box } from "../Layout";
-import ListContainer from "./ListContainer";
-import { ListItemWithRadioDefaultProps } from "./props/defaultProps";
-import { ListItemWithRadio_Props } from "./props/propTypes";
-import style from "../../ListItem/ListItem.module.css";
-
-const ListItemWithRadio = props => {
-  let {
-    size,
-    active,
-    highlight,
-    value,
-    checked,
-    autoHover,
-    palette,
-    id,
-    dataId,
-    dataSelectorId,
-    title,
-    isDisabled,
-    disableTitle,
-    a11y,
-    customClass,
-    customProps,
-    needMultiLineText,
-    getRef,
-    onClick,
-    onHover,
-    index
-  } = props;
-  let {
-    ListItemProps = {},
-    ContainerProps = {}
-  } = customProps;
-  const listA11y = {
-    role: 'option',
-    ...a11y
-  };
-
-  function handleRef(ele) {
-    getRef && getRef(ele, index);
-  }
-
-  function handleClick(e) {
-    onClick && onClick(id, value, index, e);
-  }
-
-  function handleHover(e) {
-    onHover && onHover(id, value, index, e);
-  }
-
-  let {
-    customListItem = '',
-    customRadio = '',
-    customRadioWrap = ''
-  } = customClass;
-  return /*#__PURE__*/React.createElement(ListContainer, {
-    a11y: listA11y,
-    size: size,
-    palette: palette,
-    highlight: highlight,
-    isDisabled: isDisabled,
-    active: active,
-    autoHover: autoHover,
-    customClass: customListItem,
-    dataId: dataId,
-    dataSelectorId: dataSelectorId,
-    onClick: handleClick,
-    onMouseOver: handleHover,
-    eleRef: handleRef,
-    disableTitle: disableTitle,
-    title: null,
-    customProps: ListItemProps,
-    ...ContainerProps
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: style.iconBox,
-    dataId: `${dataId}_radio`
-  }, /*#__PURE__*/React.createElement(Radio, {
-    checked: checked,
-    id: id,
-    a11y: {
-      ariaHidden: true
-    },
-    customClass: {
-      customRadio: customRadio,
-      customRadioWrap: customRadioWrap
-    }
-  })), /*#__PURE__*/React.createElement(Box, {
-    flexible: true,
-    shrink: true,
-    "data-title": disableTitle ? null : title,
-    className: needMultiLineText ? style.multiLineValue : style.value
-  }, value));
-};
-
-export default ListItemWithRadio;
-ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;
-ListItemWithRadio.propTypes = ListItemWithRadio_Props; // if (__DOCS__) {
-//   ListItemWithRadio.docs = {
-//     componentGroup: 'Molecule',
-//     folderName: 'Style Guide'
-//   };
-// }

package/es/v1/ListItem/index.js

@@ -1,6 +0,0 @@
-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/v1/ListItem/props/defaultProps.js

@@ -1,97 +0,0 @@
-export const ListContainerDefaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  isLink: false,
-  target: 'blank',
-  needBorder: true,
-  a11y: {},
-  customClass: '',
-  customProps: {},
-  dataSelectorId: 'listContainer',
-  needMultiLineText: false
-};
-export const ListItemDefaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  id: '',
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  isLink: false,
-  target: 'blank',
-  needBorder: true,
-  a11y: {},
-  customClass: {},
-  customProps: {},
-  dataSelectorId: 'listItem',
-  needMultiLineText: false
-};
-export const ListItemWithAvatarDefaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  isTeam: false,
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  value: 'List',
-  dataId: 'listAvatar',
-  needBorder: true,
-  needAvatarTitle: true,
-  a11y: {},
-  customClass: {},
-  customProps: {},
-  dataSelectorId: 'listItemWithAvatar',
-  needMultiLineText: false
-};
-export const ListItemWithCheckBoxDefaultProps = {
-  active: false,
-  autoHover: false,
-  checked: false,
-  highlight: false,
-  palette: 'default',
-  size: 'medium',
-  value: 'List',
-  a11y: {},
-  customClass: {},
-  customProps: {},
-  dataSelectorId: 'listItemWithCheckBox',
-  needMultiLineText: false
-};
-export const ListItemWithIconDefaultProps = {
-  active: false,
-  autoHover: false,
-  highlight: false,
-  iconName: '',
-  iconSize: '10',
-  needTick: false,
-  palette: 'default',
-  size: 'medium',
-  value: 'List',
-  needBorder: true,
-  a11y: {},
-  customClass: '',
-  customProps: {},
-  dataSelectorId: 'listItemWithIcon',
-  needMultiLineText: false
-};
-export const ListItemWithRadioDefaultProps = {
-  active: false,
-  autoHover: false,
-  checked: false,
-  highlight: false,
-  palette: 'default',
-  size: 'medium',
-  value: 'List',
-  dataId: 'listItemWithRadioComp',
-  a11y: {},
-  customClass: {},
-  customProps: {},
-  dataSelectorId: 'listItemWithRadio',
-  needMultiLineText: false
-};