@payloadcms/ui 3.0.0-beta.11 → 3.0.0-beta.111

package/dist/elements/ColumnSelector/index.js

@@ -1,48 +1,122 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useId } from 'react';
-import { Plus } from '../../icons/Plus/index.js';
-import { X } from '../../icons/X/index.js';
+import { PlusIcon } from '../../icons/Plus/index.js';
+import { XIcon } from '../../icons/X/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
 import { Pill } from '../Pill/index.js';
 import { useTableColumns } from '../TableColumns/index.js';
+import './index.scss';
 const baseClass = 'column-selector';
-export const ColumnSelector = ({ collectionSlug })=>{
-    const { columns, moveColumn, toggleColumn } = useTableColumns();
-    const uuid = useId();
-    const editDepth = useEditDepth();
-    if (!columns) {
-        return null;
+const filterColumnFields = fields => {
+  return fields.filter(field => {
+    return !field.cellProps?.field?.admin?.disableListColumn;
+  });
+};
+export const ColumnSelector = t0 => {
+  const $ = _c(14);
+  const {
+    collectionSlug
+  } = t0;
+  const {
+    columns,
+    moveColumn,
+    toggleColumn
+  } = useTableColumns();
+  const uuid = useId();
+  const editDepth = useEditDepth();
+  if (!columns) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== columns || $[1] !== moveColumn || $[2] !== toggleColumn || $[3] !== collectionSlug || $[4] !== editDepth || $[5] !== uuid) {
+    const filteredColumns = filterColumnFields(columns);
+    let t2;
+    if ($[7] !== moveColumn) {
+      t2 = t3 => {
+        const {
+          moveFromIndex,
+          moveToIndex
+        } = t3;
+        moveColumn({
+          fromIndex: moveFromIndex,
+          toIndex: moveToIndex
+        });
+      };
+      $[7] = moveColumn;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
     }
-    return /*#__PURE__*/ React.createElement(DraggableSortable, {
-        className: baseClass,
-        ids: columns.map((col)=>col?.accessor),
-        onDragEnd: ({ moveFromIndex, moveToIndex })=>{
-            moveColumn({
-                fromIndex: moveFromIndex,
-                toIndex: moveToIndex
-            });
+    let t3;
+    if ($[9] !== toggleColumn || $[10] !== collectionSlug || $[11] !== editDepth || $[12] !== uuid) {
+      t3 = (col_0, i) => {
+        if (!col_0) {
+          return null;
+        }
+        const {
+          accessor,
+          active,
+          cellProps: t4
+        } = col_0;
+        const {
+          field: t5
+        } = t4;
+        const {
+          admin: t6
+        } = t5 === undefined ? {} : t5;
+        const {
+          components: t7
+        } = t6 === undefined ? {} : t6;
+        const {
+          Label
+        } = t7 === undefined ? {} : t7;
+        if (col_0.accessor === "_select" || Label === null) {
+          return null;
         }
-    }, columns.map((col, i)=>{
-        if (!col) return null;
-        const { Label, accessor, active } = col;
-        if (col.accessor === '_select') return null;
-        return /*#__PURE__*/ React.createElement(Pill, {
-            alignIcon: "left",
-            "aria-checked": active,
-            className: [
-                `${baseClass}__column`,
-                active && `${baseClass}__column--active`
-            ].filter(Boolean).join(' '),
-            draggable: true,
-            icon: active ? /*#__PURE__*/ React.createElement(X, null) : /*#__PURE__*/ React.createElement(Plus, null),
-            id: accessor,
-            key: `${collectionSlug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
-            onClick: ()=>{
-                toggleColumn(accessor);
-            }
-        }, Label);
-    }));
+        return _jsx(Pill, {
+          alignIcon: "left",
+          "aria-checked": active,
+          className: [`${baseClass}__column`, active && `${baseClass}__column--active`].filter(Boolean).join(" "),
+          draggable: true,
+          icon: active ? _jsx(XIcon, {}) : _jsx(PlusIcon, {}),
+          id: accessor,
+          onClick: () => {
+            toggleColumn(accessor);
+          },
+          children: Label
+        }, `${collectionSlug}-${col_0.cellProps?.field && "name" in col_0.cellProps.field ? col_0.cellProps?.field?.name : i}${editDepth ? `-${editDepth}-` : ""}${uuid}`);
+      };
+      $[9] = toggleColumn;
+      $[10] = collectionSlug;
+      $[11] = editDepth;
+      $[12] = uuid;
+      $[13] = t3;
+    } else {
+      t3 = $[13];
+    }
+    t1 = _jsx(DraggableSortable, {
+      className: baseClass,
+      ids: filteredColumns.map(_temp),
+      onDragEnd: t2,
+      children: filteredColumns.map(t3)
+    });
+    $[0] = columns;
+    $[1] = moveColumn;
+    $[2] = toggleColumn;
+    $[3] = collectionSlug;
+    $[4] = editDepth;
+    $[5] = uuid;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
 };
-
+function _temp(col) {
+  return col?.accessor;
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload/types'\n\nimport React, { useId } from 'react'\n\nimport { Plus } from '../../icons/Plus/index.js'\nimport { X } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  if (!columns) {\n    return null\n  }\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={columns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {columns.map((col, i) => {\n        if (!col) return null\n\n        const { Label, accessor, active } = col\n\n        if (col.accessor === '_select') return null\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <X /> : <Plus />}\n            id={accessor}\n            key={`${collectionSlug}-${col.name || i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              toggleColumn(accessor)\n            }}\n          >\n            {Label}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"names":["React","useId","Plus","X","useEditDepth","DraggableSortable","Pill","useTableColumns","baseClass","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","className","ids","map","col","accessor","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","i","Label","active","alignIcon","aria-checked","filter","Boolean","join","draggable","icon","id","key","name","onClick"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,OAAOA,SAASC,KAAK,QAAQ,QAAO;AAEpC,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,CAAC,QAAQ,yBAAwB;AAC1C,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,IAAI,QAAQ,mBAAkB;AACvC,SAASC,eAAe,QAAQ,2BAA0B;AAG1D,MAAMC,YAAY;AAMlB,OAAO,MAAMC,iBAAkC,CAAC,EAAEC,cAAc,EAAE;IAChE,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGN;IAE9C,MAAMO,OAAOb;IACb,MAAMc,YAAYX;IAElB,IAAI,CAACO,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,oBAACN;QACCW,WAAWR;QACXS,KAAKN,QAAQO,GAAG,CAAC,CAACC,MAAQA,KAAKC;QAC/BC,WAAW,CAAC,EAAEC,aAAa,EAAEC,WAAW,EAAE;YACxCX,WAAW;gBACTY,WAAWF;gBACXG,SAASF;YACX;QACF;OAECZ,QAAQO,GAAG,CAAC,CAACC,KAAKO;QACjB,IAAI,CAACP,KAAK,OAAO;QAEjB,MAAM,EAAEQ,KAAK,EAAEP,QAAQ,EAAEQ,MAAM,EAAE,GAAGT;QAEpC,IAAIA,IAAIC,QAAQ,KAAK,WAAW,OAAO;QAEvC,qBACE,oBAACd;YACCuB,WAAU;YACVC,gBAAcF;YACdZ,WAAW;gBAAC,CAAC,EAAER,UAAU,QAAQ,CAAC;gBAAEoB,UAAU,CAAC,EAAEpB,UAAU,gBAAgB,CAAC;aAAC,CAC1EuB,MAAM,CAACC,SACPC,IAAI,CAAC;YACRC,WAAAA;YACAC,MAAMP,uBAAS,oBAACzB,yBAAO,oBAACD;YACxBkC,IAAIhB;YACJiB,KAAK,CAAC,EAAE3B,eAAe,CAAC,EAAES,IAAImB,IAAI,IAAIZ,EAAE,EAAEX,YAAY,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,GAAG,GAAG,EAAED,KAAK,CAAC;YACpFyB,SAAS;gBACP1B,aAAaO;YACf;WAECO;IAGP;AAGN,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useId","PlusIcon","XIcon","useEditDepth","DraggableSortable","Pill","useTableColumns","baseClass","filterColumnFields","fields","filter","field","cellProps","admin","disableListColumn","ColumnSelector","t0","$","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","t1","filteredColumns","t2","t3","moveFromIndex","moveToIndex","fromIndex","toIndex","col_0","i","col","accessor","active","t4","t5","t6","undefined","components","t7","Label","_jsx","alignIcon","className","Boolean","join","draggable","icon","id","onClick","children","name","ids","map","_temp","onDragEnd"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport React, { useId } from 'react'\n\nimport type { Column } from '../Table/index.js'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { useTableColumns } from '../TableColumns/index.js'\nimport './index.scss'\n\nconst baseClass = 'column-selector'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nconst filterColumnFields = (fields: Column[]): Column[] => {\n  return fields.filter((field) => {\n    return !field.cellProps?.field?.admin?.disableListColumn\n  })\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  if (!columns) {\n    return null\n  }\n\n  const filteredColumns = filterColumnFields(columns)\n\n  return (\n    <DraggableSortable\n      className={baseClass}\n      ids={filteredColumns.map((col) => col?.accessor)}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        moveColumn({\n          fromIndex: moveFromIndex,\n          toIndex: moveToIndex,\n        })\n      }}\n    >\n      {filteredColumns.map((col, i) => {\n        if (!col) {\n          return null\n        }\n\n        const {\n          accessor,\n          active,\n          cellProps: {\n            field: {\n              admin: {\n                // @ts-expect-error // TODO: `Label` does not exist on the UI field\n                components: { Label } = {},\n              } = {},\n            } = {},\n          },\n        } = col\n\n        if (col.accessor === '_select' || Label === null) {\n          return null\n        }\n\n        return (\n          <Pill\n            alignIcon=\"left\"\n            aria-checked={active}\n            className={[`${baseClass}__column`, active && `${baseClass}__column--active`]\n              .filter(Boolean)\n              .join(' ')}\n            draggable\n            icon={active ? <XIcon /> : <PlusIcon />}\n            id={accessor}\n            key={`${collectionSlug}-${col.cellProps?.field && 'name' in col.cellProps.field ? col.cellProps?.field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              toggleColumn(accessor)\n            }}\n          >\n            {Label}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ColumnSelector/index.scss

@@ -10,10 +10,28 @@
     margin-right: base(0.5);
     margin-bottom: base(0.5);
     background-color: transparent;
-    box-shadow: 0 0 0 1px var(--theme-elevation-200);
+    box-shadow: 0 0 0 1px var(--theme-elevation-150);
+
+    &.column-selector__column {
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
 
     &.column-selector__column--active {
-      background-color: var(--theme-elevation-150);
+      background-color: var(--theme-elevation-0);
+      box-shadow:
+        0 0px 1px 1px var(--theme-elevation-150),
+        0 2px 4px -2px rgba(0, 0, 0, 0.1);
+
+      &:hover {
+        background-color: var(--theme-elevation-0);
+        box-shadow:
+          0 0px 1px 1px var(--theme-elevation-250),
+          0 3px 4px -1px rgba(0, 0, 0, 0.1);
+      }
     }
   }
 

package/dist/elements/CopyToClipboard/index.js

@@ -1,45 +1,55 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useState } from 'react';
-import { Copy } from '../../icons/Copy/index.js';
+import { CopyIcon } from '../../icons/Copy/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Tooltip } from '../Tooltip/index.js';
+import './index.scss';
 const baseClass = 'copy-to-clipboard';
-export const CopyToClipboard = ({ defaultMessage, successMessage, value })=>{
-    const ref = useRef(null);
-    const [copied, setCopied] = useState(false);
-    const [hovered, setHovered] = useState(false);
-    const { t } = useTranslation();
-    if (value) {
-        return /*#__PURE__*/ React.createElement("button", {
-            className: baseClass,
-            onClick: ()=>{
-                if (ref && ref.current) {
-                    ref.current.select();
-                    ref.current.setSelectionRange(0, value.length + 1);
-                    document.execCommand('copy');
-                    setCopied(true);
-                }
-            },
-            onMouseEnter: ()=>{
-                setHovered(true);
-                setCopied(false);
-            },
-            onMouseLeave: ()=>{
-                setHovered(false);
-                setCopied(false);
-            },
-            type: "button"
-        }, /*#__PURE__*/ React.createElement(Copy, null), /*#__PURE__*/ React.createElement(Tooltip, {
-            delay: copied ? 0 : undefined,
-            show: hovered || copied
-        }, copied && (successMessage ?? t('general:copied')), !copied && (defaultMessage ?? t('general:copy'))), /*#__PURE__*/ React.createElement("textarea", {
-            readOnly: true,
-            ref: ref,
-            tabIndex: -1,
-            value: value
-        }));
-    }
-    return null;
+export const CopyToClipboard = ({
+  defaultMessage,
+  successMessage,
+  value
+}) => {
+  const ref = useRef(null);
+  const [copied, setCopied] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const {
+    t
+  } = useTranslation();
+  if (value) {
+    return /*#__PURE__*/_jsxs("button", {
+      className: baseClass,
+      onClick: () => {
+        if (ref && ref.current) {
+          ref.current.select();
+          ref.current.setSelectionRange(0, value.length + 1);
+          document.execCommand('copy');
+          setCopied(true);
+        }
+      },
+      onMouseEnter: () => {
+        setHovered(true);
+        setCopied(false);
+      },
+      onMouseLeave: () => {
+        setHovered(false);
+        setCopied(false);
+      },
+      type: "button",
+      children: [/*#__PURE__*/_jsx(CopyIcon, {}), /*#__PURE__*/_jsxs(Tooltip, {
+        delay: copied ? 0 : undefined,
+        show: hovered || copied,
+        children: [copied && (successMessage ?? t('general:copied')), !copied && (defaultMessage ?? t('general:copy'))]
+      }), /*#__PURE__*/_jsx("textarea", {
+        readOnly: true,
+        ref: ref,
+        tabIndex: -1,
+        value: value
+      })]
+    });
+  }
+  return null;
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/CopyToClipboard/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef, useState } from 'react'\n\nimport { Copy } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'copy-to-clipboard'\n\nexport type Props = {\n  defaultMessage?: string\n  successMessage?: string\n  value?: string\n}\n\nexport const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {\n  const ref = useRef(null)\n  const [copied, setCopied] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  if (value) {\n    return (\n      <button\n        className={baseClass}\n        onClick={() => {\n          if (ref && ref.current) {\n            ref.current.select()\n            ref.current.setSelectionRange(0, value.length + 1)\n            document.execCommand('copy')\n            setCopied(true)\n          }\n        }}\n        onMouseEnter={() => {\n          setHovered(true)\n          setCopied(false)\n        }}\n        onMouseLeave={() => {\n          setHovered(false)\n          setCopied(false)\n        }}\n        type=\"button\"\n      >\n        <Copy />\n        <Tooltip delay={copied ? 0 : undefined} show={hovered || copied}>\n          {copied && (successMessage ?? t('general:copied'))}\n          {!copied && (defaultMessage ?? t('general:copy'))}\n        </Tooltip>\n        <textarea readOnly ref={ref} tabIndex={-1} value={value} />\n      </button>\n    )\n  }\n\n  return null\n}\n"],"names":["React","useRef","useState","Copy","useTranslation","Tooltip","baseClass","CopyToClipboard","defaultMessage","successMessage","value","ref","copied","setCopied","hovered","setHovered","t","button","className","onClick","current","select","setSelectionRange","length","document","execCommand","onMouseEnter","onMouseLeave","type","delay","undefined","show","textarea","readOnly","tabIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AAE/C,SAASC,IAAI,QAAQ,4BAA2B;AAChD,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,OAAO,QAAQ,sBAAqB;AAG7C,MAAMC,YAAY;AAQlB,OAAO,MAAMC,kBAAmC,CAAC,EAAEC,cAAc,EAAEC,cAAc,EAAEC,KAAK,EAAE;IACxF,MAAMC,MAAMV,OAAO;IACnB,MAAM,CAACW,QAAQC,UAAU,GAAGX,SAAS;IACrC,MAAM,CAACY,SAASC,WAAW,GAAGb,SAAS;IACvC,MAAM,EAAEc,CAAC,EAAE,GAAGZ;IAEd,IAAIM,OAAO;QACT,qBACE,oBAACO;YACCC,WAAWZ;YACXa,SAAS;gBACP,IAAIR,OAAOA,IAAIS,OAAO,EAAE;oBACtBT,IAAIS,OAAO,CAACC,MAAM;oBAClBV,IAAIS,OAAO,CAACE,iBAAiB,CAAC,GAAGZ,MAAMa,MAAM,GAAG;oBAChDC,SAASC,WAAW,CAAC;oBACrBZ,UAAU;gBACZ;YACF;YACAa,cAAc;gBACZX,WAAW;gBACXF,UAAU;YACZ;YACAc,cAAc;gBACZZ,WAAW;gBACXF,UAAU;YACZ;YACAe,MAAK;yBAEL,oBAACzB,2BACD,oBAACE;YAAQwB,OAAOjB,SAAS,IAAIkB;YAAWC,MAAMjB,WAAWF;WACtDA,UAAWH,CAAAA,kBAAkBO,EAAE,iBAAgB,GAC/C,CAACJ,UAAWJ,CAAAA,kBAAkBQ,EAAE,eAAc,kBAEjD,oBAACgB;YAASC,UAAAA;YAAStB,KAAKA;YAAKuB,UAAU,CAAC;YAAGxB,OAAOA;;IAGxD;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"file":"index.js","names":["React","useRef","useState","CopyIcon","useTranslation","Tooltip","baseClass","CopyToClipboard","defaultMessage","successMessage","value","ref","copied","setCopied","hovered","setHovered","t","_jsxs","className","onClick","current","select","setSelectionRange","length","document","execCommand","onMouseEnter","onMouseLeave","type","_jsx","delay","undefined","show","readOnly","tabIndex"],"sources":["../../../src/elements/CopyToClipboard/index.tsx"],"sourcesContent":["'use client'\nimport React, { useRef, useState } from 'react'\n\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'copy-to-clipboard'\n\nexport type Props = {\n  defaultMessage?: string\n  successMessage?: string\n  value?: string\n}\n\nexport const CopyToClipboard: React.FC<Props> = ({ defaultMessage, successMessage, value }) => {\n  const ref = useRef(null)\n  const [copied, setCopied] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const { t } = useTranslation()\n\n  if (value) {\n    return (\n      <button\n        className={baseClass}\n        onClick={() => {\n          if (ref && ref.current) {\n            ref.current.select()\n            ref.current.setSelectionRange(0, value.length + 1)\n            document.execCommand('copy')\n            setCopied(true)\n          }\n        }}\n        onMouseEnter={() => {\n          setHovered(true)\n          setCopied(false)\n        }}\n        onMouseLeave={() => {\n          setHovered(false)\n          setCopied(false)\n        }}\n        type=\"button\"\n      >\n        <CopyIcon />\n        <Tooltip delay={copied ? 0 : undefined} show={hovered || copied}>\n          {copied && (successMessage ?? t('general:copied'))}\n          {!copied && (defaultMessage ?? t('general:copy'))}\n        </Tooltip>\n        <textarea readOnly ref={ref} tabIndex={-1} value={value} />\n      </button>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,MAAM,EAAEC,QAAQ,QAAQ;AAExC,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,MAAMC,eAAA,GAAmCA,CAAC;EAAEC,cAAc;EAAEC,cAAc;EAAEC;AAAK,CAAE;EACxF,MAAMC,GAAA,GAAMV,MAAA,CAAO;EACnB,MAAM,CAACW,MAAA,EAAQC,SAAA,CAAU,GAAGX,QAAA,CAAS;EACrC,MAAM,CAACY,OAAA,EAASC,UAAA,CAAW,GAAGb,QAAA,CAAS;EACvC,MAAM;IAAEc;EAAC,CAAE,GAAGZ,cAAA;EAEd,IAAIM,KAAA,EAAO;IACT,oBACEO,KAAA,CAAC;MACCC,SAAA,EAAWZ,SAAA;MACXa,OAAA,EAASA,CAAA;QACP,IAAIR,GAAA,IAAOA,GAAA,CAAIS,OAAO,EAAE;UACtBT,GAAA,CAAIS,OAAO,CAACC,MAAM;UAClBV,GAAA,CAAIS,OAAO,CAACE,iBAAiB,CAAC,GAAGZ,KAAA,CAAMa,MAAM,GAAG;UAChDC,QAAA,CAASC,WAAW,CAAC;UACrBZ,SAAA,CAAU;QACZ;MACF;MACAa,YAAA,EAAcA,CAAA;QACZX,UAAA,CAAW;QACXF,SAAA,CAAU;MACZ;MACAc,YAAA,EAAcA,CAAA;QACZZ,UAAA,CAAW;QACXF,SAAA,CAAU;MACZ;MACAe,IAAA,EAAK;8BAELC,IAAA,CAAC1B,QAAA,O,aACDc,KAAA,CAACZ,OAAA;QAAQyB,KAAA,EAAOlB,MAAA,GAAS,IAAImB,SAAA;QAAWC,IAAA,EAAMlB,OAAA,IAAWF,MAAA;mBACtDA,MAAA,KAAWH,cAAA,IAAkBO,CAAA,CAAE,iBAAgB,GAC/C,CAACJ,MAAA,KAAWJ,cAAA,IAAkBQ,CAAA,CAAE,eAAc;uBAEjDa,IAAA,CAAC;QAASI,QAAQ;QAACtB,GAAA,EAAKA,GAAA;QAAKuB,QAAA,EAAU,CAAC;QAAGxB,KAAA,EAAOA;;;EAGxD;EAEA,OAAO;AACT","ignoreList":[]}

package/dist/elements/DatePicker/DatePicker.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import type { Props } from './types.js';
 import './index.scss';
-declare const DateTime: React.FC<Props>;
-export default DateTime;
+declare const DatePicker: React.FC<Props>;
+export default DatePicker;
 //# sourceMappingURL=DatePicker.d.ts.map

package/dist/elements/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,4CAA4C,CAAA;AAEnD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmG7B,CAAA;AAGD,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,4CAA4C,CAAA;AAEnD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2G/B,CAAA;AAGD,eAAe,UAAU,CAAA"}

package/dist/elements/DatePicker/DatePicker.js

@@ -1,85 +1,150 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import ReactDatePickerDefaultImport, { registerLocale } from 'react-datepicker';
 const ReactDatePicker = ReactDatePickerDefaultImport.default || ReactDatePickerDefaultImport;
-import { Calendar as CalendarIcon } from '../../icons/Calendar/index.js';
-import { X as XIcon } from '../../icons/X/index.js';
+import 'react-datepicker/dist/react-datepicker.css';
+import { CalendarIcon } from '../../icons/Calendar/index.js';
+import { XIcon } from '../../icons/X/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { getFormattedLocale } from './getFormattedLocale.js';
+import './index.scss';
 const baseClass = 'date-time-picker';
-const DateTime = (props)=>{
-    const { displayFormat: customDisplayFormat, maxDate, maxTime, minDate, minTime, monthsToShow = 1, onChange: onChangeFromProps, overrides, pickerAppearance = 'default', placeholder: placeholderText, readOnly, timeFormat = 'h:mm aa', timeIntervals = 30, value } = props;
-    // Use the user's AdminUI language preference for the locale
-    const { i18n } = useTranslation();
-    const datepickerLocale = getFormattedLocale(i18n.language);
-    try {
-        registerLocale(datepickerLocale, i18n.dateFNS);
-    } catch (e) {
-        console.warn(`Could not find DatePicker locale for ${i18n.language}`);
-    }
-    let dateFormat = customDisplayFormat;
-    if (!customDisplayFormat) {
-        // when no displayFormat is provided, determine format based on the picker appearance
-        if (pickerAppearance === 'default') dateFormat = 'MM/dd/yyyy';
-        else if (pickerAppearance === 'dayAndTime') dateFormat = 'MMM d, yyy h:mm a';
-        else if (pickerAppearance === 'timeOnly') dateFormat = 'h:mm a';
-        else if (pickerAppearance === 'dayOnly') dateFormat = 'MMM dd';
-        else if (pickerAppearance === 'monthOnly') dateFormat = 'MMMM';
-    }
-    const onChange = (incomingDate)=>{
-        const newDate = incomingDate;
-        if (newDate instanceof Date && [
-            'dayOnly',
-            'default',
-            'monthOnly'
-        ].includes(pickerAppearance)) {
-            const tzOffset = incomingDate.getTimezoneOffset() / 60;
-            newDate.setHours(12 - tzOffset, 0);
+const DatePicker = props => {
+  const $ = _c(7);
+  const {
+    displayFormat: customDisplayFormat,
+    maxDate,
+    maxTime,
+    minDate,
+    minTime,
+    monthsToShow: t0,
+    onChange: onChangeFromProps,
+    overrides,
+    pickerAppearance: t1,
+    placeholder: placeholderText,
+    readOnly,
+    timeFormat: t2,
+    timeIntervals: t3,
+    value
+  } = props;
+  const monthsToShow = t0 === undefined ? 1 : t0;
+  const pickerAppearance = t1 === undefined ? "default" : t1;
+  const timeFormat = t2 === undefined ? "h:mm aa" : t2;
+  const timeIntervals = t3 === undefined ? 30 : t3;
+  const {
+    i18n
+  } = useTranslation();
+  const datepickerLocale = getFormattedLocale(i18n.language);
+  ;
+  try {
+    registerLocale(datepickerLocale, i18n.dateFNS);
+  } catch (t4) {
+    console.warn(`Could not find DatePicker locale for ${i18n.language}`);
+  }
+  let dateFormat = customDisplayFormat;
+  if (!customDisplayFormat) {
+    if (pickerAppearance === "default") {
+      dateFormat = "MM/dd/yyyy";
+    } else {
+      if (pickerAppearance === "dayAndTime") {
+        dateFormat = "MMM d, yyy h:mm a";
+      } else {
+        if (pickerAppearance === "timeOnly") {
+          dateFormat = "h:mm a";
+        } else {
+          if (pickerAppearance === "dayOnly") {
+            dateFormat = "MMM dd";
+          } else {
+            if (pickerAppearance === "monthOnly") {
+              dateFormat = "MMMM";
+            }
+          }
         }
-        if (typeof onChangeFromProps === 'function') onChangeFromProps(newDate);
-    };
-    const dateTimePickerProps = {
-        customInputRef: 'ref',
-        dateFormat,
-        disabled: readOnly,
-        maxDate,
-        maxTime,
-        minDate,
-        minTime,
-        monthsShown: Math.min(2, monthsToShow),
-        onChange,
-        placeholderText,
-        popperPlacement: 'bottom-start',
-        selected: value && new Date(value),
-        showMonthYearPicker: pickerAppearance === 'monthOnly',
-        showPopperArrow: false,
-        showTimeSelect: pickerAppearance === 'dayAndTime' || pickerAppearance === 'timeOnly',
-        timeFormat,
-        timeIntervals,
-        ...overrides
+      }
+    }
+  }
+  let t5;
+  if ($[0] !== pickerAppearance || $[1] !== onChangeFromProps) {
+    t5 = incomingDate => {
+      const newDate = incomingDate;
+      if (newDate instanceof Date && ["dayOnly", "default", "monthOnly"].includes(pickerAppearance)) {
+        const tzOffset = incomingDate.getTimezoneOffset() / 60;
+        newDate.setHours(12 - tzOffset, 0);
+      }
+      if (typeof onChangeFromProps === "function") {
+        onChangeFromProps(newDate);
+      }
     };
-    const classes = [
-        baseClass,
-        `${baseClass}__appearance--${pickerAppearance}`
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__icon-wrap`
-    }, dateTimePickerProps.selected && /*#__PURE__*/ React.createElement("button", {
+    $[0] = pickerAppearance;
+    $[1] = onChangeFromProps;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  const onChange = t5;
+  let t6;
+  if ($[3] !== value) {
+    t6 = value && new Date(value);
+    $[3] = value;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  const dateTimePickerProps = {
+    customInputRef: "ref",
+    dateFormat,
+    disabled: readOnly,
+    maxDate,
+    maxTime,
+    minDate,
+    minTime,
+    monthsShown: Math.min(2, monthsToShow),
+    onChange,
+    placeholderText,
+    popperPlacement: "bottom-start",
+    selected: t6,
+    showMonthYearPicker: pickerAppearance === "monthOnly",
+    showPopperArrow: false,
+    showTimeSelect: pickerAppearance === "dayAndTime" || pickerAppearance === "timeOnly",
+    timeFormat,
+    timeIntervals,
+    ...overrides
+  };
+  const t7 = `${baseClass}__appearance--${pickerAppearance}`;
+  let t8;
+  if ($[5] !== t7) {
+    t8 = [baseClass, t7].filter(Boolean);
+    $[5] = t7;
+    $[6] = t8;
+  } else {
+    t8 = $[6];
+  }
+  const classes = t8.join(" ");
+  return _jsxs("div", {
+    className: classes,
+    children: [_jsxs("div", {
+      className: `${baseClass}__icon-wrap`,
+      children: [dateTimePickerProps.selected && _jsx("button", {
         className: `${baseClass}__clear-button`,
-        onClick: ()=>onChange(null),
-        type: "button"
-    }, /*#__PURE__*/ React.createElement(XIcon, null)), /*#__PURE__*/ React.createElement(CalendarIcon, null)), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__input-wrapper`
-    }, /*#__PURE__*/ React.createElement(ReactDatePicker, {
+        onClick: () => onChange(null),
+        type: "button",
+        children: _jsx(XIcon, {})
+      }), _jsx(CalendarIcon, {})]
+    }), _jsx("div", {
+      className: `${baseClass}__input-wrapper`,
+      children: _jsx(ReactDatePicker, {
         ...dateTimePickerProps,
         dropdownMode: "select",
         locale: datepickerLocale,
         showMonthDropdown: true,
         showYearDropdown: true
-    })));
+      })
+    })]
+  });
 };
 // eslint-disable-next-line no-restricted-exports
-export default DateTime;
-
+export default DatePicker;
 //# sourceMappingURL=DatePicker.js.map