@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/DatePicker/index.js

@@ -1 +1,117 @@
-import{__rest as o,__assign as s}from'./../../ext-esm/tslib/tslib.es6.js';import{jsx as i}from"react/jsx-runtime";import c from"classnames";import t from"prop-types";import{KeyboardDatePicker as r}from"@material-ui/pickers";import{makeStyles as n}from"@material-ui/core";import e from"moment";import{DATE_FORMAT as m}from"../../constants/dateTimeFormat.js";import{CalendarIcon as a,RightIcon as p,LeftIcon as u}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/Gap.js";var l=n((function(o){return{dateTimePickerInput:{width:"100%",paddingBottom:8,"& .MuiFormLabel-root.Mui-focused":{color:o.palette.primary.main},"& .MuiInput-root.Mui-focused  .MuiIconButton-root":{color:o.palette.primary.main},"&:hover .MuiIconButton-root":{color:o.palette.primary.contrastText},"& .MuiIconButton-root":{borderRadius:8,color:o.palette.primary.text6,fontSize:"unset",marginRight:-3,marginBottom:-8,padding:6,"&:hover":{backgroundColor:"rgba(255, 255, 255, 0.16)"}},"& .MuiIconButton-root > span > span svg":{fill:"transparent !important"}},paper:{marginTop:8}}})),d=function(t){var n,d,I=t.className,j=t.PopoverProps,f=o(t,["className","PopoverProps"]),h=l();return i(r,s({disableToolbar:!0,variant:"inline",keyboardIcon:i(a,{size:16}),rightArrowIcon:i(p,{size:24}),leftArrowIcon:i(u,{size:24}),format:m,placeholder:e().format(m),refuse:/[^(\w|\d)]+/gi,maxDate:null!==(n=f.maxDate)&&void 0!==n?n:void 0,minDate:null!==(d=f.minDate)&&void 0!==d?d:void 0},f,{PopoverProps:s({className:c(h.paper,j.className)},j),className:c(h.dateTimePickerInput,I)}))};d.propTypes={PopoverProps:t.shape({className:t.string}),className:t.string},d.defaultProps={PopoverProps:{},className:""};export{d as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { KeyboardDatePicker } from '@material-ui/pickers';
+import { makeStyles } from '@material-ui/core';
+import moment from 'moment';
+import { DATE_FORMAT } from '../../constants/dateTimeFormat.js';
+import { CalendarIcon, RightIcon, LeftIcon } from '../../icons/iconParkIcons.js';
+import '../../icons/customIcons/icons/AddMessage.js';
+import '../../icons/customIcons/icons/Attention.js';
+import '../../icons/customIcons/icons/Collapse.js';
+import '../../icons/customIcons/icons/Dashboard.js';
+import '../../icons/customIcons/icons/Expand.js';
+import '../../icons/customIcons/icons/FolderClosed.js';
+import '../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../icons/customIcons/icons/FolderOpened.js';
+import '../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../icons/customIcons/icons/LessOrEqual.js';
+import '../../icons/customIcons/icons/Search.js';
+import '../../icons/customIcons/icons/Wellhub.js';
+import '../../icons/customIcons/icons/MultiRuler.js';
+import '../../icons/customIcons/icons/Checkbox.js';
+import '../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../icons/customIcons/icons/Radio.js';
+import '../../icons/customIcons/icons/RadioChecked.js';
+import '../../icons/customIcons/icons/SimulFrac.js';
+import '../../icons/customIcons/icons/ZipperFrac.js';
+import '../../icons/customIcons/icons/CautionFilled.js';
+import '../../icons/customIcons/icons/MoreApp.js';
+import '../../icons/customIcons/icons/Pad.js';
+import '../../icons/customIcons/icons/Gap.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["className", "PopoverProps"];
+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; }
+var useStyles = makeStyles(function (theme) {
+  return {
+    dateTimePickerInput: {
+      width: '100%',
+      paddingBottom: 8,
+      '& .MuiFormLabel-root.Mui-focused': {
+        color: theme.palette.primary.main
+      },
+      '& .MuiInput-root.Mui-focused  .MuiIconButton-root': {
+        color: theme.palette.primary.main
+      },
+      '&:hover .MuiIconButton-root': {
+        color: theme.palette.primary.contrastText
+      },
+      '& .MuiIconButton-root': {
+        borderRadius: 8,
+        color: theme.palette.primary.text6,
+        fontSize: 'unset',
+        marginRight: -3,
+        marginBottom: -8,
+        padding: 6,
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.16)'
+        }
+      },
+      '& .MuiIconButton-root > span > span svg': {
+        fill: 'transparent !important'
+      }
+    },
+    paper: {
+      marginTop: 8
+    }
+  };
+});
+var DatePicker = function DatePicker(_ref) {
+  var _otherProps$maxDate, _otherProps$minDate;
+  var className = _ref.className,
+    PopoverProps = _ref.PopoverProps,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var styles = useStyles();
+  return /*#__PURE__*/jsx(KeyboardDatePicker, _objectSpread(_objectSpread({
+    disableToolbar: true,
+    variant: "inline",
+    keyboardIcon: /*#__PURE__*/jsx(CalendarIcon, {
+      size: 16
+    }),
+    rightArrowIcon: /*#__PURE__*/jsx(RightIcon, {
+      size: 24
+    }),
+    leftArrowIcon: /*#__PURE__*/jsx(LeftIcon, {
+      size: 24
+    }),
+    format: DATE_FORMAT,
+    placeholder: moment().format(DATE_FORMAT),
+    refuse: /[^(\w|\d)]+/gi
+    // Even though the type of maxDate and minDate allows null, it leads to an error during parsing date
+    ,
+    maxDate: (_otherProps$maxDate = otherProps.maxDate) !== null && _otherProps$maxDate !== void 0 ? _otherProps$maxDate : undefined,
+    minDate: (_otherProps$minDate = otherProps.minDate) !== null && _otherProps$minDate !== void 0 ? _otherProps$minDate : undefined
+  }, otherProps), {}, {
+    PopoverProps: _objectSpread({
+      className: classNames(styles.paper, PopoverProps.className)
+    }, PopoverProps),
+    className: classNames(styles.dateTimePickerInput, className)
+  }));
+};
+DatePicker.propTypes = {
+  PopoverProps: PropTypes.shape({
+    className: PropTypes.string
+  }),
+  className: PropTypes.string
+};
+DatePicker.defaultProps = {
+  PopoverProps: {},
+  className: ''
+};
+
+export { DatePicker as default };
+//# sourceMappingURL=index.js.map

