sanity-io / orderable-document-list Goto Github PK

Following the Orderable Document List lead me to the following error message:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function
(for composite components) but got: undefined. You likely forgot to export your component from the file
it's defined in, or you might have mixed up default and named imports.

Check the render method of `V`.
    at createFiberFromTypeAndProps (react-dom.development.js?ac89:28439:1)
    at createFiberFromElement (react-dom.development.js?ac89:28465:1)
    at reconcileSingleElement (react-dom.development.js?ac89:15750:1)
    at reconcileChildFibers (react-dom.development.js?ac89:15808:1)
    at reconcileChildren (react-dom.development.js?ac89:19167:1)
    at updateHostComponent (react-dom.development.js?ac89:19924:1)
    at beginWork (react-dom.development.js?ac89:21618:1)
    at beginWork$1 (react-dom.development.js?ac89:27426:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at recoverFromConcurrentError (react-dom.development.js?ac89:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25750:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)

My studio is running in a next.js Typescript environment.
The affected schema has the following fields:

title: 'string';
subtitle: 'string';

year: 'string';
logo: 'img'; // Custom image type I defined

Thanks for your great work. Really waited for this!
A few things I wanted to tell you:

• instead of importing import { orderRankField, orderRankOrdering } from '@sanity/orderable-document-list'; and adding it manually, it would be nice to simply change the document type to orderableDocument (or something like that) which does all the magic! Or even better: integrate a new property like orderable: true or sortable: true.
• it feels quite inconsistent, to click the little icon button (arrow or pencil) instead of clicking the whole row (like on other lists).
• why is it “orderable” and not “sortable”?

This is what the orderRank values look like after querying the type:

orderRank: '0|ii000r:'
orderRank: '0|10000o:'
orderRank: '0|100014:'
orderRank: '0|10001k:'

How can I figure out the order based on these values?

The reason I'm doing this is, I have a small statically generated site and I query all the content in a single simple query *[!(_id in path("drafts.**"))]. I wanted to sort the items in JS later for this particular type.

Initial error

Vite error occurs with the following basic setup:

// sanity.config.ts
export default defineConfig({
  ...
  plugins: [
    deskTool({ structure }),
    visionTool(),
  ],
  ...
})

// structure.ts
import { orderableDocumentListDeskItem as orderable } from '@sanity/orderable-document-list'

export const structure = (S, context) =>
	S.list()
		.title('Content')
		.items([
			orderable({ type: 'neoType', S, context }),
		])

Error:
** Could not resolve "X". You can mark the path "X" as external to exclude it from the bundle, which will remove this error. **

1:20:46 PM [vite] page reload config/structure.ts
✘ [ERROR] Could not resolve "sanity"

    ../node_modules/@sanity/orderable-document-list/lib/index.esm.js:1:766:
      1 │ ...Preview as o,useClient as s}from"sanity";import{LexoRank as l}from"lexo...
        ╵                                    ~~~~~~~~

  You can mark the path "sanity" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "sanity/desk"

    ../node_modules/@sanity/orderable-document-list/lib/index.esm.js:1:1333:
      1 │ ...mport{usePaneRouter as C}from"sanity/desk";const $=e=>{if(!(null==e?voi...
        ╵                                 ~~~~~~~~~~~~~

  You can mark the path "sanity/desk" as external to exclude it from the bundle, which
  will remove this error.

✘ [ERROR] Could not resolve "styled-components"

    ../node_modules/@sanity/ui/dist/index.esm.js:62:97:
      62 │ ...der$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
         ╵                                                         ~~~~~~~~~~~~~~~~~~~

  You can mark the path "styled-components" as external to exclude it from the bundle,
  which will remove this error.

1:20:47 PM [vite] error while updating dependencies:
Error: Build failed with 3 errors:
../node_modules/@sanity/orderable-document-list/lib/index.esm.js:1:766: ERROR: Could not resolve "sanity"
../node_modules/@sanity/orderable-document-list/lib/index.esm.js:1:1333: ERROR: Could not resolve "sanity/desk"
../node_modules/@sanity/ui/dist/index.esm.js:62:97: ERROR: Could not resolve "styled-components"
    at failureErrorWithLog (/Users/~/studio/node_modules/vite/node_modules/esbuild/lib/main.js:1575:15)
    at /Users/~/studio/node_modules/vite/node_modules/esbuild/lib/main.js:1033:28
    at runOnEndCallbacks (/Users/~/studio/node_modules/vite/node_modules/esbuild/lib/main.js:1447:61)
    at buildResponseToResult (/Users/~/studio/node_modules/vite/node_modules/esbuild/lib/main.js:1031:7)
    at /Users/~/studio/node_modules/vite/node_modules/esbuild/lib/main.js:1143:14
    at responseCallbacks.<computed> (/Users/~/studio/node_modules/vite/node_modules/esbuild/lib/main.js:680:9)
    at handleIncomingPacket (/Users/~/studio/node_modules/vite/node_modules/esbuild/lib/main.js:735:9)
    at Socket.readFromStdout (/Users/~/studio/node_modules/vite/node_modules/esbuild/lib/main.js:656:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Resolve attempt

I've updated the Vite config settings to exclude the paths, but then a new error occurs:

import {defineCliConfig} from 'sanity/cli'
import {UserConfig} from 'vite'

export default defineCliConfig({
  ...
  vite: (config: UserConfig): UserConfig => ({
    ...config,
    build: {
      commonjsOptions: {
        exclude: [
          'sanity',
          'sanity/desk',
          'styled-components',
        ]
      }
    }
  })
})

Error:

1:33:45 PM [vite] Internal server error: Cannot find module '/Users/~/studio/node_modules/vite/dist/node/chunks/dep-19c40c50.js' imported from /Users/~/studio/node_modules/vite/dist/node/chunks/dep-5605cfa4.js
      at new NodeError (node:internal/errors:393:5)
      at finalizeResolution (node:internal/modules/esm/resolve:323:11)
      at moduleResolve (node:internal/modules/esm/resolve:916:10)
      at defaultResolve (node:internal/modules/esm/resolve:1124:11)
      at nextResolve (node:internal/modules/esm/loader:163:28)
      at ESMLoader.resolve (node:internal/modules/esm/loader:841:30)
      at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
      at ESMLoader.import (node:internal/modules/esm/loader:525:22)
      at importModuleDynamically (node:internal/modules/esm/translators:110:35)
      at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
      at traverseHtml (file:///Users/~/studio/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:42846:23)
      at devHtmlHook (file:///Users/~/studio/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:60536:11)
      at applyHtmlTransforms (file:///Users/~/studio/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:43387:27)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async viteIndexHtmlMiddleware (file:///Users/~/studio/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:60605:28) (x2)

When hovering over a list item, the studio theme styles are applied but there appears to be a background color applied behind the title + subtitle in the list item (for both light/dark mode):

if you collapse the entry-column your plugin produces this visual bug

When trying to duplicate a document that is part of the orderable document list, sometimes the duplicate document gets "stuck" in an undefined state and won't publish:

In the screenshot above, I just used the duplicate button and changed the slug. When I published, the list item swapped to the default icon and Untitled. A refresh of the page removes this duplicate, which is not the norm for Sanity, since you never have to save your work.

There are no console errors, but there is a warning for the type I am using in the orderable list:

EDIT:
Also having issues reordering documents. Here are some screenshots from network panel:

If you find a security vulnerability, do NOT open an issue. Email [email protected] instead.

Describe the bug

Update sanity/desk to sanity/structure as the former is now deprecated.

To Reproduce

import type { StructureBuilder } from 'sanity/desk'

Expected behavior

import type { StructureBuilder } from 'sanity/structure'

Screenshots

Which versions of Sanity are you using?

@sanity/cli (global)             3.25.0 (up to date)
@sanity/dashboard                 3.1.6 (up to date)
@sanity/eslint-config-studio      3.0.1 (up to date)
@sanity/google-maps-input         3.0.2 (up to date)
@sanity/orderable-document-list   1.1.0 (up to date)
@sanity/vision                   3.25.0 (up to date)
sanity                           3.25.0 (up to date)

What operating system are you using?

Which versions of Node.js / npm are you running?

Additional context

Security issue?

I'm unable to scroll through the list of sortable items (overflow issue?). Also the notification is not shown correctly.

I get this error after implementing the plugin:

Error: Cannot destructure property 'media' of 'theme.sanity' as it is undefined.
TypeError: Cannot destructure property 'media' of 'theme.sanity' as it is undefined.
    at responsiveFlexItemStyle (webpack-internal:///(app-pages-browser)/./node_modules/@sanity/orderable-document-list/node_modules/@sanity/ui/dist/index.esm.js:3650:5)
    at _e (webpack-internal:///(app-pages-browser)/./node_modules/@sanity/orderable-document-list/node_modules/styled-components/dist/styled-components.browser.esm.js:30:14666)
    at _e (webpack-internal:///(app-pages-browser)/./node_modules/@sanity/orderable-document-list/node_modules/styled-components/dist/styled-components.browser.esm.js:30:14439)
    at _e (webpack-internal:///(app-pages-browser)/./node_modules/@sanity/orderable-document-list/node_modules/styled-components/dist/styled-components.browser.esm.js:30:14938)
    at e.generateAndInjectStyles (webpack-internal:///(app-pages-browser)/./node_modules/@sanity/orderable-document-list/node_modules/styled-components/dist/styled-components.browser.esm.js:30:11176)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@sanity/orderable-document-list/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19026)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/@sanity/orderable-document-list/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19084)
    at P (webpack-internal:///(app-pages-browser)/./node_modules/@sanity/orderable-document-list/node_modules/styled-components/dist/styled-components.browser.esm.js:30:19658)
    at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10697:18)
    at updateForwardRef (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14682:20)
    at beginWork$1 (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17373:16)
    at beginWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25689:14)
    at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24540:12)
    at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24256:5)
    at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24211:7)
    at recoverFromConcurrentError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23446:20)
    at performConcurrentWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23352:22)
    at workLoop (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34)
    at flushWork (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:537:21)

Hi,

Just installed, everything seemed to run pretty smoothly, however we have a strange UI issue with the button to edit the document.

As you can see the arrow alignment is a little off, I've checked our custom css incase we've got a clash and we only have this

:root {
  --brand-primary: #FF5900;
  --brand-primary--inverted: #FFFFFF;
}

Any advise?

Thanks

After successful install and use, I noticed this plugin removes the normal create button and replaces it with an action menu item to create a new document... which doesn't work.

CONSOLE ERROR:

No handler defined for action: undefined

Is there something required in the config to set that?

I'm also not sure why the normal UI element is missing.

UPDATE: For clarity, we can still use the main create document button... just not the in-context create button.

I have the following (from shopify template) that has a canHandleIntent.

S.listItem()
                .title('Variants')
                .schemaType('productVariant')
                .child(
                  S.documentList()
                    .title('Variants')
                    .schemaType('productVariant')
                    .filter(
                      `
                      _type == "productVariant"
                      && store.productId == $productId
                    `,
                    )
                    .params({
                      productId: Number(id.replace('shopifyProduct-', '')),
                    })
                    .canHandleIntent(
                      (intentName, params) =>
                        intentName === 'edit' && params.type === 'productVariant',
                    ),
                ),

I have wrapped this in orderableDocumentListDeskItem like

orderableDocumentListDeskItem({
                type: 'productVariant',
                title: 'Variants',
                icon: CopyIcon,
                filter: `
                      _type == "productVariant"
                      && store.productId == $productId
                    `,
                params: {
                  productId: Number(id.replace('shopifyProduct-', '')),
                },

I would be nice if canHandleIntent can be passed in to control intent.

https://github.com/sanity-io/orderable-document-list/blob/3149cae83ef5e012d4e0f8adad4b25c1b3326aac/src/desk-structure/orderableDocumentListDeskItem.ts#L54C13-L54C54

When you click a document from the orderable list it doesn't apply the active state to the opened opened document in the list:

Hi Simeon!
First of all thank you for the plugin!
I have a little question, if you don't mind.

In my project I have a structure like Main Category -> Sub-category->Products
It is very similar to the one shown in this example https://www.sanity.io/docs/dynamically-group-list-items-with-a-groq-filter#ca61e2f7cd5e.

Is this possible to use your plugin to order products placed this way?

Also I face an error even if I place orderableDocumentListDeskItem directly into the desk-structure/index.js
The error is: Error: Pane is missing router context
Everything is configured by the instructions.

What may be wrong?

When publishing changes, the preview 'says' untitled, which gives the impression that data is lost - which can be very worrying for the content manager. Our clients have panicked over this multiple times.

The below screenshot shows a document that has been published for a while, but i simply made a copy change and published the update. However, the preview on the left, shows 'untitled'.

I'm on version 2.23.2 on Sanity, and the compose button doesn't show up in the list anymore, works fine in some earlier versions. I think the breaking change came with v2.22.3 if I'm not mistaken.

Is there a way to add multiple views like this?

S.documentTypeList('work')
                    .title('Arbeider')
                    .child((documentId: any) =>
                      S.document()
                        .documentId(documentId)
                        .schemaType('work')
                        **.views([
                          S.view.form(),
                          S.view.component(iFrame).title('Preview')
                        ])**
                    )

Thanks!

Hello, I'm trying to set up my Sanity so that daily (or weekly/etc) the order of a Document List will change.

What I'm trying to do is to shift all elements by "1", basically rotating the whole list, so that if I have 7 elements and they change daily, every day the list would rotate and have a different document shown first.

How would I go about this? My idea was to edit the orderRank via GROQ mutation, but the actual field doesn't show a simple number, for example my first element now says 0|100008: and the second 0|10000o:. Would using lexoRank.genNext() be the way, as in the source code?

Thanks for the help!

Is your feature request related to a problem? Please describe.
After v3.20.0 Desk is now Structure

Describe the solution you'd like
The readme in this project describes installation as

import { deskTool, StructureBuilder } from 'sanity/structure'

export default defineConfig({
  //...
  plugins: [
    deskTool({
      structure: (S, context) => {

Describe alternatives you've considered
This should be updated to

import { structureTool } from 'sanity/structure'

export default defineConfig({
  //...
  plugins: [
    structureTool({
      structure: (S, context) => {

Is there any way to change these values to numbers [1,2,3...]

When I order my documents as such:

And then look at my documents from a plain list, the items are not ordered as expected:

With multiple orderable documents lists in the same panel, switching between the list does not update the list items.

Firstly, thanks for your work on this, it's really great.

I can't figure out if it's possible to use this plugin in conjunction with the .views() method in the desk structure builder. If a document is ordered with this plugin can it have a custom preview?

@SimeonGriggs is there any way to get the 'add new' button hooked up with Initial Value Templates?

Hello,

With the version lower than V2 of sanity-io/document-internationalization, we could order the documents in the default language and get the same document order for the translated ones.

*[_type == "category" && __i18n_lang == $lang]|order(coalesce(__i18n_base->orderRank, orderRank))

The new version of the plugin no longer uses __i18n_base. How can we recover the order of translated documents (as a reminder, only documents with the default language are ordered) with this new version?

Thank you

Let’s say we have two schema-lists "list-a" and "list-b". Both of them are orderable by your plugin.

If list-a is opened (URL: …/desk/orderable-list-a) and I then open list-b (URL: …/desk/orderable-list-b) the column with the entries won’t update.

It only works if I click on list-c (= not orderable) and after that on list-b.

import { orderRankField, orderRankOrdering } from '@sanity/orderable-document-list';

orderings: [orderRankOrdering],

Types of property 'by' are incompatible. Type '{ field: "orderRank"; direction: string; }[]' is not assignable to type 'SortOrderingItem[]'. Type '{ field: "orderRank"; direction: string; }' is not assignable to type 'SortOrderingItem'. Types of property 'direction' are incompatible. Type 'string' is not assignable to type '"asc" | "desc"'.

Using "@sanity/orderable-document-list": "^1.0.1"

Not sure what's up, whether it's something at our end but we have everything working - except the actions in the drop down menu....

Trying to Create a New Team Member, Show Increments, or Reset Order, shows the following console errors...

No handler defined for action: undefined
No handler defined for action: showIncrements
No handler defined for action: resetOrder

Our desk structure is...

import S from '@sanity/desk-tool/structure-builder'
import { orderableDocumentListDeskItem } from '@sanity/orderable-document-list'

export default () =>
  S.list()
    .title('Base')
    .items([
      // ...S.documentTypeListItems(),
      S.documentTypeListItem('post'),
      S.documentTypeListItem('author'),
      S.documentTypeListItem('category'),
      orderableDocumentListDeskItem({
        type: 'team_member',
        title: 'Team Members',
      }),
    ])

And our schema for team_members...

import {
  orderRankField,
  orderRankOrdering,
} from '@sanity/orderable-document-list'

export default {
  name: 'team_member',
  title: 'Team Member',
  type: 'document',
  // Optional: The plugin also exports a set of 'orderings' for use in other Document Lists
  orderings: [orderRankOrdering],
  fields: [
    // Minimum required configuration
    orderRankField({ type: 'team_member' }),
    {
      name: 'name',
      title: 'Name',
      type: 'string',
    },
    {
      name: 'qualifications',
      title: 'Qualifications',
      type: 'string',
      options: {
        maxLength: 96,
      },
    },
    {
      name: 'position',
      title: 'Position',
      type: 'string',
      options: {
        maxLength: 96,
      },
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: {
        source: 'name',
        maxLength: 96,
      },
    },
    {
      name: 'image',
      title: 'Image',
      type: 'image',
      options: {
        hotspot: true,
      },
    },
    {
      name: 'bio',
      title: 'Bio',
      type: 'array',
      of: [
        {
          title: 'Block',
          type: 'block',
          styles: [{ title: 'Normal', value: 'normal' }],
          lists: [],
        },
      ],
    },
  ],
  preview: {
    select: {
      title: 'name',
      media: 'image',
    },
  },
}

🚨 The automated release from the studio-v2 branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the studio-v2 branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The release 1.0.0 on branch studio-v2 cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=1.0.0 <0.2.0 can be published from branch studio-v2.

The following commits are responsible for the invalid release:

• fix: dependencies (3dd828c)
• chore: dont ignore lock files (4a41d46)
• feat: use semantic-release to publish (d441f8d)
• docs: studio-v2 install command (cda5aca)
• ci: placeholder workflow for v3 (0c34bcb)
• ci: allow workflow dispatch (2be1c90)
• Merge pull request #32 from sanity-io/update-feedback (c3256c5)
• update readme (0d33fbc)
• Merge pull request #30 from sanity-io/update-feedback (f9f58ce)
• switch message to use variable (20c9921)
• Merge pull request #29 from sanity-io/id-readme (38ad007)
• rename example (1662684)
• update documentation to include id config (594b770)
• Merge pull request #28 from rlpennell/main (21a8a3c)
• add option to specify id on orderableDocumentListDeskItem (22511c6)
• Merge pull request #27 from sanity-io/pr/26 (e833cf0)
• lint, fix default props (dc507bf)
• increment version (3eee39f)
• adjust example and add warning about how ranks are calculated globally (7d39ea5)
• add params to orderableDocumentListDeskItem (d03e125)
• add filter option to orderableDocumentListDeskItem (df3fb19)
• Merge pull request #25 from sanity-io/change-click-handling (a4b7de5)
• add key to force a re-render when switching between items (b429b2e)
• Merge pull request #22 from sanity-io/change-click-handling (b19ec67)
• fix self-referencing variable (54934e2)
• Merge pull request #21 from sanity-io/change-click-handling (632fc9e)
• highlight duplicate orders, change click handling (da60052)
• Merge pull request #17 from sanity-io/less-fetching (28c7798)
• prevent re-renders on document open + reduce queried data (c5cb91f)
• Merge pull request #12 from sanity-io/fix/issues (7236fd3)
• fixes missing 'compose' button in Pane (f7a2a42)
• Merge pull request #9 from sanity-io/fix/issues (4dbb170)
• update publish action (61f6676)
• increment version (654ec6c)
• Merge pull request #8 from sanity-io/fix/query-hook (6458e6d)
• fix: add type to the dependency list of data loading hook (920aa58)
• Merge pull request #7 from sanity-io/fix/issues (715577b)
• fix scrolling, stacking and disable unordered documents (fc3bd4d)
• move plugin to sanity repo (39854e4)
• fix creating new documents from list (bf93bdd)
• ensure editing pane has access to views (ceb728a)
• update readme, add initialRank to new items, fix broken 'new' link (7ea4ff7)
• fix exported ordering direction (72f4781)
• update readme (7f3c986)
• update docs (cb9f565)
• add sanity icon (35a4bcf)
• prepare for first publish (e219285)
• first commit (258e8dd)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch studio-v2 with git revert or git reset.

A valid branch could be main.

See the workflow configuration documentation for more details.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Sanity's native list interface has a search input field shown, like this:

But when orderable document list is used, this is missing:

I used the v2 version before and it was pretty much easy to add to any of my projects. but now when I try to use the v3, the guide and steps are just so confusing. please put in mind that sanity is not that famous and it's plugins are not very widely used. and trying to find another guide or tutorial is not possible. so please be more clear. or if you can add a video explanation

orderRankField({ type: 'author', hidden: false })

Object literal may only specify known properties, and 'hidden' does not exist in type 'RankFieldConfig'.

Using "@sanity/orderable-document-list": "^1.0.1"

https://www.loom.com/share/df94dce694004231b455c3defd82cbb0

I also found the clicking of the name a little confusing as it isn't consistent with the rest of the Studio, I wonder if you could click the drag handle rather than drag to achieve the same thing? I think that dragging multiple documents isn't used often enough to be the biggest click area.

May I suggest the following?

The hover state more consistent with the Array interface:

Then a user can click the handle to select (or drag to reorder):

• Click is detected by how much the mouse position has moved from mouse down to mouse up. If the mouse move becomes higher than a threshold it becomes a drag.

Clicking the name of the document now opens the document as expected:

In the docs, it says:

// Optional: The plugin also exports a set of 'orderings' for use in other Document Lists
  orderings: [orderRankOrdering],

But what does this code actually do? What if I did not add this? Please clarify this option as it's not understandable.

Hi there, we've been using your plugin and it's working pretty well,

I wanted to check with you if there's any suggested solution to handle long lists, one of our clients got a list of products with 400+ items and if they want to reorder dragging one item through the whole list is quite tedious.

Is there any way to add a numeric input to the increments and send an item to a particular position on the list?

Another alternative would be to allow the ordering sorting options from Sanity and update the orderrank field based on the result of that query?

I'm unsure if there's a solution for this issue already and I'm missing out. But I would be happy to hear from you about how you see the best way to handle lists with many items.

Thanks a lot for your work on this plugin!!

is there a way to use orderableDocumentListDeskItem without using it in a list ?

Said a different way, is it possible to modify the code below...

 S.listItem()
        .title("Products")
        .child(
          S.documentTypeList("season")
            .title("Seasons")
            .child(seasonId =>
              S.documentTypeList("category")
                .title("Categories")
                .child(categoryId =>
                  S.list()
                    .title("Products")
                    .items([
                      orderableDocumentListDeskItem({
                        type: "product",
                        title: "Products",
                        filter:
                          '_type == "product" && season._ref == $seasonId && category._ref == $categoryId',
                        params: { seasonId, categoryId },
                        S,
                        context,
                      }),
                    ]),
                ),
            ),
        ),

so that it is more like

S.listItem()
  .title("Preview Products")
  .child(
    S.documentTypeList("season")
      .title("Seasons")
      .child(seasonId =>
        S.documentTypeList("category")
          .title("Categories")
          .child(categoryId =>
            orderableDocumentListDeskItem({
              type: "product",
              title: "Products",
              filter: '_type == "product" && season._ref == $seasonId && category._ref == $categoryId',
              params: { seasonId, categoryId },
              S,
              context,
            })
          )
      )
  ), 

When clicking "reset order" it applies to every item of the type and does not honour the filter parameter

./node_modules/@sanity/orderable-document-list/lib/index.esm.js Attempted import error: 'Preview' is not exported from 'sanity' (imported as 'o').

I am attempting to add Orderable Document List to nextjs-blog-cms-sanity-v3.

I also notice that the docs on sanity.io and github are different, and SructureBuilder is imported but not used.

When I am at /studio it lists Orderable post, Orderable author, etc. When I click I get this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports..

Is there a working example of this plugin in Sanity Studio v3?

Thanks!

Thanks for a very useful plugin! Do you have any plans to support v3?

I'm not sure if its orderable-document-list bug, but this is what happen when I try to generate new types from schema with npx sanity-codegen

Reguire stack:
Cannot find module 'part:@sanity/base/client'
- ...node_modules\@sanity\orderable-document-list\lib\fields\orderRankField.js
- ... node_modules\@sanity\orderable-document-list\lib\index.js
- ... schemas\pages\homePage.js
- ... schemas\pages\index.ts
- ... schemas\schema.js
- ... node_modules\sanity-codegen\cli.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (C:\...\node_modules\@sanity\orderable-document-list\src\fields\orderRankField.js:1:1)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Module._compile (C:\...\node_modules\pirates\lib\index.js:136:24)
at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Object.newLoader [as .js] (C:\...\node_modules\pirates\lib\index.js:141:7)
at Module.load (node:internal/modules/cjs/loader:981:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'node_modules\@sanity\orderable-document-list\lib\fields\orderRankField.js',
' node_modules\@sanity\orderable-document-list\lib\index.js',
' schemas\pages\homePage.js',
' schemas\pages\index.ts',
' schemas\schema.js',
' node_modules\sanity-codegen\cli.js'
  ]

homePage uses orderable list
Im using "sanity-codegen": "0.9.8" "@sanity/orderable-document-list": "0.0.4",
Is it possible to use codegen with your lib? If so then any tip would be helpful. Codegen has some babel configuration, but not sure how this could help....

The create new document button is not showing up. I tried setting createIntent: true and also tried adding custom menu items, but those are not showing up either.

Snippet of the structure:

return S.listItem()
    .title("Content")
    .child(
      S.list()
        .title("Content")
        .items([
          S.listItem()
            .id("homePage")
            .title("Homepage")
            .icon(IoHomeOutline)
            .child(
              S.document()
                .schemaType("homePage")
                .documentId(`${site}-homePage`)
                .initialValueTemplate(`homePage-${defaultLanguage}`),
            ),
          orderableDocumentListDeskItem({
            type: "product",
            title: "Products",
            params: { site },
            filter: "site == $site",
            createIntent: true,
            icon: BsBoxSeam,
            S,
            context,
          }),

I have a list of documents that have not been assigned an order ranking yet. Choosing it from the top right menu does nothing. Again, intermittently, as it has been working on other occasions for me.

Locally, it only works once, just after reloading the app completely (full browser window reload). After that, none of the other lists are able to reset the order. I have multiple lists/types without such orders right now.

I get the following error when opening the item that uses orderable-document-list

Error: Could not find source context

            orderableDocumentListDeskItem({
              title: 'Properties',
              icon: MdHome,
              type: 'property',
              child: S.documentTypeList('property').title('Properties'),
              S,
              context
            }),

property:

export default {
  name: 'property',
  type: 'document',
  title: 'Properties',
  fields: [
    orderRankField({ type: "number" }),
    ...

Using versions:
sanity: 3.2.6
@sanity/orderable-document-list: 1.0.2

Hi! I am trying to implement the latest version of orderable-document-list in nextjs-blog-cms-sanity-v3.

I have it set up, but I am unable to drag the items.

react-beautiful-dnd: Unable to find draggable with id: c4f95001-5f56-41c7-9712-2ce23dd4270a

I am also getting a warning, Warning: Connect(Droppable): Support for defaultProps will be removed from memo components in a future major release. Use JavaScript default parameters instead.

I will keep playing around, but is there a working repo of this plugin working in Sanity Studio v3? An example would go a long way.

Thanks! ❤️

Describe the bug
The structure tool crashed:
Error: Could not find source context

To Reproduce

1. Install latest Sanity
2. Install latest version of the plugin
3. Navigate to and instance of orderableDocumentListDeskItem

Screenshots

Which versions of Sanity are you using?
@sanity/cli (global) 3.27.0 (up to date)
@sanity/asset-utils 1.3.0 (up to date)
@sanity/assist 1.2.16 (up to date)
@sanity/cli 3.27.0 (up to date)
@sanity/code-input 4.1.2 (up to date)
@sanity/eslint-config-studio 3.0.1 (up to date)
@sanity/icons 2.10.0 (up to date)
@sanity/orderable-document-list 1.2.0 (up to date)
@sanity/scheduled-publishing 1.2.4 (latest: 1.3.0)
@sanity/table 1.1.2 (up to date)
@sanity/types 3.27.0 (up to date)
@sanity/vision 3.26.1 (latest: 3.27.0)
sanity 3.27.0 (up to date)

Which versions of Node.js / npm are you running?
10.2.5
v18.17.0

Sanity GraphQL and Deploy commands have stopped working after a clean install of the @studio-v2 version.

Steps to replicate:

1. Install @studio-v2

sanity install @sanity/orderable-document-list@studio-v2

✔ Saved lockfile

✔ Saved lockfile
Plugin '@sanity/orderable-document-list@studio-v2' installed

2. Run GraphQL or Deploy command (both have same error logs)

sanity deploy
✔ Checking project info

Error: Plugin "@sanity/orderable-document-list@studio-v2" not found.
Locations tried:
  * /Users/.../packages/sanity/plugins/@sanity/orderable-document-list@studio-v2
Try running "sanity install @sanity/orderable-document-list@studio-v2"?
    at getPluginNotFoundError (~/.../node_modules/@sanity/resolver/lib/resolvePlugins.js:110:13)
    at ~/.../node_modules/@sanity/resolver/lib/resolvePlugins.js:104:13
    at async Promise.all (index 12)

Hi,

L50 of src/DocumentListWrapper.js could use ORDER_FIELD_NAME.

<>
-  Schema <code>{type}</code> must have an <code>order</code> field of type{' '}
+  Schema <code>{type}</code> must have an <code>{ORDER_FIELD_NAME}</code> field of type{' '}
  <code>string</code>
</>

This will slightly improve DX :)

Thx,

Sixclones

Publishing a document (updating it), changes the preview title to "Untitled".

Sanity: 2.30.5
Package version: 0.0.10

Hi @SimeonGriggs and thanks for this amazing plugin...

Just to know, do you think that it could be possible to add the "published" and "edits" icons like as standard lists?

They are very useful to check without click each items... what do you think?

Thanks
valse