@zohodesk/dot 1.0.0-temp-156 → 1.0.0-temp-159

package/es/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -0,0 +1,374 @@
+import React, { useState, useRef } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { defaultProps } from '../../../../list/status/StatusDropdown/props/defaultProps';
+import { propTypes } from '../../../../list/status/StatusDropdown/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import Popup from '@zohodesk/components/es/v1/Popup/Popup';
+import { Box, Container } from '@zohodesk/components/es/v1/Layout';
+import DropDownHeading from '@zohodesk/components/es/v1/DropDown/DropDownHeading';
+import TextBoxIcon from '@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon';
+import Loader from '@zohodesk/svg/lib/Loader/Loader';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
+import { scrollTo } from '@zohodesk/components/es/utils/Common';
+import TextBox from '@zohodesk/components/es/v1/TextBox/TextBox';
+import CommonEmptyState from '../../../emptystate/CommonEmptyState/CommonEmptyState';
+import StatusListItem from '../StatusListItem/StatusListItem';
+import commonStyle from '@zohodesk/components/es/common/common.module.css';
+import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
+import { ResponsiveReceiver } from '@zohodesk/components/es/v1/Responsive/CustomResponsive';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
+import style from '../../../../list/status/StatusDropdown/StatusDropdown.module.css';
+
+function StatusDropdown(props) {
+  let {
+    value,
+    removeClose,
+    boxSize,
+    keyName,
+    idName,
+    title,
+    isSearch,
+    isArrow,
+    placeHolderText,
+    className,
+    right,
+    left,
+    top,
+    bottom,
+    isPopupOpen: isOpen,
+    isPopupReady,
+    position,
+    getTargetRef,
+    getContainerRef,
+    dataId,
+    searchBoxSize,
+    searchEmptyHint,
+    searchErrorText,
+    activeStyle,
+    showOnHover = false,
+    isDisabled,
+    showIconOnHover,
+    isReadOnly,
+    hoverStyle,
+    isEditable,
+    needTick,
+    dataTitle,
+    isDataLoaded,
+    children,
+    targetAlign,
+    needResponsive,
+    arrowIconPosition,
+    statusColor,
+    needExternalPopupState = false,
+    isPopupActive = false,
+    needMultiLineText,
+    boxPosition,
+    togglePopup,
+    onTogglePopup,
+    onClick,
+    onSelectLabel,
+    isNextOptions,
+    getNextOptions,
+    options,
+    a11y = {}
+  } = props;
+  const [optionsList, setOptionsList] = useState(options);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [searchString, setSearchString] = useState('');
+  const hiddenInput = useRef(null);
+  const searchInput = useRef(null);
+  const optionsContainer = useRef(null);
+  const dropdown = useRef({});
+  const getAriaId = useUniqueId();
+  const {
+    tabIndex = 0,
+    ariaLabelledby,
+    ariaLabel
+  } = a11y;
+  let isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
+  let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
+  let ariaTitleId = getAriaId();
+
+  function emptySearchSVG() {
+    return /*#__PURE__*/React.createElement(EmptySearch, {
+      size: "small"
+    });
+  }
+
+  function handleInputRef(el) {
+    hiddenInput.current = el;
+  }
+
+  function itemRef(ele, index, id) {
+    dropdown.current[`suggestion_${id}`] = ele;
+  }
+
+  function searchInputRef(el) {
+    searchInput.current = el;
+  }
+
+  function handleTogglePopup(e) {
+    !isPopupOpen && onSelectLabel && onSelectLabel(e);
+    onTogglePopup && onTogglePopup(isPopupOpen);
+    togglePopup(e, boxPosition);
+  }
+
+  function scrollContentRef(el) {
+    if (isPopupOpen) {
+      optionsContainer.current = el;
+    }
+  }
+
+  function onSelect(element, e) {
+    onClick && onClick(e, element);
+    onTogglePopup && onTogglePopup(isPopupOpen);
+    togglePopup(e);
+  }
+
+  function handleKeyDown(e) {
+    let {
+      keyCode
+    } = e;
+    let totalIndex = optionsList.length;
+
+    if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
+      e.preventDefault(); //prevent body scroll
+    }
+
+    if (isPopupReady) {
+      switch (keyCode) {
+        case 40:
+          if (selectedIndex === totalIndex - 1) {
+            setSelectedIndex(0);
+          } else {
+            if (selectedIndex === totalIndex - 3) {
+              isNextOptions && getNextOptions && getNextOptions();
+            }
+
+            setSelectedIndex(selectedIndex + 1);
+          }
+
+          break;
+
+        case 38:
+          if (selectedIndex === 0) {
+            setSelectedIndex(totalIndex - 1);
+          } else {
+            setSelectedIndex(selectedIndex - 1);
+          }
+
+          break;
+
+        case 13:
+          onClick && onClick(optionsList[selectedIndex].name, e);
+          onTogglePopup && onTogglePopup(isPopupOpen);
+          togglePopup(e, boxPosition);
+          break;
+
+        default:
+          break;
+      }
+    } else {
+      if (keyCode === 13 || keyCode === 40) {
+        togglePopup(e, boxPosition);
+      }
+    }
+  }
+
+  function searchList(value) {
+    let foptions = options.filter(dept => dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1);
+    return foptions;
+  }
+
+  function handleChange(value, e) {
+    let foptions = searchList(value);
+    setSearchString(value);
+    setSelectedIndex(-1);
+    setOptionsList(foptions);
+  }
+
+  function onSearchClear() {
+    let foptions = searchList('');
+    setSearchString('');
+    setOptionsList(foptions);
+  }
+
+  function handleMouseEnter(id, value, index, e) {
+    setSelectedIndex(index);
+  }
+
+  function handleScroll(e) {
+    if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
+      isNextOptions && getNextOptions && getNextOptions(e);
+    }
+  }
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      tabletMode: mediaQueryOR([{
+        maxWidth: 700
+      }])
+    };
+  }
+
+  useEffectCallOnlyAfterState(() => {
+    setOptionsList(options);
+  }, [options.length]);
+  useEffectCallOnlyAfterState(() => {
+    setTimeout(() => {
+      isPopupOpen && isSearch ? searchInput.current && searchInput.current.focus() : hiddenInput.current && hiddenInput.current.focus();
+    }, 10);
+    let mergeOptions = optionsList;
+    let option = mergeOptions[selectedIndex];
+    let id = option && option[idName] || {};
+    let selSuggestion = dropdown.current[`suggestion_${id}`];
+
+    if (isPopupOpen) {
+      optionsContainer.current && scrollTo(optionsContainer.current, selSuggestion);
+      onSearchClear();
+    }
+  }, [isPopupOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.posRel,
+    onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined,
+    onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined
+  }, /*#__PURE__*/React.createElement(Container, {
+    tagName: "button",
+    alignBox: "row",
+    className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
+    onMouseDown: !showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : null,
+    eleRef: getTargetRef,
+    align: targetAlign,
+    isCover: false,
+    dataId: dataId,
+    onClick: removeClose,
+    disabled: isDisabled || isReadOnly ? true : false,
+    "aria-haspopup": true,
+    "aria-expanded": isPopupOpen && isEditable ? true : false,
+    tabIndex: tabIndex,
+    "aria-labelledby": ariaLabelledby,
+    "aria-label": ariaLabel,
+    "aria-disabled": isDisabled || isReadOnly
+  }, isEditable ? /*#__PURE__*/React.createElement("div", {
+    className: style.hiddenInput
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    type: "text",
+    inputRef: handleInputRef,
+    onKeyDown: handleKeyDown,
+    needAppearance: false,
+    placeHolder: placeHolderText
+  })) : null, children ? children : /*#__PURE__*/React.createElement(Box, {
+    className: `${style.value} toggleDropText`,
+    shrink: true,
+    tagName: "span",
+    "data-title": dataTitle
+  }, value), isEditable ? /*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
+    size: "7",
+    name: "ZD-down",
+    iconClass: `${'toggleDropIcon'} ${style.arrow} ${style[`${arrowIconPosition}_arrow`]}`,
+    dataId: "statusdownarrow"
+  }) : null), isPopupOpen && isEditable ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: "Helmet"
+  }, _ref2 => {
+    let {
+      tabletMode
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      boxPosition: position,
+      isActive: isPopupReady,
+      onClick: removeClose,
+      size: boxSize,
+      right: right,
+      left: left,
+      top: top,
+      bottom: bottom,
+      isArrow: isArrow,
+      isAnimate: true,
+      getRef: getContainerRef,
+      customClass: {
+        customDropBoxWrap: style.dropBoxContainer
+      },
+      needResponsive: needResponsive,
+      isResponsivePadding: true
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+      className: style.search
+    }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+      placeHolder: placeHolderText,
+      onChange: handleChange,
+      value: searchString,
+      onClear: onSearchClear,
+      size: searchBoxSize,
+      inputRef: searchInputRef,
+      onKeyDown: handleKeyDown,
+      a11y: {
+        ariaHaspopup: true,
+        ariaExpanded: true,
+        role: 'combobox',
+        ariaActivedescendant: value,
+        ariaOwns: ariaTitleId
+      }
+    })) : null, title && optionsList.length != 0 && /*#__PURE__*/React.createElement(Box, {
+      className: style.title
+    }, /*#__PURE__*/React.createElement(DropDownHeading, {
+      htmlId: ariaTitleId,
+      text: title,
+      a11y: {
+        role: 'heading'
+      }
+    })), /*#__PURE__*/React.createElement(Box, {
+      scroll: "vertical",
+      flexible: true,
+      shrink: true,
+      dataId: `${dataId}_list`,
+      preventParentScroll: "vertical",
+      className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+      eleRef: scrollContentRef,
+      onScroll: handleScroll,
+      role: isSearch ? 'listbox' : 'menu',
+      "aria-labelledby": ariaTitleId,
+      tabindex: "0"
+    }, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, optionsList.map((item, i) => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: i
+    }, /*#__PURE__*/React.createElement(StatusListItem, {
+      dataId: `dataid_${i}`,
+      value: item[keyName],
+      id: item[idName],
+      active: value === item[keyName],
+      onClick: e => onSelect(item, e),
+      index: i,
+      highlight: selectedIndex === i,
+      needTick: needTick,
+      needBorder: false,
+      onMouseEnter: handleMouseEnter,
+      getRef: itemRef,
+      bulletColor: item[statusColor],
+      title: item[keyName],
+      needMultiLineText: needMultiLineText,
+      a11y: {
+        role: isSearch ? 'option' : 'menuitem',
+        ariaSelected: value === item[keyName]
+      }
+    })))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+      className: style.svgWrapper,
+      title: searchErrorText || 'No results',
+      description: searchEmptyHint,
+      size: "small",
+      getEmptyState: emptySearchSVG
+    }) : /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }, /*#__PURE__*/React.createElement(Loader, null)))));
+  }) : null);
+}
+
+StatusDropdown.defaultProps = defaultProps;
+StatusDropdown.propTypes = propTypes;
+const StatusDropdown_Component = Popup(StatusDropdown);
+StatusDropdown_Component.defaultProps = StatusDropdown.defaultProps;
+StatusDropdown_Component.propTypes = StatusDropdown.propTypes;
+export default StatusDropdown_Component;

