@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.40de3ec

package/dist/elements/TableSection/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'table-section';
+export function TableSectionRoot({
+  children,
+  className,
+  'data-group-id': dataGroupId
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, className].filter(Boolean).join(' '),
+    "data-group-id": dataGroupId,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__divider`
+    }), children]
+  });
+}
+export function TableSectionHeader({
+  children,
+  className,
+  heading
+}) {
+  return /*#__PURE__*/_jsx("header", {
+    className: [`${baseClass}__header`, className].filter(Boolean).join(' '),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header-inner`,
+      children: [heading && /*#__PURE__*/_jsx("h4", {
+        className: `${baseClass}__heading`,
+        children: heading
+      }), children]
+    })
+  });
+}
+export function TableSectionContent({
+  children,
+  className
+}) {
+  return /*#__PURE__*/_jsx("div", {
+    className: [`${baseClass}__content`, className].filter(Boolean).join(' '),
+    children: children
+  });
+}
+// Compound component for client usage
+export const TableSection = Object.assign(TableSectionRoot, {
+  Content: TableSectionContent,
+  Header: TableSectionHeader
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","TableSectionRoot","children","className","dataGroupId","_jsxs","filter","Boolean","join","_jsx","TableSectionHeader","heading","TableSectionContent","TableSection","Object","assign","Content","Header"],"sources":["../../../src/elements/TableSection/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'table-section'\n\nexport type TableSectionProps = {\n  children: React.ReactNode\n  className?: string\n  'data-group-id'?: string\n}\n\nexport type TableSectionHeaderProps = {\n  children?: React.ReactNode\n  className?: string\n  heading?: string\n}\n\nexport type TableSectionContentProps = {\n  children: React.ReactNode\n  className?: string\n}\n\nexport function TableSectionRoot({\n  children,\n  className,\n  'data-group-id': dataGroupId,\n}: TableSectionProps) {\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} data-group-id={dataGroupId}>\n      <div className={`${baseClass}__divider`} />\n      {children}\n    </div>\n  )\n}\n\nexport function TableSectionHeader({ children, className, heading }: TableSectionHeaderProps) {\n  return (\n    <header className={[`${baseClass}__header`, className].filter(Boolean).join(' ')}>\n      <div className={`${baseClass}__header-inner`}>\n        {heading && <h4 className={`${baseClass}__heading`}>{heading}</h4>}\n        {children}\n      </div>\n    </header>\n  )\n}\n\nexport function TableSectionContent({ children, className }: TableSectionContentProps) {\n  return (\n    <div className={[`${baseClass}__content`, className].filter(Boolean).join(' ')}>{children}</div>\n  )\n}\n\n// Compound component for client usage\nexport const TableSection = Object.assign(TableSectionRoot, {\n  Content: TableSectionContent,\n  Header: TableSectionHeader,\n})\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAmBlB,OAAO,SAASC,iBAAiB;EAC/BC,QAAQ;EACRC,SAAS;EACT,iBAAiBC;AAAW,CACV;EAClB,oBACEC,KAAA,CAAC;IAAIF,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IAAM,iBAAeJ,WAAA;4BAC/EK,IAAA,CAAC;MAAIN,SAAA,EAAW,GAAGH,SAAA;QAClBE,QAAA;;AAGP;AAEA,OAAO,SAASQ,mBAAmB;EAAER,QAAQ;EAAEC,SAAS;EAAEQ;AAAO,CAA2B;EAC1F,oBACEF,IAAA,CAAC;IAAON,SAAA,EAAW,CAAC,GAAGH,SAAA,UAAmB,EAAEG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAC1E,aAAAH,KAAA,CAAC;MAAIF,SAAA,EAAW,GAAGH,SAAA,gBAAyB;iBACzCW,OAAA,iBAAWF,IAAA,CAAC;QAAGN,SAAA,EAAW,GAAGH,SAAA,WAAoB;kBAAGW;UACpDT,QAAA;;;AAIT;AAEA,OAAO,SAASU,oBAAoB;EAAEV,QAAQ;EAAEC;AAAS,CAA4B;EACnF,oBACEM,IAAA,CAAC;IAAIN,SAAA,EAAW,CAAC,GAAGH,SAAA,WAAoB,EAAEG,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;cAAON;;AAErF;AAEA;AACA,OAAO,MAAMW,YAAA,GAAeC,MAAA,CAAOC,MAAM,CAACd,gBAAA,EAAkB;EAC1De,OAAA,EAASJ,mBAAA;EACTK,MAAA,EAAQP;AACV","ignoreList":[]}

