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

package/dist/esm/MobileContextMenu/MobileContextMenu.js

@@ -0,0 +1,191 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2, { useState, useRef, useMemo } from "react";
+import { noop } from "lodash";
+import { describe, PropTypes } 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 as ContextMenuGroup } from "./MobileContextMenuGroup";
+const StyledContainer = styled(Grid)`
+  background: ${(props2) => props2.theme.colors.neutral["000"]};
+  z-index: ${(props2) => props2.zIndex};
+  width: ${(props2) => `calc(100% - ${props2.theme.space.xs})`};
+  position: fixed;
+  bottom: 0;
+  left: ${(props2) => props2.theme.space.xxs};
+  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);
+`;
+const StyledTitle = styled(Grid)`
+  font-size: 16px;
+  font-weight: ${(props2) => props2.theme.fontWeights.semibold};
+  color: ${(props2) => props2.theme.colors.neutral["000"]};
+  ${truncate()}
+
+  & > span {
+    height: 20px;
+    width: 20px;
+  }
+
+  & > span > svg,
+  svg:not([fill]) {
+    height: 20px;
+    width: 20px;
+    fill: ${(props2) => props2.theme.colors.neutral["000"]};
+  }
+`;
+const HeaderContainer = styled(Grid)`
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  background: ${(props2) => props2.theme.colors.brand["600"]};
+`;
+const isArr = (prop) => Array.isArray(prop);
+const DSMobileContextMenu = withTheme(({
+  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
+}) => {
+  const [selectedItems, setSelectedItems] = useState([]);
+  const trueSelected = useMemo(() => initSelecteds !== void 0 ? initSelecteds : [...selectedItems], [initSelecteds, selectedItems]);
+  const containerRef = useRef(null);
+  const handleChange = (value, childProps, event) => {
+    onChange(value, childProps, event);
+    if (initSelecteds === void 0) {
+      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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DSBackdrop, {
+    type: "cover",
+    zIndex: backdropZIndex,
+    onClick: (e) => {
+      e.stopPropagation();
+      onClickOutside(e);
+    }
+  }), /* @__PURE__ */ React2.createElement(StyledContainer, {
+    zIndex,
+    rows,
+    ref: containerRef,
+    "data-testid": "ds-mobile-context-menu"
+  }, /* @__PURE__ */ React2.createElement(HeaderContainer, {
+    justifyContent: "center",
+    alignItems: "center",
+    pl: "xs",
+    pr: "xs"
+  }, /* @__PURE__ */ React2.createElement(StyledTitle, {
+    alignItems: "center",
+    gutter: "xxs",
+    cols: Array(isArr(title) ? title.length : 1).fill("auto")
+  }, title)), /* @__PURE__ */ React2.createElement(Grid, {
+    style: { overflow: "hidden" }
+  }, /* @__PURE__ */ React2.createElement(Grid, {
+    style: { overflow: "auto" }
+  }, /* @__PURE__ */ React2.createElement(Group, {
+    activeValue: trueSelected,
+    multiple,
+    onChange: handleChange
+  }, React2.Children.map(children, (child, ii) => {
+    const isGroup = child.type === (/* @__PURE__ */ React2.createElement(ContextMenuGroup, null)).type || child.type?.name === ContextMenuGroup.componentType || child.type === ContextMenuGroup.type;
+    const { onClick = noop } = child.props;
+    const value = ii;
+    let isSelected;
+    if (singleSelect)
+      isSelected = trueSelected === value;
+    else if (multiple)
+      isSelected = trueSelected.includes(value);
+    return React2.cloneElement(child, {
+      value,
+      key: `cm.${ii}`,
+      isMulti: multiple,
+      singleSelect,
+      isSelected,
+      onClick: !isGroup ? (e) => onClick(e, child.props) : null,
+      selectedItems: isGroup ? trueSelected : null
+    });
+  })))), buttonFooter && /* @__PURE__ */ React2.createElement(Grid, {
+    pl: "xs",
+    pr: "xs",
+    alignItems: "center"
+  }, React2.cloneElement(buttonFooter, __spreadProps(__spreadValues({}, buttonFooter.props), {
+    containerProps: {
+      "data-testid": `${dataTestid}--btn`
+    },
+    buttonType: "primary",
+    size: "l",
+    onClick: handleApply.bind(buttonFooter.props)
+  })))));
+});
+const props = {
+  open: PropTypes.bool.description("toggle open the menu"),
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node]))
+  ]).description("context menu title"),
+  onChange: PropTypes.func.description("change handler for selectable context menu"),
+  multiple: PropTypes.bool.description("multi select"),
+  onClickOutside: PropTypes.func.description("click outside callback handler"),
+  children: PropTypes.arrayOf(PropTypes.element).description("array of mobile context menu items"),
+  backdropZIndex: PropTypes.number.description("z index for overlay div"),
+  zIndex: PropTypes.number.description("z index for menu container"),
+  dataTestid: PropTypes.string.description("for e2e tests"),
+  buttonFooter: PropTypes.element.description("bottom button"),
+  onApply: PropTypes.func.description("callback"),
+  selecteds: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+    PropTypes.number
+  ]).description("selected elements for multi and single select")
+};
+DSMobileContextMenu.propTypes = props;
+const DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);
+DSMobileContextMenuWithSchema.propTypes = props;
+export {
+  DSMobileContextMenu,
+  DSMobileContextMenuWithSchema
+};
+//# sourceMappingURL=MobileContextMenu.js.map

