@zohodesk/components 1.0.0-alpha-252 → 1.0.0-alpha-254

package/es/ListItem/docs/ListItemWithRadio__default.docs.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import ListItemWithRadio from '../ListItemWithRadio';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class ListItemWithRadio__default extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '250px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
-      value: "ListItem",
-      id: "11"
-    }))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
-      value: "ListItem",
-      autoHover: true,
-      id: "12"
-    }))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
-      value: "ListItem",
-      highlight: true,
-      checked: true,
-      id: "13"
-    }))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
-      value: "ListItem",
-      active: true,
-      checked: true,
-      id: "14"
-    }))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(ListItemWithRadio, {
-      isDisabled: true,
-      value: "ListItem disabled",
-      active: true,
-      checked: true,
-      id: "14"
-    }))));
-  }
-}
-if (false) {
-  ListItemWithRadio__default.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}

package/es/ListItem/docs/ListItem__custom.docs.js

@@ -1,112 +0,0 @@
-import React from 'react';
-import ListItem from '../ListItem';
-import style from '../../common/docStyle.module.css';
-export default class ListItem__custom extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '250px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      customClass: {
-        customListItem: style.listItem,
-        customTickIcon: style.listTick
-      },
-      value: "ListItem",
-      isLink: true,
-      href: "https://zoho.com",
-      disableTitle: "Disabled list",
-      palette: "default"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      customClass: {
-        customListItem: style.listItem,
-        customTickIcon: style.listTick
-      },
-      value: "ListItem",
-      autoHover: true,
-      disableTitle: "Disabled list"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      customClass: {
-        customListItem: style.listItem,
-        customTickIcon: style.listTick
-      },
-      value: "ListItem",
-      highlight: true,
-      disableTitle: "Disabled list"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      customClass: {
-        customListItem: style.listItem,
-        customTickIcon: style.listTick
-      },
-      value: "ListItem",
-      autoHover: true,
-      active: true,
-      disableTitle: "Disabled list",
-      title: "ListItem title"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      customClass: {
-        customListItem: style.listItem,
-        customTickIcon: style.listTick
-      },
-      value: "ListItem",
-      active: true,
-      needTick: true,
-      disableTitle: "disabled list",
-      palette: "dark"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      customClass: {
-        customListItem: style.listItem,
-        customTickIcon: style.listTick
-      },
-      value: "ListItem disabled",
-      palette: "secondary",
-      autoHover: true,
-      isDisabled: true,
-      disableTitle: "disabled list"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      customClass: {
-        customListItem: style.listItem,
-        customTickIcon: style.listTick
-      },
-      autoHover: true,
-      active: true,
-      value: "ListItemListItemListItemListItemListItem"
-    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
-  }
-}
-if (false) {
-  ListItem__custom.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}

package/es/ListItem/docs/ListItem__default.docs.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import ListItem from '../ListItem';
-export default class ListItem__default extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '250px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      value: "ListItem",
-      isLink: true,
-      href: "https://zoho.com",
-      disableTitle: "Disabled list"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      value: "ListItem",
-      autoHover: true,
-      disableTitle: "Disabled list"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      value: "ListItem",
-      highlight: true,
-      disableTitle: "Disabled list"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      value: "ListItem",
-      active: true,
-      disableTitle: "Disabled list",
-      title: "ListItem title"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      value: "ListItem",
-      active: true,
-      needTick: true,
-      disableTitle: "disabled list"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      value: "ListItem disabled",
-      palette: "secondary",
-      autoHover: true,
-      isDisabled: true,
-      disableTitle: "disabled list"
-    })), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(ListItem, {
-      autoHover: true,
-      active: true,
-      value: "ListItemListItemListItemListItemListItem"
-    }, "ChildrenChildrenChildren ChildrenChildrenChildrenChildren")));
-  }
-}
-if (false) {
-  ListItem__default.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}

package/es/Modal/__docs__/Modal__default.docs.js

@@ -1,42 +0,0 @@
-/**** Libraries ****/
-import React from 'react';
-
-/**** Components ****/
-import Modal from '../Modal';
-export default class Modal__default extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShow: false
-    };
-    this.handleModal = this.handleModal.bind(this);
-  }
-  handleModal() {
-    let {
-      isShow
-    } = this.state;
-    this.setState({
-      isShow: !isShow
-    });
-  }
-  render() {
-    let {
-      isShow
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", null, isShow ? /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement("div", null, "Default Modal Portal 2")) : null, /*#__PURE__*/React.createElement(Modal, {
-      portalId: "portal1"
-    }, /*#__PURE__*/React.createElement("div", null, "Default Modal Portal")), /*#__PURE__*/React.createElement("div", {
-      "data-portal": "portal1"
-    }), /*#__PURE__*/React.createElement("button", {
-      onClick: this.handleModal
-    }, isShow ? 'Delete Portal' : 'Create Portal'));
-  }
-}
-if (false) {
-  Modal__default.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: false
-  };
-}

