@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

package/dist/elements/Collapsible/index.scss

@@ -1,158 +1,160 @@
 @import '../../scss/styles.scss';
 
-.collapsible {
-  --toggle-pad-h: #{base(0.75)};
-  --toggle-pad-v: #{base(0.6)};
-
-  border-radius: $style-radius-m;
-
-  &__toggle-wrap {
-    position: relative;
-    padding: base(0.4) base(0.4) base(0.4) base(0.8);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--theme-elevation-50);
-    line-height: base(1.2);
-    gap: base(0.2);
-    border-top-right-radius: $style-radius-m;
-    border-top-left-radius: $style-radius-m;
-    width: 100%;
-
-    &:hover {
-      background: var(--theme-elevation-100);
-    }
+@layer payload-default {
+  .collapsible {
+    --toggle-pad-h: #{base(0.75)};
+    --toggle-pad-v: #{base(0.6)};
+
+    border-radius: $style-radius-m;
+
+    &__toggle-wrap {
+      position: relative;
+      padding: base(0.4) base(0.4) base(0.4) base(0.8);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: var(--theme-elevation-50);
+      line-height: base(1.2);
+      gap: base(0.2);
+      border-top-right-radius: $style-radius-m;
+      border-top-left-radius: $style-radius-m;
+      width: 100%;
+
+      &:hover {
+        background: var(--theme-elevation-100);
+      }
 
-    &:has(.collapsible__drag) {
-      padding-inline-start: base(0.4);
+      &:has(.collapsible__drag) {
+        padding-inline-start: base(0.4);
+      }
     }
-  }
 
-  &__drag {
-    display: flex;
-    opacity: 0.5;
-    top: var(--toggle-pad-v);
-    width: base(1.2);
-    height: base(1.2);
-    padding: base(0.1);
+    &__drag {
+      display: flex;
+      opacity: 0.5;
+      top: var(--toggle-pad-v);
+      width: base(1.2);
+      height: base(1.2);
+      padding: base(0.1);
+
+      icon {
+        width: 100%;
+        height: 100%;
+      }
+    }
 
-    icon {
+    &__toggle {
+      @extend %btn-reset;
+      @extend %body;
+      text-align: left;
+      cursor: pointer;
+      border-top-right-radius: $style-radius-m;
+      border-top-left-radius: $style-radius-m;
       width: 100%;
       height: 100%;
-    }
-  }
+      color: transparent;
+      position: absolute;
+      top: 0;
+      left: 0;
 
-  &__toggle {
-    @extend %btn-reset;
-    @extend %body;
-    text-align: left;
-    cursor: pointer;
-    border-top-right-radius: $style-radius-m;
-    border-top-left-radius: $style-radius-m;
-    width: 100%;
-    height: 100%;
-    color: transparent;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    span {
-      user-select: none;
+      span {
+        user-select: none;
+      }
     }
-  }
 
-  &--style-default {
-    border: 1px solid var(--theme-elevation-200);
-    &:hover {
-      border: 1px solid var(--theme-elevation-300);
-    }
+    &--style-default {
+      border: 1px solid var(--theme-elevation-200);
+      &:hover {
+        border: 1px solid var(--theme-elevation-300);
+      }
 
-    > .collapsible__toggle-wrap {
-      .row-label {
-        color: var(--theme-text);
+      > .collapsible__toggle-wrap {
+        .row-label {
+          color: var(--theme-text);
+        }
       }
     }
-  }
 
-  &--style-error {
-    border: 1px solid var(--theme-error-400);
-    > .collapsible__toggle-wrap {
-      background-color: var(--theme-error-100);
+    &--style-error {
+      border: 1px solid var(--theme-error-400);
+      > .collapsible__toggle-wrap {
+        background-color: var(--theme-error-100);
 
-      &:hover {
-        background: var(--theme-error-150);
-      }
+        &:hover {
+          background: var(--theme-error-150);
+        }
 
-      .row-label {
-        color: var(--theme-error-950);
+        .row-label {
+          color: var(--theme-error-950);
+        }
       }
     }
-  }
 
-  &__header-wrap {
-    top: 0;
-    right: base(3);
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    width: 100%;
-    overflow: hidden;
-    max-width: 100%;
-  }
+    &__header-wrap {
+      top: 0;
+      right: base(3);
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      width: 100%;
+      overflow: hidden;
+      max-width: 100%;
+    }
 
-  &__header-wrap--has-drag-handle {
-    left: base(1);
-  }
+    &__header-wrap--has-drag-handle {
+      left: base(1);
+    }
 
-  &--collapsed {
-    .collapsible__toggle-wrap {
-      border-bottom-right-radius: $style-radius-m;
-      border-bottom-left-radius: $style-radius-m;
+    &--collapsed {
+      .collapsible__toggle-wrap {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
     }
-  }
 
-  &__actions-wrap {
-    pointer-events: none;
-    display: flex;
-    gap: base(0.2);
-    margin-inline-end: base(0.2);
-  }
+    &__actions-wrap {
+      pointer-events: none;
+      display: flex;
+      gap: base(0.2);
+      margin-inline-end: base(0.2);
+    }
 
-  &__actions {
-    pointer-events: all;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: base(1.2);
-    height: base(1.2);
+    &__actions {
+      pointer-events: all;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
 
-    &.icon {
-      padding: base(0.1);
+      &.icon {
+        padding: base(0.1);
+      }
     }
-  }
 
-  &__indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: base(1.2);
-    height: base(1.2);
+    &__indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
 
-    &.icon {
-      padding: base(0.1);
+      &.icon {
+        padding: base(0.1);
+      }
     }
-  }
-
-  &__content {
-    background-color: var(--theme-elevation-0);
-    border-bottom-left-radius: $style-radius-m;
-    border-bottom-right-radius: $style-radius-m;
-    padding: var(--base);
-  }
 
-  @include small-break {
     &__content {
-      padding: var(--gutter-h);
+      background-color: var(--theme-elevation-0);
+      border-bottom-left-radius: $style-radius-m;
+      border-bottom-right-radius: $style-radius-m;
+      padding: var(--base);
+    }
+
+    @include small-break {
+      &__content {
+        padding: var(--gutter-h);
+      }
     }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAgB,MAAM,OAAO,CAAA;AAUpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmD1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAgB,MAAM,OAAO,CAAA;AAWpC,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAQD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4D1C,CAAA"}

package/dist/elements/ColumnSelector/index.js

@@ -3,6 +3,7 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useId } from 'react';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
 import { PlusIcon } from '../../icons/Plus/index.js';
 import { XIcon } from '../../icons/X/index.js';
 import { useEditDepth } from '../../providers/EditDepth/index.js';
@@ -11,9 +12,9 @@ import { Pill } from '../Pill/index.js';
 import { useTableColumns } from '../TableColumns/index.js';
 import './index.scss';
 const baseClass = 'column-selector';
-const filterColumnFields = fields => {
-  return fields.filter(field => {
-    return !field.cellProps?.field?.admin?.disableListColumn;
+const filterColumnFields = columns => {
+  return columns.filter(c => {
+    return !c?.field?.admin?.disableListColumn;
   });
 };
 export const ColumnSelector = t0 => {
@@ -58,11 +59,11 @@ export const ColumnSelector = t0 => {
           return null;
         }
         const {
-          Label,
           accessor,
-          active
+          active,
+          field
         } = col_0;
-        if (col_0.accessor === "_select") {
+        if (col_0.accessor === "_select" || !field || col_0.CustomLabel === null || col_0.CustomLabel === undefined && !("label" in field)) {
           return null;
         }
         return _jsx(Pill, {
@@ -75,8 +76,11 @@ export const ColumnSelector = t0 => {
           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}`);
+          children: col_0.CustomLabel ?? _jsx(FieldLabel, {
+            label: "label" in field && field.label,
+            unstyled: true
+          })
+        }, `${collectionSlug}-${field && "name" in field ? field?.name : i}${editDepth ? `-${editDepth}-` : ""}${uuid}`);
       };
       $[9] = toggleColumn;
       $[10] = collectionSlug;

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

@@ -1 +1 @@
-{"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","Label","accessor","active","_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) 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 ? <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":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useId","FieldLabel","PlusIcon","XIcon","useEditDepth","DraggableSortable","Pill","useTableColumns","baseClass","filterColumnFields","columns","filter","field","admin","disableListColumn","ColumnSelector","t0","$","collectionSlug","moveColumn","toggleColumn","uuid","editDepth","t1","filteredColumns","t2","t3","moveFromIndex","moveToIndex","fromIndex","toIndex","col_0","i","col","accessor","active","CustomLabel","undefined","_jsx","alignIcon","className","Boolean","join","draggable","icon","id","onClick","children","label","unstyled","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 { FieldLabel } from '../../fields/FieldLabel/index.js'\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 = (columns: Column[]): Column[] => {\n  return columns.filter((c) => {\n    return !c?.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        void 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 { accessor, active, field } = col\n\n        if (\n          col.accessor === '_select' ||\n          !field ||\n          col.CustomLabel === null ||\n          (col.CustomLabel === undefined && !('label' in field))\n        ) {\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}-${field && 'name' in field ? field?.name : i}${editDepth ? `-${editDepth}-` : ''}${uuid}`}\n            onClick={() => {\n              void toggleColumn(accessor)\n            }}\n          >\n            {col.CustomLabel ?? <FieldLabel label={'label' in field && field.label} unstyled />}\n          </Pill>\n        )\n      })}\n    </DraggableSortable>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ColumnSelector/index.scss

@@ -1,46 +1,48 @@
 @import '../../scss/styles.scss';
 
-.column-selector {
-  display: flex;
-  flex-wrap: wrap;
-  background: var(--theme-elevation-50);
-  padding: base(1) base(1) base(0.5);
-
-  &__column {
-    margin-right: base(0.5);
-    margin-bottom: base(0.5);
-    background-color: transparent;
-    box-shadow: 0 0 0 1px var(--theme-elevation-150);
-
-    &.column-selector__column {
-      cursor: pointer;
-
-      &:hover {
-        background-color: var(--theme-elevation-100);
+@layer payload-default {
+  .column-selector {
+    display: flex;
+    flex-wrap: wrap;
+    background: var(--theme-elevation-50);
+    padding: base(1) base(1) base(0.5);
+
+    &__column {
+      margin-right: base(0.5);
+      margin-bottom: base(0.5);
+      background-color: transparent;
+      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-0);
-      box-shadow:
-        0 0px 1px 1px var(--theme-elevation-150),
-        0 2px 4px -2px rgba(0, 0, 0, 0.1);
 
-      &:hover {
+      &.column-selector__column--active {
         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);
+          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);
+        }
       }
     }
-  }
 
-  // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
-  .pill__icon {
-    padding: 0;
-  }
+    // TODO: delete this once all icons have been migrated to viewbox edge-to-edge
+    .pill__icon {
+      padding: 0;
+    }
 
-  @include small-break {
-    padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+    @include small-break {
+      padding: calc(var(--base) / 2) calc(var(--base) / 2) 0;
+    }
   }
 }

package/dist/elements/CopyToClipboard/index.scss

@@ -1,26 +1,28 @@
 @import '../../scss/styles.scss';
 
-.copy-to-clipboard {
-  @extend %btn-reset;
-  position: relative;
-  cursor: pointer;
-  vertical-align: middle;
-  border-radius: 100%;
+@layer payload-default {
+  .copy-to-clipboard {
+    @extend %btn-reset;
+    position: relative;
+    cursor: pointer;
+    vertical-align: middle;
+    border-radius: 100%;
 
-  textarea {
-    position: absolute;
-    opacity: 0;
-    z-index: -1;
-    height: 0px;
-    width: 0px;
-  }
+    textarea {
+      position: absolute;
+      opacity: 0;
+      z-index: -1;
+      height: 0px;
+      width: 0px;
+    }
 
-  &:focus,
-  &:active {
-    outline: none;
-  }
+    &:focus,
+    &:active {
+      outline: none;
+    }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
 import type { Props } from './types.js';
+import './library.scss';
 import './index.scss';
 declare const DatePicker: React.FC<Props>;
 export default DatePicker;

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":"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,CAmG/B,CAAA;AAGD,eAAe,UAAU,CAAA"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAMvC,OAAO,gBAAgB,CAAA;AACvB,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

@@ -5,11 +5,11 @@ 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 '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 './library.scss';
 import './index.scss';
 const baseClass = 'date-time-picker';
 const DatePicker = props => {

package/dist/elements/DatePicker/DatePicker.js.map

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

package/dist/elements/DatePicker/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Suspense, lazy } from 'react';
+import React, { lazy, Suspense } from 'react';
 import { ShimmerEffect } from '../ShimmerEffect/index.js';
 const DatePicker = /*#__PURE__*/lazy(() => import('./DatePicker.js'));
 export const DatePickerField = props => /*#__PURE__*/_jsx(Suspense, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Suspense","lazy","ShimmerEffect","DatePicker","DatePickerField","props","_jsx","fallback","height"],"sources":["../../../src/elements/DatePicker/index.tsx"],"sourcesContent":["'use client'\nimport React, { Suspense, lazy } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nconst DatePicker = lazy(() => import('./DatePicker.js'))\n\nexport const DatePickerField: React.FC<Props> = (props) => (\n  <Suspense fallback={<ShimmerEffect height={50} />}>\n    <DatePicker {...props} />\n  </Suspense>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,QAAQ,EAAEC,IAAI,QAAQ;AAItC,SAASC,aAAa,QAAQ;AAE9B,MAAMC,UAAA,gBAAaF,IAAA,CAAK,MAAM,MAAM,CAAC;AAErC,OAAO,MAAMG,eAAA,GAAoCC,KAAA,iBAC/CC,IAAA,CAACN,QAAA;EAASO,QAAA,eAAUD,IAAA,CAACJ,aAAA;IAAcM,MAAA,EAAQ;;YACzC,aAAAF,IAAA,CAACH,UAAA;IAAY,GAAGE","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","lazy","Suspense","ShimmerEffect","DatePicker","DatePickerField","props","_jsx","fallback","height"],"sources":["../../../src/elements/DatePicker/index.tsx"],"sourcesContent":["'use client'\nimport React, { lazy, Suspense } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\n\nconst DatePicker = lazy(() => import('./DatePicker.js'))\n\nexport const DatePickerField: React.FC<Props> = (props) => (\n  <Suspense fallback={<ShimmerEffect height={50} />}>\n    <DatePicker {...props} />\n  </Suspense>\n)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,IAAI,EAAEC,QAAQ,QAAQ;AAItC,SAASC,aAAa,QAAQ;AAE9B,MAAMC,UAAA,gBAAaH,IAAA,CAAK,MAAM,MAAM,CAAC;AAErC,OAAO,MAAMI,eAAA,GAAoCC,KAAA,iBAC/CC,IAAA,CAACL,QAAA;EAASM,QAAA,eAAUD,IAAA,CAACJ,aAAA;IAAcM,MAAA,EAAQ;;YACzC,aAAAF,IAAA,CAACH,UAAA;IAAY,GAAGE","ignoreList":[]}