@mittwald/flow-react-components 0.2.0-alpha.6 → 0.2.0-alpha.600

package/dist/js/components/src/components/Accordion/Accordion.mjs

@@ -0,0 +1,83 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useId } from 'react';
+import clsx from 'clsx';
+import styles from './Accordion.module.scss.mjs';
+import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { Button } from '../Button/Button.mjs';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconChevronDown } from '../Icon/components/icons/IconChevronDown.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import { Activity } from '../Activity/Activity.mjs';
+
+const Accordion = (props) => {
+  const {
+    children,
+    className,
+    defaultExpanded = false,
+    variant = "default",
+    ...rest
+  } = props;
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const rootClassName = clsx(
+    styles.accordion,
+    expanded && styles.expanded,
+    className,
+    variant === "outline" && styles.outline
+  );
+  const headerId = useId();
+  const contentId = useId();
+  const headerButton = (children2) => /* @__PURE__ */ jsxs(
+    Button,
+    {
+      tunnelId: null,
+      unstyled: true,
+      "aria-expanded": expanded,
+      className: styles.headerButton,
+      onPress: () => setExpanded((expanded2) => !expanded2),
+      "aria-controls": contentId,
+      children: [
+        children2,
+        /* @__PURE__ */ jsx(IconChevronDown, { className: styles.chevron })
+      ]
+    }
+  );
+  const propsContext = {
+    Content: {
+      className: styles.contentInner,
+      tunnelId: "content"
+    },
+    Heading: {
+      className: styles.header,
+      level: 4,
+      size: "xs",
+      children: dynamic((props2) => headerButton(props2.children))
+    },
+    Label: {
+      className: styles.header,
+      children: dynamic((props2) => headerButton(props2.children))
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { ...rest, className: rootClassName, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, dependencies: [expanded], children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-labelledby": headerId,
+        id: contentId,
+        role: "region",
+        hidden: !expanded,
+        className: styles.content,
+        children: /* @__PURE__ */ jsx(Activity, { isActive: expanded, inactiveDelay: 1e3, children: /* @__PURE__ */ jsx(TunnelExit, { id: "content" }) })
+      }
+    )
+  ] }) }) });
+};
+
+export { Accordion, Accordion as default };
+//# sourceMappingURL=Accordion.mjs.map

package/dist/js/components/src/components/Accordion/Accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.mjs","sources":["../../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { useId, useState } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Accordion.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Activity } from \"@/components/Activity\";\n\nexport interface AccordionProps\n  extends PropsWithChildren<ComponentProps<\"div\">> {\n  /** Whether the accordion should be initially expanded. */\n  defaultExpanded?: boolean;\n  /** The visual variant of the accordion. @default \"default\" */\n  variant?: \"default\" | \"outline\";\n}\n\n/** @flr-generate all */\nexport const Accordion: FC<AccordionProps> = (props) => {\n  const {\n    children,\n    className,\n    defaultExpanded = false,\n    variant = \"default\",\n    ...rest\n  } = props;\n  const [expanded, setExpanded] = useState(defaultExpanded);\n\n  const rootClassName = clsx(\n    styles.accordion,\n    expanded && styles.expanded,\n    className,\n    variant === \"outline\" && styles.outline,\n  );\n\n  const headerId = useId();\n  const contentId = useId();\n\n  const headerButton = (children: ReactNode) => (\n    <Button\n      tunnelId={null}\n      unstyled\n      aria-expanded={expanded}\n      className={styles.headerButton}\n      onPress={() => setExpanded((expanded) => !expanded)}\n      aria-controls={contentId}\n    >\n      {children}\n      <IconChevronDown className={styles.chevron} />\n    </Button>\n  );\n\n  const propsContext: PropsContext = {\n    Content: {\n      className: styles.contentInner,\n      tunnelId: \"content\",\n    },\n    Heading: {\n      className: styles.header,\n      level: 4,\n      size: \"xs\",\n      children: dynamic((props) => headerButton(props.children)),\n    },\n    Label: {\n      className: styles.header,\n      children: dynamic((props) => headerButton(props.children)),\n    },\n  };\n\n  return (\n    <div {...rest} className={rootClassName}>\n      <PropsContextProvider props={propsContext} dependencies={[expanded]}>\n        <TunnelProvider>\n          {children}\n          <div\n            aria-labelledby={headerId}\n            id={contentId}\n            role=\"region\"\n            hidden={!expanded}\n            className={styles.content}\n          >\n            <Activity isActive={expanded} inactiveDelay={1000}>\n              <TunnelExit id=\"content\" />\n            </Activity>\n          </div>\n        </TunnelProvider>\n      </PropsContextProvider>\n    </div>\n  );\n};\n\nexport default Accordion;\n"],"names":["children","expanded","props"],"mappings":";;;;;;;;;;;;;;;AAoBO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA,GAAkB,KAAA;AAAA,IAClB,OAAA,GAAU,SAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,eAAe,CAAA;AAExD,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,SAAA;AAAA,IACP,YAAY,MAAA,CAAO,QAAA;AAAA,IACnB,SAAA;AAAA,IACA,OAAA,KAAY,aAAa,MAAA,CAAO;AAAA,GAClC;AAEA,EAAA,MAAM,WAAW,KAAA,EAAM;AACvB,EAAA,MAAM,YAAY,KAAA,EAAM;AAExB,EAAA,MAAM,YAAA,GAAe,CAACA,SAAAA,qBACpB,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,IAAA;AAAA,MACV,QAAA,EAAQ,IAAA;AAAA,MACR,eAAA,EAAe,QAAA;AAAA,MACf,WAAW,MAAA,CAAO,YAAA;AAAA,MAClB,SAAS,MAAM,WAAA,CAAY,CAACC,SAAAA,KAAa,CAACA,SAAQ,CAAA;AAAA,MAClD,eAAA,EAAe,SAAA;AAAA,MAEd,QAAA,EAAA;AAAA,QAAAD,SAAAA;AAAA,wBACD,GAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAW,MAAA,CAAO,OAAA,EAAS;AAAA;AAAA;AAAA,GAC9C;AAGF,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,YAAA;AAAA,MAClB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,KAAA,EAAO,CAAA;AAAA,MACP,IAAA,EAAM,IAAA;AAAA,MACN,UAAU,OAAA,CAAQ,CAACE,WAAU,YAAA,CAAaA,MAAAA,CAAM,QAAQ,CAAC;AAAA,KAC3D;AAAA,IACA,KAAA,EAAO;AAAA,MACL,WAAW,MAAA,CAAO,MAAA;AAAA,MAClB,UAAU,OAAA,CAAQ,CAACA,WAAU,YAAA,CAAaA,MAAAA,CAAM,QAAQ,CAAC;AAAA;AAC3D,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,WAAW,aAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,cAAc,YAAA,EAAc,CAAC,QAAQ,CAAA,EAChE,+BAAC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,iBAAA,EAAiB,QAAA;AAAA,QACjB,EAAA,EAAI,SAAA;AAAA,QACJ,IAAA,EAAK,QAAA;AAAA,QACL,QAAQ,CAAC,QAAA;AAAA,QACT,WAAW,MAAA,CAAO,OAAA;AAAA,QAElB,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,QAAA,EAAU,QAAA,EAAU,aAAA,EAAe,KAC3C,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,SAAA,EAAU,CAAA,EAC3B;AAAA;AAAA;AACF,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/Accordion/Accordion.module.scss.mjs