package/dist/elements/Thumbnail/createThumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,SAAU,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}
+{"version":3,"file":"createThumbnail.d.ts","sourceRoot":"","sources":["../../../src/elements/Thumbnail/createThumbnail.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAoD1D,CAAA"}

package/dist/elements/ThumbnailCard/index.css

@@ -1,10 +1,12 @@
 @layer payload-default {
   .thumbnail-card {
+    --thumbnail-card-size: 106px;
+
     display: flex;
     flex-direction: column;
     gap: var(--spacer-2);
     align-items: flex-start;
-    width: 100%;
+    max-width: var(--thumbnail-card-size);
     background: transparent;
     border: 0;
     padding: 0;
@@ -13,6 +15,10 @@
 
   .thumbnail-card--has-on-click {
     cursor: pointer;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   .thumbnail-card--align-label-center {
@@ -23,26 +29,48 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    min-width: var(--thumbnail-card-size);
     width: 100%;
     aspect-ratio: 1 / 1;
     background: var(--color-bg-secondary);
     border-radius: var(--radius-medium);
     overflow: hidden;
-    border: 2px solid transparent;
-    transition: border-color 100ms ease;
+    outline: var(--stroke-width-small) solid transparent;
+    outline-offset: calc(var(--stroke-width-small) * -1);
+  }
+
+  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail {
+    outline-color: var(--color-border);
   }
 
-  .thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail,
   .thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
-    border-color: var(--color-border);
+    outline-width: var(--stroke-width-medium);
+    outline-offset: calc(var(--stroke-width-medium) * -1);
+    outline-color: var(--color-border-selected);
+  }
+
+  .thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
+    outline-color: var(--color-bg-secondary-pressed);
   }
 
   .thumbnail-card--selected .thumbnail-card__thumbnail {
-    border-color: var(--color-border-selected);
+    outline-width: var(--stroke-width-medium);
+    outline-offset: calc(var(--stroke-width-medium) * -1);
+    outline-color: var(--color-border-selected);
+  }
+
+  .thumbnail-card--selected.thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail,
+  .thumbnail-card--selected.thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
+    outline-color: var(--accessibility-focus-color);
+  }
+
+  .thumbnail-card--selected.thumbnail-card--has-on-click:active .thumbnail-card__thumbnail {
+    outline-color: var(--accessibility-focus-color);
   }
 
   .thumbnail-card__label {
     min-width: 100%;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -53,6 +81,5 @@
     font-style: normal;
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
-    letter-spacing: 0.055px;
   }
 }

package/dist/elements/TimezonePicker/index.css