package/dist/esm/MobileContextMenu/MobileContextMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable react/no-array-index-key */\n/* eslint-disable func-names */\n/* eslint-disable max-lines */\nimport React, { useState, useRef, useMemo } from 'react';\nimport { noop } from 'lodash';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSBackdrop } from '@elliemae/ds-backdrop';\nimport { truncate, withTheme } from '@elliemae/ds-system';\nimport Group from '@elliemae/ds-shared/GroupContext/Group';\nimport { DSMobileContextMenuGroup as ContextMenuGroup } from './MobileContextMenuGroup';\n\nconst StyledContainer = styled(Grid)`\n  background: ${(props) => props.theme.colors.neutral['000']};\n  z-index: ${(props) => props.zIndex};\n  width: ${(props) => `calc(100% - ${props.theme.space.xs})`};\n  position: fixed;\n  bottom: 0;\n  left: ${(props) => props.theme.space.xxs};\n  max-height: 90vh;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  box-shadow: 0 0px 24px 0 rgba(0, 0, 0, 0.5), 0 0px 11px 0 rgba(0, 0, 0, 0.5);\n`;\n\nconst StyledTitle = styled(Grid)`\n  font-size: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  color: ${(props) => props.theme.colors.neutral['000']};\n  ${truncate()}\n\n  & > span {\n    height: 20px;\n    width: 20px;\n  }\n\n  & > span > svg,\n  svg:not([fill]) {\n    height: 20px;\n    width: 20px;\n    fill: ${(props) => props.theme.colors.neutral['000']};\n  }\n`;\n\nconst HeaderContainer = styled(Grid)`\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  background: ${(props) => props.theme.colors.brand['600']};\n`;\n\nconst isArr = (prop) => Array.isArray(prop);\n\nconst DSMobileContextMenu = withTheme(\n  ({\n    open = false,\n    title = '',\n    multiple = false,\n    singleSelect = false,\n    onChange = noop,\n    onClickOutside = noop,\n    children,\n    theme,\n    backdropZIndex,\n    zIndex = 1,\n    dataTestid = 'mobile-context-menu',\n    buttonFooter = null,\n    onApply = noop,\n    selecteds: initSelecteds,\n  }) => {\n    const [selectedItems, setSelectedItems] = useState([]);\n    const trueSelected = useMemo(\n      () => (initSelecteds !== undefined ? initSelecteds : [...selectedItems]),\n      [initSelecteds, selectedItems],\n    );\n    const containerRef = useRef(null);\n    const handleChange = (value, childProps, event) => {\n      onChange(value, childProps, event);\n      if (initSelecteds === undefined) {\n        if (multiple) setSelectedItems([...value]);\n        else if (singleSelect) setSelectedItems(value);\n      }\n    };\n\n    const handleApply = function (e) {\n      if (this.onClick) this.onClick(e);\n      onApply(e, selectedItems);\n    };\n\n    const rows = [theme.space.s, 1];\n    if (buttonFooter) rows.push('56px');\n\n    if (!open) return null;\n\n    return (\n      <>\n        <DSBackdrop\n          type=\"cover\"\n          zIndex={backdropZIndex}\n          onClick={(e) => {\n            // PUI-4481 prevent click on elements below backdrop\n            e.stopPropagation();\n            onClickOutside(e);\n          }}\n        />\n        <StyledContainer zIndex={zIndex} rows={rows} ref={containerRef} data-testid=\"ds-mobile-context-menu\">\n          <HeaderContainer justifyContent=\"center\" alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n            <StyledTitle alignItems=\"center\" gutter=\"xxs\" cols={Array(isArr(title) ? title.length : 1).fill('auto')}>\n              {title}\n            </StyledTitle>\n          </HeaderContainer>\n          <Grid style={{ overflow: 'hidden' }}>\n            <Grid style={{ overflow: 'auto' }}>\n              <Group activeValue={trueSelected} multiple={multiple} onChange={handleChange}>\n                {React.Children.map(children, (child, ii) => {\n                  const isGroup =\n                    child.type === (<ContextMenuGroup />).type ||\n                    child.type?.name === ContextMenuGroup.componentType ||\n                    child.type === ContextMenuGroup.type;\n                  const { onClick = noop } = child.props;\n                  const value = ii;\n                  let isSelected;\n                  if (singleSelect) isSelected = trueSelected === value;\n                  else if (multiple) isSelected = trueSelected.includes(value);\n                  return React.cloneElement(child, {\n                    value,\n                    key: `cm.${ii}`,\n                    isMulti: multiple,\n                    singleSelect,\n                    isSelected,\n                    onClick: !isGroup ? (e) => onClick(e, child.props) : null,\n                    selectedItems: isGroup ? trueSelected : null,\n                  });\n                })}\n              </Group>\n            </Grid>\n          </Grid>\n          {buttonFooter && (\n            <Grid pl=\"xs\" pr=\"xs\" alignItems=\"center\">\n              {React.cloneElement(buttonFooter, {\n                ...buttonFooter.props,\n                containerProps: {\n                  'data-testid': `${dataTestid}--btn`,\n                },\n                buttonType: 'primary',\n                size: 'l',\n                onClick: handleApply.bind(buttonFooter.props),\n              })}\n            </Grid>\n          )}\n        </StyledContainer>\n      </>\n    );\n  },\n);\n\nconst props = {\n  /** toggle open the menu */\n  open: PropTypes.bool.description('toggle open the menu'),\n  /** context menu title  */\n  title: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.node])),\n  ]).description('context menu title'),\n  /** change handler for selectable context menu  */\n  onChange: PropTypes.func.description('change handler for selectable context menu'),\n  /** multi select */\n  multiple: PropTypes.bool.description('multi select'),\n  /** click outside callback handler */\n  onClickOutside: PropTypes.func.description('click outside callback handler'),\n  /** array of mobile context menu items */\n  children: PropTypes.arrayOf(PropTypes.element).description('array of mobile context menu items'),\n  /** z index for overlay div */\n  backdropZIndex: PropTypes.number.description('z index for overlay div'),\n  /** z index for menu container */\n  zIndex: PropTypes.number.description('z index for menu container'),\n  /** for e2e tests */\n  dataTestid: PropTypes.string.description('for e2e tests'),\n  /** bottom button */\n  buttonFooter: PropTypes.element.description('bottom button'),\n  /** callback */\n  onApply: PropTypes.func.description('callback'),\n  /** selected elements for multi and single select */\n  selecteds: PropTypes.oneOfType([\n    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n    PropTypes.number,\n  ]).description('selected elements for multi and single select'),\n};\n\nDSMobileContextMenu.propTypes = props;\n\nconst DSMobileContextMenuWithSchema = describe(DSMobileContextMenu);\n\nDSMobileContextMenuWithSchema.propTypes = props;\n\nexport { DSMobileContextMenu, DSMobileContextMenuWithSchema };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/MobileContextMenu/MobileContextMenuGroup.js

@@ -0,0 +1,67 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2 from "react";
+import styled from "styled-components";
+import { Grid } from "@elliemae/ds-grid";
+import { noop } from "lodash";
+import { PropTypes, describe } from "react-desc";
+const Title = styled.div`
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  border-top: 1px solid ${(props2) => props2.theme.colors.brand["300"]};
+  background: ${(props2) => props2.theme.colors.brand["200"]};
+  padding: 0 ${(props2) => props2.theme.space.xs};
+  color: ${(props2) => props2.theme.colors.neutral["700"]};
+  font-weight: ${(props2) => props2.theme.fontWeights.semibold};
+`;
+const DSMobileContextMenuGroup = ({ title, isMulti, singleSelect, children, value: groupValue, selectedItems }) => /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(Title, null, title)), /* @__PURE__ */ React2.createElement(Grid, null, React2.Children.map(children, (child, index) => {
+  const { onClick = noop } = child.props;
+  const value = `${groupValue}:${index}`;
+  let isSelected;
+  if (singleSelect)
+    isSelected = selectedItems === value;
+  else if (isMulti)
+    isSelected = selectedItems.includes(value);
+  return React2.cloneElement(child, {
+    value,
+    key: "group.".concat(index),
+    isGroup: true,
+    isMulti,
+    singleSelect,
+    isSelected,
+    onClick: (e) => onClick(e, __spreadValues({ value }, child.props))
+  });
+})));
+const props = {
+  title: PropTypes.string.isRequired.description("group title"),
+  children: PropTypes.arrayOf(PropTypes.element).isRequired.description("Array of MobileContextMenuItem"),
+  isMulti: PropTypes.bool.description("multi select"),
+  singleSelect: PropTypes.bool.description("single select"),
+  value: PropTypes.string.description("value for select"),
+  selectedItems: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).description("selected items, array for multi, string for single")
+};
+DSMobileContextMenuGroup.propTypes = props;
+DSMobileContextMenuGroup.componentType = "DSMobileContextMenuGroup";
+const DSMobileContextMenuGroupWithSchema = describe(DSMobileContextMenuGroup);
+DSMobileContextMenuGroupWithSchema.propTypes = props;
+export {
+  DSMobileContextMenuGroup,
+  DSMobileContextMenuGroupWithSchema
+};
+//# sourceMappingURL=MobileContextMenuGroup.js.map

