payload 1.3.0 → 1.3.2

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.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const ReactSelect: React.FC<Props>;
-export default ReactSelect;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const ReactSelect: React.FC<Props>;
+export default ReactSelect;

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 { useTranslation } from 'react-i18next';
-import { arrayMove } from '../../../../utilities/arrayMove';
-import Chevron from '../../icons/Chevron';
-import { getTranslation } from '../../../../utilities/getTranslation';
-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 { 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 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;';
-        }
-    }, []);
-    const onSortEnd = useCallback(({ oldIndex, newIndex }) => {
-        onChange(arrayMove(value, oldIndex, newIndex));
-    }, [onChange, value]);
-    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(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 }));
-};
-export default ReactSelect;
+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, 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 SelectAdapter = (props) => {
+    const { t, i18n } = useTranslation();
+    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(' ');
+    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);
+        }
+        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, { ...props }));
+    }
+    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,32 +1,43 @@
-export declare type Option = {
-    [key: string]: unknown;
-    value: unknown;
-};
-export declare type OptionGroup = {
-    label: string;
-    options: Option[];
-};
-export declare type Props = {
-    className?: string;
-    value?: Option | Option[];
-    onChange?: (value: any) => void;
-    onMenuOpen?: () => void;
-    disabled?: boolean;
-    showError?: boolean;
-    options: Option[] | OptionGroup[];
-    isMulti?: boolean;
-    isLoading?: boolean;
-    isOptionSelected?: any;
-    isSortable?: boolean;
-    isDisabled?: boolean;
-    onInputChange?: (val: string) => void;
-    onMenuScrollToBottom?: () => void;
-    placeholder?: string;
-    isSearchable?: boolean;
-    isClearable?: boolean;
-    filterOption?: (({ label, value, data }: {
-        label: string;
-        value: string;
-        data: Option;
-    }, search: string) => boolean) | undefined;
-};
+import { Ref } from 'react';
+export type Option = {
+    [key: string]: unknown;
+    value: unknown;
+};
+export type OptionGroup = {
+    label: string;
+    options: Option[];
+};
+export type Props = {
+    droppableRef?: Ref<HTMLElement>;
+    className?: string;
+    value?: Option | Option[];
+    onChange?: (value: any) => void;
+    onMenuOpen?: () => void;
+    disabled?: boolean;
+    showError?: boolean;
+    options: Option[] | OptionGroup[];
+    isMulti?: boolean;
+    isLoading?: boolean;
+    isOptionSelected?: any;
+    isSortable?: boolean;
+    isDisabled?: boolean;
+    onInputChange?: (val: string) => void;
+    onMenuScrollToBottom?: () => void;
+    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/ReactSelect/types.js

@@ -1 +1 @@
-export {};
+export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
-import { Props } from './types';
-declare const RenderTitle: React.FC<Props>;
-export default RenderTitle;
+import React from 'react';
+import { Props } from './types';
+declare const RenderTitle: React.FC<Props>;
+export default RenderTitle;

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

@@ -1,20 +1,20 @@
-import React from 'react';
-import useTitle from '../../../hooks/useTitle';
-import IDLabel from '../IDLabel';
-const baseClass = 'render-title';
-const RenderTitle = (props) => {
-    const { useAsTitle, title: titleFromProps, data, fallback = '[untitled]', } = props;
-    const titleFromForm = useTitle(useAsTitle);
-    let title = titleFromForm;
-    if (!title)
-        title = data === null || data === void 0 ? void 0 : data.id;
-    if (!title)
-        title = fallback;
-    title = titleFromProps || title;
-    const idAsTitle = title === (data === null || data === void 0 ? void 0 : data.id);
-    if (idAsTitle) {
-        return (React.createElement(IDLabel, { id: data === null || data === void 0 ? void 0 : data.id }));
-    }
-    return (React.createElement("span", { className: baseClass }, title));
-};
-export default RenderTitle;
+import React from 'react';
+import useTitle from '../../../hooks/useTitle';
+import IDLabel from '../IDLabel';
+const baseClass = 'render-title';
+const RenderTitle = (props) => {
+    const { useAsTitle, title: titleFromProps, data, fallback = '[untitled]', } = props;
+    const titleFromForm = useTitle(useAsTitle);
+    let title = titleFromForm;
+    if (!title)
+        title = data === null || data === void 0 ? void 0 : data.id;
+    if (!title)
+        title = fallback;
+    title = titleFromProps || title;
+    const idAsTitle = title === (data === null || data === void 0 ? void 0 : data.id);
+    if (idAsTitle) {
+        return (React.createElement(IDLabel, { id: data === null || data === void 0 ? void 0 : data.id }));
+    }
+    return (React.createElement("span", { className: baseClass }, title));
+};
+export default RenderTitle;

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

@@ -1,8 +1,8 @@
-export declare type Props = {
-    useAsTitle?: string;
-    data?: {
-        id?: string;
-    };
-    title?: string;
-    fallback?: string;
-};
+export type Props = {
+    useAsTitle?: string;
+    data?: {
+        id?: string;
+    };
+    title?: string;
+    fallback?: string;
+};

package/dist/admin/components/elements/RenderTitle/types.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/admin/components/elements/SaveDraft/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import './index.scss';
-declare const SaveDraft: React.FC;
-export default SaveDraft;
+import React from 'react';
+import './index.scss';
+declare const SaveDraft: React.FC;
+export default SaveDraft;

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

@@ -1,41 +1,41 @@
-import React, { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useConfig } from '../../utilities/Config';
-import FormSubmit from '../../forms/Submit';
-import { useForm, useFormModified } from '../../forms/Form/context';
-import { useDocumentInfo } from '../../utilities/DocumentInfo';
-import { useLocale } from '../../utilities/Locale';
-import './index.scss';
-const baseClass = 'save-draft';
-const SaveDraft = () => {
-    const { serverURL, routes: { api } } = useConfig();
-    const { submit } = useForm();
-    const { collection, global, id } = useDocumentInfo();
-    const modified = useFormModified();
-    const locale = useLocale();
-    const { t } = useTranslation('version');
-    const canSaveDraft = modified;
-    const saveDraft = useCallback(() => {
-        const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`;
-        let action;
-        let method = 'POST';
-        if (collection) {
-            action = `${serverURL}${api}/${collection.slug}${id ? `/${id}` : ''}${search}`;
-            if (id)
-                method = 'PATCH';
-        }
-        if (global) {
-            action = `${serverURL}${api}/globals/${global.slug}${search}`;
-        }
-        submit({
-            action,
-            method,
-            skipValidation: true,
-            overrides: {
-                _status: 'draft',
-            },
-        });
-    }, [submit, collection, global, serverURL, api, locale, id]);
-    return (React.createElement(FormSubmit, { className: baseClass, type: "button", buttonStyle: "secondary", onClick: saveDraft, disabled: !canSaveDraft }, t('saveDraft')));
-};
-export default SaveDraft;
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '../../utilities/Config';
+import FormSubmit from '../../forms/Submit';
+import { useForm, useFormModified } from '../../forms/Form/context';
+import { useDocumentInfo } from '../../utilities/DocumentInfo';
+import { useLocale } from '../../utilities/Locale';
+import './index.scss';
+const baseClass = 'save-draft';
+const SaveDraft = () => {
+    const { serverURL, routes: { api } } = useConfig();
+    const { submit } = useForm();
+    const { collection, global, id } = useDocumentInfo();
+    const modified = useFormModified();
+    const locale = useLocale();
+    const { t } = useTranslation('version');
+    const canSaveDraft = modified;
+    const saveDraft = useCallback(() => {
+        const search = `?locale=${locale}&depth=0&fallback-locale=null&draft=true`;
+        let action;
+        let method = 'POST';
+        if (collection) {
+            action = `${serverURL}${api}/${collection.slug}${id ? `/${id}` : ''}${search}`;
+            if (id)
+                method = 'PATCH';
+        }
+        if (global) {
+            action = `${serverURL}${api}/globals/${global.slug}${search}`;
+        }
+        submit({
+            action,
+            method,
+            skipValidation: true,
+            overrides: {
+                _status: 'draft',
+            },
+        });
+    }, [submit, collection, global, serverURL, api, locale, id]);
+    return (React.createElement(FormSubmit, { className: baseClass, type: "button", buttonStyle: "secondary", onClick: saveDraft, disabled: !canSaveDraft }, t('saveDraft')));
+};
+export default SaveDraft;

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Props } from './types';
-import './index.scss';
-declare const SearchFilter: React.FC<Props>;
-export default SearchFilter;
+import React from 'react';
+import { Props } from './types';
+import './index.scss';
+declare const SearchFilter: React.FC<Props>;
+export default SearchFilter;