@blocklet/list 0.8.27 → 0.8.30

package/lib/components/list/list.js

@@ -122,10 +122,10 @@ function BlockletList(_ref) {
     });
   }
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, _objectSpread(_objectSpread({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGrid, _objectSpread(_objectSpread({
     container: true
   }, rest), {}, {
-    children: blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGrid, {
+    children: blocklets.map(blocklet => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridItem, {
       item: true,
       lg: 4,
       md: 6,
@@ -147,8 +147,12 @@ BlockletList.defaultProps = {};
 const StyledGrid = (0, _styledComponents.default)(_Grid.default).withConfig({
   displayName: "list__StyledGrid",
   componentId: "sc-jzgpev-0"
-})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;margin-left:", ";padding-right:", ";}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.spacing(-2), props => props.theme.spacing(0.5), props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2));
+})(["&.MuiGrid-root{width:auto;margin:0 -16px;}"]);
+const StyledGridItem = (0, _styledComponents.default)(_Grid.default).withConfig({
+  displayName: "list__StyledGridItem",
+  componentId: "sc-jzgpev-1"
+})(["@media (max-width:", "px){&.MuiGrid-item{padding-bottom:0px;}}@media (min-width:", "px){&.MuiGrid-item{margin-bottom:", ";}}"], props => props.theme.breakpoints.values.sm, props => props.theme.breakpoints.values.sm, props => props.theme.spacing(2));
 const CustomEmpty = (0, _styledComponents.default)(_Empty.default).withConfig({
   displayName: "list__CustomEmpty",
-  componentId: "sc-jzgpev-1"
+  componentId: "sc-jzgpev-2"
 })(["text-align:center;.primary{color:", ";}.tips{margin-top:", ";}"], props => props.theme.palette.primary.main, props => props.theme.spacing(1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.27",
+  "version": "0.8.30",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,7 @@
     "react": ">=18.1.0"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.10",
+    "@arcblock/ux": "^2.1.15",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.6.2",
@@ -62,5 +62,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "af6bdbc88dd0cd533d63dbe00dbc26e0d04d0ff6"
+  "gitHead": "b19c3408da3da4b86ad617086e0ae2deb831508c"
 }

package/src/components/list/list.js

@@ -80,13 +80,13 @@ export default function BlockletList({ blocklets, ...rest }) {
   }
 
   return (
-    <Grid container {...rest}>
+    <StyledGrid container {...rest}>
       {blocklets.map((blocklet) => (
-        <StyledGrid item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
+        <StyledGridItem item lg={4} md={6} sm={6} xs={12} key={blocklet.did} data-blocklet-did={blocklet.did}>
           {blockletRender({ blocklet, blocklets: blockletList })}
-        </StyledGrid>
+        </StyledGridItem>
       ))}
-    </Grid>
+    </StyledGrid>
   );
 }
 
@@ -97,11 +97,16 @@ BlockletList.propTypes = {
 BlockletList.defaultProps = {};
 
 const StyledGrid = styled(Grid)`
+  &.MuiGrid-root {
+    width: auto;
+    margin: 0 -16px;
+  }
+`;
+
+const StyledGridItem = styled(Grid)`
   @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
     &.MuiGrid-item {
       padding-bottom: 0px;
-      margin-left: ${(props) => props.theme.spacing(-2)};
-      padding-right: ${(props) => props.theme.spacing(0.5)};
     }
   }
   @media (min-width: ${(props) => props.theme.breakpoints.values.sm}px) {