payload 1.3.0 → 1.3.1

package/dist/admin/components/elements/ReactSelect/MultiValueLabel/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { components as SelectComponents } from 'react-select';
+import './index.scss';
+const baseClass = 'multi-value-label';
+export const MultiValueLabel = (props) => {
+    const { selectProps: { draggableProps, }, } = props;
+    return (React.createElement("div", { className: baseClass },
+        React.createElement(SelectComponents.MultiValueLabel, { ...props, innerProps: {
+                className: `${baseClass}__text`,
+                ...draggableProps || {},
+            } })));
+};

package/dist/admin/components/elements/ReactSelect/MultiValueLabel/index.scss

@@ -0,0 +1,15 @@
+@import '../../../../scss/styles.scss';
+
+.multi-value-label {
+  @extend %small;
+  display: flex;
+  align-items: center;
+  padding: 0 base(.125) 0 base(.25);
+  max-width: 150px;
+  color: currentColor;
+
+  &__text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}

package/dist/admin/components/elements/ReactSelect/MultiValueRemove/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
+import { Option as OptionType } from '../types';
+import './index.scss';
+export declare const MultiValueRemove: React.FC<MultiValueRemoveProps<OptionType>>;

package/dist/admin/components/elements/ReactSelect/MultiValueRemove/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import X from '../../../icons/X';
+import Tooltip from '../../Tooltip';
+import './index.scss';
+const baseClass = 'multi-value-remove';
+export const MultiValueRemove = (props) => {
+    const { innerProps, } = props;
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    const { t } = useTranslation('general');
+    return (React.createElement("button", { ...innerProps, type: "button", className: baseClass, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onClick: (e) => {
+            setShowTooltip(false);
+            innerProps.onClick(e);
+        }, "aria-label": t('remove') },
+        React.createElement(Tooltip, { className: `${baseClass}__tooltip`, show: showTooltip }, t('remove')),
+        React.createElement(X, { className: `${baseClass}__icon` })));
+};

package/dist/admin/components/elements/ReactSelect/MultiValueRemove/index.scss

@@ -0,0 +1,24 @@
+@import '../../../../scss/styles.scss';
+
+.multi-value-remove {
+  cursor: pointer;
+  width: base(.75);
+  height: base(.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  &:hover {
+    color: var(--theme-elevation-800);
+    background: var(--theme-error-150);
+  }
+
+  &__icon {
+    width: 100%;
+    height: 100%;
+  }
+}

package/dist/admin/components/elements/ReactSelect/ValueContainer/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ValueContainerProps } from 'react-select';
+import { Option } from '../types';
+import './index.scss';
+export declare const ValueContainer: React.FC<ValueContainerProps<Option, any>>;

package/dist/admin/components/elements/ReactSelect/ValueContainer/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { components as SelectComponents } from 'react-select';
+import './index.scss';
+const baseClass = 'value-container';
+export const ValueContainer = (props) => {
+    const { selectProps, } = props;
+    return (React.createElement("div", { ref: selectProps.selectProps.droppableRef, className: baseClass },
+        React.createElement(SelectComponents.ValueContainer, { ...props })));
+};

package/dist/admin/components/elements/ReactSelect/ValueContainer/index.scss

