@esri/calcite-components 1.4.0-next.22 → 1.4.0-next.24

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-05-19T00:34:02",
+  "timestamp": "2023-05-22T18:34:05",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -20167,6 +20167,98 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/stack/stack.tsx",
+      "encapsulation": "shadow",
+      "tag": "calcite-stack",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- A slot for adding content."
+        },
+        {
+          "name": "slot",
+          "text": "actions-start - A slot for adding actionable `calcite-action` elements before the content of the component."
+        },
+        {
+          "name": "slot",
+          "text": "content-start - A slot for adding non-actionable elements before content of the component."
+        },
+        {
+          "name": "slot",
+          "text": "content-end - A slot for adding non-actionable elements after content of the component."
+        },
+        {
+          "name": "slot",
+          "text": "actions-end - A slot for adding actionable `calcite-action` elements after the content of the component."
+        }
+      ],
+      "usage": {
+        "Basic": "```html\n<calcite-stack>\n  <calcite-action appearance=\"transparent\" text=\"banana\" icon=\"banana\" slot=\"actions-start\"></calcite-action>\n  <calcite-chip slot=\"content-start\" value=\"chip\" scale=\"s\" appearance=\"outline\">My great chip</calcite-chip>\n  Hello World\n  <calcite-avatar slot=\"content-end\" thumbnail=\"http://placekitten.com/105/105\" scale=\"s\"> </calcite-avatar>\n  <calcite-action appearance=\"transparent\" text=\"Close\" icon=\"x\" slot=\"actions-end\"></calcite-action>\n</calcite-stack>\n```\n",
+        "Disabled": "```html\n<calcite-stack disabled>\n  <calcite-action appearance=\"transparent\" text=\"banana\" icon=\"banana\" slot=\"actions-start\"></calcite-action>\n  Hello World\n  <calcite-avatar slot=\"content-end\" thumbnail=\"http://placekitten.com/105/105\" scale=\"s\"> </calcite-avatar>\n  <calcite-chip slot=\"content-start\" value=\"chip\" scale=\"s\" appearance=\"outline\">My great chip</calcite-chip>\n  <calcite-action appearance=\"transparent\" text=\"Close\" icon=\"x\" slot=\"actions-end\"></calcite-action>\n</calcite-stack>\n```\n"
+      },
+      "props": [
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "When `true`, content interaction is prevented and displayed with lower opacity.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [
+        {
+          "name": "--calcite-stack-padding-block",
+          "annotation": "prop",
+          "docs": "Specifies the block padding of the component's content."
+        },
+        {
+          "name": "--calcite-stack-padding-inline",
+          "annotation": "prop",
+          "docs": "Specifies the inline padding of the component's content."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "docs": "A slot for adding content."
+        },
+        {
+          "name": "actions-end",
+          "docs": "A slot for adding actionable `calcite-action` elements after the content of the component."
+        },
+        {
+          "name": "actions-start",
+          "docs": "A slot for adding actionable `calcite-action` elements before the content of the component."
+        },
+        {
+          "name": "content-end",
+          "docs": "A slot for adding non-actionable elements after content of the component."
+        },
+        {
+          "name": "content-start",
+          "docs": "A slot for adding non-actionable elements before content of the component."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "./src/components/stepper/stepper.tsx",
       "encapsulation": "shadow",

package/dist/extras/vscode-data.json

@@ -5482,6 +5482,19 @@
         }
       ]
     },