@@ -0,0 +1,215 @@
+@layer payload-default {
+  .timezone-picker-wrapper {
+    display: flex;
+    gap: var(--spacer-1);
+    margin-top: var(--spacer-2);
+    align-items: center;
+    position: relative;
+
+    --field-min-height: var(--text-body-medium-line-height);
+
+    .shimmer-effect {
+      max-width: calc(2 * var(--spacer-4));
+    }
+
+    .timezone-picker__label {
+      color: var(--color-text-secondary);
+      flex-shrink: 0;
+      font-family: var(--text-body-medium-font-family);
+      font-size: var(--text-body-medium-font-size);
+      font-weight: var(--text-body-medium-font-weight);
+      line-height: var(--text-body-medium-line-height);
+      letter-spacing: var(--text-body-medium-letter-spacing);
+    }
+
+    .timezone-picker__required {
+      color: var(--color-text-danger);
+      margin-left: var(--spacer-1);
+    }
+
+    .timezone-picker.react-select {
+      display: inline-flex;
+      position: static;
+
+      .rs__option--is-focused,
+      .rs__option--is-selected {
+        /* Colors handled by inline styles via react-select styles prop */
+      }
+
+      .rs__value-container {
+        padding: 0;
+      }
+
+      .rs__control.rs__control {
+        display: inline-flex;
+        align-items: center;
+        background: none;
+        border: none;
+        padding: 0;
+        padding-left: var(--spacer-1);
+        min-height: auto !important;
+        position: relative;
+        box-shadow: unset;
+        border-radius: var(--button-radius);
+        gap: 0;
+        flex-wrap: nowrap;
+
+        &:hover {
+          cursor: pointer;
+          box-shadow: unset;
+          background: var(--color-bg-secondary);
+        }
+
+        &:active {
+          background: var(--color-bg-secondary-pressed);
+        }
+
+        &.rs__control--is-focused {
+          box-shadow: 0 0 0 1px var(--accessibility-focus-color);
+        }
+
+        &.rs__control--menu-is-open::before {
+          display: block;
+        }
+      }
+
+      .rs__input-container {
+        margin: 0;
+        padding: 0;
+      }
+
+      .rs__input {
+        caret-color: transparent;
+      }
+
+      .rs__indicators {
+        position: static;
+        display: flex;
+        align-items: center;
+        min-height: auto;
+        margin-inline-start: 0;
+        gap: 0;
+        flex-shrink: 0;
+      }
+
+      .rs__single-value {
+        color: var(--color-text);
+        font-family: var(--text-body-medium-font-family);
+        font-size: var(--text-body-medium-font-size);
+        font-weight: var(--text-body-medium-font-weight);
+        line-height: var(--text-body-medium-line-height);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .rs__placeholder {
+        color: var(--color-text-secondary);
+        font-family: var(--text-body-medium-font-family);
+        font-size: var(--text-body-medium-font-size);
+        font-weight: var(--text-body-medium-font-weight);
+        line-height: var(--text-body-medium-line-height);
+      }
+
+      .timezone-picker__dropdown-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        background: none;
+        border: none;
+        cursor: pointer;
+        border-radius: var(--button-radius);
+        color: var(--color-text-secondary);
+
+        &:focus-visible {
+          outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+          outline-offset: calc(-1 * var(--stroke-width-small));
+        }
+      }
+
+      .timezone-picker__clear-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-inline: calc(-1 * var(--stroke-width-small));
+        cursor: pointer;
+        margin-left: calc(var(--spacer-1) / 2);
+        height: var(--spacer-3);
+        overflow: visible;
+        border-radius: var(--button-radius);
+
+        &:focus-visible {
+          outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
+        }
+      }
+    }
+  }
+
+  .timezone-picker__menu {
+    border-radius: var(--radius-large);
+    background: var(--color-bg-menu);
+    color: var(--color-text);
+    padding-top: var(--spacer-2);
+    min-width: 280px;
+
+    .rs__option {
+      padding: var(--spacer-1) var(--spacer-2);
+      border-radius: var(--button-radius);
+      cursor: pointer;
+    }
+
+    .timezone-picker__option-check {
+      opacity: 0;
+      flex-shrink: 0;
+    }
+
+    .timezone-picker__option-label {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .rs__option--is-focused {
+      background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+      color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
+    }
+
+    .rs__option--is-selected {
+      background-color: transparent;
+      color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
+
+      .timezone-picker__option-check {
+        opacity: 1;
+      }
+    }
+
+    .rs__option--is-selected.rs__option--is-focused {
+      background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+      color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
+    }
+  }
+
+  .timezone-picker__menu-list {
+    max-height: calc(var(--spacer-6) * 5);
+    padding-inline: var(--spacer-2);
+    padding-bottom: var(--spacer-2);
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--color-text) 40%, transparent) transparent;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: color-mix(in srgb, var(--color-text) 40%, transparent);
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
+}

