@esri/calcite-components 1.3.0-next.9 → 1.3.0

package/dist/types/components.d.ts

@@ -45,6 +45,7 @@ import { InputMessages } from "./components/input/assets/input/t9n";
 import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
 import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
 import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
 import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
 import { ItemData } from "./components/list-item/interfaces";
 import { SelectionAppearance } from "./components/list/resources";
@@ -675,6 +676,10 @@ export namespace Components {
           * When `true`, hides the component.
          */
         "closed": boolean;
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled": boolean;
         /**
           * Specifies an icon to display.
          */
@@ -683,10 +688,18 @@ export namespace Components {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl": boolean;
+        /**
+          * When true, enables the chip to be focused, and allows the `calciteChipSelect` to emit. This is set to `true` by a parent Chip Group component.
+         */
+        "interactive": boolean;
         /**
           * Specifies the kind of the component (will apply to border and background if applicable).
          */
         "kind": Extract<"brand" | "inverse" | "neutral", Kind>;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -700,7 +713,15 @@ export namespace Components {
          */
         "scale": Scale;
         /**
-          * When `closable` is `true`, sets focus on the component's "close" button (the first focusable item).
+          * When true, the component is selected.
+         */
+        "selected": boolean;
+        /**
+          * This internal property, managed by a containing `calcite-chip-group`, is conditionally set based on the `selectionMode` of the parent
+         */
+        "selectionMode": Extract<"multiple" | "single" | "single-persist" | "none", SelectionMode>;
+        /**
+          * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -708,6 +729,36 @@ export namespace Components {
          */
         "value": any;
     }
+    interface CalciteChipGroup {
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled": boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale": Scale;
+        /**
+          * Specifies the component's selected items.
+          * @readonly
+         */
+        "selectedItems": HTMLCalciteChipElement[];
+        /**
+          * Specifies the selection mode of the component.
+         */
+        "selectionMode": Extract<
+    "multiple" | "single" | "single-persist" | "none",
+    SelectionMode
+  >;
+        /**
+          * Sets focus on the component's first focusable element.
+         */
+        "setFocus": () => Promise<void>;
+    }
     interface CalciteColorPicker {
         /**
           * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.  When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
@@ -1058,6 +1109,10 @@ export namespace Components {
           * When `true`, activates the component's range mode to allow a start and end date.
          */
         "range": boolean;
+        /**
+          * When `true`, highlight styling for edge dates is applied.
+         */
+        "rangeEdge": "start" | "end" | undefined;
         /**
           * Date is being hovered and within the set range
          */
@@ -1554,6 +1609,11 @@ export namespace Components {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
          */
         "enterKeyHint": string;
+        /**
+          * When `type` is `"file"`, specifies the component's selected files.
+          * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
+         */
+        "files": FileList | undefined;
         /**
           * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -1720,6 +1780,10 @@ export namespace Components {
           * Defines the available placements that can be used when a flip occurs.
          */
         "flipPlacements": EffectivePlacement[];
+        /**
+          * When `true`, prevents focus trapping.
+         */
+        "focusTrapDisabled": boolean;
         /**
           * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -2129,6 +2193,10 @@ export namespace Components {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
+        /**
+          * When `true`, prevents focus trapping.
+         */
+        "focusTrapDisabled": boolean;
         /**
           * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -2136,7 +2204,11 @@ export namespace Components {
         /**
           * Use this property to override individual strings used by the component.
          */
-        "messagesOverrides": Partial<TimePickerMessages>;
+        "messageOverrides": Partial<InputTimePickerMessages & TimePickerMessages>;
+        /**
+          * Made into a prop for testing purposes only
+         */
+        "messages": InputTimePickerMessages;
         /**
           * Specifies the name of the component on form submission.
          */
@@ -3199,6 +3271,10 @@ export namespace Components {
           * When `detached`, specifies the maximum height of the component.
          */
         "detachedHeightScale": Scale;
+        /**
+          * The direction of the component.
+         */
+        "layout": Extract<"horizontal" | "vertical", Layout>;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -3498,6 +3574,7 @@ export namespace Components {
         "iconFlipRtl": boolean;
         "layout": Extract<"horizontal" | "vertical", Layout>;
         "numbered": boolean;
+        "numberingSystem": NumberingSystem;
         "scale": Scale;
         /**
           * When `true`, the component is selected.
@@ -4203,6 +4280,10 @@ export interface CalciteChipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteChipElement;
 }
+export interface CalciteChipGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteChipGroupElement;
+}
 export interface CalciteColorPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteColorPickerElement;
@@ -4522,6 +4603,12 @@ declare global {
         prototype: HTMLCalciteChipElement;
         new (): HTMLCalciteChipElement;
     };
+    interface HTMLCalciteChipGroupElement extends Components.CalciteChipGroup, HTMLStencilElement {
+    }
+    var HTMLCalciteChipGroupElement: {
+        prototype: HTMLCalciteChipGroupElement;
+        new (): HTMLCalciteChipGroupElement;
+    };
     interface HTMLCalciteColorPickerElement extends Components.CalciteColorPicker, HTMLStencilElement {
     }
     var HTMLCalciteColorPickerElement: {
@@ -5018,6 +5105,7 @@ declare global {
         "calcite-card": HTMLCalciteCardElement;
         "calcite-checkbox": HTMLCalciteCheckboxElement;
         "calcite-chip": HTMLCalciteChipElement;
+        "calcite-chip-group": HTMLCalciteChipGroupElement;
         "calcite-color-picker": HTMLCalciteColorPickerElement;
         "calcite-color-picker-hex-input": HTMLCalciteColorPickerHexInputElement;
         "calcite-color-picker-swatch": HTMLCalciteColorPickerSwatchElement;
@@ -5657,6 +5745,10 @@ declare namespace LocalJSX {
           * When `true`, hides the component.
          */
         "closed"?: boolean;
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled"?: boolean;
         /**
           * Specifies an icon to display.
          */
@@ -5669,23 +5761,65 @@ declare namespace LocalJSX {
           * Specifies the kind of the component (will apply to border and background if applicable).
          */
         "kind"?: Extract<"brand" | "inverse" | "neutral", Kind>;
+        /**
+          * Accessible name for the component.
+         */
+        "label"?: string;
         /**
           * Use this property to override individual strings used by the component.
          */
         "messageOverrides"?: Partial<ChipMessages>;
         /**
-          * Fires when the close button is clicked.
+          * Fires when the component's close button is selected.
          */
         "onCalciteChipClose"?: (event: CalciteChipCustomEvent<void>) => void;
+        /**
+          * Fires when the selected state of the component changes.
+         */
+        "onCalciteChipSelect"?: (event: CalciteChipCustomEvent<void>) => void;
         /**
           * Specifies the size of the component.
          */
         "scale"?: Scale;
+        /**
+          * When true, the component is selected.
+         */
+        "selected"?: boolean;
         /**
           * The component's value.
          */
         "value": any;
     }
+    interface CalciteChipGroup {
+        /**
+          * When true, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled"?: boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Emits when the component's selection changes.
+         */
+        "onCalciteChipGroupSelect"?: (event: CalciteChipGroupCustomEvent<void>) => void;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale"?: Scale;
+        /**
+          * Specifies the component's selected items.
+          * @readonly
+         */
+        "selectedItems"?: HTMLCalciteChipElement[];
+        /**
+          * Specifies the selection mode of the component.
+         */
+        "selectionMode"?: Extract<
+    "multiple" | "single" | "single-persist" | "none",
+    SelectionMode
+  >;
+    }
     interface CalciteColorPicker {
         /**
           * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.  When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
@@ -6517,6 +6651,11 @@ declare namespace LocalJSX {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
          */
         "enterKeyHint"?: string;
+        /**
+          * When `type` is `"file"`, specifies the component's selected files.
+          * @mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files
+         */
+        "files"?: FileList | undefined;
         /**
           * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -6674,6 +6813,10 @@ declare namespace LocalJSX {
           * Defines the available placements that can be used when a flip occurs.
          */
         "flipPlacements"?: EffectivePlacement[];
+        /**
+          * When `true`, prevents focus trapping.
+         */
+        "focusTrapDisabled"?: boolean;
         /**
           * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -7072,6 +7215,10 @@ declare namespace LocalJSX {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
+        /**
+          * When `true`, prevents focus trapping.
+         */
+        "focusTrapDisabled"?: boolean;
         /**
           * The ID of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -7079,7 +7226,7 @@ declare namespace LocalJSX {
         /**
           * Use this property to override individual strings used by the component.
          */
-        "messagesOverrides"?: Partial<TimePickerMessages>;
+        "messageOverrides"?: Partial<InputTimePickerMessages & TimePickerMessages>;
         /**
           * Specifies the name of the component on form submission.
          */
@@ -8049,6 +8196,10 @@ declare namespace LocalJSX {
           * When `detached`, specifies the maximum height of the component.
          */
         "detachedHeightScale"?: Scale;
+        /**
+          * The direction of the component.
+         */
+        "layout"?: Extract<"horizontal" | "vertical", Layout>;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -8962,6 +9113,7 @@ declare namespace LocalJSX {
         "calcite-card": CalciteCard;
         "calcite-checkbox": CalciteCheckbox;
         "calcite-chip": CalciteChip;
+        "calcite-chip-group": CalciteChipGroup;
         "calcite-color-picker": CalciteColorPicker;
         "calcite-color-picker-hex-input": CalciteColorPickerHexInput;
         "calcite-color-picker-swatch": CalciteColorPickerSwatch;
@@ -9060,6 +9212,7 @@ declare module "@stencil/core" {
             "calcite-card": LocalJSX.CalciteCard & JSXBase.HTMLAttributes<HTMLCalciteCardElement>;
             "calcite-checkbox": LocalJSX.CalciteCheckbox & JSXBase.HTMLAttributes<HTMLCalciteCheckboxElement>;
             "calcite-chip": LocalJSX.CalciteChip & JSXBase.HTMLAttributes<HTMLCalciteChipElement>;
+            "calcite-chip-group": LocalJSX.CalciteChipGroup & JSXBase.HTMLAttributes<HTMLCalciteChipGroupElement>;
             "calcite-color-picker": LocalJSX.CalciteColorPicker & JSXBase.HTMLAttributes<HTMLCalciteColorPickerElement>;
             "calcite-color-picker-hex-input": LocalJSX.CalciteColorPickerHexInput & JSXBase.HTMLAttributes<HTMLCalciteColorPickerHexInputElement>;
             "calcite-color-picker-swatch": LocalJSX.CalciteColorPickerSwatch & JSXBase.HTMLAttributes<HTMLCalciteColorPickerSwatchElement>;

package/dist/types/preact.d.ts

@@ -63,8 +63,14 @@ declare module "preact/src/jsx" {
         "oncalciteInternalCheckboxFocus"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-chip": Omit<JSX.CalciteChip, "onCalciteChipClose"> & JSXInternal.HTMLAttributes<HTMLCalciteChipElement> & {
+      "calcite-chip": Omit<JSX.CalciteChip, "onCalciteChipClose" | "onCalciteChipSelect" | "onCalciteInternalChipKeyEvent"> & JSXInternal.HTMLAttributes<HTMLCalciteChipElement> & {
         "oncalciteChipClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteChipSelect"?: (event: CustomEvent<any>) => void;
+        "oncalciteInternalChipKeyEvent"?: (event: CustomEvent<any>) => void;
+      }
+
+      "calcite-chip-group": Omit<JSX.CalciteChipGroup, "onCalciteChipGroupSelect"> & JSXInternal.HTMLAttributes<HTMLCalciteChipGroupElement> & {
+        "oncalciteChipGroupSelect"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-color-picker": Omit<JSX.CalciteColorPicker, "onCalciteColorPickerChange" | "onCalciteColorPickerInput"> & JSXInternal.HTMLAttributes<HTMLCalciteColorPickerElement> & {

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

@@ -1,4 +1,4 @@
-import { FocusTrap as _FocusTrap } from "focus-trap";
+import { FocusTrap as _FocusTrap, Options as FocusTrapOptions } from "focus-trap";
 /**
  * Defines interface for components with a focus trap. Focusable content is required for components implementing focus trapping with this interface.
  */
@@ -17,28 +17,43 @@ export interface FocusTrapComponent {
   focusTrap: FocusTrap;
   /**
    * Method to update the element(s) that are used within the FocusTrap component.
+   *
+   * This should be implemented for components that allow user content and/or have conditionally-rendered focusable elements within the trap.
    */
-  updateFocusTrapElements: () => Promise<void>;
+  updateFocusTrapElements?: () => Promise<void>;
 }
 export type FocusTrap = _FocusTrap;
+interface ConnectFocusTrapOptions {
+  /**
+   * This option allows the focus trap to be created on a different element that's not the host (e.g., a supporting popup component).
+   */
+  focusTrapEl?: HTMLElement;
+  /**
+   * This allows specifying overrides to ConnectFocusTrap options.
+   */
+  focusTrapOptions?: Omit<FocusTrapOptions, "document" | "tabbableOptions" | "trapStack">;
+}
 /**
  * Helper to set up the FocusTrap component.
  *
  * @param {FocusTrapComponent} component The FocusTrap component.
+ * @param options
  */
-export declare function connectFocusTrap(component: FocusTrapComponent): void;
+export declare function connectFocusTrap(component: FocusTrapComponent, options?: ConnectFocusTrapOptions): void;
 /**
  * Helper to activate the FocusTrap component.
  *
  * @param {FocusTrapComponent} component The FocusTrap component.
+ * @param [options] The FocusTrap activate options.
  */
-export declare function activateFocusTrap(component: FocusTrapComponent): void;
+export declare function activateFocusTrap(component: FocusTrapComponent, options?: Parameters<_FocusTrap["activate"]>[0]): void;
 /**
  * Helper to deactivate the FocusTrap component.
  *
  * @param {FocusTrapComponent} component The FocusTrap component.
+ * @param [options] The FocusTrap deactivate options.
  */
-export declare function deactivateFocusTrap(component: FocusTrapComponent): void;
+export declare function deactivateFocusTrap(component: FocusTrapComponent, options?: Parameters<_FocusTrap["deactivate"]>[0]): void;
 /**
  * Helper to update the element(s) that are used within the FocusTrap component.
  *
@@ -52,3 +67,4 @@ export declare function deactivateFocusTrap(component: FocusTrapComponent): void
  * requestAnimationFrame(() => input.setFocus());
  */
 export declare function updateFocusTrapElements(component: FocusTrapComponent): void;
+export {};

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

@@ -1,7 +1,7 @@
 type AttributeObject = {
   [k: string]: any;
 };
-type AllowedGlobalAttribute = "lang";
+type AllowedGlobalAttribute = "lang" | "role";
 /**
  * Watches global attributes of a component.
  *