@@ -0,0 +1,23 @@
+"use client"
+/* */
+const accordion = "flow--accordion";
+const header = "flow--accordion--header";
+const headerButton = "flow--accordion--header-button";
+const content = "flow--accordion--content";
+const contentInner = "flow--accordion--content-inner";
+const chevron = "flow--accordion--chevron";
+const outline = "flow--accordion--outline";
+const expanded = "flow--accordion--expanded";
+const styles = {
+	accordion: accordion,
+	header: header,
+	headerButton: headerButton,
+	content: content,
+	contentInner: contentInner,
+	chevron: chevron,
+	outline: outline,
+	expanded: expanded
+};
+
+export { accordion, chevron, content, contentInner, styles as default, expanded, header, headerButton, outline };
+//# sourceMappingURL=Accordion.module.scss.mjs.map

package/dist/js/components/src/components/Accordion/Accordion.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/js/components/src/components/Action/Action.mjs

@@ -0,0 +1,91 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { ActionModel } from './models/ActionModel.mjs';
+import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { ActionContextProvider } from './context.mjs';
+import { useActionStateContext } from './models/ActionStateContext.mjs';
+import { useConfirmationModalButtonSlot } from './hooks/useConfirmationModalButtonSlot.mjs';
+import { useActionButtonState } from './hooks/useActionButtonState.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+
+const actionButtonContext = {
+  onPress: dynamic((props) => {
+    const action = ActionModel.use();
+    const confirmAction = ActionModel.useConfirmationAction();
+    const isConfirmationButton = useConfirmationModalButtonSlot(props) === "primary";
+    const isAbortButton = useConfirmationModalButtonSlot(props) === "abort";
+    if (isAbortButton) {
+      return action.confirmationModalController.close;
+    }
+    return isConfirmationButton ? confirmAction.execute : action.execute;
+  }),
+  isPending: dynamic((props) => {
+    const actionState = useActionButtonState(props);
+    return props.isPending ?? actionState === "isPending";
+  }),
+  isSucceeded: dynamic((props) => {
+    const actionState = useActionButtonState(props);
+    return props.isSucceeded ?? actionState === "isSucceeded";
+  }),
+  isFailed: dynamic((props) => {
+    const actionState = useActionButtonState(props);
+    return props.isFailed ?? actionState === "isFailed";
+  }),
+  "aria-disabled": dynamic((props) => {
+    const state = useActionButtonState(props);
+    const someActionInContextIsBusy = useActionStateContext().useIsBusy();
+    return props["aria-disabled"] ?? (state === "isExecuting" || someActionInContextIsBusy);
+  })
+};
+const Action = flowComponent(
+  "Action",
+  (props) => {
+    const {
+      children,
+      actionModel: actionModelFromProps,
+      ...actionProps
+    } = props;
+    const newActionModel = ActionModel.useNew(actionProps);
+    const actionModel = actionModelFromProps ?? newActionModel;
+    const propsContext = {
+      Button: actionButtonContext,
+      SubmitButton: actionButtonContext,
+      Link: {
+        onPress: dynamic(() => ActionModel.use().execute)
+      },
+      MenuItem: {
+        onAction: dynamic(() => ActionModel.use().execute)
+      },
+      Modal: {
+        slot: dynamic((props2) => {
+          const { slot } = props2;
+          const action = ActionModel.use();
+          action.needsConfirmation = slot === "actionConfirm";
+          return slot;
+        }),
+        isDismissable: dynamic((props2) => {
+          const action = ActionModel.use();
+          const actionState = action.state.useValue();
+          return actionState === "isExecuting" || actionState === "isPending" ? false : props2.isDismissable;
+        }),
+        controller: dynamic(() => {
+          const action = ActionModel.use();
+          return action.needsConfirmation ? action.confirmationModalController : action.getOverlayController("Modal");
+        }),
+        ActionGroup: {
+          Button: actionButtonContext
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(ActionContextProvider, { value: actionModel, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
+  },
+  {
+    type: "provider"
+  }
+);
+
+export { Action, Action as default };
+//# sourceMappingURL=Action.mjs.map

package/dist/js/components/src/components/Action/Action.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.mjs","sources":["../../../../../../src/components/Action/Action.tsx"],"sourcesContent":["import { ActionModel as ActionModel } from \"@/components/Action/models/ActionModel\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport { ActionContextProvider } from \"@/components/Action/context\";\nimport { useActionStateContext } from \"@/components/Action/models/ActionStateContext\";\nimport { useConfirmationModalButtonSlot } from \"@/components/Action/hooks/useConfirmationModalButtonSlot\";\nimport { useActionButtonState } from \"@/components/Action/hooks/useActionButtonState\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nconst actionButtonContext: ComponentPropsContext<\"Button\"> = {\n  onPress: dynamic((props) => {\n    const action = ActionModel.use();\n    const confirmAction = ActionModel.useConfirmationAction();\n    const isConfirmationButton =\n      useConfirmationModalButtonSlot(props) === \"primary\";\n    const isAbortButton = useConfirmationModalButtonSlot(props) === \"abort\";\n    if (isAbortButton) {\n      return action.confirmationModalController.close;\n    }\n    return isConfirmationButton ? confirmAction.execute : action.execute;\n  }),\n\n  isPending: dynamic((props) => {\n    const actionState = useActionButtonState(props);\n    return props.isPending ?? actionState === \"isPending\";\n  }),\n\n  isSucceeded: dynamic((props) => {\n    const actionState = useActionButtonState(props);\n    return props.isSucceeded ?? actionState === \"isSucceeded\";\n  }),\n\n  isFailed: dynamic((props) => {\n    const actionState = useActionButtonState(props);\n    return props.isFailed ?? actionState === \"isFailed\";\n  }),\n\n  \"aria-disabled\": dynamic((props) => {\n    const state = useActionButtonState(props);\n    const someActionInContextIsBusy = useActionStateContext().useIsBusy();\n    return (\n      props[\"aria-disabled\"] ??\n      (state === \"isExecuting\" || someActionInContextIsBusy)\n    );\n  }),\n};\n\nexport const Action = flowComponent(\n  \"Action\",\n  (props) => {\n    const {\n      children,\n      actionModel: actionModelFromProps,\n      ...actionProps\n    } = props;\n    const newActionModel = ActionModel.useNew(actionProps);\n    const actionModel = actionModelFromProps ?? newActionModel;\n\n    const propsContext: PropsContext = {\n      Button: actionButtonContext,\n\n      SubmitButton: actionButtonContext,\n\n      Link: {\n        onPress: dynamic(() => ActionModel.use().execute),\n      },\n\n      MenuItem: {\n        onAction: dynamic(() => ActionModel.use().execute),\n      },\n\n      Modal: {\n        slot: dynamic((props) => {\n          const { slot } = props;\n          const action = ActionModel.use();\n          action.needsConfirmation = slot === \"actionConfirm\";\n          return slot;\n        }),\n        isDismissable: dynamic((props) => {\n          const action = ActionModel.use();\n          const actionState = action.state.useValue();\n          return actionState === \"isExecuting\" || actionState === \"isPending\"\n            ? false\n            : props.isDismissable;\n        }),\n        controller: dynamic(() => {\n          const action = ActionModel.use();\n          return action.needsConfirmation\n            ? action.confirmationModalController\n            : action.getOverlayController(\"Modal\");\n        }),\n        ActionGroup: {\n          Button: actionButtonContext,\n        },\n      },\n    };\n\n    return (\n      <ActionContextProvider value={actionModel}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ActionContextProvider>\n    );\n  },\n  {\n    type: \"provider\",\n  },\n);\n\nexport default Action;\n"],"names":["props"],"mappings":"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"}

package/dist/js/components/src/components/Action/context.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+import { createContext } from 'react';
+
+const actionContext = createContext(void 0);
+const ActionContextProvider = actionContext.Provider;
+
+export { ActionContextProvider, actionContext };
+//# sourceMappingURL=context.mjs.map

package/dist/js/components/src/components/Action/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","sources":["../../../../../../src/components/Action/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ActionModel } from \"@/components/Action/models/ActionModel\";\n\nexport const actionContext = createContext<ActionModel | undefined>(undefined);\nexport const ActionContextProvider = actionContext.Provider;\n"],"names":[],"mappings":";;AAGO,MAAM,aAAA,GAAgB,cAAuC,MAAS;AACtE,MAAM,wBAAwB,aAAA,CAAc;;;;"}

