@payloadcms/ui 3.0.0-canary.a5aaf21 → 3.0.0-canary.a6e7305

package/dist/elements/ReactSelect/MultiValue/index.scss

@@ -1,37 +1,39 @@
 @import '../../../scss/styles.scss';
 
-.multi-value {
-  &.rs__multi-value {
-    display: flex;
-    padding: 0;
-    border: 1px solid var(--theme-border-color);
-    border-radius: var(--style-radius-s);
-    line-height: calc(#{$baseline} - 2px);
-    margin: base(0.25) base(0.5) base(0.25) 0;
-    transition: border 0.2s cubic-bezier(0.2, 0, 0, 1);
+@layer payload-default {
+  .multi-value {
+    &.rs__multi-value {
+      display: flex;
+      padding: 0;
+      border: 1px solid var(--theme-border-color);
+      border-radius: var(--style-radius-s);
+      line-height: calc(#{$baseline} - 2px);
+      margin: base(0.25) base(0.5) base(0.25) 0;
+      transition: border 0.2s cubic-bezier(0.2, 0, 0, 1);
 
-    &:hover {
-      border: 1px solid var(--theme-elevation-250);
+      &:hover {
+        border: 1px solid var(--theme-elevation-250);
+      }
     }
-  }
 
-  &--is-dragging {
-    z-index: 2;
+    &--is-dragging {
+      z-index: 2;
+    }
   }
-}
 
-html[data-theme='light'] {
-  .multi-value {
-    &.rs__multi-value {
-      background: var(--theme-elevation-50);
+  html[data-theme='light'] {
+    .multi-value {
+      &.rs__multi-value {
+        background: var(--theme-elevation-50);
+      }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .multi-value {
-    &.rs__multi-value {
-      background: var(--theme-elevation-50);
+  html[data-theme='dark'] {
+    .multi-value {
+      &.rs__multi-value {
+        background: var(--theme-elevation-50);
+      }
     }
   }
 }

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

@@ -1,20 +1,22 @@
 @import '../../../scss/styles.scss';
 
-.multi-value-label {
-  @extend %small;
-  display: flex;
-  align-items: center;
-  max-width: 150px;
-  color: currentColor;
-  padding: 0 base(0.4);
+@layer payload-default {
+  .multi-value-label {
+    @extend %small;
+    display: flex;
+    align-items: center;
+    max-width: 150px;
+    color: currentColor;
+    padding: 0 base(0.4);
 
-  &__text {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+    &__text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
   }
 }

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

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

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

@@ -1,31 +1,33 @@
 @import '../../../scss/styles.scss';
 
-.value-container {
-  flex-grow: 1;
-  min-width: 0;
+@layer payload-default {
+  .value-container {
+    flex-grow: 1;
+    min-width: 0;
 
-  .rs__value-container {
-    overflow: visible;
-    padding: 2px;
-    gap: 2px;
+    .rs__value-container {
+      overflow: visible;
+      padding: 2px;
+      gap: 2px;
 
-    > * {
-      margin: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      color: currentColor;
-
-      .field-label {
+      > * {
+        margin: 0;
+        padding-top: 0;
         padding-bottom: 0;
+        color: currentColor;
+
+        .field-label {
+          padding-bottom: 0;
+        }
       }
-    }
 
-    &--is-multi {
-      width: calc(100% + base(0.25));
+      &--is-multi {
+        width: calc(100% + base(0.25));
 
-      &.rs__value-container--has-value {
-        padding: 0;
-        margin-inline-start: -4px;
+        &.rs__value-container--has-value {
+          padding: 0;
+          margin-inline-start: -4px;
+        }
       }
     }
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAQxC,OAAO,cAAc,CAAA;AAsMrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAQxC,OAAO,cAAc,CAAA;AAwMrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}

package/dist/elements/ReactSelect/index.js

@@ -97,6 +97,7 @@ const SelectAdapter = props => {
       onMenuClose: onMenuClose,
       onMenuOpen: onMenuOpen,
       options: options,
+      unstyled: true,
       value: value
     });
   }
@@ -161,6 +162,7 @@ const SelectAdapter = props => {
     onMenuClose: onMenuClose,
     onMenuOpen: onMenuOpen,
     options: options,
+    unstyled: true,
     value: value
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["arrayMove","getTranslation","React","useEffect","useId","Select","CreatableSelect","useTranslation","DraggableSortable","ShimmerEffect","ClearIndicator","Control","DropdownIndicator","Input","generateMultiValueDraggableID","MultiValue","MultiValueLabel","MultiValueRemove","SingleValue","ValueContainer","createOption","label","value","SelectAdapter","props","i18n","t","inputValue","setInputValue","useState","uuid","hasMounted","setHasMounted","className","components","customProps","disabled","filterOption","undefined","getOptionValue","isClearable","isCreatable","isLoading","isSearchable","noOptionsMessage","numberOnly","onChange","onMenuClose","onMenuOpen","options","placeholder","showError","loadingMessage","classes","filter","Boolean","join","_jsx","height","captureMenuScroll","classNamePrefix","instanceId","isDisabled","menuPlacement","handleKeyDown","event","acceptableKeys","isNumber","test","key","isActionKey","includes","preventDefault","trim","onInputChange","newValue","onKeyDown","SortableSelect","draggableIDs","Array","isArray","map","optionValue","ids","onDragEnd","moveFromIndex","moveToIndex","sorted","ReactSelect","isMulti","isSortable"],"sources":["../../../src/elements/ReactSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { KeyboardEventHandler } from 'react'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useId } from 'react'\nimport Select from 'react-select'\nimport CreatableSelect from 'react-select/creatable'\n\nimport type { Option, ReactSelectAdapterProps } from './types.js'\nexport type { Option } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { ClearIndicator } from './ClearIndicator/index.js'\nimport { Control } from './Control/index.js'\nimport { DropdownIndicator } from './DropdownIndicator/index.js'\nimport './index.scss'\nimport { Input } from './Input/index.js'\nimport { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js'\nimport { MultiValueLabel } from './MultiValueLabel/index.js'\nimport { MultiValueRemove } from './MultiValueRemove/index.js'\nimport { SingleValue } from './SingleValue/index.js'\nimport { ValueContainer } from './ValueContainer/index.js'\n\nconst createOption = (label: string) => ({\n  label,\n  value: label,\n})\n\nconst SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { i18n, t } = useTranslation()\n  const [inputValue, setInputValue] = React.useState('') // for creatable select\n  const uuid = useId()\n  const [hasMounted, setHasMounted] = React.useState(false)\n\n  useEffect(() => {\n    setHasMounted(true)\n  }, [])\n\n  const {\n    className,\n    components,\n    customProps,\n    disabled = false,\n    filterOption = undefined,\n    getOptionValue,\n    isClearable = true,\n    isCreatable,\n    isLoading,\n    isSearchable = true,\n    noOptionsMessage = () => t('general:noOptions'),\n    numberOnly = false,\n    onChange,\n    onMenuClose,\n    onMenuOpen,\n    options,\n    placeholder = t('general:selectValue'),\n    showError,\n    value,\n  } = props\n\n  const loadingMessage = () => t('general:loading') + '...'\n\n  const classes = [className, 'react-select', showError && 'react-select--error']\n    .filter(Boolean)\n    .join(' ')\n\n  if (!hasMounted) {\n    return <ShimmerEffect height=\"calc(var(--base) * 2 + 2px)\" />\n  }\n\n  if (!isCreatable) {\n    return (\n      <Select\n        captureMenuScroll\n        customProps={customProps}\n        isLoading={isLoading}\n        placeholder={getTranslation(placeholder, i18n)}\n        {...props}\n        className={classes}\n        classNamePrefix=\"rs\"\n        components={{\n          ClearIndicator,\n          Control,\n          DropdownIndicator,\n          Input,\n          MultiValue,\n          MultiValueLabel,\n          MultiValueRemove,\n          SingleValue,\n          ValueContainer,\n          ...components,\n        }}\n        filterOption={filterOption}\n        getOptionValue={getOptionValue}\n        instanceId={uuid}\n        isClearable={isClearable}\n        isDisabled={disabled}\n        isSearchable={isSearchable}\n        loadingMessage={loadingMessage}\n        menuPlacement=\"auto\"\n        noOptionsMessage={noOptionsMessage}\n        onChange={onChange}\n        onMenuClose={onMenuClose}\n        onMenuOpen={onMenuOpen}\n        options={options}\n        value={value}\n      />\n    )\n  }\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (numberOnly === true) {\n      const acceptableKeys = [\n        'Tab',\n        'Escape',\n        'Backspace',\n        'Enter',\n        'ArrowRight',\n        'ArrowLeft',\n        'ArrowUp',\n        'ArrowDown',\n      ]\n      const isNumber = !/\\D/.test(event.key)\n      const isActionKey = acceptableKeys.includes(event.key)\n      if (!isNumber && !isActionKey) {\n        event.preventDefault()\n        return\n      }\n    }\n    if (!value || !inputValue || inputValue.trim() === '') {\n      return\n    }\n    if (filterOption && !filterOption(null, inputValue)) {\n      return\n    }\n    switch (event.key) {\n      case 'Enter':\n      case 'Tab':\n        onChange([...(value as Option[]), createOption(inputValue)])\n        setInputValue('')\n        event.preventDefault()\n        break\n      default:\n        break\n    }\n  }\n\n  return (\n    <CreatableSelect\n      captureMenuScroll\n      isLoading={isLoading}\n      placeholder={getTranslation(placeholder, i18n)}\n      {...props}\n      className={classes}\n      classNamePrefix=\"rs\"\n      components={{\n        ClearIndicator,\n        Control,\n        DropdownIndicator,\n        Input,\n        MultiValue,\n        MultiValueLabel,\n        MultiValueRemove,\n        SingleValue,\n        ValueContainer,\n        ...components,\n      }}\n      filterOption={filterOption}\n      inputValue={inputValue}\n      instanceId={uuid}\n      isClearable={isClearable}\n      isDisabled={disabled}\n      isSearchable={isSearchable}\n      loadingMessage={loadingMessage}\n      menuPlacement=\"auto\"\n      noOptionsMessage={noOptionsMessage}\n      onChange={onChange}\n      onInputChange={(newValue) => setInputValue(newValue)}\n      onKeyDown={handleKeyDown}\n      onMenuClose={onMenuClose}\n      onMenuOpen={onMenuOpen}\n      options={options}\n      value={value}\n    />\n  )\n}\n\nconst SortableSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { getOptionValue, onChange, value } = props\n\n  let draggableIDs: string[] = []\n  if (value) {\n    draggableIDs = (Array.isArray(value) ? value : [value]).map((optionValue) => {\n      return generateMultiValueDraggableID(optionValue, getOptionValue)\n    })\n  }\n\n  return (\n    <DraggableSortable\n      className=\"react-select-container\"\n      ids={draggableIDs}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        let sorted = value\n        if (value && Array.isArray(value)) {\n          sorted = arrayMove(value, moveFromIndex, moveToIndex)\n        }\n        onChange(sorted)\n      }}\n    >\n      <SelectAdapter {...props} />\n    </DraggableSortable>\n  )\n}\n\nexport const ReactSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { isMulti, isSortable } = props\n\n  if (isMulti && isSortable) {\n    return <SortableSelect {...props} />\n  }\n\n  return <SelectAdapter {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["arrayMove","getTranslation","React","useEffect","useId","Select","CreatableSelect","useTranslation","DraggableSortable","ShimmerEffect","ClearIndicator","Control","DropdownIndicator","Input","generateMultiValueDraggableID","MultiValue","MultiValueLabel","MultiValueRemove","SingleValue","ValueContainer","createOption","label","value","SelectAdapter","props","i18n","t","inputValue","setInputValue","useState","uuid","hasMounted","setHasMounted","className","components","customProps","disabled","filterOption","undefined","getOptionValue","isClearable","isCreatable","isLoading","isSearchable","noOptionsMessage","numberOnly","onChange","onMenuClose","onMenuOpen","options","placeholder","showError","loadingMessage","classes","filter","Boolean","join","_jsx","height","captureMenuScroll","classNamePrefix","instanceId","isDisabled","menuPlacement","unstyled","handleKeyDown","event","acceptableKeys","isNumber","test","key","isActionKey","includes","preventDefault","trim","onInputChange","newValue","onKeyDown","SortableSelect","draggableIDs","Array","isArray","map","optionValue","ids","onDragEnd","moveFromIndex","moveToIndex","sorted","ReactSelect","isMulti","isSortable"],"sources":["../../../src/elements/ReactSelect/index.tsx"],"sourcesContent":["'use client'\nimport type { KeyboardEventHandler } from 'react'\n\nimport { arrayMove } from '@dnd-kit/sortable'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useEffect, useId } from 'react'\nimport Select from 'react-select'\nimport CreatableSelect from 'react-select/creatable'\n\nimport type { Option, ReactSelectAdapterProps } from './types.js'\nexport type { Option } from './types.js'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { ShimmerEffect } from '../ShimmerEffect/index.js'\nimport { ClearIndicator } from './ClearIndicator/index.js'\nimport { Control } from './Control/index.js'\nimport { DropdownIndicator } from './DropdownIndicator/index.js'\nimport './index.scss'\nimport { Input } from './Input/index.js'\nimport { generateMultiValueDraggableID, MultiValue } from './MultiValue/index.js'\nimport { MultiValueLabel } from './MultiValueLabel/index.js'\nimport { MultiValueRemove } from './MultiValueRemove/index.js'\nimport { SingleValue } from './SingleValue/index.js'\nimport { ValueContainer } from './ValueContainer/index.js'\n\nconst createOption = (label: string) => ({\n  label,\n  value: label,\n})\n\nconst SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { i18n, t } = useTranslation()\n  const [inputValue, setInputValue] = React.useState('') // for creatable select\n  const uuid = useId()\n  const [hasMounted, setHasMounted] = React.useState(false)\n\n  useEffect(() => {\n    setHasMounted(true)\n  }, [])\n\n  const {\n    className,\n    components,\n    customProps,\n    disabled = false,\n    filterOption = undefined,\n    getOptionValue,\n    isClearable = true,\n    isCreatable,\n    isLoading,\n    isSearchable = true,\n    noOptionsMessage = () => t('general:noOptions'),\n    numberOnly = false,\n    onChange,\n    onMenuClose,\n    onMenuOpen,\n    options,\n    placeholder = t('general:selectValue'),\n    showError,\n    value,\n  } = props\n\n  const loadingMessage = () => t('general:loading') + '...'\n\n  const classes = [className, 'react-select', showError && 'react-select--error']\n    .filter(Boolean)\n    .join(' ')\n\n  if (!hasMounted) {\n    return <ShimmerEffect height=\"calc(var(--base) * 2 + 2px)\" />\n  }\n\n  if (!isCreatable) {\n    return (\n      <Select\n        captureMenuScroll\n        customProps={customProps}\n        isLoading={isLoading}\n        placeholder={getTranslation(placeholder, i18n)}\n        {...props}\n        className={classes}\n        classNamePrefix=\"rs\"\n        components={{\n          ClearIndicator,\n          Control,\n          DropdownIndicator,\n          Input,\n          MultiValue,\n          MultiValueLabel,\n          MultiValueRemove,\n          SingleValue,\n          ValueContainer,\n          ...components,\n        }}\n        filterOption={filterOption}\n        getOptionValue={getOptionValue}\n        instanceId={uuid}\n        isClearable={isClearable}\n        isDisabled={disabled}\n        isSearchable={isSearchable}\n        loadingMessage={loadingMessage}\n        menuPlacement=\"auto\"\n        noOptionsMessage={noOptionsMessage}\n        onChange={onChange}\n        onMenuClose={onMenuClose}\n        onMenuOpen={onMenuOpen}\n        options={options}\n        unstyled={true}\n        value={value}\n      />\n    )\n  }\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (numberOnly === true) {\n      const acceptableKeys = [\n        'Tab',\n        'Escape',\n        'Backspace',\n        'Enter',\n        'ArrowRight',\n        'ArrowLeft',\n        'ArrowUp',\n        'ArrowDown',\n      ]\n      const isNumber = !/\\D/.test(event.key)\n      const isActionKey = acceptableKeys.includes(event.key)\n      if (!isNumber && !isActionKey) {\n        event.preventDefault()\n        return\n      }\n    }\n    if (!value || !inputValue || inputValue.trim() === '') {\n      return\n    }\n    if (filterOption && !filterOption(null, inputValue)) {\n      return\n    }\n    switch (event.key) {\n      case 'Enter':\n      case 'Tab':\n        onChange([...(value as Option[]), createOption(inputValue)])\n        setInputValue('')\n        event.preventDefault()\n        break\n      default:\n        break\n    }\n  }\n\n  return (\n    <CreatableSelect\n      captureMenuScroll\n      isLoading={isLoading}\n      placeholder={getTranslation(placeholder, i18n)}\n      {...props}\n      className={classes}\n      classNamePrefix=\"rs\"\n      components={{\n        ClearIndicator,\n        Control,\n        DropdownIndicator,\n        Input,\n        MultiValue,\n        MultiValueLabel,\n        MultiValueRemove,\n        SingleValue,\n        ValueContainer,\n        ...components,\n      }}\n      filterOption={filterOption}\n      inputValue={inputValue}\n      instanceId={uuid}\n      isClearable={isClearable}\n      isDisabled={disabled}\n      isSearchable={isSearchable}\n      loadingMessage={loadingMessage}\n      menuPlacement=\"auto\"\n      noOptionsMessage={noOptionsMessage}\n      onChange={onChange}\n      onInputChange={(newValue) => setInputValue(newValue)}\n      onKeyDown={handleKeyDown}\n      onMenuClose={onMenuClose}\n      onMenuOpen={onMenuOpen}\n      options={options}\n      unstyled={true}\n      value={value}\n    />\n  )\n}\n\nconst SortableSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { getOptionValue, onChange, value } = props\n\n  let draggableIDs: string[] = []\n  if (value) {\n    draggableIDs = (Array.isArray(value) ? value : [value]).map((optionValue) => {\n      return generateMultiValueDraggableID(optionValue, getOptionValue)\n    })\n  }\n\n  return (\n    <DraggableSortable\n      className=\"react-select-container\"\n      ids={draggableIDs}\n      onDragEnd={({ moveFromIndex, moveToIndex }) => {\n        let sorted = value\n        if (value && Array.isArray(value)) {\n          sorted = arrayMove(value, moveFromIndex, moveToIndex)\n        }\n        onChange(sorted)\n      }}\n    >\n      <SelectAdapter {...props} />\n    </DraggableSortable>\n  )\n}\n\nexport const ReactSelect: React.FC<ReactSelectAdapterProps> = (props) => {\n  const { isMulti, isSortable } = props\n\n  if (isMulti && isSortable) {\n    return <SortableSelect {...props} />\n  }\n\n  return <SelectAdapter {...props} />\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ReactSelect/index.scss

@@ -1,81 +1,91 @@
 @import '../../scss/styles';
 
-.react-select-container {
-  width: 100%;
-}
-
-.react-select {
-  .rs__control {
-    @include formInput;
-    height: auto;
-    padding: base(0.4) base(0.6);
-    flex-wrap: nowrap;
+@layer payload-default {
+  .react-select-container {
+    width: 100%;
   }
 
-  .rs__indicators {
-    gap: calc(var(--base) / 4);
-  }
+  .react-select {
+    &:focus-within {
+      z-index: 3;
+    }
+    .rs__control {
+      @include formInput;
+      height: auto;
+      padding: base(0.35) base(0.6);
+      flex-wrap: nowrap;
+    }
 
-  .rs__indicator {
-    padding: 0px 4px;
-    cursor: pointer;
-  }
+    .rs__menu-notice {
+      padding: base(0.5) base(0.6);
+    }
 
-  .rs__indicator-separator {
-    display: none;
-  }
+    .rs__indicators {
+      gap: calc(var(--base) / 4);
+    }
 
-  .rs__input-container {
-    color: var(--theme-elevation-1000);
-  }
+    .rs__indicator {
+      padding: 0px 4px;
+      cursor: pointer;
+    }
 
-  .rs__input {
-    font-family: var(--font-body);
-    width: 10px;
-  }
+    .rs__indicator-separator {
+      display: none;
+    }
 
-  .rs__menu {
-    z-index: 4;
-    border-radius: 0;
-    @include shadow-lg;
-    background: var(--theme-input-bg);
-  }
+    .rs__input-container {
+      color: var(--theme-elevation-1000);
+    }
 
-  .rs__group-heading {
-    color: var(--theme-elevation-800);
-    padding-left: base(0.5);
-    margin-bottom: base(0.25);
-  }
+    .rs__input {
+      font-family: var(--font-body);
+      width: 10px;
+    }
 
-  .rs__option {
-    font-family: var(--font-body);
-    font-size: $baseline-body-size;
-    padding: base(0.375) base(0.75);
-    color: var(--theme-elevation-800);
+    .rs__menu {
+      z-index: 4;
+      border-radius: 0;
+      @include shadow-lg;
+      background: var(--theme-input-bg);
+    }
 
-    &--is-focused {
-      background-color: var(--theme-elevation-100);
+    .rs__group-heading {
+      color: var(--theme-elevation-800);
+      padding-left: base(0.5);
+      margin-top: base(0.25);
+      margin-bottom: base(0.25);
     }
 
-    &--is-selected {
-      background-color: var(--theme-elevation-300);
+    .rs__option {
+      font-family: var(--font-body);
+      font-size: $baseline-body-size;
+      padding: base(0.375) base(0.75);
+      color: var(--theme-elevation-800);
+
+      &--is-focused {
+        background-color: var(--theme-elevation-100);
+      }
+
+      &--is-selected {
+        background-color: var(--theme-elevation-300);
+      }
     }
-  }
 
-  &--error,
-  &--error:hover,
-  &--error:focus-within {
-    div.rs__control {
-      background-color: var(--theme-error-50);
-      border: 1px solid var(--theme-error-500);
+    &--error,
+    &--error:hover,
+    &--error:focus-within {
+      div.rs__control {
+        background-color: var(--theme-error-50);
+        border: 1px solid var(--theme-error-500);
 
-      & > div.rs__indicator > button.dropdown-indicator[type='button'] {
-        border: none;
+        & > div.rs__indicator > button.dropdown-indicator[type='button'] {
+          border: none;
+        }
       }
     }
-  }
 
-  &.rs--is-disabled .rs__control {
-    @include readOnly;
+    &.rs--is-disabled .rs__control {
+      @include readOnly;
+    }
   }
 }

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

@@ -43,7 +43,8 @@ export type ReactSelectAdapterProps = {
     };
     customProps?: CustomSelectProps;
     disabled?: boolean;
-    filterOption?: (({ data, label, value }: {
+    filterOption?: (({ allowEdit, data, label, value, }: {
+        allowEdit: boolean;
         data: Option;
         label: string;
         value: string;

package/dist/elements/ReactSelect/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/types.ts"],"names":[],"mappings":"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"}

package/dist/elements/ReactSelect/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ReactSelect/types.ts"],"sourcesContent":["import type { CommonProps, GroupBase, Props as ReactSelectStateManagerProps } from 'react-select'\n\nimport type { DocumentDrawerProps, UseDocumentDrawer } from '../DocumentDrawer/types.js'\n\ntype CustomSelectProps = {\n  disableKeyDown?: boolean\n  disableMouseDown?: boolean\n  DocumentDrawerToggler?: ReturnType<UseDocumentDrawer>[1]\n  draggableProps?: any\n  droppableRef?: React.RefObject<HTMLDivElement | null>\n  onDelete?: DocumentDrawerProps['onDelete']\n  onDocumentDrawerOpen: (args: {\n    collectionSlug: string\n    hasReadPermission: boolean\n    id: number | string\n  }) => void\n  onDuplicate?: DocumentDrawerProps['onSave']\n  onSave?: DocumentDrawerProps['onSave']\n}\n\n// augment the types for the `Select` component from `react-select`\n// this is to include the `selectProps` prop at the top-level `Select` component\n// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\ndeclare module 'react-select/dist/declarations/src/Select' {\n  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {\n    customProps?: CustomSelectProps\n  }\n}\n\n// augment the types for the `CommonPropsAndClassName` from `react-select`\n// this will include the `selectProps` prop to every `react-select` component automatically\n// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\ndeclare module 'react-select/dist/declarations/src' {\n  export interface CommonPropsAndClassName<\n    Option,\n    IsMulti extends boolean,\n    Group extends GroupBase<Option>,\n  > extends CommonProps<Option, IsMulti, Group> {\n    customProps?: CustomSelectProps & ReactSelectStateManagerProps<Option, IsMulti, Group>\n  }\n}\n\nexport type Option<TValue = unknown> = {\n  [key: string]: unknown\n  //* The ID is used to identify the option in the UI. If it doesn't exist and value cannot be transformed into a string, sorting won't work */\n  id?: string\n  value: TValue\n}\n\nexport type OptionGroup = {\n  label: string\n  options: Option[]\n}\n\nexport type ReactSelectAdapterProps = {\n  backspaceRemovesValue?: boolean\n  blurInputOnSelect?: boolean\n  className?: string\n  components?: {\n    [key: string]: React.FC<any>\n  }\n  customProps?: CustomSelectProps\n  disabled?: boolean\n  filterOption?:\n    | ((\n        { data, label, value }: { data: Option; label: string; value: string },\n        search: string,\n      ) => boolean)\n    | undefined\n  getOptionValue?: ReactSelectStateManagerProps<\n    Option,\n    boolean,\n    GroupBase<Option>\n  >['getOptionValue']\n  inputId?: string\n  isClearable?: boolean\n  /** Allows you to create own values in the UI despite them not being pre-specified */\n  isCreatable?: boolean\n  isLoading?: boolean\n  /** Allows you to specify multiple values instead of just one */\n  isMulti?: boolean\n  isOptionSelected?: any\n  isSearchable?: boolean\n  isSortable?: boolean\n  noOptionsMessage?: (obj: { inputValue: string }) => string\n  numberOnly?: boolean\n  onChange?: (value: Option | Option[]) => void\n  onInputChange?: (val: string) => void\n  onMenuClose?: () => void\n  onMenuOpen?: () => void\n  onMenuScrollToBottom?: () => void\n  options: Option[] | OptionGroup[]\n  placeholder?: string\n  showError?: boolean\n  value?: Option | Option[]\n}\n"],"mappings":"AAsDA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ReactSelect/types.ts"],"sourcesContent":["import type { CommonProps, GroupBase, Props as ReactSelectStateManagerProps } from 'react-select'\n\nimport type { DocumentDrawerProps, UseDocumentDrawer } from '../DocumentDrawer/types.js'\n\ntype CustomSelectProps = {\n  disableKeyDown?: boolean\n  disableMouseDown?: boolean\n  DocumentDrawerToggler?: ReturnType<UseDocumentDrawer>[1]\n  draggableProps?: any\n  droppableRef?: React.RefObject<HTMLDivElement | null>\n  onDelete?: DocumentDrawerProps['onDelete']\n  onDocumentDrawerOpen: (args: {\n    collectionSlug: string\n    hasReadPermission: boolean\n    id: number | string\n  }) => void\n  onDuplicate?: DocumentDrawerProps['onSave']\n  onSave?: DocumentDrawerProps['onSave']\n}\n\n// augment the types for the `Select` component from `react-select`\n// this is to include the `selectProps` prop at the top-level `Select` component\n// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\ndeclare module 'react-select/dist/declarations/src/Select' {\n  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {\n    customProps?: CustomSelectProps\n  }\n}\n\n// augment the types for the `CommonPropsAndClassName` from `react-select`\n// this will include the `selectProps` prop to every `react-select` component automatically\n// @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\ndeclare module 'react-select/dist/declarations/src' {\n  export interface CommonPropsAndClassName<\n    Option,\n    IsMulti extends boolean,\n    Group extends GroupBase<Option>,\n  > extends CommonProps<Option, IsMulti, Group> {\n    customProps?: CustomSelectProps & ReactSelectStateManagerProps<Option, IsMulti, Group>\n  }\n}\n\nexport type Option<TValue = unknown> = {\n  [key: string]: unknown\n  //* The ID is used to identify the option in the UI. If it doesn't exist and value cannot be transformed into a string, sorting won't work */\n  id?: string\n  value: TValue\n}\n\nexport type OptionGroup = {\n  label: string\n  options: Option[]\n}\n\nexport type ReactSelectAdapterProps = {\n  backspaceRemovesValue?: boolean\n  blurInputOnSelect?: boolean\n  className?: string\n  components?: {\n    [key: string]: React.FC<any>\n  }\n  customProps?: CustomSelectProps\n  disabled?: boolean\n  filterOption?:\n    | ((\n        {\n          allowEdit,\n          data,\n          label,\n          value,\n        }: { allowEdit: boolean; data: Option; label: string; value: string },\n        search: string,\n      ) => boolean)\n    | undefined\n  getOptionValue?: ReactSelectStateManagerProps<\n    Option,\n    boolean,\n    GroupBase<Option>\n  >['getOptionValue']\n  inputId?: string\n  isClearable?: boolean\n  /** Allows you to create own values in the UI despite them not being pre-specified */\n  isCreatable?: boolean\n  isLoading?: boolean\n  /** Allows you to specify multiple values instead of just one */\n  isMulti?: boolean\n  isOptionSelected?: any\n  isSearchable?: boolean\n  isSortable?: boolean\n  noOptionsMessage?: (obj: { inputValue: string }) => string\n  numberOnly?: boolean\n  onChange?: (value: Option | Option[]) => void\n  onInputChange?: (val: string) => void\n  onMenuClose?: () => void\n  onMenuOpen?: () => void\n  onMenuScrollToBottom?: () => void\n  options: Option[] | OptionGroup[]\n  placeholder?: string\n  showError?: boolean\n  value?: Option | Option[]\n}\n"],"mappings":"AAsDA","ignoreList":[]}

package/dist/elements/RelationshipTable/cells/DrawerLink/index.scss

@@ -1,4 +1,6 @@
-.drawer-link {
-  display: flex;
-  gap: calc(var(--base) / 2);
+@layer payload-default {
+  .drawer-link {
+    display: flex;
+    gap: calc(var(--base) / 2);
+  }
 }

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

@@ -3,6 +3,7 @@ import React from 'react';
 import type { DocumentDrawerProps } from '../DocumentDrawer/types.js';
 import './index.scss';
 type RelationshipTableComponentProps = {
+    readonly allowCreate?: boolean;
     readonly field: JoinFieldClient;
     readonly filterOptions?: boolean | Where;
     readonly initialData?: PaginatedDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,eAAe,EACf,aAAa,EACb,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,OAAO,KAA2C,MAAM,OAAO,CAAA;AAO/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAiBrE,OAAO,cAAc,CAAA;AAKrB,KAAK,+BAA+B,GAAG;IACrC,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,aAAa,CAAA;IACpC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IACjE,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CA0RvE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/RelationshipTable/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,eAAe,EACf,aAAa,EACb,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,OAAO,KAA2C,MAAM,OAAO,CAAA;AAO/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAiBrE,OAAO,cAAc,CAAA;AAKrB,KAAK,+BAA+B,GAAG;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,aAAa,CAAA;IACpC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;IACjE,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,+BAA+B,CA0RvE,CAAA"}