@esri/calcite-components 1.0.0-beta.70 → 1.0.0-beta.74

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -89,21 +83,21 @@
 }
 
 .container {
-  width: 100%;
   display: inline-grid;
+  width: 100%;
   align-items: center;
   grid-template-columns: 1fr auto;
 }
 
 .preview {
   grid-column: 2/3;
-  display: flex;
-  align-items: center;
   pointer-events: none;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  display: flex;
+  align-items: center;
   z-index: 1;
 }
 
@@ -114,6 +108,6 @@
 
 .input {
   grid-column: 1/3;
-  text-transform: uppercase;
   width: 100%;
+  text-transform: uppercase;
 }

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.js

@@ -6,9 +6,8 @@ import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from
 import { hexChar, hexToRGB, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../calcite-color-picker/utils";
 import Color from "color";
 import { CSS } from "./resources";
-import { focusElement, getElementDir } from "../../utils/dom";
+import { focusElement } from "../../utils/dom";
 import { TEXT } from "../calcite-color-picker/resources";
-import { getKey } from "../../utils/key";
 const DEFAULT_COLOR = Color();
 export class CalciteColorPickerHexInput {
   constructor() {
@@ -133,7 +132,7 @@ export class CalciteColorPickerHexInput {
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { internalColor, value } = this;
-    const key = getKey(event.key);
+    const key = event.key;
     if (key === "Tab" || key === "Enter") {
       this.onInputChange();
       return;
@@ -164,11 +163,10 @@ export class CalciteColorPickerHexInput {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { el, intlHex, value } = this;
+    const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    const elementDir = getElementDir(el);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, dir: elementDir, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
       hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------

package/dist/collection/components/calcite-color-picker-swatch/calcite-color-picker-swatch.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -85,8 +79,8 @@
 }
 
 :host {
-  display: inline-flex;
   position: relative;
+  display: inline-flex;
 }
 
 :host([scale=s]) {
@@ -109,7 +103,6 @@
   height: inherit;
   width: inherit;
 }
-
 .swatch rect {
   transition-property: all;
   transition-duration: 150ms;
@@ -117,11 +110,11 @@
 }
 
 .no-color-icon {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
   height: 100%;
   width: 100%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: absolute;
 }

package/dist/collection/components/calcite-color-picker-swatch/resources.js

@@ -7,6 +7,6 @@ export const CSS = {
   noColorIcon: "no-color-icon"
 };
 export const COLORS = {
-  borderLight: "rgba(0, 0, 0, 0.15)",
+  borderLight: "rgba(0, 0, 0, 0.3)",
   borderDark: "rgba(255, 255, 255, 0.15)"
 };

package/dist/collection/components/calcite-combobox/calcite-combobox.css

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :root {
-  --calcite-animation-timing: 300ms;
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
 }
 
 .calcite-animate {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -91,10 +85,9 @@
 *
 * @prop --calcite-combobox-input-height: the height of the combobox input
 */
-
 :host {
-  display: block;
   position: relative;
+  display: block;
 }
 
 :host([disabled]) {
@@ -136,8 +129,7 @@
   padding: 0 var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l);
 }
 
-:host(:focus-within) .wrapper,
-.wrapper--active {
+:host(:focus-within) .wrapper, .wrapper--active {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -153,28 +145,27 @@
   flex-grow: 1;
   flex-wrap: wrap;
   align-items: center;
-  padding: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding: 0px;
 }
 
 .input {
   flex-grow: 1;
-  font-family: inherit;
-  padding: 0;
-  background-color: transparent;
-  border-style: none;
-  color: var(--calcite-ui-text-1);
   -webkit-appearance: none;
           appearance: none;
+  border-style: none;
+  background-color: transparent;
+  padding: 0px;
+  font-family: inherit;
+  color: var(--calcite-ui-text-1);
   font-size: inherit;
   height: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
   min-width: 120px;
   margin-bottom: var(--calcite-combobox-item-spacing-unit-s);
 }
-
 .input:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -185,9 +176,9 @@
 }
 
 .input--single {
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 0;
+  margin-bottom: 0px;
+  margin-top: 0px;
+  padding: 0px;
 }
 
 .wrapper--active .input-single {
@@ -195,10 +186,10 @@
 }
 
 .input--hidden {
-  width: 0;
-  min-width: 0;
-  opacity: 0;
   pointer-events: none;
+  width: 0px;
+  min-width: 0px;
+  opacity: 0;
 }
 
 .input--icon {
@@ -216,32 +207,31 @@
 }
 
 .label {
-  padding: 0;
+  pointer-events: none;
   display: flex;
-  font-weight: var(--calcite-font-weight-normal);
+  max-width: 100%;
   flex: 1 1 auto;
-  pointer-events: none;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 100%;
+  padding: 0px;
+  font-weight: var(--calcite-font-weight-normal);
   height: var(--calcite-combobox-input-height);
   line-height: var(--calcite-combobox-input-height);
 }
 
 .label--spaced {
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
   padding-left: var(--calcite-combobox-item-spacing-unit-l);
   padding-right: var(--calcite-combobox-item-spacing-unit-l);
 }
 
-.icon-end,
-.icon-start {
-  cursor: pointer;
+.icon-end, .icon-start {
   display: flex;
-  align-items: center;
   width: 1rem;
+  cursor: pointer;
+  align-items: center;
 }
 
 .icon-end {
@@ -268,23 +258,18 @@
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   border-radius: 0.25rem;
 }
-
 .popper-container[data-popper-placement^=bottom] .calcite-popper-anim {
   transform: translateY(-5px);
 }
-
 .popper-container[data-popper-placement^=top] .calcite-popper-anim {
   transform: translateY(5px);
 }
-
 .popper-container[data-popper-placement^=left] .calcite-popper-anim {
   transform: translateX(5px);
 }
-
 .popper-container[data-popper-placement^=right] .calcite-popper-anim {
   transform: translateX(-5px);
 }
-
 .popper-container[data-popper-placement] .calcite-popper-anim--active {
   opacity: 1;
   visibility: visible;
@@ -309,25 +294,26 @@
 }
 
 .list-container {
-  overflow-y: auto;
   max-height: 100vh;
+  overflow-y: auto;
   background-color: var(--calcite-ui-foreground-1);
   width: var(--calcite-dropdown-width);
 }
 
 .list {
+  margin: 0px;
   display: block;
-  margin: 0;
-  padding: 0;
+  padding: 0px;
 }
 
 .list--hide {
-  height: 0;
+  height: 0px;
   overflow: hidden;
 }
 
 .chip {
-  margin: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) var(--calcite-combobox-item-spacing-unit-s) calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
+  margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;
+  margin-inline: 0 var(--calcite-combobox-item-spacing-unit-s);
   max-width: 100%;
 }
 
@@ -335,17 +321,8 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 
-.chip:last-child {
-  margin-right: 0;
-}
-
-.chip--rtl {
-  margin-right: unset;
-  margin-left: var(--calcite-combobox-item-spacing-unit-l);
-}
-
-.chip--rtl:last-child {
-  margin-left: 0;
+.chip:last-of-type {
+  margin-inline-end: 0;
 }
 
 .item {

package/dist/collection/components/calcite-combobox/calcite-combobox.js

@@ -4,9 +4,7 @@
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
-import { getElementDir } from "../../utils/dom";
 import { debounce } from "lodash-es";
-import { getKey } from "../../utils/key";
 import { createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, ComboboxDefaultPlacement } from "./resources";
@@ -86,7 +84,7 @@ export class CalciteCombobox {
       this.setFocus();
     };
     this.keydownHandler = (event) => {
-      const key = getKey(event.key, getElementDir(this.el));
+      const { key } = event;
       switch (key) {
         case "Tab":
           this.activeChipIndex = -1;
@@ -187,7 +185,9 @@ export class CalciteCombobox {
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      if (!this.active || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+      if ((!this.active && !this.open) ||
+        composedPath.includes(this.el) ||
+        composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text) {
@@ -202,6 +202,7 @@ export class CalciteCombobox {
         this.updateActiveItemIndex(-1);
       }
       this.active = false;
+      this.open = false;
     };
     this.setMenuEl = (el) => {
       this.menuEl = el;
@@ -651,13 +652,11 @@ export class CalciteCombobox {
   //
   //--------------------------------------------------------------------------
   renderChips() {
-    const { activeChipIndex, scale, selectionMode, el } = this;
-    const dir = getElementDir(el);
+    const { activeChipIndex, scale, selectionMode } = this;
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
-        "chip--active": activeChipIndex === i,
-        "chip--rtl": dir === "rtl"
+        "chip--active": activeChipIndex === i
       };
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);

package/dist/collection/components/calcite-combobox/interfaces.d.js

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