package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js

@@ -1,118 +0,0 @@
-import React from 'react';
-import AdvancedGroupMultiSelect from '../AdvancedGroupMultiSelect';
-export default class AdvancedGroupMultiSelect__default extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleSelectOptions = this.handleSelectOptions.bind(this);
-    this.getNextOptions = this.getNextOptions.bind(this);
-    this.groupFooter = this.groupFooter.bind(this);
-    this.onSearch = this.onSearch.bind(this);
-    this.state = {
-      selectedGroupOptions: [{
-        groupId: 'Group1',
-        id: 'group13'
-      }, {
-        groupId: 'Group1',
-        id: '1212'
-      }, {
-        groupId: 'Group2',
-        id: '2222'
-      }],
-      selectedOptionDetails: {
-        Group1: [{
-          value: 'Ashok',
-          id: '1212'
-        }],
-        Group2: [{
-          value: 'team 1',
-          id: '2222'
-        }]
-      }
-    };
-  }
-  getNextOptions(searchStr) {
-    return Promise.resolve();
-  }
-  onSearch(searchStr) {
-    return Promise.resolve();
-  }
-  handleSelectOptions() {
-    let selectedGroupOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    this.setState({
-      selectedGroupOptions
-    });
-  }
-  groupFooter() {
-    return /*#__PURE__*/React.createElement("div", null, "Footer");
-  }
-  render() {
-    let groupOptions = [{
-      id: 'Group1',
-      name: 'Group 1',
-      options: [{
-        id: 'group11',
-        value: 'Option 1'
-      }, {
-        id: 'group12',
-        value: 'Option 2'
-      }, {
-        id: 'group13',
-        value: 'Option 3'
-      }],
-      textField: 'value',
-      valueField: 'id'
-    }, {
-      id: 'Group2',
-      name: 'Group 2',
-      options: [{
-        id: 'group21',
-        value: 'Group2 Option 1'
-      }, {
-        id: 'group22',
-        value: 'Group2 Option 2'
-      }, {
-        id: 'group23',
-        value: 'Group2 Option 3'
-      }],
-      textField: 'value',
-      valueField: 'id'
-    }];
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
-      groupedOptions: groupOptions,
-      selectedGroupOptions: this.state.selectedGroupOptions,
-      onChange: this.handleSelectOptions,
-      dataIdSrchEmptyMsg: "EmptySearch",
-      dataIdNoOptnsMsg: "NoData",
-      needLocalSearch: true,
-      getNextOptions: this.getNextOptions,
-      onSearch: this.onSearch,
-      selectedOptionDetails: this.state.selectedOptionDetails,
-      i18nKeys: {
-        clearText: 'Clear Selected Items',
-        loadingText: 'Fetching...',
-        emptyText: 'No Options .',
-        noMoreText: 'No More Options .',
-        searchEmptyText: 'No Matches Found .'
-      }
-    }), /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, {
-      groupedOptions: groupOptions,
-      selectedGroupOptions: this.state.selectedGroupOptions,
-      onChange: this.handleSelectOptions,
-      emptyMessage: "No data found",
-      searchEmptyMessage: "No results found",
-      dataIdSrchEmptyMsg: "EmptySearch",
-      dataIdNoOptnsMsg: "NoData",
-      needLocalSearch: true,
-      getNextOptions: this.getNextOptions,
-      onSearch: this.onSearch,
-      selectedOptionDetails: this.state.selectedOptionDetails,
-      getFooter: this.groupFooter
-    }, /*#__PURE__*/React.createElement("div", null, "Children")));
-  }
-}
-if (false) {
-  AdvancedGroupMultiSelect__default.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}

package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js

@@ -1,108 +0,0 @@
-/**** Libraries ****/
-import React, { Component } from 'react';
-
-/**** Components ****/
-import AdvancedMultiSelect from '../AdvancedMultiSelect';
-export default class AdvancedMultiSelect__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      options: [{
-        id: 2,
-        text: 'text2',
-        listItemProps: {
-          style: {
-            color: 'red'
-          }
-        }
-      }, {
-        id: 3,
-        text: 'text3',
-        listItemProps: {
-          style: {
-            color: 'blue'
-          }
-        }
-      }, {
-        id: 4,
-        text: 'text4'
-      }, {
-        id: 5,
-        text: 'text5'
-      }, {
-        id: 6,
-        text: 'text6'
-      }, {
-        id: 7,
-        text: 'text7'
-      }, {
-        id: 8,
-        text: 'text8'
-      }, {
-        id: 9,
-        text: 'text9'
-      }, {
-        id: 10,
-        text: 'text10'
-      }],
-      selectedOptions: [1, 2, 3, 4],
-      selectedOptionDetails: [{
-        id: 1,
-        text: 'text1'
-      }]
-    };
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetSelectedOptionDetails = this.handleGetSelectedOptionDetails.bind(this);
-    this.getFooter = this.getFooter.bind(this);
-  }
-  handleChange(selectedOptions) {
-    this.setState({
-      selectedOptions
-    });
-  }
-  handleGetSelectedOptionDetails() {
-    return Promise.resolve();
-  }
-  getFooter() {
-    return /*#__PURE__*/React.createElement("div", null, "Custom Footer");
-  }
-  render() {
-    let {
-      selectedOptions,
-      options,
-      selectedOptionDetails
-    } = this.state;
-    return /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
-      id: "8888",
-      options: options,
-      selectedOptions: selectedOptions,
-      onChange: this.handleChange,
-      selectedOptionsLimit: 2,
-      selectedOptionDetails: selectedOptionDetails,
-      getSelectedOptionDetails: this.handleGetSelectedOptionDetails,
-      needSelectAll: true,
-      selectAllText: "Select All",
-      placeHolder: "Select Text",
-      optionType: "default",
-      i18nKeys: {
-        clearText: 'Clear Selected Items',
-        loadingText: 'Fetching...',
-        emptyText: 'No Options .',
-        noMoreText: 'No More Options .',
-        searchEmptyText: 'No Matches Found .'
-      },
-      getFooter: this.getFooter,
-      customProps: {
-        SuggestionsProps: {
-          needBorder: false
-        }
-      }
-    });
-  }
-}
-if (false) {
-  AdvancedMultiSelect__default.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}

