@zayne-labs/ui-react 0.11.3 → 0.11.4
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.
- package/dist/{esm → components}/common/await/index.d.ts +4 -4
- package/dist/{esm → components}/common/await/index.js +18 -9
- package/dist/components/common/await/index.js.map +1 -0
- package/dist/components/common/error-boundary/index.d.ts +2 -0
- package/dist/{esm → components}/common/error-boundary/index.js +1 -1
- package/dist/components/common/presence/index.js +3 -0
- package/dist/{esm → components}/common/show/index.js +1 -1
- package/dist/components/common/suspense-with-boundary/index.d.ts +2 -0
- package/dist/components/common/suspense-with-boundary/index.js +19 -0
- package/dist/components/common/suspense-with-boundary/index.js.map +1 -0
- package/dist/{esm/error-boundary-C4btQhu_.js → components/error-boundary-BOZ3EvMt.js} +33 -31
- package/dist/components/error-boundary-BOZ3EvMt.js.map +1 -0
- package/dist/{esm/index-DC9fblW0.d.ts → components/index-BmD5l0L7.d.ts} +9 -11
- package/dist/{esm/index-D_Ntazyt.d.ts → components/index-dmMYkH2c.d.ts} +4 -7
- package/dist/{esm/presence-CHd9s3IS.js → components/presence-DkWhm7xu.js} +3 -3
- package/dist/{esm/presence-CHd9s3IS.js.map → components/presence-DkWhm7xu.js.map} +1 -1
- package/dist/{esm/show-BzfAw7y3.js → components/show-CMxdpPiN.js} +2 -2
- package/dist/components/show-CMxdpPiN.js.map +1 -0
- package/dist/{esm → components}/ui/carousel/index.d.ts +2 -7
- package/dist/{esm → components}/ui/carousel/index.js +42 -51
- package/dist/components/ui/carousel/index.js.map +1 -0
- package/dist/{esm → components}/ui/drag-scroll/index.js +9 -10
- package/dist/components/ui/drag-scroll/index.js.map +1 -0
- package/dist/{esm → components}/ui/drop-zone/index.d.ts +21 -17
- package/dist/{esm → components}/ui/drop-zone/index.js +54 -23
- package/dist/components/ui/drop-zone/index.js.map +1 -0
- package/dist/{esm → components}/ui/form/index.js +11 -8
- package/dist/{esm → components}/ui/form/index.js.map +1 -1
- package/dist/style.css +14 -22
- package/package.json +8 -8
- package/dist/esm/common/await/index.js.map +0 -1
- package/dist/esm/common/error-boundary/index.d.ts +0 -2
- package/dist/esm/common/presence/index.js +0 -3
- package/dist/esm/common/suspense-with-boundary/index.d.ts +0 -2
- package/dist/esm/common/suspense-with-boundary/index.js +0 -20
- package/dist/esm/common/suspense-with-boundary/index.js.map +0 -1
- package/dist/esm/error-boundary-C4btQhu_.js.map +0 -1
- package/dist/esm/show-BzfAw7y3.js.map +0 -1
- package/dist/esm/ui/carousel/index.js.map +0 -1
- package/dist/esm/ui/drag-scroll/index.js.map +0 -1
- package/dist/esm/ui/drop-zone/index.js.map +0 -1
- /package/dist/{esm → components}/chunk-pbuEa-1d.js +0 -0
- /package/dist/{esm → components}/cn-jNZfGhrk.js +0 -0
- /package/dist/{esm → components}/cn-jNZfGhrk.js.map +0 -0
- /package/dist/{esm → components}/common/client-gate/index.d.ts +0 -0
- /package/dist/{esm → components}/common/client-gate/index.js +0 -0
- /package/dist/{esm → components}/common/client-gate/index.js.map +0 -0
- /package/dist/{esm → components}/common/for/index.d.ts +0 -0
- /package/dist/{esm → components}/common/for/index.js +0 -0
- /package/dist/{esm → components}/common/presence/index.d.ts +0 -0
- /package/dist/{esm → components}/common/show/index.d.ts +0 -0
- /package/dist/{esm → components}/common/slot/index.d.ts +0 -0
- /package/dist/{esm → components}/common/slot/index.js +0 -0
- /package/dist/{esm → components}/common/switch/index.d.ts +0 -0
- /package/dist/{esm → components}/common/switch/index.js +0 -0
- /package/dist/{esm → components}/common/teleport/index.d.ts +0 -0
- /package/dist/{esm → components}/common/teleport/index.js +0 -0
- /package/dist/{esm → components}/common/teleport/index.js.map +0 -0
- /package/dist/{esm → components}/for-DGTMIS0w.js +0 -0
- /package/dist/{esm → components}/for-DGTMIS0w.js.map +0 -0
- /package/dist/{esm → components}/slot-DuwoiC2C.js +0 -0
- /package/dist/{esm → components}/slot-DuwoiC2C.js.map +0 -0
- /package/dist/{esm → components}/switch-Dwy5Gzsb.js +0 -0
- /package/dist/{esm → components}/switch-Dwy5Gzsb.js.map +0 -0
- /package/dist/{esm → components}/ui/card/index.d.ts +0 -0
- /package/dist/{esm → components}/ui/card/index.js +0 -0
- /package/dist/{esm → components}/ui/card/index.js.map +0 -0
- /package/dist/{esm → components}/ui/drag-scroll/index.d.ts +0 -0
- /package/dist/{esm → components}/ui/form/index.d.ts +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { o as ErrorBoundaryProps } from "../../index-
|
|
2
|
-
import { n as SuspenseWithBoundaryProps } from "../../index-
|
|
1
|
+
import { o as ErrorBoundaryProps } from "../../index-BmD5l0L7.js";
|
|
2
|
+
import { n as SuspenseWithBoundaryProps } from "../../index-dmMYkH2c.js";
|
|
3
3
|
import { GetSlotComponentProps } from "@zayne-labs/toolkit-react/utils";
|
|
4
4
|
import * as _$react from "react";
|
|
5
5
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
@@ -7,7 +7,7 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
|
7
7
|
//#region src/components/common/await/await.d.ts
|
|
8
8
|
type RenderPropFn<TValue> = (result: TValue) => React.ReactNode;
|
|
9
9
|
type ChildrenType<TValue> = React.ReactNode | RenderPropFn<TValue>;
|
|
10
|
-
type AwaitRootProps<TValue> =
|
|
10
|
+
type AwaitRootProps<TValue> = Omit<SuspenseWithBoundaryProps, "children"> & {
|
|
11
11
|
asChild?: boolean;
|
|
12
12
|
children: ChildrenType<TValue>;
|
|
13
13
|
promise: Promise<TValue>;
|
|
@@ -17,7 +17,7 @@ type AwaitRootProps<TValue> = Pick<SuspenseWithBoundaryProps, "errorFallback" |
|
|
|
17
17
|
declare function AwaitRoot<TValue>(props: AwaitRootProps<TValue>): _$react_jsx_runtime0.JSX.Element;
|
|
18
18
|
type AwaitSuccessProps<TValue = unknown> = GetSlotComponentProps<"default", ChildrenType<TValue>>;
|
|
19
19
|
declare function AwaitSuccess<TPromiseOrValue, TValue = Awaited<TPromiseOrValue>>(props: Pick<AwaitSuccessProps<TValue>, "children">): _$react.ReactNode;
|
|
20
|
-
type AwaitErrorProps = GetSlotComponentProps<"error", ErrorBoundaryProps["
|
|
20
|
+
type AwaitErrorProps = GetSlotComponentProps<"error", ErrorBoundaryProps["errorFallback"]>;
|
|
21
21
|
declare const AwaitError: {
|
|
22
22
|
(props: Pick<AwaitErrorProps, "children"> & {
|
|
23
23
|
asChild?: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { t as __exportAll } from "../../chunk-pbuEa-1d.js";
|
|
3
|
-
import { n as ErrorBoundary, r as useErrorBoundaryContext } from "../../error-boundary-
|
|
3
|
+
import { n as ErrorBoundary, r as useErrorBoundaryContext } from "../../error-boundary-BOZ3EvMt.js";
|
|
4
4
|
import { n as SlotRoot } from "../../slot-DuwoiC2C.js";
|
|
5
5
|
import { getSlotMap, withSlotNameAndSymbol } from "@zayne-labs/toolkit-react/utils";
|
|
6
6
|
import { isFunction } from "@zayne-labs/toolkit-type-helpers";
|
|
@@ -17,24 +17,33 @@ const useAwaitContext = () => useAwaitContextImpl();
|
|
|
17
17
|
//#endregion
|
|
18
18
|
//#region src/components/common/await/await.tsx
|
|
19
19
|
function AwaitRoot(props) {
|
|
20
|
-
const { children, errorFallback, fallback, withErrorBoundary = true, withSuspense = true
|
|
20
|
+
const { asChild, children, errorFallback, errorResetKeys, fallback, name, onError, onErrorReset, promise, withErrorBoundary = true, withSuspense = true } = props;
|
|
21
21
|
const WithErrorBoundary = withErrorBoundary ? ErrorBoundary : Fragment;
|
|
22
22
|
const WithSuspense = withSuspense ? Suspense : Fragment;
|
|
23
23
|
const slots = !isFunction(children) ? getSlotMap(children) : { default: children };
|
|
24
|
-
const
|
|
25
|
-
const
|
|
24
|
+
const resolvedPendingFallback = slots.pending ?? fallback;
|
|
25
|
+
const resolvedErrorFallback = slots.error ?? errorFallback;
|
|
26
26
|
return /* @__PURE__ */ jsx(WithErrorBoundary, {
|
|
27
|
-
...
|
|
27
|
+
...withErrorBoundary && {
|
|
28
|
+
errorFallback: resolvedErrorFallback,
|
|
29
|
+
errorResetKeys,
|
|
30
|
+
onError,
|
|
31
|
+
onErrorReset
|
|
32
|
+
},
|
|
28
33
|
children: /* @__PURE__ */ jsx(WithSuspense, {
|
|
29
|
-
...
|
|
30
|
-
|
|
31
|
-
|
|
34
|
+
...withSuspense && {
|
|
35
|
+
fallback: resolvedPendingFallback,
|
|
36
|
+
name
|
|
37
|
+
},
|
|
38
|
+
children: /* @__PURE__ */ jsx(AwaitRootImpl, {
|
|
39
|
+
promise,
|
|
40
|
+
asChild,
|
|
32
41
|
children: slots.default
|
|
33
42
|
})
|
|
34
43
|
})
|
|
35
44
|
});
|
|
36
45
|
}
|
|
37
|
-
function
|
|
46
|
+
function AwaitRootImpl(props) {
|
|
38
47
|
const { asChild, children, promise } = props;
|
|
39
48
|
const result = use(promise);
|
|
40
49
|
const resolvedChildren = isFunction(children) ? children(result) : children;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["ReactFragment","Slot.Root"],"sources":["../../../../src/components/common/await/await-context.ts","../../../../src/components/common/await/await.tsx","../../../../src/components/common/await/await-parts.ts"],"sourcesContent":["import { createCustomContext } from \"@zayne-labs/toolkit-react\";\n\nexport type AwaitContextType<TValue = unknown> = {\n\tpromise: Promise<TValue>;\n\tresult: TValue;\n};\n\nconst [AwaitContextProvider, useAwaitContextImpl] = createCustomContext<AwaitContextType>({\n\thookName: \"useAwaitContext\",\n\tname: \"AwaitContext\",\n\tproviderName: \"AwaitInner\",\n});\n\nconst useAwaitContext = <TValue>() => useAwaitContextImpl() as AwaitContextType<TValue>;\n\nexport { useAwaitContext, AwaitContextProvider };\n","\"use client\";\n\nimport {\n\tgetSlotMap,\n\twithSlotNameAndSymbol,\n\ttype GetSlotComponentProps,\n} from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Fragment as ReactFragment, Suspense, use, useMemo } from \"react\";\nimport { ErrorBoundary, useErrorBoundaryContext, type ErrorBoundaryProps } from \"../error-boundary\";\nimport { Slot } from \"../slot\";\nimport type { SuspenseWithBoundaryProps } from \"../suspense-with-boundary\";\nimport { AwaitContextProvider, useAwaitContext } from \"./await-context\";\n\ntype RenderPropFn<TValue> = (result: TValue) => React.ReactNode;\n\ntype ChildrenType<TValue> = React.ReactNode | RenderPropFn<TValue>;\n\nexport type AwaitRootProps<TValue> = Omit<SuspenseWithBoundaryProps, \"children\"> & {\n\tasChild?: boolean;\n\tchildren: ChildrenType<TValue>;\n\tpromise: Promise<TValue>;\n\twithErrorBoundary?: boolean;\n\twithSuspense?: boolean;\n};\n\nexport function AwaitRoot<TValue>(props: AwaitRootProps<TValue>) {\n\tconst {\n\t\tasChild,\n\t\tchildren,\n\t\terrorFallback,\n\t\terrorResetKeys,\n\t\tfallback,\n\t\tname,\n\t\tonError,\n\t\tonErrorReset,\n\t\tpromise,\n\t\twithErrorBoundary = true,\n\t\twithSuspense = true,\n\t} = props;\n\n\tconst WithErrorBoundary = withErrorBoundary ? ErrorBoundary : ReactFragment;\n\tconst WithSuspense = withSuspense ? Suspense : ReactFragment;\n\n\tconst slots =\n\t\t!isFunction(children) ?\n\t\t\tgetSlotMap<SlotComponentProps>(children)\n\t\t:\t({ default: children } as unknown as ReturnType<typeof getSlotMap<SlotComponentProps>>);\n\n\tconst resolvedPendingFallback = slots.pending ?? fallback;\n\tconst resolvedErrorFallback = slots.error ?? errorFallback;\n\n\treturn (\n\t\t<WithErrorBoundary\n\t\t\t{...(withErrorBoundary && {\n\t\t\t\terrorFallback: resolvedErrorFallback,\n\t\t\t\terrorResetKeys,\n\t\t\t\tonError,\n\t\t\t\tonErrorReset,\n\t\t\t})}\n\t\t>\n\t\t\t<WithSuspense {...(withSuspense && { fallback: resolvedPendingFallback, name })}>\n\t\t\t\t<AwaitRootImpl promise={promise} asChild={asChild}>\n\t\t\t\t\t{slots.default}\n\t\t\t\t</AwaitRootImpl>\n\t\t\t</WithSuspense>\n\t\t</WithErrorBoundary>\n\t);\n}\n\ntype AwaitRootImplProps<TValue> = Pick<AwaitRootProps<TValue>, \"asChild\" | \"children\" | \"promise\">;\n\nfunction AwaitRootImpl<TValue>(props: AwaitRootImplProps<TValue>) {\n\tconst { asChild, children, promise } = props;\n\n\tconst result = use(promise);\n\n\tconst resolvedChildren = isFunction(children) ? children(result) : children;\n\n\tconst Component = asChild ? Slot.Root : ReactFragment;\n\n\tconst contextValue = useMemo(() => ({ promise, result }), [promise, result]);\n\n\treturn (\n\t\t<AwaitContextProvider value={contextValue}>\n\t\t\t<Component {...(asChild && contextValue)}>{resolvedChildren}</Component>\n\t\t</AwaitContextProvider>\n\t);\n}\n\ntype SlotComponentProps = AwaitErrorProps | AwaitPendingProps | AwaitSuccessProps;\n\ntype AwaitSuccessProps<TValue = unknown> = GetSlotComponentProps<\"default\", ChildrenType<TValue>>;\n\nexport function AwaitSuccess<TPromiseOrValue, TValue = Awaited<TPromiseOrValue>>(\n\tprops: Pick<AwaitSuccessProps<TValue>, \"children\">\n) {\n\tconst { children } = props;\n\n\tif (isFunction(children)) {\n\t\t// eslint-disable-next-line react-x/rules-of-hooks, react-hooks/hooks -- This hook only uses `use` under the hood so this is safe\n\t\tconst { result } = useAwaitContext<TValue>();\n\n\t\treturn children(result);\n\t}\n\n\treturn children;\n}\n\nObject.assign(AwaitSuccess, withSlotNameAndSymbol<AwaitSuccessProps>(\"default\"));\n\ntype AwaitErrorProps = GetSlotComponentProps<\"error\", ErrorBoundaryProps[\"errorFallback\"]>;\n\nexport const AwaitError = withSlotNameAndSymbol<AwaitErrorProps, { asChild?: boolean }>(\n\t\"error\",\n\t(props) => {\n\t\tconst { asChild, children } = props;\n\n\t\tconst errorBoundaryContext = useErrorBoundaryContext();\n\n\t\tconst Component = asChild ? Slot.Root : ReactFragment;\n\n\t\tconst resolvedChildren = isFunction(children) ? children(errorBoundaryContext) : children;\n\n\t\treturn <Component {...(asChild && errorBoundaryContext)}>{resolvedChildren}</Component>;\n\t}\n);\n\ntype AwaitPendingProps = GetSlotComponentProps<\"pending\", React.SuspenseProps[\"fallback\"]>;\n\nexport const AwaitPending = withSlotNameAndSymbol<AwaitPendingProps>(\"pending\");\n","export {\n\tAwaitRoot as Root,\n\tAwaitError as Error,\n\tAwaitPending as Pending,\n\tAwaitSuccess as Success,\n} from \"./await\";\n"],"mappings":";;;;;;;;;;AAOA,MAAM,CAAC,sBAAsB,uBAAuB,oBAAsC;CACzF,UAAU;CACV,MAAM;CACN,cAAc;CACd,CAAC;AAEF,MAAM,wBAAgC,qBAAqB;;;ACa3D,SAAgB,UAAkB,OAA+B;CAChE,MAAM,EACL,SACA,UACA,eACA,gBACA,UACA,MACA,SACA,cACA,SACA,oBAAoB,MACpB,eAAe,SACZ;CAEJ,MAAM,oBAAoB,oBAAoB,gBAAgBA;CAC9D,MAAM,eAAe,eAAe,WAAWA;CAE/C,MAAM,QACL,CAAC,WAAW,SAAS,GACpB,WAA+B,SAAS,GACtC,EAAE,SAAS,UAAU;CAEzB,MAAM,0BAA0B,MAAM,WAAW;CACjD,MAAM,wBAAwB,MAAM,SAAS;AAE7C,QACC,oBAAC,mBAAD;EACC,GAAK,qBAAqB;GACzB,eAAe;GACf;GACA;GACA;GACA;YAED,oBAAC,cAAD;GAAc,GAAK,gBAAgB;IAAE,UAAU;IAAyB;IAAM;aAC7E,oBAAC,eAAD;IAAwB;IAAkB;cACxC,MAAM;IACQ,CAAA;GACF,CAAA;EACI,CAAA;;AAMtB,SAAS,cAAsB,OAAmC;CACjE,MAAM,EAAE,SAAS,UAAU,YAAY;CAEvC,MAAM,SAAS,IAAI,QAAQ;CAE3B,MAAM,mBAAmB,WAAW,SAAS,GAAG,SAAS,OAAO,GAAG;CAEnE,MAAM,YAAY,UAAUC,WAAYD;CAExC,MAAM,eAAe,eAAe;EAAE;EAAS;EAAQ,GAAG,CAAC,SAAS,OAAO,CAAC;AAE5E,QACC,oBAAC,sBAAD;EAAsB,OAAO;YAC5B,oBAAC,WAAD;GAAW,GAAK,WAAW;aAAgB;GAA6B,CAAA;EAClD,CAAA;;AAQzB,SAAgB,aACf,OACC;CACD,MAAM,EAAE,aAAa;AAErB,KAAI,WAAW,SAAS,EAAE;EAEzB,MAAM,EAAE,WAAW,iBAAyB;AAE5C,SAAO,SAAS,OAAO;;AAGxB,QAAO;;AAGR,OAAO,OAAO,cAAc,sBAAyC,UAAU,CAAC;AAIhF,MAAa,aAAa,sBACzB,UACC,UAAU;CACV,MAAM,EAAE,SAAS,aAAa;CAE9B,MAAM,uBAAuB,yBAAyB;CAEtD,MAAM,YAAY,UAAUC,WAAYD;CAExC,MAAM,mBAAmB,WAAW,SAAS,GAAG,SAAS,qBAAqB,GAAG;AAEjF,QAAO,oBAAC,WAAD;EAAW,GAAK,WAAW;YAAwB;EAA6B,CAAA;EAExF;AAID,MAAa,eAAe,sBAAyC,UAAU"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as ErrorBoundary, i as useErrorBoundaryContext, n as useErrorBoundary, o as ErrorBoundaryProps, r as ErrorBoundaryContextType, s as ErrorFallbackRenderProps, t as UseErrorBoundaryReturn } from "../../index-BmD5l0L7.js";
|
|
2
|
+
export { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, ErrorFallbackRenderProps, UseErrorBoundaryReturn, useErrorBoundary, useErrorBoundaryContext };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { n as ErrorBoundary, r as useErrorBoundaryContext, t as useErrorBoundary } from "../../error-boundary-
|
|
2
|
+
import { n as ErrorBoundary, r as useErrorBoundaryContext, t as useErrorBoundary } from "../../error-boundary-BOZ3EvMt.js";
|
|
3
3
|
export { ErrorBoundary, useErrorBoundary, useErrorBoundaryContext };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { i as ShowRoot, n as ShowContent, r as ShowFallback, t as show_parts_exports } from "../../show-
|
|
2
|
+
import { i as ShowRoot, n as ShowContent, r as ShowFallback, t as show_parts_exports } from "../../show-CMxdpPiN.js";
|
|
3
3
|
export { show_parts_exports as Show, ShowContent, ShowFallback, ShowRoot };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { n as ErrorBoundary } from "../../error-boundary-BOZ3EvMt.js";
|
|
2
|
+
import { Suspense } from "react";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/common/suspense-with-boundary/suspense-with-boundary.tsx
|
|
5
|
+
function SuspenseWithBoundary(props) {
|
|
6
|
+
const { children, fallback, name, ...restOfErrorBoundaryProps } = props;
|
|
7
|
+
return /* @__PURE__ */ jsx(ErrorBoundary, {
|
|
8
|
+
...restOfErrorBoundaryProps,
|
|
9
|
+
children: /* @__PURE__ */ jsxs(Suspense, {
|
|
10
|
+
fallback,
|
|
11
|
+
name,
|
|
12
|
+
children: [" ", children]
|
|
13
|
+
})
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
//#endregion
|
|
17
|
+
export { SuspenseWithBoundary };
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/common/suspense-with-boundary/suspense-with-boundary.tsx"],"sourcesContent":["import { Suspense, type SuspenseProps } from \"react\";\nimport { ErrorBoundary, type ErrorBoundaryProps } from \"../error-boundary\";\n\nexport type SuspenseWithBoundaryProps = ErrorBoundaryProps & SuspenseProps;\n\nexport function SuspenseWithBoundary(props: SuspenseWithBoundaryProps) {\n\tconst { children, fallback, name, ...restOfErrorBoundaryProps } = props;\n\n\treturn (\n\t\t<ErrorBoundary {...restOfErrorBoundaryProps}>\n\t\t\t<Suspense fallback={fallback} name={name}>\n\t\t\t\t{\" \"}\n\t\t\t\t{children}\n\t\t\t</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n"],"mappings":";;;;AAKA,SAAgB,qBAAqB,OAAkC;CACtE,MAAM,EAAE,UAAU,UAAU,MAAM,GAAG,6BAA6B;AAElE,QACC,oBAAC,eAAD;EAAe,GAAI;YAClB,qBAAC,UAAD;GAAoB;GAAgB;aAApC,CACE,KACA,SACS;;EACI,CAAA"}
|
|
@@ -40,50 +40,52 @@ var ErrorBoundary = class extends Component {
|
|
|
40
40
|
}
|
|
41
41
|
componentDidUpdate(prevProps, prevState) {
|
|
42
42
|
const { hasError } = this.state;
|
|
43
|
-
const {
|
|
44
|
-
if (hasError && prevState.error !== null && hasArrayChanged(prevProps.
|
|
45
|
-
this.props.
|
|
46
|
-
next:
|
|
47
|
-
prev: prevProps.
|
|
43
|
+
const { errorResetKeys } = this.props;
|
|
44
|
+
if (hasError && prevState.error !== null && hasArrayChanged(prevProps.errorResetKeys, errorResetKeys)) {
|
|
45
|
+
this.props.onErrorReset?.({
|
|
46
|
+
next: errorResetKeys,
|
|
47
|
+
prev: prevProps.errorResetKeys,
|
|
48
48
|
reason: "keys"
|
|
49
49
|
});
|
|
50
50
|
this.setState(initialState);
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
render() {
|
|
54
|
-
const { children,
|
|
54
|
+
const { children, errorFallback } = this.props;
|
|
55
55
|
const { error, hasError } = this.state;
|
|
56
56
|
let childToRender = children;
|
|
57
|
-
if (hasError)
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
if (hasError) {
|
|
58
|
+
switch (true) {
|
|
59
|
+
case isFunction(errorFallback):
|
|
60
|
+
childToRender = errorFallback({
|
|
61
|
+
error,
|
|
62
|
+
resetErrorBoundary: this.#resetErrorBoundary
|
|
63
|
+
});
|
|
64
|
+
break;
|
|
65
|
+
case Boolean(errorFallback):
|
|
66
|
+
childToRender = errorFallback;
|
|
67
|
+
break;
|
|
68
|
+
default: console.warn("No fallback provided to error boundary");
|
|
69
|
+
}
|
|
70
|
+
return /* @__PURE__ */ jsx(ErrorBoundaryContext, {
|
|
71
|
+
value: {
|
|
60
72
|
error,
|
|
73
|
+
hasError,
|
|
61
74
|
resetErrorBoundary: this.#resetErrorBoundary
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
childToRender = fallback;
|
|
66
|
-
break;
|
|
67
|
-
default: console.warn("No fallback provided to error boundary");
|
|
75
|
+
},
|
|
76
|
+
children: childToRender
|
|
77
|
+
});
|
|
68
78
|
}
|
|
69
|
-
return
|
|
70
|
-
value: {
|
|
71
|
-
error,
|
|
72
|
-
hasError,
|
|
73
|
-
resetErrorBoundary: this.#resetErrorBoundary
|
|
74
|
-
},
|
|
75
|
-
children: childToRender
|
|
76
|
-
});
|
|
79
|
+
return childToRender;
|
|
77
80
|
}
|
|
78
81
|
#resetErrorBoundary = (...parameters) => {
|
|
79
82
|
const { error } = this.state;
|
|
80
|
-
if (error
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
83
|
+
if (error === null) return;
|
|
84
|
+
this.props.onErrorReset?.({
|
|
85
|
+
args: parameters,
|
|
86
|
+
reason: "imperative-api"
|
|
87
|
+
});
|
|
88
|
+
this.setState(initialState);
|
|
87
89
|
};
|
|
88
90
|
};
|
|
89
91
|
//#endregion
|
|
@@ -114,4 +116,4 @@ const useErrorBoundary = () => {
|
|
|
114
116
|
//#endregion
|
|
115
117
|
export { ErrorBoundary as n, useErrorBoundaryContext as r, useErrorBoundary as t };
|
|
116
118
|
|
|
117
|
-
//# sourceMappingURL=error-boundary-
|
|
119
|
+
//# sourceMappingURL=error-boundary-BOZ3EvMt.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"error-boundary-BOZ3EvMt.js","names":["#resetErrorBoundary"],"sources":["../../src/components/common/error-boundary/error-boundary-context.ts","../../src/components/common/error-boundary/error-boundary.tsx","../../src/components/common/error-boundary/useErrorBoundary.ts"],"sourcesContent":["import { createCustomContext } from \"@zayne-labs/toolkit-react\";\nimport type { ErrorFallbackRenderProps } from \"./types\";\n\nexport type ErrorBoundaryContextType = ErrorFallbackRenderProps & {\n\thasError: boolean;\n};\n\nconst [ErrorBoundaryContext, useErrorBoundaryContext] = createCustomContext<ErrorBoundaryContextType>({\n\thookName: \"useErrorBoundaryContext\",\n\tname: \"ErrorBoundaryContext\",\n\tproviderName: \"ErrorBoundaryContextProvider\",\n});\n\nexport { ErrorBoundaryContext, useErrorBoundaryContext };\n","\"use client\";\n\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Component } from \"react\";\nimport { ErrorBoundaryContext } from \"./error-boundary-context\";\nimport type { ErrorBoundaryProps } from \"./types\";\n\ntype ErrorBoundaryState =\n\t| {\n\t\t\terror: Error;\n\t\t\thasError: true;\n\t }\n\t| {\n\t\t\terror: null;\n\t\t\thasError: false;\n\t };\n\nconst initialState: ErrorBoundaryState = {\n\terror: null,\n\thasError: false,\n};\n\nconst hasArrayChanged = (arrayOne: unknown[] = [], arrayTwo: unknown[] = []) => {\n\treturn (\n\t\tarrayOne.length !== arrayTwo.length\n\t\t|| arrayOne.some((item, index) => !Object.is(item, arrayTwo[index]))\n\t);\n};\n\n/**\n * Copied from react-error-boundary package\n * @see https://github.com/bvaughn/react-error-boundary\n */\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n\tconstructor(props: ErrorBoundaryProps) {\n\t\tsuper(props);\n\n\t\tthis.state = initialState;\n\t}\n\n\tstatic getDerivedStateFromError(error: Error) {\n\t\treturn { error, hasError: true };\n\t}\n\n\toverride componentDidCatch(error: Error, info: React.ErrorInfo) {\n\t\tthis.props.onError?.({ error, info });\n\t}\n\n\toverride componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState) {\n\t\tconst { hasError } = this.state;\n\t\tconst { errorResetKeys } = this.props;\n\n\t\t// == There's an edge case where if the thing that triggered the error happens to *also* be in the resetKeys array, we'd end up resetting the error boundary immediately.\n\t\t// == This would likely trigger a second error to be thrown.\n\t\t// == So we make sure that we don't check the resetKeys on the first call of cDU after the error is set.\n\n\t\tif (\n\t\t\thasError\n\t\t\t&& prevState.error !== null\n\t\t\t&& hasArrayChanged(prevProps.errorResetKeys, errorResetKeys)\n\t\t) {\n\t\t\tthis.props.onErrorReset?.({\n\t\t\t\tnext: errorResetKeys,\n\t\t\t\tprev: prevProps.errorResetKeys,\n\t\t\t\treason: \"keys\",\n\t\t\t});\n\n\t\t\tthis.setState(initialState);\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst { children, errorFallback } = this.props;\n\t\tconst { error, hasError } = this.state;\n\n\t\tlet childToRender = children;\n\n\t\tif (hasError) {\n\t\t\tswitch (true) {\n\t\t\t\tcase isFunction(errorFallback): {\n\t\t\t\t\tchildToRender = errorFallback({\n\t\t\t\t\t\terror,\n\t\t\t\t\t\tresetErrorBoundary: this.#resetErrorBoundary,\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase Boolean(errorFallback): {\n\t\t\t\t\tchildToRender = errorFallback;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault: {\n\t\t\t\t\tconsole.warn(\"No fallback provided to error boundary\");\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<ErrorBoundaryContext\n\t\t\t\t\tvalue={{\n\t\t\t\t\t\terror,\n\t\t\t\t\t\thasError,\n\t\t\t\t\t\tresetErrorBoundary: this.#resetErrorBoundary,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{childToRender}\n\t\t\t\t</ErrorBoundaryContext>\n\t\t\t);\n\t\t}\n\n\t\treturn childToRender;\n\t}\n\n\t#resetErrorBoundary = (...parameters: unknown[]) => {\n\t\tconst { error } = this.state;\n\n\t\tif (error === null) return;\n\n\t\tthis.props.onErrorReset?.({\n\t\t\targs: parameters,\n\t\t\treason: \"imperative-api\",\n\t\t});\n\n\t\tthis.setState(initialState);\n\t};\n}\n","import { useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport { useErrorBoundaryContext } from \"./error-boundary-context\";\n\ntype UseErrorBoundaryState<TError extends Error> =\n\t| {\n\t\t\terror: null;\n\t\t\thasError: false;\n\t }\n\t| {\n\t\t\terror: TError;\n\t\t\thasError: true;\n\t };\n\nexport const useErrorBoundary = <TError extends Error>() => {\n\tconst { resetErrorBoundary } = useErrorBoundaryContext();\n\n\tconst [state, setState] = useState<UseErrorBoundaryState<TError>>({\n\t\terror: null,\n\t\thasError: false,\n\t});\n\n\tif (state.hasError) {\n\t\tthrow state.error;\n\t}\n\n\tconst resetBoundary = useCallbackRef(() => {\n\t\tresetErrorBoundary();\n\n\t\tsetState({\n\t\t\terror: null,\n\t\t\thasError: false,\n\t\t});\n\t});\n\n\tconst showBoundary = useCallbackRef((error: TError) => {\n\t\tsetState({\n\t\t\terror,\n\t\t\thasError: true,\n\t\t});\n\t});\n\n\treturn { resetBoundary, showBoundary };\n};\n\nexport type UseErrorBoundaryReturn = {\n\tresetBoundary: () => void;\n\tshowBoundary: (error: Error) => void;\n};\n"],"mappings":";;;;;AAOA,MAAM,CAAC,sBAAsB,2BAA2B,oBAA8C;CACrG,UAAU;CACV,MAAM;CACN,cAAc;CACd,CAAC;;;ACMF,MAAM,eAAmC;CACxC,OAAO;CACP,UAAU;CACV;AAED,MAAM,mBAAmB,WAAsB,EAAE,EAAE,WAAsB,EAAE,KAAK;AAC/E,QACC,SAAS,WAAW,SAAS,UAC1B,SAAS,MAAM,MAAM,UAAU,CAAC,OAAO,GAAG,MAAM,SAAS,OAAO,CAAC;;;;;;AAStE,IAAa,gBAAb,cAAmC,UAAkD;CACpF,YAAY,OAA2B;AACtC,QAAM,MAAM;AAEZ,OAAK,QAAQ;;CAGd,OAAO,yBAAyB,OAAc;AAC7C,SAAO;GAAE;GAAO,UAAU;GAAM;;CAGjC,kBAA2B,OAAc,MAAuB;AAC/D,OAAK,MAAM,UAAU;GAAE;GAAO;GAAM,CAAC;;CAGtC,mBAA4B,WAA+B,WAA+B;EACzF,MAAM,EAAE,aAAa,KAAK;EAC1B,MAAM,EAAE,mBAAmB,KAAK;AAMhC,MACC,YACG,UAAU,UAAU,QACpB,gBAAgB,UAAU,gBAAgB,eAAe,EAC3D;AACD,QAAK,MAAM,eAAe;IACzB,MAAM;IACN,MAAM,UAAU;IAChB,QAAQ;IACR,CAAC;AAEF,QAAK,SAAS,aAAa;;;CAI7B,SAAkB;EACjB,MAAM,EAAE,UAAU,kBAAkB,KAAK;EACzC,MAAM,EAAE,OAAO,aAAa,KAAK;EAEjC,IAAI,gBAAgB;AAEpB,MAAI,UAAU;AACb,WAAQ,MAAR;IACC,KAAK,WAAW,cAAc;AAC7B,qBAAgB,cAAc;MAC7B;MACA,oBAAoB,MAAA;MACpB,CAAC;AACF;IAGD,KAAK,QAAQ,cAAc;AAC1B,qBAAgB;AAChB;IAGD,QACC,SAAQ,KAAK,yCAAyC;;AAIxD,UACC,oBAAC,sBAAD;IACC,OAAO;KACN;KACA;KACA,oBAAoB,MAAA;KACpB;cAEA;IACqB,CAAA;;AAIzB,SAAO;;CAGR,uBAAuB,GAAG,eAA0B;EACnD,MAAM,EAAE,UAAU,KAAK;AAEvB,MAAI,UAAU,KAAM;AAEpB,OAAK,MAAM,eAAe;GACzB,MAAM;GACN,QAAQ;GACR,CAAC;AAEF,OAAK,SAAS,aAAa;;;;;AC9G7B,MAAa,yBAA+C;CAC3D,MAAM,EAAE,uBAAuB,yBAAyB;CAExD,MAAM,CAAC,OAAO,YAAY,SAAwC;EACjE,OAAO;EACP,UAAU;EACV,CAAC;AAEF,KAAI,MAAM,SACT,OAAM,MAAM;AAmBb,QAAO;EAAE,eAhBa,qBAAqB;AAC1C,uBAAoB;AAEpB,YAAS;IACR,OAAO;IACP,UAAU;IACV,CAAC;IACD;EASsB,cAPH,gBAAgB,UAAkB;AACtD,YAAS;IACR;IACA,UAAU;IACV,CAAC;IACD;EAEoC"}
|
|
@@ -4,20 +4,21 @@ import * as _$_zayne_labs_toolkit_react0 from "@zayne-labs/toolkit-react";
|
|
|
4
4
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
5
|
|
|
6
6
|
//#region src/components/common/error-boundary/types.d.ts
|
|
7
|
-
type
|
|
8
|
-
error:
|
|
7
|
+
type ErrorFallbackRenderProps = {
|
|
8
|
+
error: Error;
|
|
9
9
|
resetErrorBoundary: (...args: unknown[]) => void;
|
|
10
10
|
};
|
|
11
11
|
type ErrorBoundaryProps = {
|
|
12
12
|
children: React.ReactNode;
|
|
13
|
-
|
|
13
|
+
errorFallback?: React.ReactNode | ((props: ErrorFallbackRenderProps) => React.ReactNode);
|
|
14
|
+
errorResetKeys?: unknown[];
|
|
14
15
|
onError?: (context: {
|
|
15
16
|
error: Error;
|
|
16
17
|
info: React.ErrorInfo & {
|
|
17
18
|
ownerStack?: string;
|
|
18
19
|
};
|
|
19
20
|
}) => void;
|
|
20
|
-
|
|
21
|
+
onErrorReset?: (context: {
|
|
21
22
|
args: unknown[];
|
|
22
23
|
reason: "imperative-api";
|
|
23
24
|
} | {
|
|
@@ -25,7 +26,6 @@ type ErrorBoundaryProps = {
|
|
|
25
26
|
prev: unknown[] | undefined;
|
|
26
27
|
reason: "keys";
|
|
27
28
|
}) => void;
|
|
28
|
-
resetKeys?: unknown[];
|
|
29
29
|
};
|
|
30
30
|
//#endregion
|
|
31
31
|
//#region src/components/common/error-boundary/error-boundary.d.ts
|
|
@@ -49,14 +49,12 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryS
|
|
|
49
49
|
};
|
|
50
50
|
componentDidCatch(error: Error, info: React.ErrorInfo): void;
|
|
51
51
|
componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState): void;
|
|
52
|
-
render(): _$react_jsx_runtime0.JSX.Element;
|
|
52
|
+
render(): string | number | bigint | boolean | Iterable<_$react.ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<_$react.ReactNode> | null | undefined> | _$react_jsx_runtime0.JSX.Element | null | undefined;
|
|
53
53
|
}
|
|
54
54
|
//#endregion
|
|
55
55
|
//#region src/components/common/error-boundary/error-boundary-context.d.ts
|
|
56
|
-
type ErrorBoundaryContextType = {
|
|
57
|
-
error: unknown;
|
|
56
|
+
type ErrorBoundaryContextType = ErrorFallbackRenderProps & {
|
|
58
57
|
hasError: boolean;
|
|
59
|
-
resetErrorBoundary: (...args: unknown[]) => void;
|
|
60
58
|
};
|
|
61
59
|
declare const ErrorBoundaryContext: _$react.Context<ErrorBoundaryContextType>, useErrorBoundaryContext: _$_zayne_labs_toolkit_react0.UseCustomContext<ErrorBoundaryContextType, true>;
|
|
62
60
|
//#endregion
|
|
@@ -70,5 +68,5 @@ type UseErrorBoundaryReturn = {
|
|
|
70
68
|
showBoundary: (error: Error) => void;
|
|
71
69
|
};
|
|
72
70
|
//#endregion
|
|
73
|
-
export { ErrorBoundary as a, useErrorBoundaryContext as i, useErrorBoundary as n, ErrorBoundaryProps as o, ErrorBoundaryContextType as r,
|
|
74
|
-
//# sourceMappingURL=index-
|
|
71
|
+
export { ErrorBoundary as a, useErrorBoundaryContext as i, useErrorBoundary as n, ErrorBoundaryProps as o, ErrorBoundaryContextType as r, ErrorFallbackRenderProps as s, UseErrorBoundaryReturn as t };
|
|
72
|
+
//# sourceMappingURL=index-BmD5l0L7.d.ts.map
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import { o as ErrorBoundaryProps } from "./index-
|
|
1
|
+
import { o as ErrorBoundaryProps } from "./index-BmD5l0L7.js";
|
|
2
|
+
import { SuspenseProps } from "react";
|
|
2
3
|
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
4
|
|
|
4
5
|
//#region src/components/common/suspense-with-boundary/suspense-with-boundary.d.ts
|
|
5
|
-
type SuspenseWithBoundaryProps =
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
errorFallback?: ErrorBoundaryProps["fallback"];
|
|
8
|
-
fallback?: React.ReactNode;
|
|
9
|
-
};
|
|
6
|
+
type SuspenseWithBoundaryProps = ErrorBoundaryProps & SuspenseProps;
|
|
10
7
|
declare function SuspenseWithBoundary(props: SuspenseWithBoundaryProps): _$react_jsx_runtime0.JSX.Element;
|
|
11
8
|
//#endregion
|
|
12
9
|
export { SuspenseWithBoundaryProps as n, SuspenseWithBoundary as t };
|
|
13
|
-
//# sourceMappingURL=index-
|
|
10
|
+
//# sourceMappingURL=index-dmMYkH2c.d.ts.map
|
|
@@ -168,11 +168,11 @@ const usePresence = (options) => {
|
|
|
168
168
|
const animationPhase = presentProp ? "enter" : "exit";
|
|
169
169
|
const getPresenceProps = useCallback((innerProps) => {
|
|
170
170
|
return {
|
|
171
|
-
"data-animation-phase": animationPhase,
|
|
172
171
|
"data-mounted": isMounted,
|
|
173
172
|
"data-present": presentProp,
|
|
174
|
-
"data-transition-phase": transitionPhase,
|
|
175
173
|
"data-variant": variant,
|
|
174
|
+
...variant === "animation" && { "data-animation-phase": animationPhase },
|
|
175
|
+
...variant === "transition" && { "data-transition-phase": transitionPhase },
|
|
176
176
|
...innerProps,
|
|
177
177
|
className: innerProps.className
|
|
178
178
|
};
|
|
@@ -222,4 +222,4 @@ function Presence(props) {
|
|
|
222
222
|
//#endregion
|
|
223
223
|
export { Presence as t };
|
|
224
224
|
|
|
225
|
-
//# sourceMappingURL=presence-
|
|
225
|
+
//# sourceMappingURL=presence-DkWhm7xu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"presence-CHd9s3IS.js","names":["Slot.Root"],"sources":["../../src/components/common/presence/use-presence.ts","../../src/components/common/presence/presence.tsx"],"sourcesContent":["import { on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useToggle } from \"@zayne-labs/toolkit-react\";\nimport type { InferProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\ntype StateMachineConfig<TState extends string, TEvent extends string> = {\n\tinitial: TState;\n\tstates: Record<TState, Partial<Record<TEvent, TState>>>;\n};\n\nconst useStateMachine = <TState extends string, TEvent extends string>(\n\tconfig: StateMachineConfig<TState, TEvent>\n) => {\n\tconst reducer = (prevState: TState, event: TEvent): TState => {\n\t\tconst newState = config.states[prevState][event] ?? prevState;\n\n\t\treturn newState;\n\t};\n\n\treturn useReducer(reducer, config.initial);\n};\n\nconst getAnimationName = (styles: CSSStyleDeclaration | null) => styles?.animationName ?? \"none\";\n\nexport type UsePresenceOptions = {\n\tonExitComplete?: () => void;\n\tpresent: boolean;\n\t/**\n\t * @default \"animation\"\n\t */\n\tvariant?: \"animation\" | \"transition\";\n};\n\nexport type PresencePropGetters = {\n\tgetPresenceProps: (innerProps: InferProps<HTMLElement>) => InferProps<HTMLElement>;\n};\n\nexport type UsePresenceResult = {\n\tisMounted: boolean;\n\tisTransitionComplete: boolean;\n\tpropGetters: PresencePropGetters;\n\tref: React.Ref<HTMLElement>;\n};\n\n/**\n * React hook that provides the ability to animate the mount/unmount of a component.\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/presence/src/presence.tsx\n */\n\nconst usePresence = (options: UsePresenceOptions): UsePresenceResult => {\n\tconst { onExitComplete, present: presentProp, variant = \"animation\" } = options;\n\n\tconst stableOnExitComplete = useCallbackRef(onExitComplete);\n\n\tconst [node, setNode] = useState<HTMLElement | null>(null);\n\n\tconst [isTransitionComplete, toggleIsTransitionComplete] = useToggle(false);\n\n\tconst stylesRef = useRef<CSSStyleDeclaration | null>(null);\n\n\tconst prevNodeStateRef = useRef<{\n\t\tprevAnimationName: string;\n\t\tprevPresent: boolean;\n\t}>({\n\t\tprevAnimationName: \"none\",\n\t\tprevPresent: presentProp,\n\t});\n\n\tconst initialState = presentProp ? \"mounted\" : \"unmounted\";\n\n\tconst [mountState, send] = useStateMachine({\n\t\tinitial: initialState,\n\t\tstates: {\n\t\t\tmounted: {\n\t\t\t\tANIMATION_OUT: \"unmountSuspended\",\n\t\t\t\tUNMOUNT: \"unmounted\",\n\t\t\t},\n\t\t\tunmounted: {\n\t\t\t\tMOUNT: \"mounted\",\n\t\t\t},\n\t\t\tunmountSuspended: {\n\t\t\t\tANIMATION_END: \"unmounted\",\n\t\t\t\tMOUNT: \"mounted\",\n\t\t\t},\n\t\t},\n\t});\n\n\tuseEffect(() => {\n\t\tconst currentAnimationName = getAnimationName(stylesRef.current);\n\n\t\tprevNodeStateRef.current.prevAnimationName =\n\t\t\tmountState === \"mounted\" ? currentAnimationName : \"none\";\n\t}, [mountState]);\n\n\tuseLayoutEffect(() => {\n\t\tconst styles = stylesRef.current;\n\t\tconst wasPresent = prevNodeStateRef.current.prevPresent;\n\t\tconst hasPresentChanged = wasPresent !== presentProp;\n\n\t\tif (!hasPresentChanged) return;\n\n\t\tconst prevAnimationName = prevNodeStateRef.current.prevAnimationName;\n\t\tconst currentAnimationName = getAnimationName(styles);\n\n\t\tswitch (true) {\n\t\t\tcase presentProp: {\n\t\t\t\tsend(\"MOUNT\");\n\n\t\t\t\tif (variant === \"transition\") {\n\t\t\t\t\trequestAnimationFrame(() => toggleIsTransitionComplete(true));\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase Boolean(node): {\n\t\t\t\tif (variant === \"animation\") {\n\t\t\t\t\tconst hasAnimation = currentAnimationName !== \"none\" && styles?.display !== \"none\";\n\n\t\t\t\t\t/**\n\t\t\t\t\t * When `present` changes to `false`, we check changes to animation-name to\n\t\t\t\t\t * determine whether an animation has started. We chose this approach (reading\n\t\t\t\t\t * computed styles) because there is no `animationrun` event (like the `transitionrun` event) and `animationstart`\n\t\t\t\t\t * fires after `animation-delay` has expired which would be too late.\n\t\t\t\t\t */\n\n\t\t\t\t\tconst isAnimationStarted = hasAnimation && prevAnimationName !== currentAnimationName;\n\n\t\t\t\t\tconst isAnimatingOut = wasPresent && isAnimationStarted;\n\n\t\t\t\t\tsend(isAnimatingOut ? \"ANIMATION_OUT\" : \"UNMOUNT\");\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tdefault: {\n\t\t\t\tsend(\"UNMOUNT\");\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tprevNodeStateRef.current.prevPresent = presentProp;\n\t}, [presentProp, node, send, variant, toggleIsTransitionComplete]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!node) {\n\t\t\t// Transition to the unmounted state if the node is removed prematurely.\n\t\t\t// We avoid doing so during cleanup as the node may change but still exist.\n\t\t\tsend(\"ANIMATION_END\");\n\t\t\treturn;\n\t\t}\n\n\t\tconst setupAnimationListeners = () => {\n\t\t\tlet timeoutId: number;\n\n\t\t\tconst ownerWindow = node.ownerDocument.defaultView ?? globalThis;\n\n\t\t\tconst handleAnimationStart = (event: AnimationEvent) => {\n\t\t\t\tconst isTargetAnimatingNode = event.target === node;\n\n\t\t\t\tif (!isTargetAnimatingNode) return;\n\n\t\t\t\tprevNodeStateRef.current.prevAnimationName = getAnimationName(stylesRef.current);\n\t\t\t};\n\n\t\t\t/**\n\t\t\t * @description Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n\t\t\t * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n\t\t\t * make sure we only trigger ANIMATION_END for the currently active animation.\n\t\t\t */\n\t\t\tconst handleAnimationEnd = (event: AnimationEvent) => {\n\t\t\t\tconst currentAnimationName = getAnimationName(stylesRef.current);\n\n\t\t\t\t// The event.animationName is unescaped for CSS syntax, so we need to escape it to compare with the animationName computed from the style.\n\t\t\t\tconst isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));\n\n\t\t\t\tconst isTargetAnimatingNode = event.target === node && isCurrentAnimation;\n\n\t\t\t\tif (!isTargetAnimatingNode) return;\n\n\t\t\t\t// With React 18 concurrency this update is applied a frame after the\n\t\t\t\t// animation ends, creating a flash of visible content. By setting the\n\t\t\t\t// animation fill mode to \"forwards\", we force the node to keep the\n\t\t\t\t// styles of the last keyframe, removing the flash.\n\n\t\t\t\t// Previously we flushed the update via ReactDom.flushSync, but with\n\t\t\t\t// exit animations this resulted in the node being removed from the\n\t\t\t\t// DOM before the synthetic animationEnd event was dispatched, meaning\n\t\t\t\t// user-provided event handlers would not be called.\n\t\t\t\t// https://github.com/radix-ui/primitives/pull/1849\n\t\t\t\tsend(\"ANIMATION_END\");\n\n\t\t\t\tif (!prevNodeStateRef.current.prevPresent) {\n\t\t\t\t\tconst currentFillMode = node.style.animationFillMode;\n\t\t\t\t\tnode.style.animationFillMode = \"forwards\";\n\n\t\t\t\t\t// Reset the style after the node had time to unmount (for cases\n\t\t\t\t\t// where the component chooses not to unmount). Doing this any\n\t\t\t\t\t// sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n\t\t\t\t\t// still causes a flash.\n\t\t\t\t\ttimeoutId = ownerWindow.setTimeout(() => {\n\t\t\t\t\t\tif (node.style.animationFillMode === \"forwards\") {\n\t\t\t\t\t\t\tnode.style.animationFillMode = currentFillMode;\n\t\t\t\t\t\t}\n\t\t\t\t\t}) as never;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tconst onAnimationStartCleanup = on(node, \"animationstart\", handleAnimationStart);\n\t\t\tconst onAnimationEndCleanup = on(node, \"animationend\", handleAnimationEnd);\n\t\t\tconst onAnimationCancelCleanup = on(node, \"animationcancel\", handleAnimationEnd);\n\n\t\t\tconst cleanup = () => {\n\t\t\t\townerWindow.clearTimeout(timeoutId);\n\t\t\t\tonAnimationStartCleanup();\n\t\t\t\tonAnimationEndCleanup();\n\t\t\t\tonAnimationCancelCleanup();\n\t\t\t};\n\n\t\t\treturn cleanup;\n\t\t};\n\n\t\tconst setupTransitionListeners = () => {\n\t\t\tconst handleTransitionRun = (event: TransitionEvent) => {\n\t\t\t\tconst isTargetTransitioningNode = event.target === node;\n\n\t\t\t\tif (!isTargetTransitioningNode) return;\n\n\t\t\t\tsend(\"ANIMATION_OUT\");\n\t\t\t};\n\n\t\t\tconst handleTransitionEnd = (event: TransitionEvent) => {\n\t\t\t\tconst isTargetTransitioningNode =\n\t\t\t\t\tevent.target === node && !prevNodeStateRef.current.prevPresent;\n\n\t\t\t\tif (!isTargetTransitioningNode) return;\n\n\t\t\t\tsend(\"ANIMATION_END\");\n\t\t\t};\n\n\t\t\tconst onTransitionRunCleanup = on(node, \"transitionrun\", handleTransitionRun);\n\t\t\tconst onTransitionEndCleanup = on(node, \"transitionend\", handleTransitionEnd);\n\t\t\tconst onTransitionCancelCleanup = on(node, \"transitioncancel\", handleTransitionEnd);\n\n\t\t\tconst cleanup = () => {\n\t\t\t\tonTransitionRunCleanup();\n\t\t\t\tonTransitionEndCleanup();\n\t\t\t\tonTransitionCancelCleanup();\n\t\t\t};\n\n\t\t\treturn cleanup;\n\t\t};\n\n\t\tswitch (variant) {\n\t\t\tcase \"animation\": {\n\t\t\t\tconst cleanup = setupAnimationListeners();\n\n\t\t\t\treturn cleanup;\n\t\t\t}\n\n\t\t\tcase \"transition\": {\n\t\t\t\tconst cleanup = setupTransitionListeners();\n\n\t\t\t\treturn cleanup;\n\t\t\t}\n\n\t\t\tdefault: {\n\t\t\t\tvariant satisfies never;\n\t\t\t\tthrow new Error(`Invalid variant: ${variant}`);\n\t\t\t}\n\t\t}\n\t}, [node, send, variant]);\n\n\tuseEffect(() => {\n\t\tconst isExitCompleted = !presentProp && mountState === \"unmounted\";\n\n\t\tif (isExitCompleted) {\n\t\t\ttoggleIsTransitionComplete(false);\n\t\t\tstableOnExitComplete?.();\n\t\t}\n\t}, [mountState, presentProp, stableOnExitComplete, toggleIsTransitionComplete]);\n\n\tconst ref = useCallbackRef((refNode: HTMLElement | null) => {\n\t\tsetNode(refNode);\n\n\t\tif (refNode) {\n\t\t\tstylesRef.current = getComputedStyle(refNode);\n\t\t}\n\t});\n\n\tconst MOUNTED_STATES = [\"mounted\", \"unmountSuspended\"] satisfies Array<typeof mountState>;\n\tconst isMounted = MOUNTED_STATES.includes(mountState);\n\tconst transitionPhase = presentProp && isTransitionComplete ? \"enter\" : \"exit\";\n\tconst animationPhase = presentProp ? \"enter\" : \"exit\";\n\n\tconst getPresenceProps: PresencePropGetters[\"getPresenceProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t\"data-animation-phase\": animationPhase,\n\t\t\t\t\"data-mounted\": isMounted,\n\t\t\t\t\"data-present\": presentProp,\n\t\t\t\t\"data-transition-phase\": transitionPhase,\n\t\t\t\t\"data-variant\": variant,\n\t\t\t\t...innerProps,\n\t\t\t\tclassName: innerProps.className,\n\t\t\t};\n\t\t},\n\t\t[animationPhase, isMounted, presentProp, transitionPhase, variant]\n\t);\n\n\tconst propGetters = useMemo(\n\t\t() => ({\n\t\t\tgetPresenceProps,\n\t\t}),\n\t\t[getPresenceProps]\n\t);\n\n\tconst result = useMemo<UsePresenceResult>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tisMounted,\n\t\t\t\tisTransitionComplete,\n\t\t\t\tpropGetters,\n\t\t\t\tref,\n\t\t\t}) satisfies UsePresenceResult,\n\t\t[isMounted, isTransitionComplete, propGetters, ref]\n\t);\n\n\treturn result;\n};\n\nexport { usePresence };\n","\"use client\";\n\nimport { useComposeRefs } from \"@zayne-labs/toolkit-react\";\nimport { isFunction, type UnknownObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Slot } from \"../slot\";\nimport { usePresence, type UsePresenceOptions, type UsePresenceResult } from \"./use-presence\";\n\ntype RefProp = { ref?: React.Ref<HTMLElement> };\n\ntype RenderPropContext = Omit<UsePresenceResult, \"propGetters\" | \"ref\">\n\t& Pick<UsePresenceOptions, \"present\">;\n\nexport type PresenceProps = UsePresenceOptions & {\n\tchildren?: React.ReactElement<RefProp> | ((props: RenderPropContext) => React.ReactElement<RefProp>);\n\tclassName?: string;\n\tforceMount?: boolean;\n};\n\nfunction Presence(props: PresenceProps) {\n\tconst { children, className, forceMount = false, onExitComplete, present, variant } = props;\n\n\tconst {\n\t\tisMounted,\n\t\tisTransitionComplete,\n\t\tpropGetters,\n\t\tref: presenceRef,\n\t} = usePresence({ onExitComplete, present, variant });\n\n\tconst context = {\n\t\tisMounted,\n\t\tisTransitionComplete,\n\t\tpresent,\n\t} satisfies RenderPropContext;\n\n\tconst resolvedChild = isFunction(children) ? children(context) : children;\n\n\tconst childRef = (resolvedChild?.props.ref\n\t\t?? (resolvedChild as unknown as UnknownObject).ref) as React.Ref<HTMLElement>;\n\n\tconst ref = useComposeRefs(presenceRef, childRef);\n\n\tconst shouldRender =\n\t\tforceMount || (variant === \"transition\" ? isMounted || isTransitionComplete : isMounted);\n\n\tif (!shouldRender) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Slot.Root ref={ref} {...propGetters.getPresenceProps({ className })}>\n\t\t\t{resolvedChild}\n\t\t</Slot.Root>\n\t);\n}\n\nexport { Presence };\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"presence-DkWhm7xu.js","names":["Slot.Root"],"sources":["../../src/components/common/presence/use-presence.ts","../../src/components/common/presence/presence.tsx"],"sourcesContent":["import { on } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useToggle } from \"@zayne-labs/toolkit-react\";\nimport type { InferProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\ntype StateMachineConfig<TState extends string, TEvent extends string> = {\n\tinitial: TState;\n\tstates: Record<TState, Partial<Record<TEvent, TState>>>;\n};\n\nconst useStateMachine = <TState extends string, TEvent extends string>(\n\tconfig: StateMachineConfig<TState, TEvent>\n) => {\n\tconst reducer = (prevState: TState, event: TEvent): TState => {\n\t\tconst newState = config.states[prevState][event] ?? prevState;\n\n\t\treturn newState;\n\t};\n\n\treturn useReducer(reducer, config.initial);\n};\n\nconst getAnimationName = (styles: CSSStyleDeclaration | null) => styles?.animationName ?? \"none\";\n\nexport type UsePresenceOptions = {\n\tonExitComplete?: () => void;\n\tpresent: boolean;\n\t/**\n\t * @default \"animation\"\n\t */\n\tvariant?: \"animation\" | \"transition\";\n};\n\nexport type PresencePropGetters = {\n\tgetPresenceProps: (innerProps: InferProps<HTMLElement>) => InferProps<HTMLElement>;\n};\n\nexport type UsePresenceResult = {\n\tisMounted: boolean;\n\tisTransitionComplete: boolean;\n\tpropGetters: PresencePropGetters;\n\tref: React.Ref<HTMLElement>;\n};\n\n/**\n * React hook that provides the ability to animate the mount/unmount of a component.\n * @see https://github.com/radix-ui/primitives/blob/main/packages/react/presence/src/presence.tsx\n */\n\nconst usePresence = (options: UsePresenceOptions): UsePresenceResult => {\n\tconst { onExitComplete, present: presentProp, variant = \"animation\" } = options;\n\n\tconst stableOnExitComplete = useCallbackRef(onExitComplete);\n\n\tconst [node, setNode] = useState<HTMLElement | null>(null);\n\n\tconst [isTransitionComplete, toggleIsTransitionComplete] = useToggle(false);\n\n\tconst stylesRef = useRef<CSSStyleDeclaration | null>(null);\n\n\tconst prevNodeStateRef = useRef<{\n\t\tprevAnimationName: string;\n\t\tprevPresent: boolean;\n\t}>({\n\t\tprevAnimationName: \"none\",\n\t\tprevPresent: presentProp,\n\t});\n\n\tconst initialState = presentProp ? \"mounted\" : \"unmounted\";\n\n\tconst [mountState, send] = useStateMachine({\n\t\tinitial: initialState,\n\t\tstates: {\n\t\t\tmounted: {\n\t\t\t\tANIMATION_OUT: \"unmountSuspended\",\n\t\t\t\tUNMOUNT: \"unmounted\",\n\t\t\t},\n\t\t\tunmounted: {\n\t\t\t\tMOUNT: \"mounted\",\n\t\t\t},\n\t\t\tunmountSuspended: {\n\t\t\t\tANIMATION_END: \"unmounted\",\n\t\t\t\tMOUNT: \"mounted\",\n\t\t\t},\n\t\t},\n\t});\n\n\tuseEffect(() => {\n\t\tconst currentAnimationName = getAnimationName(stylesRef.current);\n\n\t\tprevNodeStateRef.current.prevAnimationName =\n\t\t\tmountState === \"mounted\" ? currentAnimationName : \"none\";\n\t}, [mountState]);\n\n\tuseLayoutEffect(() => {\n\t\tconst styles = stylesRef.current;\n\t\tconst wasPresent = prevNodeStateRef.current.prevPresent;\n\t\tconst hasPresentChanged = wasPresent !== presentProp;\n\n\t\tif (!hasPresentChanged) return;\n\n\t\tconst prevAnimationName = prevNodeStateRef.current.prevAnimationName;\n\t\tconst currentAnimationName = getAnimationName(styles);\n\n\t\tswitch (true) {\n\t\t\tcase presentProp: {\n\t\t\t\tsend(\"MOUNT\");\n\n\t\t\t\tif (variant === \"transition\") {\n\t\t\t\t\trequestAnimationFrame(() => toggleIsTransitionComplete(true));\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase Boolean(node): {\n\t\t\t\tif (variant === \"animation\") {\n\t\t\t\t\tconst hasAnimation = currentAnimationName !== \"none\" && styles?.display !== \"none\";\n\n\t\t\t\t\t/**\n\t\t\t\t\t * When `present` changes to `false`, we check changes to animation-name to\n\t\t\t\t\t * determine whether an animation has started. We chose this approach (reading\n\t\t\t\t\t * computed styles) because there is no `animationrun` event (like the `transitionrun` event) and `animationstart`\n\t\t\t\t\t * fires after `animation-delay` has expired which would be too late.\n\t\t\t\t\t */\n\n\t\t\t\t\tconst isAnimationStarted = hasAnimation && prevAnimationName !== currentAnimationName;\n\n\t\t\t\t\tconst isAnimatingOut = wasPresent && isAnimationStarted;\n\n\t\t\t\t\tsend(isAnimatingOut ? \"ANIMATION_OUT\" : \"UNMOUNT\");\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tdefault: {\n\t\t\t\tsend(\"UNMOUNT\");\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tprevNodeStateRef.current.prevPresent = presentProp;\n\t}, [presentProp, node, send, variant, toggleIsTransitionComplete]);\n\n\tuseLayoutEffect(() => {\n\t\tif (!node) {\n\t\t\t// Transition to the unmounted state if the node is removed prematurely.\n\t\t\t// We avoid doing so during cleanup as the node may change but still exist.\n\t\t\tsend(\"ANIMATION_END\");\n\t\t\treturn;\n\t\t}\n\n\t\tconst setupAnimationListeners = () => {\n\t\t\tlet timeoutId: number;\n\n\t\t\tconst ownerWindow = node.ownerDocument.defaultView ?? globalThis;\n\n\t\t\tconst handleAnimationStart = (event: AnimationEvent) => {\n\t\t\t\tconst isTargetAnimatingNode = event.target === node;\n\n\t\t\t\tif (!isTargetAnimatingNode) return;\n\n\t\t\t\tprevNodeStateRef.current.prevAnimationName = getAnimationName(stylesRef.current);\n\t\t\t};\n\n\t\t\t/**\n\t\t\t * @description Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`\n\t\t\t * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we\n\t\t\t * make sure we only trigger ANIMATION_END for the currently active animation.\n\t\t\t */\n\t\t\tconst handleAnimationEnd = (event: AnimationEvent) => {\n\t\t\t\tconst currentAnimationName = getAnimationName(stylesRef.current);\n\n\t\t\t\t// The event.animationName is unescaped for CSS syntax, so we need to escape it to compare with the animationName computed from the style.\n\t\t\t\tconst isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));\n\n\t\t\t\tconst isTargetAnimatingNode = event.target === node && isCurrentAnimation;\n\n\t\t\t\tif (!isTargetAnimatingNode) return;\n\n\t\t\t\t// With React 18 concurrency this update is applied a frame after the\n\t\t\t\t// animation ends, creating a flash of visible content. By setting the\n\t\t\t\t// animation fill mode to \"forwards\", we force the node to keep the\n\t\t\t\t// styles of the last keyframe, removing the flash.\n\n\t\t\t\t// Previously we flushed the update via ReactDom.flushSync, but with\n\t\t\t\t// exit animations this resulted in the node being removed from the\n\t\t\t\t// DOM before the synthetic animationEnd event was dispatched, meaning\n\t\t\t\t// user-provided event handlers would not be called.\n\t\t\t\t// https://github.com/radix-ui/primitives/pull/1849\n\t\t\t\tsend(\"ANIMATION_END\");\n\n\t\t\t\tif (!prevNodeStateRef.current.prevPresent) {\n\t\t\t\t\tconst currentFillMode = node.style.animationFillMode;\n\t\t\t\t\tnode.style.animationFillMode = \"forwards\";\n\n\t\t\t\t\t// Reset the style after the node had time to unmount (for cases\n\t\t\t\t\t// where the component chooses not to unmount). Doing this any\n\t\t\t\t\t// sooner than `setTimeout` (e.g. with `requestAnimationFrame`)\n\t\t\t\t\t// still causes a flash.\n\t\t\t\t\ttimeoutId = ownerWindow.setTimeout(() => {\n\t\t\t\t\t\tif (node.style.animationFillMode === \"forwards\") {\n\t\t\t\t\t\t\tnode.style.animationFillMode = currentFillMode;\n\t\t\t\t\t\t}\n\t\t\t\t\t}) as never;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tconst onAnimationStartCleanup = on(node, \"animationstart\", handleAnimationStart);\n\t\t\tconst onAnimationEndCleanup = on(node, \"animationend\", handleAnimationEnd);\n\t\t\tconst onAnimationCancelCleanup = on(node, \"animationcancel\", handleAnimationEnd);\n\n\t\t\tconst cleanup = () => {\n\t\t\t\townerWindow.clearTimeout(timeoutId);\n\t\t\t\tonAnimationStartCleanup();\n\t\t\t\tonAnimationEndCleanup();\n\t\t\t\tonAnimationCancelCleanup();\n\t\t\t};\n\n\t\t\treturn cleanup;\n\t\t};\n\n\t\tconst setupTransitionListeners = () => {\n\t\t\tconst handleTransitionRun = (event: TransitionEvent) => {\n\t\t\t\tconst isTargetTransitioningNode = event.target === node;\n\n\t\t\t\tif (!isTargetTransitioningNode) return;\n\n\t\t\t\tsend(\"ANIMATION_OUT\");\n\t\t\t};\n\n\t\t\tconst handleTransitionEnd = (event: TransitionEvent) => {\n\t\t\t\tconst isTargetTransitioningNode =\n\t\t\t\t\tevent.target === node && !prevNodeStateRef.current.prevPresent;\n\n\t\t\t\tif (!isTargetTransitioningNode) return;\n\n\t\t\t\tsend(\"ANIMATION_END\");\n\t\t\t};\n\n\t\t\tconst onTransitionRunCleanup = on(node, \"transitionrun\", handleTransitionRun);\n\t\t\tconst onTransitionEndCleanup = on(node, \"transitionend\", handleTransitionEnd);\n\t\t\tconst onTransitionCancelCleanup = on(node, \"transitioncancel\", handleTransitionEnd);\n\n\t\t\tconst cleanup = () => {\n\t\t\t\tonTransitionRunCleanup();\n\t\t\t\tonTransitionEndCleanup();\n\t\t\t\tonTransitionCancelCleanup();\n\t\t\t};\n\n\t\t\treturn cleanup;\n\t\t};\n\n\t\tswitch (variant) {\n\t\t\tcase \"animation\": {\n\t\t\t\tconst cleanup = setupAnimationListeners();\n\n\t\t\t\treturn cleanup;\n\t\t\t}\n\n\t\t\tcase \"transition\": {\n\t\t\t\tconst cleanup = setupTransitionListeners();\n\n\t\t\t\treturn cleanup;\n\t\t\t}\n\n\t\t\tdefault: {\n\t\t\t\tvariant satisfies never;\n\t\t\t\tthrow new Error(`Invalid variant: ${variant}`);\n\t\t\t}\n\t\t}\n\t}, [node, send, variant]);\n\n\tuseEffect(() => {\n\t\tconst isExitCompleted = !presentProp && mountState === \"unmounted\";\n\n\t\tif (isExitCompleted) {\n\t\t\ttoggleIsTransitionComplete(false);\n\t\t\tstableOnExitComplete?.();\n\t\t}\n\t}, [mountState, presentProp, stableOnExitComplete, toggleIsTransitionComplete]);\n\n\tconst ref = useCallbackRef((refNode: HTMLElement | null) => {\n\t\tsetNode(refNode);\n\n\t\tif (refNode) {\n\t\t\tstylesRef.current = getComputedStyle(refNode);\n\t\t}\n\t});\n\n\tconst MOUNTED_STATES = [\"mounted\", \"unmountSuspended\"] satisfies Array<typeof mountState>;\n\tconst isMounted = MOUNTED_STATES.includes(mountState);\n\tconst transitionPhase = presentProp && isTransitionComplete ? \"enter\" : \"exit\";\n\tconst animationPhase = presentProp ? \"enter\" : \"exit\";\n\n\tconst getPresenceProps: PresencePropGetters[\"getPresenceProps\"] = useCallback(\n\t\t(innerProps) => {\n\t\t\treturn {\n\t\t\t\t\"data-mounted\": isMounted,\n\t\t\t\t\"data-present\": presentProp,\n\t\t\t\t\"data-variant\": variant,\n\t\t\t\t...(variant === \"animation\" && { \"data-animation-phase\": animationPhase }),\n\t\t\t\t...(variant === \"transition\" && { \"data-transition-phase\": transitionPhase }),\n\t\t\t\t...innerProps,\n\t\t\t\tclassName: innerProps.className,\n\t\t\t};\n\t\t},\n\t\t[animationPhase, isMounted, presentProp, transitionPhase, variant]\n\t);\n\n\tconst propGetters = useMemo(\n\t\t() => ({\n\t\t\tgetPresenceProps,\n\t\t}),\n\t\t[getPresenceProps]\n\t);\n\n\tconst result = useMemo<UsePresenceResult>(\n\t\t() =>\n\t\t\t({\n\t\t\t\tisMounted,\n\t\t\t\tisTransitionComplete,\n\t\t\t\tpropGetters,\n\t\t\t\tref,\n\t\t\t}) satisfies UsePresenceResult,\n\t\t[isMounted, isTransitionComplete, propGetters, ref]\n\t);\n\n\treturn result;\n};\n\nexport { usePresence };\n","\"use client\";\n\nimport { useComposeRefs } from \"@zayne-labs/toolkit-react\";\nimport { isFunction, type UnknownObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport { Slot } from \"../slot\";\nimport { usePresence, type UsePresenceOptions, type UsePresenceResult } from \"./use-presence\";\n\ntype RefProp = { ref?: React.Ref<HTMLElement> };\n\ntype RenderPropContext = Omit<UsePresenceResult, \"propGetters\" | \"ref\">\n\t& Pick<UsePresenceOptions, \"present\">;\n\nexport type PresenceProps = UsePresenceOptions & {\n\tchildren?: React.ReactElement<RefProp> | ((props: RenderPropContext) => React.ReactElement<RefProp>);\n\tclassName?: string;\n\tforceMount?: boolean;\n};\n\nfunction Presence(props: PresenceProps) {\n\tconst { children, className, forceMount = false, onExitComplete, present, variant } = props;\n\n\tconst {\n\t\tisMounted,\n\t\tisTransitionComplete,\n\t\tpropGetters,\n\t\tref: presenceRef,\n\t} = usePresence({ onExitComplete, present, variant });\n\n\tconst context = {\n\t\tisMounted,\n\t\tisTransitionComplete,\n\t\tpresent,\n\t} satisfies RenderPropContext;\n\n\tconst resolvedChild = isFunction(children) ? children(context) : children;\n\n\tconst childRef = (resolvedChild?.props.ref\n\t\t?? (resolvedChild as unknown as UnknownObject).ref) as React.Ref<HTMLElement>;\n\n\tconst ref = useComposeRefs(presenceRef, childRef);\n\n\tconst shouldRender =\n\t\tforceMount || (variant === \"transition\" ? isMounted || isTransitionComplete : isMounted);\n\n\tif (!shouldRender) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Slot.Root ref={ref} {...propGetters.getPresenceProps({ className })}>\n\t\t\t{resolvedChild}\n\t\t</Slot.Root>\n\t);\n}\n\nexport { Presence };\n"],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ function ShowRoot(props) {
|
|
|
12
12
|
assert(!(fallBackSlot && fallback), "The fallback prop and <Show.Fallback> cannot be used at the same time.");
|
|
13
13
|
return foundContentSlot ?? fallBackSlot ?? fallback;
|
|
14
14
|
}
|
|
15
|
-
const { regularChildren, slots: [contentSlot, fallBackSlot] } = getMultipleSlots(isFunction(children) ? children(when) : children, [ShowContent, ShowFallback], {
|
|
15
|
+
const { regularChildren, slots: [contentSlot, fallBackSlot] } = getMultipleSlots(isFunction(children) ? when && children(when) : children, [ShowContent, ShowFallback], {
|
|
16
16
|
errorMessage: ["Only one <Show.Content> component is allowed", "Only one <Show.Fallback> or <Show.OtherWise> component is allowed"],
|
|
17
17
|
throwOnMultipleSlotMatch: true
|
|
18
18
|
});
|
|
@@ -43,4 +43,4 @@ var show_parts_exports = /* @__PURE__ */ __exportAll({
|
|
|
43
43
|
//#endregion
|
|
44
44
|
export { ShowRoot as i, ShowContent as n, ShowFallback as r, show_parts_exports as t };
|
|
45
45
|
|
|
46
|
-
//# sourceMappingURL=show-
|
|
46
|
+
//# sourceMappingURL=show-CMxdpPiN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"show-CMxdpPiN.js","names":[],"sources":["../../src/components/common/show/show.tsx","../../src/components/common/show/show-parts.ts"],"sourcesContent":["\"use client\";\n\nimport { toArray } from \"@zayne-labs/toolkit-core\";\nimport { getMultipleSlots, getSingleSlot } from \"@zayne-labs/toolkit-react/utils\";\nimport { assert, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\n\nexport type ShowRootProps<TWhen> =\n\t| {\n\t\t\tchildren: React.ReactNode;\n\t\t\tcontrol: \"content\";\n\t\t\tfallback?: React.ReactNode;\n\t\t\twhen?: never;\n\t }\n\t| {\n\t\t\tchildren: React.ReactNode | ((value: TWhen) => React.ReactNode);\n\t\t\tcontrol?: \"root\";\n\t\t\tfallback?: React.ReactNode;\n\t\t\twhen: false | TWhen | null | undefined;\n\t };\n\nexport function ShowRoot<TWhen>(props: ShowRootProps<TWhen>) {\n\tconst { children, control = \"root\", fallback = null, when } = props;\n\n\tif (control === \"content\" && !isFunction(children)) {\n\t\tconst childrenArray = toArray(children) as Array<React.ReactElement<ShowContentProps<TWhen>>>;\n\n\t\tconst foundContentSlot = childrenArray.find((child) => Boolean(child.props.when));\n\n\t\tconst fallBackSlot = getSingleSlot(childrenArray, ShowFallback);\n\n\t\tassert(\n\t\t\t!(fallBackSlot && fallback),\n\t\t\t\"The fallback prop and <Show.Fallback> cannot be used at the same time.\"\n\t\t);\n\n\t\treturn foundContentSlot ?? fallBackSlot ?? fallback;\n\t}\n\n\tconst resolvedChildren = isFunction(children) ? when && children(when) : children;\n\n\tconst {\n\t\tregularChildren,\n\t\tslots: [contentSlot, fallBackSlot],\n\t} = getMultipleSlots(resolvedChildren, [ShowContent, ShowFallback], {\n\t\terrorMessage: [\n\t\t\t\"Only one <Show.Content> component is allowed\",\n\t\t\t\"Only one <Show.Fallback> or <Show.OtherWise> component is allowed\",\n\t\t],\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tif (!when) {\n\t\tassert(\n\t\t\t!(fallBackSlot && fallback),\n\t\t\t\"The fallback prop and <Show.Fallback> cannot be used at the same time.\"\n\t\t);\n\n\t\treturn fallBackSlot ?? fallback;\n\t}\n\n\treturn contentSlot ?? regularChildren;\n}\n\nexport type ShowContentProps<TWhen> = Pick<ShowRootProps<TWhen>, \"children\" | \"when\">;\n\nexport function ShowContent<TWhen>(props: ShowContentProps<TWhen>) {\n\tconst { children, when } = props;\n\n\tconst resolvedChildren = isFunction(children) ? children(when as TWhen) : children;\n\n\treturn resolvedChildren;\n}\nShowContent.slotSymbol = Symbol(\"show-content\");\n\nexport function ShowFallback(props: { children: React.ReactNode }) {\n\tconst { children } = props;\n\n\treturn children;\n}\nShowFallback.slotSymbol = Symbol(\"show-fallback\");\n","export {\n\tShowContent as Content,\n\tShowFallback as Fallback,\n\tShowFallback as Otherwise,\n\tShowRoot as Root,\n} from \"./show\";\n"],"mappings":";;;;;AAoBA,SAAgB,SAAgB,OAA6B;CAC5D,MAAM,EAAE,UAAU,UAAU,QAAQ,WAAW,MAAM,SAAS;AAE9D,KAAI,YAAY,aAAa,CAAC,WAAW,SAAS,EAAE;EACnD,MAAM,gBAAgB,QAAQ,SAAS;EAEvC,MAAM,mBAAmB,cAAc,MAAM,UAAU,QAAQ,MAAM,MAAM,KAAK,CAAC;EAEjF,MAAM,eAAe,cAAc,eAAe,aAAa;AAE/D,SACC,EAAE,gBAAgB,WAClB,yEACA;AAED,SAAO,oBAAoB,gBAAgB;;CAK5C,MAAM,EACL,iBACA,OAAO,CAAC,aAAa,kBAClB,iBALqB,WAAW,SAAS,GAAG,QAAQ,SAAS,KAAK,GAAG,UAKlC,CAAC,aAAa,aAAa,EAAE;EACnE,cAAc,CACb,gDACA,oEACA;EACD,0BAA0B;EAC1B,CAAC;AAEF,KAAI,CAAC,MAAM;AACV,SACC,EAAE,gBAAgB,WAClB,yEACA;AAED,SAAO,gBAAgB;;AAGxB,QAAO,eAAe;;AAKvB,SAAgB,YAAmB,OAAgC;CAClE,MAAM,EAAE,UAAU,SAAS;AAI3B,QAFyB,WAAW,SAAS,GAAG,SAAS,KAAc,GAAG;;AAI3E,YAAY,aAAa,OAAO,eAAe;AAE/C,SAAgB,aAAa,OAAsC;CAClE,MAAM,EAAE,aAAa;AAErB,QAAO;;AAER,aAAa,aAAa,OAAO,gBAAgB"}
|
|
@@ -21,7 +21,7 @@ type CarouselRootProps<TImages extends ImagesType = ImagesType> = {
|
|
|
21
21
|
children: React.ReactNode;
|
|
22
22
|
classNames?: {
|
|
23
23
|
base?: string;
|
|
24
|
-
|
|
24
|
+
content?: string;
|
|
25
25
|
};
|
|
26
26
|
hasAutoSlide?: boolean;
|
|
27
27
|
images: CarouselStore<TImages>["images"];
|
|
@@ -37,12 +37,7 @@ type CarouselButtonsProps = {
|
|
|
37
37
|
icon?: React.ReactElement;
|
|
38
38
|
variant: "next" | "prev";
|
|
39
39
|
};
|
|
40
|
-
type CarouselControlProps = {
|
|
41
|
-
classNames?: {
|
|
42
|
-
base?: string;
|
|
43
|
-
defaultIcon?: string;
|
|
44
|
-
iconContainer?: string;
|
|
45
|
-
};
|
|
40
|
+
type CarouselControlProps = Pick<CarouselButtonsProps, "classNames"> & {
|
|
46
41
|
icon?: UnionDiscriminator<[{
|
|
47
42
|
icon?: React.ReactElement;
|
|
48
43
|
iconType: "nextIcon" | "prevIcon";
|