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

package/es/MultiSelect/docs/MultiSelect__default.docs.js

@@ -1,156 +0,0 @@
-/**** Libraries ****/
-import React, { Component } from 'react';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-import { Container } from '../../Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-/**** Components ****/
-import MultiSelect from '../MultiSelect';
-export default class MultiSelect__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      options: ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'],
-      selectedOptions: ['text1', 'text2', 'text3']
-    };
-    this.handleSelect = this.handleSelect.bind(this);
-    this.getFooter = this.getFooter.bind(this);
-  }
-  handleSelect(options) {
-    this.setState({
-      selectedOptions: options
-    });
-  }
-  getFooter() {
-    return /*#__PURE__*/React.createElement("div", null, "Custom Footer");
-  }
-  render() {
-    const {
-      selectedOptions,
-      options
-    } = this.state;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement("div", null, "Default"), /*#__PURE__*/React.createElement(MultiSelect, {
-      valueField: "id",
-      textField: "text",
-      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(MultiSelect, {
-      isDisabled: true,
-      valueField: "id",
-      textField: "text",
-      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(MultiSelect, {
-      isReadOnly: true,
-      valueField: "id",
-      textField: "text",
-      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, "disableAction"), /*#__PURE__*/React.createElement(MultiSelect, {
-      valueField: "id",
-      textField: "text",
-      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
-    }), /*#__PURE__*/React.createElement("div", null, "Children"), /*#__PURE__*/React.createElement(MultiSelect, {
-      valueField: "id",
-      textField: "text",
-      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(Container, {
-      align: "both",
-      style: {
-        marginRight: '15px'
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-SE-setpracket",
-      size: "18"
-    }))), /*#__PURE__*/React.createElement("div", null, "Disabled Options"), /*#__PURE__*/React.createElement(MultiSelect, {
-      valueField: "id",
-      textField: "text",
-      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 .'
-      },
-      disabledOptions: ['text2', 'text3']
-    }), /*#__PURE__*/React.createElement("div", null, "Custom Footer"), /*#__PURE__*/React.createElement(MultiSelect, {
-      valueField: "id",
-      textField: "text",
-      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 .'
-      },
-      getFooter: this.getFooter
-    })));
-  }
-}
-if (false) {
-  MultiSelect__default.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}

package/es/PopOver/docs/PopOver__default.docs.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver';
-import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
-export default class PopOver__default extends React.Component {
-  render() {
-    return /*#__PURE__*/React.createElement("span", {
-      style: {
-        width: '200px',
-        display: 'inline-block'
-      },
-      className: 'popParent'
-    }, /*#__PURE__*/React.createElement(PopOver, {
-      isArrow: true,
-      isAnimate: true,
-      boxPosition: "bottomRight"
-    }, /*#__PURE__*/React.createElement(PopOverTarget, null, " Click Me! "), /*#__PURE__*/React.createElement(PopOverContainer, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        padding: '20px'
-      }
-    }, "Content"), ' ')));
-  }
-}
-if (false) {
-  PopOver__default.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}

package/es/Provider/docs/Provider_Id__Class.docs.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { getUniqueId, setGlobalIdPrefix } from '../IdProvider';
-export default class Provider_Id__Class extends React.Component {
-  constructor(props) {
-    super(props);
-    setGlobalIdPrefix('zohodesk');
-    this.getNextId = getUniqueId(this);
-  }
-  render() {
-    let id = this.getNextId();
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      id: id
-    }, "Id ", id), /*#__PURE__*/React.createElement("div", {
-      id: id
-    }, "Id ", id));
-  }
-}
-if (false) {
-  Provider_Id__Class.docs = {
-    componentGroup: 'Provider',
-    folderName: 'Functions'
-  };
-}
-
-// setGlobalIdPrefix  => to set prefix for all id
-// removeGlobalIdPrefix => remove prfeix
-// useUniqueId => for function components
-// getUniqueId => for class components