package/es/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js

@@ -1,137 +0,0 @@
-/**** Libraries ****/
-import React, { Component } from 'react';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-
-/**** Components ****/
-import MultiSelectWithAvatar from '../MultiSelectWithAvatar';
-export default class MultiSelectWithAvatar__default extends Component {
-  constructor(props) {
-    super(props);
-    let photoURL = '';
-    this.state = {
-      options: [{
-        id: 'text1',
-        text: 'text1',
-        photoURL
-      }, {
-        id: 'text2',
-        text: 'text2',
-        photoURL
-      }, {
-        id: 'text3',
-        text: 'text3',
-        photoURL
-      }, {
-        id: 'text4',
-        text: 'text4',
-        photoURL
-      }, {
-        id: 'text5',
-        text: 'text5'
-      }, {
-        id: 'text6',
-        text: 'text6',
-        photoURL
-      }, {
-        id: 'text7',
-        text: 'text7',
-        photoURL
-      }, {
-        id: 'text8',
-        text: 'text8',
-        photoURL
-      }, {
-        id: 'text9',
-        text: 'text9',
-        photoURL
-      }, {
-        id: 'text10',
-        text: 'text10',
-        photoURL
-      }],
-      selectedOptions: ['text1', 'text2', 'text3', 'text4', 'text5']
-    };
-    this.handleSelect = this.handleSelect.bind(this);
-  }
-  handleSelect(options) {
-    this.setState({
-      selectedOptions: options
-    });
-  }
-  render() {
-    let {
-      selectedOptions,
-      options
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement("div", null, "Default"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
-      valueField: "id",
-      textField: "text",
-      imageField: "photoURL",
-      options: options,
-      onChange: this.handleSelect,
-      selectedOptions: selectedOptions,
-      needSelectAll: true,
-      selectAllText: "Select All",
-      placeHolder: "Select Text",
-      i18nKeys: {
-        clearText: 'Clear Selected Items',
-        loadingText: 'Fetching...',
-        emptyText: 'No Options .',
-        noMoreText: 'No More Options .',
-        searchEmptyText: 'No Matches Found .'
-      }
-    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
-      isDisabled: true,
-      valueField: "id",
-      textField: "text",
-      imageField: "photoURL",
-      options: options,
-      onChange: this.handleSelect,
-      selectedOptions: selectedOptions,
-      needSelectAll: true,
-      selectAllText: "Select All",
-      placeHolder: "Select Text",
-      emptyMessage: "No Options",
-      noMoreOptionsMessage: "No More Options",
-      searchEmptyMessage: "No Matches Found"
-    }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
-      isReadOnly: true,
-      valueField: "id",
-      textField: "text",
-      imageField: "photoURL",
-      options: options,
-      onChange: this.handleSelect,
-      selectedOptions: selectedOptions,
-      needSelectAll: true,
-      selectAllText: "Select All",
-      placeHolder: "Select Text",
-      emptyMessage: "No Options",
-      noMoreOptionsMessage: "No More Options",
-      searchEmptyMessage: "No Matches Found"
-    }), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
-      isReadOnly: true,
-      valueField: "id",
-      textField: "text",
-      imageField: "photoURL",
-      options: options,
-      onChange: this.handleSelect,
-      selectedOptions: selectedOptions,
-      needSelectAll: true,
-      selectAllText: "Select All",
-      placeHolder: "Select Text",
-      emptyMessage: "No Options",
-      noMoreOptionsMessage: "No More Options",
-      searchEmptyMessage: "No Matches Found",
-      needBorder: false,
-      disableAction: true
-    })));
-  }
-}
-if (false) {
-  MultiSelectWithAvatar__default.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}