package/components/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/DatePicker/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport { KeyboardDatePicker, KeyboardDatePickerProps } from '@material-ui/pickers';\nimport { makeStyles } from '@material-ui/core';\nimport moment from 'moment';\nimport { DATE_FORMAT } from '../../constants/dateTimeFormat';\nimport { CalendarIcon, LeftIcon, RightIcon } from '~/icons';\n\nconst useStyles = makeStyles(theme => ({\n  dateTimePickerInput: {\n    width: '100%',\n    paddingBottom: 8,\n    '& .MuiFormLabel-root.Mui-focused': {\n      color: theme.palette.primary.main,\n    },\n    '& .MuiInput-root.Mui-focused  .MuiIconButton-root': {\n      color: theme.palette.primary.main,\n    },\n    '&:hover .MuiIconButton-root': {\n      color: theme.palette.primary.contrastText,\n    },\n    '& .MuiIconButton-root': {\n      borderRadius: 8,\n      color: theme.palette.primary.text6,\n      fontSize: 'unset',\n      marginRight: -3,\n      marginBottom: -8,\n      padding: 6,\n      '&:hover': {\n        backgroundColor: 'rgba(255, 255, 255, 0.16)',\n      },\n    },\n    '& .MuiIconButton-root > span > span svg': {\n      fill: 'transparent !important',\n    },\n  },\n  paper: {\n    marginTop: 8,\n  },\n}));\n\ninterface DatePickerProps extends KeyboardDatePickerProps {\n  className: string;\n}\n\nconst DatePicker = ({ className, PopoverProps, ...otherProps }: DatePickerProps): JSX.Element => {\n  const styles = useStyles();\n\n  return (\n    <KeyboardDatePicker\n      disableToolbar\n      variant=\"inline\"\n      keyboardIcon={<CalendarIcon size={16} />}\n      rightArrowIcon={<RightIcon size={24} />}\n      leftArrowIcon={<LeftIcon size={24} />}\n      format={DATE_FORMAT}\n      placeholder={moment().format(DATE_FORMAT)}\n      refuse={/[^(\\w|\\d)]+/gi}\n      // Even though the type of maxDate and minDate allows null, it leads to an error during parsing date\n      maxDate={otherProps.maxDate ?? undefined}\n      minDate={otherProps.minDate ?? undefined}\n      {...otherProps}\n      PopoverProps={{\n        className: classNames(styles.paper, PopoverProps.className),\n        ...PopoverProps,\n      }}\n      className={classNames(styles.dateTimePickerInput, className)}\n    />\n  );\n};\n\nDatePicker.propTypes = {\n  PopoverProps: PropTypes.shape({\n    className: PropTypes.string,\n  }),\n  className: PropTypes.string,\n};\n\nDatePicker.defaultProps = {\n  PopoverProps: {},\n  className: '',\n};\n\nexport default DatePicker;\n"],"names":["useStyles","makeStyles","theme","dateTimePickerInput","width","paddingBottom","color","palette","primary","main","contrastText","borderRadius","text6","fontSize","marginRight","marginBottom","padding","backgroundColor","fill","paper","marginTop","DatePicker","className","PopoverProps","otherProps","styles","_jsx","DATE_FORMAT","moment","format","maxDate","undefined","minDate","classNames","propTypes","PropTypes","shape","string","defaultProps"],"mappings":"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"}