package/es/Provider/docs/Provider_Id__Function.docs.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { useUniqueId } from '../IdProvider';
-export default function Provider_Id__Function() {
-  let getNextId = useUniqueId();
-  let id = getNextId();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    id: id
-  }, "Id ", id), /*#__PURE__*/React.createElement("div", {
-    id: id
-  }, "Id ", id));
-}
-if (false) {
-  Provider_Id__Function.docs = {
-    componentGroup: 'Provider',
-    folderName: 'Functions'
-  };
-}

package/es/Provider/docs/Provider_Zindex__Class.docs.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import { getZIndex, setInitialZIndex } from '../ZindexProvider';
-export default class Provider_Zindex__Class extends React.Component {
-  constructor(props) {
-    super(props);
-    setInitialZIndex('1000');
-    this.getNextId = getZIndex(this);
-  }
-  render() {
-    let zIndex = this.getNextId();
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        zIndex: `${zIndex}`
-      }
-    }, "Zindex   ", zIndex), /*#__PURE__*/React.createElement("div", {
-      style: {
-        zIndex: `${zIndex}`
-      }
-    }, "Zindex  ", zIndex));
-  }
-}
-if (false) {
-  Provider_Zindex__Class.docs = {
-    componentGroup: 'Provider',
-    folderName: 'Functions'
-  };
-}
-
-// setGlobalZIndexPrefix
-// useZIndex
-// getZIndex

package/es/Provider/docs/Provider_Zindex__Function.docs.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { useZIndex } from '../ZindexProvider';
-export default function Provider_Zindex__Function() {
-  let getNextId = useZIndex();
-  let Zindex = getNextId();
-  let Zindex2 = getNextId();
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      'zIndex': `${Zindex}`
-    }
-  }, "Zindex ", Zindex), /*#__PURE__*/React.createElement("div", {
-    style: {
-      'zIndex': `${Zindex2}`
-    }
-  }, "Zindex ", Zindex2));
-}
-if (false) {
-  Provider_Zindex__Function.docs = {
-    componentGroup: 'Provider',
-    folderName: 'Functions'
-  };
-}

package/es/Provider.js

@@ -1,91 +0,0 @@
-import React from 'react';
-import AppContainer from './AppContainer/AppContainer';
-import { Container } from './Layout';
-import ThemeTool from '../../common/lib/ThemeTool/ThemeTool';
-
-/* default mode & theme css */
-import '../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
-import '../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css';
-import '../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
-import '../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css';
-import '../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
-import '../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
-import '../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
-import '../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
-import '../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css';
-import '../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
-import '../assets/Appearance/default/mode/defaultMode.module.css';
-
-/* dark mode & theme css */
-import '../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
-import '../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css';
-import '../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
-import '../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css';
-import '../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
-import '../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
-import '../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
-import '../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
-import '../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css';
-import '../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
-import '../assets/Appearance/dark/mode/darkMode.module.css';
-
-/* pure dark mode & theme css */
-import '../assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css';
-import '../assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css';
-import '../assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css';
-import '../assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css';
-import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css';
-import '../assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css';
-import '../assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css';
-import '../assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css';
-import '../assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css';
-import '../assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css';
-import '../assets/Appearance/pureDark/mode/pureDarkMode.module.css';
-import LibraryContext from './Provider/LibraryContextInit';
-import { setGlobalIdPrefix } from './Provider/IdProvider';
-export default class Provider extends React.Component {
-  constructor(props) {
-    super(props);
-    setGlobalIdPrefix('ZD');
-    this.state = {
-      appearanceName: 'default',
-      themeName: 'blue'
-    };
-    this.setTheme = this.setTheme.bind(this);
-    this.setAppearance = this.setAppearance.bind(this);
-  }
-  setAppearance(mode) {
-    this.setState({
-      appearanceName: mode
-    });
-  }
-  setTheme(theme) {
-    this.setState({
-      themeName: theme
-    });
-  }
-  render() {
-    let {
-      appearanceName,
-      themeName
-    } = this.state;
-    return /*#__PURE__*/React.createElement(LibraryContext.Provider, {
-      value: {
-        isReducedMotion: false,
-        direction: 'ltr'
-      }
-    }, /*#__PURE__*/React.createElement(AppContainer, {
-      customProps: {
-        ExtraProps: {
-          'data-mode': appearanceName,
-          'data-theme': themeName
-        }
-      }
-    }, /*#__PURE__*/React.createElement(Container, {
-      scroll: "vertical"
-    }, this.props.children), /*#__PURE__*/React.createElement(ThemeTool, {
-      onThemeChange: this.setTheme,
-      onAppearanceChange: this.setAppearance
-    })));
-  }
-}

