@payloadcms/ui 3.0.0-beta.6 → 3.0.0-beta.61

package/dist/elements/ListDrawer/index.js

@@ -1,35 +1,41 @@
 'use client';
-import * as facelessUIImport from '@faceless-ui/modal';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useModal } from '@faceless-ui/modal';
 import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
 export * from './types.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { Drawer, DrawerToggler } from '../Drawer/index.js';
 import { ListDrawerContent } from './DrawerContent.js';
+import './index.scss';
 export const baseClass = 'list-drawer';
 export const formatListDrawerSlug = ({ depth, uuid })=>`list-drawer_${depth}_${uuid}`;
 export const ListDrawerToggler = ({ children, className, disabled, drawerSlug, ...rest })=>{
-    return /*#__PURE__*/ React.createElement(DrawerToggler, {
+    return /*#__PURE__*/ _jsx(DrawerToggler, {
         className: [
             className,
             `${baseClass}__toggler`
         ].filter(Boolean).join(' '),
         disabled: disabled,
         slug: drawerSlug,
-        ...rest
-    }, children);
+        ...rest,
+        children: children
+    });
 };
 export const ListDrawer = (props)=>{
     const { drawerSlug } = props;
-    return /*#__PURE__*/ React.createElement(Drawer, {
+    return /*#__PURE__*/ _jsx(Drawer, {
         Header: null,
         className: baseClass,
         gutter: false,
-        slug: drawerSlug
-    }, /*#__PURE__*/ React.createElement(ListDrawerContent, props));
+        slug: drawerSlug,
+        children: /*#__PURE__*/ _jsx(ListDrawerContent, {
+            ...props
+        })
+    });
 };
 export const useListDrawer = ({ collectionSlugs: collectionSlugsFromProps, filterOptions, selectedCollection, uploads })=>{
-    const { useModal } = facelessUIImport;
     const { collections } = useConfig();
     const drawerDepth = useEditDepth();
     const uuid = useId();
@@ -80,7 +86,7 @@ export const useListDrawer = ({ collectionSlugs: collectionSlugsFromProps, filte
         openModal
     ]);
     const MemoizedDrawer = useMemo(()=>{
-        return (props)=>/*#__PURE__*/ React.createElement(ListDrawer, {
+        return (props)=>/*#__PURE__*/ _createElement(ListDrawer, {
                 ...props,
                 closeDrawer: closeDrawer,
                 collectionSlugs: collectionSlugs,
@@ -99,7 +105,7 @@ export const useListDrawer = ({ collectionSlugs: collectionSlugsFromProps, filte
         filterOptions
     ]);
     const MemoizedDrawerToggler = useMemo(()=>{
-        return (props)=>/*#__PURE__*/ React.createElement(ListDrawerToggler, {
+        return (props)=>/*#__PURE__*/ _jsx(ListDrawerToggler, {
                 ...props,
                 drawerSlug: drawerSlug
             });

package/dist/elements/ListDrawer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListDrawer/index.tsx"],"sourcesContent":["'use client'\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useId, useMemo, useState } from 'react'\n\nimport type { ListDrawerProps, ListTogglerProps, UseListDrawer } from './types.js'\n\nexport * from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { ListDrawerContent } from './DrawerContent.js'\nimport './index.scss'\n\nexport const baseClass = 'list-drawer'\n\nexport const formatListDrawerSlug = ({\n  depth,\n  uuid,\n}: {\n  depth: number\n  uuid: string // supply when creating a new document and no id is available\n}) => `list-drawer_${depth}_${uuid}`\n\nexport const ListDrawerToggler: React.FC<ListTogglerProps> = ({\n  children,\n  className,\n  disabled,\n  drawerSlug,\n  ...rest\n}) => {\n  return (\n    <DrawerToggler\n      className={[className, `${baseClass}__toggler`].filter(Boolean).join(' ')}\n      disabled={disabled}\n      slug={drawerSlug}\n      {...rest}\n    >\n      {children}\n    </DrawerToggler>\n  )\n}\n\nexport const ListDrawer: React.FC<ListDrawerProps> = (props) => {\n  const { drawerSlug } = props\n\n  return (\n    <Drawer Header={null} className={baseClass} gutter={false} slug={drawerSlug}>\n      <ListDrawerContent {...props} />\n    </Drawer>\n  )\n}\n\nexport const useListDrawer: UseListDrawer = ({\n  collectionSlugs: collectionSlugsFromProps,\n  filterOptions,\n  selectedCollection,\n  uploads,\n}) => {\n  const { useModal } = facelessUIImport\n\n  const { collections } = useConfig()\n  const drawerDepth = useEditDepth()\n  const uuid = useId()\n  const { closeModal, modalState, openModal, toggleModal } = useModal()\n  const [isOpen, setIsOpen] = useState(false)\n  const [collectionSlugs, setCollectionSlugs] = useState(collectionSlugsFromProps)\n\n  const drawerSlug = formatListDrawerSlug({\n    depth: drawerDepth,\n    uuid,\n  })\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  useEffect(() => {\n    if (!collectionSlugs || collectionSlugs.length === 0) {\n      const filteredCollectionSlugs = collections.filter(({ upload }) => {\n        if (uploads) {\n          return Boolean(upload) === true\n        }\n        return true\n      })\n\n      setCollectionSlugs(filteredCollectionSlugs.map(({ slug }) => slug))\n    }\n  }, [collectionSlugs, uploads, collections])\n  const toggleDrawer = useCallback(() => {\n    toggleModal(drawerSlug)\n  }, [toggleModal, drawerSlug])\n\n  const closeDrawer = useCallback(() => {\n    closeModal(drawerSlug)\n  }, [drawerSlug, closeModal])\n\n  const openDrawer = useCallback(() => {\n    openModal(drawerSlug)\n  }, [drawerSlug, openModal])\n\n  const MemoizedDrawer = useMemo(() => {\n    return (props) => (\n      <ListDrawer\n        {...props}\n        closeDrawer={closeDrawer}\n        collectionSlugs={collectionSlugs}\n        drawerSlug={drawerSlug}\n        filterOptions={filterOptions}\n        key={drawerSlug}\n        selectedCollection={selectedCollection}\n        uploads={uploads}\n      />\n    )\n  }, [drawerSlug, collectionSlugs, uploads, closeDrawer, selectedCollection, filterOptions])\n\n  const MemoizedDrawerToggler = useMemo(() => {\n    return (props) => <ListDrawerToggler {...props} drawerSlug={drawerSlug} />\n  }, [drawerSlug])\n\n  const MemoizedDrawerState = useMemo(\n    () => ({\n      closeDrawer,\n      drawerDepth,\n      drawerSlug,\n      isDrawerOpen: isOpen,\n      openDrawer,\n      toggleDrawer,\n    }),\n    [drawerDepth, drawerSlug, isOpen, toggleDrawer, closeDrawer, openDrawer],\n  )\n\n  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState]\n}\n"],"names":["facelessUIImport","React","useCallback","useEffect","useId","useMemo","useState","useConfig","useEditDepth","Drawer","DrawerToggler","ListDrawerContent","baseClass","formatListDrawerSlug","depth","uuid","ListDrawerToggler","children","className","disabled","drawerSlug","rest","filter","Boolean","join","slug","ListDrawer","props","Header","gutter","useListDrawer","collectionSlugs","collectionSlugsFromProps","filterOptions","selectedCollection","uploads","useModal","collections","drawerDepth","closeModal","modalState","openModal","toggleModal","isOpen","setIsOpen","setCollectionSlugs","length","filteredCollectionSlugs","upload","map","toggleDrawer","closeDrawer","openDrawer","MemoizedDrawer","key","MemoizedDrawerToggler","MemoizedDrawerState","isDrawerOpen"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/elements/ListDrawer/index.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useId, useMemo, useState } from 'react'\n\nimport type { ListDrawerProps, ListTogglerProps, UseListDrawer } from './types.js'\n\nexport * from './types.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { Drawer, DrawerToggler } from '../Drawer/index.js'\nimport { ListDrawerContent } from './DrawerContent.js'\nimport './index.scss'\n\nexport const baseClass = 'list-drawer'\n\nexport const formatListDrawerSlug = ({\n  depth,\n  uuid,\n}: {\n  depth: number\n  uuid: string // supply when creating a new document and no id is available\n}) => `list-drawer_${depth}_${uuid}`\n\nexport const ListDrawerToggler: React.FC<ListTogglerProps> = ({\n  children,\n  className,\n  disabled,\n  drawerSlug,\n  ...rest\n}) => {\n  return (\n    <DrawerToggler\n      className={[className, `${baseClass}__toggler`].filter(Boolean).join(' ')}\n      disabled={disabled}\n      slug={drawerSlug}\n      {...rest}\n    >\n      {children}\n    </DrawerToggler>\n  )\n}\n\nexport const ListDrawer: React.FC<ListDrawerProps> = (props) => {\n  const { drawerSlug } = props\n\n  return (\n    <Drawer Header={null} className={baseClass} gutter={false} slug={drawerSlug}>\n      <ListDrawerContent {...props} />\n    </Drawer>\n  )\n}\n\nexport const useListDrawer: UseListDrawer = ({\n  collectionSlugs: collectionSlugsFromProps,\n  filterOptions,\n  selectedCollection,\n  uploads,\n}) => {\n  const { collections } = useConfig()\n  const drawerDepth = useEditDepth()\n  const uuid = useId()\n  const { closeModal, modalState, openModal, toggleModal } = useModal()\n  const [isOpen, setIsOpen] = useState(false)\n  const [collectionSlugs, setCollectionSlugs] = useState(collectionSlugsFromProps)\n\n  const drawerSlug = formatListDrawerSlug({\n    depth: drawerDepth,\n    uuid,\n  })\n\n  useEffect(() => {\n    setIsOpen(Boolean(modalState[drawerSlug]?.isOpen))\n  }, [modalState, drawerSlug])\n\n  useEffect(() => {\n    if (!collectionSlugs || collectionSlugs.length === 0) {\n      const filteredCollectionSlugs = collections.filter(({ upload }) => {\n        if (uploads) {\n          return Boolean(upload) === true\n        }\n        return true\n      })\n\n      setCollectionSlugs(filteredCollectionSlugs.map(({ slug }) => slug))\n    }\n  }, [collectionSlugs, uploads, collections])\n  const toggleDrawer = useCallback(() => {\n    toggleModal(drawerSlug)\n  }, [toggleModal, drawerSlug])\n\n  const closeDrawer = useCallback(() => {\n    closeModal(drawerSlug)\n  }, [drawerSlug, closeModal])\n\n  const openDrawer = useCallback(() => {\n    openModal(drawerSlug)\n  }, [drawerSlug, openModal])\n\n  const MemoizedDrawer = useMemo(() => {\n    return (props) => (\n      <ListDrawer\n        {...props}\n        closeDrawer={closeDrawer}\n        collectionSlugs={collectionSlugs}\n        drawerSlug={drawerSlug}\n        filterOptions={filterOptions}\n        key={drawerSlug}\n        selectedCollection={selectedCollection}\n        uploads={uploads}\n      />\n    )\n  }, [drawerSlug, collectionSlugs, uploads, closeDrawer, selectedCollection, filterOptions])\n\n  const MemoizedDrawerToggler = useMemo(() => {\n    return (props) => <ListDrawerToggler {...props} drawerSlug={drawerSlug} />\n  }, [drawerSlug])\n\n  const MemoizedDrawerState = useMemo(\n    () => ({\n      closeDrawer,\n      drawerDepth,\n      drawerSlug,\n      isDrawerOpen: isOpen,\n      openDrawer,\n      toggleDrawer,\n    }),\n    [drawerDepth, drawerSlug, isOpen, toggleDrawer, closeDrawer, openDrawer],\n  )\n\n  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState]\n}\n"],"names":["useModal","React","useCallback","useEffect","useId","useMemo","useState","useConfig","useEditDepth","Drawer","DrawerToggler","ListDrawerContent","baseClass","formatListDrawerSlug","depth","uuid","ListDrawerToggler","children","className","disabled","drawerSlug","rest","filter","Boolean","join","slug","ListDrawer","props","Header","gutter","useListDrawer","collectionSlugs","collectionSlugsFromProps","filterOptions","selectedCollection","uploads","collections","drawerDepth","closeModal","modalState","openModal","toggleModal","isOpen","setIsOpen","setCollectionSlugs","length","filteredCollectionSlugs","upload","map","toggleDrawer","closeDrawer","openDrawer","MemoizedDrawer","key","MemoizedDrawerToggler","MemoizedDrawerState","isDrawerOpen"],"mappings":"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"}

package/dist/elements/ListDrawer/types.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react/experimental" resolution-mode="require"/>
-import type { FilterOptionsResult, SanitizedCollectionConfig } from 'payload/types';
+import type { FilterOptionsResult, SanitizedCollectionConfig } from 'payload';
 import type React from 'react';
 import type { HTMLAttributes } from 'react';
 export type ListDrawerProps = {
@@ -13,12 +12,12 @@ export type ListDrawerProps = {
     }) => void;
     selectedCollection?: string;
 };
-export type ListTogglerProps = HTMLAttributes<HTMLButtonElement> & {
+export type ListTogglerProps = {
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     drawerSlug?: string;
-};
+} & HTMLAttributes<HTMLButtonElement>;
 export type UseListDrawer = (args: {
     collectionSlugs?: string[];
     filterOptions?: FilterOptionsResult;

package/dist/elements/ListDrawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AACnF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC5B,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/F,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE;IACjC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,KAAK;IACJ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC;IACvE;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG;IAC5B,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAC/F,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA;AAErC,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE;IACjC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,aAAa,CAAC,EAAE,mBAAmB,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,KAAK;IACJ,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC;IACvE;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}

package/dist/elements/ListDrawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListDrawer/types.ts"],"sourcesContent":["import type { FilterOptionsResult, SanitizedCollectionConfig } from 'payload/types'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nexport type ListDrawerProps = {\n  collectionSlugs: string[]\n  customHeader?: React.ReactNode\n  drawerSlug?: string\n  filterOptions?: FilterOptionsResult\n  onSelect?: (args: { collectionSlug: SanitizedCollectionConfig['slug']; docID: string }) => void\n  selectedCollection?: string\n}\n\nexport type ListTogglerProps = HTMLAttributes<HTMLButtonElement> & {\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  drawerSlug?: string\n}\n\nexport type UseListDrawer = (args: {\n  collectionSlugs?: string[]\n  filterOptions?: FilterOptionsResult\n  selectedCollection?: string\n  uploads?: boolean // finds all collections with upload: true\n}) => [\n  React.FC<Pick<ListDrawerProps, 'onSelect'>>, // drawer\n  React.FC<Pick<ListTogglerProps, 'children' | 'className' | 'disabled'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"names":[],"rangeMappings":"","mappings":"AAoBA,WAgBC"}
+{"version":3,"sources":["../../../src/elements/ListDrawer/types.ts"],"sourcesContent":["import type { FilterOptionsResult, SanitizedCollectionConfig } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nexport type ListDrawerProps = {\n  collectionSlugs: string[]\n  customHeader?: React.ReactNode\n  drawerSlug?: string\n  filterOptions?: FilterOptionsResult\n  onSelect?: (args: { collectionSlug: SanitizedCollectionConfig['slug']; docID: string }) => void\n  selectedCollection?: string\n}\n\nexport type ListTogglerProps = {\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  drawerSlug?: string\n} & HTMLAttributes<HTMLButtonElement>\n\nexport type UseListDrawer = (args: {\n  collectionSlugs?: string[]\n  filterOptions?: FilterOptionsResult\n  selectedCollection?: string\n  uploads?: boolean // finds all collections with upload: true\n}) => [\n  React.FC<Pick<ListDrawerProps, 'onSelect'>>, // drawer\n  React.FC<Pick<ListTogglerProps, 'children' | 'className' | 'disabled'>>, // toggler\n  {\n    closeDrawer: () => void\n    drawerDepth: number\n    drawerSlug: string\n    isDrawerOpen: boolean\n    openDrawer: () => void\n    toggleDrawer: () => void\n  },\n]\n"],"names":[],"mappings":"AAoBA,WAgBC"}

package/dist/elements/ListSelection/index.js

@@ -1,7 +1,9 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Fragment } from 'react';
 import { SelectAllStatus, useSelection } from '../../providers/Selection/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'list-selection';
 export const ListSelection = ({ label })=>{
     const { count, selectAll, toggleAll, totalDocs } = useSelection();
@@ -9,23 +11,36 @@ export const ListSelection = ({ label })=>{
     if (count === 0) {
         return null;
     }
-    return /*#__PURE__*/ React.createElement("div", {
-        className: baseClass
-    }, /*#__PURE__*/ React.createElement("span", null, t('general:selectedCount', {
-        count,
-        label
-    })), selectAll !== SelectAllStatus.AllAvailable && /*#__PURE__*/ React.createElement(Fragment, null, ' ', "—", /*#__PURE__*/ React.createElement("button", {
-        "aria-label": t('general:selectAll', {
-            count,
-            label
-        }),
-        className: `${baseClass}__button`,
-        onClick: ()=>toggleAll(true),
-        type: "button"
-    }, t('general:selectAll', {
-        count: totalDocs,
-        label
-    }))));
+    return /*#__PURE__*/ _jsxs("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                children: t('general:selectedCount', {
+                    count,
+                    label
+                })
+            }),
+            selectAll !== SelectAllStatus.AllAvailable && /*#__PURE__*/ _jsxs(Fragment, {
+                children: [
+                    ' ',
+                    "—",
+                    /*#__PURE__*/ _jsx("button", {
+                        "aria-label": t('general:selectAll', {
+                            count,
+                            label
+                        }),
+                        className: `${baseClass}__button`,
+                        onClick: ()=>toggleAll(true),
+                        type: "button",
+                        children: t('general:selectAll', {
+                            count: totalDocs,
+                            label
+                        })
+                    })
+                ]
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/ListSelection/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\nexport type ListSelectionProps = {\n  label: string\n}\n\nexport const ListSelection: React.FC<ListSelectionProps> = ({ label }) => {\n  const { count, selectAll, toggleAll, totalDocs } = useSelection()\n  const { t } = useTranslation()\n\n  if (count === 0) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label })}</span>\n      {selectAll !== SelectAllStatus.AllAvailable && (\n        <Fragment>\n          {' '}\n          &mdash;\n          <button\n            aria-label={t('general:selectAll', { count, label })}\n            className={`${baseClass}__button`}\n            onClick={() => toggleAll(true)}\n            type=\"button\"\n          >\n            {t('general:selectAll', { count: totalDocs, label })}\n          </button>\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["React","Fragment","SelectAllStatus","useSelection","useTranslation","baseClass","ListSelection","label","count","selectAll","toggleAll","totalDocs","t","div","className","span","AllAvailable","button","aria-label","onClick","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AAMlB,OAAO,MAAMC,gBAA8C,CAAC,EAAEC,KAAK,EAAE;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGR;IACnD,MAAM,EAAES,CAAC,EAAE,GAAGR;IAEd,IAAII,UAAU,GAAG;QACf,OAAO;IACT;IAEA,qBACE,oBAACK;QAAIC,WAAWT;qBACd,oBAACU,cAAMH,EAAE,yBAAyB;QAAEJ;QAAOD;IAAM,KAChDE,cAAcP,gBAAgBc,YAAY,kBACzC,oBAACf,gBACE,KAAI,mBAEL,oBAACgB;QACCC,cAAYN,EAAE,qBAAqB;YAAEJ;YAAOD;QAAM;QAClDO,WAAW,CAAC,EAAET,UAAU,QAAQ,CAAC;QACjCc,SAAS,IAAMT,UAAU;QACzBU,MAAK;OAEJR,EAAE,qBAAqB;QAAEJ,OAAOG;QAAWJ;IAAM;AAM9D,EAAC"}
+{"version":3,"sources":["../../../src/elements/ListSelection/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { SelectAllStatus, useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-selection'\n\nexport type ListSelectionProps = {\n  label: string\n}\n\nexport const ListSelection: React.FC<ListSelectionProps> = ({ label }) => {\n  const { count, selectAll, toggleAll, totalDocs } = useSelection()\n  const { t } = useTranslation()\n\n  if (count === 0) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <span>{t('general:selectedCount', { count, label })}</span>\n      {selectAll !== SelectAllStatus.AllAvailable && (\n        <Fragment>\n          {' '}\n          &mdash;\n          <button\n            aria-label={t('general:selectAll', { count, label })}\n            className={`${baseClass}__button`}\n            onClick={() => toggleAll(true)}\n            type=\"button\"\n          >\n            {t('general:selectAll', { count: totalDocs, label })}\n          </button>\n        </Fragment>\n      )}\n    </div>\n  )\n}\n"],"names":["React","Fragment","SelectAllStatus","useSelection","useTranslation","baseClass","ListSelection","label","count","selectAll","toggleAll","totalDocs","t","div","className","span","AllAvailable","button","aria-label","onClick","type"],"mappings":"AAAA;;AACA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,eAAe,EAAEC,YAAY,QAAQ,qCAAoC;AAClF,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAMlB,OAAO,MAAMC,gBAA8C,CAAC,EAAEC,KAAK,EAAE;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGR;IACnD,MAAM,EAAES,CAAC,EAAE,GAAGR;IAEd,IAAII,UAAU,GAAG;QACf,OAAO;IACT;IAEA,qBACE,MAACK;QAAIC,WAAWT;;0BACd,KAACU;0BAAMH,EAAE,yBAAyB;oBAAEJ;oBAAOD;gBAAM;;YAChDE,cAAcP,gBAAgBc,YAAY,kBACzC,MAACf;;oBACE;oBAAI;kCAEL,KAACgB;wBACCC,cAAYN,EAAE,qBAAqB;4BAAEJ;4BAAOD;wBAAM;wBAClDO,WAAW,CAAC,EAAET,UAAU,QAAQ,CAAC;wBACjCc,SAAS,IAAMT,UAAU;wBACzBU,MAAK;kCAEJR,EAAE,qBAAqB;4BAAEJ,OAAOG;4BAAWJ;wBAAM;;;;;;AAM9D,EAAC"}

package/dist/elements/Loading/index.js

@@ -1,13 +1,15 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js';
 import { useFormProcessing } from '../../forms/Form/context.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'loading-overlay';
 export const LoadingOverlay = ({ animationDuration, loadingText, overlayType, show = true })=>{
     const { t } = useTranslation();
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: [
             baseClass,
             show ? `${baseClass}--entering` : `${baseClass}--exiting`,
@@ -15,22 +17,34 @@ export const LoadingOverlay = ({ animationDuration, loadingText, overlayType, sh
         ].filter(Boolean).join(' '),
         style: {
             animationDuration: animationDuration || '500ms'
-        }
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__bars`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__bar`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__bar`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__bar`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__bar`
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__bar`
-    })), /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__text`
-    }, loadingText || t('general:loading')));
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__bars`,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__bar`
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__bar`
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__bar`
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__bar`
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}__bar`
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: `${baseClass}__text`,
+                children: loadingText || t('general:loading')
+            })
+        ]
+    });
 };
 export const LoadingOverlayToggle = ({ name: key, type = 'fullscreen', loadingText, show })=>{
     const { toggleLoadingOverlay } = useLoadingOverlay();
@@ -65,7 +79,7 @@ export const FormLoadingOverlayToggle = ({ name, type = 'fullscreen', action, fo
         loading: t('general:loading'),
         update: t('general:updating')
     };
-    return /*#__PURE__*/ React.createElement(LoadingOverlayToggle, {
+    return /*#__PURE__*/ _jsx(LoadingOverlayToggle, {
         loadingText: `${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''}`.trim(),
         name: name,
         show: formIsLoading || isProcessing,

package/dist/elements/Loading/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Loading/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'\n\nimport { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'loading-overlay'\n\ntype LoadingOverlayProps = {\n  animationDuration?: string\n  loadingText?: string\n  overlayType?: string\n  show?: boolean\n}\n\nexport const LoadingOverlay: React.FC<LoadingOverlayProps> = ({\n  animationDuration,\n  loadingText,\n  overlayType,\n  show = true,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        baseClass,\n        show ? `${baseClass}--entering` : `${baseClass}--exiting`,\n        overlayType ? `${baseClass}--${overlayType}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        animationDuration: animationDuration || '500ms',\n      }}\n    >\n      <div className={`${baseClass}__bars`}>\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n      </div>\n\n      <span className={`${baseClass}__text`}>{loadingText || t('general:loading')}</span>\n    </div>\n  )\n}\n\nexport type UseLoadingOverlayToggleProps = {\n  loadingText?: string\n  name: string\n  show: boolean\n  type?: LoadingOverlayTypes\n}\nexport const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleProps> = ({\n  name: key,\n  type = 'fullscreen',\n  loadingText,\n  show,\n}) => {\n  const { toggleLoadingOverlay } = useLoadingOverlay()\n\n  React.useEffect(() => {\n    toggleLoadingOverlay({\n      type,\n      isLoading: show,\n      key,\n      loadingText: loadingText || undefined,\n    })\n\n    return () => {\n      toggleLoadingOverlay({\n        type,\n        isLoading: false,\n        key,\n      })\n    }\n  }, [show, toggleLoadingOverlay, key, type, loadingText])\n\n  return null\n}\n\nexport type FormLoadingOverlayToggleProps = {\n  action: 'create' | 'loading' | 'update'\n  formIsLoading?: boolean\n  loadingSuffix?: string\n  name: string\n  type?: LoadingOverlayTypes\n}\n\nexport const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleProps> = ({\n  name,\n  type = 'fullscreen',\n  action,\n  formIsLoading = false,\n  loadingSuffix,\n}) => {\n  const isProcessing = useFormProcessing()\n  const { i18n, t } = useTranslation()\n\n  const labels = {\n    create: t('general:creating'),\n    loading: t('general:loading'),\n    update: t('general:updating'),\n  }\n\n  return (\n    <LoadingOverlayToggle\n      loadingText={`${labels[action]} ${\n        loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''\n      }`.trim()}\n      name={name}\n      show={formIsLoading || isProcessing}\n      type={type}\n    />\n  )\n}\n"],"names":["getTranslation","React","useLoadingOverlay","useFormProcessing","useTranslation","baseClass","LoadingOverlay","animationDuration","loadingText","overlayType","show","t","div","className","filter","Boolean","join","style","span","LoadingOverlayToggle","name","key","type","toggleLoadingOverlay","useEffect","isLoading","undefined","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","labels","create","loading","update","trim"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,iBAAiB,QAAQ,yCAAwC;AAC1E,SAASC,iBAAiB,QAAQ,8BAA6B;AAC/D,SAASC,cAAc,QAAQ,uCAAsC;AAGrE,MAAMC,YAAY;AASlB,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,OAAO,IAAI,EACZ;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,qBACE,oBAACQ;QACCC,WAAW;YACTR;YACAK,OAAO,CAAC,EAAEL,UAAU,UAAU,CAAC,GAAG,CAAC,EAAEA,UAAU,SAAS,CAAC;YACzDI,cAAc,CAAC,EAAEJ,UAAU,EAAE,EAAEI,YAAY,CAAC,GAAG;SAChD,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,OAAO;YACLV,mBAAmBA,qBAAqB;QAC1C;qBAEA,oBAACK;QAAIC,WAAW,CAAC,EAAER,UAAU,MAAM,CAAC;qBAClC,oBAACO;QAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;sBACnC,oBAACO;QAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;sBACnC,oBAACO;QAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;sBACnC,oBAACO;QAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;sBACnC,oBAACO;QAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;uBAGrC,oBAACa;QAAKL,WAAW,CAAC,EAAER,UAAU,MAAM,CAAC;OAAGG,eAAeG,EAAE;AAG/D,EAAC;AAQD,OAAO,MAAMQ,uBAA+D,CAAC,EAC3EC,MAAMC,GAAG,EACTC,OAAO,YAAY,EACnBd,WAAW,EACXE,IAAI,EACL;IACC,MAAM,EAAEa,oBAAoB,EAAE,GAAGrB;IAEjCD,MAAMuB,SAAS,CAAC;QACdD,qBAAqB;YACnBD;YACAG,WAAWf;YACXW;YACAb,aAAaA,eAAekB;QAC9B;QAEA,OAAO;YACLH,qBAAqB;gBACnBD;gBACAG,WAAW;gBACXJ;YACF;QACF;IACF,GAAG;QAACX;QAAMa;QAAsBF;QAAKC;QAAMd;KAAY;IAEvD,OAAO;AACT,EAAC;AAUD,OAAO,MAAMmB,2BAAoE,CAAC,EAChFP,IAAI,EACJE,OAAO,YAAY,EACnBM,MAAM,EACNC,gBAAgB,KAAK,EACrBC,aAAa,EACd;IACC,MAAMC,eAAe5B;IACrB,MAAM,EAAE6B,IAAI,EAAErB,CAAC,EAAE,GAAGP;IAEpB,MAAM6B,SAAS;QACbC,QAAQvB,EAAE;QACVwB,SAASxB,EAAE;QACXyB,QAAQzB,EAAE;IACZ;IAEA,qBACE,oBAACQ;QACCX,aAAa,CAAC,EAAEyB,MAAM,CAACL,OAAO,CAAC,CAAC,EAC9BE,gBAAgB9B,eAAe8B,eAAeE,QAAQ,GACvD,CAAC,CAACK,IAAI;QACPjB,MAAMA;QACNV,MAAMmB,iBAAiBE;QACvBT,MAAMA;;AAGZ,EAAC"}
+{"version":3,"sources":["../../../src/elements/Loading/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'\n\nimport { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'loading-overlay'\n\ntype LoadingOverlayProps = {\n  animationDuration?: string\n  loadingText?: string\n  overlayType?: string\n  show?: boolean\n}\n\nexport const LoadingOverlay: React.FC<LoadingOverlayProps> = ({\n  animationDuration,\n  loadingText,\n  overlayType,\n  show = true,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        baseClass,\n        show ? `${baseClass}--entering` : `${baseClass}--exiting`,\n        overlayType ? `${baseClass}--${overlayType}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        animationDuration: animationDuration || '500ms',\n      }}\n    >\n      <div className={`${baseClass}__bars`}>\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n      </div>\n\n      <span className={`${baseClass}__text`}>{loadingText || t('general:loading')}</span>\n    </div>\n  )\n}\n\nexport type UseLoadingOverlayToggleProps = {\n  loadingText?: string\n  name: string\n  show: boolean\n  type?: LoadingOverlayTypes\n}\nexport const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleProps> = ({\n  name: key,\n  type = 'fullscreen',\n  loadingText,\n  show,\n}) => {\n  const { toggleLoadingOverlay } = useLoadingOverlay()\n\n  React.useEffect(() => {\n    toggleLoadingOverlay({\n      type,\n      isLoading: show,\n      key,\n      loadingText: loadingText || undefined,\n    })\n\n    return () => {\n      toggleLoadingOverlay({\n        type,\n        isLoading: false,\n        key,\n      })\n    }\n  }, [show, toggleLoadingOverlay, key, type, loadingText])\n\n  return null\n}\n\nexport type FormLoadingOverlayToggleProps = {\n  action: 'create' | 'loading' | 'update'\n  formIsLoading?: boolean\n  loadingSuffix?: string\n  name: string\n  type?: LoadingOverlayTypes\n}\n\nexport const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleProps> = ({\n  name,\n  type = 'fullscreen',\n  action,\n  formIsLoading = false,\n  loadingSuffix,\n}) => {\n  const isProcessing = useFormProcessing()\n  const { i18n, t } = useTranslation()\n\n  const labels = {\n    create: t('general:creating'),\n    loading: t('general:loading'),\n    update: t('general:updating'),\n  }\n\n  return (\n    <LoadingOverlayToggle\n      loadingText={`${labels[action]} ${\n        loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''\n      }`.trim()}\n      name={name}\n      show={formIsLoading || isProcessing}\n      type={type}\n    />\n  )\n}\n"],"names":["getTranslation","React","useLoadingOverlay","useFormProcessing","useTranslation","baseClass","LoadingOverlay","animationDuration","loadingText","overlayType","show","t","div","className","filter","Boolean","join","style","span","LoadingOverlayToggle","name","key","type","toggleLoadingOverlay","useEffect","isLoading","undefined","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","labels","create","loading","update","trim"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,iBAAiB,QAAQ,yCAAwC;AAC1E,SAASC,iBAAiB,QAAQ,8BAA6B;AAC/D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,OAAO,IAAI,EACZ;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,qBACE,MAACQ;QACCC,WAAW;YACTR;YACAK,OAAO,CAAC,EAAEL,UAAU,UAAU,CAAC,GAAG,CAAC,EAAEA,UAAU,SAAS,CAAC;YACzDI,cAAc,CAAC,EAAEJ,UAAU,EAAE,EAAEI,YAAY,CAAC,GAAG;SAChD,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,OAAO;YACLV,mBAAmBA,qBAAqB;QAC1C;;0BAEA,MAACK;gBAAIC,WAAW,CAAC,EAAER,UAAU,MAAM,CAAC;;kCAClC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;kCACnC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;kCACnC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;kCACnC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;kCACnC,KAACO;wBAAIC,WAAW,CAAC,EAAER,UAAU,KAAK,CAAC;;;;0BAGrC,KAACa;gBAAKL,WAAW,CAAC,EAAER,UAAU,MAAM,CAAC;0BAAGG,eAAeG,EAAE;;;;AAG/D,EAAC;AAQD,OAAO,MAAMQ,uBAA+D,CAAC,EAC3EC,MAAMC,GAAG,EACTC,OAAO,YAAY,EACnBd,WAAW,EACXE,IAAI,EACL;IACC,MAAM,EAAEa,oBAAoB,EAAE,GAAGrB;IAEjCD,MAAMuB,SAAS,CAAC;QACdD,qBAAqB;YACnBD;YACAG,WAAWf;YACXW;YACAb,aAAaA,eAAekB;QAC9B;QAEA,OAAO;YACLH,qBAAqB;gBACnBD;gBACAG,WAAW;gBACXJ;YACF;QACF;IACF,GAAG;QAACX;QAAMa;QAAsBF;QAAKC;QAAMd;KAAY;IAEvD,OAAO;AACT,EAAC;AAUD,OAAO,MAAMmB,2BAAoE,CAAC,EAChFP,IAAI,EACJE,OAAO,YAAY,EACnBM,MAAM,EACNC,gBAAgB,KAAK,EACrBC,aAAa,EACd;IACC,MAAMC,eAAe5B;IACrB,MAAM,EAAE6B,IAAI,EAAErB,CAAC,EAAE,GAAGP;IAEpB,MAAM6B,SAAS;QACbC,QAAQvB,EAAE;QACVwB,SAASxB,EAAE;QACXyB,QAAQzB,EAAE;IACZ;IAEA,qBACE,KAACQ;QACCX,aAAa,CAAC,EAAEyB,MAAM,CAACL,OAAO,CAAC,CAAC,EAC9BE,gBAAgB9B,eAAe8B,eAAeE,QAAQ,GACvD,CAAC,CAACK,IAAI;QACPjB,MAAMA;QACNV,MAAMmB,iBAAiBE;QACvBT,MAAMA;;AAGZ,EAAC"}

package/dist/elements/LoadingOverlay/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext } from 'react';
 import { LoadingOverlay } from '../../elements/Loading/index.js';
 import { useDelayedRender } from '../../hooks/useDelayedRender.js';
@@ -44,17 +45,21 @@ export const LoadingOverlayProvider = ({ children })=>{
         triggerDelayedRender,
         fallbackText
     ]);
-    return /*#__PURE__*/ React.createElement(Context.Provider, {
+    return /*#__PURE__*/ _jsxs(Context.Provider, {
         value: {
             isOnScreen: isMounted,
             toggleLoadingOverlay
-        }
-    }, isMounted && /*#__PURE__*/ React.createElement(LoadingOverlay, {
-        animationDuration: `${animatedDuration}ms`,
-        loadingText: overlays.loadingText || fallbackText,
-        overlayType: overlays.overlayType,
-        show: !isUnmounting
-    }), children);
+        },
+        children: [
+            isMounted && /*#__PURE__*/ _jsx(LoadingOverlay, {
+                animationDuration: `${animatedDuration}ms`,
+                loadingText: overlays.loadingText || fallbackText,
+                overlayType: overlays.overlayType,
+                show: !isUnmounting
+            }),
+            children
+        ]
+    });
 };
 export const useLoadingOverlay = ()=>{
     const contextHook = React.useContext(Context);

package/dist/elements/LoadingOverlay/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/LoadingOverlay/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext } from 'react'\n\nimport type { LoadingOverlayContext, ToggleLoadingOverlay } from './types.js'\n\nimport { LoadingOverlay } from '../../elements/Loading/index.js'\nimport { useDelayedRender } from '../../hooks/useDelayedRender.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { defaultLoadingOverlayState, reducer } from './reducer.js'\n\nconst animatedDuration = 250\n\nconst Context = createContext({\n  isOnScreen: false,\n  toggleLoadingOverlay: undefined,\n})\n\nexport const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  const { t } = useTranslation()\n  const fallbackText = t('general:loading')\n  const [overlays, dispatchOverlay] = React.useReducer(reducer, defaultLoadingOverlayState)\n\n  const { isMounted, isUnmounting, triggerDelayedRender } = useDelayedRender({\n    delayBeforeShow: 1000,\n    inTimeout: animatedDuration,\n    minShowTime: 500,\n    outTimeout: animatedDuration,\n    show: overlays.isLoading,\n  })\n\n  const toggleLoadingOverlay = React.useCallback<ToggleLoadingOverlay>(\n    ({ type, isLoading, key, loadingText = fallbackText }) => {\n      if (isLoading) {\n        triggerDelayedRender()\n        dispatchOverlay({\n          type: 'add',\n          payload: {\n            type,\n            key,\n            loadingText,\n          },\n        })\n      } else {\n        dispatchOverlay({\n          type: 'remove',\n          payload: {\n            type,\n            key,\n          },\n        })\n      }\n    },\n    [triggerDelayedRender, fallbackText],\n  )\n\n  return (\n    <Context.Provider\n      value={{\n        isOnScreen: isMounted,\n        toggleLoadingOverlay,\n      }}\n    >\n      {isMounted && (\n        <LoadingOverlay\n          animationDuration={`${animatedDuration}ms`}\n          loadingText={overlays.loadingText || fallbackText}\n          overlayType={overlays.overlayType}\n          show={!isUnmounting}\n        />\n      )}\n      {children}\n    </Context.Provider>\n  )\n}\n\nexport const useLoadingOverlay = (): LoadingOverlayContext => {\n  const contextHook = React.useContext(Context)\n  if (contextHook === undefined) {\n    throw new Error('useLoadingOverlay must be used within a LoadingOverlayProvider')\n  }\n\n  return contextHook\n}\n"],"names":["React","createContext","LoadingOverlay","useDelayedRender","useTranslation","defaultLoadingOverlayState","reducer","animatedDuration","Context","isOnScreen","toggleLoadingOverlay","undefined","LoadingOverlayProvider","children","t","fallbackText","overlays","dispatchOverlay","useReducer","isMounted","isUnmounting","triggerDelayedRender","delayBeforeShow","inTimeout","minShowTime","outTimeout","show","isLoading","useCallback","type","key","loadingText","payload","Provider","value","animationDuration","overlayType","useLoadingOverlay","contextHook","useContext","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,aAAa,QAAQ,QAAO;AAI5C,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SAASC,gBAAgB,QAAQ,kCAAiC;AAClE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,0BAA0B,EAAEC,OAAO,QAAQ,eAAc;AAElE,MAAMC,mBAAmB;AAEzB,MAAMC,wBAAUP,cAAc;IAC5BQ,YAAY;IACZC,sBAAsBC;AACxB;AAEA,OAAO,MAAMC,yBAAmE,CAAC,EAAEC,QAAQ,EAAE;IAC3F,MAAM,EAAEC,CAAC,EAAE,GAAGV;IACd,MAAMW,eAAeD,EAAE;IACvB,MAAM,CAACE,UAAUC,gBAAgB,GAAGjB,MAAMkB,UAAU,CAACZ,SAASD;IAE9D,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGlB,iBAAiB;QACzEmB,iBAAiB;QACjBC,WAAWhB;QACXiB,aAAa;QACbC,YAAYlB;QACZmB,MAAMV,SAASW,SAAS;IAC1B;IAEA,MAAMjB,uBAAuBV,MAAM4B,WAAW,CAC5C,CAAC,EAAEC,IAAI,EAAEF,SAAS,EAAEG,GAAG,EAAEC,cAAchB,YAAY,EAAE;QACnD,IAAIY,WAAW;YACbN;YACAJ,gBAAgB;gBACdY,MAAM;gBACNG,SAAS;oBACPH;oBACAC;oBACAC;gBACF;YACF;QACF,OAAO;YACLd,gBAAgB;gBACdY,MAAM;gBACNG,SAAS;oBACPH;oBACAC;gBACF;YACF;QACF;IACF,GACA;QAACT;QAAsBN;KAAa;IAGtC,qBACE,oBAACP,QAAQyB,QAAQ;QACfC,OAAO;YACLzB,YAAYU;YACZT;QACF;OAECS,2BACC,oBAACjB;QACCiC,mBAAmB,CAAC,EAAE5B,iBAAiB,EAAE,CAAC;QAC1CwB,aAAaf,SAASe,WAAW,IAAIhB;QACrCqB,aAAapB,SAASoB,WAAW;QACjCV,MAAM,CAACN;QAGVP;AAGP,EAAC;AAED,OAAO,MAAMwB,oBAAoB;IAC/B,MAAMC,cAActC,MAAMuC,UAAU,CAAC/B;IACrC,IAAI8B,gBAAgB3B,WAAW;QAC7B,MAAM,IAAI6B,MAAM;IAClB;IAEA,OAAOF;AACT,EAAC"}
+{"version":3,"sources":["../../../src/elements/LoadingOverlay/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext } from 'react'\n\nimport type { LoadingOverlayContext, ToggleLoadingOverlay } from './types.js'\n\nimport { LoadingOverlay } from '../../elements/Loading/index.js'\nimport { useDelayedRender } from '../../hooks/useDelayedRender.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { defaultLoadingOverlayState, reducer } from './reducer.js'\n\nconst animatedDuration = 250\n\nconst Context = createContext({\n  isOnScreen: false,\n  toggleLoadingOverlay: undefined,\n})\n\nexport const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  const { t } = useTranslation()\n  const fallbackText = t('general:loading')\n  const [overlays, dispatchOverlay] = React.useReducer(reducer, defaultLoadingOverlayState)\n\n  const { isMounted, isUnmounting, triggerDelayedRender } = useDelayedRender({\n    delayBeforeShow: 1000,\n    inTimeout: animatedDuration,\n    minShowTime: 500,\n    outTimeout: animatedDuration,\n    show: overlays.isLoading,\n  })\n\n  const toggleLoadingOverlay = React.useCallback<ToggleLoadingOverlay>(\n    ({ type, isLoading, key, loadingText = fallbackText }) => {\n      if (isLoading) {\n        triggerDelayedRender()\n        dispatchOverlay({\n          type: 'add',\n          payload: {\n            type,\n            key,\n            loadingText,\n          },\n        })\n      } else {\n        dispatchOverlay({\n          type: 'remove',\n          payload: {\n            type,\n            key,\n          },\n        })\n      }\n    },\n    [triggerDelayedRender, fallbackText],\n  )\n\n  return (\n    <Context.Provider\n      value={{\n        isOnScreen: isMounted,\n        toggleLoadingOverlay,\n      }}\n    >\n      {isMounted && (\n        <LoadingOverlay\n          animationDuration={`${animatedDuration}ms`}\n          loadingText={overlays.loadingText || fallbackText}\n          overlayType={overlays.overlayType}\n          show={!isUnmounting}\n        />\n      )}\n      {children}\n    </Context.Provider>\n  )\n}\n\nexport const useLoadingOverlay = (): LoadingOverlayContext => {\n  const contextHook = React.useContext(Context)\n  if (contextHook === undefined) {\n    throw new Error('useLoadingOverlay must be used within a LoadingOverlayProvider')\n  }\n\n  return contextHook\n}\n"],"names":["React","createContext","LoadingOverlay","useDelayedRender","useTranslation","defaultLoadingOverlayState","reducer","animatedDuration","Context","isOnScreen","toggleLoadingOverlay","undefined","LoadingOverlayProvider","children","t","fallbackText","overlays","dispatchOverlay","useReducer","isMounted","isUnmounting","triggerDelayedRender","delayBeforeShow","inTimeout","minShowTime","outTimeout","show","isLoading","useCallback","type","key","loadingText","payload","Provider","value","animationDuration","overlayType","useLoadingOverlay","contextHook","useContext","Error"],"mappings":"AAAA;;AACA,OAAOA,SAASC,aAAa,QAAQ,QAAO;AAI5C,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SAASC,gBAAgB,QAAQ,kCAAiC;AAClE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,0BAA0B,EAAEC,OAAO,QAAQ,eAAc;AAElE,MAAMC,mBAAmB;AAEzB,MAAMC,wBAAUP,cAAc;IAC5BQ,YAAY;IACZC,sBAAsBC;AACxB;AAEA,OAAO,MAAMC,yBAAmE,CAAC,EAAEC,QAAQ,EAAE;IAC3F,MAAM,EAAEC,CAAC,EAAE,GAAGV;IACd,MAAMW,eAAeD,EAAE;IACvB,MAAM,CAACE,UAAUC,gBAAgB,GAAGjB,MAAMkB,UAAU,CAACZ,SAASD;IAE9D,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGlB,iBAAiB;QACzEmB,iBAAiB;QACjBC,WAAWhB;QACXiB,aAAa;QACbC,YAAYlB;QACZmB,MAAMV,SAASW,SAAS;IAC1B;IAEA,MAAMjB,uBAAuBV,MAAM4B,WAAW,CAC5C,CAAC,EAAEC,IAAI,EAAEF,SAAS,EAAEG,GAAG,EAAEC,cAAchB,YAAY,EAAE;QACnD,IAAIY,WAAW;YACbN;YACAJ,gBAAgB;gBACdY,MAAM;gBACNG,SAAS;oBACPH;oBACAC;oBACAC;gBACF;YACF;QACF,OAAO;YACLd,gBAAgB;gBACdY,MAAM;gBACNG,SAAS;oBACPH;oBACAC;gBACF;YACF;QACF;IACF,GACA;QAACT;QAAsBN;KAAa;IAGtC,qBACE,MAACP,QAAQyB,QAAQ;QACfC,OAAO;YACLzB,YAAYU;YACZT;QACF;;YAECS,2BACC,KAACjB;gBACCiC,mBAAmB,CAAC,EAAE5B,iBAAiB,EAAE,CAAC;gBAC1CwB,aAAaf,SAASe,WAAW,IAAIhB;gBACrCqB,aAAapB,SAASoB,WAAW;gBACjCV,MAAM,CAACN;;YAGVP;;;AAGP,EAAC;AAED,OAAO,MAAMwB,oBAAoB;IAC/B,MAAMC,cAActC,MAAMuC,UAAU,CAAC/B;IACrC,IAAI8B,gBAAgB3B,WAAW;QAC7B,MAAM,IAAI6B,MAAM;IAClB;IAEA,OAAOF;AACT,EAAC"}

package/dist/elements/LoadingOverlay/reducer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/LoadingOverlay/reducer.ts"],"sourcesContent":["import type { Action, State } from './types.js'\n\nexport const defaultLoadingOverlayState = {\n  isLoading: false,\n  loaders: [],\n  loadingText: '',\n  overlayType: null,\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  const loadersCopy = [...state.loaders]\n  const { type = 'fullscreen', key = 'user', loadingText } = action.payload\n\n  if (action.type === 'add') {\n    loadersCopy.push({ type, key, loadingText })\n  } else if (action.type === 'remove') {\n    const index = loadersCopy.findIndex((item) => item.key === key && item.type === type)\n    loadersCopy.splice(index, 1)\n  }\n\n  const nextLoader = loadersCopy?.length > 0 ? loadersCopy[loadersCopy.length - 1] : null\n\n  return {\n    isLoading: Boolean(nextLoader),\n    loaders: loadersCopy,\n    loadingText: nextLoader?.loadingText || state?.loadingText,\n    overlayType: nextLoader?.type || state?.overlayType,\n  }\n}\n"],"names":["defaultLoadingOverlayState","isLoading","loaders","loadingText","overlayType","reducer","state","action","loadersCopy","type","key","payload","push","index","findIndex","item","splice","nextLoader","length","Boolean"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA,OAAO,MAAMA,6BAA6B;IACxCC,WAAW;IACXC,SAAS,EAAE;IACXC,aAAa;IACbC,aAAa;AACf,EAAC;AAED,OAAO,MAAMC,UAAU,CAACC,OAAcC;IACpC,MAAMC,cAAc;WAAIF,MAAMJ,OAAO;KAAC;IACtC,MAAM,EAAEO,OAAO,YAAY,EAAEC,MAAM,MAAM,EAAEP,WAAW,EAAE,GAAGI,OAAOI,OAAO;IAEzE,IAAIJ,OAAOE,IAAI,KAAK,OAAO;QACzBD,YAAYI,IAAI,CAAC;YAAEH;YAAMC;YAAKP;QAAY;IAC5C,OAAO,IAAII,OAAOE,IAAI,KAAK,UAAU;QACnC,MAAMI,QAAQL,YAAYM,SAAS,CAAC,CAACC,OAASA,KAAKL,GAAG,KAAKA,OAAOK,KAAKN,IAAI,KAAKA;QAChFD,YAAYQ,MAAM,CAACH,OAAO;IAC5B;IAEA,MAAMI,aAAaT,aAAaU,SAAS,IAAIV,WAAW,CAACA,YAAYU,MAAM,GAAG,EAAE,GAAG;IAEnF,OAAO;QACLjB,WAAWkB,QAAQF;QACnBf,SAASM;QACTL,aAAac,YAAYd,eAAeG,OAAOH;QAC/CC,aAAaa,YAAYR,QAAQH,OAAOF;IAC1C;AACF,EAAC"}
+{"version":3,"sources":["../../../src/elements/LoadingOverlay/reducer.ts"],"sourcesContent":["import type { Action, State } from './types.js'\n\nexport const defaultLoadingOverlayState = {\n  isLoading: false,\n  loaders: [],\n  loadingText: '',\n  overlayType: null,\n}\n\nexport const reducer = (state: State, action: Action): State => {\n  const loadersCopy = [...state.loaders]\n  const { type = 'fullscreen', key = 'user', loadingText } = action.payload\n\n  if (action.type === 'add') {\n    loadersCopy.push({ type, key, loadingText })\n  } else if (action.type === 'remove') {\n    const index = loadersCopy.findIndex((item) => item.key === key && item.type === type)\n    loadersCopy.splice(index, 1)\n  }\n\n  const nextLoader = loadersCopy?.length > 0 ? loadersCopy[loadersCopy.length - 1] : null\n\n  return {\n    isLoading: Boolean(nextLoader),\n    loaders: loadersCopy,\n    loadingText: nextLoader?.loadingText || state?.loadingText,\n    overlayType: nextLoader?.type || state?.overlayType,\n  }\n}\n"],"names":["defaultLoadingOverlayState","isLoading","loaders","loadingText","overlayType","reducer","state","action","loadersCopy","type","key","payload","push","index","findIndex","item","splice","nextLoader","length","Boolean"],"mappings":"AAEA,OAAO,MAAMA,6BAA6B;IACxCC,WAAW;IACXC,SAAS,EAAE;IACXC,aAAa;IACbC,aAAa;AACf,EAAC;AAED,OAAO,MAAMC,UAAU,CAACC,OAAcC;IACpC,MAAMC,cAAc;WAAIF,MAAMJ,OAAO;KAAC;IACtC,MAAM,EAAEO,OAAO,YAAY,EAAEC,MAAM,MAAM,EAAEP,WAAW,EAAE,GAAGI,OAAOI,OAAO;IAEzE,IAAIJ,OAAOE,IAAI,KAAK,OAAO;QACzBD,YAAYI,IAAI,CAAC;YAAEH;YAAMC;YAAKP;QAAY;IAC5C,OAAO,IAAII,OAAOE,IAAI,KAAK,UAAU;QACnC,MAAMI,QAAQL,YAAYM,SAAS,CAAC,CAACC,OAASA,KAAKL,GAAG,KAAKA,OAAOK,KAAKN,IAAI,KAAKA;QAChFD,YAAYQ,MAAM,CAACH,OAAO;IAC5B;IAEA,MAAMI,aAAaT,aAAaU,SAAS,IAAIV,WAAW,CAACA,YAAYU,MAAM,GAAG,EAAE,GAAG;IAEnF,OAAO;QACLjB,WAAWkB,QAAQF;QACnBf,SAASM;QACTL,aAAac,YAAYd,eAAeG,OAAOH;QAC/CC,aAAaa,YAAYR,QAAQH,OAAOF;IAC1C;AACF,EAAC"}

package/dist/elements/LoadingOverlay/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/LoadingOverlay/types.ts"],"sourcesContent":["export type LoadingOverlayTypes = 'fullscreen' | 'withoutNav'\n\ntype ToggleLoadingOverlayOptions = {\n  isLoading?: boolean\n  key: string\n  loadingText?: string\n  type?: LoadingOverlayTypes\n}\nexport type ToggleLoadingOverlay = (options: ToggleLoadingOverlayOptions) => void\n\ntype Add = {\n  payload: {\n    key: string\n    loadingText?: string\n    type: LoadingOverlayTypes\n  }\n  type: 'add'\n}\ntype Remove = {\n  payload: {\n    key: string\n    loadingText?: never\n    type: LoadingOverlayTypes\n  }\n  type: 'remove'\n}\nexport type Action = Add | Remove\nexport type State = {\n  isLoading: boolean\n  loaders: {\n    key: string\n    loadingText: string\n    type: LoadingOverlayTypes\n  }[]\n  loadingText: string\n  overlayType: LoadingOverlayTypes | null\n}\n\nexport type LoadingOverlayContext = {\n  isOnScreen: boolean\n  toggleLoadingOverlay: ToggleLoadingOverlay\n}\n"],"names":[],"rangeMappings":"","mappings":"AAsCA,WAGC"}
+{"version":3,"sources":["../../../src/elements/LoadingOverlay/types.ts"],"sourcesContent":["export type LoadingOverlayTypes = 'fullscreen' | 'withoutNav'\n\ntype ToggleLoadingOverlayOptions = {\n  isLoading?: boolean\n  key: string\n  loadingText?: string\n  type?: LoadingOverlayTypes\n}\nexport type ToggleLoadingOverlay = (options: ToggleLoadingOverlayOptions) => void\n\ntype Add = {\n  payload: {\n    key: string\n    loadingText?: string\n    type: LoadingOverlayTypes\n  }\n  type: 'add'\n}\ntype Remove = {\n  payload: {\n    key: string\n    loadingText?: never\n    type: LoadingOverlayTypes\n  }\n  type: 'remove'\n}\nexport type Action = Add | Remove\nexport type State = {\n  isLoading: boolean\n  loaders: {\n    key: string\n    loadingText: string\n    type: LoadingOverlayTypes\n  }[]\n  loadingText: string\n  overlayType: LoadingOverlayTypes | null\n}\n\nexport type LoadingOverlayContext = {\n  isOnScreen: boolean\n  toggleLoadingOverlay: ToggleLoadingOverlay\n}\n"],"names":[],"mappings":"AAsCA,WAGC"}

package/dist/elements/Localizer/LocalizerLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAmBA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAmBA,CAAA"}

package/dist/elements/Localizer/LocalizerLabel/index.js

@@ -1,26 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
-import { Chevron } from '../../../icons/Chevron/index.js';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
 import { useLocale } from '../../../providers/Locale/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
+import './index.scss';
 const baseClass = 'localizer-button';
 export const LocalizerLabel = (props)=>{
     const { ariaLabel, className } = props;
     const locale = useLocale();
     const { i18n, t } = useTranslation();
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         "aria-label": ariaLabel || t('general:locale'),
         className: [
             baseClass,
             className
-        ].filter(Boolean).join(' ')
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__label`
-    }, `${t('general:locale')}:`), "  ", /*#__PURE__*/ React.createElement("span", {
-        className: `${baseClass}__current-label`
-    }, `${getTranslation(locale.label, i18n)}`), " ", /*#__PURE__*/ React.createElement(Chevron, {
-        className: `${baseClass}__chevron`
-    }));
+        ].filter(Boolean).join(' '),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: `${baseClass}__label`,
+                children: `${t('general:locale')}:`
+            }),
+            "  ",
+            /*#__PURE__*/ _jsx("span", {
+                className: `${baseClass}__current-label`,
+                children: `${getTranslation(locale.label, i18n)}`
+            }),
+            " ",
+            /*#__PURE__*/ _jsx(ChevronIcon, {
+                className: `${baseClass}__chevron`
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/Localizer/LocalizerLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"sourcesContent":["import { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { Chevron } from '../../../icons/Chevron/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer-button'\n\nexport const LocalizerLabel: React.FC<{\n  ariaLabel?: string\n  className?: string\n}> = (props) => {\n  const { ariaLabel, className } = props\n  const locale = useLocale()\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      aria-label={ariaLabel || t('general:locale')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n    >\n      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}</div>\n      &nbsp;&nbsp;\n      <span className={`${baseClass}__current-label`}>\n        {`${getTranslation(locale.label, i18n)}`}\n      </span>\n      &nbsp;\n      <Chevron className={`${baseClass}__chevron`} />\n    </div>\n  )\n}\n"],"names":["getTranslation","React","Chevron","useLocale","useTranslation","baseClass","LocalizerLabel","props","ariaLabel","className","locale","i18n","t","div","aria-label","filter","Boolean","join","span","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,kCAAiC;AACzD,SAASC,SAAS,QAAQ,qCAAoC;AAC9D,SAASC,cAAc,QAAQ,0CAAyC;AAGxE,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAGR,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IACjC,MAAMG,SAASP;IACf,MAAM,EAAEQ,IAAI,EAAEC,CAAC,EAAE,GAAGR;IAEpB,qBACE,oBAACS;QACCC,cAAYN,aAAaI,EAAE;QAC3BH,WAAW;YAACJ;YAAWI;SAAU,CAACM,MAAM,CAACC,SAASC,IAAI,CAAC;qBAEvD,oBAACJ;QAAIJ,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;OAAG,CAAC,EAAEO,EAAE,kBAAkB,CAAC,CAAC,GAAO,oBAExE,oBAACM;QAAKT,WAAW,CAAC,EAAEJ,UAAU,eAAe,CAAC;OAC3C,CAAC,EAAEL,eAAeU,OAAOS,KAAK,EAAER,MAAM,CAAC,GACnC,mBAEP,oBAACT;QAAQO,WAAW,CAAC,EAAEJ,UAAU,SAAS,CAAC;;AAGjD,EAAC"}
+{"version":3,"sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer-button'\n\nexport const LocalizerLabel: React.FC<{\n  ariaLabel?: string\n  className?: string\n}> = (props) => {\n  const { ariaLabel, className } = props\n  const locale = useLocale()\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      aria-label={ariaLabel || t('general:locale')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n    >\n      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}</div>\n      &nbsp;&nbsp;\n      <span className={`${baseClass}__current-label`}>\n        {`${getTranslation(locale.label, i18n)}`}\n      </span>\n      &nbsp;\n      <ChevronIcon className={`${baseClass}__chevron`} />\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ChevronIcon","useLocale","useTranslation","baseClass","LocalizerLabel","props","ariaLabel","className","locale","i18n","t","div","aria-label","filter","Boolean","join","span","label"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,SAASC,SAAS,QAAQ,qCAAoC;AAC9D,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAGR,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IACjC,MAAMG,SAASP;IACf,MAAM,EAAEQ,IAAI,EAAEC,CAAC,EAAE,GAAGR;IAEpB,qBACE,MAACS;QACCC,cAAYN,aAAaI,EAAE;QAC3BH,WAAW;YAACJ;YAAWI;SAAU,CAACM,MAAM,CAACC,SAASC,IAAI,CAAC;;0BAEvD,KAACJ;gBAAIJ,WAAW,CAAC,EAAEJ,UAAU,OAAO,CAAC;0BAAG,CAAC,EAAEO,EAAE,kBAAkB,CAAC,CAAC;;YAAO;0BAExE,KAACM;gBAAKT,WAAW,CAAC,EAAEJ,UAAU,eAAe,CAAC;0BAC3C,CAAC,EAAEL,eAAeU,OAAOS,KAAK,EAAER,MAAM,CAAC;;YACnC;0BAEP,KAACT;gBAAYO,WAAW,CAAC,EAAEJ,UAAU,SAAS,CAAC;;;;AAGrD,EAAC"}

package/dist/elements/Localizer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAuDA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAuDA,CAAA"}

package/dist/elements/Localizer/index.js

@@ -1,3 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import { useRouter } from 'next/navigation.js';
 import React from 'react';
@@ -6,9 +8,9 @@ import { useLocale } from '../../providers/Locale/index.js';
 import { useRouteCache } from '../../providers/RouteCache/index.js';
 import { useSearchParams } from '../../providers/SearchParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { PopupList } from '../Popup/index.js';
-import { Popup } from '../Popup/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
 import { LocalizerLabel } from './LocalizerLabel/index.js';
+import './index.scss';
 const baseClass = 'localizer';
 export const Localizer = (props)=>{
     const { className } = props;
@@ -21,33 +23,39 @@ export const Localizer = (props)=>{
     const { clearRouteCache } = useRouteCache();
     if (localization) {
         const { locales } = localization;
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ _jsx("div", {
             className: [
                 baseClass,
                 className
-            ].filter(Boolean).join(' ')
-        }, /*#__PURE__*/ React.createElement(Popup, {
-            button: /*#__PURE__*/ React.createElement(LocalizerLabel, null),
-            horizontalAlign: "right",
-            render: ({ close })=>/*#__PURE__*/ React.createElement(PopupList.ButtonGroup, null, locales.map((localeOption)=>{
-                    const localeOptionLabel = getTranslation(localeOption.label, i18n);
-                    return /*#__PURE__*/ React.createElement(PopupList.Button, {
-                        active: locale.code === localeOption.code,
-                        key: localeOption.code,
-                        onClick: ()=>{
-                            router.replace(stringifyParams({
-                                params: {
-                                    locale: localeOption.code
-                                }
-                            }));
-                            clearRouteCache();
-                            close();
-                        }
-                    }, localeOptionLabel, localeOptionLabel !== localeOption.code && ` (${localeOption.code})`);
-                })),
-            showScrollbar: true,
-            size: "large"
-        }));
+            ].filter(Boolean).join(' '),
+            children: /*#__PURE__*/ _jsx(Popup, {
+                button: /*#__PURE__*/ _jsx(LocalizerLabel, {}),
+                horizontalAlign: "right",
+                render: ({ close })=>/*#__PURE__*/ _jsx(PopupList.ButtonGroup, {
+                        children: locales.map((localeOption)=>{
+                            const localeOptionLabel = getTranslation(localeOption.label, i18n);
+                            return /*#__PURE__*/ _jsxs(PopupList.Button, {
+                                active: locale.code === localeOption.code,
+                                onClick: ()=>{
+                                    router.replace(stringifyParams({
+                                        params: {
+                                            locale: localeOption.code
+                                        }
+                                    }));
+                                    clearRouteCache();
+                                    close();
+                                },
+                                children: [
+                                    localeOptionLabel,
+                                    localeOptionLabel !== localeOption.code && ` (${localeOption.code})`
+                                ]
+                            }, localeOption.code);
+                        })
+                    }),
+                showScrollbar: true,
+                size: "large"
+            })
+        });
     }
     return null;
 };