@ember-eui/core 13.0.5 → 14.1.0

package/dist/components/eui-description-list-description.js

@@ -2,7 +2,8 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiDescriptionListDescription = setComponentTemplate(precompileTemplate("\n    <dd class=\"euiDescriptionList__description\" ...attributes>\n      {{yield}}\n    </dd>\n  ", {
+/** The description (`<dd>`) of the term before it, in an EuiDescriptionList. */
+const EuiDescriptionListDescription = setComponentTemplate(precompileTemplate("<dd class=\"euiDescriptionList__description\" ...attributes>\n  {{yield}}\n</dd>", {
   strictMode: true
 }), templateOnly());
 

package/dist/components/eui-description-list-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-description-list-description.js","sources":["../../src/components/eui-description-list-description.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiDescriptionListDescriptionSignature {\n  Element: HTMLElement;\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiDescriptionListDescription: TemplateOnlyComponent<EuiDescriptionListDescriptionSignature> =\n  <template>\n    <dd class=\"euiDescriptionList__description\" ...attributes>\n      {{yield}}\n    </dd>\n  </template>;\n\nexport default EuiDescriptionListDescription;\n"],"names":["EuiDescriptionListDescription","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;AASA,MAAMA,6BACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAIA,oGAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-description-list-description.js","sources":["../../src/components/eui-description-list-description.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** The description (`<dd>`) of the term before it, in an EuiDescriptionList. */\nexport interface EuiDescriptionListDescriptionSignature {\n  Element: HTMLElement;\n  Blocks: {\n    /** The text. */\n    default: [];\n  };\n}\n\nconst EuiDescriptionListDescription: TemplateOnlyComponent<EuiDescriptionListDescriptionSignature> =\n  <template>\n    <dd class=\"euiDescriptionList__description\" ...attributes>\n      {{yield}}\n    </dd>\n  </template>;\n\nexport default EuiDescriptionListDescription;\n"],"names":["EuiDescriptionListDescription","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;AAEA;AASA,MAAMA,6BAAqD,GAAAC,oBAAA,CACzDC,kBAAA,CAAA,kFAAA,EAIA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-description-list-title.js

@@ -2,7 +2,8 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiDescriptonListTitle = setComponentTemplate(precompileTemplate("\n    <dt class=\"euiDescriptionList__title\" ...attributes>\n      {{yield}}\n    </dt>\n  ", {
+/** A term (`<dt>`) in an EuiDescriptionList. */
+const EuiDescriptonListTitle = setComponentTemplate(precompileTemplate("<dt class=\"euiDescriptionList__title\" ...attributes>\n  {{yield}}\n</dt>", {
   strictMode: true
 }), templateOnly());
 

package/dist/components/eui-description-list-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-description-list-title.js","sources":["../../src/components/eui-description-list-title.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiDescriptionListTitleSignature {\n  Element: HTMLElement;\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiDescriptonListTitle: TemplateOnlyComponent<EuiDescriptionListTitleSignature> =\n  <template>\n    <dt class=\"euiDescriptionList__title\" ...attributes>\n      {{yield}}\n    </dt>\n  </template>;\n\nexport default EuiDescriptonListTitle;\n"],"names":["EuiDescriptonListTitle","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;AASA,MAAMA,sBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAIA,8FAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-description-list-title.js","sources":["../../src/components/eui-description-list-title.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A term (`<dt>`) in an EuiDescriptionList. */\nexport interface EuiDescriptionListTitleSignature {\n  Element: HTMLElement;\n  Blocks: {\n    /** The text. */\n    default: [];\n  };\n}\n\nconst EuiDescriptonListTitle: TemplateOnlyComponent<EuiDescriptionListTitleSignature> =\n  <template>\n    <dt class=\"euiDescriptionList__title\" ...attributes>\n      {{yield}}\n    </dt>\n  </template>;\n\nexport default EuiDescriptonListTitle;\n"],"names":["EuiDescriptonListTitle","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;AAEA;AASA,MAAMA,sBAA8C,GAAAC,oBAAA,CAClDC,kBAAA,CAAA,4EAAA,EAIA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-description-list.js

@@ -6,7 +6,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiDescriptionList = setComponentTemplate(precompileTemplate("\n    <dl class={{classNames (if (argOrDefault @compressed false) \"euiDescriptionList--compressed\") type=(argOrDefault @type \"row\") textStyle=(argOrDefault @textStyle \"normal\") align=(argOrDefault @align \"left\") componentName=\"EuiDescriptionList\"}} ...attributes>\n      {{#if @listItems}}\n        {{#each @listItems as |item|}}\n          <EuiDescriptionListTitle class={{@titleProps.className}}>\n            {{item.title}}\n          </EuiDescriptionListTitle>\n          <EuiDescriptionListDescription class={{@descriptionProps.className}}>\n            {{item.description}}\n          </EuiDescriptionListDescription>\n        {{/each}}\n      {{else}}\n        {{yield}}\n      {{/if}}\n    </dl>\n  ", {
+const EuiDescriptionList = setComponentTemplate(precompileTemplate("<dl class={{classNames (if (argOrDefault @compressed false) \"euiDescriptionList--compressed\") type=(argOrDefault @type \"row\") textStyle=(argOrDefault @textStyle \"normal\") align=(argOrDefault @align \"left\") componentName=\"EuiDescriptionList\"}} ...attributes>\n  {{#if @listItems}}\n    {{#each @listItems as |item|}}\n      <EuiDescriptionListTitle class={{@titleProps.className}}>\n        {{item.title}}\n      </EuiDescriptionListTitle>\n      <EuiDescriptionListDescription class={{@descriptionProps.className}}>\n        {{item.description}}\n      </EuiDescriptionListDescription>\n    {{/each}}\n  {{else}}\n    {{yield}}\n  {{/if}}\n</dl>", {
   strictMode: true,
   scope: () => ({
     classNames,

package/dist/components/eui-description-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-description-list.js","sources":["../../src/components/eui-description-list.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiDescriptionListDescription from './eui-description-list-description.gts';\nimport EuiDescriptionListTitle from './eui-description-list-title.gts';\n\nimport type {\n  alignMapping,\n  textStyleMapping,\n  typeMapping} from '../utils/css-mappings/eui-description-list.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiDescriptionListSignature {\n  Element: HTMLElement;\n  Args: {\n    compressed?: boolean;\n    type?: keyof typeof typeMapping;\n    textStyle?: keyof typeof textStyleMapping;\n    align?: keyof typeof alignMapping;\n    listItems?: {\n      title: string;\n      description: string;\n    }[];\n    titleProps?: {\n      className?: string;\n    };\n    descriptionProps?: {\n      className?: string;\n    };\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiDescriptionList: TemplateOnlyComponent<EuiDescriptionListSignature> =\n  <template>\n    <dl\n      class={{classNames\n        (if (argOrDefault @compressed false) \"euiDescriptionList--compressed\")\n        type=(argOrDefault @type \"row\")\n        textStyle=(argOrDefault @textStyle \"normal\")\n        align=(argOrDefault @align \"left\")\n        componentName=\"EuiDescriptionList\"\n      }}\n      ...attributes\n    >\n      {{#if @listItems}}\n        {{#each @listItems as |item|}}\n          <EuiDescriptionListTitle class={{@titleProps.className}}>\n            {{item.title}}\n          </EuiDescriptionListTitle>\n          <EuiDescriptionListDescription class={{@descriptionProps.className}}>\n            {{item.description}}\n          </EuiDescriptionListDescription>\n        {{/each}}\n      {{else}}\n        {{yield}}\n      {{/if}}\n    </dl>\n  </template>;\n\nexport default EuiDescriptionList;\n"],"names":["EuiDescriptionList","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","EuiDescriptionListTitle","EuiDescriptionListDescription","templateOnly"],"mappings":";;;;;;;;AAkCA,MAAMA,kBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAwBA,+sBAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;6BAAAC,sBAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-description-list.js","sources":["../../src/components/eui-description-list.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiDescriptionListDescription from './eui-description-list-description.gts';\nimport EuiDescriptionListTitle from './eui-description-list-title.gts';\n\nimport type {\n  alignMapping,\n  textStyleMapping,\n  typeMapping} from '../utils/css-mappings/eui-description-list.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiDescriptionListSignature {\n  Element: HTMLElement;\n  Args: {\n    /** Smaller text. */\n    compressed?: boolean;\n    /**\n     * `'row'` stacks each title above its description, `'column'` puts them\n     * side by side, `'responsiveColumn'` is a column that stacks on small\n     * screens, `'inline'` flows them as compact inline text.\n     * Defaults to `'row'`.\n     */\n    type?: keyof typeof typeMapping;\n    /**\n     * `'reverse'` styles the descriptions as the prominent text and the\n     * titles as the smaller labels. Defaults to `'normal'`.\n     */\n    textStyle?: keyof typeof textStyleMapping;\n    /** `'left'` or `'center'`. Defaults to `'left'`. */\n    align?: keyof typeof alignMapping;\n    /**\n     * The terms: `[{ title: 'Name', description: 'Jane' }]`. Without it,\n     * pass `EuiDescriptionListTitle` / `EuiDescriptionListDescription` in the\n     * block.\n     */\n    listItems?: {\n      title: string;\n      description: string;\n    }[];\n    /** Props for each title from `@listItems`: `{ className }`. */\n    titleProps?: {\n      className?: string;\n    };\n    /** Props for each description from `@listItems`: `{ className }`. */\n    descriptionProps?: {\n      className?: string;\n    };\n  };\n  Blocks: {\n    /**\n     * Pairs of `EuiDescriptionListTitle` and `EuiDescriptionListDescription`\n     * (ignored when `@listItems` is set).\n     */\n    default: [];\n  };\n}\n\nconst EuiDescriptionList: TemplateOnlyComponent<EuiDescriptionListSignature> =\n  <template>\n    <dl\n      class={{classNames\n        (if (argOrDefault @compressed false) \"euiDescriptionList--compressed\")\n        type=(argOrDefault @type \"row\")\n        textStyle=(argOrDefault @textStyle \"normal\")\n        align=(argOrDefault @align \"left\")\n        componentName=\"EuiDescriptionList\"\n      }}\n      ...attributes\n    >\n      {{#if @listItems}}\n        {{#each @listItems as |item|}}\n          <EuiDescriptionListTitle class={{@titleProps.className}}>\n            {{item.title}}\n          </EuiDescriptionListTitle>\n          <EuiDescriptionListDescription class={{@descriptionProps.className}}>\n            {{item.description}}\n          </EuiDescriptionListDescription>\n        {{/each}}\n      {{else}}\n        {{yield}}\n      {{/if}}\n    </dl>\n  </template>;\n\nexport default EuiDescriptionList;\n"],"names":["EuiDescriptionList","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","EuiDescriptionListTitle","EuiDescriptionListDescription","templateOnly"],"mappings":";;;;;;;;AAyDA,MAAMA,kBAA0C,GAAAC,oBAAA,CAC9CC,kBAAA,CAAA,ipBAAA,EAwBA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;6BAAAC,sBAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-drag-drop-context.js

@@ -0,0 +1,121 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { registerDestructor } from '@ember/destroyable';
+import { hash } from '@ember/helper';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { autoScrollWindowForElements, autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { modifier } from 'ember-modifier';
+import { randomId } from '../-private/random-id.js';
+import { isDraggableData } from '../-private/drag-drop.js';
+import EuiDroppable from './eui-droppable.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+class EuiDragDropContext extends Component {
+  static {
+    g(this.prototype, "drag", [tracked], function () {
+      return null;
+    });
+  }
+  #drag = (i(this, "drag"), void 0);
+  session = 0;
+  /** Scopes the drags to this context (several can share a page). */
+  contextId = `euiDragDropContext_${randomId()}`;
+  constructor(owner, args) {
+    super(owner, args);
+    const stopMonitoring = monitorForElements({
+      canMonitor: ({
+        source
+      }) => isDraggableData(source.data, this.contextId),
+      onDragStart: ({
+        source
+      }) => {
+        const data = source.data;
+        this.start({
+          draggableId: data.draggableId,
+          type: data.type,
+          source: {
+            droppableId: data.droppableId,
+            index: data.index
+          },
+          size: data.size,
+          isKeyboard: false,
+          isClone: data.isClone
+        });
+      },
+      onDrop: ({
+        location
+      }) => {
+        const onList = location.current.dropTargets.some(target => target.data['euiDragDropContext'] === this.contextId);
+        this.end(onList && this.drag?.destination ? 'DROP' : 'CANCEL');
+      }
+    });
+    const stopWindowScroll = autoScrollWindowForElements({
+      canScroll: ({
+        source
+      }) => this.args.autoScrollWindow !== false && isDraggableData(source.data, this.contextId)
+    });
+    registerDestructor(this, () => {
+      stopMonitoring();
+      stopWindowScroll();
+    });
+  }
+  /** Scrolls the element while this context's items are dragged near its edges. */
+  autoScroll = modifier(element => autoScrollForElements({
+    element,
+    canScroll: ({
+      source
+    }) => isDraggableData(source.data, this.contextId)
+  }));
+  start(drag) {
+    this.drag = {
+      ...drag,
+      destination: drag.isKeyboard ? drag.source : null,
+      session: ++this.session
+    };
+    this.args.onDragStart?.({
+      draggableId: drag.draggableId,
+      type: drag.type,
+      source: drag.source
+    });
+  }
+  setDestination(destination) {
+    const drag = this.drag;
+    if (!drag) return;
+    const same = destination?.droppableId === drag.destination?.droppableId && destination?.index === drag.destination?.index;
+    if (same) return;
+    this.drag = {
+      ...drag,
+      destination
+    };
+    this.args.onDragUpdate?.(this.result(this.drag, 'DROP'));
+  }
+  end(reason) {
+    const drag = this.drag;
+    if (!drag) return;
+    this.drag = null;
+    this.args.onDragEnd(this.result(drag, reason));
+  }
+  result(drag, reason) {
+    return {
+      draggableId: drag.draggableId,
+      type: drag.type,
+      source: drag.source,
+      destination: reason === 'CANCEL' ? null : drag.destination,
+      reason
+    };
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{yield (hash Droppable=(component EuiDroppable context=this) autoScroll=this.autoScroll)}}", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        EuiDroppable
+      })
+    }), this);
+  }
+}
+
+export { EuiDragDropContext as default };
+//# sourceMappingURL=eui-drag-drop-context.js.map

package/dist/components/eui-drag-drop-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-drag-drop-context.js","sources":["../../src/components/eui-drag-drop-context.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { registerDestructor } from '@ember/destroyable';\nimport { hash } from '@ember/helper';\n\nimport { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport {\n  autoScrollForElements,\n  autoScrollWindowForElements\n} from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';\nimport { modifier } from 'ember-modifier';\n\nimport { randomId } from '../-private/random-id.ts';\nimport { isDraggableData } from '../-private/drag-drop.ts';\nimport EuiDroppable from './eui-droppable.gts';\n\nimport type { DraggableData } from '../-private/drag-drop.ts';\nimport type { DraggableLocation } from '../utils/drag-drop.ts';\nimport type { EuiDroppableSignature } from './eui-droppable';\nimport type Owner from '@ember/owner';\nimport type { ComponentLike } from '@glint/template';\n\nexport type { DraggableLocation };\n\n/** What `@onDragStart` gets. */\nexport interface DragStart {\n  draggableId: string;\n  type: string;\n  source: DraggableLocation;\n}\n\n/** What `@onDragEnd` gets: `destination` is `null` when dropped outside a list. */\nexport interface DropResult extends DragStart {\n  destination: DraggableLocation | null;\n  /** `'DROP'` or `'CANCEL'` (Escape, or dropped outside). */\n  reason: 'DROP' | 'CANCEL';\n}\n\n/** The drag in progress. */\nexport interface DragState extends DragStart {\n  destination: DraggableLocation | null;\n  /** Size of the dragged item along the list, in px. */\n  size: number;\n  /** Moved with the keyboard (the item itself moves). */\n  isKeyboard: boolean;\n  /** The source list keeps its items (`@cloneDraggables`). */\n  isClone: boolean;\n  /** Increases with each drag, so lists measure their items once per drag. */\n  session: number;\n}\n\n/**\n * Wraps lists whose items can be dragged to reorder them or to move them\n * between lists. It yields `{ Droppable }`; each droppable yields its\n * `Draggable`. You own the lists: update them in `@onDragEnd`, e.g. with\n * `euiDragDropReorder` from `@ember-eui/core/utils/drag-drop`.\n *\n * Dragging with the pointer is handled by Atlassian's pragmatic drag and\n * drop; the keyboard (Space, arrows, Escape) by these components.\n */\nexport interface EuiDragDropContextSignature {\n  Args: {\n    /** Called with the result when an item is dropped (or the drag cancelled). */\n    onDragEnd: (result: DropResult) => void;\n    /** Called when a drag starts. */\n    onDragStart?: (start: DragStart) => void;\n    /** Called when the destination changes during a drag. */\n    onDragUpdate?: (update: DropResult) => void;\n    /** Scrolls the window while dragging near its edges. Defaults to `true`. */\n    autoScrollWindow?: boolean;\n  };\n  Blocks: {\n    default: [\n      {\n        /** A list items can be dropped in; see `EuiDroppable`. */\n        Droppable: ComponentLike<{\n          Element: HTMLDivElement;\n          Args: Omit<EuiDroppableSignature['Args'], 'context'>;\n          Blocks: EuiDroppableSignature['Blocks'];\n        }>;\n        /**\n         * Scrolls another container while its items are dragged near its\n         * edges, e.g. a board holding several lists: `{{dnd.autoScroll}}`.\n         */\n        autoScroll: EuiDragDropContext['autoScroll'];\n      }\n    ];\n  };\n}\n\nexport default class EuiDragDropContext extends Component<EuiDragDropContextSignature> {\n  @tracked drag: DragState | null = null;\n\n  session = 0;\n\n  /** Scopes the drags to this context (several can share a page). */\n  contextId = `euiDragDropContext_${randomId()}`;\n\n  constructor(owner: Owner, args: EuiDragDropContextSignature['Args']) {\n    super(owner, args);\n\n    const stopMonitoring = monitorForElements({\n      canMonitor: ({ source }) => isDraggableData(source.data, this.contextId),\n      onDragStart: ({ source }) => {\n        const data = source.data as DraggableData;\n\n        this.start({\n          draggableId: data.draggableId,\n          type: data.type,\n          source: { droppableId: data.droppableId, index: data.index },\n          size: data.size,\n          isKeyboard: false,\n          isClone: data.isClone\n        });\n      },\n      onDrop: ({ location }) => {\n        const onList = location.current.dropTargets.some(\n          (target) => target.data['euiDragDropContext'] === this.contextId\n        );\n\n        this.end(onList && this.drag?.destination ? 'DROP' : 'CANCEL');\n      }\n    });\n\n    const stopWindowScroll = autoScrollWindowForElements({\n      canScroll: ({ source }) =>\n        this.args.autoScrollWindow !== false &&\n        isDraggableData(source.data, this.contextId)\n    });\n\n    registerDestructor(this, () => {\n      stopMonitoring();\n      stopWindowScroll();\n    });\n  }\n\n  /** Scrolls the element while this context's items are dragged near its edges. */\n  autoScroll = modifier((element: HTMLElement) =>\n    autoScrollForElements({\n      element,\n      canScroll: ({ source }) => isDraggableData(source.data, this.contextId)\n    })\n  );\n\n  start(drag: Omit<DragState, 'destination' | 'session'>): void {\n    this.drag = {\n      ...drag,\n      destination: drag.isKeyboard ? drag.source : null,\n      session: ++this.session\n    };\n    this.args.onDragStart?.({\n      draggableId: drag.draggableId,\n      type: drag.type,\n      source: drag.source\n    });\n  }\n\n  setDestination(destination: DraggableLocation | null): void {\n    const drag = this.drag;\n\n    if (!drag) return;\n\n    const same =\n      destination?.droppableId === drag.destination?.droppableId &&\n      destination?.index === drag.destination?.index;\n\n    if (same) return;\n\n    this.drag = { ...drag, destination };\n    this.args.onDragUpdate?.(this.result(this.drag, 'DROP'));\n  }\n\n  end(reason: 'DROP' | 'CANCEL'): void {\n    const drag = this.drag;\n\n    if (!drag) return;\n\n    this.drag = null;\n    this.args.onDragEnd(this.result(drag, reason));\n  }\n\n  result(drag: DragState, reason: 'DROP' | 'CANCEL'): DropResult {\n    return {\n      draggableId: drag.draggableId,\n      type: drag.type,\n      source: drag.source,\n      destination: reason === 'CANCEL' ? null : drag.destination,\n      reason\n    };\n  }\n\n  <template>\n    {{yield\n      (hash\n        Droppable=(component EuiDroppable context=this)\n        autoScroll=this.autoScroll\n      )\n    }}\n  </template>\n}\n"],"names":["EuiDragDropContext","Component","g","prototype","tracked","i","session","contextId","randomId","constructor","owner","args","stopMonitoring","monitorForElements","canMonitor","source","isDraggableData","data","onDragStart","start","draggableId","type","droppableId","index","size","isKeyboard","isClone","onDrop","location","onList","current","dropTargets","some","target","end","drag","destination","stopWindowScroll","autoScrollWindowForElements","canScroll","autoScrollWindow","registerDestructor","autoScroll","modifier","element","autoScrollForElements","setDestination","same","onDragUpdate","result","reason","onDragEnd","setComponentTemplate","precompileTemplate","strictMode","scope","hash","EuiDroppable"],"mappings":"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"}

package/dist/components/eui-draggable.js

@@ -0,0 +1,226 @@
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { modifier } from 'ember-modifier';
+import cssStyle from '../-private/css-style.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { n } from 'decorator-transforms/runtime-esm';
+
+const SPACING = {
+  none: undefined,
+  s: 'euiDraggable--s',
+  m: 'euiDraggable--m',
+  l: 'euiDraggable--l'
+};
+/**
+ * An item of an `EuiDroppable` list (yielded as `Draggable`). Drag it with
+ * the mouse, or focus it and press Space to lift it, the arrow keys to
+ * move it and Space again to drop it (Escape cancels).
+ */
+
+class EuiDraggable extends Component {
+  element;
+  handle;
+  disconnect;
+  get droppable() {
+    return this.args.droppable;
+  }
+  get drag() {
+    return this.droppable.context.drag;
+  }
+  get isDragging() {
+    return this.drag?.draggableId === this.args.draggableId;
+  }
+  get isClone() {
+    return Boolean(this.droppable.args.cloneDraggables);
+  }
+  get classes() {
+    return ['euiDraggable', this.isClone && 'euiDraggable--hasClone', this.args.customDragHandle && 'euiDraggable--hasCustomDragHandle', this.isDragging && 'euiDraggable--isDragging', this.args.isRemovable && 'euiDraggable--withoutDropAnimation', SPACING[this.args.spacing ?? 'none']].filter(Boolean).join(' ');
+  }
+  get itemClasses() {
+    return ['euiDraggable__item', this.args.customDragHandle && 'euiDraggable__item--hasCustomDragHandle', this.args.isDragDisabled && 'euiDraggable__item--isDisabled', this.isDragging && 'euiDraggable__item--isDragging'].filter(Boolean).join(' ');
+  }
+  /** How far the item slides to make room for the dragged one, in px. */
+  get offset() {
+    const drag = this.drag;
+    if (!drag?.destination) return 0;
+    const listId = this.droppable.args.droppableId;
+    const {
+      source,
+      destination,
+      size
+    } = drag;
+    const index = this.args.index;
+    if (this.isDragging) {
+      // with the keyboard the item itself moves, past the items between
+      if (!drag.isKeyboard || source.droppableId !== listId) return 0;
+      const items = this.droppable.items();
+      const from = items[source.index];
+      const to = items[destination.index];
+      if (!from || !to) return 0;
+      // layout positions, which transforms and scaling leave alone
+      const [start, length] = this.droppable.isHorizontal ? ['offsetLeft', 'offsetWidth'] : ['offsetTop', 'offsetHeight'];
+      return destination.index > source.index ? to[start] + to[length] - (from[start] + from[length]) : to[start] - from[start];
+    }
+    const isSource = source.droppableId === listId;
+    const isDestination = destination.droppableId === listId;
+    if (isSource && isDestination) {
+      if (destination.index > source.index && index > source.index && index <= destination.index) return -size;
+      if (destination.index < source.index && index >= destination.index && index < source.index) return size;
+      return 0;
+    }
+    if (isSource && !drag.isClone && index > source.index) return -size;
+    if (isDestination && index >= destination.index) return size;
+    return 0;
+  }
+  get style() {
+    const offset = this.offset;
+    // the dragged item stays in place, invisible, while its ghost follows the pointer
+    const hidden = this.isDragging && !this.drag?.isKeyboard && !this.isClone;
+    return cssStyle({
+      transform: offset ? this.droppable.isHorizontal ? `translateX(${offset}px)` : `translateY(${offset}px)` : undefined,
+      transition: this.drag && !(this.isDragging && !this.drag.isKeyboard) ? 'transform 0.2s cubic-bezier(0.2, 0, 0, 1)' : undefined,
+      opacity: hidden ? 0 : undefined
+    });
+  }
+  size() {
+    if (!this.element) return 0;
+    // CSS px (not scaled like getBoundingClientRect), as the transforms use
+    return this.droppable.isHorizontal ? this.element.offsetWidth : this.element.offsetHeight;
+  }
+  start(isKeyboard) {
+    this.droppable.context.start({
+      draggableId: this.args.draggableId,
+      type: this.droppable.type,
+      source: {
+        droppableId: this.droppable.args.droppableId,
+        index: this.args.index
+      },
+      size: this.size(),
+      isKeyboard,
+      isClone: this.isClone
+    });
+  }
+  onKeyDown(event) {
+    if (this.args.isDragDisabled) return;
+    const drag = this.drag;
+    const lifted = drag?.isKeyboard && this.isDragging;
+    const backward = this.droppable.isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+    const forward = this.droppable.isHorizontal ? 'ArrowRight' : 'ArrowDown';
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      if (lifted) this.droppable.context.end('DROP');else if (!drag) this.start(true);
+      return;
+    }
+    if (!lifted || !drag?.destination) return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.droppable.context.end('CANCEL');
+    } else if (event.key === backward || event.key === forward) {
+      event.preventDefault();
+      const last = this.droppable.count() - 1;
+      const index = drag.destination.index + (event.key === forward ? 1 : -1);
+      this.droppable.context.setDestination({
+        droppableId: drag.destination.droppableId,
+        index: Math.min(Math.max(index, 0), last)
+      });
+      // keep the moved item in view (pragmatic only auto-scrolls pointer drags)
+      schedule('afterRender', () => this.scrollIntoView());
+    }
+  }
+  /**
+  * Scrolls the closest scrollable container so the item shows where it
+  * moved to (`scrollIntoView` ignores the transform that moves it).
+  */
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  scrollIntoView() {
+    const element = this.element;
+    let container = element?.parentElement;
+    while (container && container !== document.body) {
+      const {
+        overflowX,
+        overflowY
+      } = getComputedStyle(container);
+      const scrolls = /(auto|scroll)/.test(overflowY) && container.scrollHeight > container.clientHeight || /(auto|scroll)/.test(overflowX) && container.scrollWidth > container.clientWidth;
+      if (scrolls) break;
+      container = container.parentElement;
+    }
+    if (!element || !container || container === document.body) return;
+    // where the item is going: its place without the (animating)
+    // transform, moved by its target offset
+    const rect = element.getBoundingClientRect();
+    const current = new DOMMatrixReadOnly(getComputedStyle(element).transform);
+    const horizontal = this.droppable.isHorizontal;
+    const dx = (horizontal ? this.offset : 0) - current.m41;
+    const dy = (horizontal ? 0 : this.offset) - current.m42;
+    const item = {
+      top: rect.top + dy,
+      bottom: rect.bottom + dy,
+      left: rect.left + dx,
+      right: rect.right + dx
+    };
+    const box = container.getBoundingClientRect();
+    if (item.bottom > box.bottom) container.scrollTop += item.bottom - box.bottom;else if (item.top < box.top) container.scrollTop -= box.top - item.top;
+    if (item.right > box.right) container.scrollLeft += item.right - box.right;else if (item.left < box.left) container.scrollLeft -= box.left - item.left;
+  }
+  /** Registers the item with pragmatic drag and drop (again when its handle appears). */
+  connect() {
+    this.disconnect?.();
+    this.disconnect = undefined;
+    const element = this.element;
+    if (!element || this.args.isDragDisabled) return;
+    // with a custom handle, wait for it
+    if (this.args.customDragHandle && !this.handle) return;
+    const context = this.droppable.context;
+    this.disconnect = draggable({
+      element,
+      dragHandle: this.args.customDragHandle ? this.handle : undefined,
+      // the keyboard drag in progress keeps the pointer out
+      canDrag: () => !this.args.isDragDisabled && !context.drag,
+      getInitialData: () => ({
+        euiDragDropContext: context.contextId,
+        draggableId: this.args.draggableId,
+        droppableId: this.droppable.args.droppableId,
+        index: this.args.index,
+        type: this.droppable.type,
+        size: this.size(),
+        isClone: this.isClone
+      })
+    });
+  }
+  register = modifier((element, [isDragDisabled]) => {
+    this.element = element;
+    this.connect();
+    return () => {
+      this.disconnect?.();
+      this.disconnect = undefined;
+    };
+  });
+  /** For `@customDragHandle`: the element that starts a drag. */
+  dragHandle = modifier(handle => {
+    this.handle = handle;
+    handle.setAttribute('data-drag-handle', '');
+    this.connect();
+    return () => {
+      if (this.handle === handle) this.handle = undefined;
+    };
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} data-test-subj=\"draggable\" data-draggable-id={{@draggableId}} tabindex={{unless @isDragDisabled \"0\"}} role=\"button\" aria-roledescription=\"Draggable item\" aria-pressed={{if this.isDragging \"true\" \"false\"}} style={{this.style}} {{this.register @isDragDisabled}} {{on \"keydown\" this.onKeyDown}} ...attributes>\n  <div class={{this.itemClasses}}>\n    {{yield (hash isDragging=this.isDragging dragHandle=this.dragHandle)}}\n  </div>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        hash
+      })
+    }), this);
+  }
+}
+
+export { EuiDraggable as default };
+//# sourceMappingURL=eui-draggable.js.map

package/dist/components/eui-draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-draggable.js","sources":["../../src/components/eui-draggable.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { schedule } from '@ember/runloop';\n\nimport { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';\nimport { modifier } from 'ember-modifier';\n\nimport cssStyle from '../-private/css-style.ts';\n\nimport type { DraggableData } from '../-private/drag-drop.ts';\nimport type EuiDroppable from './eui-droppable.gts';\n\nconst SPACING = {\n  none: undefined,\n  s: 'euiDraggable--s',\n  m: 'euiDraggable--m',\n  l: 'euiDraggable--l'\n};\n\n/**\n * An item of an `EuiDroppable` list (yielded as `Draggable`). Drag it with\n * the mouse, or focus it and press Space to lift it, the arrow keys to\n * move it and Space again to drop it (Escape cancels).\n */\nexport interface EuiDraggableSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Unique id of the item, reported in `onDragEnd`. */\n    draggableId: string;\n    /** Position of the item in its list. */\n    index: number;\n    /** The item cannot be dragged. */\n    isDragDisabled?: boolean;\n    /**\n     * Only a handle drags the item: put the yielded `dragHandle` modifier\n     * on it, e.g. `<EuiIcon @type=\"grab\" {{item.dragHandle}} />`.\n     */\n    customDragHandle?: boolean;\n    /** Skips the drop animation, e.g. for items removed on drop. */\n    isRemovable?: boolean;\n    /** Padding: `'none'`, `'s'`, `'m'` or `'l'`. Defaults to `'none'`. */\n    spacing?: 'none' | 's' | 'm' | 'l';\n    /** @private The list, set by `EuiDroppable`. */\n    droppable: EuiDroppable;\n  };\n  Blocks: {\n    /**\n     * The item's content (one element, which gets the item classes);\n     * yields `{ isDragging, dragHandle }`.\n     */\n    default: [\n      {\n        isDragging: boolean;\n        dragHandle: EuiDraggable['dragHandle'];\n      }\n    ];\n  };\n}\n\nexport default class EuiDraggable extends Component<EuiDraggableSignature> {\n  element?: HTMLElement;\n  handle?: HTMLElement;\n  disconnect?: () => void;\n\n  get droppable(): EuiDroppable {\n    return this.args.droppable;\n  }\n\n  get drag() {\n    return this.droppable.context.drag;\n  }\n\n  get isDragging(): boolean {\n    return this.drag?.draggableId === this.args.draggableId;\n  }\n\n  get isClone(): boolean {\n    return Boolean(this.droppable.args.cloneDraggables);\n  }\n\n  get classes(): string {\n    return [\n      'euiDraggable',\n      this.isClone && 'euiDraggable--hasClone',\n      this.args.customDragHandle && 'euiDraggable--hasCustomDragHandle',\n      this.isDragging && 'euiDraggable--isDragging',\n      this.args.isRemovable && 'euiDraggable--withoutDropAnimation',\n      SPACING[this.args.spacing ?? 'none']\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get itemClasses(): string {\n    return [\n      'euiDraggable__item',\n      this.args.customDragHandle && 'euiDraggable__item--hasCustomDragHandle',\n      this.args.isDragDisabled && 'euiDraggable__item--isDisabled',\n      this.isDragging && 'euiDraggable__item--isDragging'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  /** How far the item slides to make room for the dragged one, in px. */\n  get offset(): number {\n    const drag = this.drag;\n\n    if (!drag?.destination) return 0;\n\n    const listId = this.droppable.args.droppableId;\n    const { source, destination, size } = drag;\n    const index = this.args.index;\n\n    if (this.isDragging) {\n      // with the keyboard the item itself moves, past the items between\n      if (!drag.isKeyboard || source.droppableId !== listId) return 0;\n\n      const items = this.droppable.items();\n      const from = items[source.index];\n      const to = items[destination.index];\n\n      if (!from || !to) return 0;\n\n      // layout positions, which transforms and scaling leave alone\n      const [start, length] = this.droppable.isHorizontal\n        ? (['offsetLeft', 'offsetWidth'] as const)\n        : (['offsetTop', 'offsetHeight'] as const);\n\n      return destination.index > source.index\n        ? to[start] + to[length] - (from[start] + from[length])\n        : to[start] - from[start];\n    }\n\n    const isSource = source.droppableId === listId;\n    const isDestination = destination.droppableId === listId;\n\n    if (isSource && isDestination) {\n      if (\n        destination.index > source.index &&\n        index > source.index &&\n        index <= destination.index\n      )\n        return -size;\n      if (\n        destination.index < source.index &&\n        index >= destination.index &&\n        index < source.index\n      )\n        return size;\n\n      return 0;\n    }\n\n    if (isSource && !drag.isClone && index > source.index) return -size;\n    if (isDestination && index >= destination.index) return size;\n\n    return 0;\n  }\n\n  get style() {\n    const offset = this.offset;\n    // the dragged item stays in place, invisible, while its ghost follows the pointer\n    const hidden = this.isDragging && !this.drag?.isKeyboard && !this.isClone;\n\n    return cssStyle({\n      transform: offset\n        ? this.droppable.isHorizontal\n          ? `translateX(${offset}px)`\n          : `translateY(${offset}px)`\n        : undefined,\n      transition:\n        this.drag && !(this.isDragging && !this.drag.isKeyboard)\n          ? 'transform 0.2s cubic-bezier(0.2, 0, 0, 1)'\n          : undefined,\n      opacity: hidden ? 0 : undefined\n    });\n  }\n\n  size(): number {\n    if (!this.element) return 0;\n\n    // CSS px (not scaled like getBoundingClientRect), as the transforms use\n    return this.droppable.isHorizontal ? this.element.offsetWidth : this.element.offsetHeight;\n  }\n\n  start(isKeyboard: boolean): void {\n    this.droppable.context.start({\n      draggableId: this.args.draggableId,\n      type: this.droppable.type,\n      source: {\n        droppableId: this.droppable.args.droppableId,\n        index: this.args.index\n      },\n      size: this.size(),\n      isKeyboard,\n      isClone: this.isClone\n    });\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.args.isDragDisabled) return;\n\n    const drag = this.drag;\n    const lifted = drag?.isKeyboard && this.isDragging;\n    const backward = this.droppable.isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n    const forward = this.droppable.isHorizontal ? 'ArrowRight' : 'ArrowDown';\n\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n\n      if (lifted) this.droppable.context.end('DROP');\n      else if (!drag) this.start(true);\n\n      return;\n    }\n\n    if (!lifted || !drag?.destination) return;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.droppable.context.end('CANCEL');\n    } else if (event.key === backward || event.key === forward) {\n      event.preventDefault();\n\n      const last = this.droppable.count() - 1;\n      const index = drag.destination.index + (event.key === forward ? 1 : -1);\n\n      this.droppable.context.setDestination({\n        droppableId: drag.destination.droppableId,\n        index: Math.min(Math.max(index, 0), last)\n      });\n\n      // keep the moved item in view (pragmatic only auto-scrolls pointer drags)\n      schedule('afterRender', () => this.scrollIntoView());\n    }\n  }\n\n  /**\n   * Scrolls the closest scrollable container so the item shows where it\n   * moved to (`scrollIntoView` ignores the transform that moves it).\n   */\n  scrollIntoView(): void {\n    const element = this.element;\n    let container = element?.parentElement;\n\n    while (container && container !== document.body) {\n      const { overflowX, overflowY } = getComputedStyle(container);\n      const scrolls =\n        (/(auto|scroll)/.test(overflowY) &&\n          container.scrollHeight > container.clientHeight) ||\n        (/(auto|scroll)/.test(overflowX) &&\n          container.scrollWidth > container.clientWidth);\n\n      if (scrolls) break;\n      container = container.parentElement;\n    }\n\n    if (!element || !container || container === document.body) return;\n\n    // where the item is going: its place without the (animating)\n    // transform, moved by its target offset\n    const rect = element.getBoundingClientRect();\n    const current = new DOMMatrixReadOnly(getComputedStyle(element).transform);\n    const horizontal = this.droppable.isHorizontal;\n    const dx = (horizontal ? this.offset : 0) - current.m41;\n    const dy = (horizontal ? 0 : this.offset) - current.m42;\n    const item = {\n      top: rect.top + dy,\n      bottom: rect.bottom + dy,\n      left: rect.left + dx,\n      right: rect.right + dx\n    };\n    const box = container.getBoundingClientRect();\n\n    if (item.bottom > box.bottom)\n      container.scrollTop += item.bottom - box.bottom;\n    else if (item.top < box.top) container.scrollTop -= box.top - item.top;\n    if (item.right > box.right) container.scrollLeft += item.right - box.right;\n    else if (item.left < box.left) container.scrollLeft -= box.left - item.left;\n  }\n\n  /** Registers the item with pragmatic drag and drop (again when its handle appears). */\n  connect(): void {\n    this.disconnect?.();\n    this.disconnect = undefined;\n\n    const element = this.element;\n\n    if (!element || this.args.isDragDisabled) return;\n    // with a custom handle, wait for it\n    if (this.args.customDragHandle && !this.handle) return;\n\n    const context = this.droppable.context;\n\n    this.disconnect = draggable({\n      element,\n      dragHandle: this.args.customDragHandle ? this.handle : undefined,\n      // the keyboard drag in progress keeps the pointer out\n      canDrag: () => !this.args.isDragDisabled && !context.drag,\n      getInitialData: (): DraggableData => ({\n        euiDragDropContext: context.contextId,\n        draggableId: this.args.draggableId,\n        droppableId: this.droppable.args.droppableId,\n        index: this.args.index,\n        type: this.droppable.type,\n        size: this.size(),\n        isClone: this.isClone\n      })\n    });\n  }\n\n  register = modifier(\n    (element: HTMLElement, [isDragDisabled]: [boolean | undefined]) => {\n      this.element = element;\n      void isDragDisabled;\n      this.connect();\n\n      return () => {\n        this.disconnect?.();\n        this.disconnect = undefined;\n      };\n    }\n  );\n\n  /** For `@customDragHandle`: the element that starts a drag. */\n  dragHandle = modifier((handle: HTMLElement) => {\n    this.handle = handle;\n    handle.setAttribute('data-drag-handle', '');\n    this.connect();\n\n    return () => {\n      if (this.handle === handle) this.handle = undefined;\n    };\n  });\n\n  <template>\n    <div\n      class={{this.classes}}\n      data-test-subj=\"draggable\"\n      data-draggable-id={{@draggableId}}\n      tabindex={{unless @isDragDisabled \"0\"}}\n      role=\"button\"\n      aria-roledescription=\"Draggable item\"\n      aria-pressed={{if this.isDragging \"true\" \"false\"}}\n      style={{this.style}}\n      {{this.register @isDragDisabled}}\n      {{on \"keydown\" this.onKeyDown}}\n      ...attributes\n    >\n      <div class={{this.itemClasses}}>\n        {{yield (hash isDragging=this.isDragging dragHandle=this.dragHandle)}}\n      </div>\n    </div>\n  </template>\n}\n"],"names":["SPACING","none","undefined","s","m","l","EuiDraggable","Component","element","handle","disconnect","droppable","args","drag","context","isDragging","draggableId","isClone","Boolean","cloneDraggables","classes","customDragHandle","isRemovable","spacing","filter","join","itemClasses","isDragDisabled","offset","destination","listId","droppableId","source","size","index","isKeyboard","items","from","to","start","length","isHorizontal","isSource","isDestination","style","hidden","cssStyle","transform","transition","opacity","offsetWidth","offsetHeight","type","onKeyDown","event","lifted","backward","forward","key","preventDefault","end","last","count","setDestination","Math","min","max","schedule","scrollIntoView","n","prototype","action","container","parentElement","document","body","overflowX","overflowY","getComputedStyle","scrolls","test","scrollHeight","clientHeight","scrollWidth","clientWidth","rect","getBoundingClientRect","current","DOMMatrixReadOnly","horizontal","dx","m41","dy","m42","item","top","bottom","left","right","box","scrollTop","scrollLeft","connect","draggable","dragHandle","canDrag","getInitialData","euiDragDropContext","contextId","register","modifier","setAttribute","setComponentTemplate","precompileTemplate","strictMode","scope","on","hash"],"mappings":"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"}

package/dist/components/eui-droppable.js

@@ -0,0 +1,133 @@
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { modifier } from 'ember-modifier';
+import { isDraggableData } from '../-private/drag-drop.js';
+import EuiDraggable from './eui-draggable.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+const SPACING = {
+  none: undefined,
+  s: 'euiDroppable--s',
+  m: 'euiDroppable--m',
+  l: 'euiDroppable--l'
+};
+/**
+ * A list items can be dragged within and dropped into (yielded as
+ * `Droppable` by `EuiDragDropContext`). It yields `{ Draggable }` for its
+ * items.
+ */
+
+class EuiDroppable extends Component {
+  element;
+  // item positions, measured once per drag (before items slide)
+  slots;
+  slotsSession;
+  get type() {
+    return this.args.type ?? 'EUI_DEFAULT';
+  }
+  get isHorizontal() {
+    return this.args.direction === 'horizontal';
+  }
+  get isDropDisabled() {
+    return Boolean(this.args.cloneDraggables || this.args.isDropDisabled);
+  }
+  get context() {
+    return this.args.context;
+  }
+  get isDraggingOver() {
+    return this.context.drag?.destination?.droppableId === this.args.droppableId;
+  }
+  get classes() {
+    const drag = this.context.drag;
+    return ['euiDroppable', this.isDropDisabled && 'euiDroppable--isDisabled', this.isDraggingOver && 'euiDroppable--isDraggingOver', drag?.type === this.type && 'euiDroppable--isDraggingType', this.args.withPanel && 'euiDroppable--withPanel', this.args.grow ? 'euiDroppable--grow' : 'euiDroppable--noGrow', SPACING[this.args.spacing ?? 'none']].filter(Boolean).join(' ');
+  }
+  /** The list's items in order. */
+  items() {
+    if (!this.element) return [];
+    return Array.from(this.element.children).filter(el => el instanceof HTMLElement && el.classList.contains('euiDraggable'));
+  }
+  count() {
+    return this.items().length;
+  }
+  measure() {
+    return this.items().map(item => {
+      const rect = item.getBoundingClientRect();
+      const offset = new DOMMatrixReadOnly(getComputedStyle(item).transform);
+      // positions without the sliding transforms
+      return this.isHorizontal ? {
+        start: rect.left - offset.m41,
+        end: rect.right - offset.m41,
+        draggableId: item.dataset['draggableId'] ?? ''
+      } : {
+        start: rect.top - offset.m42,
+        end: rect.bottom - offset.m42,
+        draggableId: item.dataset['draggableId'] ?? ''
+      };
+    });
+  }
+  /** Index in the final list for a pointer position. */
+  indexAt(position) {
+    const drag = this.context.drag;
+    if (!this.slots || this.slotsSession !== drag?.session) {
+      this.slots = this.measure();
+      this.slotsSession = drag?.session;
+    }
+    const slots = this.slots;
+    const others = slots.filter(slot => slot.draggableId !== drag?.draggableId);
+    return others.filter(slot => (slot.start + slot.end) / 2 < position).length;
+  }
+  /** The list as a pragmatic drag and drop target. */
+  register = modifier(element => {
+    this.element = element;
+    const context = this.context;
+    return combine(autoScrollForElements({
+      element,
+      canScroll: ({
+        source
+      }) => this.args.autoScroll !== false && isDraggableData(source.data, context.contextId)
+    }), dropTargetForElements({
+      element,
+      getData: () => ({
+        euiDragDropContext: context.contextId,
+        droppableId: this.args.droppableId
+      }),
+      canDrop: ({
+        source
+      }) => isDraggableData(source.data, context.contextId) && source.data.type === this.type && !this.isDropDisabled,
+      onDrag: ({
+        location,
+        self
+      }) => {
+        // only the innermost list under the pointer takes the item
+        if (location.current.dropTargets[0]?.element !== self.element) return;
+        const {
+          clientX,
+          clientY
+        } = location.current.input;
+        context.setDestination({
+          droppableId: this.args.droppableId,
+          index: this.indexAt(this.isHorizontal ? clientX : clientY)
+        });
+      },
+      onDragLeave: () => {
+        if (this.isDraggingOver) context.setDestination(null);
+      }
+    }));
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} data-test-subj=\"droppable\" data-droppable-id={{@droppableId}} {{this.register}} ...attributes>\n  {{yield (hash Draggable=(component EuiDraggable droppable=this))}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        EuiDraggable
+      })
+    }), this);
+  }
+}
+
+export { EuiDroppable as default };
+//# sourceMappingURL=eui-droppable.js.map