UNPKG

@payfit/unity-components

Version:

123 lines (122 loc) • 4.68 kB
import { AIStructuredInputContextProvider as e } from "./AIStructuredInput.context.js"; import { AIStructuredInputStep as t } from "./parts/AIStructuredInputStep.js"; import { Children as n, forwardRef as r, isValidElement as i, useId as a, useRef as o, useState as s } from "react"; import { uyTv as c } from "@payfit/unity-themes"; import { jsx as l, jsxs as u } from "react/jsx-runtime"; import { useIntl as d } from "react-intl"; //#region src/modules/ai-kit/components/ai-structured-input/AIStructuredInput.tsx var f = c({ slots: { base: [ "uy:min-w-0 uy:rounded-200 uy:border uy:border-solid uy:border-border-neutral", "uy:bg-surface-neutral uy:p-200 uy:text-content-neutral-enabled uy:shadow-100", "uy:transition-colors" ], content: "uy:flex uy:min-w-0 uy:flex-col uy:gap-150", step: [ "uy:w-full uy:min-w-0", "uy:motion-safe:transition-[opacity,translate] uy:motion-safe:duration-200 uy:motion-safe:ease-out", "uy:motion-safe:starting:data-[direction=forward]:translate-x-100 uy:motion-safe:starting:data-[direction=forward]:opacity-80", "uy:motion-safe:starting:data-[direction=backward]:-translate-x-100 uy:motion-safe:starting:data-[direction=backward]:opacity-80" ] }, variants: { hasHeader: { true: { base: ["uy:flex uy:max-h-[476px] uy:flex-col uy:gap-0 uy:overflow-hidden", "uy:border-0 uy:bg-surface-neutral-lowest uy:p-0 uy:shadow-none"], content: [ "uy:w-full uy:flex-1 uy:items-stretch uy:gap-50 uy:overflow-y-auto", "uy:rounded-200 uy:border uy:border-solid uy:border-border-neutral", "uy:bg-surface-neutral uy:p-200 uy:shadow-100" ] }, false: {} } } }), p = r(({ activeStepId: r, defaultActiveStepId: c, onActiveStepChange: p, items: m, children: h, header: g, className: _, ...v }, y) => { let b = d(), x = a(), [S, C] = s(c), w = o(null), T; if (m !== void 0) T = m.map((e, t) => { if (typeof h != "function") throw Error("AIStructuredInput expects a render function when `items` is provided."); return h(e, t); }); else { if (typeof h == "function") throw Error("AIStructuredInput expects `items` when `children` is a render function."); T = n.toArray(h); } let E = T.map((e, n) => { if (!i(e) || e.type !== t) throw Error("AIStructuredInput children must be AIStructuredInputStep elements."); if (process.env.NODE_ENV === "development" && m !== void 0 && e.props.id !== m[n]?.id) throw Error(`AIStructuredInputStep id "${e.props.id}" must match its item id "${m[n]?.id}".`); return e; }); if (E.length === 0) throw Error("AIStructuredInput requires at least one step."); let D = E.map((e) => e.props.id); if (process.env.NODE_ENV === "development" && new Set(D).size !== D.length) throw Error("AIStructuredInput step IDs must be unique."); let O = r !== void 0, k = O ? r : S ?? c, A = Math.max(0, k ? D.indexOf(k) : 0), j = E[A]; if (!j) throw Error("AIStructuredInput could not resolve the active step."); let M = j.props.id, [N, P] = s({ id: M, index: A }); (N.id !== M || N.index !== A) && P({ id: M, index: A, direction: N.id === M || N.index === A ? void 0 : A > N.index ? "forward" : "backward" }), w.current !== null && w.current !== M && (w.current = null); let F = A === 0, I = A === E.length - 1, L = f(), R = `${x}-${M}`, z = (e) => { let t = D[e]; t !== void 0 && (w.current = t, O || C(t), p?.(t)); }; return /* @__PURE__ */ l(e, { value: { activeStepId: M, activeStepIndex: A, totalSteps: E.length, isFinalStep: I, canContinue: !I, continueToNextStep: () => { z(A + 1); }, stepPanelId: R, canGoToPreviousStep: !F, canGoToNextStep: !I, goToPreviousStep: () => { z(A - 1); }, goToNextStep: () => { z(A + 1); }, registerStepHeading: (e, t) => { t && w.current === e && (t.focus(), w.current = null); } }, children: /* @__PURE__ */ u("div", { ...v, ref: y, className: L.base({ className: _, hasHeader: g !== void 0 }), "data-unity-component": "ai.structured-input", "data-step-position": E.length === 1 ? "only" : F ? "first" : I ? "last" : "middle", children: [g, /* @__PURE__ */ l("div", { id: R, className: L.content({ hasHeader: g !== void 0 }), role: "group", "aria-label": b.formatMessage({ id: "unity:module:ai-kit:structured-input:question-progress", defaultMessage: "Question {current} of {total}" }, { current: A + 1, total: E.length }), children: /* @__PURE__ */ l("div", { className: L.step(), "data-direction": N.direction, children: j }, M) })] }) }); }); p.displayName = "AIStructuredInput"; var m = p; //#endregion export { m as AIStructuredInput };