@esri/calcite-components 1.7.0-next.1 → 1.7.0-next.11

package/dist/collection/components/segmented-control/segmented-control.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 import { Build, h, Host, } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -9,6 +9,7 @@ import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInp
 import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-segmented-control-item`s.
  */
@@ -27,17 +28,21 @@ export class SegmentedControl {
         this.selectItem(event.target, true);
       }
     };
+    this.mutationObserver = createObserver("mutation", () => this.setUpItems());
     this.appearance = "solid";
     this.disabled = false;
     this.form = undefined;
     this.required = false;
-    this.layout = "horizontal";
     this.name = undefined;
+    this.layout = "horizontal";
     this.scale = "m";
     this.value = null;
     this.selectedItem = undefined;
     this.width = "auto";
   }
+  handlePropsChange() {
+    this.handleItemPropChange();
+  }
   valueHandler(value) {
     const items = this.getItems();
     items.forEach((item) => (item.checked = item.value === value));
@@ -63,14 +68,7 @@ export class SegmentedControl {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     setUpLoadableComponent(this);
-    const items = this.getItems();
-    const lastChecked = items.filter((item) => item.checked).pop();
-    if (lastChecked) {
-      this.selectItem(lastChecked);
-    }
-    else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
+    this.setUpItems();
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.value);
@@ -80,11 +78,14 @@ export class SegmentedControl {
     connectInteractive(this);
     connectLabel(this);
     connectForm(this);
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.handleItemPropChange();
   }
   disconnectedCallback() {
     disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
+    this.mutationObserver?.unobserve(this.el);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -151,6 +152,14 @@ export class SegmentedControl {
     await componentFocusable(this);
     (this.selectedItem || this.getItems()[0])?.focus();
   }
+  handleItemPropChange() {
+    const items = this.getItems();
+    items.forEach((item) => {
+      item.appearance = this.appearance;
+      item.layout = this.layout;
+      item.scale = this.scale;
+    });
+  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -186,6 +195,16 @@ export class SegmentedControl {
       match.focus();
     }
   }
+  setUpItems() {
+    const items = this.getItems();
+    const lastChecked = items.filter((item) => item.checked).pop();
+    if (lastChecked) {
+      this.selectItem(lastChecked);
+    }
+    else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
+  }
   static get is() { return "calcite-segmented-control"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -282,6 +301,23 @@ export class SegmentedControl {
         "reflect": true,
         "defaultValue": "false"
       },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission."
+        },
+        "attribute": "name",
+        "reflect": true
+      },
       "layout": {
         "type": "string",
         "mutable": false,
@@ -305,23 +341,6 @@ export class SegmentedControl {
         "reflect": true,
         "defaultValue": "\"horizontal\""
       },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies the name of the component.\n\nRequired to pass the component's `value` on form submission."
-        },
-        "attribute": "name",
-        "reflect": true
-      },
       "scale": {
         "type": "string",
         "mutable": false,
@@ -454,6 +473,15 @@ export class SegmentedControl {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "appearance",
+        "methodName": "handlePropsChange"
+      }, {
+        "propName": "layout",
+        "methodName": "handlePropsChange"
+      }, {
+        "propName": "scale",
+        "methodName": "handlePropsChange"
+      }, {
         "propName": "value",
         "methodName": "valueHandler"
       }, {

package/dist/collection/components/segmented-control-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 export const SLOTS = {
   input: "input",

package/dist/collection/components/segmented-control-item/segmented-control-item.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 import { h, Host, } from "@stencil/core";
-import { getElementProp, toAriaBoolean } from "../../utils/dom";
+import { toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS } from "./resources";
 export class SegmentedControlItem {
   constructor() {
@@ -13,15 +13,20 @@ export class SegmentedControlItem {
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.value = undefined;
+    this.appearance = "solid";
+    this.layout = "horizontal";
+    this.scale = "m";
   }
   handleCheckedChange() {
     this.calciteInternalSegmentedControlItemChange.emit();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
   render() {
-    const { checked, value } = this;
-    const scale = getElementProp(this.el, "scale", "m");
-    const appearance = getElementProp(this.el, "appearance", "solid");
-    const layout = getElementProp(this.el, "layout", "horizontal");
+    const { appearance, checked, layout, scale, value } = this;
     const iconStartEl = this.iconStart ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
     const iconEndEl = this.iconEnd ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     return (h(Host, { "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, h("label", { class: {
@@ -133,6 +138,87 @@ export class SegmentedControlItem {
         },
         "attribute": "value",
         "reflect": false
+      },
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>",
+          "resolved": "\"outline\" | \"outline-fill\" | \"solid\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "Appearance": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`."
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"solid\""
+      },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout",
+          "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`."
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "\"horizontal\""
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`."
+        },
+        "attribute": "scale",
+        "reflect": false,
+        "defaultValue": "\"m\""
       }
     };
   }

package/dist/collection/components/select/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/select/select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 import { Fragment, h, } from "@stencil/core";
 import { focusElement } from "../../utils/dom";
@@ -192,7 +192,7 @@ export class Select {
   }
   render() {
     return (h(Fragment, null, h("select", { "aria-label": getLabelText(this), class: CSS.select, disabled: this.disabled, onChange: this.handleInternalSelectChange,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeSelectRef }, h("slot", null)), this.renderChevron(), h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-select"; }

package/dist/collection/components/sheet/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/{dropdown-group → sheet}/resources.js

@@ -1,10 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 export const CSS = {
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
+  scrim: "scrim",
+  container: "container",
+  containerOpen: "container--open",
+  content: "content",
+  containerSlottedInShell: "container--slotted-in-shell",
 };

package/dist/collection/components/sheet/sheet.css

@@ -0,0 +1,248 @@
+/* mixins & extensions */
+/* helper to properly scale internal durations */
+/**
+* Currently only used in Checkbox.
+*/
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-sheet-scrim-background: Specifies the background color of the sheet scrim.
+* @prop --calcite-sheet-width: When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+* @prop --calcite-sheet-max-width: When `position` is `"inline-start"` or `"inline-end"`, specifies the maximum width of the component.
+* @prop --calcite-sheet-min-width: When `position` is `"inline-start"` or `"inline-end"`, specifies the minimum width of the component.
+* @prop --calcite-sheet-height:  When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+* @prop --calcite-sheet-max-height:  When `position` is `"block-start"` or `"block-end"`, specifies the maximum height of the component.
+* @prop --calcite-sheet-min-height:  When `position` is `"block-start"` or `"block-end"`, specifies the minimum height of the component.
+*
+*/
+:host {
+  position: absolute;
+  inset: 0px;
+  z-index: var(--calcite-app-z-index-overlay);
+  display: flex;
+  visibility: hidden !important;
+  --calcite-sheet-scrim-background-internal: rgba(0, 0, 0, 0.85);
+  --calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, 0.08), 0 -2px 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-scrim-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+}
+
+.calcite--rtl {
+  --calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);
+}
+
+.container {
+  visibility: hidden;
+  position: fixed;
+  z-index: var(--calcite-app-z-index-overlay);
+  display: flex;
+  overflow-y: hidden;
+  color: var(--calcite-ui-text-2);
+  opacity: 0;
+  transition: visibility 0ms linear var(--calcite-internal-animation-timing-medium), opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);
+}
+
+:host([position=inline-start]) .container {
+  justify-content: flex-start;
+  inset-block: 0;
+  inset-inline: 0 auto;
+  --calcite-sheet-hidden-position-internal: translate3d(-1rem, 0, 0);
+}
+
+:host([position=inline-end]) .container {
+  justify-content: flex-end;
+  inset-block: 0;
+  inset-inline: auto 0;
+  --calcite-sheet-hidden-position-internal: translate3d(1rem, 0, 0);
+}
+
+:host([position=block-start]) .container {
+  align-items: flex-start;
+  inset-block: 0 auto;
+  inset-inline: 0;
+  --calcite-sheet-hidden-position-internal: translate3d(0, -1rem, 0);
+}
+
+:host([position=block-end]) .container {
+  align-items: flex-end;
+  inset-block: auto 0;
+  inset-inline: 0;
+  --calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0);
+}
+
+:host([display-mode=float]) .container {
+  --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+  --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+:host([display-mode=overlay][position=inline-start]) .container {
+  box-shadow: var(--calcite-scrim-shadow-inline-start-internal);
+}
+
+:host([display-mode=overlay][position=inline-end]) .container {
+  box-shadow: var(--calcite-scrim-shadow-inline-end-internal);
+}
+
+:host([display-mode=overlay][position=block-start]) .container {
+  box-shadow: var(--calcite-scrim-shadow-block-start-internal);
+}
+
+:host([display-mode=overlay][position=block-end]) .container {
+  box-shadow: var(--calcite-scrim-shadow-block-end-internal);
+}
+
+:host([position^=inline]) .container,
+:host([position^=inline]) .content {
+  inline-size: var(--calcite-sheet-width-internal);
+  max-inline-size: var(--calcite-sheet-max-width-internal);
+  min-inline-size: var(--calcite-sheet-min-width-internal);
+}
+
+:host([position^=block]) .container,
+:host([position^=block]) .content {
+  block-size: var(--calcite-sheet-height-internal);
+  max-block-size: var(--calcite-sheet-max-height-internal);
+  min-block-size: var(--calcite-sheet-min-height-internal);
+}
+
+:host([display-mode=float][position^=inline]) .container {
+  block-size: calc(100% - 1.5rem);
+  max-block-size: calc(100% - 1.5rem);
+  min-block-size: calc(100% - 1.5rem);
+}
+
+:host([display-mode=float][position^=block]) .container {
+  inline-size: calc(100% - 1.5rem);
+  max-inline-size: calc(100% - 1.5rem);
+  min-inline-size: calc(100% - 1.5rem);
+}
+
+:host([position^=inline][width-scale=s]) {
+  --calcite-sheet-width-internal: var(--calcite-sheet-width, 20vw);
+  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 20vw);
+  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 20vw);
+}
+
+:host([position^=inline][width-scale=m]) {
+  --calcite-sheet-width-internal: var(--calcite-sheet-width, 30vw);
+  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 30vw);
+  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 30vw);
+}
+
+:host([position^=inline][width-scale=l]) {
+  --calcite-sheet-width-internal: var(--calcite-sheet-width, 40vw);
+  --calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 40vw);
+  --calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 40vw);
+}
+
+:host([position^=block][height-scale=s]) {
+  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
+  --calcite-sheet-height-internal: var(--calcite-sheet-height, 20vh);
+  --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh);
+}
+
+:host([position^=block][height-scale=m]) {
+  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
+  --calcite-sheet-height-internal: var(--calcite-sheet-height, 40vh);
+  --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh);
+}
+
+:host([position^=block][height-scale=l]) {
+  --calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
+  --calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);
+  --calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh);
+}
+
+.scrim {
+  --calcite-scrim-background: var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));
+  position: fixed;
+  inset: 0px;
+  display: flex;
+  overflow-y: hidden;
+}
+
+:host([opened]) {
+  visibility: visible !important;
+}
+
+.content {
+  position: relative;
+  z-index: var(--calcite-app-z-index-modal);
+  box-sizing: border-box;
+  display: block;
+  max-block-size: 100%;
+  max-inline-size: 100%;
+  overflow-y: hidden;
+  padding: 0px;
+  background-color: var(--calcite-ui-foreground-1);
+  max-block-size: 100%;
+  visibility: hidden;
+  transition: transform var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-medium), opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transform: var(--calcite-sheet-hidden-position-internal);
+}
+
+.container--open .content {
+  transform: translate3d(0, 0, 0);
+}
+
+:host([display-mode=float]) .content,
+:host([display-mode=float]) .container {
+  border-radius: 0.25rem;
+}
+
+:host([display-mode=float]) .container {
+  padding: 0.75rem;
+}
+
+.container--open {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0ms;
+}
+.container--open .content {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+  transition: transform var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transition-delay: 0ms;
+}
+
+:host([position=inline-start]) .content,
+:host([position=inline-end]) .content {
+  block-size: 100%;
+}
+
+:host([position=block-start]) .content,
+:host([position=block-end]) .content {
+  inline-size: 100%;
+}
+
+/**
+ * Conditional styles for when Sheet is slotted in Shell
+ */
+:host([position]) .container--slotted-in-shell {
+  pointer-events: auto;
+  position: absolute;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 100%;
+  block-size: 100%;
+  max-block-size: 100%;
+  min-block-size: 100%;
+}
+:host([position]) .container--slotted-in-shell calcite-scrim {
+  position: absolute;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}