@@ -0,0 +1,33 @@
+@import '../../../../scss/styles.scss';
+
+.value-container {
+  flex-grow: 1;
+
+  .rs__value-container {
+    padding: base(.25) 0;
+    min-height: base(1.5);
+    overflow: visible;
+
+    > * {
+      margin: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &--is-multi {
+      margin-left: - base(0.25);
+      width: calc(100% + base(0.5));
+      padding-top: base(0.25);
+      padding-bottom: base(0.25);
+      padding-left: base(0.25);
+
+      .rs__multi-value {
+        margin: calc(#{base(.125)} - #{$style-stroke-width-s * 2});
+      }
+
+      &.rs__value-container--has-value {
+        padding-left: 0;
+      }
+    }
+  }
+}

package/dist/admin/components/elements/ReactSelect/index.js

@@ -1,60 +1,74 @@
-import React, { useCallback } from 'react';
-import Select, { components, } from 'react-select';
-import { SortableContainer, SortableElement, SortableHandle, } from 'react-sortable-hoc';
+import React, { useCallback, useId } from 'react';
+import { useDroppable, DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import Select from 'react-select';
 import { useTranslation } from 'react-i18next';
-import { arrayMove } from '../../../../utilities/arrayMove';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, } from '@dnd-kit/sortable';
 import Chevron from '../../icons/Chevron';
 import { getTranslation } from '../../../../utilities/getTranslation';
+import { MultiValueLabel } from './MultiValueLabel';
+import { MultiValue } from './MultiValue';
+import { SingleValue } from '../../forms/field-types/Relationship/select-components/SingleValue';
+import { ValueContainer } from './ValueContainer';
+import { ClearIndicator } from './ClearIndicator';
+import { MultiValueRemove } from './MultiValueRemove';
+import { Control } from './Control';
 import './index.scss';
-const SortableMultiValue = SortableElement((props) => {
-    // this prevents the menu from being opened/closed when the user clicks
-    // on a value to begin dragging it. ideally, detecting a click (instead of
-    // a drag) would still focus the control and toggle the menu, but that
-    // requires some magic with refs that are out of scope for this example
-    const onMouseDown = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const classes = [
-        props.className,
-        !props.isDisabled && 'draggable',
-    ].filter(Boolean).join(' ');
-    return (React.createElement(components.MultiValue, { ...props, className: classes, innerProps: { ...props.innerProps, onMouseDown } }));
-});
-const SortableMultiValueLabel = SortableHandle((props) => React.createElement(components.MultiValueLabel, { ...props }));
-const SortableSelect = SortableContainer(Select);
-const ReactSelect = (props) => {
+const SelectAdapter = (props) => {
     const { t, i18n } = useTranslation();
-    const { className, showError = false, options, onChange, value, disabled = false, placeholder = t('general:selectValue'), isSearchable = true, isClearable = true, isMulti, isSortable, filterOption = undefined, isLoading, onMenuOpen, } = props;
+    const { className, showError, options, onChange, value, disabled = false, placeholder = t('general:selectValue'), isSearchable = true, isClearable = true, filterOption = undefined, isLoading, onMenuOpen, components, droppableRef, selectProps, } = props;
     const classes = [
         className,
         'react-select',
         showError && 'react-select--error',
     ].filter(Boolean).join(' ');
-    const onSortStart = useCallback(({ helper }) => {
-        const portalNode = helper;
-        if (portalNode && portalNode.style) {
-            portalNode.style.cssText += 'pointer-events: auto; cursor: grabbing;';
+    return (React.createElement(Select, { isLoading: isLoading, placeholder: getTranslation(placeholder, i18n), captureMenuScroll: true, ...props, value: value, onChange: onChange, disabled: disabled ? 'disabled' : undefined, className: classes, classNamePrefix: "rs", options: options, isSearchable: isSearchable, isClearable: isClearable, filterOption: filterOption, onMenuOpen: onMenuOpen, selectProps: {
+            ...selectProps,
+            droppableRef,
+        }, components: {
+            ValueContainer,
+            SingleValue,
+            MultiValue,
+            MultiValueLabel,
+            MultiValueRemove,
+            DropdownIndicator: Chevron,
+            ClearIndicator,
+            Control,
+            ...components,
+        } }));
+};
+const SortableSelect = (props) => {
+    const { onChange, value, } = props;
+    const uuid = useId();
+    const { setNodeRef } = useDroppable({
+        id: uuid,
+    });
+    const onDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (!active || !over)
+            return;
+        let sorted = value;
+        if (value && Array.isArray(value)) {
+            const oldIndex = value.findIndex((item) => item.value === active.id);
+            const newIndex = value.findIndex((item) => item.value === over.id);
+            sorted = arrayMove(value, oldIndex, newIndex);
         }
-    }, []);
-    const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
-        onChange(arrayMove(value, oldIndex, newIndex));
+        onChange(sorted);
     }, [onChange, value]);
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    let ids = [];
+    if (value)
+        ids = Array.isArray(value) ? value.map((item) => item === null || item === void 0 ? void 0 : item.value) : [value === null || value === void 0 ? void 0 : value.value]; // TODO: fix these types
+    return (React.createElement(DndContext, { onDragEnd: onDragEnd, sensors: sensors, collisionDetection: closestCenter },
+        React.createElement(SortableContext, { items: ids },
+            React.createElement(SelectAdapter, { ...props, droppableRef: setNodeRef }))));
+};
+const ReactSelect = (props) => {
+    const { isMulti, isSortable, } = props;
     if (isMulti && isSortable) {
-        return (React.createElement(SortableSelect, { useDragHandle: true, 
-            // react-sortable-hoc props:
-            axis: "xy", onSortStart: onSortStart, onSortEnd: onSortEnd, 
-            // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
-            getHelperDimensions: ({ node }) => node.getBoundingClientRect(), 
-            // react-select props:
-            placeholder: getTranslation(placeholder, i18n), ...props, value: value, onChange: onChange, disabled: disabled ? 'disabled' : undefined, className: classes, classNamePrefix: "rs", captureMenuScroll: true, options: options, isSearchable: isSearchable, isClearable: isClearable, isLoading: isLoading, onMenuOpen: onMenuOpen, components: {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore We're failing to provide a required index prop to SortableElement
-                MultiValue: SortableMultiValue,
-                MultiValueLabel: SortableMultiValueLabel,
-                DropdownIndicator: Chevron,
-            }, filterOption: filterOption }));
+        return (React.createElement(SortableSelect, { ...props }));
     }
-    return (React.createElement(Select, { isLoading: isLoading, placeholder: getTranslation(placeholder, i18n), captureMenuScroll: true, ...props, value: value, onChange: onChange, disabled: disabled ? 'disabled' : undefined, components: { DropdownIndicator: Chevron }, className: classes, classNamePrefix: "rs", options: options, isSearchable: isSearchable, isClearable: isClearable, filterOption: filterOption, onMenuOpen: onMenuOpen }));
+    return (React.createElement(SelectAdapter, { ...props }));
 };
 export default ReactSelect;

package/dist/admin/components/elements/ReactSelect/index.scss

@@ -1,41 +1,17 @@
 @import '../../../scss/styles';
 
-div.react-select {
-  div.rs__control {
+.react-select {
+  .rs__control {
     @include formInput;
     height: auto;
     padding-top: base(.25);
     padding-bottom: base(.25);
-  }
-
-  .rs__value-container {
-    padding: base(.25) 0;
-    min-height: base(1.5);
-
-    >* {
-      margin-top: 0;
-      margin-bottom: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    &--is-multi {
-      margin-left: - base(.25);
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-  }
-
-  .rs__indicators {
-    .arrow {
-      margin-left: base(.5);
-      transform: rotate(90deg);
-      width: base(.3);
-    }
+    flex-wrap: nowrap;
   }
 
   .rs__indicator {
     padding: 0px 4px;
+    cursor: pointer;
   }
 
   .rs__indicator-separator {
@@ -47,7 +23,7 @@ div.react-select {
 
     input {
       font-family: var(--font-body);
-      width: 100% !important;
+      width: 10px;
     }
   }
 
@@ -79,38 +55,6 @@ div.react-select {
     }
   }
 
-  .rs__single-value {
-    color: currentColor;
-  }
-
-  .rs__multi-value {
-    padding: 0;
-    background: transparent;
-    border: $style-stroke-width-s solid var(--theme-elevation-800);
-    line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2});
-    margin: base(.25) base(.5) base(.25) 0;
-
-    &.draggable {
-      cursor: grab;
-    }
-  }
-
-  .rs__multi-value__label {
-    padding: 0 base(.125) 0 base(.25);
-    max-width: 150px;
-    color: currentColor;
-  }
-
-  .rs__multi-value__remove {
-    padding: 0 base(.125);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--theme-elevation-800);
-      background: var(--theme-error-150);
-    }
-  }
-
   &--error {
     div.rs__control {
       background-color: var(--theme-error-200);
@@ -120,4 +64,4 @@ div.react-select {
   &.rs--is-disabled .rs__control {
     background: var(--theme-elevation-200);
   }
-}
+}

package/dist/admin/components/elements/ReactSelect/types.d.ts

@@ -1,12 +1,14 @@
-export declare type Option = {
+import { Ref } from 'react';
+export type Option = {
     [key: string]: unknown;
     value: unknown;
 };
-export declare type OptionGroup = {
+export type OptionGroup = {
     label: string;
     options: Option[];
 };
-export declare type Props = {
+export type Props = {
+    droppableRef?: Ref<HTMLElement>;
     className?: string;
     value?: Option | Option[];
     onChange?: (value: any) => void;
@@ -24,9 +26,18 @@ export declare type Props = {
     placeholder?: string;
     isSearchable?: boolean;
     isClearable?: boolean;
+    blurInputOnSelect?: boolean;
     filterOption?: (({ label, value, data }: {
         label: string;
         value: string;
         data: Option;
     }, search: string) => boolean) | undefined;
+    components?: {
+        [key: string]: React.FC<any>;
+    };
+    selectProps?: {
+        disableMouseDown?: boolean;
+        disableKeyDown?: boolean;
+        [key: string]: unknown;
+    };
 };

package/dist/admin/components/elements/RenderTitle/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     useAsTitle?: string;
     data?: {
         id?: string;

package/dist/admin/components/elements/SearchFilter/types.d.ts

@@ -1,6 +1,6 @@
 import { FieldAffectingData } from '../../../../fields/config/types';
 import { Where } from '../../../../types';
-export declare type Props = {
+export type Props = {
     fieldName?: string;
     fieldLabel?: string;
     modifySearchQuery?: boolean;

package/dist/admin/components/elements/SortColumn/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     label: Record<string, string> | string;
     name: string;
     disable?: boolean;

package/dist/admin/components/elements/SortComplex/types.d.ts

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
+export type Props = {
     collection: SanitizedCollectionConfig;
     sort?: string;
     handleChange?: (sort: string) => void;

package/dist/admin/components/elements/Status/types.d.ts

@@ -1 +1 @@
-export declare type Props = {};
+export type Props = {};

package/dist/admin/components/elements/StepNav/index.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Chevron from '../../icons/Chevron';
 import { getTranslation } from '../../../../utilities/getTranslation';
+import { useConfig } from '../../utilities/Config';
 import './index.scss';
 const Context = createContext({});
 const StepNavProvider = ({ children }) => {
@@ -17,9 +18,11 @@ const StepNav = () => {
     const { t, i18n } = useTranslation();
     const dashboardLabel = React.createElement("span", null, t('general:dashboard'));
     const { stepNav } = useStepNav();
+    const config = useConfig();
+    const { routes: { admin } } = config;
     return (React.createElement("nav", { className: "step-nav" },
         stepNav.length > 0
-            ? (React.createElement(Link, { to: "/admin" },
+            ? (React.createElement(Link, { to: admin },
                 dashboardLabel,
                 React.createElement(Chevron, null)))
             : dashboardLabel,

package/dist/admin/components/elements/StepNav/types.d.ts

@@ -1,8 +1,8 @@
-export declare type StepNavItem = {
+export type StepNavItem = {
     label: Record<string, string> | string;
     url?: string;
 };
-export declare type Context = {
+export type Context = {
     stepNav: StepNavItem[];
     setStepNav: (items: StepNavItem[]) => void;
 };

package/dist/admin/components/elements/Table/types.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-export declare type Column = {
+export type Column = {
     accessor: string;
     components: {
         Heading: React.ReactNode;
         renderCell: (row: any, data: any) => React.ReactNode;
     };
 };
-export declare type Props = {
+export type Props = {
     columns: Column[];
     data: unknown[];
 };

package/dist/admin/components/elements/Thumbnail/types.d.ts

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
+export type Props = {
     doc: Record<string, unknown>;
     collection: SanitizedCollectionConfig;
     size?: 'small' | 'medium' | 'large' | 'expand';

package/dist/admin/components/elements/Tooltip/index.js

@@ -1,13 +1,28 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import './index.scss';
 const Tooltip = (props) => {
-    const { className, children } = props;
-    const classes = [
-        'tooltip',
-        className,
-    ].filter(Boolean).join(' ');
-    return (React.createElement("aside", { className: classes },
-        children,
-        React.createElement("span", null)));
+    const { className, children, show: showFromProps = true, delay = 350, } = props;
+    const [show, setShow] = React.useState(showFromProps);
+    useEffect(() => {
+        let timerId;
+        // do not use the delay on transition-out
+        if (delay && showFromProps) {
+            timerId = setTimeout(() => {
+                setShow(showFromProps);
+            }, delay);
+        }
+        else {
+            setShow(showFromProps);
+        }
+        return () => {
+            if (timerId)
+                clearTimeout(timerId);
+        };
+    }, [showFromProps, delay]);
+    return (React.createElement("aside", { className: [
+            'tooltip',
+            className,
+            show && 'tooltip--show',
+        ].filter(Boolean).join(' ') }, children));
 };
 export default Tooltip;

package/dist/admin/components/elements/Tooltip/index.scss

@@ -1,27 +1,41 @@
 @import '../../../scss/styles.scss';
 
+$caretSize: 6;
+
 .tooltip {
+  opacity: 0;
 	background-color: var(--theme-elevation-800);
 	position: absolute;
 	z-index: 2;
 	bottom: 100%;
 	left: 50%;
-	transform: translate3d(-50%, -20%, 0);
+	transform: translate3d(-50%, calc(#{$caretSize}px * -1), 0);
 	padding: base(.2) base(.4);
 	color: var(--theme-elevation-0);
 	line-height: base(.75);
 	font-weight: normal;
 	white-space: nowrap;
 	border-radius: 2px;
+  visibility: hidden;
+
+  &::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate3d(-50%, 100%, 0);
+    width: 0;
+    height: 0;
+    border-left: #{$caretSize}px solid transparent;
+    border-right: #{$caretSize}px solid transparent;
+    border-top: #{$caretSize}px solid var(--theme-elevation-800);
+  }
 
-	span {
-		position: absolute;
-		transform: translateX(-50%);
-		top: calc(100% - #{base(.0625)});
-		left: 50%;
-		height: 0;
-		width: 0;
-		border: 10px solid transparent;
-		border-top-color: var(--theme-elevation-800);
-	}
+  &--show {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .2s ease-in-out;
+    cursor: default;
+  }
 }

package/dist/admin/components/elements/Tooltip/types.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare type Props = {
+export type Props = {
     className?: string;
     children: React.ReactNode;
+    show?: boolean;
+    delay?: number;
 };

package/dist/admin/components/elements/UploadCard/types.d.ts

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
+export type Props = {
     className?: string;
     collection: SanitizedCollectionConfig;
     doc: Record<string, unknown>;

package/dist/admin/components/elements/UploadGallery/types.d.ts

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
+export type Props = {
     docs?: Record<string, unknown>[];
     collection: SanitizedCollectionConfig;
     onCardClick: (doc: any) => void;

package/dist/admin/components/elements/VersionsCount/types.d.ts

@@ -1,6 +1,6 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
 import { SanitizedGlobalConfig } from '../../../../globals/config/types';
-export declare type Props = {
+export type Props = {
     collection?: SanitizedCollectionConfig;
     global?: SanitizedGlobalConfig;
     id?: string | number;

package/dist/admin/components/elements/ViewDescription/types.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-export declare type DescriptionFunction = () => string;
-export declare type DescriptionComponent = React.ComponentType<any>;
-declare type Description = Record<string, string> | string | DescriptionFunction | DescriptionComponent;
-export declare type Props = {
+export type DescriptionFunction = () => string;
+export type DescriptionComponent = React.ComponentType<any>;
+type Description = Record<string, string> | string | DescriptionFunction | DescriptionComponent;
+export type Props = {
     description?: Description;
 };
 export declare function isComponent(description: Description): description is DescriptionComponent;

package/dist/admin/components/elements/WhereBuilder/Condition/Date/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     onChange: () => void;
     value: Date;
 };

package/dist/admin/components/elements/WhereBuilder/Condition/Number/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Props = {
+export type Props = {
     onChange: (e: string) => void;
     value: string;
 };