@surveycake/rc 3.0.0-alpha.78 → 3.0.0-alpha.79

package/dist/rc.cjs.development.js

@@ -126,7 +126,9 @@ var MUITableBody = _interopDefault(require('@material-ui/core/TableBody'));
 var MUITableCell = _interopDefault(require('@material-ui/core/TableCell'));
 var MUITableContainer = _interopDefault(require('@material-ui/core/TableContainer'));
 var MUITableHead = _interopDefault(require('@material-ui/core/TableHead'));
+var MUITablePagination = _interopDefault(require('@material-ui/core/TablePagination'));
 var MUITableRow = _interopDefault(require('@material-ui/core/TableRow'));
+var MUITableSortLabel = _interopDefault(require('@material-ui/core/TableSortLabel'));
 var MUITabs = _interopDefault(require('@material-ui/core/Tabs'));
 var MUITextField = _interopDefault(require('@material-ui/core/TextField'));
 var MUIToggleButton = _interopDefault(require('@material-ui/lab/ToggleButton'));
@@ -632,6 +634,12 @@ var MuiCardActionArea = {
   }
 };
 
+var MuiCheckbox = {
+  indeterminate: {
+    color: core.palette.primary.main
+  }
+};
+
 var MuiChip = {
   root:
   /*#__PURE__*/
@@ -1177,6 +1185,34 @@ var MuiTableCell = {
   }
 };
 
+var MuiTablePagination = {
+  input: {
+    border: "1px solid " + core.palette.grey[500],
+    borderRadius: 4
+  },
+  select: {
+    color: core.palette.grey[600],
+    paddingBottom: 4,
+    paddingTop: 4
+  },
+  selectRoot: {
+    marginLeft: 20,
+    marginRight: 40
+  },
+  caption: {
+    color: core.palette.grey[600],
+    fontWeight: 500
+  },
+  actions: {
+    '& > button.Mui-disabled': {
+      color: core.palette.grey[500]
+    },
+    '& > button': {
+      color: core.palette.grey[700]
+    }
+  }
+};
+
 var MuiTableRow = {
   root: {
     '&:nth-of-type(even)': {
@@ -1306,6 +1342,7 @@ styles$5.createTheme({
     MuiButton: MuiButton,
     MuiCard: MuiCard,
     MuiCardActionArea: MuiCardActionArea,
+    MuiCheckbox: MuiCheckbox,
     MuiChip: MuiChip,
     MuiDialogActions: MuiDialogActions,
     MuiDialogContent: MuiDialogContent,
@@ -1331,6 +1368,7 @@ styles$5.createTheme({
     MuiSwitch: MuiSwitch,
     MuiTab: MuiTab,
     MuiTableCell: MuiTableCell,
+    MuiTablePagination: MuiTablePagination,
     MuiTableRow: MuiTableRow,
     MuiTabs: MuiTabs,
     MuiToggleButton: MuiToggleButton,
@@ -1394,6 +1432,34 @@ React.forwardRef(function (props, ref) {
 });
 ArrowSort.displayName = 'ArrowSort';
 
+var ArrowSortAsc =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props, {
+    ref: ref,
+    viewBox: "0 0 24 24"
+  }), React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.5941 5.25322L16.7531 9.52739C17.2808 10.0697 16.9068 11 16.1589 11H7.84107C7.09316 11 6.71921 10.0697 7.24694 9.52739L11.4094 5.25322C11.7344 4.91559 12.2656 4.91559 12.5941 5.25322ZM15.8177 14L12.0017 17.9217L8.18253 14H15.8177ZM12.5941 18.7468C12.2656 19.0844 11.7344 19.0844 11.4094 18.7468L7.24694 14.4726C6.71921 13.9303 7.09316 13 7.84107 13H16.1589C16.9068 13 17.2808 13.9303 16.7531 14.4726L12.5941 18.7468Z"
+  }));
+});
+ArrowSortAsc.displayName = 'ArrowSortAsc';
+
+var ArrowSortDesc =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props, {
+    ref: ref,
+    viewBox: "0 0 24 24"
+  }), React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.18253 10L12.0017 6.07831L15.8177 10H8.18253ZM11.4094 5.25322L7.24694 9.52739C6.71921 10.0697 7.09316 11 7.84107 11H16.1589C16.9068 11 17.2808 10.0697 16.7531 9.52739L12.5941 5.25322C12.2656 4.91559 11.7344 4.91559 11.4094 5.25322ZM16.1589 13H7.84107C7.09316 13 6.71921 13.9303 7.24694 14.4726L11.4094 18.7468C11.7344 19.0844 12.2656 19.0844 12.5941 18.7468L16.7531 14.4726C17.2808 13.9303 16.9068 13 16.1589 13Z"
+  }));
+});
+ArrowSortDesc.displayName = 'ArrowSortDesc';
+
 var BarChart =
 /*#__PURE__*/
 React.forwardRef(function (props, ref) {
@@ -1942,6 +2008,8 @@ var Icons = {
   ArrowDropUpRounded: ArrowDropUpRounded,
   ArrowRightAlt: ArrowRightAlt,
   ArrowSort: ArrowSort,
+  ArrowSortAsc: ArrowSortAsc,
+  ArrowSortDesc: ArrowSortDesc,
   AutoAwesomeOutlined: AutoAwesomeOutlined,
   BarChart: BarChart,
   CalendarMonth: CalendarMonth,
@@ -2751,6 +2819,52 @@ React.forwardRef(function (props, ref) {
   }));
 });
 