package/dist/js/components/src/components/Action/hooks/useActionButtonState.mjs

@@ -0,0 +1,18 @@
+"use client"
+/* */
+import { ActionModel } from '../models/ActionModel.mjs';
+import { useConfirmationModalButtonSlot } from './useConfirmationModalButtonSlot.mjs';
+
+const useActionButtonState = (props) => {
+  const action = ActionModel.use();
+  const state = action.state.useValue();
+  const isConfirmationButton = useConfirmationModalButtonSlot(props) === "primary";
+  const confirmationModalIsOpen = action.confirmationModalController.useIsOpen();
+  if (action.needsConfirmation && confirmationModalIsOpen && !isConfirmationButton) {
+    return "isIdle";
+  }
+  return state;
+};
+
+export { useActionButtonState };
+//# sourceMappingURL=useActionButtonState.mjs.map

package/dist/js/components/src/components/Action/hooks/useActionButtonState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActionButtonState.mjs","sources":["../../../../../../../src/components/Action/hooks/useActionButtonState.ts"],"sourcesContent":["import type { ButtonProps } from \"@/components/Button\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { useConfirmationModalButtonSlot } from \"@/components/Action/hooks/useConfirmationModalButtonSlot\";\n\nexport const useActionButtonState = (props: ButtonProps): ActionStateValue => {\n  const action = ActionModel.use();\n  const state = action.state.useValue();\n  const isConfirmationButton =\n    useConfirmationModalButtonSlot(props) === \"primary\";\n  const confirmationModalIsOpen =\n    action.confirmationModalController.useIsOpen();\n\n  if (\n    action.needsConfirmation &&\n    confirmationModalIsOpen &&\n    !isConfirmationButton\n  ) {\n    return \"isIdle\";\n  }\n\n  return state;\n};\n"],"names":[],"mappings":";;;AAKO,MAAM,oBAAA,GAAuB,CAAC,KAAA,KAAyC;AAC5E,EAAA,MAAM,MAAA,GAAS,YAAY,GAAA,EAAI;AAC/B,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,KAAA,CAAM,QAAA,EAAS;AACpC,EAAA,MAAM,oBAAA,GACJ,8BAAA,CAA+B,KAAK,CAAA,KAAM,SAAA;AAC5C,EAAA,MAAM,uBAAA,GACJ,MAAA,CAAO,2BAAA,CAA4B,SAAA,EAAU;AAE/C,EAAA,IACE,MAAA,CAAO,iBAAA,IACP,uBAAA,IACA,CAAC,oBAAA,EACD;AACA,IAAA,OAAO,QAAA;AAAA,EACT;AAEA,EAAA,OAAO,KAAA;AACT;;;;"}

package/dist/js/components/src/components/Action/hooks/useConfirmationModalButtonSlot.mjs

@@ -0,0 +1,12 @@
+"use client"
+/* */
+import { useContextSlot } from '../../../lib/slotContext/useContextSlot.mjs';
+import { getActionGroupSlot } from '../../ActionGroup/lib/getActionGroupSlot.mjs';
+
+const useConfirmationModalButtonSlot = (props) => {
+  const inConfirmationModal = useContextSlot("Modal") === "actionConfirm";
+  return inConfirmationModal ? getActionGroupSlot(props) : void 0;
+};
+
+export { useConfirmationModalButtonSlot };
+//# sourceMappingURL=useConfirmationModalButtonSlot.mjs.map