package/dist/esm/MobileContextMenu/MobileContextMenuGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenuGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { noop } from 'lodash';\nimport { PropTypes, describe } from 'react-desc';\n\nconst Title = styled.div`\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  border-top: 1px solid ${(props) => props.theme.colors.brand['300']};\n  background: ${(props) => props.theme.colors.brand['200']};\n  padding: 0 ${(props) => props.theme.space.xs};\n  color: ${(props) => props.theme.colors.neutral['700']};\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n`;\n\nconst DSMobileContextMenuGroup = ({ title, isMulti, singleSelect, children, value: groupValue, selectedItems }) => (\n  <Grid>\n    <Grid>\n      <Title>{title}</Title>\n    </Grid>\n    <Grid>\n      {React.Children.map(children, (child, index) => {\n        const { onClick = noop } = child.props;\n        const value = `${groupValue}:${index}`;\n        let isSelected;\n        if (singleSelect) isSelected = selectedItems === value;\n        else if (isMulti) isSelected = selectedItems.includes(value);\n        return React.cloneElement(child, {\n          value,\n          key: 'group.'.concat(index),\n          isGroup: true,\n          isMulti,\n          singleSelect,\n          isSelected,\n          onClick: (e) => onClick(e, { value, ...child.props }),\n        });\n      })}\n    </Grid>\n  </Grid>\n);\n\nconst props = {\n  /**\n   * Group title\n   */\n  title: PropTypes.string.isRequired.description('group title'),\n  /**\n   *  Array of MobileContextMenuItem\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Array of MobileContextMenuItem'),\n  /** multi select */\n  isMulti: PropTypes.bool.description('multi select'),\n  /** single select */\n  singleSelect: PropTypes.bool.description('single select'),\n  /** value for select */\n  value: PropTypes.string.description('value for select'),\n  /** selected items, array for multi, string for single */\n  selectedItems: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).description(\n    'selected items, array for multi, string for single',\n  ),\n};\n\nDSMobileContextMenuGroup.propTypes = props;\nDSMobileContextMenuGroup.componentType = 'DSMobileContextMenuGroup';\n\nconst DSMobileContextMenuGroupWithSchema = describe(DSMobileContextMenuGroup);\n\nDSMobileContextMenuGroupWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuGroup, DSMobileContextMenuGroupWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEA,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,0BAIK,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,gBAC9C,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,eACrC,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,WACjC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,iBAChC,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA;AAGpD,MAAM,2BAA2B,CAAC,EAAE,OAAO,SAAS,cAAc,UAAU,OAAO,YAAY,oBAC7F,qCAAC,MAAD,MACE,qCAAC,MAAD,MACE,qCAAC,OAAD,MAAQ,SAEV,qCAAC,MAAD,MACG,OAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC9C,QAAM,EAAE,UAAU,SAAS,MAAM;AACjC,QAAM,QAAQ,GAAG,cAAc;AAC/B,MAAI;AACJ,MAAI;AAAc,iBAAa,kBAAkB;AAAA,WACxC;AAAS,iBAAa,cAAc,SAAS;AACtD,SAAO,OAAM,aAAa,OAAO;AAAA,IAC/B;AAAA,IACA,KAAK,SAAS,OAAO;AAAA,IACrB,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,CAAC,MAAM,QAAQ,GAAG,iBAAE,SAAU,MAAM;AAAA;AAAA;AAOvD,MAAM,QAAQ;AAAA,EAIZ,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAI/C,UAAU,UAAU,QAAQ,UAAU,SAAS,WAAW,YAAY;AAAA,EAEtE,SAAS,UAAU,KAAK,YAAY;AAAA,EAEpC,cAAc,UAAU,KAAK,YAAY;AAAA,EAEzC,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,eAAe,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,SAAS,YACtE;AAAA;AAIJ,yBAAyB,YAAY;AACrC,yBAAyB,gBAAgB;AAEzC,MAAM,qCAAqC,SAAS;AAEpD,mCAAmC,YAAY;",
+  "names": []
+}