+function _templateObject2$1() {
+  var data = _taggedTemplateLiteralLoose(["\n              & .MuiPaper-root {\n                box-shadow: none;\n                border: 1px solid ", ";\n              }\n\n              & .MuiMenuItem-root:hover {\n                background-color: ", ";\n                color: ", ";\n              }\n\n              & .MuiMenuItem-root.Mui-selected {\n                background-color: ", ";\n                color: ", ";\n              }\n            "]);
+
+  _templateObject2$1 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$1() {
+  var data = _taggedTemplateLiteralLoose(["\n          & .Mui-focused .MuiSelect-icon {\n            color: ", ";\n          }\n        "]);
+
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var TablePagination =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  var theme = useMUITheme();
+  return React__default.createElement(MUITablePagination, Object.assign({}, props, {
+    ref: ref,
+    component: "div",
+    className: emotion.css(_templateObject$1(), theme.palette.grey[500]),
+    SelectProps: {
+      variant: 'outlined',
+      IconComponent: Icons.KeyboardArrowDown,
+      MenuProps: {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: -theme.spacing(1),
+          horizontal: 'left'
+        },
+        getContentAnchorEl: null,
+        className: emotion.css(_templateObject2$1(), theme.palette.grey[500], theme.palette.grey.A400, theme.palette.grey[700], theme.palette.grey[100], theme.palette.grey[700])
+      }
+    }
+  }));
+});
+
 var TableRow =
 /*#__PURE__*/
 React.forwardRef(function (props, ref) {
@@ -2759,6 +2873,14 @@ React.forwardRef(function (props, ref) {
   }));
 });
 