package/components/DateTimePicker/index.js

@@ -1 +1,124 @@
-import{__rest as o,__assign as s}from'./../../ext-esm/tslib/tslib.es6.js';import{jsx as i}from"react/jsx-runtime";import t from"classnames";import c from"prop-types";import r from"moment";import{KeyboardDateTimePicker as n}from"@material-ui/pickers";import{makeStyles as m}from"@material-ui/core";import{CalendarIcon as e,TimeIcon as a,RightIcon as p,LeftIcon as u}from"../../icons/iconParkIcons.js";import"../../icons/customIcons/icons/AddMessage.js";import"../../icons/customIcons/icons/Attention.js";import"../../icons/customIcons/icons/Collapse.js";import"../../icons/customIcons/icons/Dashboard.js";import"../../icons/customIcons/icons/Expand.js";import"../../icons/customIcons/icons/FolderClosed.js";import"../../icons/customIcons/icons/FolderClosedFilled.js";import"../../icons/customIcons/icons/FolderOpened.js";import"../../icons/customIcons/icons/GreaterOrEqual.js";import"../../icons/customIcons/icons/LessOrEqual.js";import"../../icons/customIcons/icons/Search.js";import"../../icons/customIcons/icons/Wellhub.js";import"../../icons/customIcons/icons/MultiRuler.js";import"../../icons/customIcons/icons/Checkbox.js";import"../../icons/customIcons/icons/CheckboxChecked.js";import"../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../icons/customIcons/icons/Radio.js";import"../../icons/customIcons/icons/RadioChecked.js";import"../../icons/customIcons/icons/SimulFrac.js";import"../../icons/customIcons/icons/ZipperFrac.js";import"../../icons/customIcons/icons/CautionFilled.js";import"../../icons/customIcons/icons/MoreApp.js";import"../../icons/customIcons/icons/Pad.js";import"../../icons/customIcons/icons/Gap.js";import{DATE_TIME_FORMAT as l}from"../../constants/dateTimeFormat.js";var d=m((function(o){return{dateTimePickerInput:{width:"100%",paddingBottom:8,"& .MuiFormLabel-root.Mui-focused":{color:o.palette.primary.main},"& .MuiInput-root.Mui-focused  .MuiIconButton-root":{color:o.palette.primary.main},"&:hover .MuiIconButton-root":{color:o.palette.primary.contrastText},"& .MuiIconButton-root":{color:o.palette.primary.text6,borderRadius:8,fontSize:"unset",marginRight:-3,marginBottom:-8,padding:6,"&:hover":{backgroundColor:"rgba(255, 255, 255, 0.16)"}},"& .MuiIconButton-root > span > span svg":{fill:"transparent !important"}},paper:{marginTop:8}}}));function I(c){var m,l,I=c.className,j=c.PopoverProps,f=c.format,g=o(c,["className","PopoverProps","format"]),h=d();return i(n,s({dateRangeIcon:i(e,{size:24}),timeIcon:i(a,{size:24}),rightArrowIcon:i(p,{size:24}),leftArrowIcon:i(u,{size:24}),keyboardIcon:i(e,{size:16}),format:f,refuse:/[^(\w|\d)]+/gi,placeholder:r().format(f),maxDate:null!==(m=g.maxDate)&&void 0!==m?m:void 0,minDate:null!==(l=g.minDate)&&void 0!==l?l:void 0},g,{PopoverProps:s({className:h.paper},j),className:t(h.dateTimePickerInput,I)}))}I.propTypes={className:c.string,PopoverProps:c.shape({className:c.string}),format:c.string},I.defaultProps={className:"",PopoverProps:{},format:l};export{I as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import { makeStyles } from '@material-ui/core';
+import { CalendarIcon, TimeIcon, RightIcon, LeftIcon } from '../../icons/iconParkIcons.js';
+import '../../icons/customIcons/icons/AddMessage.js';
+import '../../icons/customIcons/icons/Attention.js';
+import '../../icons/customIcons/icons/Collapse.js';
+import '../../icons/customIcons/icons/Dashboard.js';
+import '../../icons/customIcons/icons/Expand.js';
+import '../../icons/customIcons/icons/FolderClosed.js';
+import '../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../icons/customIcons/icons/FolderOpened.js';
+import '../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../icons/customIcons/icons/LessOrEqual.js';
+import '../../icons/customIcons/icons/Search.js';
+import '../../icons/customIcons/icons/Wellhub.js';
+import '../../icons/customIcons/icons/MultiRuler.js';
+import '../../icons/customIcons/icons/Checkbox.js';
+import '../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../icons/customIcons/icons/Radio.js';
+import '../../icons/customIcons/icons/RadioChecked.js';
+import '../../icons/customIcons/icons/SimulFrac.js';
+import '../../icons/customIcons/icons/ZipperFrac.js';
+import '../../icons/customIcons/icons/CautionFilled.js';
+import '../../icons/customIcons/icons/MoreApp.js';
+import '../../icons/customIcons/icons/Pad.js';
+import '../../icons/customIcons/icons/Gap.js';
+import { DATE_TIME_FORMAT } from '../../constants/dateTimeFormat.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["className", "PopoverProps", "format"];
+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; }
+var useStyles = makeStyles(function (theme) {
+  return {
+    dateTimePickerInput: {
+      width: '100%',
+      paddingBottom: 8,
+      '& .MuiFormLabel-root.Mui-focused': {
+        color: theme.palette.primary.main
+      },
+      '& .MuiInput-root.Mui-focused  .MuiIconButton-root': {
+        color: theme.palette.primary.main
+      },
+      '&:hover .MuiIconButton-root': {
+        color: theme.palette.primary.contrastText
+      },
+      '& .MuiIconButton-root': {
+        color: theme.palette.primary.text6,
+        borderRadius: 8,
+        fontSize: 'unset',
+        marginRight: -3,
+        marginBottom: -8,
+        padding: 6,
+        '&:hover': {
+          backgroundColor: 'rgba(255, 255, 255, 0.16)'
+        }
+      },
+      '& .MuiIconButton-root > span > span svg': {
+        fill: 'transparent !important'
+      }
+    },
+    paper: {
+      marginTop: 8
+    }
+  };
+});
+function DateTimePicker(_ref) {
+  var _otherProps$maxDate, _otherProps$minDate;
+  var className = _ref.className,
+    PopoverProps = _ref.PopoverProps,
+    format = _ref.format,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var styles = useStyles();
+  return /*#__PURE__*/jsx(KeyboardDateTimePicker, _objectSpread(_objectSpread({
+    dateRangeIcon: /*#__PURE__*/jsx(CalendarIcon, {
+      size: 24
+    }),
+    timeIcon: /*#__PURE__*/jsx(TimeIcon, {
+      size: 24
+    }),
+    rightArrowIcon: /*#__PURE__*/jsx(RightIcon, {
+      size: 24
+    }),
+    leftArrowIcon: /*#__PURE__*/jsx(LeftIcon, {
+      size: 24
+    }),
+    keyboardIcon: /*#__PURE__*/jsx(CalendarIcon, {
+      size: 16
+    }),
+    format: format,
+    refuse: /[^(\w|\d)]+/gi,
+    placeholder: moment().format(format)
+    // Even though the type of maxDate and minDate allows null, it leads to an error during parsing date
+    ,
+    maxDate: (_otherProps$maxDate = otherProps.maxDate) !== null && _otherProps$maxDate !== void 0 ? _otherProps$maxDate : undefined,
+    minDate: (_otherProps$minDate = otherProps.minDate) !== null && _otherProps$minDate !== void 0 ? _otherProps$minDate : undefined
+  }, otherProps), {}, {
+    PopoverProps: _objectSpread({
+      className: styles.paper
+    }, PopoverProps),
+    className: classNames(styles.dateTimePickerInput, className)
+  }));
+}
+DateTimePicker.propTypes = {
+  className: PropTypes.string,
+  PopoverProps: PropTypes.shape({
+    className: PropTypes.string
+  }),
+  format: PropTypes.string
+};
+DateTimePicker.defaultProps = {
+  className: '',
+  PopoverProps: {},
+  format: DATE_TIME_FORMAT
+};
+
+export { DateTimePicker as default };
+//# sourceMappingURL=index.js.map