package/dist/esm/MobileContextMenu/MobileContextMenuItem.js

@@ -0,0 +1,137 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2 from "react";
+import { PropTypes, describe } from "react-desc";
+import { Grid } from "@elliemae/ds-grid";
+import styled from "styled-components";
+import { truncate } from "@elliemae/ds-system";
+import GroupItem from "@elliemae/ds-shared/GroupContext/GroupItem";
+import { DSCheckbox } from "@elliemae/ds-form";
+import { Checkmark } from "@elliemae/ds-icons";
+import { DSMobileTouchable } from "../MobileTouchable";
+const Wrap = styled((props2) => /* @__PURE__ */ React2.createElement(DSMobileTouchable, __spreadValues({}, props2)))`
+  border-bottom: none;
+`;
+const PropWrap = styled((props2) => /* @__PURE__ */ React2.createElement(Grid, __spreadValues({}, props2)))`
+  ${(props2) => {
+  if (!props2.isMulti) {
+    return `
+      & > span {
+        height: 18px;
+        width: 18px;
+      }
+
+      & > span > svg {
+        height: 18px;
+        width: 18px;
+      }
+      `;
+  }
+  return "";
+}}
+`;
+const Title = styled.span`
+  font-size: 16px;
+  color: ${(props2) => props2.theme.colors.brand["600"]};
+  ${truncate()}
+`;
+const Label = styled.span`
+  font-size: 13px;
+  color: ${(props2) => props2.theme.colors.neutral["600"]};
+`;
+const CheckMark = styled(Checkmark)`
+  fill: ${(props2) => props2.theme.colors.brand["600"]};
+`;
+const DSMobileContextMenuItem = ({
+  label,
+  title,
+  leftProp,
+  isGroup,
+  isMulti,
+  singleSelect,
+  isSelected,
+  onClick = () => {
+  },
+  value
+}) => /* @__PURE__ */ React2.createElement(GroupItem, {
+  render: (context) => {
+    const { activeValue } = context;
+    let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);
+    if (isGroup)
+      someItemSelected = typeof activeValue === "string";
+    let showLeftAddon = isSelected;
+    if (isMulti || !singleSelect)
+      showLeftAddon = true;
+    let leftAddon = leftProp || null;
+    if (isMulti)
+      leftAddon = /* @__PURE__ */ React2.createElement(DSCheckbox, {
+        checked: isSelected,
+        "data-testid": "leftAddon-checkbox"
+      });
+    if (singleSelect)
+      leftAddon = /* @__PURE__ */ React2.createElement(CheckMark, {
+        "data-testid": "leftAddon-checkmark"
+      });
+    return /* @__PURE__ */ React2.createElement(Wrap, {
+      "data-testid": "ds-contextmenu-item",
+      onClick: (e) => {
+        if (singleSelect || isMulti)
+          context.onChange(value, e, { value, label, title });
+        onClick(e);
+      },
+      cols: singleSelect && someItemSelected || leftAddon && !singleSelect || isMulti ? ["40px", "auto"] : ["auto"]
+    }, (singleSelect && someItemSelected || isMulti || leftAddon) && /* @__PURE__ */ React2.createElement(PropWrap, {
+      "data-testid": "left-addon",
+      isMulti,
+      alignItems: "center",
+      justifyContent: "center",
+      pl: "16px"
+    }, showLeftAddon && leftAddon), /* @__PURE__ */ React2.createElement(Grid, {
+      height: "44px",
+      pr: "xs",
+      pl: !leftAddon && isGroup ? "24px" : "xs"
+    }, label && /* @__PURE__ */ React2.createElement(Grid, {
+      alignItems: "center"
+    }, /* @__PURE__ */ React2.createElement(Label, {
+      "data-testid": "contextMenuItem-label"
+    }, label)), /* @__PURE__ */ React2.createElement(Grid, {
+      alignItems: !label ? "center" : void 0
+    }, /* @__PURE__ */ React2.createElement(Title, {
+      "data-testid": "contextMenuItem-title"
+    }, title))));
+  }
+});
+const props = {
+  label: PropTypes.string.description("label"),
+  title: PropTypes.string.isRequired.description("menu item title"),
+  leftProp: PropTypes.element.description(""),
+  isMulti: PropTypes.bool.description("multi select"),
+  singleSelect: PropTypes.bool.description(""),
+  isGroup: PropTypes.bool.description(""),
+  onClick: PropTypes.func.description("on click handler"),
+  value: PropTypes.number.description("value for select"),
+  isSelected: PropTypes.bool.description("selected value")
+};
+DSMobileContextMenuItem.propTypes = props;
+const DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);
+DSMobileContextMenuItemWithSchema.propTypes = props;
+export {
+  DSMobileContextMenuItem,
+  DSMobileContextMenuItemWithSchema
+};
+//# sourceMappingURL=MobileContextMenuItem.js.map

