@mittwald/flow-react-components 0.2.0-alpha.147 → 0.2.0-alpha.148

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.148](https://github.com/mittwald/flow/compare/0.2.0-alpha.147...0.2.0-alpha.148) (2025-04-15)
+
+### Bug Fixes
+
+* **List:** correct arrow navigation mode in Tiles view ([#1385](https://github.com/mittwald/flow/issues/1385)) ([724bc4b](https://github.com/mittwald/flow/commit/724bc4bb123d07a4e2d8eb698d87ebdb46e4b19e))
+
 # [0.2.0-alpha.147](https://github.com/mittwald/flow/compare/0.2.0-alpha.146...0.2.0-alpha.147) (2025-04-14)
 
 **Note:** Version bump only for package @mittwald/flow-react-components

package/dist/assets/doc-properties.json

@@ -243275,6 +243275,14 @@
     "methods": [],
     "props": {}
   },
+  {
+    "tags": {},
+    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/List/components/Header/components/SortingPicker/SortingPicker.tsx",
+    "description": "",
+    "displayName": "SortingPicker",
+    "methods": [],
+    "props": {}
+  },
   {
     "tags": {},
     "filePath": "/home/runner/work/flow/flow/packages/components/src/components/List/components/Header/components/SortingPickerItem/SortingPickerItem.tsx",
@@ -243303,14 +243311,6 @@
       }
     }
   },
