[6.x] Element select field

packages/craftcms-legacy/cp/src/css/_main.scss

@@ -2974,12 +2974,6 @@ table:not(.cp-table) {
 .chips {
   align-items: flex-start;
   gap: var(--xs);
-
-  &.chips-small {
-    li {
-      height: calc(34rem / 16);
-    }
-  }
 }
 
 .inline-chips {

packages/craftcms-legacy/cp/src/js/Craft.js

@@ -1990,7 +1990,6 @@ $.extend(Craft, {
   },
 
   _elementIndexClasses: {},
-  _elementSelectorModalClasses: {},
   _elementEditorClasses: {},
   _uploaderClasses: {},
   _authFormHandlers: {},
@@ -2031,24 +2030,6 @@ $.extend(Craft, {
     this._uploaderClasses[fsType] = func;
   },
 
-  /**
-   * Registers an element selector modal class for a given element type.
-   *
-   * @param {string} elementType
-   * @param {function} func
-   */
-  registerElementSelectorModalClass: function (elementType, func) {
-    if (typeof this._elementSelectorModalClasses[elementType] !== 'undefined') {
-      throw (
-        'An element selector modal class has already been registered for the element type “' +
-        elementType +
-        '”.'
-      );
-    }
-
-    this._elementSelectorModalClasses[elementType] = func;
-  },
-
   registerAuthFormHandler(method, func) {
     if (typeof this._authFormHandlers[method] !== 'undefined') {
       throw `An authentication form handler has already been registered for the method “${method}”.`;
@@ -2097,24 +2078,6 @@ $.extend(Craft, {
     return uploader;
   },
 
-  /**
-   * Creates a new element selector modal for a given element type.
-   *
-   * @param {string} elementType
-   * @param {Object} settings
-   */
-  createElementSelectorModal: function (elementType, settings) {
-    var func;
-
-    if (typeof this._elementSelectorModalClasses[elementType] !== 'undefined') {
-      func = this._elementSelectorModalClasses[elementType];
-    } else {
-      func = Craft.BaseElementSelectorModal;
-    }
-
-    return new func(elementType, settings);
-  },
-
   /**
    * @deprecated in 6.0. Use event listeners directly.
    */

packages/craftcms-ui/package.json

@@ -44,6 +44,15 @@
       "development": "./src/components/*.ts",
       "default": "./dist/components/*.ts.mjs"
     },
+    "./core": {
+      "development": "./src/core/element-selector/index.ts",
+      "types": "./dist/core/element-selector/index.ts.d.mts",
+      "import": "./dist/core/element-selector/index.ts.mjs"
+    },
+    "./core/*": {
+      "development": "./src/core/*.ts",
+      "default": "./dist/core/*.ts.mjs"
+    },
     "./services/*": {
       "development": "./src/services/*.ts",
       "default": "./dist/services/*.ts.mjs"

packages/craftcms-ui/scripts/build.js

@@ -45,8 +45,8 @@ async function generateBundle(config = {}) {
         )),
         ...(await resolveFrom('./src/services/**/!(*.(styles|test)).ts')),
         ...(await resolveFrom('./src/utilities/**/!(*.(styles|test)).ts')),
-        ...(await resolveFrom('./src/services/**/!(*.(styles|test)).ts')),
         ...(await resolveFrom('./src/factory/**/!(*.(styles|test)).ts')),
+        ...(await resolveFrom('./src/core/**/!(*.(styles|test)).ts')),
       },
       minify: !isDeveloping,
       external: ['lit', '@lion/ui'],

packages/craftcms-ui/src/components/dialog/dialog.stories.ts

@@ -5,36 +5,99 @@ import {html} from 'lit';
 import './dialog.js';
 import type CraftDialog from './dialog.js';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+interface DialogArgs {
+  label: string;
+  nonModal: boolean;
+  fullscreen: boolean;
+  closeOnOutsideClick: boolean;
+  body: string;
+}
+
 const meta = {
   title: 'Components/Dialog',
   component: 'craft-dialog',
-  args: {},
+  args: {
+    label: 'Dialog',
+    nonModal: false,
+    fullscreen: false,
+    closeOnOutsideClick: false,
+    body: 'This is some text within a dialog.',
+  },
   parameters: {
     layout: 'centered',
   },
-  render: function (args) {
-    function openDialog() {
-      const dialog = document.getElementById('storybook-dialog') as CraftDialog;
-      dialog.opened = true;
+  render(args: DialogArgs) {
+    const id = 'storybook-dialog';
+
+    function open() {
+      (document.getElementById(id) as CraftDialog).opened = true;
     }
 
     return html`
-      <craft-dialog label="Dialog" id="storybook-dialog">
-        This is some text within a dialog.
+      <craft-dialog
+        id=${id}
+        label=${args.label}
+        ?non-modal=${args.nonModal}
+        ?fullscreen=${args.fullscreen}
+        ?close-on-outside-click=${args.closeOnOutsideClick}
+      >
+        ${args.body}
 
         <craft-button slot="footer" data-dialog="close">Close</craft-button>
       </craft-dialog>
 
-      <craft-button @click="${openDialog}">Open Dialog</craft-button>
+      <craft-button @click=${open}>Open Dialog</craft-button>
     `;
   },
-} satisfies Meta<any>;
+} satisfies Meta<DialogArgs>;
 
 export default meta;
-type Story = StoryObj<any>;
+type Story = StoryObj<DialogArgs>;
+
+export const Default: Story = {};
+
+/** No footer slotted — the footer row collapses rather than leaving a gap. */
+export const NoFooter: Story = {
+  render(args: DialogArgs) {
+    function open() {
+      (document.getElementById('storybook-dialog-bare') as CraftDialog).opened =
+        true;
+    }
+
+    return html`
+      <craft-dialog id="storybook-dialog-bare" label=${args.label}>
+        ${args.body}
+      </craft-dialog>
+
+      <craft-button @click=${open}>Open Dialog</craft-button>
+    `;
+  },
+};
+
+/**
+ * Opened with `show()` rather than `showModal()`, so the dialog stays out of the
+ * top layer and content that appends itself to `<body>` — most legacy CP menus —
+ * still paints above it. The backdrop, Escape and focus containment are the
+ * component's own here.
+ */
+export const NonModal: Story = {
+  args: {nonModal: true},
+};
+
+export const Fullscreen: Story = {
+  args: {fullscreen: true},
+};
+
+/** Long content scrolls inside the body rather than growing the surface. */
+export const Scrolling: Story = {
+  args: {
+    body: Array.from(
+      {length: 40},
+      (_, i) => `Line ${i + 1} of a dialog body that has to scroll. `
+    ).join(''),
+  },
+};
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
-  args: {},
+export const ClosesOnOutsideClick: Story = {
+  args: {closeOnOutsideClick: true},
 };

packages/craftcms-ui/src/components/dialog/dialog.styles.ts

@@ -0,0 +1,125 @@
+import {css} from 'lit';
+
+export default css`
+  :host {
+    display: contents;
+
+    /*
+      Sizing hooks. Declared on \`:host\` so an outer-tree rule or an inline
+      style on the host still wins — shadow-tree \`:host\` rules always lose to
+      the outer tree — and so a subclass can go near-fullscreen without
+      reaching into this component's internals.
+    */
+    --_dialog-inline-size: var(--c-dialog-inline-size, auto);
+    --_dialog-min-inline-size: var(
+      --c-dialog-min-inline-size,
+      min(90vw, 24rem)
+    );
+    --_dialog-max-inline-size: var(
+      --c-dialog-max-inline-size,
+      min(90vw, 40rem)
+    );
+    --_dialog-max-block-size: var(--c-dialog-max-block-size, 85dvh);
+  }
+
+  :host([fullscreen]) {
+    --_dialog-inline-size: var(--c-dialog-inline-size, 100vw);
+    --_dialog-min-inline-size: var(--c-dialog-min-inline-size, 100vw);
+    --_dialog-max-inline-size: var(--c-dialog-max-inline-size, 100vw);
+    --_dialog-max-block-size: var(--c-dialog-max-block-size, 100dvh);
+  }
+
+  dialog {
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    max-width: none;
+    max-height: none;
+    overflow: visible;
+  }
+
+  dialog::backdrop {
+    background-color: rgb(0 0 0 / 0.25);
+  }
+
+  /*
+    Non-modal dialogs get no \`::backdrop\` — that pseudo only paints for the
+    top layer — so one is rendered instead. \`show()\` also leaves the dialog in
+    normal flow, hence the fixed positioning to centre it.
+  */
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0 0 0 / 0.25);
+  }
+
+  :host([non-modal]) dialog {
+    position: fixed;
+    inset: 0;
+    margin: auto;
+    z-index: 100;
+  }
+
+  .surface {
+    display: grid;
+    /* header / body / footer — the body is the only row that flexes. */
+    grid-template-rows: auto 1fr auto;
+    inline-size: var(--_dialog-inline-size);
+    min-inline-size: var(--_dialog-min-inline-size);
+    max-inline-size: var(--_dialog-max-inline-size);
+    max-block-size: var(--_dialog-max-block-size);
+    background-color: var(--c-surface-raised);
+    border-radius: var(--c-radius-md);
+    box-shadow: var(--c-shadow-lg);
+    overflow: hidden;
+  }
+
+  :host([fullscreen]) .surface {
+    border-radius: 0;
+  }
+
+  .header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--c-spacing-md);
+    padding-inline: var(--c-spacing-lg);
+    padding-block-start: var(--c-spacing-lg);
+    padding-block-end: var(--c-spacing-md);
+  }
+
+  .title {
+    font-size: 1.25em;
+    margin: 0;
+  }
+
+  .close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    padding: var(--c-spacing-xs);
+    line-height: 1;
+  }
+
+  .body {
+    /*
+      Pairs with \`1fr\` above: without an explicit \`min-block-size: 0\` a grid
+      item floors at its content height, so a long slotted index would grow the
+      surface past \`--_dialog-max-block-size\` instead of scrolling inside it.
+    */
+    min-block-size: 0;
+    overflow: auto;
+    padding-inline: var(--c-spacing-lg);
+    padding-block-end: var(--c-spacing-lg);
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--c-spacing-sm);
+    padding-inline: var(--c-spacing-lg);
+    padding-block-end: var(--c-spacing-lg);
+  }
+`;