package/dist/elements/TimezonePicker/index.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
 import type { Props } from './types.js';
-import './index.scss';
+import './index.css';
 export declare const TimezonePicker: React.FC<Props>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAGvC,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+C1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/TimezonePicker/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAQvC,OAAO,aAAa,CAAA;AAgEpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuE1C,CAAA"}

package/dist/elements/TimezonePicker/index.js

@@ -2,11 +2,76 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { FieldLabel } from '../../fields/FieldLabel/index.js';
-import './index.scss';
+import { components as rsComponents } from 'react-select';
+import { CheckIcon } from '../../icons/Check/index.js';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { CircledXIcon } from '../../icons/CircledX/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { ReactSelect } from '../ReactSelect/index.js';
 import { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js';
+import './index.css';
+const SmallDropdownIndicator = props => {
+  const {
+    innerProps: {
+      ref,
+      ...restInnerProps
+    }
+  } = props;
+  return /*#__PURE__*/_jsx("button", {
+    className: "timezone-picker__dropdown-indicator",
+    ref: ref,
+    ...restInnerProps,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        e.key = ' ';
+      }
+    },
+    type: "button",
+    children: /*#__PURE__*/_jsx(ChevronIcon, {
+      size: 16
+    })
+  });
+};
+const SmallClearIndicator = props => {
+  const {
+    clearValue,
+    innerProps: {
+      ref,
+      ...restInnerProps
+    }
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: "timezone-picker__clear-indicator",
+    ref: typeof ref === 'string' ? null : ref,
+    ...restInnerProps,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        clearValue();
+        e.stopPropagation();
+      }
+    },
+    role: "button",
+    tabIndex: 0,
+    children: /*#__PURE__*/_jsx(CircledXIcon, {
+      size: 24
+    })
+  });
+};
+const TimezoneOption = props => {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/_jsxs(rsComponents.Option, {
+    ...props,
+    children: [/*#__PURE__*/_jsx(CheckIcon, {
+      className: "timezone-picker__option-check",
+      size: 16
+    }), /*#__PURE__*/_jsx("span", {
+      className: "timezone-picker__option-label",
+      children: children
+    })]
+  });
+};
 export const TimezonePicker = props => {
   const {
     id,
@@ -29,13 +94,26 @@ export const TimezonePicker = props => {
   const readOnly = Boolean(readOnlyFromProps) || options.length === 1;
   return /*#__PURE__*/_jsxs("div", {
     className: "timezone-picker-wrapper",
-    children: [/*#__PURE__*/_jsx(FieldLabel, {
-      htmlFor: id,
-      label: `${t('general:timezone')} ${required ? '*' : ''}`,
-      required: required,
-      unstyled: true
+    children: [/*#__PURE__*/_jsxs("span", {
+      className: "timezone-picker__label",
+      children: [t('general:timezone'), required && /*#__PURE__*/_jsx("span", {
+        className: "timezone-picker__required",
+        children: "*"
+      })]
     }), /*#__PURE__*/_jsx(ReactSelect, {
       className: "timezone-picker",
+      classNames: {
+        menu: () => 'timezone-picker__menu',
+        menuList: () => 'timezone-picker__menu-list'
+      },
+      components: {
+        ClearIndicator: SmallClearIndicator,
+        DropdownIndicator: SmallDropdownIndicator,
+        Option: TimezoneOption
+      },
+      customProps: {
+        menuPortalTheme: 'dark'
+      },
       disabled: readOnly,
       inputId: id,
       isClearable: !required,
@@ -46,6 +124,20 @@ export const TimezonePicker = props => {
         }
       },
       options: options,
+      placeholder: t('general:none'),
+      styles: {
+        control: base => ({
+          ...base,
+          flexWrap: 'nowrap'
+        }),
+        option: base_0 => ({
+          ...base_0,
+          alignItems: 'center',
+          display: 'flex',
+          gap: 'var(--spacer-1)',
+          minWidth: 0
+        })
+      },
       value: selectedTimezone
     })]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useMemo","FieldLabel","useTranslation","ReactSelect","formatOptions","TimezonePicker","props","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","_jsxs","className","_jsx","htmlFor","label","unstyled","disabled","inputId","isClearable","isCreatable","val"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\n\nimport { useMemo } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport './index.scss'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <FieldLabel\n        htmlFor={id}\n        label={`${t('general:timezone')} ${required ? '*' : ''}`}\n        required={required}\n        unstyled\n      />\n      <ReactSelect\n        className=\"timezone-picker\"\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAKA,SAASA,OAAO,QAAQ;AAIxB,SAASC,UAAU,QAAQ;AAC3B,OAAO;AACP,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,SAASC,aAAa,QAAQ;AAE9B,OAAO,MAAMC,cAAA,GAAmCC,KAAA;EAC9C,MAAM;IACJC,EAAE;IACFC,QAAA,EAAUC,iBAAiB;IAC3BC,OAAA,EAASC,gBAAgB;IACzBC,QAAA,EAAUC,iBAAiB;IAC3BC,QAAQ;IACRC,gBAAA,EAAkBC;EAAyB,CAC5C,GAAGV,KAAA;EAEJ,MAAM;IAAEW;EAAC,CAAE,GAAGf,cAAA;EAEd,MAAMQ,OAAA,GAAUN,aAAA,CAAcO,gBAAA;EAE9B,MAAMI,gBAAA,GAAmBf,OAAA,CAAQ;IAC/B,OAAOU,OAAA,CAAQQ,IAAI,CAAED,GAAA;MACnB,MAAME,KAAA,GAAQ,OAAOF,GAAA,KAAM,WAAWA,GAAA,GAAIA,GAAA,CAAEE,KAAK;MACjD,OAAOA,KAAA,KAAUH,yBAAA;IACnB;EACF,GAAG,CAACN,OAAA,EAASM,yBAAA,CAA0B;EAEvC,MAAMJ,QAAA,GAAWQ,OAAA,CAAQP,iBAAA,KAAsBH,OAAA,CAAQW,MAAM,KAAK;EAElE,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAU;4BACbC,IAAA,CAACvB,UAAA;MACCwB,OAAA,EAASlB,EAAA;MACTmB,KAAA,EAAO,GAAGT,CAAA,CAAE,uBAAuBH,QAAA,GAAW,MAAM,IAAI;MACxDA,QAAA,EAAUA,QAAA;MACVa,QAAQ;qBAEVH,IAAA,CAACrB,WAAA;MACCoB,SAAA,EAAU;MACVK,QAAA,EAAUhB,QAAA;MACViB,OAAA,EAAStB,EAAA;MACTuB,WAAA,EAAa,CAAChB,QAAA;MACdiB,WAAA,EAAa;MACbvB,QAAA,EAAWwB,GAAA;QACT,IAAIvB,iBAAA,EAAmB;UACrBA,iBAAA,CAAkBuB,GAAA,EAAKb,KAAA,IAAS;QAClC;MACF;MACAT,OAAA,EAASA,OAAA;MACTS,KAAA,EAAOJ;;;AAIf","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useMemo","components","rsComponents","CheckIcon","ChevronIcon","CircledXIcon","useTranslation","ReactSelect","formatOptions","SmallDropdownIndicator","props","innerProps","ref","restInnerProps","_jsx","className","onKeyDown","e","key","type","size","SmallClearIndicator","clearValue","stopPropagation","role","tabIndex","TimezoneOption","children","_jsxs","Option","TimezonePicker","id","onChange","onChangeFromProps","options","optionsFromProps","readOnly","readOnlyFromProps","required","selectedTimezone","selectedTimezoneFromProps","t","find","value","Boolean","length","classNames","menu","menuList","ClearIndicator","DropdownIndicator","customProps","menuPortalTheme","disabled","inputId","isClearable","isCreatable","val","placeholder","styles","control","base","flexWrap","option","alignItems","display","gap","minWidth"],"sources":["../../../src/elements/TimezonePicker/index.tsx"],"sourcesContent":["'use client'\n\nimport type { OptionObject } from 'payload'\nimport type React from 'react'\nimport type { JSX } from 'react'\nimport type {\n  ClearIndicatorProps,\n  DropdownIndicatorProps,\n  OptionProps,\n  StylesConfig,\n} from 'react-select'\n\nimport { useMemo } from 'react'\nimport { components as rsComponents } from 'react-select'\n\nimport type { Option as OptionType } from '../ReactSelect/types.js'\nimport type { Props } from './types.js'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CircledXIcon } from '../../icons/CircledX/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { formatOptions } from '../WhereBuilder/Condition/Select/formatOptions.js'\nimport './index.css'\n\nconst SmallDropdownIndicator: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & DropdownIndicatorProps<OptionType, true>\n> = (props) => {\n  const {\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <button\n      className=\"timezone-picker__dropdown-indicator\"\n      ref={ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.key = ' '\n        }\n      }}\n      type=\"button\"\n    >\n      <ChevronIcon size={16} />\n    </button>\n  )\n}\n\nconst SmallClearIndicator: React.FC<ClearIndicatorProps<OptionType, true>> = (props) => {\n  const {\n    clearValue,\n    innerProps: { ref, ...restInnerProps },\n  } = props\n\n  return (\n    <div\n      className=\"timezone-picker__clear-indicator\"\n      ref={typeof ref === 'string' ? null : ref}\n      {...restInnerProps}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          clearValue()\n          e.stopPropagation()\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <CircledXIcon size={24} />\n    </div>\n  )\n}\n\nconst TimezoneOption: React.FC<OptionProps<OptionType, false>> = (props) => {\n  const { children } = props\n\n  return (\n    <rsComponents.Option {...props}>\n      <CheckIcon className=\"timezone-picker__option-check\" size={16} />\n      <span className=\"timezone-picker__option-label\">{children}</span>\n    </rsComponents.Option>\n  )\n}\n\nexport const TimezonePicker: React.FC<Props> = (props) => {\n  const {\n    id,\n    onChange: onChangeFromProps,\n    options: optionsFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    selectedTimezone: selectedTimezoneFromProps,\n  } = props\n\n  const { t } = useTranslation()\n\n  const options = formatOptions(optionsFromProps)\n\n  const selectedTimezone = useMemo(() => {\n    return options.find((t) => {\n      const value = typeof t === 'string' ? t : t.value\n      return value === selectedTimezoneFromProps\n    })\n  }, [options, selectedTimezoneFromProps])\n\n  const readOnly = Boolean(readOnlyFromProps) || options.length === 1\n\n  return (\n    <div className=\"timezone-picker-wrapper\">\n      <span className=\"timezone-picker__label\">\n        {t('general:timezone')}\n        {required && <span className=\"timezone-picker__required\">*</span>}\n      </span>\n      <ReactSelect\n        className=\"timezone-picker\"\n        classNames={{\n          menu: () => 'timezone-picker__menu',\n          menuList: () => 'timezone-picker__menu-list',\n        }}\n        components={{\n          ClearIndicator: SmallClearIndicator,\n          DropdownIndicator: SmallDropdownIndicator,\n          Option: TimezoneOption,\n        }}\n        customProps={{ menuPortalTheme: 'dark' }}\n        disabled={readOnly}\n        inputId={id}\n        isClearable={!required}\n        isCreatable={false}\n        onChange={(val: OptionObject) => {\n          if (onChangeFromProps) {\n            onChangeFromProps(val?.value || '')\n          }\n        }}\n        options={options}\n        placeholder={t('general:none')}\n        styles={\n          {\n            control: (base) => ({\n              ...base,\n              flexWrap: 'nowrap',\n            }),\n            option: (base) => ({\n              ...base,\n              alignItems: 'center',\n              display: 'flex',\n              gap: 'var(--spacer-1)',\n              minWidth: 0,\n            }),\n          } as StylesConfig<OptionType>\n        }\n        value={selectedTimezone}\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}