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

package/dist/types/components.d.ts

@@ -89,7 +89,7 @@ export namespace Components {
         /**
           * Specify the appearance style of the action, defaults to solid.
          */
-        "appearance": Appearance;
+        "appearance": Extract<"solid" | "clear", Appearance>;
         /**
           * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
          */
@@ -431,6 +431,7 @@ export namespace Components {
         "disabled": boolean;
         /**
           * The form ID to associate with the component
+          * @deprecated – this property is no longer needed if placed inside a form.
          */
         "form"?: string;
         /**
@@ -556,7 +557,11 @@ export namespace Components {
         /**
           * The name of the checkbox input
          */
-        "name"?: string;
+        "name": any;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * specify the scale of the checkbox, defaults to m
          */
@@ -568,7 +573,7 @@ export namespace Components {
         /**
           * The value of the checkbox input
          */
-        "value"?: any;
+        "value": any;
     }
     interface CalciteChip {
         /**
@@ -788,7 +793,7 @@ export namespace Components {
         "active": boolean;
         /**
           * The color value.
-          * @see https ://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+          * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
          */
         "color": string;
         /**
@@ -817,6 +822,10 @@ export namespace Components {
           * Specify the maximum number of combobox items (including nested children) to display before showing the scroller
          */
         "maxItems": number;
+        /**
+          * The name of the switch input
+         */
+        "name": string;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -829,6 +838,10 @@ export namespace Components {
           * Updates the position of the component.
          */
         "reposition": () => Promise<void>;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * Specify the scale of the combobox, defaults to m
          */
@@ -841,6 +854,10 @@ export namespace Components {
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * The value(s) of the selectedItem(s)
+         */
+        "value": string | string[];
     }
     interface CalciteComboboxItem {
         /**
@@ -901,10 +918,12 @@ export namespace Components {
         "activeRange"?: "start" | "end";
         /**
           * Selected end date
+          * @deprecated use value instead
          */
         "end"?: string;
         /**
           * Selected end date as full date object
+          * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
         /**
@@ -955,20 +974,22 @@ export namespace Components {
         "scale": "s" | "m" | "l";
         /**
           * Selected start date
+          * @deprecated use value instead
          */
         "start"?: string;
         /**
           * Selected start date as full date object
+          * @deprecated use valueAsDate instead
          */
         "startAsDate"?: Date;
         /**
           * Selected date
          */
-        "value"?: string;
+        "value"?: string | string[];
         /**
           * Selected date as full date object
          */
-        "valueAsDate"?: Date;
+        "valueAsDate"?: Date | Date[];
     }
     interface CalciteDatePickerDay {
         /**
@@ -1250,12 +1271,18 @@ export namespace Components {
     interface CalciteFilter {
         /**
           * The input data. The filter uses this as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search.
+          * @deprecated use `items` instead.
          */
         "data": object[];
         /**
           * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
          */
         "disabled": boolean;
+        /**
+          * The resulting items after filtering.
+          * @readonly
+         */
+        "filteredItems": CalciteFilter["items"];
         /**
           * A text label that will appear on the clear button.
          */
@@ -1264,6 +1291,10 @@ export namespace Components {
           * A text label that will appear next to the input field.
          */
         "intlLabel"?: string;
+        /**
+          * The items to filter through. The filter uses this as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search.  This property is required.
+         */
+        "items": object[];
         /**
           * Placeholder text for the input element's placeholder attribute
          */
@@ -1272,6 +1303,10 @@ export namespace Components {
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * Filter value.
+         */
+        "value"?: string;
     }
     interface CalciteFlow {
         /**
@@ -1300,6 +1335,14 @@ export namespace Components {
           * Start of highlight color if highlighting range
          */
         "highlightMin": number;
+        /**
+          * Highest point of the range
+         */
+        "max": number;
+        /**
+          * Lowest point of the range
+         */
+        "min": number;
         /**
           * Width of graph in pixels
          */
@@ -1393,10 +1436,15 @@ export namespace Components {
           * is the input disabled
          */
         "disabled": boolean;
+        "editingEnabled": boolean;
         /**
           * for number values, displays the locale's group separator
          */
         "groupSeparator": boolean;
+        /**
+          * when true, the component will not be visible
+         */
+        "hidden": boolean;
         /**
           * when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type
          */
@@ -1450,7 +1498,7 @@ export namespace Components {
         /**
           * The name of the input
          */
-        "name"?: string;
+        "name": string;
         /**
           * specify the placement of the number buttons
          */
@@ -1513,19 +1561,25 @@ export namespace Components {
         /**
           * input value
          */
-        "value"?: string;
+        "value": string;
     }
     interface CalciteInputDatePicker {
         /**
           * Expand or collapse when calendar does not have input
          */
         "active": boolean;
+        /**
+          * When false, the component won't be interactive.
+         */
+        "disabled": boolean;
         /**
           * Selected end date
+          * @deprecated use value instead
          */
         "end"?: string;
         /**
           * Selected end date as full date object
+          * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
         /**
@@ -1566,6 +1620,10 @@ export namespace Components {
           * Earliest allowed date as full date object
          */
         "minAsDate"?: Date;
+        /**
+          * The picker's name. Gets submitted with the form.
+         */
+        "name": string;
         /**
           * Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value.
          */
@@ -1582,6 +1640,10 @@ export namespace Components {
           * Updates the position of the component.
          */
         "reposition": () => Promise<void>;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * specify the scale of the date picker
          */
@@ -1592,20 +1654,22 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * Selected start date
+          * @deprecated use value instead
          */
         "start"?: string;
         /**
           * Selected start date as full date object
+          * @deprecated use valueAsDate instead
          */
         "startAsDate"?: Date;
         /**
           * Selected date
          */
-        "value"?: string;
+        "value": string | string[];
         /**
           * Selected date as full date object
          */
-        "valueAsDate"?: Date;
+        "valueAsDate"?: Date | Date[];
     }
     interface CalciteInputMessage {
         /**
@@ -1694,7 +1758,11 @@ export namespace Components {
         /**
           * The name of the time input
          */
-        "name"?: string;
+        "name": string;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * The scale (size) of the time input
          */
@@ -1704,11 +1772,11 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * number that specifies the granularity that the value must adhere to
+          * number (seconds) that specifies the granularity that the value must adhere to
          */
         "step": number;
         /**
-          * The selected time
+          * The selected time (always 24-hour format)
          */
         "value": string;
     }
@@ -1781,6 +1849,10 @@ export namespace Components {
           * Number at which section headings should start for this component.
          */
         "headingLevel": HeadingLevel;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
     }
     interface CalciteListItem {
         /**
@@ -1799,6 +1871,10 @@ export namespace Components {
           * When true, prevents the content of the list item from user interaction.
          */
         "nonInteractive": boolean;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
     }
     interface CalciteListItemGroup {
         /**
@@ -2412,6 +2488,10 @@ export namespace Components {
           * The group's name. Gets submitted with the form.
          */
         "name": string;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * The scale of the radio group
          */
@@ -2424,6 +2504,10 @@ export namespace Components {
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * The value of the selectedItem
+         */
+        "value": string;
         /**
           * specify the width of the group, defaults to auto
          */
@@ -2474,10 +2558,18 @@ export namespace Components {
           * @default "Stars: ${num}"
          */
         "intlStars"?: string;
+        /**
+          * The name of the rating
+         */
+        "name": string;
         /**
           * is the rating component in a selectable mode
          */
         "readOnly": boolean;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * specify the scale of the component, defaults to m
          */
@@ -2515,6 +2607,14 @@ export namespace Components {
           * The component's label. This is required for accessibility purposes.
          */
         "label": string;
+        /**
+          * The select's name. Gets submitted with the form.
+         */
+        "name": string;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * The component scale.
          */
@@ -2528,6 +2628,10 @@ export namespace Components {
           * Sets focus on the component.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * The value of the selectedOption
+         */
+        "value": string;
         /**
           * The component width.
          */
@@ -2585,7 +2689,8 @@ export namespace Components {
          */
         "hasHistogram": boolean;
         /**
-          * Display a histogram above the slider
+          * List of x,y coordinates within the slider's min and max, displays above the slider track.
+          * @see  [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-graph/interfaces.ts#L5)
          */
         "histogram"?: DataSeries;
         /**
@@ -2628,6 +2733,10 @@ export namespace Components {
           * When true, the slider will display values from high to low.  Note that this value will be ignored if the slider has an associated histogram.
          */
         "mirrored": boolean;
+        /**
+          * The name of the slider
+         */
+        "name": string;
         /**
           * Interval to move on page up/page down keys
          */
@@ -2636,6 +2745,10 @@ export namespace Components {
           * Use finer point for handles
          */
         "precise": boolean;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required": boolean;
         /**
           * Sets focus on the component.
          */
@@ -2826,7 +2939,7 @@ export namespace Components {
         /**
           * The name of the switch input
          */
-        "name"?: string;
+        "name": string;
         /**
           * The scale of the switch
          */
@@ -2843,7 +2956,7 @@ export namespace Components {
         /**
           * The value of the switch input
          */
-        "value"?: any;
+        "value": any;
     }
     interface CalciteTab {
         /**
@@ -3005,7 +3118,7 @@ export namespace Components {
         /**
           * The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.
          */
-        "name": string;
+        "name": any;
         /**
           * Sets focus on the component.
          */
@@ -4062,7 +4175,7 @@ declare namespace LocalJSX {
         /**
           * Specify the appearance style of the action, defaults to solid.
          */
-        "appearance"?: Appearance;
+        "appearance"?: Extract<"solid" | "clear", Appearance>;
         /**
           * Compact mode is used internally by components to reduce side padding, e.g. calcite-block-section.
          */
@@ -4413,6 +4526,7 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         /**
           * The form ID to associate with the component
+          * @deprecated – this property is no longer needed if placed inside a form.
          */
         "form"?: string;
         /**
@@ -4530,7 +4644,7 @@ declare namespace LocalJSX {
         /**
           * The name of the checkbox input
          */
-        "name"?: string;
+        "name"?: any;
         /**
           * Emitted when the checkbox checked status changes
          */
@@ -4762,7 +4876,7 @@ declare namespace LocalJSX {
         "active"?: boolean;
         /**
           * The color value.
-          * @see https ://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+          * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
          */
         "color"?: string;
         /**
@@ -4791,6 +4905,10 @@ declare namespace LocalJSX {
           * Specify the maximum number of combobox items (including nested children) to display before showing the scroller
          */
         "maxItems"?: number;
+        /**
+          * The name of the switch input
+         */
+        "name"?: string;
         /**
           * Called when the selected item(s) changes.
          */
@@ -4827,6 +4945,10 @@ declare namespace LocalJSX {
           * specify the selection mode - multi: allow any number of selected items (default) - single: only one selection) - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
          */
         "selectionMode"?: ComboboxSelectionMode;
+        /**
+          * The value(s) of the selectedItem(s)
+         */
+        "value"?: string | string[];
     }
     interface CalciteComboboxItem {
         /**
@@ -4887,10 +5009,12 @@ declare namespace LocalJSX {
         "activeRange"?: "start" | "end";
         /**
           * Selected end date
+          * @deprecated use value instead
          */
         "end"?: string;
         /**
           * Selected end date as full date object
+          * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
         /**
@@ -4950,20 +5074,22 @@ declare namespace LocalJSX {
         "scale"?: "s" | "m" | "l";
         /**
           * Selected start date
+          * @deprecated use value instead
          */
         "start"?: string;
         /**
           * Selected start date as full date object
+          * @deprecated use valueAsDate instead
          */
         "startAsDate"?: Date;
         /**
           * Selected date
          */
-        "value"?: string;
+        "value"?: string | string[];
         /**
           * Selected date as full date object
          */
-        "valueAsDate"?: Date;
+        "valueAsDate"?: Date | Date[];
     }
     interface CalciteDatePickerDay {
         /**
@@ -5257,12 +5383,18 @@ declare namespace LocalJSX {
     interface CalciteFilter {
         /**
           * The input data. The filter uses this as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search.
+          * @deprecated use `items` instead.
          */
         "data"?: object[];
         /**
           * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
          */
         "disabled"?: boolean;
+        /**
+          * The resulting items after filtering.
+          * @readonly
+         */
+        "filteredItems"?: CalciteFilter["items"];
         /**
           * A text label that will appear on the clear button.
          */
@@ -5271,6 +5403,10 @@ declare namespace LocalJSX {
           * A text label that will appear next to the input field.
          */
         "intlLabel"?: string;
+        /**
+          * The items to filter through. The filter uses this as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search.  This property is required.
+         */
+        "items"?: object[];
         /**
           * This event fires when the filter text changes.
          */
@@ -5279,6 +5415,10 @@ declare namespace LocalJSX {
           * Placeholder text for the input element's placeholder attribute
          */
         "placeholder"?: string;
+        /**
+          * Filter value.
+         */
+        "value"?: string;
     }
     interface CalciteFlow {
     }
@@ -5303,6 +5443,14 @@ declare namespace LocalJSX {
           * Start of highlight color if highlighting range
          */
         "highlightMin"?: number;
+        /**
+          * Highest point of the range
+         */
+        "max": number;
+        /**
+          * Lowest point of the range
+         */
+        "min": number;
         /**
           * Width of graph in pixels
          */
@@ -5398,6 +5546,10 @@ declare namespace LocalJSX {
           * for number values, displays the locale's group separator
          */
         "groupSeparator"?: boolean;
+        /**
+          * when true, the component will not be visible
+         */
+        "hidden"?: boolean;
         /**
           * when used as a boolean set to true, show a default recommended icon for certain input types (tel, password, email, date, time, search). You can also pass a calcite-ui-icon name to this prop to display a requested icon for any input type
          */
@@ -5452,6 +5604,10 @@ declare namespace LocalJSX {
           * specify the placement of the number buttons
          */
         "numberButtonType"?: InputPlacement;
+        /**
+          * This event fires each time a new value is typed and committed.
+         */
+        "onCalciteInputChange"?: (event: CustomEvent<void>) => void;
         /**
           * This event fires each time a new value is typed.
          */
@@ -5517,12 +5673,18 @@ declare namespace LocalJSX {
           * Expand or collapse when calendar does not have input
          */
         "active"?: boolean;
+        /**
+          * When false, the component won't be interactive.
+         */
+        "disabled"?: boolean;
         /**
           * Selected end date
+          * @deprecated use value instead
          */
         "end"?: string;
         /**
           * Selected end date as full date object
+          * @deprecated use valueAsDate instead
          */
         "endAsDate"?: Date;
         /**
@@ -5563,6 +5725,10 @@ declare namespace LocalJSX {
           * Earliest allowed date as full date object
          */
         "minAsDate"?: Date;
+        /**
+          * The picker's name. Gets submitted with the form.
+         */
+        "name"?: string;
         /**
           * Trigger calcite date change when a user changes the date.
          */
@@ -5590,20 +5756,22 @@ declare namespace LocalJSX {
         "scale"?: "s" | "m" | "l";
         /**
           * Selected start date
+          * @deprecated use value instead
          */
         "start"?: string;
         /**
           * Selected start date as full date object
+          * @deprecated use valueAsDate instead
          */
         "startAsDate"?: Date;
         /**
           * Selected date
          */
-        "value"?: string;
+        "value"?: string | string[];
         /**
           * Selected date as full date object
          */
-        "valueAsDate"?: Date;
+        "valueAsDate"?: Date | Date[];
     }
     interface CalciteInputMessage {
         /**
@@ -5702,11 +5870,11 @@ declare namespace LocalJSX {
          */
         "scale"?: Scale;
         /**
-          * number that specifies the granularity that the value must adhere to
+          * number (seconds) that specifies the granularity that the value must adhere to
          */
         "step"?: number;
         /**
-          * The selected time
+          * The selected time (always 24-hour format)
          */
         "value"?: string;
     }
@@ -5888,11 +6056,11 @@ declare namespace LocalJSX {
          */
         "noPadding"?: boolean;
         /**
-          * Fired when the modal begins the close animation
+          * Fired when the modal finishes the close animation
          */
         "onCalciteModalClose"?: (event: CustomEvent<any>) => void;
         /**
-          * Fired when the modal begins the open animation
+          * Fired when the modal finishes the open animation
          */
         "onCalciteModalOpen"?: (event: CustomEvent<any>) => void;
         /**
@@ -6406,6 +6574,10 @@ declare namespace LocalJSX {
           * The group's selected item.
          */
         "selectedItem"?: HTMLCalciteRadioGroupItemElement;
+        /**
+          * The value of the selectedItem
+         */
+        "value"?: string;
         /**
           * specify the width of the group, defaults to auto
          */
@@ -6456,6 +6628,10 @@ declare namespace LocalJSX {
           * @default "Stars: ${num}"
          */
         "intlStars"?: string;
+        /**
+          * The name of the rating
+         */
+        "name"?: string;
         /**
           * Fires when the rating value has changed.
          */
@@ -6497,6 +6673,10 @@ declare namespace LocalJSX {
           * The component's label. This is required for accessibility purposes.
          */
         "label": string;
+        /**
+          * The select's name. Gets submitted with the form.
+         */
+        "name"?: string;
         /**
           * This event will fire whenever the selected option changes.
          */
@@ -6510,6 +6690,10 @@ declare namespace LocalJSX {
           * @readonly
          */
         "selectedOption"?: HTMLCalciteOptionElement;
+        /**
+          * The value of the selectedOption
+         */
+        "value"?: string;
         /**
           * The component width.
          */
@@ -6571,7 +6755,8 @@ declare namespace LocalJSX {
          */
         "hasHistogram"?: boolean;
         /**
-          * Display a histogram above the slider
+          * List of x,y coordinates within the slider's min and max, displays above the slider track.
+          * @see  [DataSeries](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-graph/interfaces.ts#L5)
          */
         "histogram"?: DataSeries;
         /**
@@ -6614,6 +6799,10 @@ declare namespace LocalJSX {
           * When true, the slider will display values from high to low.  Note that this value will be ignored if the slider has an associated histogram.
          */
         "mirrored"?: boolean;
+        /**
+          * The name of the slider
+         */
+        "name"?: string;
         /**
           * Fires on when the thumb is released on slider If you need to constantly listen to the drag event, please use calciteSliderInput instead
          */
@@ -6635,6 +6824,10 @@ declare namespace LocalJSX {
           * Use finer point for handles
          */
         "precise"?: boolean;
+        /**
+          * When true, makes the component required for form-submission.
+         */
+        "required"?: boolean;
         /**
           * When true, enables snap selection along the step interval
          */
@@ -6967,7 +7160,7 @@ declare namespace LocalJSX {
         /**
           * The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property.
          */
-        "name"?: string;
+        "name"?: any;
         /**
           * Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked.
          */