package/es/Radio/docs/Radio__custom.docs.js

@@ -1,241 +0,0 @@
-import React, { Component } from 'react';
-import Radio from '../Radio';
-import styles from '../../common/docStyle.module.css';
-export default class Radio__custom extends Component {
-  constructor(props) {
-    super(props);
-    this.onChange = this.onChange.bind(this);
-    this.state = {
-      checked: false
-    };
-  }
-  onChange() {
-    this.setState({
-      checked: !this.state.checked
-    });
-  }
-  render() {
-    let style = {
-        margin: '10px'
-      },
-      titleStyle = {
-        fontSize: '13px',
-        padding: '15px 0',
-        textTransform: 'upperCase',
-        borderTop: '1px solid #e3e6eb'
-      },
-      spanStyle = {
-        display: 'inline-block',
-        margin: '10px 10px 10px 0'
-      };
-    return /*#__PURE__*/React.createElement("div", {
-      style: style
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '10px 0'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Default Radio Button"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      onChange: this.onChange,
-      checked: this.state.checked
-    })))), /*#__PURE__*/React.createElement("div", {
-      style: {
-        marginBottom: '10px'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Disabled Type Radio Button"), /*#__PURE__*/React.createElement("span", {
-      style: {
-        marginRight: '10px'
-      }
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radioDisabled,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      checked: true,
-      disabled: true
-    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radioDisabled,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      disabled: true
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Label With Radio Button"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      id: "text1",
-      value: "1",
-      name: "category",
-      text: "Check With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      id: "test2",
-      checked: true,
-      active: true,
-      value: "2",
-      name: "category",
-      text: "Checked Active With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radioDisabled,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.disabledLabel
-      },
-      id: "text3",
-      value: "1",
-      name: "name",
-      checked: true,
-      disabled: true,
-      text: "Disabled With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      id: "test4",
-      value: "2",
-      name: "name",
-      isReadOnly: true,
-      text: "ReadOnly With Label"
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      id: "text1",
-      value: "1",
-      name: "category",
-      text: "Check With Label",
-      palette: "danger"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      id: "test2",
-      checked: true,
-      active: true,
-      value: "2",
-      name: "category",
-      palette: "danger",
-      text: "Checked Active With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radioDisabled,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.disabledLabel
-      },
-      id: "text3",
-      value: "1",
-      name: "name",
-      checked: true,
-      disabled: true,
-      palette: "danger",
-      text: "Disabled With Label"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      id: "test4",
-      value: "2",
-      name: "name",
-      isReadOnly: true,
-      palette: "danger",
-      text: "ReadOnly With Label"
-    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Size"), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      checked: true,
-      size: "small"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      checked: true
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: titleStyle
-    }, "Palette"), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      checked: true,
-      text: "Primary"
-    })), /*#__PURE__*/React.createElement("span", {
-      style: spanStyle
-    }, /*#__PURE__*/React.createElement(Radio, {
-      customClass: {
-        customRadio: styles.radio,
-        customRadioWrap: styles.radioWrap,
-        customLabel: styles.customLbl
-      },
-      checked: true,
-      palette: "danger",
-      text: "Danger"
-    }))));
-  }
-}
-if (false) {
-  Radio__custom.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    description: ' '
-  };
-}