package/components/DateTimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/DateTimePicker/index.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\n\nimport { KeyboardDateTimePicker, KeyboardDateTimePickerProps } from '@material-ui/pickers';\nimport { makeStyles } from '@material-ui/core';\nimport { CalendarIcon, RightIcon, LeftIcon, TimeIcon } from '~/icons';\nimport { DATE_TIME_FORMAT } from '../../constants/dateTimeFormat';\n\nconst useStyles = makeStyles(theme => ({\n  dateTimePickerInput: {\n    width: '100%',\n    paddingBottom: 8,\n    '& .MuiFormLabel-root.Mui-focused': {\n      color: theme.palette.primary.main,\n    },\n    '& .MuiInput-root.Mui-focused  .MuiIconButton-root': {\n      color: theme.palette.primary.main,\n    },\n    '&:hover .MuiIconButton-root': {\n      color: theme.palette.primary.contrastText,\n    },\n    '& .MuiIconButton-root': {\n      color: theme.palette.primary.text6,\n      borderRadius: 8,\n      fontSize: 'unset',\n      marginRight: -3,\n      marginBottom: -8,\n      padding: 6,\n      '&:hover': {\n        backgroundColor: 'rgba(255, 255, 255, 0.16)',\n      },\n    },\n    '& .MuiIconButton-root > span > span svg': {\n      fill: 'transparent !important',\n    },\n  },\n  paper: {\n    marginTop: 8,\n  },\n}));\n\nfunction DateTimePicker({\n  className,\n  PopoverProps,\n  format,\n  ...otherProps\n}: KeyboardDateTimePickerProps): JSX.Element {\n  const styles = useStyles();\n\n  return (\n    <KeyboardDateTimePicker\n      dateRangeIcon={<CalendarIcon size={24} />}\n      timeIcon={<TimeIcon size={24} />}\n      rightArrowIcon={<RightIcon size={24} />}\n      leftArrowIcon={<LeftIcon size={24} />}\n      keyboardIcon={<CalendarIcon size={16} />}\n      format={format}\n      refuse={/[^(\\w|\\d)]+/gi}\n      placeholder={moment().format(format)}\n      // Even though the type of maxDate and minDate allows null, it leads to an error during parsing date\n      maxDate={otherProps.maxDate ?? undefined}\n      minDate={otherProps.minDate ?? undefined}\n      {...otherProps}\n      PopoverProps={{ className: styles.paper, ...PopoverProps }}\n      className={classNames(styles.dateTimePickerInput, className)}\n    />\n  );\n}\n\nDateTimePicker.propTypes = {\n  className: PropTypes.string,\n  PopoverProps: PropTypes.shape({\n    className: PropTypes.string,\n  }),\n  format: PropTypes.string,\n};\n\nDateTimePicker.defaultProps = {\n  className: '',\n  PopoverProps: {},\n  format: DATE_TIME_FORMAT,\n};\n\nexport default DateTimePicker;\n"],"names":["useStyles","makeStyles","theme","dateTimePickerInput","width","paddingBottom","color","palette","primary","main","contrastText","text6","borderRadius","fontSize","marginRight","marginBottom","padding","backgroundColor","fill","paper","marginTop","DateTimePicker","className","PopoverProps","format","otherProps","styles","_jsx","moment","maxDate","undefined","minDate","classNames","propTypes","PropTypes","string","shape","defaultProps","DATE_TIME_FORMAT"],"mappings":"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"}

package/components/DevCenter/AppContext.js

@@ -1 +1,6 @@
-import{createContext as r}from"react";var a=r();export{a as default};
+import { createContext } from 'react';
+
+var AppContext = createContext();
+
+export { AppContext as default };
+//# sourceMappingURL=AppContext.js.map

package/components/DevCenter/AppContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppContext.js","sources":["../../../src/components/DevCenter/AppContext.js"],"sourcesContent":["import { createContext } from 'react';\n\nconst AppContext = createContext();\n\nexport default AppContext;\n"],"names":["AppContext","createContext"],"mappings":";;AAEMA,IAAAA,UAAU,GAAGC,aAAa;;;;"}

package/components/DevCenter/AppFilterPanelLayout/AppFilterPanelLayout.js

@@ -1 +1,167 @@
-import{__assign as o}from'./../../../ext-esm/tslib/tslib.es6.js';import{jsxs as s,jsx as i}from"react/jsx-runtime";import t from"classnames";import{makeStyles as n,useTheme as e}from"@material-ui/core";import{CenterAlignmentIcon as c}from"../../../icons/iconParkIcons.js";import"../../../icons/customIcons/icons/AddMessage.js";import"../../../icons/customIcons/icons/Attention.js";import"../../../icons/customIcons/icons/Collapse.js";import"../../../icons/customIcons/icons/Dashboard.js";import"../../../icons/customIcons/icons/Expand.js";import"../../../icons/customIcons/icons/FolderClosed.js";import"../../../icons/customIcons/icons/FolderClosedFilled.js";import"../../../icons/customIcons/icons/FolderOpened.js";import"../../../icons/customIcons/icons/GreaterOrEqual.js";import"../../../icons/customIcons/icons/LessOrEqual.js";import"../../../icons/customIcons/icons/Search.js";import"../../../icons/customIcons/icons/Wellhub.js";import"../../../icons/customIcons/icons/MultiRuler.js";import"../../../icons/customIcons/icons/Checkbox.js";import"../../../icons/customIcons/icons/CheckboxChecked.js";import"../../../icons/customIcons/icons/CheckboxIndeterminate.js";import"../../../icons/customIcons/icons/Radio.js";import"../../../icons/customIcons/icons/RadioChecked.js";import"../../../icons/customIcons/icons/SimulFrac.js";import"../../../icons/customIcons/icons/ZipperFrac.js";import"../../../icons/customIcons/icons/CautionFilled.js";import"../../../icons/customIcons/icons/MoreApp.js";import"../../../icons/customIcons/icons/Pad.js";import"../../../icons/customIcons/icons/Gap.js";import r from"../AppSideBar/AppSideBar.js";import m from"../../IconButton/index.js";import{AppSettingsPopover as p}from"../AppSettingsPopover/AppSettingsPopover.js";import a from"../../Button/components/Button/index.js";import"moment-timezone";import"../../Button/components/LiveButton/components/LiveButtonStateIndicator/index.js";import"../../Button/components/LiveButton/styles.js";import{useMatchAppContainerSize as l}from"../../../effects/useMatchAppContainerSize.js";import{isNativeDetected as d,isMobileDetected as u}from"../../../utils/mobileDetect.js";var h=n({appLayout:{display:"flex",flexDirection:"column",width:"100%",height:"100%"},header:{paddingLeft:12,paddingRight:12,display:"flex",height:36},contentWrapper:{display:"flex",position:"relative",flexGrow:1,height:"calc(100% - 36px)","@media (max-width: 960px)":{height:"100%"}},content:{display:"flex",flexDirection:"column",textAlign:"center",alignItems:"center",justifyContent:"center",height:"100%",width:"100%"},popoverContent:{padding:"0 16px"},filtersTrigger:{width:30,height:30}}),j=function(s){var t=e(),n=l({width:{max:t.breakpoints.width("md")}}),r=h();return n?i(m,o({className:r.filtersTrigger,size:"small",tooltipProps:{title:"Filters"},variant:"contained"},s,{children:i(c,{size:16})})):i(a,o({startIcon:i(c,{size:16})},s,{children:"Filters"}))},f=function(n){var c=n.appSettingsPopoverProps,m=n.children,a=n.classes,f=void 0===a?{}:a,I=n.header,g=n.sideBarContent,x=n.sideBarProps,v=h(),C=e(),B=l({width:{max:C.breakpoints.width("md")}}),b=d||u||B;return s("div",{className:t(v.appLayout,f.appLayout),children:[b&&s("div",{className:t(v.header,f.header),children:[i(p,o({Trigger:j,classes:{popoverContent:v.popoverContent},header:"Filters",anchorOrigin:{vertical:"top",horizontal:"left"},transformOrigin:{vertical:"top",horizontal:"left"}},c,{children:g})),I]}),s("div",{className:t(v.contentWrapper,f.contentWrapper),children:[!b&&i(r,o({},x,{anchor:"left",children:g})),m&&i("div",{className:t(v.content,f.content),children:m})]})]})};export{f as AppFilterPanelLayout};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import classNames from 'classnames';
+import { makeStyles, useTheme } from '@material-ui/core';
+import { CenterAlignmentIcon } from '../../../icons/iconParkIcons.js';
+import '../../../icons/customIcons/icons/AddMessage.js';
+import '../../../icons/customIcons/icons/Attention.js';
+import '../../../icons/customIcons/icons/Collapse.js';
+import '../../../icons/customIcons/icons/Dashboard.js';
+import '../../../icons/customIcons/icons/Expand.js';
+import '../../../icons/customIcons/icons/FolderClosed.js';
+import '../../../icons/customIcons/icons/FolderClosedFilled.js';
+import '../../../icons/customIcons/icons/FolderOpened.js';
+import '../../../icons/customIcons/icons/GreaterOrEqual.js';
+import '../../../icons/customIcons/icons/LessOrEqual.js';
+import '../../../icons/customIcons/icons/Search.js';
+import '../../../icons/customIcons/icons/Wellhub.js';
+import '../../../icons/customIcons/icons/MultiRuler.js';
+import '../../../icons/customIcons/icons/Checkbox.js';
+import '../../../icons/customIcons/icons/CheckboxChecked.js';
+import '../../../icons/customIcons/icons/CheckboxIndeterminate.js';
+import '../../../icons/customIcons/icons/Radio.js';
+import '../../../icons/customIcons/icons/RadioChecked.js';
+import '../../../icons/customIcons/icons/SimulFrac.js';
+import '../../../icons/customIcons/icons/ZipperFrac.js';
+import '../../../icons/customIcons/icons/CautionFilled.js';
+import '../../../icons/customIcons/icons/MoreApp.js';
+import '../../../icons/customIcons/icons/Pad.js';
+import '../../../icons/customIcons/icons/Gap.js';
+import AppSideBar from '../AppSideBar/AppSideBar.js';
+import IconButton from '../../IconButton/index.js';
+import { AppSettingsPopover } from '../AppSettingsPopover/AppSettingsPopover.js';
+import Button from '../../Button/components/Button/index.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import 'react';
+import 'moment-timezone';
+import '../../Button/components/LiveButton/components/LiveButtonStateIndicator/index.js';
+import '../../Button/components/LiveButton/styles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMatchAppContainerSize } from '../../../effects/useMatchAppContainerSize.js';
+import { isNativeDetected, isMobileDetected } from '../../../utils/mobileDetect.js';
+
+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; }
+var useStyles = makeStyles({
+  appLayout: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%'
+  },
+  header: {
+    paddingLeft: 12,
+    paddingRight: 12,
+    display: 'flex',
+    height: 36
+  },
+  contentWrapper: {
+    display: 'flex',
+    position: 'relative',
+    flexGrow: 1,
+    height: 'calc(100% - 36px)',
+    // NOTE: 36px is header height
+    '@media (max-width: 960px)': {
+      height: '100%'
+    }
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '100%'
+  },
+  popoverContent: {
+    padding: '0 16px'
+  },
+  filtersTrigger: {
+    width: 30,
+    height: 30
+  }
+});
+var FiltersTrigger = function FiltersTrigger(props) {
+  var theme = useTheme();
+  var isTabletView = useMatchAppContainerSize({
+    width: {
+      max: theme.breakpoints.width('md')
+    }
+  });
+  var styles = useStyles();
+  if (isTabletView) {
+    return /*#__PURE__*/jsx(IconButton, _objectSpread(_objectSpread({
+      className: styles.filtersTrigger,
+      size: "small",
+      tooltipProps: {
+        title: 'Filters'
+      }
+      //@ts-ignore
+      ,
+      variant: "contained"
+    }, props), {}, {
+      children: /*#__PURE__*/jsx(CenterAlignmentIcon, {
+        size: 16
+      })
+    }));
+  }
+  return /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+    startIcon: /*#__PURE__*/jsx(CenterAlignmentIcon, {
+      size: 16
+    })
+  }, props), {}, {
+    children: "Filters"
+  }));
+};
+var AppFilterPanelLayout = function AppFilterPanelLayout(_ref) {
+  var appSettingsPopoverProps = _ref.appSettingsPopoverProps,
+    children = _ref.children,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    header = _ref.header,
+    sideBarContent = _ref.sideBarContent,
+    sideBarProps = _ref.sideBarProps;
+  var styles = useStyles();
+  var theme = useTheme();
+  var isTabletView = useMatchAppContainerSize({
+    width: {
+      max: theme.breakpoints.width('md')
+    }
+  });
+  var showFilterButton = isNativeDetected || isMobileDetected || isTabletView;
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(styles.appLayout, classes.appLayout),
+    children: [showFilterButton && /*#__PURE__*/jsxs("div", {
+      className: classNames(styles.header, classes.header),
+      children: [/*#__PURE__*/jsx(AppSettingsPopover, _objectSpread(_objectSpread({
+        Trigger: FiltersTrigger,
+        classes: {
+          popoverContent: styles.popoverContent
+        },
+        header: "Filters",
+        anchorOrigin: {
+          vertical: 'top',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'left'
+        }
+      }, appSettingsPopoverProps), {}, {
+        children: sideBarContent
+      })), header]
+    }), /*#__PURE__*/jsxs("div", {
+      className: classNames(styles.contentWrapper, classes.contentWrapper),
+      children: [!showFilterButton && /*#__PURE__*/jsx(AppSideBar, _objectSpread(_objectSpread({}, sideBarProps), {}, {
+        anchor: "left",
+        children: sideBarContent
+      })), children && /*#__PURE__*/jsx("div", {
+        className: classNames(styles.content, classes.content),
+        children: children
+      })]
+    })]
+  });
+};
+
+export { AppFilterPanelLayout };
+//# sourceMappingURL=AppFilterPanelLayout.js.map