package/dist/js/components/src/components/Action/hooks/useConfirmationModalButtonSlot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfirmationModalButtonSlot.mjs","sources":["../../../../../../../src/components/Action/hooks/useConfirmationModalButtonSlot.ts"],"sourcesContent":["import type { ButtonProps } from \"@/components/Button\";\nimport useContextSlot from \"@/lib/slotContext/useContextSlot\";\nimport { getActionGroupSlot } from \"@/components/ActionGroup/lib/getActionGroupSlot\";\n\nexport const useConfirmationModalButtonSlot = (\n  props: ButtonProps,\n): string | undefined => {\n  const inConfirmationModal = useContextSlot(\"Modal\") === \"actionConfirm\";\n  return inConfirmationModal ? getActionGroupSlot(props) : undefined;\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,8BAAA,GAAiC,CAC5C,KAAA,KACuB;AACvB,EAAA,MAAM,mBAAA,GAAsB,cAAA,CAAe,OAAO,CAAA,KAAM,eAAA;AACxD,EAAA,OAAO,mBAAA,GAAsB,kBAAA,CAAmB,KAAK,CAAA,GAAI,MAAA;AAC3D;;;;"}

package/dist/js/components/src/components/Action/lib/ariaLive.mjs

@@ -0,0 +1,39 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../_virtual/_.locale.json@8b26c19d587a90f821a2307c8122f6d1.mjs';
+import { useEffect } from 'react';
+import { announce } from '@react-aria/live-announcer';
+
+const useAriaAnnounceActionState = (actionState, options = {}) => {
+  const formatter = useLocalizedStringFormatter(locales);
+  const {
+    isPendingText = formatter.format("action.isPending"),
+    isSucceededText = formatter.format("action.isSucceeded"),
+    isFailedText = formatter.format("action.isFailed")
+  } = options;
+  useEffect(() => {
+    if (actionState === "isPending") {
+      announce(isPendingText, "polite");
+    } else if (actionState === "isSucceeded") {
+      announce(isSucceededText, "polite");
+    } else if (actionState === "isFailed") {
+      announce(isFailedText, "polite");
+    }
+  }, [actionState]);
+};
+const useAriaAnnounceSuspense = () => {
+  const formatter = useLocalizedStringFormatter(locales);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const isPendingText = formatter.format("suspense.isPending");
+      announce(isPendingText, "polite");
+    }, 750);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+};
+
+export { useAriaAnnounceActionState, useAriaAnnounceSuspense };
+//# sourceMappingURL=ariaLive.mjs.map

package/dist/js/components/src/components/Action/lib/ariaLive.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ariaLive.mjs","sources":["../../../../../../../src/components/Action/lib/ariaLive.ts"],"sourcesContent":["import { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\nimport { useEffect } from \"react\";\nimport type { ActionStateValue } from \"@/components/Action/models/ActionState\";\nimport { announce } from \"@react-aria/live-announcer\";\n\ninterface Options {\n  isPendingText?: string;\n  isSucceededText?: string;\n  isFailedText?: string;\n}\n\nexport const useAriaAnnounceActionState = (\n  actionState: ActionStateValue,\n  options: Options = {},\n): void => {\n  const formatter = useLocalizedStringFormatter(locales);\n\n  const {\n    isPendingText = formatter.format(\"action.isPending\"),\n    isSucceededText = formatter.format(\"action.isSucceeded\"),\n    isFailedText = formatter.format(\"action.isFailed\"),\n  } = options;\n\n  useEffect(() => {\n    if (actionState === \"isPending\") {\n      announce(isPendingText, \"polite\");\n    } else if (actionState === \"isSucceeded\") {\n      announce(isSucceededText, \"polite\");\n    } else if (actionState === \"isFailed\") {\n      announce(isFailedText, \"polite\");\n    }\n  }, [actionState]);\n};\n\nexport const useAriaAnnounceSuspense = () => {\n  const formatter = useLocalizedStringFormatter(locales);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      const isPendingText = formatter.format(\"suspense.isPending\");\n      announce(isPendingText, \"polite\");\n    }, 750);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, []);\n};\n"],"names":[],"mappings":";;;;;AAYO,MAAM,0BAAA,GAA6B,CACxC,WAAA,EACA,OAAA,GAAmB,EAAC,KACX;AACT,EAAA,MAAM,SAAA,GAAY,4BAA4B,OAAO,CAAA;AAErD,EAAA,MAAM;AAAA,IACJ,aAAA,GAAgB,SAAA,CAAU,MAAA,CAAO,kBAAkB,CAAA;AAAA,IACnD,eAAA,GAAkB,SAAA,CAAU,MAAA,CAAO,oBAAoB,CAAA;AAAA,IACvD,YAAA,GAAe,SAAA,CAAU,MAAA,CAAO,iBAAiB;AAAA,GACnD,GAAI,OAAA;AAEJ,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAgB,WAAA,EAAa;AAC/B,MAAA,QAAA,CAAS,eAAe,QAAQ,CAAA;AAAA,IAClC,CAAA,MAAA,IAAW,gBAAgB,aAAA,EAAe;AACxC,MAAA,QAAA,CAAS,iBAAiB,QAAQ,CAAA;AAAA,IACpC,CAAA,MAAA,IAAW,gBAAgB,UAAA,EAAY;AACrC,MAAA,QAAA,CAAS,cAAc,QAAQ,CAAA;AAAA,IACjC;AAAA,EACF,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAClB;AAEO,MAAM,0BAA0B,MAAM;AAC3C,EAAA,MAAM,SAAA,GAAY,4BAA4B,OAAO,CAAA;AAErD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,OAAA,GAAU,WAAW,MAAM;AAC/B,MAAA,MAAM,aAAA,GAAgB,SAAA,CAAU,MAAA,CAAO,oBAAoB,CAAA;AAC3D,MAAA,QAAA,CAAS,eAAe,QAAQ,CAAA;AAAA,IAClC,GAAG,GAAG,CAAA;AAEN,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,OAAO,CAAA;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AACP;;;;"}

package/dist/js/components/src/components/Action/models/ActionExecution.mjs

