@zohodesk/components 1.4.11 → 1.4.13

package/es/MultiSelect/Suggestions.js

@@ -1,225 +0,0 @@
-/**** Libraries ****/
-import React, { useMemo } from 'react';
-import { Suggestions_propTypes } from "./props/propTypes";
-import { Suggestions_defaultProps } from "./props/defaultProps";
-import { Virtualizer } from '@zohodesk/virtualizer';
-/**** Components ****/
-
-import ListItem from "../ListItem/ListItem";
-import ListItemWithAvatar from "../ListItem/ListItemWithAvatar";
-import ListItemWithIcon from "../ListItem/ListItemWithIcon";
-import { Container, Box } from "../Layout";
-import { DUMMY_OBJECT, DUMMY_ARRAY } from "../utils/Common";
-
-function SuggestionsVirtualizerContainer(_ref) {
-  let {
-    eleRef,
-    children,
-    setVirtualizerContainerRefFunction
-  } = _ref;
-  useMemo(() => {
-    typeof setVirtualizerContainerRefFunction === 'function' && setVirtualizerContainerRefFunction(eleRef);
-  }, [eleRef, setVirtualizerContainerRefFunction]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
-}
-
-export default class Suggestions extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.renderSuggestionList = this.renderSuggestionList.bind(this);
-    this.renderVirtualizerSuggestionListItem = this.renderVirtualizerSuggestionListItem.bind(this);
-  }
-
-  renderSuggestionList(_ref2) {
-    let {
-      suggestion,
-      index,
-      ref
-    } = _ref2;
-    const {
-      getRef,
-      hoverOption,
-      onClick,
-      onMouseEnter,
-      needTick,
-      needBorder,
-      selectedOptions = DUMMY_ARRAY,
-      activeId,
-      hoverId,
-      listItemSize,
-      avatarPalette,
-      palette,
-      a11y,
-      needMultiLineText,
-      limit,
-      limitReachedMessage
-    } = this.props;
-    const {
-      id,
-      value,
-      secondaryValue,
-      photoURL,
-      icon,
-      optionType,
-      iconSize,
-      isDisabled,
-      listItemProps,
-      listItemCustomProps = DUMMY_OBJECT
-    } = suggestion;
-    const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
-    const isHighlight = hoverOption === index || id === hoverId ? true : false;
-    const selectedOptionsLength = selectedOptions.length;
-    const isLimitReached = selectedOptionsLength >= limit && !isActive;
-    const list_a11y = Object.assign({}, a11y, {
-      ariaSelected: isActive,
-      ariaLabel: value,
-      'data-a11y-list-active': isHighlight
-    });
-    const commonProps = {
-      isDisabled: isDisabled ? isDisabled : isLimitReached,
-      needMultiLineText,
-      ...listItemCustomProps
-    };
-
-    if (listItemProps) {
-      commonProps.customProps = {
-        ListItemProps: { ...listItemProps
-        }
-      };
-    }
-
-    if (isLimitReached) {
-      commonProps.disableTitle = limitReachedMessage;
-    }
-
-    function getListItemRef(ele, index, id) {
-      ref && ref(ele);
-
-      if (typeof getRef === 'function') {
-        getRef(ele, index, id);
-      }
-    }
-
-    if (optionType === 'avatar') {
-      return /*#__PURE__*/React.createElement(ListItemWithAvatar, { ...commonProps,
-        autoHover: false,
-        getRef: getListItemRef,
-        highlight: isHighlight,
-        id: id,
-        imgSrc: photoURL,
-        key: `${id}avatarListItem`,
-        name: value,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        value: value,
-        title: value,
-        needTick: needTick,
-        needBorder: needBorder,
-        active: isActive,
-        size: listItemSize,
-        avatarPalette: avatarPalette,
-        palette: palette,
-        a11y: list_a11y,
-        secondaryValue: secondaryValue
-      });
-    } else if (optionType === 'icon') {
-      return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
-        autoHover: false,
-        getRef: getListItemRef,
-        highlight: isHighlight,
-        id: id,
-        key: `${id}iconListItem`,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        value: value,
-        title: value,
-        iconName: icon,
-        needTick: needTick,
-        needBorder: needBorder,
-        active: isActive,
-        iconSize: iconSize,
-        size: listItemSize,
-        palette: palette,
-        a11y: list_a11y,
-        secondaryValue: secondaryValue
-      });
-    }
-
-    return /*#__PURE__*/React.createElement(ListItem, { ...commonProps,
-      autoHover: false,
-      getRef: getListItemRef,
-      highlight: isHighlight,
-      id: id,
-      key: `${id}listItem`,
-      onClick: onClick,
-      onMouseEnter: onMouseEnter,
-      value: value,
-      title: value,
-      needTick: needTick,
-      needBorder: needBorder,
-      active: isActive,
-      size: listItemSize,
-      palette: palette,
-      a11y: list_a11y
-    });
-  }
-
-  renderVirtualizerSuggestionListItem(_ref3) {
-    let {
-      index,
-      ref
-    } = _ref3;
-    const {
-      suggestions
-    } = this.props;
-    const suggestion = suggestions[index];
-    return this.renderSuggestionList({
-      suggestion,
-      index,
-      ref
-    });
-  }
-
-  render() {
-    const {
-      suggestions,
-      dataId,
-      className,
-      isVirtualizerEnabled,
-      htmlId,
-      a11y,
-      getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction
-    } = this.props;
-    const {
-      ariaParentRole,
-      ariaMultiselectable
-    } = a11y;
-    return /*#__PURE__*/React.createElement(Container, {
-      isCover: false,
-      role: ariaParentRole,
-      id: htmlId,
-      tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
-    }, /*#__PURE__*/React.createElement(Box, {
-      dataId: `${dataId}`,
-      className: className ? className : ''
-    }, isVirtualizerEnabled ? /*#__PURE__*/React.createElement(Virtualizer, {
-      containerType: SuggestionsVirtualizerContainer,
-      elementRenderer: this.renderVirtualizerSuggestionListItem,
-      getExposedPublicMethods: getVirtualizerPublicMethods,
-      elementsCount: suggestions.length,
-      isElementsFixedHeight: false,
-      dataId: `${dataId}_virtualizer`,
-      setVirtualizerContainerRefFunction: setVirtualizerContainerRefFunction
-    }) : suggestions.map((suggestion, index) => {
-      return this.renderSuggestionList({
-        suggestion,
-        index
-      });
-    })));
-  }
-
-}
-Suggestions.propTypes = Suggestions_propTypes;
-Suggestions.defaultProps = Suggestions_defaultProps;