package/components/DevCenter/AppFilterPanelLayout/AppFilterPanelLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppFilterPanelLayout.js","sources":["../../../../src/components/DevCenter/AppFilterPanelLayout/AppFilterPanelLayout.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport { CenterAlignmentIcon } from '~/icons';\n\nimport AppSideBarComponent, { AppSideBarProps } from '~/components/DevCenter/AppSideBar/AppSideBar';\nimport IconButton from '~/components/IconButton';\n\nimport {\n  AppSettingsPopover,\n  AppSettingsPopoverProps,\n} from '~/components/DevCenter/AppSettingsPopover/AppSettingsPopover';\nimport Button, { ButtonProps } from '~/components/Button';\nimport { useMatchAppContainerSize } from '~/effects/useMatchAppContainerSize';\nimport { isMobileDetected, isNativeDetected } from '~/utils/mobileDetect';\n\nconst useStyles = makeStyles({\n  appLayout: {\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n  },\n  header: {\n    paddingLeft: 12,\n    paddingRight: 12,\n    display: 'flex',\n    height: 36,\n  },\n  contentWrapper: {\n    display: 'flex',\n    position: 'relative',\n    flexGrow: 1,\n    height: 'calc(100% - 36px)', // NOTE: 36px is header height\n    '@media (max-width: 960px)': {\n      height: '100%',\n    },\n  },\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'center',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    width: '100%',\n  },\n  popoverContent: {\n    padding: '0 16px',\n  },\n  filtersTrigger: {\n    width: 30,\n    height: 30,\n  },\n});\n\nexport interface AppFilterPanelLayoutProps {\n  sideBarContent: ReactNode;\n\n  appSettingsPopoverProps?: Omit<AppSettingsPopoverProps, 'children' | 'classes'>;\n  children?: ReactNode;\n  classes?: {\n    appLayout?: string;\n    content?: string;\n    contentWrapper?: string;\n    header?: string;\n  };\n  header?: ReactNode;\n  sideBarProps?: Omit<AppSideBarProps, 'anchor'>;\n}\nconst FiltersTrigger = (props: ButtonProps): JSX.Element => {\n  const theme = useTheme();\n  const isTabletView = useMatchAppContainerSize({\n    width: { max: theme.breakpoints.width('md') },\n  });\n  const styles = useStyles();\n\n  if (isTabletView) {\n    return (\n      <IconButton\n        className={styles.filtersTrigger}\n        size=\"small\"\n        tooltipProps={{ title: 'Filters' }}\n        //@ts-ignore\n        variant=\"contained\"\n        {...props}\n      >\n        <CenterAlignmentIcon size={16} />\n      </IconButton>\n    );\n  }\n\n  return (\n    <Button startIcon={<CenterAlignmentIcon size={16} />} {...props}>\n      Filters\n    </Button>\n  );\n};\n\nexport const AppFilterPanelLayout = ({\n  appSettingsPopoverProps,\n  children,\n  classes = {},\n  header,\n  sideBarContent,\n  sideBarProps,\n}: AppFilterPanelLayoutProps): JSX.Element => {\n  const styles = useStyles();\n  const theme = useTheme();\n\n  const isTabletView = useMatchAppContainerSize({\n    width: { max: theme.breakpoints.width('md') },\n  });\n  const showFilterButton = isNativeDetected || isMobileDetected || isTabletView;\n\n  return (\n    <div className={classNames(styles.appLayout, classes.appLayout)}>\n      {showFilterButton && (\n        <div className={classNames(styles.header, classes.header)}>\n          <AppSettingsPopover\n            Trigger={FiltersTrigger}\n            classes={{ popoverContent: styles.popoverContent }}\n            header=\"Filters\"\n            anchorOrigin={{\n              vertical: 'top',\n              horizontal: 'left',\n            }}\n            transformOrigin={{\n              vertical: 'top',\n              horizontal: 'left',\n            }}\n            {...appSettingsPopoverProps}\n          >\n            {sideBarContent}\n          </AppSettingsPopover>\n          {header}\n        </div>\n      )}\n      <div className={classNames(styles.contentWrapper, classes.contentWrapper)}>\n        {!showFilterButton && (\n          <AppSideBarComponent {...sideBarProps} anchor=\"left\">\n            {sideBarContent}\n          </AppSideBarComponent>\n        )}\n        {children && <div className={classNames(styles.content, classes.content)}>{children}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["useStyles","makeStyles","appLayout","display","flexDirection","width","height","header","paddingLeft","paddingRight","contentWrapper","position","flexGrow","content","textAlign","alignItems","justifyContent","popoverContent","padding","filtersTrigger","FiltersTrigger","props","theme","useTheme","isTabletView","useMatchAppContainerSize","max","breakpoints","styles","_jsx","title","AppFilterPanelLayout","appSettingsPopoverProps","children","classes","sideBarContent","sideBarProps","showFilterButton","isNativeDetected","isMobileDetected","_jsxs","classNames","vertical","horizontal","AppSideBarComponent"],"mappings":"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"}