package/es/v1/list/status/StatusListItem/StatusListItem.js

@@ -0,0 +1,122 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** Libraries ****/
+import React from 'react';
+import { defaultProps } from './../../../../list/status/StatusListItem/props/defaultProps';
+import { propTypes } from './../../../../list/status/StatusListItem/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+/**** Components ****/
+
+import { Icon } from '@zohodesk/icons';
+import CssProvider from '@zohodesk/components/es/v1/Provider/CssProvider';
+/**** CSS ****/
+
+import style from './../../../../list/status/StatusListItem/StatusListItem.module.css';
+export default class StatusListItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.getRef = this.getRef.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+  }
+
+  getRef(ele) {
+    this.ele = ele;
+    let {
+      index,
+      getRef,
+      id
+    } = this.props;
+    getRef && getRef(ele, index, id);
+  }
+
+  handleClick(e) {
+    let {
+      onClick,
+      id,
+      value,
+      index
+    } = this.props;
+    onClick && onClick(id, value, index, e);
+  }
+
+  handleMouseEnter(e) {
+    let {
+      onMouseEnter,
+      id,
+      value,
+      index
+    } = this.props;
+    onMouseEnter && onMouseEnter(id, value, index, e);
+  }
+
+  render() {
+    let {
+      size,
+      active,
+      highlight,
+      value,
+      autoHover,
+      palette,
+      title,
+      disableTitle,
+      needTick,
+      isLink,
+      href,
+      target,
+      needBorder,
+      isDisabled,
+      bulletColor,
+      a11y,
+      needMultiLineText
+    } = this.props;
+    let options = {};
+    let {
+      role,
+      ariaSelected,
+      ariaHidden = true
+    } = a11y;
+
+    if (isLink) {
+      options.href = href;
+      options.target = `_${target}`;
+    }
+
+    return /*#__PURE__*/React.createElement(Container, _extends({
+      role: role,
+      "aria-selected": ariaSelected,
+      isCover: false,
+      align: "baseline",
+      alignBox: "row",
+      className: `${style.list} ${style[size]} ${style[palette]} ${active ? style.active : highlight && !isDisabled ? style.hover : ''} ${autoHover && !isDisabled ? style.effect : ''} ${needTick ? style.withTick : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? style.withBorder : ''}`,
+      dataId: String(value).replace("'", '_'),
+      onClick: !isDisabled && this.handleClick,
+      onMouseEnter: this.handleMouseEnter,
+      eleRef: this.getRef,
+      tagName: isLink ? 'a' : 'li',
+      "data-title": isDisabled ? disableTitle : null,
+      tabindex: isDisabled ? '-1' : '0'
+    }, options), /*#__PURE__*/React.createElement(Box, {
+      className: `${style.statusType} ${style[bulletColor]}`
+    }), /*#__PURE__*/React.createElement(Box, {
+      "data-title": isDisabled ? null : title,
+      flexible: true,
+      shrink: true,
+      className: needMultiLineText ? style.multiLineValue : style.value
+    }, value), needTick && active ? /*#__PURE__*/React.createElement("div", {
+      className: style.tickIcon,
+      "aria-hidden": ariaHidden
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-ticknew",
+      size: "8"
+    })) : null);
+  }
+
+}
+StatusListItem.defaultProps = defaultProps;
+StatusListItem.propTypes = propTypes; // if (__DOCS__) {
+//   StatusListItem.docs = {
+//     componentGroup: 'StatusListItem',
+//     folderName: 'List'
+//   };
+// }

