@mittwald/flow-react-components 0.1.0-alpha.405 → 0.1.0-alpha.407

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/css/List.css +1 -1
  3. package/dist/js/List.js +209 -188
  4. package/dist/js/all.css +1 -1
  5. package/dist/js/types/components/List/model/item/ItemView.d.ts +2 -0
  6. package/dist/js/types/components/List/stories/ListItem.stories.d.ts +1 -0
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,31 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.1.0-alpha.407](https://github.com/mittwald/flow/compare/0.1.0-alpha.406...0.1.0-alpha.407) (2025-01-28)
7
+
8
+ ### Features
9
+
10
+ - **List:** prevent list action in bottom content
11
+ ([80b497c](https://github.com/mittwald/flow/commit/80b497c045e7a6f7e7d404a11f14602d199aa2ec))
12
+
13
+ # Change Log
14
+
15
+ All notable changes to this project will be documented in this file. See
16
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
17
+
18
+ # [0.1.0-alpha.406](https://github.com/mittwald/flow/compare/0.1.0-alpha.405...0.1.0-alpha.406) (2025-01-27)
19
+
20
+ ### Features
21
+
22
+ - **List:** update tile width and add maxTileWidth property
23
+ ([#1134](https://github.com/mittwald/flow/issues/1134))
24
+ ([6ee9289](https://github.com/mittwald/flow/commit/6ee9289b3776ff3443fa45e4536e73897687784e))
25
+
26
+ # Change Log
27
+
28
+ All notable changes to this project will be documented in this file. See
29
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
30
+
6
31
  # [0.1.0-alpha.405](https://github.com/mittwald/flow/compare/0.1.0-alpha.404...0.1.0-alpha.405) (2025-01-27)
7
32
 
8
33
  ### Features
package/dist/css/List.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";.flow--list--items--item--view{display:flex;padding:var(--list-item--padding);gap:var(--list-item--spacing);align-items:center;flex-wrap:wrap}.flow--list--items--item--view .flow--list--items--item--view--content{display:flex;flex-wrap:wrap;gap:var(--list-item--spacing);align-items:center;flex-grow:1}.flow--list--items--item--view .flow--list--items--item--view--title{order:0;flex-grow:1;display:grid;grid-column-gap:var(--list-item--avatar-to-title-spacing);grid-template-areas:"avatar title " "avatar subtitle";grid-template-columns:auto 1fr}.flow--list--items--item--view .flow--list--items--item--view--title:empty,.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title:empty{display:none}.flow--list--items--item--view .flow--list--items--item--view--title:not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title " "subtitle";grid-template-columns:1fr}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty){grid-template-areas:"avatar title"}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty):not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title"}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--avatar{grid-area:avatar;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--heading{grid-area:title;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title{grid-area:subtitle;font-size:var(--list-item--subtitle-font-size)}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title .flow--list--items--item--view--text:not(:last-child):after{content:"–";display:inline-block;margin:0 var(--size-rem--s)}.flow--list--items--item--view .flow--list--items--item--view--top-content{order:2}.flow--list--items--item--view .flow--list--items--item--view--action{margin-left:auto}.flow--list--items--item--view .flow--list--items--item--view--bottom-content{order:4;width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile{padding:0;border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);border-radius:var(--list-item--corner-radius)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--action{display:none}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar-container{width:100%;overflow:hidden;border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style);border-top-left-radius:var(--corner-radius--default);border-top-right-radius:var(--corner-radius--default);aspect-ratio:16/9}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar{width:100%;height:100%;border-radius:0}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--icon{width:var(--size-px--xxl);height:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--initials{font-size:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--content{display:flex;justify-content:space-between;align-items:start;padding-inline:var(--list-item--spacing);padding-bottom:var(--list-item--spacing);width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--top-content{width:100%}.flow--list--list-summary{border-width:var(--list-item--border-width);border-bottom-width:0;border-style:var(--list-item--border-style);border-color:var(--list-item--border-color);padding:var(--list-item--padding);border-top-left-radius:var(--list-item--corner-radius);border-top-right-radius:var(--list-item--corner-radius)}.flow--list--header{display:flex;flex-direction:column;row-gap:var(--list--spacing)}.flow--list--header .flow--list--header--picker-list-and-search{display:flex;gap:var(--list--block-to-block-spacing);align-items:center;justify-content:space-between;flex-wrap:wrap-reverse}.flow--list--header .flow--list--header--picker-list{display:flex;flex-wrap:wrap;gap:var(--list--spacing)}.flow--list--header .flow--list--header--search-and-actions{display:flex;flex-grow:1;gap:var(--list--spacing);flex-wrap:wrap-reverse;justify-content:end}.flow--list--header .flow--list--header--search-field{max-width:180px;flex-grow:1;transition:max-width var(--transition--duration--default)}.flow--list--header .flow--list--header--search-field:has(input:focus){max-width:600px}.flow--list--header--active-filters{display:flex;flex-direction:row;column-gap:var(--list--spacing);row-gap:var(--list--spacing);flex-wrap:wrap;align-items:center}.flow--list--header--active-filters .flow--list--header--active-filters--clear-button{margin-inline-start:auto}.flow--list{display:flex;flex-direction:column;row-gap:var(--list--block-to-block-spacing);container-type:inline-size}.flow--list :has(.flow--list--list-summary) .flow--list--items,.flow--list :has(.flow--list--list-summary) .flow--list--table{border-top-left-radius:0;border-top-right-radius:0}.flow--list--items{display:flex;flex-direction:column;border-radius:var(--list-item--corner-radius);border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);overflow:hidden}.flow--list--items:empty{display:none}.flow--list--items.flow--list--items--is-loading{pointer-events:none;opacity:.5}.flow--list--items[data-empty=true]{border:none}.flow--list--items.flow--list--items--tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));border:none;gap:var(--list-item--spacing)}.flow--list--items--item{cursor:default;background-color:var(--list-item--background-color--default)}.flow--list--items--item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--list--items--item[data-focused],.flow--list--items--item:focus{outline-style:none}.flow--list--items--item[data-focus-visible],.flow--list--items--item:focus-visible{outline-style:auto}.flow--list--items--item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--list--items--item.flow--list--items--item{outline-offset:calc(var(--size-px--xs) * -1)}.flow--list--items--item:where(.flow--list--items--item--is-selected){background-color:var(--list-item--background-color--pressed)}.flow--list--items--item:not(:last-child){border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--items--item:where(.flow--list--items--item--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}.flow--list--items--item.flow--list--items--item--tile{border:none}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action):not(.flow--list--items--item--is-selected):hover .flow--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action)[data-pressed] .flow--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--list--footer{font-size:var(--font-size-text--s);display:flex;flex-direction:column;align-items:center;row-gap:var(--list--spacing)}.flow--list--table.flow--list--table--is-loading{pointer-events:none;opacity:.5}.flow--list--table--row.flow--list--table--is-selected{background-color:var(--list-item--background-color--pressed)}.flow--list--table--row:where(.flow--list--table--has-action){cursor:default}.flow--list--table--row:where(.flow--list--table--has-action):not(.flow--list--table--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--table--row:where(.flow--list--table--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}
1
+ @charset "UTF-8";.flow--list--items--item--view{display:flex;padding:var(--list-item--padding);gap:var(--list-item--spacing);align-items:center;flex-wrap:wrap}.flow--list--items--item--view .flow--list--items--item--view--content{display:flex;flex-wrap:wrap;gap:var(--list-item--spacing);align-items:center;flex-grow:1}.flow--list--items--item--view .flow--list--items--item--view--title{order:0;flex-grow:1;display:grid;grid-column-gap:var(--list-item--avatar-to-title-spacing);grid-template-areas:"avatar title " "avatar subtitle";grid-template-columns:auto 1fr}.flow--list--items--item--view .flow--list--items--item--view--title:empty,.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title:empty{display:none}.flow--list--items--item--view .flow--list--items--item--view--title:not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title " "subtitle";grid-template-columns:1fr}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty){grid-template-areas:"avatar title"}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty):not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title"}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--avatar{grid-area:avatar;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--heading{grid-area:title;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title{grid-area:subtitle;font-size:var(--list-item--subtitle-font-size)}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title .flow--list--items--item--view--text:not(:last-child):after{content:"–";display:inline-block;margin:0 var(--size-rem--s)}.flow--list--items--item--view .flow--list--items--item--view--top-content{order:2}.flow--list--items--item--view .flow--list--items--item--view--action{margin-left:auto}.flow--list--items--item--view .flow--list--items--item--view--bottom-content{order:4;width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile{padding:0;border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);border-radius:var(--list-item--corner-radius);align-content:start;height:100%;gap:var(--list-item--padding)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--action{display:none}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar-container{width:100%;overflow:hidden;border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style);border-top-left-radius:var(--corner-radius--default);border-top-right-radius:var(--corner-radius--default);aspect-ratio:16/9}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar{width:100%;height:100%;border-radius:0}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--icon{width:var(--size-px--xxl);height:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--initials{font-size:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--title:has(.flow--list--items--item--view--badge){position:relative;padding-bottom:calc(var(--size-rem--xxs) + var(--badge--line-height) + var(--badge--padding-y) * 2)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--title:has(.flow--list--items--item--view--badge) .flow--list--items--item--view--badge{position:absolute;bottom:0;right:0;left:0;margin-left:auto}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--content{display:flex;justify-content:space-between;align-items:start;padding-inline:var(--list-item--padding);padding-bottom:var(--list-item--padding);width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--top-content{width:100%}.flow--list--list-summary{border-width:var(--list-item--border-width);border-bottom-width:0;border-style:var(--list-item--border-style);border-color:var(--list-item--border-color);padding:var(--list-item--padding);border-top-left-radius:var(--list-item--corner-radius);border-top-right-radius:var(--list-item--corner-radius)}.flow--list--header{display:flex;flex-direction:column;row-gap:var(--list--spacing)}.flow--list--header .flow--list--header--picker-list-and-search{display:flex;gap:var(--list--block-to-block-spacing);align-items:center;justify-content:space-between;flex-wrap:wrap-reverse}.flow--list--header .flow--list--header--picker-list{display:flex;flex-wrap:wrap;gap:var(--list--spacing)}.flow--list--header .flow--list--header--search-and-actions{display:flex;flex-grow:1;gap:var(--list--spacing);flex-wrap:wrap-reverse;justify-content:end}.flow--list--header .flow--list--header--search-field{max-width:180px;flex-grow:1;transition:max-width var(--transition--duration--default)}.flow--list--header .flow--list--header--search-field:has(input:focus){max-width:600px}.flow--list--header--active-filters{display:flex;flex-direction:row;column-gap:var(--list--spacing);row-gap:var(--list--spacing);flex-wrap:wrap;align-items:center}.flow--list--header--active-filters .flow--list--header--active-filters--clear-button{margin-inline-start:auto}.flow--list{display:flex;flex-direction:column;row-gap:var(--list--block-to-block-spacing);container-type:inline-size}.flow--list :has(.flow--list--list-summary) .flow--list--items,.flow--list :has(.flow--list--list-summary) .flow--list--table{border-top-left-radius:0;border-top-right-radius:0}.flow--list--items{display:flex;flex-direction:column;border-radius:var(--list-item--corner-radius);border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);overflow:hidden}.flow--list--items:empty{display:none}.flow--list--items.flow--list--items--is-loading{pointer-events:none;opacity:.5}.flow--list--items[data-empty=true]{border:none}.flow--list--items.flow--list--items--tiles{display:grid;border:none;gap:var(--list-item--spacing)}.flow--list--items--item{cursor:default;background-color:var(--list-item--background-color--default)}.flow--list--items--item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--list--items--item[data-focused],.flow--list--items--item:focus{outline-style:none}.flow--list--items--item[data-focus-visible],.flow--list--items--item:focus-visible{outline-style:auto}.flow--list--items--item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--list--items--item.flow--list--items--item{outline-offset:calc(var(--size-px--xs) * -1)}.flow--list--items--item:where(.flow--list--items--item--is-selected){background-color:var(--list-item--background-color--pressed)}.flow--list--items--item:not(:last-child){border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item:has(.flow--list--items--item--view--bottom-content:hover)):not(.flow--list--items--item--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item:has(.flow--list--items--item--view--bottom-content:hover))[data-pressed]{background-color:var(--list-item--background-color--pressed)}.flow--list--items--item.flow--list--items--item--tile{border:none}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action):not(.flow--list--items--item--is-selected):hover .flow--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action)[data-pressed] .flow--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--list--footer{font-size:var(--font-size-text--s);display:flex;flex-direction:column;align-items:center;row-gap:var(--list--spacing)}.flow--list--table.flow--list--table--is-loading{pointer-events:none;opacity:.5}.flow--list--table--row.flow--list--table--is-selected{background-color:var(--list-item--background-color--pressed)}.flow--list--table--row:where(.flow--list--table--has-action){cursor:default}.flow--list--table--row:where(.flow--list--table--has-action):not(.flow--list--table--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--table--row:where(.flow--list--table--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}