@zohodesk/components 1.0.0-temp-47 → 1.0.0-temp-48

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

@@ -0,0 +1,161 @@
+/**** 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/PopOver.module.css

@@ -1,6 +1,6 @@
 .popup {
   position: relative;
-  background-color: var(--dot_white);
+  background-color: var(--dot_bg_white);
 }
 .target {
   composes: offSelection from '../common/common.module.css';

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

@@ -0,0 +1,32 @@
+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/Popup/Popup.js

@@ -40,13 +40,17 @@ const defaultState = {
 
 /* eslint-disable react/prop-types */
 
-const Popup = function (Component, group = 'global', needResizeHandling = true, {
-  isAbsolutePositioningNeeded: isAbsolutePopup = true,
-  isArrow: needPopupArrow = false,
-  customOrder: customPositionOrder = [],
-  scrollDebounceTime: popupScrollDebounceTime = 0,
-  closeOnScroll: closeOnScrollPopup = false
-} = {}) {
+const Popup = function (Component) {
+  let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
+  let needResizeHandling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let {
+    isAbsolutePositioningNeeded: isAbsolutePopup = true,
+    isArrow: needPopupArrow = false,
+    customOrder: customPositionOrder = [],
+    scrollDebounceTime: popupScrollDebounceTime = 0,
+    closeOnScroll: closeOnScrollPopup = false
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
   class Popup extends React.Component {
     constructor(props) {
       super(props);
@@ -412,7 +416,9 @@ const Popup = function (Component, group = 'global', needResizeHandling = true,
       e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
     }
 
-    handlePopupPosition(defaultPosition = 'bottomCenter', isResizeHandling) {
+    handlePopupPosition() {
+      let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
+      let isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
       // isResizeHandling --->>> Window resize and dropBox resize
       const {
         direction

package/es/Popup/viewPort.js

@@ -77,10 +77,12 @@ let viewPort = {
   getViewPortEle: el => {
     return el.closest('[data-viewport-container=true]') ? el.closest('[data-viewport-container=true]') : document.documentElement;
   },
-  possibilities: (el, relativeBox, customFrame, {
-    needArrow,
-    isAbsolute
-  } = {}) => {
+  possibilities: function (el, relativeBox, customFrame) {
+    let {
+      needArrow,
+      isAbsolute
+    } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
     if (!el) {
       return;
     }
@@ -301,11 +303,14 @@ let viewPort = {
       bottom: relativeBoxGap.center.bottom - rectGap.bottom
     };
   },
-  betterView: (popup, relativeBox, defaultView = '', customFrame, {
-    needArrow,
-    isAbsolute,
-    customOrder = []
-  } = {}) => {
+  betterView: function (popup, relativeBox) {
+    let defaultView = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    let customFrame = arguments.length > 3 ? arguments[3] : undefined;
+    let {
+      needArrow,
+      isAbsolute,
+      customOrder = []
+    } = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
     let customScrollFrame = isAbsolute ? customFrame : '';
     let viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customScrollFrame, {
       needArrow,

package/es/Provider/Config.js

@@ -5,8 +5,7 @@ let id = {
   idPrefix: 'ZD',
   scrollFetchLimit: 80,
   isReducedMotion: false,
-  direction: 'ltr',
-  tooltipDebounce: 175
+  direction: 'ltr'
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/Provider/IdProvider.js

@@ -30,10 +30,11 @@ function getDeletedIndexes() {
   return deletedIndexes;
 }
 
-function callback({
-  globalId,
-  deletedIndexes
-}) {
+function callback(_ref) {
+  let {
+    globalId,
+    deletedIndexes
+  } = _ref;
   setGlobalId(globalId);
   setDeletedIndexes(deletedIndexes);
 }

package/es/Provider/LibraryContext.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import LibraryContextInit from './LibraryContextInit';
 import { getLibraryConfig } from './Config';
 
-const LibraryContextProvider = ({
-  isReducedMotion = getLibraryConfig('isReducedMotion'),
-  direction = getLibraryConfig('direction'),
-  children
-}) => {
+const LibraryContextProvider = _ref => {
+  let {
+    isReducedMotion = getLibraryConfig('isReducedMotion'),
+    direction = getLibraryConfig('direction'),
+    children
+  } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction

package/es/Provider/NumberGenerator/NumberGenerator.js

@@ -50,13 +50,14 @@ export function decreaseGlobalIds(numbers, deletedIndexes, globalId) {
     deletedIndexes
   };
 }
-export function useNumberGenerator({
-  getGlobalId,
-  prefix,
-  getGlobalPrefix,
-  getDeletedIndexes,
-  callback
-}) {
+export function useNumberGenerator(_ref) {
+  let {
+    getGlobalId,
+    prefix,
+    getGlobalPrefix,
+    getDeletedIndexes,
+    callback
+  } = _ref;
   let presentValues = useRef([]),
       presentIndex = useRef(0);
   prefix = typeof prefix === 'undefined' ? '' : `${prefix}_`;
@@ -83,14 +84,15 @@ export function useNumberGenerator({
   presentIndex.current = -1;
   return getNextId;
 }
-export function getNumberGenerators({
-  Component,
-  prefix,
-  getGlobalPrefix,
-  getGlobalId,
-  getDeletedIndexes,
-  callback
-}) {
+export function getNumberGenerators(_ref2) {
+  let {
+    Component,
+    prefix,
+    getGlobalPrefix,
+    getGlobalId,
+    getDeletedIndexes,
+    callback
+  } = _ref2;
   let presentIndex = 0,
       presentValues = [],
       {

package/es/Provider/ZindexProvider.js

@@ -27,10 +27,11 @@ function getDeletedIndexes() {
   return deletedIndexes;
 }
 
-function callback({
-  globalId,
-  deletedIndexes
-}) {
+function callback(_ref) {
+  let {
+    globalId,
+    deletedIndexes
+  } = _ref;
   setInitialZIndex(globalId);
   setDeletedIndexes(deletedIndexes);
 }

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -4,30 +4,30 @@ import { Container } from './Layout';
 import Switch from './Switch/Switch';
 /* 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';
+import './Appearance/default/themes/blue/blueDefaultCTATheme.module.css';
+import './Appearance/default/themes/green/greenDefaultCTATheme.module.css';
+import './Appearance/default/themes/orange/orangeDefaultCTATheme.module.css';
+import './Appearance/default/themes/red/redDefaultCTATheme.module.css';
+import './Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css';
+import './Appearance/default/themes/blue/blueDefaultComponentTheme.module.css';
+import './Appearance/default/themes/green/greenDefaultComponentTheme.module.css';
+import './Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css';
+import './Appearance/default/themes/red/redDefaultComponentTheme.module.css';
+import './Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css';
+import './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';
+import './Appearance/dark/themes/blue/blueDarkCTATheme.module.css';
+import './Appearance/dark/themes/green/greenDarkCTATheme.module.css';
+import './Appearance/dark/themes/orange/orangeDarkCTATheme.module.css';
+import './Appearance/dark/themes/red/redDarkCTATheme.module.css';
+import './Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css';
+import './Appearance/dark/themes/blue/blueDarkComponentTheme.module.css';
+import './Appearance/dark/themes/green/greenDarkComponentTheme.module.css';
+import './Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css';
+import './Appearance/dark/themes/red/redDarkComponentTheme.module.css';
+import './Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css';
+import './Appearance/dark/mode/darkMode.module.css';
 import LibraryContext from './Provider/LibraryContextInit';
 import { setGlobalIdPrefix } from './Provider/IdProvider';
 export default class Provider extends React.Component {

package/es/Radio/Radio.js

@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Label from '../Label/Label';
 import { Container, Box } from '../Layout';
+import CssProvider from '../Provider/CssProvider';
 import style from './Radio.module.css';
 export default class Radio extends React.Component {
   constructor(props) {
@@ -44,7 +45,7 @@ export default class Radio extends React.Component {
       customRadio = '',
       customLabel = ''
     } = customClass;
-    let accessMode = isReadOnly ? style.readonly : disabled ? style.disabled : style.pointer;
+    let accessMode = isReadOnly ? style.readonly : disabled ? CssProvider('isDisabled') : style.pointer;
     let toolTip = disabled ? disabledTitle : title ? title : null;
     let {
       ariaHidden,

package/es/Radio/Radio.module.css

@@ -18,8 +18,8 @@
 .pointer {
   cursor: pointer;
 }
-.readonly, .disabled {
-  cursor: not-allowed;
+.readonly {
+  cursor: default;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';