+    {
+      "name": "calcite-stack",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "When `true`, content interaction is prevented and displayed with lower opacity."
+        }
+      ]
+    },
     {
       "name": "calcite-stepper",
       "description": {

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.22
+ * v1.4.0-next.24
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.22
+ * v1.4.0-next.24
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.22
+ * v1.4.0-next.24
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.22
+ * v1.4.0-next.24
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/combobox/resources.d.ts

@@ -2,7 +2,5 @@ export declare const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export declare const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export declare const ComboboxChildSelector: string;
 export declare const CSS: {
-  labelActive: string;
-  labelSelected: string;
   listContainer: string;
 };

package/dist/types/components/sortable-list/sortable-list.d.ts

@@ -3,10 +3,11 @@ import Sortable from "sortablejs";
 import { InteractiveComponent } from "../../utils/interactive";
 import { HandleNudge } from "../handle/interfaces";
 import { Layout } from "../interfaces";
+import { SortableComponent } from "../../utils/sortableComponent";
 /**
  * @slot - A slot for adding sortable items.
  */
-export declare class SortableList implements InteractiveComponent {
+export declare class SortableList implements InteractiveComponent, SortableComponent {
   /**
    * Specifies which items inside the element should be draggable.
    */
@@ -34,7 +35,6 @@ export declare class SortableList implements InteractiveComponent {
    */
   loading: boolean;
   el: HTMLCalciteSortableListElement;
-  handleActivated: boolean;
   items: Element[];
   mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   sortable: Sortable;
@@ -47,8 +47,8 @@ export declare class SortableList implements InteractiveComponent {
   calciteListOrderChange: EventEmitter<void>;
   calciteHandleNudgeNextHandler(event: CustomEvent<HandleNudge>): void;
   handleNudgeEvent(event: CustomEvent<HandleNudge>): void;
-  setUpDragAndDrop(): void;
-  cleanUpDragAndDrop(): void;
+  setUpSorting(): void;
   beginObserving(): void;
+  endObserving(): void;
   render(): VNode;
 }

package/dist/types/components/stack/resources.d.ts

@@ -0,0 +1,14 @@
+export declare const CSS: {
+  container: string;
+  actionsStart: string;
+  contentStart: string;
+  content: string;
+  contentEnd: string;
+  actionsEnd: string;
+};
+export declare const SLOTS: {
+  actionsStart: string;
+  contentStart: string;
+  contentEnd: string;
+  actionsEnd: string;
+};

package/dist/types/components/stack/stack.d.ts

@@ -0,0 +1,26 @@
+import { VNode } from "../../stencil-public-runtime";
+/**
+ * @slot - A slot for adding content.
+ * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
+ * @slot content-start - A slot for adding non-actionable elements before content of the component.
+ * @slot content-end - A slot for adding non-actionable elements after content of the component.
+ * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
+ */
+export declare class Stack {
+  /**  When `true`, content interaction is prevented and displayed with lower opacity. */
+  disabled: boolean;
+  hasActionsStart: boolean;
+  hasActionsEnd: boolean;
+  hasContentStart: boolean;
+  hasContentEnd: boolean;
+  renderActionsStart(): VNode;
+  renderActionsEnd(): VNode;
+  renderContentStart(): VNode;
+  renderDefaultContent(): VNode;
+  renderContentEnd(): VNode;
+  render(): VNode;
+  handleActionsStartSlotChange: (event: Event) => void;
+  handleActionsEndSlotChange: (event: Event) => void;
+  handleContentStartSlotChange: (event: Event) => void;
+  handleContentEndSlotChange: (event: Event) => void;
+}

package/dist/types/components/value-list/value-list.d.ts

@@ -8,12 +8,13 @@ import { ItemData, ListFocusId } from "../pick-list/shared-list-logic";
 import { ListItemAndHandle } from "../value-list-item/interfaces";
 import { ValueListMessages } from "./assets/value-list/t9n";
 import { ICON_TYPES } from "./resources";
+import { SortableComponent } from "../../utils/sortableComponent";
 /**
  * @deprecated Use the `list` component instead.
  * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
  */
-export declare class ValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
+export declare class ValueList<ItemElement extends HTMLCalciteValueListItemElement = HTMLCalciteValueListItemElement> implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent, SortableComponent {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    */
@@ -119,8 +120,7 @@ export declare class ValueList<ItemElement extends HTMLCalciteValueListItemEleme
   setUpFilter(): void;
   setFilterEl: (el: HTMLCalciteFilterElement) => void;
   setFilteredItems: (filteredItems: HTMLCalciteValueListItemElement[]) => void;
-  setUpDragAndDrop(): void;
-  cleanUpDragAndDrop(): void;
+  setUpSorting(): void;
   deselectRemovedItems: any;
   deselectSiblingItems: any;
   selectSiblings: any;

package/dist/types/components.d.ts

@@ -3643,6 +3643,12 @@ export namespace Components {
          */
         "width": Width;
     }
+    interface CalciteStack {
+        /**
+          * When `true`, content interaction is prevented and displayed with lower opacity.
+         */
+        "disabled": boolean;
+    }
     interface CalciteStepper {
         /**
           * Set the last `calcite-stepper-item` as active.
@@ -5124,6 +5130,12 @@ declare global {
         prototype: HTMLCalciteSplitButtonElement;
         new (): HTMLCalciteSplitButtonElement;
     };
+    interface HTMLCalciteStackElement extends Components.CalciteStack, HTMLStencilElement {
+    }
+    var HTMLCalciteStackElement: {
+        prototype: HTMLCalciteStackElement;
+        new (): HTMLCalciteStackElement;
+    };
     interface HTMLCalciteStepperElement extends Components.CalciteStepper, HTMLStencilElement {
     }
     var HTMLCalciteStepperElement: {
@@ -5326,6 +5338,7 @@ declare global {
         "calcite-slider": HTMLCalciteSliderElement;
         "calcite-sortable-list": HTMLCalciteSortableListElement;
         "calcite-split-button": HTMLCalciteSplitButtonElement;
+        "calcite-stack": HTMLCalciteStackElement;
         "calcite-stepper": HTMLCalciteStepperElement;
         "calcite-stepper-item": HTMLCalciteStepperItemElement;
         "calcite-switch": HTMLCalciteSwitchElement;
@@ -8709,6 +8722,12 @@ declare namespace LocalJSX {
          */
         "width"?: Width;
     }
+    interface CalciteStack {
+        /**
+          * When `true`, content interaction is prevented and displayed with lower opacity.
+         */
+        "disabled"?: boolean;
+    }
     interface CalciteStepper {
         /**
           * When `true`, displays a status icon in the `calcite-stepper-item` heading.
@@ -9455,6 +9474,7 @@ declare namespace LocalJSX {
         "calcite-slider": CalciteSlider;
         "calcite-sortable-list": CalciteSortableList;
         "calcite-split-button": CalciteSplitButton;
+        "calcite-stack": CalciteStack;
         "calcite-stepper": CalciteStepper;
         "calcite-stepper-item": CalciteStepperItem;
         "calcite-switch": CalciteSwitch;
@@ -9568,6 +9588,7 @@ declare module "@stencil/core" {
             "calcite-slider": LocalJSX.CalciteSlider & JSXBase.HTMLAttributes<HTMLCalciteSliderElement>;
             "calcite-sortable-list": LocalJSX.CalciteSortableList & JSXBase.HTMLAttributes<HTMLCalciteSortableListElement>;
             "calcite-split-button": LocalJSX.CalciteSplitButton & JSXBase.HTMLAttributes<HTMLCalciteSplitButtonElement>;
+            "calcite-stack": LocalJSX.CalciteStack & JSXBase.HTMLAttributes<HTMLCalciteStackElement>;
             "calcite-stepper": LocalJSX.CalciteStepper & JSXBase.HTMLAttributes<HTMLCalciteStepperElement>;
             "calcite-stepper-item": LocalJSX.CalciteStepperItem & JSXBase.HTMLAttributes<HTMLCalciteStepperItemElement>;
             "calcite-switch": LocalJSX.CalciteSwitch & JSXBase.HTMLAttributes<HTMLCalciteSwitchElement>;

package/dist/types/preact.d.ts

@@ -334,6 +334,8 @@ declare module "preact/src/jsx" {
         "oncalciteSplitButtonSecondaryClick"?: (event: CustomEvent<any>) => void;
       }
 
+      "calcite-stack": JSX.CalciteStack & JSXInternal.HTMLAttributes<HTMLCalciteStackElement>
+
       "calcite-stepper": Omit<JSX.CalciteStepper, "onCalciteStepperItemChange" | "onCalciteInternalStepperItemChange"> & JSXInternal.HTMLAttributes<HTMLCalciteStepperElement> & {
         "oncalciteStepperItemChange"?: (event: CustomEvent<any>) => void;
         "oncalciteInternalStepperItemChange"?: (event: CustomEvent<any>) => void;

package/dist/types/utils/sortableComponent.d.ts

@@ -0,0 +1,39 @@
+import Sortable from "sortablejs";
+/**
+ * Defines interface for components with sorting functionality.
+ */
+export interface SortableComponent {
+  /**
+   * The host element.
+   */
+  readonly el: HTMLElement;
+  /**
+   * The Sortable instance.
+   */
+  sortable: Sortable;
+}
+/**
+ * Helper to keep track of a SortableComponent. This should be called in the `connectedCallback` lifecycle method as well as any other method necessary to rebuild the sortable instance.
+ *
+ * @param {SortableComponent} component - The sortable component.
+ * @param {SortableComponent} [options] - Sortable options object.
+ */
+export declare function connectSortableComponent(component: SortableComponent, options?: Sortable.Options): void;
+/**
+ * Helper to remove track of a SortableComponent. This should be called in the `disconnectedCallback` lifecycle method.
+ *
+ * @param {SortableComponent} component - The sortable component.
+ */
+export declare function disconnectSortableComponent(component: SortableComponent): void;
+/**
+ * Helper to handle nested SortableComponents on `Sortable.onStart`.
+ *
+ * @param {SortableComponent} activeComponent - The active sortable component.
+ */
+export declare function onSortingStart(activeComponent: SortableComponent): void;
+/**
+ * Helper to handle nested SortableComponents on `Sortable.onEnd`.
+ *
+ * @param {SortableComponent} activeComponent - The active sortable component.
+ */
+export declare function onSortingEnd(activeComponent: SortableComponent): void;