+var TableSortLabel =
+/*#__PURE__*/
+React.forwardRef(function (props, ref) {
+  return React__default.createElement(MUITableSortLabel, Object.assign({}, props, {
+    ref: ref
+  }));
+});
+
 var Tabs =
 /*#__PURE__*/
 React.forwardRef(function (props, ref) {
@@ -2889,10 +3011,10 @@ styles$5.makeStyles(function (theme) {
   };
 });
 
-function _templateObject$1() {
+function _templateObject$2() {
   var data = _taggedTemplateLiteralLoose(["\n                        color: ", ";\n                      "]);
 
-  _templateObject$1 = function _templateObject() {
+  _templateObject$2 = function _templateObject() {
     return data;
   };
 
@@ -2938,7 +3060,7 @@ React.forwardRef(function (props, ref) {
           }
         }, React__default.createElement(Typography, {
           variant: "body2",
-          className: emotion.css(_templateObject$1(), theme.palette.grey[500])
+          className: emotion.css(_templateObject$2(), theme.palette.grey[500])
         }, opt.emptyLabel));
       }
 
@@ -3066,7 +3188,9 @@ var index = {
   TableCell: TableCell,
   TableContainer: TableContainer,
   TableHead: TableHead,
+  TablePagination: TablePagination,
   TableRow: TableRow,
+  TableSortLabel: TableSortLabel,
   Tabs: Tabs,
   TextField: TextField,
   ToggleButton: ToggleButton,
@@ -3428,20 +3552,20 @@ var CardContent = MuiCardContent;
 
 var CardHeader = MuiCardHeader;
 
-function _templateObject2$1() {
+function _templateObject2$2() {
   var data = _taggedTemplateLiteralLoose(["\n  animation: ", " 1s linear infinite;\n"]);
 
-  _templateObject2$1 = function _templateObject2() {
+  _templateObject2$2 = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$2() {
+function _templateObject$3() {
   var data = _taggedTemplateLiteralLoose(["\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n"]);
 
-  _templateObject$2 = function _templateObject() {
+  _templateObject$3 = function _templateObject() {
     return data;
   };
 
@@ -3451,12 +3575,12 @@ var loadingCircle =
 /*#__PURE__*/
 emotion.keyframes(
 /*#__PURE__*/
-_templateObject$2());
+_templateObject$3());
 var spin =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject2$1(), loadingCircle);
+_templateObject2$2(), loadingCircle);
 
 var _svgBaseProps;
 var svgBaseProps = (_svgBaseProps = {
@@ -3518,20 +3642,20 @@ var CalendarAlt = {
   }
 };
 
-function _templateObject2$2() {
+function _templateObject2$3() {
   var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 12px;\n  top: 7px;\n  width: 18px;\n  height: 18px;\n  font-size: 18px;\n  color: ", ";\n"]);
 
-  _templateObject2$2 = function _templateObject2() {
+  _templateObject2$3 = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$3() {
+function _templateObject$4() {
   var data = _taggedTemplateLiteralLoose(["\n  position: relative;\n"]);
 
-  _templateObject$3 = function _templateObject() {
+  _templateObject$4 = function _templateObject() {
     return data;
   };
 
@@ -3541,12 +3665,12 @@ var DatePickerWrapper =
 /*#__PURE__*/
 styled('section')(
 /*#__PURE__*/
-_templateObject$3());
+_templateObject$4());
 var IonwWrapper =
 /*#__PURE__*/
 styled('section')(
 /*#__PURE__*/
-_templateObject2$2(), theme$1.color.primary["default"]);
+_templateObject2$3(), theme$1.color.primary["default"]);
 var popOverStyles =
 /*#__PURE__*/
 styles$5.createStyles({
@@ -4255,20 +4379,20 @@ function _templateObject3$1() {
   return data;
 }
 
-function _templateObject2$3() {
+function _templateObject2$4() {
   var data = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 60px;\n  min-width: 60px;\n  height: 22px;\n  display: block;\n  border-radius: 100px;\n  display: flex;\n  align-items: center;\n  position: relative;\n  background-color: ", ";\n  transition: 0.3s;\n  outline: none;\n"]);
 
-  _templateObject2$3 = function _templateObject2() {
+  _templateObject2$4 = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$4() {
+function _templateObject$5() {
   var data = _taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 0;\n  visibility: hidden;\n  outline: none;\n  position: absolute;\n  left: 50%;\n  top: 12%;\n"]);
 
-  _templateObject$4 = function _templateObject() {
+  _templateObject$5 = function _templateObject() {
     return data;
   };
 
@@ -4278,12 +4402,12 @@ var InputStyle =
 /*#__PURE__*/
 styled('input')(
 /*#__PURE__*/
-_templateObject$4());
+_templateObject$5());
 var LabelStyle =
 /*#__PURE__*/
 styled('label')(
 /*#__PURE__*/
-_templateObject2$3(), function (props) {
+_templateObject2$4(), function (props) {
   return props.checked ? theme$1.color.primary["default"] : theme$1.color.text.F;
 });
 var ThumbStyle =
@@ -4346,10 +4470,10 @@ styles$5.createStyles({
   }
 });
 
-function _templateObject$5() {
+function _templateObject$6() {
   var data = _taggedTemplateLiteralLoose(["\n        z-index: 100;\n      "]);
 
-  _templateObject$5 = function _templateObject() {
+  _templateObject$6 = function _templateObject() {
     return data;
   };
 
@@ -4380,7 +4504,7 @@ var MenuList = function MenuList(_ref) {
     placement: placement,
     transition: true,
     modifiers: modifiers,
-    className: emotion.css(_templateObject$5())
+    className: emotion.css(_templateObject$6())
   }, function (_ref2) {
     var TransitionProps = _ref2.TransitionProps;
 
@@ -4827,7 +4951,7 @@ React.forwardRef(function (_ref, ref) {
   }, restProps));
 });
 
-var MuiCheckbox =
+var MuiCheckbox$1 =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
@@ -4855,20 +4979,20 @@ var LongArrowRight = {
   }
 };
 
-function _templateObject2$4() {
+function _templateObject2$5() {
   var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin: 0 8px;\n  color: ", ";\n  font-size: 14px;\n"]);
 
-  _templateObject2$4 = function _templateObject2() {
+  _templateObject2$5 = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$6() {
+function _templateObject$7() {
   var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"]);
 
-  _templateObject$6 = function _templateObject() {
+  _templateObject$7 = function _templateObject() {
     return data;
   };
 
@@ -4878,12 +5002,12 @@ var StepperContainer =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$6());
+_templateObject$7());
 var ConnectorContainer =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject2$4(), theme$1.color.text.B3);
+_templateObject2$5(), theme$1.color.text.B3);
 
 var Stepper$1 =
 /*#__PURE__*/
@@ -4920,10 +5044,10 @@ React.forwardRef(function (_ref, ref) {
 var index$3 = /*#__PURE__*/
 React.memo(Stepper$1);
 
-function _templateObject$7() {
+function _templateObject$8() {
   var data = _taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  color: ", ";\n  background-color: transparent;\n  min-width: 56px;\n  padding: 16px 0;\n  border: none;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: 22px;\n  outline: none;\n\n  &:hover {\n    color: ", ";\n  }\n"]);
 
-  _templateObject$7 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
   };
 
@@ -4933,7 +5057,7 @@ var SytledStep =
 /*#__PURE__*/
 styled('button')(
 /*#__PURE__*/
-_templateObject$7(), function (props) {
+_templateObject$8(), function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, function (props) {
   return props.active ? theme$1.color.text.B6 : theme$1.color.text.B3;
@@ -4970,10 +5094,10 @@ React.forwardRef(function (_ref, ref) {
 var index$4 = /*#__PURE__*/
 React.memo(Step$1);
 
-function _templateObject$8() {
+function _templateObject$9() {
   var data = _taggedTemplateLiteralLoose(["\n\ttable, th, td {\n\t\tborder: 1px solid #eeeeee;\n\t}\n\n  table {\n    width: 100%;\n\t\tborder-collapse: collapse;\n\t\ttable-layout:fixed;\n\t}\n\n  thead {\n\t\ttr th {\n\t\t\theight: 56px;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\ttext-align: center;\n\t\t\tcolor: #3dba90;\n\n\t\t\t&:#title {\n\t\t\t\twidth: 20%;\n\t\t\t}\n\n\t\t\t&#origin {\n\t\t\t\twidth: 40%;\n\t\t\t}\n\n\t\t\t&#translate {\n\t\t\t\twidth: 40%;\n\t\t\t}\n\t\t}\n\t}\n\n\ttbody {\n\t\ttr td {\n\t\t\tword-break:break-word;\n\t\t\tvertical-align:top;\n\t\t}\n\t}\n"]);
 
-  _templateObject$8 = function _templateObject() {
+  _templateObject$9 = function _templateObject() {
     return data;
   };
 
@@ -4983,7 +5107,7 @@ var StyledEditableTable =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$8());
+_templateObject$9());
 
 var EditableTable = function EditableTable(_ref) {
   var rows = _ref.rows,
@@ -5765,20 +5889,20 @@ function _templateObject3$2() {
   return data;
 }
 
-function _templateObject2$5() {
+function _templateObject2$6() {
   var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"]);
 
-  _templateObject2$5 = function _templateObject2() {
+  _templateObject2$6 = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$9() {
+function _templateObject$a() {
   var data = _taggedTemplateLiteralLoose(["\n  display: flex;\n"]);
 
-  _templateObject$9 = function _templateObject() {
+  _templateObject$a = function _templateObject() {
     return data;
   };
 
@@ -5809,12 +5933,12 @@ var MessageWrapper =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject$9());
+_templateObject$a());
 var MessageContent =
 /*#__PURE__*/
 emotion.css(
 /*#__PURE__*/
-_templateObject2$5());
+_templateObject2$6());
 var TitleStyle =
 /*#__PURE__*/
 emotion.css(
@@ -5976,20 +6100,20 @@ function _templateObject3$3() {
   return data;
 }
 
-function _templateObject2$6() {
+function _templateObject2$7() {
   var data = _taggedTemplateLiteralLoose(["\n  padding: 8px;\n  display: inline-block;\n  cursor: pointer;\n"]);
 
-  _templateObject2$6 = function _templateObject2() {
+  _templateObject2$7 = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$a() {
+function _templateObject$b() {
   var data = _taggedTemplateLiteralLoose(["\n  background-color: white;\n  transition: transform ", ";\n  transform: translateX(", ");\n  position: fixed;\n  ", ";\n  bottom: 0;\n  top: 0;\n  min-width: ", "px;\n  height: 100%;\n  z-index: ", ";\n"]);
 
-  _templateObject$a = function _templateObject() {
+  _templateObject$b = function _templateObject() {
     return data;
   };
 
@@ -6051,12 +6175,12 @@ var StyledSideMenu =
 /*#__PURE__*/
 styled.section(
 /*#__PURE__*/
-_templateObject$a(), duration, translateOffset, position, width, theme$1.zIndex.appBar);
+_templateObject$b(), duration, translateOffset, position, width, theme$1.zIndex.appBar);
 var StyledIconWrapper =
 /*#__PURE__*/
 styled.div(
 /*#__PURE__*/
-_templateObject2$6());
+_templateObject2$7());
 var IconStyle =
 /*#__PURE__*/
 emotion.css(
@@ -6182,10 +6306,10 @@ var Divider$1 = function Divider(props) {
 
 var boxShadowForMenu = "0 1px 6px 0 rgba(69, 69, 69, 0.2),\n0 1px 5px 0 rgba(69, 69, 69, 0.1)";
 
-function _templateObject$b() {
+function _templateObject$c() {
   var data = _taggedTemplateLiteralLoose(["\n    @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700|Roboto:400,500,700&display=swap&subset=chinese-traditional');\n  "]);
 
-  _templateObject$b = function _templateObject() {
+  _templateObject$c = function _templateObject() {
     return data;
   };
 
@@ -6205,7 +6329,7 @@ var muiThemeForSurveyCake =
 /*#__PURE__*/
 function () {
   // Side Effects
-  emotion.injectGlobal(_templateObject$b());
+  emotion.injectGlobal(_templateObject$c());
   var BASE_FONT_SIZE = 16;
   return styles$5.createTheme({
     typography: {
@@ -7424,7 +7548,7 @@ exports.CardActionArea = CardActionArea$1;
 exports.CardActions = CardActions$1;
 exports.CardContent = CardContent;
 exports.CardHeader = CardHeader;
-exports.Checkbox = MuiCheckbox;
+exports.Checkbox = MuiCheckbox$1;
 exports.Chip = index$1;
 exports.DatePicker = DatePicker;
 exports.Divider = Divider$1;