@elliemae/ds-mobile 3.0.0-next.1 → 3.0.0-next.5

package/esm/MobileCard/Card.js

@@ -1,131 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import { useRef } from 'react';
-import { describe } from 'react-desc';
-import styled from 'styled-components';
-import { space } from '@xstyled/styled-components';
-import { truncate, toMobile, color, __UNSAFE_SPACE_TO_DIMSUM, border, withTheme, op } from '@elliemae/ds-system';
-import GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';
-import { Grid } from '@elliemae/ds-grid';
-import { StyledCard } from './StyledCard.js';
-import { ExpandChevron } from './ExpandChevron.js';
-import { useHeight } from './useHeight.js';
-import { ExpandableRegion } from './ExpandableRegion.js';
-import { cardPropsTypes } from './props.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-const TitleEllipsis = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-10tpzm8-0"
-})(["", ""], truncate());
-const Title = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-10tpzm8-1"
-})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], space, truncate(), props => props.theme.fontWeights.semibold, props => toMobile(props.theme.fontSizes.title[600]), color('neutral', 800));
-const Detail = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-10tpzm8-2"
-})(["", " ", " font-size:", ";font-weight:", ";"], space, truncate(), props => toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
-const SubText = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-10tpzm8-3"
-})(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), truncate(), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
-const SubTextWrap = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-10tpzm8-4"
-})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], truncate(), props => border(props.theme.colors.neutral['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => toMobile(props.theme.fontSizes.subTitle[400]), color('neutral', 500), props => props.theme.fontWeights.regular);
-const LeftIcon = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-10tpzm8-5"
-})(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
-const CenterWrap = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-10tpzm8-6"
-})(["display:flex;align-items:center;", ""], truncate());
-
-const MobileCard = _ref => {
-  var _TitleEllipsis, _SubText, _Grid;
-
-  let {
-    children,
-    height = 'm',
-    leftAddOn,
-    leftProp,
-    rightProp,
-    subText,
-    subIcons,
-    details,
-    theme,
-    expandable = false,
-    expandedContent,
-    value,
-    cardContent
-  } = _ref;
-  const subTextRef = useRef(null);
-  const subTextHeight = useHeight(subTextRef);
-  const isJustChildren = !(subText || subIcons || details);
-  const halfM = op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
-  return /*#__PURE__*/_jsx(GroupItem, {
-    render: function () {
-      let context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      const {
-        activeValue,
-        onChange
-      } = context;
-      const selected = activeValue !== undefined && (activeValue === value || (activeValue === null || activeValue === void 0 ? void 0 : activeValue.length) && (activeValue === null || activeValue === void 0 ? void 0 : activeValue.includes(value)));
-      return /*#__PURE__*/_jsx(StyledCard, {
-        "data-testid": "card-wrapper",
-        minHeight: height === 'm' ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)
-      }, void 0, expandable && /*#__PURE__*/_jsx(ExpandChevron, {
-        isExpanded: selected,
-        onClick: e => {
-          e.stopPropagation();
-          onChange({
-            target: {
-              value
-            }
-          });
-        },
-        align: subText || subIcons ? 'top' : 'center'
-      }), /*#__PURE__*/_jsx(Grid, {
-        pb: (subText || subIcons) && subTextHeight,
-        cols: ['auto', 'auto'],
-        alignItems: "center"
-      }, void 0, leftProp && /*#__PURE__*/_jsx(Grid, {
-        ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx(LeftIcon, {
-        ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
-        halfM: halfM
-      }, void 0, leftAddOn)), /*#__PURE__*/_jsx(Grid, {
-        pl: !leftAddOn ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : __UNSAFE_SPACE_TO_DIMSUM(theme.space.xs),
-        pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
-        width: "100%"
-      }, void 0, /*#__PURE__*/_jsx(CenterWrap, {}, void 0, /*#__PURE__*/_jsx(Title, {
-        pt: !isJustChildren && halfM,
-        "data-testid": "card-title"
-      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx(TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx(Grid, {
-        "data-testid": "card-details",
-        cols: details.map(() => 'min-content'),
-        mb: !(subText || subIcons) && halfM || 0,
-        pt: op('/', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
-      }, void 0, details.map((d, i) => /*#__PURE__*/_jsx(Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx(Detail, {
-        px: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
-      }, void 0, "\u2022"))))), rightProp && rightProp.map((prop, i) => /*#__PURE__*/_jsx(Grid, {
-        ml: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
-      }, i, prop))), subIcons && /*#__PURE__*/jsxs(SubTextWrap, {
-        ref: subTextRef,
-        children: [_SubText || (_SubText = /*#__PURE__*/_jsx(SubText, {}, void 0, subIcons)), subText && subText[1] && /*#__PURE__*/_jsx(SubText, {
-          "data-testid": "card-subText"
-        }, void 0, subText[1])]
-      }), subText && !subIcons && /*#__PURE__*/jsx(SubTextWrap, {
-        ref: subTextRef,
-        children: subText.map((s, i) => /*#__PURE__*/_jsx(SubText, {
-          "data-testid": "card-subText"
-        }, i, s))
-      }), /*#__PURE__*/_jsx(ExpandableRegion, {
-        show: selected,
-        content: expandedContent
-      }), cardContent && (_Grid || (_Grid = /*#__PURE__*/_jsx(Grid, {}, void 0, cardContent)))));
-    }
-  });
-};
-
-const DSMobileCardWithSchema = describe(MobileCard);
-DSMobileCardWithSchema.propTypes = cardPropsTypes;
-var MobileCard$1 = withTheme(MobileCard);
-
-export { DSMobileCardWithSchema, MobileCard$1 as default };

package/esm/MobileCard/CardIcons.js

@@ -1,29 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'react';
-import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-grid';
-
-const CardIconsWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-1vqygz1-0"
-})(["align-items:center;span,svg{width:12px !important;height:12px !important;}span.icon-color-muted svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-warn svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-error svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-success svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-primary svg,svg:not([fill]){fill:", ";}span.icon-color-primary svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.neutral['600'], props => props.theme.colors.neutral['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.danger['900'], props => props.theme.colors.danger['900'], props => props.theme.colors.success['900'], props => props.theme.colors.success['900'], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]);
-const SubIcons = _ref => {
-  let {
-    icons = [],
-    colors = []
-  } = _ref;
-  return /*#__PURE__*/_jsx(CardIconsWrapper, {
-    cols: icons.map(() => '12px'),
-    gutter: "6px",
-    height: "14px",
-    "data-testid": "card-subIcons"
-  }, void 0, icons.map((Icon, i) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/no-array-index-key
-  _jsx(Icon, {
-    className: "icon-color-".concat(colors[i] || 'muted')
-  }, i)));
-};
-
-export { SubIcons };

package/esm/MobileCard/ExpandChevron.js

@@ -1,26 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import styled from 'styled-components';
-import { ChevronDown, ChevronRight } from '@elliemae/ds-icons';
-
-const ChevronWrap = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1l0ask2-0"
-})(["margin-top:", ";align-self:", ";margin-left:", ";"], props => props.align === 'top' ? '18px' : '0', props => props.align === 'top' ? 'flex-start' : 'center', props => props.theme.space.xs);
-const ExpandChevron = _ref => {
-  let {
-    isExpanded,
-    onClick,
-    align
-  } = _ref;
-  const Chevron = isExpanded ? ChevronDown : ChevronRight;
-  return /*#__PURE__*/_jsx(ChevronWrap, {
-    "data-testid": "ds-card-expand-chevron",
-    align: align
-  }, void 0, /*#__PURE__*/_jsx(Chevron, {
-    size: "s",
-    color: ['brand-primary', 800],
-    onClick: onClick
-  }));
-};
-
-export { ExpandChevron };

package/esm/MobileCard/ExpandableRegion.js

@@ -1,47 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import { truncate, border } from '@elliemae/ds-system';
-import { jsx } from 'react/jsx-runtime';
-
-const RegionWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-mduzz9-0"
-})(["width:100%;height:100%;"]);
-const Region = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-mduzz9-1"
-})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '', truncate(), props => border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
-const ExpandableRegion = _ref => {
-  var _ref$current;
-
-  let {
-    show,
-    content
-  } = _ref;
-  const ref = useRef(null); // triggers transition
-
-  const [animate, setAnimate] = useState(show); // needed to properly handle the transition. Hide after transition ends
-
-  const [hide, setHide] = useState(!show);
-  useEffect(() => {
-    setAnimate(show);
-    if (show) setHide(false);
-  }, [show]);
-
-  const hideOnAnimationEnd = () => {
-    if (!show) setHide(true);
-  };
-
-  return /*#__PURE__*/_jsx(Region, {
-    hide: hide // needed to handle transition, `auto` max-height isn't supported
-    ,
-    refHeight: (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 9999,
-    onTransitionEnd: hideOnAnimationEnd,
-    animate: animate
-  }, void 0, /*#__PURE__*/jsx(RegionWrapper, {
-    ref: ref,
-    children: content
-  }));
-};
-
-export { ExpandableRegion };

package/esm/MobileCard/Group.js

@@ -1,86 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import React from 'react';
-import { PropTypes, describe } from 'react-desc';
-import styled from 'styled-components';
-import Group from '@elliemae/ds-shared/GroupContext/Group';
-import { Grid } from '@elliemae/ds-grid';
-import { truncate, __UNSAFE_SPACE_TO_DIMSUM, color, border, withTheme } from '@elliemae/ds-system';
-import { StyledCard } from './StyledCard.js';
-
-const GroupGrid = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-17xukaf-0"
-})(["", "{border-top:none;}", ""], StyledCard, _ref => {
-  let {
-    theme,
-    withTopBorder
-  } = _ref;
-  return withTopBorder ? "border-top: ".concat(border(theme.colors.neutral['100'])) : '';
-});
-const GroupTitle = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-17xukaf-1"
-})(["", ""], truncate());
-const GroupTitleGrid = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-17xukaf-2"
-})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => "calc(".concat(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => border(props.theme.colors.brand['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => border(props.theme.colors.neutral['080']));
-
-const MobileCardGroup = _ref2 => {
-  let {
-    children,
-    theme,
-    title,
-    action,
-    activeValue,
-    allowMultipleOpen = false,
-    onChange = () => null
-  } = _ref2;
-  const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
-  return /*#__PURE__*/_jsx(Group, {
-    activeValue: activeValue,
-    multiple: allowMultipleOpen,
-    onChange: onChange
-  }, void 0, /*#__PURE__*/_jsx(GroupGrid, {
-    withTopBorder: !title,
-    rows: rows
-  }, void 0, !!title && /*#__PURE__*/_jsx(GroupTitleGrid, {
-    pl: "xxs"
-  }, void 0, /*#__PURE__*/_jsx(GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx(Grid, {}, void 0, React.Children.map(children, (child, idx) => /*#__PURE__*/React.cloneElement(child, {
-    key: idx,
-    value: idx,
-    idx
-  }), null))));
-};
-
-const props = {
-  theme: PropTypes.object.isRequired.description(''),
-
-  /**
-   * Defines group title
-   */
-  title: PropTypes.string.description(''),
-
-  /**
-   * Pass one or more Mobile Cards to render as a group
-   */
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(''),
-
-  /**
-   * Group header addon
-   */
-  action: PropTypes.element.description(''),
-
-  /**  */
-  activeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(''),
-
-  /**  */
-  allowMultipleOpen: PropTypes.bool.description(''),
-
-  /**  */
-  onChange: PropTypes.func.description('')
-};
-const DSMobileCardGroupWithSchema = describe(MobileCardGroup);
-DSMobileCardGroupWithSchema.propTypes = props;
-var MobileGroup = withTheme(MobileCardGroup);
-
-export { DSMobileCardGroupWithSchema, MobileGroup as default };

package/esm/MobileCard/StyledCard.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import { border } from '@elliemae/ds-system';
-
-const StyledCard = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-28g2t3-0"
-})(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], props => props.minHeight, props => border(props.theme.colors.neutral['100']), props => border('.5px', props.theme.colors.neutral['500']));
-
-export { StyledCard };

package/esm/MobileCard/index.js

@@ -1,11 +0,0 @@
-import MobileCard from './Card.js';
-export { DSMobileCardWithSchema, default } from './Card.js';
-import MobileGroup from './Group.js';
-export { DSMobileCardGroupWithSchema } from './Group.js';
-export { ActionAddon } from './ActionAddon.js';
-export { SubIcons } from './CardIcons.js';
-
-MobileCard.Group = MobileGroup;
-const DSMobileCard = MobileCard;
-
-export { DSMobileCard };

package/esm/MobileCard/props.js

@@ -1,58 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const cardPropsTypes = {
-  /**
-   * card height
-   */
-  height: PropTypes.oneOf(['s', 'm']).description('card height'),
-
-  /**
-   * Defines mobile card title
-   */
-  children: PropTypes.string.description('Defines mobile card title').isRequired,
-
-  /**
-   * Wheter if the card is expandable or not
-   */
-  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),
-
-  /**
-   * content to display in expand card section
-   */
-  expandedContent: PropTypes.element.description('content to display in expand card section'),
-
-  /**
-   * Icon to the left of the card. Size is adjusted automatically.
-   */
-  leftAddOn: PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
-
-  /**
-   * Pass an element to render left. For example a Button with an icon
-   */
-  leftProp: PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
-   */
-  rightProp: PropTypes.arrayOf(PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
-
-  /**
-   * Pass an array of 1 or 2 strings
-   */
-  subText: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),
-
-  /**
-   * SubIcons component
-   */
-  subIcons: PropTypes.element.description('SubIcons component'),
-
-  /**
-   * Pass an array of 1, 2 or 3 strings
-   */
-  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
-  theme: PropTypes.object.description('').isRequired,
-  value: PropTypes.number.description(''),
-  cardContent: PropTypes.node.description('JSX content for the card')
-};
-
-export { cardPropsTypes };

package/esm/MobileContextMenu/MobileContextMenu.js

@@ -1,185 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import React, { useState, useMemo, useRef } from 'react';
-import { noop } from 'lodash';
-import { PropTypes, describe } from 'react-desc';
-import styled from 'styled-components';
-import { Grid } from '@elliemae/ds-grid';
-import { DSBackdrop } from '@elliemae/ds-backdrop';
-import { truncate, withTheme } from '@elliemae/ds-system';
-import Group from '@elliemae/ds-shared/GroupContext/Group';
-import { DSMobileContextMenuGroup } from './MobileContextMenuGroup.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _ContextMenuGroup;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-15ys5tq-0"
-})(["background:", ";z-index:", ";width:", ";position:fixed;bottom:0;left:", ";max-height:90vh;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 0px 24px 0 rgba(0,0,0,0.5),0 0px 11px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.zIndex, props => "calc(100% - ".concat(props.theme.space.xs, ")"), props => props.theme.space.xxs);
-const StyledTitle = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-15ys5tq-1"
-})(["font-size:16px;font-weight:", ";color:", ";", " & > span{height:20px;width:20px;}& > span > svg,svg:not([fill]){height:20px;width:20px;fill:", ";}"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['000'], truncate(), props => props.theme.colors.neutral['000']);
-const HeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-15ys5tq-2"
-})(["border-top-left-radius:5px;border-top-right-radius:5px;background:", ";"], props => props.theme.colors.brand['600']);
-
-const isArr = prop => Array.isArray(prop);
-
-const DSMobileContextMenu = withTheme(_ref => {
-  let {
-    open = false,
-    title = '',
-    multiple = false,
-    singleSelect = false,
-    onChange = noop,
-    onClickOutside = noop,
-    children,
-    theme,
-    backdropZIndex,
-    zIndex = 1,
-    dataTestid = 'mobile-context-menu',
-    buttonFooter = null,
-    onApply = noop,
-    selecteds: initSelecteds
-  } = _ref;
-  const [selectedItems, setSelectedItems] = useState([]);
-  const trueSelected = useMemo(() => initSelecteds !== undefined ? initSelecteds : [...selectedItems], [initSelecteds, selectedItems]);
-  const containerRef = useRef(null);
-
-  const handleChange = (value, childProps, event) => {
-    onChange(value, childProps, event);
-
-    if (initSelecteds === undefined) {
-      if (multiple) setSelectedItems([...value]);else if (singleSelect) setSelectedItems(value);
-    }
-  };
-
-  const handleApply = function (e) {
-    if (this.onClick) this.onClick(e);
-    onApply(e, selectedItems);
-  };
-
-  const rows = [theme.space.s, 1];
-  if (buttonFooter) rows.push('56px');
-  if (!open) return null;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsx(DSBackdrop, {
-      type: "cover",
-      zIndex: backdropZIndex,
-      onClick: e => {
-        // PUI-4481 prevent click on elements below backdrop
-        e.stopPropagation();
-        onClickOutside(e);
-      }
-    }), /*#__PURE__*/jsxs(StyledContainer, {
-      zIndex: zIndex,
-      rows: rows,
-      ref: containerRef,
-      "data-testid": "ds-mobile-context-menu",
-      children: [/*#__PURE__*/_jsx(HeaderContainer, {
-        justifyContent: "center",
-        alignItems: "center",
-        pl: "xs",
-        pr: "xs"
-      }, void 0, /*#__PURE__*/_jsx(StyledTitle, {
-        alignItems: "center",
-        gutter: "xxs",
-        cols: Array(isArr(title) ? title.length : 1).fill('auto')
-      }, void 0, title)), /*#__PURE__*/_jsx(Grid, {
-        style: {
-          overflow: 'hidden'
-        }
-      }, void 0, /*#__PURE__*/_jsx(Grid, {
-        style: {
-          overflow: 'auto'
-        }
-      }, void 0, /*#__PURE__*/_jsx(Group, {
-        activeValue: trueSelected,
-        multiple: multiple,
-        onChange: handleChange
-      }, void 0, React.Children.map(children, (child, ii) => {
-        var _child$type;
-
-        const isGroup = child.type === (_ContextMenuGroup || (_ContextMenuGroup = /*#__PURE__*/_jsx(DSMobileContextMenuGroup, {}))).type || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === DSMobileContextMenuGroup.componentType || child.type === DSMobileContextMenuGroup.type;
-        const {
-          onClick = noop
-        } = child.props;
-        const value = ii;
-        let isSelected;
-        if (singleSelect) isSelected = trueSelected === value;else if (multiple) isSelected = trueSelected.includes(value);
-        return /*#__PURE__*/React.cloneElement(child, {
-          value,
-          key: "cm.".concat(ii),
-          isMulti: multiple,
-          singleSelect,
-          isSelected,
-          onClick: !isGroup ? e => onClick(e, child.props) : null,
-          selectedItems: isGroup ? trueSelected : null
-        });
-      })))), buttonFooter && /*#__PURE__*/_jsx(Grid, {
-        pl: "xs",
-        pr: "xs",
-        alignItems: "center"
-      }, void 0, /*#__PURE__*/React.cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
-        containerProps: {
-          'data-testid': "".concat(dataTestid, "--btn")
-        },
-        buttonType: 'primary',
-        size: 'l',
-        onClick: handleApply.bind(buttonFooter.props)
-      })))]
-    })]
-  });
-});
-const props = {
-  /** toggle open the menu */
-  open: PropTypes.bool.description('toggle open the menu'),
-
-  /** context menu title  */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]))]).description('context menu title'),
-
-  /** change handler for selectable context menu  */
-  onChange: PropTypes.func.description('change handler for selectable context menu'),
-
-  /** multi select */
-  multiple: PropTypes.bool.description('multi select'),
-
-  /** click outside callback handler */
-  onClickOutside: PropTypes.func.description('click outside callback handler'),
-
-  /** array of mobile context menu items */
-  children: PropTypes.arrayOf(PropTypes.element).description('array of mobile context menu items'),
-
-  /** z index for overlay div */
-  backdropZIndex: PropTypes.number.description('z index for overlay div'),
-
-  /** z index for menu container */
-  zIndex: PropTypes.number.description('z index for menu container'),
-
-  /** for e2e tests */
-  dataTestid: PropTypes.string.description('for e2e tests'),
-
-  /** bottom button */
-  buttonFooter: PropTypes.element.description('bottom button'),
-
-  /** callback */
-  onApply: PropTypes.func.description('callback'),
-
-  /** selected elements for multi and single select */
-  selecteds: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.number]).description('selected elements for multi and single select')
-};
-const DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);
-DSMobileContextMenuWithSchema.propTypes = props;
-
-export { DSMobileContextMenu, DSMobileContextMenuWithSchema };