@@ -0,0 +1,60 @@
+"use client"
+/* */
+import { ActionExecutionBatch } from './ActionExecutionBatch.mjs';
+
+class ActionExecution {
+  action;
+  constructor(action) {
+    this.action = action;
+  }
+  execute = (...args) => {
+    const batches = this.getBatchedActions();
+    const executeAllBatches = async () => {
+      for (const batch of batches) {
+        await batch.executeBatch(args);
+      }
+    };
+    void executeAllBatches().catch((error) => console.error(error));
+  };
+  getBatchedActions = () => {
+    let currentAction = this.action;
+    const batches = [];
+    let currentBatch = new ActionExecutionBatch(
+      this.action
+    );
+    let skipCount = 0;
+    while (currentAction) {
+      const { action, break: $break, skip } = currentAction.actionProps;
+      if (currentAction.needsConfirmation) {
+        currentBatch.addAction(currentAction);
+        break;
+      }
+      if (skip) {
+        skipCount = skip === true ? 1 : skip;
+        currentAction = currentAction.parentAction;
+        continue;
+      }
+      if (skipCount > 0) {
+        currentAction = currentAction.parentAction;
+        skipCount--;
+        continue;
+      }
+      if ($break) {
+        break;
+      }
+      if (action) {
+        currentBatch.addAction(currentAction);
+      } else {
+        batches.push(currentBatch);
+        currentBatch = new ActionExecutionBatch(this.action);
+        currentBatch.addAction(currentAction);
+      }
+      currentAction = currentAction.parentAction;
+    }
+    batches.push(currentBatch);
+    return batches;
+  };
+}
+
+export { ActionExecution };
+//# sourceMappingURL=ActionExecution.mjs.map

package/dist/js/components/src/components/Action/models/ActionExecution.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionExecution.mjs","sources":["../../../../../../../src/components/Action/models/ActionExecution.tsx"],"sourcesContent":["import type { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { ActionExecutionBatch } from \"@/components/Action/models/ActionExecutionBatch\";\n\nexport class ActionExecution {\n  private readonly action: ActionModel;\n\n  public constructor(action: ActionModel) {\n    this.action = action;\n  }\n\n  public execute = (...args: unknown[]): void => {\n    const batches = this.getBatchedActions();\n\n    const executeAllBatches = async () => {\n      for (const batch of batches) {\n        await batch.executeBatch(args);\n      }\n    };\n\n    void executeAllBatches().catch((error) => console.error(error));\n  };\n\n  private getBatchedActions = (): ActionExecutionBatch[] => {\n    let currentAction: ActionModel | undefined = this.action;\n\n    const batches: ActionExecutionBatch[] = [];\n    let currentBatch: ActionExecutionBatch = new ActionExecutionBatch(\n      this.action,\n    );\n\n    let skipCount = 0;\n\n    while (currentAction) {\n      const { action, break: $break, skip } = currentAction.actionProps;\n\n      if (currentAction.needsConfirmation) {\n        currentBatch.addAction(currentAction);\n        break;\n      }\n\n      if (skip) {\n        skipCount = skip === true ? 1 : skip;\n        currentAction = currentAction.parentAction;\n        continue;\n      }\n\n      if (skipCount > 0) {\n        currentAction = currentAction.parentAction;\n        skipCount--;\n        continue;\n      }\n\n      if ($break) {\n        break;\n      }\n\n      if (action) {\n        currentBatch.addAction(currentAction);\n      } else {\n        batches.push(currentBatch);\n        currentBatch = new ActionExecutionBatch(this.action);\n        currentBatch.addAction(currentAction);\n      }\n\n      currentAction = currentAction.parentAction;\n    }\n\n    batches.push(currentBatch);\n    return batches;\n  };\n}\n"],"names":[],"mappings":";;AAGO,MAAM,eAAA,CAAgB;AAAA,EACV,MAAA;AAAA,EAEV,YAAY,MAAA,EAAqB;AACtC,IAAA,IAAA,CAAK,MAAA,GAAS,MAAA;AAAA,EAChB;AAAA,EAEO,OAAA,GAAU,IAAI,IAAA,KAA0B;AAC7C,IAAA,MAAM,OAAA,GAAU,KAAK,iBAAA,EAAkB;AAEvC,IAAA,MAAM,oBAAoB,YAAY;AACpC,MAAA,KAAA,MAAW,SAAS,OAAA,EAAS;AAC3B,QAAA,MAAM,KAAA,CAAM,aAAa,IAAI,CAAA;AAAA,MAC/B;AAAA,IACF,CAAA;AAEA,IAAA,KAAK,iBAAA,GAAoB,KAAA,CAAM,CAAC,UAAU,OAAA,CAAQ,KAAA,CAAM,KAAK,CAAC,CAAA;AAAA,EAChE,CAAA;AAAA,EAEQ,oBAAoB,MAA8B;AACxD,IAAA,IAAI,gBAAyC,IAAA,CAAK,MAAA;AAElD,IAAA,MAAM,UAAkC,EAAC;AACzC,IAAA,IAAI,eAAqC,IAAI,oBAAA;AAAA,MAC3C,IAAA,CAAK;AAAA,KACP;AAEA,IAAA,IAAI,SAAA,GAAY,CAAA;AAEhB,IAAA,OAAO,aAAA,EAAe;AACpB,MAAA,MAAM,EAAE,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAQ,IAAA,KAAS,aAAA,CAAc,WAAA;AAEtD,MAAA,IAAI,cAAc,iBAAA,EAAmB;AACnC,QAAA,YAAA,CAAa,UAAU,aAAa,CAAA;AACpC,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,IAAA,EAAM;AACR,QAAA,SAAA,GAAY,IAAA,KAAS,OAAO,CAAA,GAAI,IAAA;AAChC,QAAA,aAAA,GAAgB,aAAA,CAAc,YAAA;AAC9B,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,YAAY,CAAA,EAAG;AACjB,QAAA,aAAA,GAAgB,aAAA,CAAc,YAAA;AAC9B,QAAA,SAAA,EAAA;AACA,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,MAAA,EAAQ;AACV,QAAA;AAAA,MACF;AAEA,MAAA,IAAI,MAAA,EAAQ;AACV,QAAA,YAAA,CAAa,UAAU,aAAa,CAAA;AAAA,MACtC,CAAA,MAAO;AACL,QAAA,OAAA,CAAQ,KAAK,YAAY,CAAA;AACzB,QAAA,YAAA,GAAe,IAAI,oBAAA,CAAqB,IAAA,CAAK,MAAM,CAAA;AACnD,QAAA,YAAA,CAAa,UAAU,aAAa,CAAA;AAAA,MACtC;AAEA,MAAA,aAAA,GAAgB,aAAA,CAAc,YAAA;AAAA,IAChC;AAEA,IAAA,OAAA,CAAQ,KAAK,YAAY,CAAA;AACzB,IAAA,OAAO,OAAA;AAAA,EACT,CAAA;AACF;;;;"}