package/es/v1/list/status/index.js

@@ -0,0 +1,2 @@
+export { default as StatusDropdown } from './StatusDropdown/StatusDropdown';
+export { default as StatusListItem } from './StatusListItem/StatusListItem';

package/es/v1/lookup/EmptyPage/EmptyPage.js

@@ -0,0 +1,65 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+import { defaultProps } from '../../../lookup/EmptyPage/props/defaultProps';
+import { propTypes } from '../../../lookup/EmptyPage/props/propTypes';
+import EmptySearch from '@zohodesk/svg/lib/emptystate/version3/EmptySearch';
+import EmptyAccounts from '@zohodesk/svg/lib/emptystate/version3/EmptyAccounts';
+import EmptyContact from '@zohodesk/svg/lib/emptystate/version3/EmptyContact';
+import EmptyProducts from '@zohodesk/svg/lib/emptystate/version3/EmptyProducts';
+/*** CSS ***/
+
+import style from '../../../lookup/EmptyPage/LookupEmptyPage.module.css';
+export default class EmptyPage extends Component {
+  constructor(props) {
+    super(props);
+    this.renderEmptyState = this.renderEmptyState.bind();
+  }
+
+  renderEmptyState(type) {
+    switch (type) {
+      case 'search':
+        return /*#__PURE__*/React.createElement(EmptySearch, {
+          className: style.image
+        });
+
+      case 'account':
+        return /*#__PURE__*/React.createElement(EmptyAccounts, {
+          className: style.image
+        });
+
+      case 'contact':
+        return /*#__PURE__*/React.createElement(EmptyContact, {
+          className: style.image
+        });
+
+      case 'product':
+        return /*#__PURE__*/React.createElement(EmptyProducts, {
+          className: style.image
+        });
+
+      default:
+        return null;
+    }
+  }
+
+  render() {
+    let {
+      type,
+      title
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container,
+      "data-id": `empty_${type}`,
+      "data-test-id": `empty_${type}`
+    }, this.renderEmptyState(type), /*#__PURE__*/React.createElement("div", {
+      className: style.contentDiv
+    }, title));
+  }
+
+}
+EmptyPage.propTypes = propTypes;
+EmptyPage.defaultProps = defaultProps; // if (__DOCS__) {
+//   EmptyPage.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

