@blocklet/list 0.8.65 → 0.8.66

package/lib/base.js

@@ -62,52 +62,54 @@ function ListBase() {
       mdDown: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_aside.default, {})
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMin, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        className: "filter-bar",
-        display: "flex",
-        alignItems: "center",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearch, {
-          className: "search-container",
-          placeholder: t('common.searchStore')
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FilterContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          className: "filter-bar",
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearch, {
+            className: "search-container",
+            placeholder: t('common.searchStore')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            mt: 0,
+            ml: "16px",
+            className: "filter-container",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Hidden, {
+              mdUp: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.FilterIcon, {})
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
+              value: filters.sortBy,
+              options: sortOptions,
+              title: sortLocale,
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sort.default, {}),
+              onChange: v => {
+                handleSort(v);
+              }
+            })]
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          mt: 0,
-          ml: "16px",
-          className: "filter-container",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Hidden, {
-            mdUp: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.FilterIcon, {})
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelect.default, {
-            value: filters.sortBy,
-            options: sortOptions,
-            title: sortLocale,
-            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Sort.default, {}),
-            onChange: v => {
-              handleSort(v);
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          mb: "16px",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
+            label: developerName,
+            icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Face.default, {}),
+            onDelete: () => {
+              handleDeveloper(null);
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
+            label: categoryLocale,
+            onDelete: () => {
+              handleCategory(null);
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
+            label: priceLocale,
+            onDelete: () => {
+              handlePrice(null);
             }
           })]
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        display: "flex",
-        flexWrap: "wrap",
-        alignItems: "center",
-        mb: "16px",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
-          label: developerName,
-          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Face.default, {}),
-          onDelete: () => {
-            handleDeveloper(null);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
-          label: categoryLocale,
-          onDelete: () => {
-            handleCategory(null);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_filter2.CustomChip, {
-          label: priceLocale,
-          onDelete: () => {
-            handlePrice(null);
-          }
-        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
         FallbackComponent: _ErrorBoundary.ErrorFallback,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -134,5 +136,11 @@ const StyledSearch = (0, _styledComponents.default)(_search.default).withConfig(
   displayName: "base__StyledSearch",
   componentId: "sc-wumzlv-1"
 })(["background-color:", ";"], props => props.theme.palette.grey[50]);
+
+const FilterContainer = _styledComponents.default.div.withConfig({
+  displayName: "base__FilterContainer",
+  componentId: "sc-wumzlv-2"
+})(["position:sticky;top:0;z-index:999;background-color:white;"]);
+
 var _default = ListBase;
 exports.default = _default;

package/lib/components/aside.js

@@ -50,7 +50,7 @@ function Aside() {
 const StyledAside = _styledComponents.default.aside.withConfig({
   displayName: "aside__StyledAside",
   componentId: "sc-1wkvsv6-0"
-})(["width:220px;margin-right:", ";height:100%;overflow-y:auto;"], props => props.theme.spacing(2));
+})(["width:220px;margin-right:", ";height:100%;position:sticky;top:0;overflow-y:auto;z-index:999;"], props => props.theme.spacing(2));
 
 Aside.propTypes = {};
 Aside.defaultProps = {};

package/lib/components/filter/custom-chip.js

@@ -43,6 +43,7 @@ function FilterChip(_ref) {
   if (!label) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyleDiv, _objectSpread(_objectSpread({}, containerProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+      color: "primary",
       "data-cy": "filter-tag",
       icon: icon,
       label: label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/list",
-  "version": "0.8.65",
+  "version": "0.8.66",
   "description": "Common ux components of blocklet",
   "publishConfig": {
     "access": "public"
@@ -64,5 +64,5 @@
     "eslint": "^8.16.0",
     "prettier": "^2.6.2"
   },
-  "gitHead": "3ddb0217a07753400bdcfefd10c76f76e69a3b05"
+  "gitHead": "bdffbd6407f480fb2eff20a1b4e528dde9874952"
 }

package/src/base.js

@@ -37,46 +37,48 @@ function ListBase() {
         <Aside />
       </Hidden>
       <StyledMin>
-        <Box className="filter-bar" display="flex" alignItems="center">
-          <StyledSearch className="search-container" placeholder={t('common.searchStore')} />
-          <Box mt={0} ml="16px" className="filter-container">
-            <Hidden mdUp>
-              {/* 小屏幕下类别 */}
-              <FilterIcon />
-            </Hidden>
-            {/* 排序选择器 */}
-            <CustomSelect
-              value={filters.sortBy}
-              options={sortOptions}
-              title={sortLocale}
-              icon={<SortIcon />}
-              onChange={(v) => {
-                handleSort(v);
+        <FilterContainer>
+          <Box className="filter-bar" display="flex" alignItems="center">
+            <StyledSearch className="search-container" placeholder={t('common.searchStore')} />
+            <Box mt={0} ml="16px" className="filter-container">
+              <Hidden mdUp>
+                {/* 小屏幕下类别 */}
+                <FilterIcon />
+              </Hidden>
+              {/* 排序选择器 */}
+              <CustomSelect
+                value={filters.sortBy}
+                options={sortOptions}
+                title={sortLocale}
+                icon={<SortIcon />}
+                onChange={(v) => {
+                  handleSort(v);
+                }}
+              />
+            </Box>
+          </Box>
+          <Box display="flex" flexWrap="wrap" alignItems="center" mb="16px">
+            <CustomChip
+              label={developerName}
+              icon={<FaceIcon />}
+              onDelete={() => {
+                handleDeveloper(null);
+              }}
+            />
+            <CustomChip
+              label={categoryLocale}
+              onDelete={() => {
+                handleCategory(null);
+              }}
+            />
+            <CustomChip
+              label={priceLocale}
+              onDelete={() => {
+                handlePrice(null);
               }}
             />
           </Box>
-        </Box>
-        <Box display="flex" flexWrap="wrap" alignItems="center" mb="16px">
-          <CustomChip
-            label={developerName}
-            icon={<FaceIcon />}
-            onDelete={() => {
-              handleDeveloper(null);
-            }}
-          />
-          <CustomChip
-            label={categoryLocale}
-            onDelete={() => {
-              handleCategory(null);
-            }}
-          />
-          <CustomChip
-            label={priceLocale}
-            onDelete={() => {
-              handlePrice(null);
-            }}
-          />
-        </Box>
+        </FilterContainer>
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <div style={{ position: 'relative', flex: 1, overflow: 'auto' }}>
             <BlockletList blocklets={blockletList} />
@@ -137,4 +139,11 @@ const StyledSearch = styled(Search)`
   background-color: ${(props) => props.theme.palette.grey[50]};
 `;
 
+const FilterContainer = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  background-color: white;
+`;
+
 export default ListBase;

package/src/components/aside.js

@@ -30,7 +30,10 @@ const StyledAside = styled.aside`
   width: 220px;
   margin-right: ${(props) => props.theme.spacing(2)};
   height: 100%;
+  position: sticky;
+  top: 0;
   overflow-y: auto;
+  z-index: 999;
 `;
 
 Aside.propTypes = {};

package/src/components/filter/custom-chip.js

@@ -15,7 +15,7 @@ function FilterChip({ label, icon, onDelete, ...containerProps }) {
   if (!label) return null;
   return (
     <StyleDiv {...containerProps}>
-      <Chip data-cy="filter-tag" icon={icon} label={label} onDelete={onDelete} />
+      <Chip color="primary" data-cy="filter-tag" icon={icon} label={label} onDelete={onDelete} />
     </StyleDiv>
   );
 }