package/dist/js/components/src/components/Action/models/ActionExecutionBatch.mjs

@@ -0,0 +1,42 @@
+"use client"
+/* */
+import { callFunctionsInOrder } from '../../../lib/promises/callFunctionsInOrder.mjs';
+import { callAndReact } from '../../../lib/promises/callAndReact.mjs';
+import { getExecutionFunction } from './getExecutionFunction.mjs';
+
+class ActionExecutionBatch {
+  actions = [];
+  baseAction;
+  constructor(baseAction) {
+    this.baseAction = baseAction;
+  }
+  addAction(action) {
+    this.actions.push(action);
+  }
+  async executeBatch(args) {
+    if (this.actions.length === 0) {
+      return;
+    }
+    const batchFeedback = this.actions[this.actions.length - 1]?.actionProps.showFeedback;
+    const executionState = this.baseAction.state.withFeedback(
+      this.baseAction.needsConfirmation ? false : batchFeedback
+    );
+    const executionFunctions = this.actions.map((c) => getExecutionFunction(c));
+    const executeBatch = callFunctionsInOrder(executionFunctions);
+    let caughtError;
+    await callAndReact(() => executeBatch(...args), {
+      onAsync: () => executionState.onAsyncStart(),
+      then: () => executionState.onSucceeded(),
+      catch: (error) => {
+        executionState.onFailed(error);
+        caughtError = error;
+      }
+    });
+    if (caughtError) {
+      throw caughtError;
+    }
+  }
+}
+
+export { ActionExecutionBatch };
+//# sourceMappingURL=ActionExecutionBatch.mjs.map

package/dist/js/components/src/components/Action/models/ActionExecutionBatch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionExecutionBatch.mjs","sources":["../../../../../../../src/components/Action/models/ActionExecutionBatch.ts"],"sourcesContent":["import type { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { callFunctionsInOrder } from \"@/lib/promises/callFunctionsInOrder\";\nimport { callAndReact } from \"@/lib/promises/callAndReact\";\nimport { getExecutionFunction } from \"@/components/Action/models/getExecutionFunction\";\n\nexport class ActionExecutionBatch {\n  private readonly actions: ActionModel[] = [];\n  public readonly baseAction: ActionModel;\n\n  constructor(baseAction: ActionModel) {\n    this.baseAction = baseAction;\n  }\n\n  public addAction(action: ActionModel): void {\n    this.actions.push(action);\n  }\n\n  public async executeBatch(args: unknown[]) {\n    if (this.actions.length === 0) {\n      return;\n    }\n\n    const batchFeedback =\n      this.actions[this.actions.length - 1]?.actionProps.showFeedback;\n\n    const executionState = this.baseAction.state.withFeedback(\n      this.baseAction.needsConfirmation ? false : batchFeedback,\n    );\n\n    const executionFunctions = this.actions.map((c) => getExecutionFunction(c));\n\n    const executeBatch = callFunctionsInOrder(executionFunctions);\n\n    let caughtError: unknown;\n\n    await callAndReact(() => executeBatch(...args), {\n      onAsync: () => executionState.onAsyncStart(),\n      then: () => executionState.onSucceeded(),\n      catch: (error) => {\n        executionState.onFailed(error);\n        caughtError = error;\n      },\n    });\n\n    if (caughtError) {\n      throw caughtError;\n    }\n  }\n}\n"],"names":[],"mappings":";;;;AAKO,MAAM,oBAAA,CAAqB;AAAA,EACf,UAAyB,EAAC;AAAA,EAC3B,UAAA;AAAA,EAEhB,YAAY,UAAA,EAAyB;AACnC,IAAA,IAAA,CAAK,UAAA,GAAa,UAAA;AAAA,EACpB;AAAA,EAEO,UAAU,MAAA,EAA2B;AAC1C,IAAA,IAAA,CAAK,OAAA,CAAQ,KAAK,MAAM,CAAA;AAAA,EAC1B;AAAA,EAEA,MAAa,aAAa,IAAA,EAAiB;AACzC,IAAA,IAAI,IAAA,CAAK,OAAA,CAAQ,MAAA,KAAW,CAAA,EAAG;AAC7B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,aAAA,GACJ,KAAK,OAAA,CAAQ,IAAA,CAAK,QAAQ,MAAA,GAAS,CAAC,GAAG,WAAA,CAAY,YAAA;AAErD,IAAA,MAAM,cAAA,GAAiB,IAAA,CAAK,UAAA,CAAW,KAAA,CAAM,YAAA;AAAA,MAC3C,IAAA,CAAK,UAAA,CAAW,iBAAA,GAAoB,KAAA,GAAQ;AAAA,KAC9C;AAEA,IAAA,MAAM,kBAAA,GAAqB,KAAK,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,KAAM,oBAAA,CAAqB,CAAC,CAAC,CAAA;AAE1E,IAAA,MAAM,YAAA,GAAe,qBAAqB,kBAAkB,CAAA;AAE5D,IAAA,IAAI,WAAA;AAEJ,IAAA,MAAM,YAAA,CAAa,MAAM,YAAA,CAAa,GAAG,IAAI,CAAA,EAAG;AAAA,MAC9C,OAAA,EAAS,MAAM,cAAA,CAAe,YAAA,EAAa;AAAA,MAC3C,IAAA,EAAM,MAAM,cAAA,CAAe,WAAA,EAAY;AAAA,MACvC,KAAA,EAAO,CAAC,KAAA,KAAU;AAChB,QAAA,cAAA,CAAe,SAAS,KAAK,CAAA;AAC7B,QAAA,WAAA,GAAc,KAAA;AAAA,MAChB;AAAA,KACD,CAAA;AAED,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,MAAM,WAAA;AAAA,IACR;AAAA,EACF;AACF;;;;"}

package/dist/js/components/src/components/Action/models/ActionModel.mjs