package/dist/esm/MobileContextMenu/MobileContextMenuItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/MobileContextMenuItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable import/no-unresolved */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport { truncate } from '@elliemae/ds-system';\nimport GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { DSMobileTouchable } from '../MobileTouchable';\n\nconst Wrap = styled((props) => <DSMobileTouchable {...props} />)`\n  border-bottom: none;\n`;\n\nconst PropWrap = styled((props) => <Grid {...props} />)`\n  ${(props) => {\n    if (!props.isMulti) {\n      return `\n      & > span {\n        height: 18px;\n        width: 18px;\n      }\n\n      & > span > svg {\n        height: 18px;\n        width: 18px;\n      }\n      `;\n    }\n    return '';\n  }}\n`;\n\nconst Title = styled.span`\n  font-size: 16px;\n  color: ${(props) => props.theme.colors.brand['600']};\n  ${truncate()}\n`;\n\nconst Label = styled.span`\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral['600']};\n`;\n\nconst CheckMark = styled(Checkmark)`\n  fill: ${(props) => props.theme.colors.brand['600']};\n`;\ninterface DSMobileContextMenuItemPropsT {\n  label: string;\n  title: string;\n  leftProp: JSX.Element;\n  isGroup: boolean;\n  isMulti: boolean;\n  isSelected: boolean;\n  singleSelect: boolean;\n  onClick: (e: any) => void;\n  value: string;\n}\nconst DSMobileContextMenuItem = ({\n  label,\n  title,\n  leftProp,\n  isGroup,\n  isMulti,\n  singleSelect,\n  isSelected,\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  onClick = () => {},\n  value,\n}: DSMobileContextMenuItemPropsT): JSX.Element => (\n  <GroupItem\n    render={(context) => {\n      const { activeValue } = context;\n      let someItemSelected = activeValue >= 0 && !Array.isArray(activeValue);\n      if (isGroup) someItemSelected = typeof activeValue === 'string';\n\n      let showLeftAddon = isSelected;\n      if (isMulti || !singleSelect) showLeftAddon = true;\n\n      let leftAddon = leftProp || null;\n      if (isMulti) leftAddon = <DSCheckbox checked={isSelected} data-testid=\"leftAddon-checkbox\" />;\n      if (singleSelect) leftAddon = <CheckMark data-testid=\"leftAddon-checkmark\" />;\n\n      return (\n        <Wrap\n          data-testid=\"ds-contextmenu-item\"\n          onClick={(e) => {\n            if (singleSelect || isMulti) context.onChange(value, e, { value, label, title });\n            onClick(e);\n          }}\n          cols={\n            (singleSelect && someItemSelected) || (leftAddon && !singleSelect) || isMulti ? ['40px', 'auto'] : ['auto']\n          }\n        >\n          {((singleSelect && someItemSelected) || isMulti || leftAddon) && (\n            <PropWrap data-testid=\"left-addon\" isMulti={isMulti} alignItems=\"center\" justifyContent=\"center\" pl=\"16px\">\n              {showLeftAddon && leftAddon}\n            </PropWrap>\n          )}\n          <Grid height=\"44px\" pr=\"xs\" pl={!leftAddon && isGroup ? '24px' : 'xs'}>\n            {label && (\n              <Grid alignItems=\"center\">\n                <Label data-testid=\"contextMenuItem-label\">{label}</Label>\n              </Grid>\n            )}\n            <Grid alignItems={!label ? 'center' : undefined}>\n              <Title data-testid=\"contextMenuItem-title\">{title}</Title>\n            </Grid>\n          </Grid>\n        </Wrap>\n      );\n    }}\n  />\n);\n\nconst props = {\n  /** label */\n  label: PropTypes.string.description('label'),\n  /** menu item title */\n  title: PropTypes.string.isRequired.description('menu item title'),\n  /**  */\n  leftProp: PropTypes.element.description(''),\n  /** multi select */\n  isMulti: PropTypes.bool.description('multi select'),\n  /**  */\n  singleSelect: PropTypes.bool.description(''),\n  /**  */\n  isGroup: PropTypes.bool.description(''),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  /** value for select */\n  value: PropTypes.number.description('value for select'),\n  /** selected value */\n  isSelected: PropTypes.bool.description('selected value'),\n};\n\nDSMobileContextMenuItem.propTypes = props;\n\nconst DSMobileContextMenuItemWithSchema = describe(DSMobileContextMenuItem);\n\nDSMobileContextMenuItemWithSchema.propTypes = props;\n\nexport { DSMobileContextMenuItem, DSMobileContextMenuItemWithSchema };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,OAAO,OAAO,CAAC,WAAU,qCAAC,mBAAD,mBAAuB;AAAA;AAAA;AAItD,MAAM,WAAW,OAAO,CAAC,WAAU,qCAAC,MAAD,mBAAU;AAAA,IACzC,CAAC,WAAU;AACX,MAAI,CAAC,OAAM,SAAS;AAClB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYT,SAAO;AAAA;AAAA;AAIX,MAAM,QAAQ,OAAO;AAAA;AAAA,WAEV,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA,IAC3C;AAAA;AAGJ,MAAM,QAAQ,OAAO;AAAA;AAAA,WAEV,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA;AAGjD,MAAM,YAAY,OAAO;AAAA,UACf,CAAC,WAAU,OAAM,MAAM,OAAO,MAAM;AAAA;AAa9C,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,UAAU,MAAM;AAAA;AAAA,EAChB;AAAA,MAEA,qCAAC,WAAD;AAAA,EACE,QAAQ,CAAC,YAAY;AACnB,UAAM,EAAE,gBAAgB;AACxB,QAAI,mBAAmB,eAAe,KAAK,CAAC,MAAM,QAAQ;AAC1D,QAAI;AAAS,yBAAmB,OAAO,gBAAgB;AAEvD,QAAI,gBAAgB;AACpB,QAAI,WAAW,CAAC;AAAc,sBAAgB;AAE9C,QAAI,YAAY,YAAY;AAC5B,QAAI;AAAS,kBAAY,qCAAC,YAAD;AAAA,QAAY,SAAS;AAAA,QAAY,eAAY;AAAA;AACtE,QAAI;AAAc,kBAAY,qCAAC,WAAD;AAAA,QAAW,eAAY;AAAA;AAErD,WACE,qCAAC,MAAD;AAAA,MACE,eAAY;AAAA,MACZ,SAAS,CAAC,MAAM;AACd,YAAI,gBAAgB;AAAS,kBAAQ,SAAS,OAAO,GAAG,EAAE,OAAO,OAAO;AACxE,gBAAQ;AAAA;AAAA,MAEV,MACG,gBAAgB,oBAAsB,aAAa,CAAC,gBAAiB,UAAU,CAAC,QAAQ,UAAU,CAAC;AAAA,OAGnG,iBAAgB,oBAAqB,WAAW,cACjD,qCAAC,UAAD;AAAA,MAAU,eAAY;AAAA,MAAa;AAAA,MAAkB,YAAW;AAAA,MAAS,gBAAe;AAAA,MAAS,IAAG;AAAA,OACjG,iBAAiB,YAGtB,qCAAC,MAAD;AAAA,MAAM,QAAO;AAAA,MAAO,IAAG;AAAA,MAAK,IAAI,CAAC,aAAa,UAAU,SAAS;AAAA,OAC9D,SACC,qCAAC,MAAD;AAAA,MAAM,YAAW;AAAA,OACf,qCAAC,OAAD;AAAA,MAAO,eAAY;AAAA,OAAyB,SAGhD,qCAAC,MAAD;AAAA,MAAM,YAAY,CAAC,QAAQ,WAAW;AAAA,OACpC,qCAAC,OAAD;AAAA,MAAO,eAAY;AAAA,OAAyB;AAAA;AAAA;AAS1D,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,OAAO,UAAU,OAAO,WAAW,YAAY;AAAA,EAE/C,UAAU,UAAU,QAAQ,YAAY;AAAA,EAExC,SAAS,UAAU,KAAK,YAAY;AAAA,EAEpC,cAAc,UAAU,KAAK,YAAY;AAAA,EAEzC,SAAS,UAAU,KAAK,YAAY;AAAA,EAEpC,SAAS,UAAU,KAAK,YAAY;AAAA,EAEpC,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,YAAY,UAAU,KAAK,YAAY;AAAA;AAGzC,wBAAwB,YAAY;AAEpC,MAAM,oCAAoC,SAAS;AAEnD,kCAAkC,YAAY;",
+  "names": []
+}

package/dist/esm/MobileContextMenu/index.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+export * from "./MobileContextMenu";
+export * from "./MobileContextMenuItem";
+export * from "./MobileContextMenuGroup";
+//# sourceMappingURL=index.js.map

package/dist/esm/MobileContextMenu/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileContextMenu/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './MobileContextMenu';\nexport * from './MobileContextMenuItem';\nexport * from './MobileContextMenuGroup';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;",
+  "names": []
+}

package/dist/esm/MobileDatePicker/Input.js

@@ -0,0 +1,79 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2 from "react";
+import styled from "styled-components";
+import { focus, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
+const StyledInput = styled.input`
+  input[type=date]& {   
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    appearance: none;
+    color: transparent;
+
+    white-space: nowrap;
+    position: relative;
+    height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};
+    width: 100%;
+    max-width: calc(100% - 32px);
+    outline: none;
+    box-sizing: border-box;
+    display: flex;
+    background: ${(props) => props.theme.colors.neutral["000"]};
+    padding: 0 ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};
+    z-index: 1;
+    border-radius: 2px;
+    border: solid 1px ${(props) => props.theme.colors.neutral[200]};
+  }
+
+  input[type=date]&:active, input[type=date]&:focus {
+    ${(props) => focus(props.theme.colors.brand[700])}
+  }
+
+  &:before {
+    color: ${(props) => props.value === "" ? props.theme.colors.neutral["500"] : props.theme.colors.neutral["800"]};
+    content: '${(props) => props.value === "" ? props.placeholder : props["data-displayvalue"]}';
+  }
+
+  input[type=date]&::-webkit-datetime-edit, input[type=date]&::-webkit-inner-spin-button, input[type=date]&::-webkit-clear-button {
+    -webkit-appearance: none;
+    display: none;
+  }
+`;
+const Input = (_a) => {
+  var _b = _a, { innerRef } = _b, props = __objRest(_b, ["innerRef"]);
+  return /* @__PURE__ */ React2.createElement(StyledInput, __spreadValues({
+    ref: innerRef
+  }, props));
+};
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

package/dist/esm/MobileDatePicker/Input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MobileDatePicker/Input.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\nimport { focus, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nconst StyledInput = styled.input`\n  input[type=date]& {   \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    -webkit-tap-highlight-color: transparent;\n    appearance: none;\n    color: transparent;\n\n    white-space: nowrap;\n    position: relative;\n    height: ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l)};\n    width: 100%;\n    max-width: calc(100% - 32px);\n    outline: none;\n    box-sizing: border-box;\n    display: flex;\n    background: ${props => props.theme.colors.neutral['000']};\n    padding: 0 ${props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n    z-index: 1;\n    border-radius: 2px;\n    border: solid 1px ${props => props.theme.colors.neutral[200]};\n  }\n\n  input[type=date]&:active, input[type=date]&:focus {\n    ${props => focus(props.theme.colors.brand[700])}\n  }\n\n  &:before {\n    color: ${props =>\n      props.value === ''\n        ? props.theme.colors.neutral['500']\n        : props.theme.colors.neutral['800']};\n    content: '${props =>\n      props.value === '' ? props.placeholder : props['data-displayvalue']}';\n  }\n\n  input[type=date]&::-webkit-datetime-edit, input[type=date]&::-webkit-inner-spin-button, input[type=date]&::-webkit-clear-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n`;\n\nexport const Input = ({ innerRef, ...props }) => (\n  <StyledInput ref={innerRef} {...props} />\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUb,WAAS,yBAAyB,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMhD,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,iBACrC,WAAS,yBAAyB,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,wBAG7C,WAAS,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,MAItD,WAAS,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA,aAIjC,WACP,MAAM,UAAU,KACZ,MAAM,MAAM,OAAO,QAAQ,SAC3B,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACrB,WACV,MAAM,UAAU,KAAK,MAAM,cAAc,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9C,MAAM,QAAQ,CAAC,OAAwB;AAAxB,eAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACtB,8CAAC,aAAD;AAAA,IAAa,KAAK;AAAA,KAAc;AAAA;",
+  "names": []
+}

package/dist/esm/MobileDatePicker/MobileDatePicker.js

@@ -0,0 +1,71 @@
+import * as React from "react";
+import React2, { useRef, useEffect } from "react";
+import { PropTypes, describe } from "react-desc";
+import { DSIconColors } from "@elliemae/ds-icon";
+import { DatePicker } from "@elliemae/ds-icons";
+import DSButton from "@elliemae/ds-button";
+import { DSInputGroup } from "@elliemae/ds-form";
+import { Input } from "./Input";
+const DSMobileDatePicker = ({ disabled, value, tabIndex, placeholder, onChange }) => {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.defaultValue = "";
+    }
+  }, [inputRef.current]);
+  const valueArr = value.split("-");
+  const displayValue = value && `${valueArr[1]} / ${valueArr[2]} / ${valueArr[0]}`;
+  return /* @__PURE__ */ React2.createElement(DSInputGroup, {
+    rightAddon: /* @__PURE__ */ React2.createElement(DSButton, {
+      "aria-label": "Date Picker Button",
+      color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
+      disabled,
+      icon: /* @__PURE__ */ React2.createElement(DatePicker, null),
+      type: "button",
+      buttonType: "secondary",
+      onClick: () => {
+        inputRef.current.focus();
+        inputRef.current.click();
+      }
+    })
+  }, /* @__PURE__ */ React2.createElement(Input, {
+    "data-testid": "ds-mobile-date-picker",
+    innerRef: inputRef,
+    "aria-label": "Date Picker Input Mask",
+    disabled,
+    onKeyDown: (e) => e.preventDefault(),
+    type: "date",
+    placeholder,
+    onChange: (e) => {
+      const { target } = e.nativeEvent;
+      function iosClearDefault() {
+        target.defaultValue = "";
+      }
+      window.setTimeout(iosClearDefault, 0);
+      onChange(e);
+    },
+    tabIndex,
+    value,
+    "data-displayvalue": displayValue
+  }));
+};
+DSMobileDatePicker.defaultProps = {
+  disabled: false,
+  tabIndex: 0,
+  placeholder: "MM / DD / YYYY"
+};
+const props = {
+  disabled: PropTypes.bool.description("defaults to false"),
+  tabIndex: PropTypes.number.description("0 as default"),
+  placeholder: PropTypes.string.description("MM / DD / YYYY as default"),
+  onChange: PropTypes.func.description("onChange handler, receives change event as first argument"),
+  value: PropTypes.string.description("ISO8601 string representing the date in format YYYY-MM-DD or empty string")
+};
+DSMobileDatePicker.propTypes = props;
+const DSMobileDatePickerWithSchema = describe(DSMobileDatePicker);
+DSMobileDatePickerWithSchema.propTypes = props;
+export {
+  DSMobileDatePicker,
+  DSMobileDatePickerWithSchema
+};
+//# sourceMappingURL=MobileDatePicker.js.map