package/es/MultiSelect/__tests__/AdvancedGroupMultiSelect.spec.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import AdvancedGroupMultiSelect from "../AdvancedGroupMultiSelect";
-describe('AdvancedGroupMultiSelect', () => {
-  test('rendering the defult props', () => {
-    const mockOnChange = jest.fn();
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AdvancedGroupMultiSelect, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -1,47 +0,0 @@
-import React from 'react';
-import { render, cleanup } from "@testing-library/react";
-import { setGlobalId } from "../../Provider/IdProvider";
-import AdvancedMultiSelect from "../AdvancedMultiSelect";
-beforeEach(() => {
-  setGlobalId(0);
-});
-afterEach(() => {
-  cleanup();
-});
-describe('AdvancedMultiSelect', () => {
-  test('rendering the defult props', () => {
-    const mockOnChange = jest.fn();
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  const options = [{
-    id: 1,
-    text: 'Apple'
-  }, {
-    id: 2,
-    text: 'Orange'
-  }, 'string test'];
-  test('rendering the options array with objects and string', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
-      isPopupOpen: true,
-      isPopupReady: true,
-      options: options
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the options array with only objects using allowValueFallback', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
-      isPopupOpen: true,
-      isPopupReady: true,
-      options: options,
-      allowValueFallback: false
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/MultiSelect/__tests__/EmptyState.spec.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import EmptyState from "../EmptyState";
-describe('EmptyState', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(EmptyState, {
-      searchString: [],
-      suggestions: [],
-      options: []
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/MultiSelect/__tests__/MultiSelect.spec.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import MultiSelect from "../MultiSelect";
-const testData = ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'];
-const testSelectedData = ['text1', 'text2', 'text3'];
-describe('MultiSelect', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(MultiSelect, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering with limit feature', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(MultiSelect, {
-      valueField: "id",
-      textField: "text",
-      options: testData,
-      selectedOptions: testSelectedData,
-      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 .'
-      },
-      needResponsive: true,
-      limit: 3
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/MultiSelect/__tests__/MultiSelectHeader.spec.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import MultiSelectHeader from "../MultiSelectHeader";
-describe('MultiSelectHeader', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(MultiSelectHeader, {
-      suggestions: [Option]
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the basic value', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(MultiSelectHeader, {
-      suggestions: [1, 2, 3]
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/MultiSelect/__tests__/MultiSelectWithAvatar.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import MultiSelectWithAvatar from "../MultiSelectWithAvatar";
-describe('MultiSelectWithAvatar', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(MultiSelectWithAvatar, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/MultiSelect/__tests__/SelectedOptions.spec.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import SelectedOptions from "../SelectedOptions";
-describe('SelectedOptions', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
-      selectedOptions: []
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the basic select options', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(SelectedOptions, {
-      highLightedSelectOptions: [],
-      selectedOptions: [{
-        value: 'SelectedObject1'
-      }, {
-        value: 'SelectedObject2'
-      }, {
-        value: 'SelectedObject3'
-      }]
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/MultiSelect/__tests__/Suggestions.spec.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Suggestions from "../Suggestions";
-const sampleData = [{
-  "id": 2,
-  "value": "text2",
-  "optionType": "default",
-  "listItemProps": {
-    "style": {
-      "color": "red"
-    }
-  }
-}, {
-  "id": 3,
-  "value": "text3",
-  "optionType": "default",
-  "listItemProps": {
-    "style": {
-      "color": "blue"
-    }
-  }
-}, {
-  "id": 4,
-  "value": "text4",
-  "optionType": "default"
-}, {
-  "id": 5,
-  "value": "text5",
-  "optionType": "default"
-}, {
-  "id": 6,
-  "value": "text6",
-  "optionType": "default"
-}, {
-  "id": 7,
-  "value": "text7",
-  "optionType": "default"
-}, {
-  "id": 8,
-  "value": "text8",
-  "optionType": "default"
-}, {
-  "id": 9,
-  "value": "text9",
-  "optionType": "default"
-}, {
-  "id": 10,
-  "value": "text10",
-  "optionType": "default"
-}];
-describe('Suggestions', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Suggestions, {
-      suggestions: []
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering with limit props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Suggestions, {
-      selectedOptions: [1, 2, 3, 4],
-      suggestions: sampleData,
-      limit: 3,
-      limitReachedMessage: "Limit Reached"
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="wrapper  effect"
-    data-id="multiSelect"
-    data-selector-id="advancedGroupMultiSelect"
-    data-test-id="multiSelect"
-  >
-    <div
-      class="container medium  hasBorder borderColor_default  flex cover rowdir wrap vCenter"
-      data-id="containerComponent"
-      data-selector-id="container"
-      data-test-id="containerComponent"
-    >
-      <div
-        class="wrapper grow basisAuto shrinkOn"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
-      >
-        <span
-          class=" custmSpan custmSpanMedium 
-              "
-        />
-        <div
-          class="container effect  custmInputWrapper  flex rowdir"
-          data-id="containerComponent"
-          data-selector-id="textBoxIcon"
-          data-test-id="containerComponent"
-        >
-          <div
-            class="grow basis shrinkOff"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            <input
-              aria-controls="1"
-              aria-describedby="2"
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-owns="1"
-              autocomplete="off"
-              class="  container medium  default  effect  borderColor_default  "
-              data-id="multiSelect_textBox"
-              data-selector-id="textBoxIcon"
-              data-test-id="multiSelect_textBox"
-              maxlength="250"
-              role="combobox"
-              type="text"
-              value=""
-            />
-          </div>
-          <div
-            class="iconContainer  shrinkOff"
-            data-id="boxComponent"
-            data-selector-id="box"
-            data-test-id="boxComponent"
-          >
-            <div
-              class="flex cover rowdir"
-              data-id="containerComponent"
-              data-selector-id="container"
-              data-test-id="containerComponent"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;