@@ -0,0 +1,86 @@
+"use client"
+/* */
+import { useContext } from 'react';
+import { OverlayController } from '../../../lib/controller/overlay/OverlayController.mjs';
+import { useOverlayContext } from '../../../lib/controller/overlay/context.mjs';
+import invariant from 'invariant';
+import { actionContext } from '../context.mjs';
+import { ActionState } from './ActionState.mjs';
+import { ActionExecution } from './ActionExecution.mjs';
+import { ActionStateContext } from './ActionStateContext.mjs';
+
+class ActionModel {
+  state;
+  needsConfirmation;
+  actionProps;
+  parentAction;
+  confirmationModalController;
+  overlayContext;
+  constructor(init) {
+    const {
+      actionProps,
+      needsConfirmation,
+      parentAction,
+      overlayContext,
+      confirmationModalController,
+      state
+    } = init;
+    this.actionProps = actionProps;
+    this.parentAction = parentAction;
+    this.confirmationModalController = confirmationModalController;
+    this.needsConfirmation = needsConfirmation;
+    this.overlayContext = overlayContext;
+    this.state = state;
+  }
+  static useNew(actionProps, init = {}) {
+    const parentAction = useContext(actionContext);
+    const overlayContext = useOverlayContext();
+    const confirmationModalController = OverlayController.useNew();
+    const state = ActionState.useNew();
+    return new ActionModel({
+      parentAction,
+      overlayContext,
+      confirmationModalController,
+      needsConfirmation: false,
+      actionProps,
+      state,
+      ...init
+    });
+  }
+  static use() {
+    const c = useContext(actionContext);
+    invariant(!!c, "Action context is not defined");
+    ActionStateContext.useRegisterState(c.state);
+    return c;
+  }
+  static useConfirmationAction() {
+    const action = ActionModel.use();
+    return new ActionModel({
+      actionProps: action.actionProps,
+      confirmationModalController: action.confirmationModalController,
+      overlayContext: action.overlayContext,
+      state: action.state,
+      needsConfirmation: false,
+      parentAction: ActionModel.useNew(
+        {
+          closeOverlay: action.confirmationModalController
+        },
+        {
+          parentAction: action.parentAction
+        }
+      )
+    });
+  }
+  getOverlayController(component) {
+    const getController = (controller) => {
+      return controller === void 0 ? void 0 : controller ? this.overlayContext[component] : void 0;
+    };
+    return getController(this.actionProps.openOverlay) ?? getController(this.actionProps.closeOverlay) ?? getController(this.actionProps.toggleOverlay);
+  }
+  execute = (...args) => {
+    new ActionExecution(this).execute(...args);
+  };
+}
+
+export { ActionModel };
+//# sourceMappingURL=ActionModel.mjs.map

package/dist/js/components/src/components/Action/models/ActionModel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionModel.mjs","sources":["../../../../../../../src/components/Action/models/ActionModel.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { OverlayController } from \"@/lib/controller\";\nimport invariant from \"invariant\";\nimport type { ActionProps } from \"@/components/Action/types\";\nimport { actionContext } from \"@/components/Action/context\";\nimport { ActionState } from \"@/components/Action/models/ActionState\";\nimport { ActionExecution } from \"@/components/Action/models/ActionExecution\";\nimport { ActionStateContext } from \"@/components/Action/models/ActionStateContext\";\nimport type { OverlayContext } from \"@/lib/controller/overlay/context\";\nimport { useOverlayContext } from \"@/lib/controller/overlay/context\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\n\ninterface InitObject {\n  actionProps: ActionProps;\n  parentAction?: ActionModel;\n  confirmationModalController: OverlayController;\n  needsConfirmation: boolean;\n  overlayContext: OverlayContext;\n  state: ActionState;\n}\n\nexport class ActionModel {\n  public state: ActionState;\n  public needsConfirmation: boolean;\n  public readonly actionProps: ActionProps;\n  public readonly parentAction?: ActionModel;\n  public readonly confirmationModalController: OverlayController;\n  public readonly overlayContext: OverlayContext;\n\n  private constructor(init: InitObject) {\n    const {\n      actionProps,\n      needsConfirmation,\n      parentAction,\n      overlayContext,\n      confirmationModalController,\n      state,\n    } = init;\n\n    this.actionProps = actionProps;\n    this.parentAction = parentAction;\n    this.confirmationModalController = confirmationModalController;\n    this.needsConfirmation = needsConfirmation;\n    this.overlayContext = overlayContext;\n    this.state = state;\n  }\n\n  public static useNew(\n    actionProps: ActionProps,\n    init: Partial<InitObject> = {},\n  ): ActionModel {\n    const parentAction = useContext(actionContext);\n    const overlayContext = useOverlayContext();\n    const confirmationModalController = OverlayController.useNew();\n    const state = ActionState.useNew();\n\n    return new ActionModel({\n      parentAction,\n      overlayContext,\n      confirmationModalController,\n      needsConfirmation: false,\n      actionProps,\n      state,\n      ...init,\n    });\n  }\n\n  public static use(): ActionModel {\n    const c = useContext(actionContext);\n    invariant(!!c, \"Action context is not defined\");\n    ActionStateContext.useRegisterState(c.state);\n    return c;\n  }\n\n  public static useConfirmationAction(): ActionModel {\n    const action = ActionModel.use();\n\n    return new ActionModel({\n      actionProps: action.actionProps,\n      confirmationModalController: action.confirmationModalController,\n      overlayContext: action.overlayContext,\n      state: action.state,\n      needsConfirmation: false,\n      parentAction: ActionModel.useNew(\n        {\n          closeOverlay: action.confirmationModalController,\n        },\n        {\n          parentAction: action.parentAction,\n        },\n      ),\n    });\n  }\n\n  public getOverlayController(\n    component: FlowComponentName,\n  ): OverlayController | undefined {\n    const getController = (\n      controller?: OverlayController | FlowComponentName,\n    ): OverlayController | undefined => {\n      return controller === undefined\n        ? undefined\n        : controller\n          ? this.overlayContext[component]\n          : undefined;\n    };\n\n    return (\n      getController(this.actionProps.openOverlay) ??\n      getController(this.actionProps.closeOverlay) ??\n      getController(this.actionProps.toggleOverlay)\n    );\n  }\n\n  public execute = (...args: unknown[]): void => {\n    new ActionExecution(this).execute(...args);\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;AAqBO,MAAM,WAAA,CAAY;AAAA,EAChB,KAAA;AAAA,EACA,iBAAA;AAAA,EACS,WAAA;AAAA,EACA,YAAA;AAAA,EACA,2BAAA;AAAA,EACA,cAAA;AAAA,EAER,YAAY,IAAA,EAAkB;AACpC,IAAA,MAAM;AAAA,MACJ,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,2BAAA;AAAA,MACA;AAAA,KACF,GAAI,IAAA;AAEJ,IAAA,IAAA,CAAK,WAAA,GAAc,WAAA;AACnB,IAAA,IAAA,CAAK,YAAA,GAAe,YAAA;AACpB,IAAA,IAAA,CAAK,2BAAA,GAA8B,2BAAA;AACnC,IAAA,IAAA,CAAK,iBAAA,GAAoB,iBAAA;AACzB,IAAA,IAAA,CAAK,cAAA,GAAiB,cAAA;AACtB,IAAA,IAAA,CAAK,KAAA,GAAQ,KAAA;AAAA,EACf;AAAA,EAEA,OAAc,MAAA,CACZ,WAAA,EACA,IAAA,GAA4B,EAAC,EAChB;AACb,IAAA,MAAM,YAAA,GAAe,WAAW,aAAa,CAAA;AAC7C,IAAA,MAAM,iBAAiB,iBAAA,EAAkB;AACzC,IAAA,MAAM,2BAAA,GAA8B,kBAAkB,MAAA,EAAO;AAC7D,IAAA,MAAM,KAAA,GAAQ,YAAY,MAAA,EAAO;AAEjC,IAAA,OAAO,IAAI,WAAA,CAAY;AAAA,MACrB,YAAA;AAAA,MACA,cAAA;AAAA,MACA,2BAAA;AAAA,MACA,iBAAA,EAAmB,KAAA;AAAA,MACnB,WAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACJ,CAAA;AAAA,EACH;AAAA,EAEA,OAAc,GAAA,GAAmB;AAC/B,IAAA,MAAM,CAAA,GAAI,WAAW,aAAa,CAAA;AAClC,IAAA,SAAA,CAAU,CAAC,CAAC,CAAA,EAAG,+BAA+B,CAAA;AAC9C,IAAA,kBAAA,CAAmB,gBAAA,CAAiB,EAAE,KAAK,CAAA;AAC3C,IAAA,OAAO,CAAA;AAAA,EACT;AAAA,EAEA,OAAc,qBAAA,GAAqC;AACjD,IAAA,MAAM,MAAA,GAAS,YAAY,GAAA,EAAI;AAE/B,IAAA,OAAO,IAAI,WAAA,CAAY;AAAA,MACrB,aAAa,MAAA,CAAO,WAAA;AAAA,MACpB,6BAA6B,MAAA,CAAO,2BAAA;AAAA,MACpC,gBAAgB,MAAA,CAAO,cAAA;AAAA,MACvB,OAAO,MAAA,CAAO,KAAA;AAAA,MACd,iBAAA,EAAmB,KAAA;AAAA,MACnB,cAAc,WAAA,CAAY,MAAA;AAAA,QACxB;AAAA,UACE,cAAc,MAAA,CAAO;AAAA,SACvB;AAAA,QACA;AAAA,UACE,cAAc,MAAA,CAAO;AAAA;AACvB;AACF,KACD,CAAA;AAAA,EACH;AAAA,EAEO,qBACL,SAAA,EAC+B;AAC/B,IAAA,MAAM,aAAA,GAAgB,CACpB,UAAA,KACkC;AAClC,MAAA,OAAO,eAAe,MAAA,GAClB,MAAA,GACA,aACE,IAAA,CAAK,cAAA,CAAe,SAAS,CAAA,GAC7B,MAAA;AAAA,IACR,CAAA;AAEA,IAAA,OACE,aAAA,CAAc,IAAA,CAAK,WAAA,CAAY,WAAW,CAAA,IAC1C,aAAA,CAAc,IAAA,CAAK,WAAA,CAAY,YAAY,CAAA,IAC3C,aAAA,CAAc,IAAA,CAAK,YAAY,aAAa,CAAA;AAAA,EAEhD;AAAA,EAEO,OAAA,GAAU,IAAI,IAAA,KAA0B;AAC7C,IAAA,IAAI,eAAA,CAAgB,IAAI,CAAA,CAAE,OAAA,CAAQ,GAAG,IAAI,CAAA;AAAA,EAC3C,CAAA;AACF;;;;"}

