@mittwald/flow-react-components 0.1.0-alpha.71 → 0.1.0-alpha.73

package/dist/types/components/Action/ActionState.d.ts

@@ -1,24 +1,21 @@
 interface Options {
     feedback?: boolean;
 }
-export type ObservedActionState = Pick<ActionState, "isSucceeded" | "isPending" | "isExecuting" | "isFailed">;
+export type ActionStateValue = "isIdle" | "isSucceeded" | "isPending" | "isExecuting" | "isFailed";
 export declare class ActionState {
-    isPending: boolean;
-    isExecuting: boolean;
-    isSucceeded: boolean;
-    isFailed: boolean;
     private readonly feedback;
     private executionCount;
+    state: ActionStateValue;
     private constructor();
     static useNew(opts?: Options): ActionState;
-    resetFeedback(): void;
+    onStart(): void;
+    onSucceeded(): void;
+    onFailed(): void;
+    private updateState;
     private startFailedFeedback;
     private startSucceededFeedback;
     private onDone;
-    onFailed(): void;
-    onSucceeded(): void;
-    startPending(forExecutionCount: number): void;
-    onStart(): void;
-    useObserve(): ObservedActionState;
+    private startPending;
+    useState(): ActionStateValue;
 }
 export {};

package/dist/types/components/Action/ariaLive.d.ts

@@ -0,0 +1,9 @@
+import { ActionStateValue } from './ActionState';
+
+interface Options {
+    isPendingText?: string;
+    isSucceededText?: string;
+    isFailedText?: string;
+}
+export declare const useAriaAnnounceActionState: (actionState: ActionStateValue, options?: Options) => void;
+export {};

package/dist/types/components/Action/hooks/useCallAction.d.ts

@@ -7,6 +7,7 @@ interface Options {
 interface ActionController {
     state: ActionState;
     callAction: ActionFn;
+    callActionWithStateHandling: ActionFn;
 }
 export declare const useCallAction: (action?: ActionType, options?: Options) => ActionController;
 export {};

package/dist/types/components/Action/stories/Default.stories.d.ts

@@ -6,6 +6,8 @@ export default meta;
 type Story = StoryObj<typeof Action>;
 export declare const Default: Story;
 export declare const Async: Story;
+export declare const AsyncLong: Story;
 export declare const AsyncWithFeedback: Story;
+export declare const AsyncLongWithFeedback: Story;
 export declare const Nested: Story;
 export declare const NestedAsync: Story;

package/dist/types/components/Button/Button.d.ts

@@ -9,6 +9,7 @@ export interface ButtonProps extends PropsWithChildren<Omit<Aria.ButtonProps, "s
     style?: "plain" | "solid" | "soft";
     /** @default "m" */
     size?: "m" | "s";
+    "aria-disabled"?: boolean;
     isPending?: boolean;
     isSucceeded?: boolean;
     isFailed?: boolean;

package/dist/types/components/Button/stories/lib.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 
-export declare const syncfunction: import('@storybook/addon-actions').HandlerFunction;
+export declare const syncFunction: import('@storybook/addon-actions').HandlerFunction;
 export declare const asyncFunction: (...args: unknown[]) => Promise<void>;
+export declare const asyncLongFunction: (...args: unknown[]) => Promise<void>;
 export declare const button: React.JSX.Element;

package/dist/types/lib/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useOverlayState } from '../controller';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.71",
+  "version": "0.1.0-alpha.73",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -202,6 +202,10 @@
       "types": "./dist/types/components/Tooltip/index.d.ts",
       "import": "./dist/Tooltip.js"
     },
+    "./hooks": {
+      "types": "./dist/types/lib/hooks/index.d.ts",
+      "import": "./dist/hooks.js"
+    },
     "./nextjs": {
       "types": "./dist/types/integrations/nextjs/index.d.ts",
       "import": "./dist/nextjs.js"
@@ -230,7 +234,8 @@
     "test:unit": "run vitest run"
   },
   "dependencies": {
-    "@mittwald/react-tunnel": "^0.1.0-alpha.70",
+    "@chakra-ui/live-region": "^2.1.0",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.73",
     "@mittwald/react-use-promise": "^2.3.13",
     "@react-aria/utils": "^3.23.2",
     "@react-types/shared": "^3.22.1",
@@ -254,7 +259,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.70",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.73",
     "@mittwald/react-use-promise": "^2.3.13",
     "@nx/storybook": "^18.3.1",
     "@storybook/addon-a11y": "^8.0.8",
@@ -329,5 +334,5 @@
       "optional": true
     }
   },
-  "gitHead": "27c92cb3e5c850a59c0e4f39cdb2ff8c3a10f84f"
+  "gitHead": "c0214f8aa933b331a088bf27b8d753142e778f5e"
 }

package/dist/Action-B9PIFbjG.js