-  {
-    "tags": {},
-    "filePath": "/home/runner/work/flow/flow/packages/components/src/components/List/components/Header/components/SortingPicker/SortingPicker.tsx",
-    "description": "",
-    "displayName": "SortingPicker",
-    "methods": [],
-    "props": {}
-  },
   {
     "tags": {},
     "filePath": "/home/runner/work/flow/flow/packages/components/src/components/List/components/Header/components/SearchField/SearchField.tsx",

package/dist/js/components/src/components/List/components/Items/Items.mjs

@@ -55,6 +55,7 @@ const Items = () => {
       style: {
         gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`
       },
+      layout: list.viewMode === "tiles" ? "grid" : "stack",
       children: isInitiallyLoading ? /* @__PURE__ */ jsx(FallbackItems, {}) : items
     }
   ) });

package/dist/js/components/src/components/List/components/Items/Items.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Items.mjs","sources":["../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode === \"tiles\";\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item) => (\n    <Item key={item.id} data={item.data} id={item.id} />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...list.componentProps}\n        renderEmptyState={() => <EmptyView />}\n        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`,\n        }}\n      >\n        {isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,KAAA,GAAQ,KAAK,QAAa,KAAA,OAAA;AAChC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAI,IAAA,CAAC,KAAK,QAAU,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAA,GAAA,CAAC,IAAmB,EAAA,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA,EAAA,EAAI,KAAK,EAAnC,EAAA,EAAA,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,SAAS,MAAO,CAAA;AAAA,GAClB;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAa,EAAA,kBAAA,EAAoB,aAAW,SACnD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAK,CAAA,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,MACnC,KAAO,EAAA;AAAA,QACL,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,IAAK,CAAA,QAAA,CAAS,YAAY,CAAA,SAAA;AAAA,OAC7E;AAAA,MAEC,QAAA,EAAA,kBAAA,mBAAsB,GAAA,CAAA,aAAA,EAAA,EAAc,CAAK,GAAA;AAAA;AAAA,GAE9C,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Items.mjs","sources":["../../../../../../../../src/components/List/components/Items/Items.tsx"],"sourcesContent":["import { EmptyView } from \"@/components/List\";\nimport Item from \"@/components/List/components/Items/components/Item/Item\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport DivView from \"@/views/DivView\";\nimport ItemsGridListView from \"@/views/ItemsGridListView\";\nimport clsx from \"clsx\";\nimport type { FC } from \"react\";\nimport styles from \"./Items.module.scss\";\nimport { FallbackItems } from \"./components/FallbackItems\";\n\nexport const Items: FC = () => {\n  const list = useList();\n  const tiles = list.viewMode === \"tiles\";\n  const isLoading = list.loader.useIsLoading();\n  const isInitiallyLoading = list.loader.useIsInitiallyLoading();\n\n  if (!list.itemView) {\n    return null;\n  }\n\n  const items = list.items.entries.map((item) => (\n    <Item key={item.id} data={item.data} id={item.id} />\n  ));\n\n  const rootClassName = clsx(\n    styles.items,\n    isLoading && styles.isLoading,\n    tiles && styles.tiles,\n  );\n\n  return (\n    <DivView aria-hidden={isInitiallyLoading} aria-busy={isLoading}>\n      <ItemsGridListView\n        className={rootClassName}\n        {...list.componentProps}\n        renderEmptyState={() => <EmptyView />}\n        style={{\n          gridTemplateColumns: `repeat(auto-fill, minmax(${list.itemView.tileMaxWidth}px, 1fr))`,\n        }}\n        layout={list.viewMode === \"tiles\" ? \"grid\" : \"stack\"}\n      >\n        {isInitiallyLoading ? <FallbackItems /> : items}\n      </ItemsGridListView>\n    </DivView>\n  );\n};\n\nexport default Items;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,QAAY,MAAM;AAC7B,EAAA,MAAM,OAAO,OAAQ,EAAA;AACrB,EAAM,MAAA,KAAA,GAAQ,KAAK,QAAa,KAAA,OAAA;AAChC,EAAM,MAAA,SAAA,GAAY,IAAK,CAAA,MAAA,CAAO,YAAa,EAAA;AAC3C,EAAM,MAAA,kBAAA,GAAqB,IAAK,CAAA,MAAA,CAAO,qBAAsB,EAAA;AAE7D,EAAI,IAAA,CAAC,KAAK,QAAU,EAAA;AAClB,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,QAAQ,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,IACpC,qBAAA,GAAA,CAAC,IAAmB,EAAA,EAAA,IAAA,EAAM,KAAK,IAAM,EAAA,EAAA,EAAI,KAAK,EAAnC,EAAA,EAAA,IAAA,CAAK,EAAkC,CACnD,CAAA;AAED,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,aAAa,MAAO,CAAA,SAAA;AAAA,IACpB,SAAS,MAAO,CAAA;AAAA,GAClB;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA,EAAQ,aAAa,EAAA,kBAAA,EAAoB,aAAW,SACnD,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAK,CAAA,cAAA;AAAA,MACT,gBAAA,EAAkB,sBAAM,GAAA,CAAC,SAAU,EAAA,EAAA,CAAA;AAAA,MACnC,KAAO,EAAA;AAAA,QACL,mBAAqB,EAAA,CAAA,yBAAA,EAA4B,IAAK,CAAA,QAAA,CAAS,YAAY,CAAA,SAAA;AAAA,OAC7E;AAAA,MACA,MAAQ,EAAA,IAAA,CAAK,QAAa,KAAA,OAAA,GAAU,MAAS,GAAA,OAAA;AAAA,MAE5C,QAAA,EAAA,kBAAA,mBAAsB,GAAA,CAAA,aAAA,EAAA,EAAc,CAAK,GAAA;AAAA;AAAA,GAE9C,EAAA,CAAA;AAEJ;;;;"}

package/dist/types/components/List/components/Items/Items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Items.d.ts","sourceRoot":"","sources":["../../../../../../src/components/List/components/Items/Items.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,eAAO,MAAM,KAAK,EAAE,EAkCnB,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Items.d.ts","sourceRoot":"","sources":["../../../../../../src/components/List/components/Items/Items.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,eAAO,MAAM,KAAK,EAAE,EAmCnB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.147",
+  "version": "0.2.0-alpha.148",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -53,7 +53,7 @@
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/string-compiler": "^3.2.6",
-    "@mittwald/react-tunnel": "0.2.0-alpha.147",
+    "@mittwald/react-tunnel": "0.2.0-alpha.148",
     "@mittwald/react-use-promise": "^3.0.4",
     "@react-aria/form": "^3.0.14",
     "@react-aria/utils": "^3.28.1",
@@ -92,7 +92,7 @@
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",
     "@internationalized/date": "^3.7.0",
-    "@mittwald/flow-design-tokens": "0.2.0-alpha.147",
+    "@mittwald/flow-design-tokens": "0.2.0-alpha.148",
     "@mittwald/react-use-promise": "^2.6.0",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.3",
     "@mittwald/typescript-config": "",
@@ -173,5 +173,5 @@
       "optional": true
     }
   },
-  "gitHead": "0e48e8f8b5dd7dfab8dda0c8ac768fecf7317fc4"
+  "gitHead": "b01b1b2f200cb8dc4e04e792679b0cf4ad40d70e"
 }