package/dist/js/components/src/components/Action/models/ActionState.mjs

@@ -0,0 +1,93 @@
+"use client"
+/* */
+import { makeObservable, computed, action, observable } from 'mobx';
+import { useSelector } from '../../../lib/mobx/useSelector.mjs';
+import { sleep } from '../../../lib/promises/sleep.mjs';
+import { useStatic } from '../../../lib/hooks/useStatic.mjs';
+
+const duration = {
+  pending: 1e3,
+  succeeded: 1500,
+  failed: 2e3
+};
+class ActionState {
+  showFeedback;
+  state = "isIdle";
+  setPendingTimeout;
+  error;
+  isAsync = false;
+  constructor() {
+    makeObservable(this, {
+      state: observable,
+      updateState: action,
+      isBusy: computed
+    });
+  }
+  static useNew() {
+    return useStatic(() => new ActionState());
+  }
+  updateState(newState) {
+    this.state = newState;
+  }
+  useValue() {
+    return useSelector(() => this.state, [this]);
+  }
+  useIsBusy() {
+    return useSelector(() => this.isBusy, [this]);
+  }
+  get isBusy() {
+    return this.state !== "isIdle";
+  }
+  onAsyncStart() {
+    this.isAsync = true;
+    this.updateState("isExecuting");
+    this.setPendingTimeout = window.setTimeout(
+      () => this.startPending(),
+      duration.pending
+    );
+  }
+  async onSucceeded() {
+    await this.onDone();
+  }
+  async onFailed(error) {
+    this.error = error ?? new Error("Unknown error");
+    await this.onDone();
+  }
+  withFeedback(feedback) {
+    this.showFeedback = feedback;
+    return this;
+  }
+  async startFailedFeedback() {
+    this.updateState("isFailed");
+    await sleep(duration.failed);
+    this.resetAfterDone();
+  }
+  async startSucceededFeedback() {
+    this.updateState("isSucceeded");
+    await sleep(duration.succeeded);
+    this.resetAfterDone();
+  }
+  resetAfterDone() {
+    this.updateState("isIdle");
+    this.isAsync = false;
+    this.error = void 0;
+  }
+  async onDone() {
+    if (this.setPendingTimeout) {
+      window.clearTimeout(this.setPendingTimeout);
+    }
+    if (this.error) {
+      await this.startFailedFeedback();
+    } else if (this.showFeedback !== false && (this.showFeedback || this.isAsync)) {
+      await this.startSucceededFeedback();
+    } else {
+      this.resetAfterDone();
+    }
+  }
+  startPending() {
+    this.updateState("isPending");
+  }
+}
+
+export { ActionState, duration };
+//# sourceMappingURL=ActionState.mjs.map