@zohodesk/components 1.1.1 → 1.2.0-temp-195

package/es/v1/Select/props/propTypes.js

@@ -0,0 +1,288 @@
+import PropTypes from 'prop-types';
+export const Select_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  autoSelectDebouneTime: PropTypes.number,
+  autoSelectOnType: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  boxSize: PropTypes.string,
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.string,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string,
+  excludeOptions: PropTypes.array,
+  getChildren: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  getCustomEmptyState: PropTypes.func,
+  getFooter: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getPopupHandlers: PropTypes.func,
+  getRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  isDefaultSelectValue: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isParentBased: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  maxLength: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needCloseOnSelect: PropTypes.bool,
+  needListBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  needSelectDownIcon: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onAddNewOption: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }))]).isRequired,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchBoxPlaceHolder: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })]),
+  size: PropTypes.oneOf(['small', 'medium']),
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  htmlId: PropTypes.string,
+  children: PropTypes.node,
+  onFocus: PropTypes.func,
+  iconOnHover: PropTypes.bool,
+  customProps: PropTypes.shape({
+    TextBoxProps: PropTypes.object,
+    DropdownSearchTextBoxProps: PropTypes.object,
+    listItemProps: PropTypes.object,
+    SuggestionsProps: PropTypes.object
+  }),
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  openPopupOnly: PropTypes.bool,
+  ariaLabelledby: PropTypes.string,
+  positionsOffset: PropTypes.array,
+  targetOffset: PropTypes.array,
+  isRestrictScroll: PropTypes.bool,
+  dropBoxPortalId: PropTypes.string
+};
+export const GroupSelect_propTypes = {
+  groupedOptions: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    valueField: PropTypes.string,
+    textField: PropTypes.string,
+    options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    }))])
+  })),
+  selectedOption: PropTypes.shape({
+    groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  emptyMessage: PropTypes.string.isRequired,
+  placeHolder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func,
+  searchBoxPlaceHolder: PropTypes.string,
+  needSearch: PropTypes.bool,
+  searchEmptyMessage: PropTypes.string,
+  getRef: PropTypes.func,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  needSelectDownIcon: PropTypes.bool,
+  isPopupOpenOnEnter: PropTypes.bool,
+  maxLength: PropTypes.string,
+  needBorder: PropTypes.bool,
+  autoSelectOnType: PropTypes.bool,
+  autoSelectDebouneTime: PropTypes.number,
+  dataId: PropTypes.string,
+  dataIdSlctComp: PropTypes.string,
+  dataIdDownIcon: PropTypes.string,
+  dataIdSrchEmptyMsg: PropTypes.string,
+  isNextOptions: PropTypes.bool,
+  getNextOptions: PropTypes.func,
+  searchDebounceTime: PropTypes.func,
+  needLocalSearch: PropTypes.bool,
+  onSearch: PropTypes.func,
+  isSearchClearOnClose: PropTypes.bool,
+  animationStyle: PropTypes.string,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  className: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  searchBoxSize: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  needTick: PropTypes.bool,
+  children: PropTypes.node,
+  getFooter: PropTypes.func,
+  htmlId: PropTypes.string,
+  iconOnHover: PropTypes.bool,
+
+  /**** Popup Props ****/
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  togglePopup: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  closePopupOnly: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
+  isDefaultSelectValue: PropTypes.bool
+};
+export const SelectWithAvatar_propTypes = { ...Select_propTypes,
+  textBoxClass: PropTypes.string,
+  imageField: PropTypes.string,
+  animationStyle: PropTypes.string,
+  avatarPalette: PropTypes.string,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  className: PropTypes.string,
+  closePopupOnly: PropTypes.func,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string,
+  excludeOptions: PropTypes.array,
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getRef: PropTypes.func,
+  groupName: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  isSearchClearOnClose: PropTypes.bool,
+  maxLength: PropTypes.string,
+  needBorder: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onDropBoxClose: PropTypes.func,
+  onDropBoxOpen: PropTypes.func,
+  onRemove: PropTypes.func,
+  onSearch: PropTypes.func,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    text: PropTypes.string,
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOf(['small', 'medium']),
+  tagSize: PropTypes.string,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  textField: PropTypes.string,
+  title: PropTypes.string,
+  togglePopup: PropTypes.func,
+  valueField: PropTypes.string,
+  htmlId: PropTypes.string,
+  needEffect: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
+};
+export const SelectWithIcon_propTypes = {
+  animationStyle: PropTypes.oneOf(['default', 'bounce']),
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  dataId: PropTypes.string,
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  getContainerRef: PropTypes.func,
+  getNextOptions: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  idKey: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  maxLength: PropTypes.string,
+  needIcon: PropTypes.bool,
+  needListBorder: PropTypes.bool,
+  needSearch: PropTypes.bool,
+  needTick: PropTypes.bool,
+  onChange: PropTypes.func,
+  options: PropTypes.array,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchBoxPlaceHolder: PropTypes.string,
+  searchEmptyMessage: PropTypes.string,
+  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  selectedValue: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  textBoxVariant: PropTypes.oneOf(['primary', 'secondary', 'default']),
+  togglePopup: PropTypes.func,
+  valueKey: PropTypes.string,
+  htmlId: PropTypes.string,
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
+  title: PropTypes.string,
+  className: PropTypes.string,
+  needBorder: PropTypes.bool,
+  searchBoxSize: PropTypes.string,
+  needResponsive: PropTypes.bool,
+  boxSize: PropTypes.string,
+  emptyMessage: PropTypes.string
+};

package/es/v1/Stencils/Stencils.js

@@ -0,0 +1,26 @@
+import React, { memo } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import style from '../../Stencils/Stencils.module.css';
+
+function Stencils(props) {
+  let {
+    shape,
+    size,
+    palette,
+    customClass
+  } = props;
+  size = shape === 'rect' ? style[size] : style[`c${size}`];
+  shape = shape === 'rect' ? style.rectangular : style.circle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${shape} ${size} ${style[palette]} ${customClass}`
+  });
+}
+
+Stencils.propTypes = propTypes;
+Stencils.defaultProps = defaultProps;
+const MemoizedStencils = /*#__PURE__*/memo(Stencils);
+MemoizedStencils.propTypes = propTypes;
+MemoizedStencils.defaultProps = defaultProps;
+MemoizedStencils.displayName = 'Stencils';
+export default MemoizedStencils;

package/es/v1/Stencils/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  palette: 'primary',
+  shape: 'rect',
+  size: 'medium',
+  customClass: ''
+};

package/es/v1/Stencils/props/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  palette: PropTypes.oneOf(['primary', 'secondary', 'dark']),
+  shape: PropTypes.oneOf(['rect', 'circle']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'default']),
+  customClass: PropTypes.string
+};

package/es/v1/Switch/Switch.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { Container, Box } from '../Layout';
+import Label from '../Label/Label';
+import style from '../../Switch/Switch.module.css';
+
+const Switch = props => {
+  let {
+    id,
+    name,
+    value,
+    checked,
+    disabled,
+    isReadOnly,
+    size,
+    text,
+    labelSize,
+    labelPalette,
+    title,
+    disableTitle,
+    dataId,
+    dataSelectorId,
+    customClass,
+    customProps
+  } = props;
+
+  function onChange(e) {
+    const {
+      onChange
+    } = props;
+    onChange && onChange(!checked, e);
+  }
+
+  let {
+    SwitchProps = {},
+    LabelProps = {}
+  } = customProps;
+  let {
+    customSwitchWrap = '',
+    customSwitch = '',
+    customSwitchSize = '',
+    customLabel = ''
+  } = customClass;
+  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    isCover: false,
+    alignBox: "row",
+    isInline: true,
+    className: `${style.container} ${customSwitchWrap} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}`,
+    "data-title": disabled ? disableTitle : title,
+    "aria-checked": checked,
+    role: "switch",
+    dataSelectorId: dataSelectorId,
+    ...SwitchProps
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: `${style[size]} ${customSwitchSize}`
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    id: id,
+    className: `${style.input} ${checked ? style.checked : ''}`,
+    name: name,
+    value: value,
+    checked: checked,
+    disabled: disabled,
+    readOnly: isReadOnly,
+    onClick: !disabled || !isReadOnly ? onChange : null
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
+    tabIndex: isReadOnly || disabled ? '-1' : '0'
+  })), text && /*#__PURE__*/React.createElement(Label, {
+    text: text,
+    palette: labelPalette,
+    id: id,
+    size: labelSize,
+    type: "subtitle",
+    onClick: !disabled || !isReadOnly ? onChange : null,
+    customClass: customLabel,
+    ...LabelProps
+  }));
+};
+
+Switch.defaultProps = defaultProps;
+Switch.propTypes = propTypes;
+export default Switch; // if (__DOCS__) {
+//   Switch.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Switch/props/defaultProps.js

@@ -0,0 +1,11 @@
+export const defaultProps = {
+  checked: false,
+  disabled: false,
+  labelPalette: 'primary',
+  labelSize: 'medium',
+  size: 'medium',
+  isReadOnly: false,
+  customClass: {},
+  customProps: {},
+  dataSelectorId: 'switch'
+};

package/es/v1/Switch/props/propTypes.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  checked: PropTypes.bool,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
+  disableTitle: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  isReadOnly: PropTypes.bool,
+  labelPalette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory']),
+  labelSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  size: PropTypes.oneOf(['small', 'medium']),
+  text: PropTypes.string,
+  title: PropTypes.string,
+  value: PropTypes.bool,
+  customClass: PropTypes.shape({
+    customSwitchWrap: PropTypes.string,
+    customSwitch: PropTypes.string,
+    customSwitchSize: PropTypes.string,
+    customLabel: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    SwitchProps: PropTypes.object,
+    LabelProps: PropTypes.object
+  })
+};

package/es/v1/Tab/Tab.js

@@ -0,0 +1,106 @@
+import React, { useMemo, useCallback } from 'react';
+import { Tab_defaultProps } from './props/defaultProps';
+import { Tab_propTypes } from './props/propTypes';
+import { Box, Container } from '../Layout';
+import { cs } from '../../utils/Common';
+import styles from './v1Tab.module.css';
+const tabTypes = {
+  alpha: {
+    active: 'alphaActive',
+    tab: 'tabAlpha'
+  },
+  beta: {
+    active: 'betaActive',
+    tab: 'tabBeta'
+  },
+  delta: {
+    active: 'deltaActive',
+    tab: 'tabDelta'
+  }
+};
+export default function Tab(_ref) {
+  let {
+    id,
+    style,
+    text,
+    children,
+    className,
+    dataId,
+    dataSelectorId,
+    title,
+    titlePosition,
+    activeClass,
+    href,
+    isLink,
+    isDisabled,
+    tourId,
+    onClick,
+    isActive,
+    getTabRef,
+    onSelect,
+    type,
+    isAnimate,
+    needBorder,
+    needAppearance,
+    align,
+    isVirtual,
+    customProps
+  } = _ref;
+  let clickListener = useCallback(event => {
+    if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
+      event && event.stopPropagation();
+      return;
+    }
+
+    event && event.preventDefault();
+    onSelect(id);
+    onClick && onClick(event);
+  }, [id, isLink, onSelect, onClick]);
+  let styleContent = useMemo(() => tabTypes[type] || {
+    active: 'active',
+    tab: 'tab'
+  }, [type]);
+  let getTab = useCallback(ref => getTabRef && getTabRef(id, ref, isVirtual), [id, isVirtual]);
+  let activeWithAppearance = cs([styles[styleContent.active], needBorder && !isAnimate && styles[`${styleContent.active}_border`]]);
+  let activeClasses = cs([needAppearance && activeWithAppearance, activeClass]);
+  let inActiveClasses = needAppearance && cs([styles[styleContent.tab], tabTypes[type] && styles[`${`${type}Hover`}`]]);
+  let tabClass = cs([styles.tab, align === 'vertical' ? styles.vertical : styles.horizontal, isDisabled && styles.disabled, needBorder && !isAnimate && needAppearance && styles.border, isActive ? activeClasses : inActiveClasses, className]);
+  return /*#__PURE__*/React.createElement(Box, {
+    tourId: tourId,
+    tagName: isLink ? 'a' : 'div',
+    className: tabClass,
+    dataId: `${dataId}_Tab`,
+    onClick: !isDisabled ? clickListener : undefined,
+    style: style,
+    eleRef: getTab,
+    "data-title": title,
+    "data-title-position": titlePosition,
+    adjust: true,
+    href: isLink ? href : undefined,
+    "data-key": id,
+    role: "link",
+    "aria-controls": id,
+    "aria-selected": isActive ? true : false,
+    tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
+    "aria-label": text ? text : null,
+    dataSelectorId: dataSelectorId,
+    ...customProps
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    align: "both",
+    className: styles.textContainer
+  }, text && /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    adjust: true,
+    className: styles.tabText
+  }, text), children ? /*#__PURE__*/React.createElement(Box, {
+    shrink: true
+  }, children) : null));
+}
+Tab.defaultProps = Tab_defaultProps;
+Tab.propTypes = Tab_propTypes; // if (__DOCS__) {
+//   Tab.docs = {
+//     componentGroup: 'Tab',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/v1/Tab/TabContent.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TabContent_defaultProps } from './props/defaultProps';
+import { TabContent_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
+import style from './v1TabContent.module.css';
+/* eslint-disable react/forbid-component-props */
+
+const TabContent = _ref => {
+  let {
+    children,
+    scroll,
+    dataId,
+    id,
+    dataSelectorId
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: style.container,
+    scroll: scroll,
+    dataId: `${dataId}_TabContent`,
+    isScrollAttribute: true,
+    "aria-labelledby": id,
+    tabindex: "-1",
+    role: "tabpanel",
+    dataSelectorId: dataSelectorId
+  }, children);
+};
+
+TabContent.defaultProps = TabContent_defaultProps;
+TabContent.propTypes = TabContent_propTypes;
+export default TabContent;

package/es/v1/Tab/TabContentWrapper.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TabContentWrapper_defaultProps } from './props/defaultProps';
+import { TabContentWrapper_propTypes } from './props/propTypes';
+import { Box } from '../Layout';
+/* eslint-disable react/forbid-component-props */
+
+const TabContentWrapper = _ref => {
+  let {
+    style,
+    className,
+    children,
+    dataId,
+    selectedTab,
+    onScroll,
+    dataSelectorId,
+    tagName,
+    a11y
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    style: style,
+    dataId: dataId,
+    className: className,
+    onScroll: onScroll,
+    dataSelectorId: dataSelectorId,
+    tagName: tagName,
+    ...a11y
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+};
+
+TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
+TabContentWrapper.propTypes = TabContentWrapper_propTypes;
+export default TabContentWrapper;

package/es/v1/Tab/TabWrapper.js

@@ -0,0 +1,55 @@
+import React, { useState, useCallback } from 'react';
+import { TabWrapper_defaultProps } from './props/defaultProps';
+import { TabWrapper_propTypes } from './props/propTypes';
+import { Container } from '../Layout';
+
+function TabWrapper(_ref) {
+  let {
+    defaultTab,
+    hookToDisableInternalState,
+    onSelect,
+    type,
+    isAnimate,
+    needTabBorder,
+    needBorder,
+    needPadding,
+    needAppearance,
+    align,
+    dataId,
+    children,
+    dataSelectorId
+  } = _ref;
+  let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
+  const setSelectedTab = useCallback(id => {
+    if (!hookToDisableInternalState) {
+      setSelected(id);
+    }
+
+    onSelect && onSelect(id);
+  }, [hookToDisableInternalState, onSelect]);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: align === 'vertical' ? 'column' : 'row',
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
+  }, React.Children.map(children, child => {
+    let TabsChild = child.type;
+    let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
+    return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
+    , { ...child.props,
+      selectedTab: selectedTab,
+      onSelect: setSelectedTab,
+      type: type,
+      isAnimate: isAnimate,
+      needTabBorder: needTabBorder,
+      needBorder: needBorder,
+      needPadding: needPadding,
+      needAppearance: needAppearance,
+      hookToDisableInternalState: hookToDisableInternalState,
+      align: align
+    });
+  }));
+}
+
+TabWrapper.propTypes = TabWrapper_propTypes;
+TabWrapper.defaultProps = TabWrapper_defaultProps;
+export default TabWrapper;