@@ -1,164 +0,0 @@
-"use client"
-/* */
-var S = Object.defineProperty;
-var P = (e, t, s) => t in e ? S(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var i = (e, t, s) => (P(e, typeof t != "symbol" ? t + "" : t, s), s);
-import M, { useState as k } from "react";
-import "./propsContext-CauylOgH.js";
-import { P as x } from "./PropsContextProvider-DZvwqHLP.js";
-import "@react-aria/utils";
-import "remeda";
-import "dot-prop";
-import { u as A } from "./useProps-Dx3m8kCJ.js";
-import { u as C } from "./useOverlayState-BnPe_CrX.js";
-import { makeObservable as y, observable as r, action as l } from "mobx";
-import { u as v } from "./useSelector-DpU7_HMO.js";
-const E = () => {
-}, O = (e) => {
-  const t = C();
-  return (e == null ? void 0 : e.type) === "function" ? e.fn : (e == null ? void 0 : e.type) === "toggleModal" ? t.toggle : (e == null ? void 0 : e.type) === "openModal" ? t.open : (e == null ? void 0 : e.type) === "closeModal" ? t.close : E;
-}, m = (e, t) => {
-  const s = [...t];
-  let n;
-  for (; s.length > 0; )
-    if (n = s.shift(), n) {
-      const o = n(...e);
-      if (o instanceof Promise)
-        return o.then(() => m(e, s));
-    }
-}, p = {
-  pending: 1e3,
-  succeeded: 1500,
-  failed: 2e3
-};
-class b {
-  constructor(t = {}) {
-    i(this, "isPending", !1);
-    i(this, "isExecuting", !1);
-    i(this, "isSucceeded", !1);
-    i(this, "isFailed", !1);
-    i(this, "feedback");
-    i(this, "executionCount", 0);
-    const { feedback: s = !1 } = t;
-    y(this, {
-      isPending: r,
-      isExecuting: r,
-      isSucceeded: r,
-      isFailed: r,
-      onStart: l.bound,
-      onSucceeded: l.bound,
-      onFailed: l.bound,
-      resetFeedback: l.bound,
-      startPending: l.bound
-    }), this.feedback = s;
-  }
-  static useNew(t) {
-    return k(new b(t))[0];
-  }
-  resetFeedback() {
-    this.isFailed = !1, this.isSucceeded = !1;
-  }
-  startFailedFeedback() {
-    this.feedback && (this.isFailed = !0, setTimeout(this.resetFeedback, p.failed));
-  }
-  startSucceededFeedback() {
-    this.feedback && (this.isSucceeded = !0, setTimeout(this.resetFeedback, p.succeeded));
-  }
-  onDone(t) {
-    this.isExecuting = !1, this.isPending = !1, t ? this.startSucceededFeedback() : this.startFailedFeedback();
-  }
-  onFailed() {
-    this.onDone(!1);
-  }
-  onSucceeded() {
-    this.onDone(!0);
-  }
-  startPending(t) {
-    this.isExecuting && t === this.executionCount && (this.isPending = !0);
-  }
-  onStart() {
-    const t = ++this.executionCount;
-    this.isExecuting = !0, setTimeout(() => this.startPending(t), p.pending);
-  }
-  useObserve() {
-    return v(
-      () => ({
-        isPending: this.isPending,
-        isFailed: this.isFailed,
-        isExecuting: this.isExecuting,
-        isSucceeded: this.isSucceeded
-      }),
-      [this]
-    );
-  }
-}
-const w = (e, t) => {
-  const { action: s } = A("Action", {}), n = O(e), o = b.useNew(t);
-  return {
-    callAction: (...a) => {
-      try {
-        o.onStart();
-        const c = m(a, [n, s]);
-        if (c instanceof Promise)
-          return c.then(o.onSucceeded).catch(o.onFailed);
-        o.onSucceeded();
-      } catch {
-        o.onFailed();
-      }
-    },
-    state: o
-  };
-};
-function g(e) {
-  return typeof e == "boolean" ? void 0 : e;
-}
-const u = {
-  fn: (e) => ({
-    type: "function",
-    fn: e
-  }),
-  openModal: (e) => ({
-    type: "openModal",
-    controller: g(e)
-  }),
-  closeModal: (e) => ({
-    type: "closeModal",
-    controller: g(e)
-  }),
-  toggleModal: (e) => ({
-    type: "toggleModal",
-    controller: g(e)
-  })
-}, G = (e) => {
-  const {
-    children: t,
-    feedback: s,
-    action: n,
-    toggleModal: o,
-    openModal: f,
-    closeModal: a
-  } = e, c = n ? u.fn(n) : o ? u.toggleModal(o) : f ? u.openModal(f) : a ? u.closeModal(a) : void 0, h = w(c, { feedback: s }), d = h.state.useObserve(), F = {
-    Button: {
-      onPress: h.callAction,
-      isPending: d.isPending,
-      isDisabled: d.isExecuting,
-      isSucceeded: d.isSucceeded,
-      isFailed: d.isFailed
-    },
-    Action: {
-      action: h.callAction
-    }
-  };
-  return /* @__PURE__ */ M.createElement(
-    x,
-    {
-      mergeInParentContext: !0,
-      props: F,
-      dependencies: Object.values(d)
-    },
-    t
-  );
-};
-export {
-  G as A
-};

package/dist/Button-B2GKVrxY.js

@@ -1,102 +0,0 @@
-"use client"
-/* */
-import o from "react";
-import * as E from "react-aria-components";
-import x from "clsx";
-import { C } from "./ClearPropsContext-CeCMjUK9.js";
-import { P as I } from "./PropsContextProvider-DZvwqHLP.js";
-import "@react-aria/utils";
-import "./propsContext-CauylOgH.js";
-import "remeda";
-import "@tabler/icons-react";
-import "./Icon-DdQwrIup.js";
-import { I as N, a as h } from "./IconSucceeded-BM7cipIv.js";
-import { W as d } from "./Wrap-DGT1h1o3.js";
-import { T as z } from "./Text-CBzyk1oM.js";
-import { f as L } from "./flowComponent-BuF0s2uG.js";
-import { useLocalizedStringFormatter as B } from "react-aria";
-import { L as A } from "./LoadingSpinner-DqsZ7IDL.js";
-const D = "flow--button", T = "flow--button--avatar", K = "flow--button--icon", U = "flow--button--text", W = "flow--button--content", $ = "flow--button--state-icon", R = "flow--button--is-succeeded", j = "flow--button--is-failed", k = "flow--button--is-pending", q = "flow--button--plain", G = "flow--button--primary", H = "flow--button--solid", J = "flow--button--accent", M = "flow--button--danger", O = "flow--button--secondary", Q = "flow--button--soft", e = {
-  button: D,
-  avatar: T,
-  icon: K,
-  text: U,
-  content: W,
-  stateIcon: $,
-  "size-s": "flow--button--size-s",
-  isSucceeded: R,
-  isFailed: j,
-  isPending: k,
-  plain: q,
-  primary: G,
-  solid: H,
-  accent: J,
-  danger: M,
-  secondary: O,
-  soft: Q
-}, V = {
-  "de-DE": {
-    "button.isFailed": "Fehlgeschlagen",
-    "button.isPending": "Ausstehend",
-    "button.isSucceeded": "Erfolgreich"
-  },
-  "en-EN": {
-    "button.isFailed": "Failed",
-    "button.isPending": "Pending",
-    "button.isSucceeded": "Succeeded"
-  }
-}, X = (t) => ((t.isPending || t.isSucceeded || t.isFailed) && (t = { ...t }, t.onPress = void 0, t.onPressStart = void 0, t.onPressEnd = void 0, t.onPressChange = void 0, t.onPressUp = void 0, t.onKeyDown = void 0, t.onKeyUp = void 0), t), ut = L("Button", (t) => {
-  t = X(t);
-  const {
-    variant: m = "primary",
-    style: u = "solid",
-    children: c,
-    className: f,
-    size: i = "m",
-    isPending: a,
-    isDisabled: b,
-    isSucceeded: n,
-    isFailed: s,
-    "aria-label": g,
-    ref: P,
-    ...w
-  } = t, v = x(
-    e.button,
-    a && e.isPending,
-    n && e.isSucceeded,
-    s && e.isFailed,
-    e[`size-${i}`],
-    e[m],
-    e[u],
-    f
-  ), S = {
-    Icon: {
-      className: e.icon,
-      "aria-hidden": !0,
-      size: i
-    },
-    Text: {
-      className: e.text
-    },
-    Avatar: {
-      className: e.avatar
-    }
-  }, p = B(V), F = n || s || a ? p.format(
-    `button.${n ? "isSucceeded" : s ? "isFailed" : "isPending"}`
-  ) : void 0, r = n ? N : s ? h : a ? A : void 0, l = r && /* @__PURE__ */ o.createElement(r, { size: i, className: e.stateIcon }), y = typeof c == "string";
-  return /* @__PURE__ */ o.createElement(C, null, /* @__PURE__ */ o.createElement(
-    E.Button,
-    {
-      className: v,
-      isDisabled: b,
-      "aria-label": F ?? g,
-      ref: P,
-      ...w
-    },
-    /* @__PURE__ */ o.createElement(I, { props: S }, /* @__PURE__ */ o.createElement(d, { if: l }, /* @__PURE__ */ o.createElement("span", { className: e.content }, /* @__PURE__ */ o.createElement(d, { if: y }, /* @__PURE__ */ o.createElement(z, null, c))))),
-    l
-  ));
-});
-export {
-  ut as B
-};