@mittwald/flow-react-components 0.1.0-alpha.302 → 0.1.0-alpha.304

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.304](https://github.com/mittwald/flow/compare/0.1.0-alpha.303...0.1.0-alpha.304) (2024-10-28)
+
+### Bug Fixes
+
+- **Select:** fix overflow in select field
+  ([c571018](https://github.com/mittwald/flow/commit/c571018830230b2441b97af39eb0d5e42508cd13))
+
+### Features
+
+- **Select:** Support numbers in select field
+  ([29a9d21](https://github.com/mittwald/flow/commit/29a9d21baf32f68f2ede56204521a2957797330c))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.303](https://github.com/mittwald/flow/compare/0.1.0-alpha.302...0.1.0-alpha.303) (2024-10-28)
+
+### Bug Fixes
+
+- NumberField applying disabled styles when aria-disabled="false"
+  ([#911](https://github.com/mittwald/flow/issues/911))
+  ([0d20ab3](https://github.com/mittwald/flow/commit/0d20ab383214395f11ce7dda4ac26ba3698ff408))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [0.1.0-alpha.302](https://github.com/mittwald/flow/compare/0.1.0-alpha.301...0.1.0-alpha.302) (2024-10-24)
 
 **Note:** Version bump only for package @mittwald/flow-react-components

package/dist/css/Header.css

@@ -1 +1 @@
-.flow--section--section-header{display:flex;gap:var(--section-header--heading-to-actions-spacing);justify-content:space-between;align-items:center;flex-wrap:wrap}.flow--section--section-header .flow--section--section-header--actions{display:flex;gap:var(--section-header--action-to-action-spacing);margin-inline-start:auto;flex-wrap:wrap}
+.flow--section--section-header{display:flex;gap:var(--section-header--heading-to-actions-spacing);justify-content:space-between;align-items:center;flex-wrap:wrap}.flow--section--section-header .flow--section--section-header--actions{display:flex;gap:var(--section-header--action-to-action-spacing);margin-inline-start:auto;flex-wrap:wrap}.flow--section--section-header:not(:first-child){margin-top:var(--section--sub-heading-spacing)}

package/dist/css/NumberField.css

@@ -1 +1 @@
-.flow--number-field--group{order:2;display:grid;grid-template-columns:1fr max-content;grid-template-areas:"input increment" "input decrement"}.flow--number-field--group .flow--number-field--input{grid-area:input;border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2}.flow--number-field--group .flow--number-field--input::placeholder{color:var(--form-control--placeholder-color--default)}.flow--number-field--group .flow--number-field--input:hover{background-color:var(--form-control--background-color--hover)}.flow--number-field--group .flow--number-field--input[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--number-field--group .flow--number-field--input:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--number-field--group .flow--number-field--input:focus-visible,.flow--number-field--group .flow--number-field--input:focus{outline:none}.flow--number-field--group .flow--number-field--input[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--number-field--group .flow--number-field--input:disabled,.flow--number-field--group .flow--number-field--input[data-disabled],[aria-disabled] .flow--number-field--group .flow--number-field--input{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--number-field--group .flow--number-field--input:disabled::placeholder,.flow--number-field--group .flow--number-field--input[data-disabled]::placeholder,[aria-disabled] .flow--number-field--group .flow--number-field--input::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--number-field--group .flow--number-field--decrement-button{grid-area:decrement}.flow--number-field--group .flow--number-field--increment-button{grid-area:increment}.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group .flow--number-field--increment-button{border-width:var(--form-control--border-width);border-color:var(--form-control--border-color--default);border-style:solid}.flow--number-field--group[aria-invalid] .flow--number-field--decrement-button,.flow--number-field--group[aria-invalid] .flow--number-field--increment-button{border-color:var(--form-control--border-color--invalid)}.flow--number-field--group[data-focus-within] .flow--number-field--decrement-button,.flow--number-field--group[data-focus-within] .flow--number-field--increment-button{border-color:var(--form-control--border-color--focused)}.flow--number-field--group[aria-disabled] .flow--number-field--decrement-button,.flow--number-field--group[aria-disabled] .flow--number-field--increment-button{border-color:var(--form-control--border-color--disabled)}@media (pointer: fine){.flow--number-field--group .flow--number-field--input{border-start-end-radius:0;border-end-end-radius:0}.flow--number-field--group .flow--number-field--increment-button,.flow--number-field--group .flow--number-field--decrement-button{border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;padding-block:0}.flow--number-field--group .flow--number-field--increment-button .flow--number-field--coarse-pointer-icon,.flow--number-field--group .flow--number-field--decrement-button .flow--number-field--coarse-pointer-icon{display:none}.flow--number-field--group .flow--number-field--decrement-button{border-start-end-radius:0}.flow--number-field--group .flow--number-field--increment-button{border-block-end:none;border-end-end-radius:0}}@media (pointer: coarse){.flow--number-field--group{grid-template-columns:auto 1fr auto;grid-template-areas:"decrement input increment";max-width:100%}.flow--number-field--group .flow--number-field--input{border-radius:0;min-width:0}.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group .flow--number-field--increment-button{padding-inline:var(--button--padding)}.flow--number-field--group .flow--number-field--decrement-button .flow--number-field--coarse-pointer-icon,.flow--number-field--group .flow--number-field--increment-button .flow--number-field--coarse-pointer-icon{width:var(--icon--size--m);height:var(--icon--size--m)}.flow--number-field--group .flow--number-field--decrement-button svg:not(.flow--number-field--coarse-pointer-icon),.flow--number-field--group .flow--number-field--increment-button svg:not(.flow--number-field--coarse-pointer-icon){display:none}.flow--number-field--group .flow--number-field--decrement-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.flow--number-field--group .flow--number-field--increment-button{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}}
+.flow--number-field--group{order:2;display:grid;grid-template-columns:1fr max-content;grid-template-areas:"input increment" "input decrement"}.flow--number-field--group .flow--number-field--input{grid-area:input;border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2}.flow--number-field--group .flow--number-field--input::placeholder{color:var(--form-control--placeholder-color--default)}.flow--number-field--group .flow--number-field--input:hover{background-color:var(--form-control--background-color--hover)}.flow--number-field--group .flow--number-field--input[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--number-field--group .flow--number-field--input:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--number-field--group .flow--number-field--input:focus-visible,.flow--number-field--group .flow--number-field--input:focus{outline:none}.flow--number-field--group .flow--number-field--input[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--number-field--group .flow--number-field--input:disabled,.flow--number-field--group .flow--number-field--input[data-disabled],[aria-disabled] .flow--number-field--group .flow--number-field--input{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--number-field--group .flow--number-field--input:disabled::placeholder,.flow--number-field--group .flow--number-field--input[data-disabled]::placeholder,[aria-disabled] .flow--number-field--group .flow--number-field--input::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--number-field--group .flow--number-field--decrement-button{grid-area:decrement}.flow--number-field--group .flow--number-field--increment-button{grid-area:increment}.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group .flow--number-field--increment-button{border-width:var(--form-control--border-width);border-color:var(--form-control--border-color--default);border-style:solid}.flow--number-field--group[aria-invalid] .flow--number-field--decrement-button,.flow--number-field--group[aria-invalid] .flow--number-field--increment-button{border-color:var(--form-control--border-color--invalid)}.flow--number-field--group[data-focus-within] .flow--number-field--decrement-button,.flow--number-field--group[data-focus-within] .flow--number-field--increment-button{border-color:var(--form-control--border-color--focused)}.flow--number-field--group[aria-disabled=true] .flow--number-field--decrement-button,.flow--number-field--group[aria-disabled=true] .flow--number-field--increment-button{border-color:var(--form-control--border-color--disabled)}@media (pointer: fine){.flow--number-field--group .flow--number-field--input{border-start-end-radius:0;border-end-end-radius:0}.flow--number-field--group .flow--number-field--increment-button,.flow--number-field--group .flow--number-field--decrement-button{border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;padding-block:0}.flow--number-field--group .flow--number-field--increment-button .flow--number-field--coarse-pointer-icon,.flow--number-field--group .flow--number-field--decrement-button .flow--number-field--coarse-pointer-icon{display:none}.flow--number-field--group .flow--number-field--decrement-button{border-start-end-radius:0}.flow--number-field--group .flow--number-field--increment-button{border-block-end:none;border-end-end-radius:0}}@media (pointer: coarse){.flow--number-field--group{grid-template-columns:auto 1fr auto;grid-template-areas:"decrement input increment";max-width:100%}.flow--number-field--group .flow--number-field--input{border-radius:0;min-width:0}.flow--number-field--group .flow--number-field--decrement-button,.flow--number-field--group .flow--number-field--increment-button{padding-inline:var(--button--padding)}.flow--number-field--group .flow--number-field--decrement-button .flow--number-field--coarse-pointer-icon,.flow--number-field--group .flow--number-field--increment-button .flow--number-field--coarse-pointer-icon{width:var(--icon--size--m);height:var(--icon--size--m)}.flow--number-field--group .flow--number-field--decrement-button svg:not(.flow--number-field--coarse-pointer-icon),.flow--number-field--group .flow--number-field--increment-button svg:not(.flow--number-field--coarse-pointer-icon){display:none}.flow--number-field--group .flow--number-field--decrement-button{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.flow--number-field--group .flow--number-field--increment-button{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}}

package/dist/css/Section.css

@@ -1 +1 @@
-.flow--section{display:flex;flex-direction:column;row-gap:var(--section--content-to-content-spacing);container-type:inline-size}.flow--section+.flow--section{margin-block-start:var(--section--section-to-section-spacing);border-block-start-width:var(--section--border-width);border-block-start-style:var(--section--border-style);border-block-start-color:var(--section--border-color);padding-block-start:var(--section--section-to-section-spacing)}.flow--section .flow--heading~.flow--heading,.flow--section .flow--section--section-header~.flow--section--section-header,.flow--section .flow--heading~.flow--section--section-header,.flow--section .flow--section--section-header~.flow--heading{margin-top:var(--section--sub-heading-spacing)}
+.flow--section{display:flex;flex-direction:column;row-gap:var(--section--content-to-content-spacing);container-type:inline-size}.flow--section+.flow--section{margin-block-start:var(--section--section-to-section-spacing);border-block-start-width:var(--section--border-width);border-block-start-style:var(--section--border-style);border-block-start-color:var(--section--border-color);padding-block-start:var(--section--section-to-section-spacing)}.flow--section .flow--section--heading:not(:first-child){margin-top:var(--section--sub-heading-spacing)}

package/dist/css/Select.css

@@ -1 +1 @@
-.flow--select .flow--select--toggle{display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:var(--font-size--default);text-align:left;border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2}.flow--select .flow--select--toggle::placeholder{color:var(--form-control--placeholder-color--default)}.flow--select .flow--select--toggle:hover{background-color:var(--form-control--background-color--hover)}.flow--select .flow--select--toggle[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--select .flow--select--toggle:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--select .flow--select--toggle:focus-visible,.flow--select .flow--select--toggle:focus{outline:none}.flow--select .flow--select--toggle[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--select .flow--select--toggle:disabled,.flow--select .flow--select--toggle[data-disabled],[aria-disabled] .flow--select .flow--select--toggle{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--select .flow--select--toggle:disabled::placeholder,.flow--select .flow--select--toggle[data-disabled]::placeholder,[aria-disabled] .flow--select .flow--select--toggle::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--select[data-invalid] .flow--select--toggle{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--select--options--popover{width:var(--trigger-width)}.flow--select--options{display:flex;flex-direction:column;row-gap:var(--menu--item-to-item-spacing);outline:none}.flow--select--option{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center}.flow--select--option:not(a){cursor:default}.flow--select--option{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--select--option[data-focused],.flow--select--option:focus{outline-style:none}.flow--select--option[data-focus-visible],.flow--select--option:focus-visible{outline-style:auto}.flow--select--option[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--select--option{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--select--option .flow--select--option--icon{order:0;color:var(--menu-item--icon-color--default)}.flow--select--option .flow--select--option--text{order:1}.flow--select--option .flow--select--option--icon+.flow--select--option--text{margin-inline-start:var(--menu-item--icon-to-text-spacing)}.flow--select--option:hover{background-color:var(--menu-item--background-color--hover)}.flow--select--option[data-focused]{outline-style:none}.flow--select--option[data-focus-visible]{outline-style:solid}.flow--select--option:not(:has(.flow--select--option--control-icon))[aria-current],.flow--select--option:not(:has(.flow--select--option--control-icon))[data-selected]{background-color:var(--menu-item--background-color--current);font-weight:var(--menu-item--font-weight--current);color:var(--menu-item--color--current)}.flow--select--option[aria-current] .flow--select--option--icon,.flow--select--option[data-selected] .flow--select--option--icon{color:var(--menu-item--icon-color--current)}.flow--select--option[aria-disabled]{background-color:var(--menu-item--disabled-background-color);color:var(--menu-item--disabled-color)}
+.flow--select .flow--select--toggle{display:flex;justify-content:space-between;align-items:center;font-weight:400;font-size:var(--font-size--default);text-align:left;border-width:var(--form-control--border-width);border-style:var(--form-control--border-style);border-radius:var(--form-control--corner-radius);padding-block:calc(var(--form-control--padding-y) - var(--form-control--border-width));padding-inline:var(--form-control--padding-x);color:var(--form-control--content-color--default);border-color:var(--form-control--border-color--default);background-color:var(--form-control--background-color--default);transition-property:color,background-color,border-color;transition-duration:var(--transition--duration--default);order:2}.flow--select .flow--select--toggle::placeholder{color:var(--form-control--placeholder-color--default)}.flow--select .flow--select--toggle:hover{background-color:var(--form-control--background-color--hover)}.flow--select .flow--select--toggle[data-invalid]{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--select .flow--select--toggle:focus-within{border-color:var(--form-control--border-color--focused);background-color:var(--form-control--background-color--focused)}.flow--select .flow--select--toggle:focus-visible,.flow--select .flow--select--toggle:focus{outline:none}.flow--select .flow--select--toggle[data-selected]{color:var(--form-control--content-color--selected);border-color:var(--form-control--border-color--selected);background-color:var(--form-control--background-color--selected)}.flow--select .flow--select--toggle:disabled,.flow--select .flow--select--toggle[data-disabled],[aria-disabled] .flow--select .flow--select--toggle{color:var(--form-control--content-color--disabled);border-color:var(--form-control--border-color--disabled);background-color:var(--form-control--background-color--disabled)}.flow--select .flow--select--toggle:disabled::placeholder,.flow--select .flow--select--toggle[data-disabled]::placeholder,[aria-disabled] .flow--select .flow--select--toggle::placeholder{color:var(--form-control--placeholder-color--disabled)}.flow--select[data-invalid] .flow--select--toggle{border-color:var(--form-control--border-color--invalid);background-color:var(--form-control--background-color--invalid)}.flow--select .react-aria-SelectValue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow--select--options--popover{width:var(--trigger-width)}.flow--select--options{display:flex;flex-direction:column;row-gap:var(--menu--item-to-item-spacing);outline:none}.flow--select--option{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center}.flow--select--option:not(a){cursor:default}.flow--select--option{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--select--option[data-focused],.flow--select--option:focus{outline-style:none}.flow--select--option[data-focus-visible],.flow--select--option:focus-visible{outline-style:auto}.flow--select--option[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--select--option{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--select--option .flow--select--option--icon{order:0;color:var(--menu-item--icon-color--default)}.flow--select--option .flow--select--option--text{order:1}.flow--select--option .flow--select--option--icon+.flow--select--option--text{margin-inline-start:var(--menu-item--icon-to-text-spacing)}.flow--select--option:hover{background-color:var(--menu-item--background-color--hover)}.flow--select--option[data-focused]{outline-style:none}.flow--select--option[data-focus-visible]{outline-style:solid}.flow--select--option:not(:has(.flow--select--option--control-icon))[aria-current],.flow--select--option:not(:has(.flow--select--option--control-icon))[data-selected]{background-color:var(--menu-item--background-color--current);font-weight:var(--menu-item--font-weight--current);color:var(--menu-item--color--current)}.flow--select--option[aria-current] .flow--select--option--icon,.flow--select--option[data-selected] .flow--select--option--icon{color:var(--menu-item--icon-color--current)}.flow--select--option[aria-disabled]{background-color:var(--menu-item--disabled-background-color);color:var(--menu-item--disabled-color)}

package/dist/js/List.js

@@ -31,7 +31,7 @@ import "./context-Cf7tqFtF.js";
 import { u as bt } from "./useOnChange-C1Quwyuz.js";
 import { S as vt } from "./SearchField-D_McGKsS.js";
 import { H as Q } from "./Heading-CB3ASpaU.js";
-import { S as yt } from "./Section-BXIIRoBN.js";
+import { S as yt } from "./Section-DszRJOuI.js";
 import { getProperty as wt } from "dot-prop";
 import { hash as Ee } from "object-code";
 import V from "zod";

package/dist/js/Section-DszRJOuI.js

@@ -0,0 +1,55 @@
+"use client"
+/* */
+import e, { useId as u } from "react";
+import x from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { P as a } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { f as c } from "./flowComponent-uZXy7sF4.js";
+import * as s from "react-aria-components";
+import { s as C } from "./ContextMenu.module-BZingr2B.js";
+const g = "flow--section", h = "flow--section--heading", i = {
+  section: g,
+  heading: h
+}, S = c(
+  "ContextMenuSection",
+  (n) => {
+    const { children: t } = n, o = {
+      Heading: {
+        level: 5,
+        wrapWith: /* @__PURE__ */ e.createElement(s.Header, null)
+      }
+    };
+    return /* @__PURE__ */ e.createElement(s.Section, { className: C.section }, /* @__PURE__ */ e.createElement(a, { props: o, mergeInParentContext: !0 }, t));
+  }
+), M = c("Section", (n) => {
+  const {
+    children: t,
+    className: o,
+    refProp: l,
+    renderContextMenuSection: m,
+    ...p
+  } = n;
+  if (!t)
+    return null;
+  if (m)
+    return /* @__PURE__ */ e.createElement(S, null, t);
+  const d = x(i.section, o), r = u(), f = {
+    Heading: {
+      level: 2,
+      id: r,
+      className: i.heading
+    },
+    Header: {
+      renderSectionHeader: !0
+    },
+    List: {
+      "aria-labelledby": r
+    }
+  };
+  return /* @__PURE__ */ e.createElement("section", { ...p, className: d, ref: l }, /* @__PURE__ */ e.createElement(a, { props: f, mergeInParentContext: !0 }, t));
+});
+export {
+  M as S
+};

package/dist/js/Section.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { S as t } from "./Section-BXIIRoBN.js";
+import { S as t } from "./Section-DszRJOuI.js";
 export {
   t as Section,
   t as default