package/es/v1/lookup/Lookup/Lookup.js

@@ -0,0 +1,108 @@
+/*** Libraries ***/
+import React, { useRef, useCallback, useEffect } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { defaultProps } from '../../../lookup/Lookup/props/defaultProps';
+import { propTypes } from '../../../lookup/Lookup/props/propTypes';
+/*** Components ***/
+
+import FreezeLayer from '../../../FreezeLayer/FreezeLayer';
+import { Container } from '@zohodesk/components/es/v1/Layout';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+/*** CSS ***/
+
+import style from '../../../lookup/Lookup/Lookup.module.css';
+/*eslint-disable react/forbid-component-props */
+
+export default function Lookup(props) {
+  const {
+    isActive,
+    children,
+    size,
+    dataId,
+    forwardRef,
+    onClick,
+    customClass,
+    htmlId,
+    a11y,
+    childAnimationName,
+    onClose,
+    needFocusScope,
+    customProps,
+    onKeyDown
+  } = props;
+  const {
+    role = 'dialog',
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaLabel,
+    ariaModal = isActive ? true : undefined
+  } = a11y;
+  const {
+    focusScopeProps = {}
+  } = customProps;
+  const {
+    needAutoFocus = true,
+    needRestoreFocus = true,
+    needListNavigation = false,
+    needFocusLoop = true,
+    needEnterAction = false
+  } = focusScopeProps;
+  const createRef = useRef(null);
+  const handleKeyDown = useCallback(e => {
+    onKeyDown && onKeyDown(e);
+  }, [onKeyDown]);
+  useEffectCallOnlyAfterState(() => {
+    if (isActive) {
+      document.addEventListener('keydown', handleKeyDown);
+    } else {
+      document.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [isActive]);
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+  const content = /*#__PURE__*/React.createElement("div", {
+    ref: createRef,
+    tabIndex: "-1",
+    "data-a11y-need-focus-style": "false",
+    role: role,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-label": ariaLabel,
+    "aria-modal": ariaModal,
+    id: htmlId,
+    className: `${style.box} ${style[`${size}Size`]}`,
+    "data-id": dataId,
+    "data-test-id": dataId
+  }, children);
+  return /*#__PURE__*/React.createElement(FreezeLayer, {
+    align: "horizontal",
+    animationName: "fade",
+    childAnimationName: childAnimationName,
+    isActive: isActive,
+    palette: "snow",
+    forwardRef: forwardRef,
+    onClick: onClick,
+    customClass: customClass
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: style.container,
+    dataId: "fldValue"
+  }, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    needFocusLoop: needFocusLoop,
+    needListNavigation: needListNavigation,
+    elementRef: createRef,
+    needAutoFocus: needAutoFocus,
+    needRestoreFocus: needRestoreFocus,
+    onClose: onClose,
+    needEnterAction: needEnterAction
+  }, content) : content));
+}
+Lookup.propTypes = propTypes;
+Lookup.defaultProps = defaultProps; // if (__DOCS__) {
+//   Lookup.docs = {
+//     componentGroup: 'Lookup'
+//   };
+// }

package/es/v1/lookup/Section/Section.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { propTypes } from '../../../lookup/Section/props/propTypes';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import style from '../../../lookup/Section/LookupSection.module.css';
+export default class Section extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      alignBox,
+      className
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      "data-drag-container": "true",
+      alignBox: alignBox,
+      className: `${style.section} ${className ? className : ''}`
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, this.props.children));
+  }
+
+}
+Section.propTypes = propTypes;