diff --git a/packages/calcite-components/.eslintrc.cjs b/packages/calcite-components/.eslintrc.cjs index af56cba790e..a47348f6553 100644 --- a/packages/calcite-components/.eslintrc.cjs +++ b/packages/calcite-components/.eslintrc.cjs @@ -42,17 +42,13 @@ module.exports = { message: "Use keydown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).", }, ], - "@stencil-community/decorators-context": "off", + "@esri/calcite-components/strict-boolean-attributes": "off", "@stencil-community/decorators-style": "warn", "@stencil-community/no-unused-watch": "off", "@stencil-community/own-methods-must-be-private": "off", "@stencil-community/own-props-must-be-private": "off", "@stencil-community/prefer-vdom-listener": "warn", "@stencil-community/required-jsdoc": "off", - "@stencil-community/strict-boolean-conditions": "off", - "@stencil-community/reserved-member-names": "off", - "@stencil-community/ban-exported-const-enums": "off", - "@typescript-eslint/no-duplicate-enum-values": "off", "@typescript-eslint/ban-types": "warn", "@typescript-eslint/explicit-module-boundary-types": [ "error", @@ -76,7 +72,6 @@ module.exports = { curly: "error", "import/no-dynamic-require": ["error", { esmodule: true }], "import/order": ["error", { "newlines-between": "never" }], - "jest/expect-expect": "off", "jest/no-export": "warn", "jsdoc/check-tag-names": "off", "jsdoc/require-jsdoc": "off", diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 967af6b37d4..13c36a09e2e 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -1950,11 +1950,6 @@ export namespace Components { * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ "autocomplete": string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - "autofocus": boolean; /** * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type. */ @@ -1965,11 +1960,6 @@ export namespace Components { */ "disabled": boolean; "editingEnabled": boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @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 @@ -1991,11 +1981,6 @@ export namespace Components { * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ "iconFlipRtl": boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - "inputMode": string; /** * Accessible name for the component. */ @@ -2283,11 +2268,6 @@ export namespace Components { * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ "autocomplete": string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - "autofocus": boolean; /** * When `true`, a clear button is displayed when the component has a value. */ @@ -2298,11 +2278,6 @@ export namespace Components { */ "disabled": boolean; "editingEnabled": boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - "enterKeyHint": string; /** * 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. */ @@ -2320,11 +2295,6 @@ export namespace Components { * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ "iconFlipRtl": boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - "inputMode": string; /** * When `true`, restricts the component to integer numbers only and disables exponential notation. */ @@ -2450,11 +2420,6 @@ export namespace Components { * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ "autocomplete": string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - "autofocus": boolean; /** * When `true`, a clear button is displayed when the component has a value. */ @@ -2465,11 +2430,6 @@ export namespace Components { */ "disabled": boolean; "editingEnabled": boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - "enterKeyHint": string; /** * 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. */ @@ -2483,11 +2443,6 @@ export namespace Components { * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ "iconFlipRtl": boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - "inputMode": string; /** * Accessible name for the component's button or hyperlink. */ @@ -4910,11 +4865,6 @@ export namespace Components { "scale": Scale; } interface CalciteTextArea { - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - "autofocus": boolean; /** * Specifies the component's number of columns. * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols) @@ -9433,11 +9383,6 @@ declare namespace LocalJSX { * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ "autocomplete"?: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - "autofocus"?: boolean; /** * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type. */ @@ -9448,11 +9393,6 @@ declare namespace LocalJSX { */ "disabled"?: boolean; "editingEnabled"?: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @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 @@ -9474,11 +9414,6 @@ declare namespace LocalJSX { * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ "iconFlipRtl"?: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - "inputMode"?: string; /** * Accessible name for the component. */ @@ -9779,11 +9714,6 @@ declare namespace LocalJSX { * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ "autocomplete"?: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - "autofocus"?: boolean; /** * When `true`, a clear button is displayed when the component has a value. */ @@ -9794,11 +9724,6 @@ declare namespace LocalJSX { */ "disabled"?: boolean; "editingEnabled"?: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - "enterKeyHint"?: string; /** * 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. */ @@ -9816,11 +9741,6 @@ declare namespace LocalJSX { * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ "iconFlipRtl"?: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - "inputMode"?: string; /** * When `true`, restricts the component to integer numbers only and disables exponential notation. */ @@ -9948,11 +9868,6 @@ declare namespace LocalJSX { * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) */ "autocomplete"?: string; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - "autofocus"?: boolean; /** * When `true`, a clear button is displayed when the component has a value. */ @@ -9963,11 +9878,6 @@ declare namespace LocalJSX { */ "disabled"?: boolean; "editingEnabled"?: boolean; - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - "enterKeyHint"?: string; /** * 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. */ @@ -9981,11 +9891,6 @@ declare namespace LocalJSX { * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ "iconFlipRtl"?: boolean; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. Read the native attribute's documentation on MDN for more info. - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - "inputMode"?: string; /** * Accessible name for the component's button or hyperlink. */ @@ -12535,11 +12440,6 @@ declare namespace LocalJSX { "scale"?: Scale; } interface CalciteTextArea { - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - "autofocus"?: boolean; /** * Specifies the component's number of columns. * @mdn [cols](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols) diff --git a/packages/calcite-components/src/components/input-message/interfaces.ts b/packages/calcite-components/src/components/input-message/interfaces.ts index 7a6ff80fb30..f5ce05fd655 100644 --- a/packages/calcite-components/src/components/input-message/interfaces.ts +++ b/packages/calcite-components/src/components/input-message/interfaces.ts @@ -1,5 +1,5 @@ -export enum StatusIconDefaults { - valid = "check-circle", - invalid = "exclamation-mark-triangle", - idle = "information", -} +export const StatusIconDefaults = { + valid: "check-circle", + invalid: "exclamation-mark-triangle", + idle: "information", +}; diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index 2cf2d5f070e..492097af24f 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -3,6 +3,7 @@ import { Element, Event, EventEmitter, + forceUpdate, h, Host, Method, @@ -95,6 +96,19 @@ export class InputNumber TextualInputComponent, LoadableComponent { + //-------------------------------------------------------------------------- + // + // Global attributes + // + //-------------------------------------------------------------------------- + + @Watch("autofocus") + @Watch("enterkeyhint") + @Watch("inputmode") + handleGlobalAttributesChanged(): void { + forceUpdate(this); + } + //-------------------------------------------------------------------------- // // Properties @@ -104,13 +118,6 @@ export class InputNumber /** Specifies the text alignment of the component's value. */ @Prop({ reflect: true }) alignment: Extract<"start" | "end", Alignment> = "start"; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - @Prop({ reflect: true }) autofocus = false; - /** * When `true`, a clear button is displayed when the component has a value. */ @@ -274,22 +281,6 @@ export class InputNumber */ @Prop() autocomplete: string; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. - * Read the native attribute's documentation on MDN for more info. - * - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - @Prop() inputMode = "decimal"; - - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. - * Read the native attribute's documentation on MDN for more info. - * - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - @Prop() enterKeyHint: string; - /** Adds text to the end of the component. */ @Prop() suffixText: string; @@ -1042,11 +1033,11 @@ export class InputNumber = "start"; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - @Prop({ reflect: true }) autofocus = false; - /** * When `true`, a clear button is displayed when the component has a value. */ @@ -191,22 +198,6 @@ export class InputText */ @Prop() autocomplete: string; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. - * Read the native attribute's documentation on MDN for more info. - * - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - @Prop() inputMode = "text"; - - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. - * Read the native attribute's documentation on MDN for more info. - * - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - @Prop() enterKeyHint: string; - /** * Specifies a regex pattern the component's `value` must match for validation. * Read the native attribute's documentation on MDN for more info. @@ -625,15 +616,15 @@ export class InputText = "start"; - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - @Prop({ reflect: true }) autofocus = false; - /** * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type. */ @@ -288,22 +295,6 @@ export class Input */ @Prop() multiple = false; - /** - * Specifies the type of content to help devices display an appropriate virtual keyboard. - * Read the native attribute's documentation on MDN for more info. - * - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) - */ - @Prop() inputMode = "text"; - - /** - * Specifies the action label or icon for the Enter key on virtual keyboards. - * Read the native attribute's documentation on MDN for more info. - * - * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) - */ - @Prop() enterKeyHint: string; - /** Adds text to the end of the component. */ @Prop() suffixText: string; @@ -1131,11 +1122,11 @@ export class Input accept={this.accept} aria-label={getLabelText(this)} autocomplete={this.autocomplete} - autofocus={this.autofocus ? true : null} + autofocus={this.el.autofocus ? true : null} defaultValue={this.defaultValue} disabled={this.disabled ? true : null} - enterKeyHint={this.enterKeyHint} - inputMode={this.inputMode} + enterKeyHint={this.el.enterKeyHint} + inputMode={this.el.inputMode} key="localized-input" maxLength={this.maxLength} minLength={this.minLength} @@ -1163,15 +1154,15 @@ export class Input accept={this.accept} aria-label={getLabelText(this)} autocomplete={this.autocomplete} - autofocus={this.autofocus ? true : null} + autofocus={this.el.autofocus ? true : null} class={{ [CSS.editingEnabled]: this.editingEnabled, [CSS.inlineChild]: !!this.inlineEditableEl, }} defaultValue={this.defaultValue} disabled={this.disabled ? true : null} - enterKeyHint={this.enterKeyHint} - inputMode={this.inputMode} + enterKeyHint={this.el.enterKeyHint} + inputMode={this.el.inputMode} max={this.maxString} maxLength={this.maxLength} min={this.minString} diff --git a/packages/calcite-components/src/components/list-item/utils.ts b/packages/calcite-components/src/components/list-item/utils.ts index 84b351a799a..30e5f444ab4 100644 --- a/packages/calcite-components/src/components/list-item/utils.ts +++ b/packages/calcite-components/src/components/list-item/utils.ts @@ -19,8 +19,8 @@ export function getListItemChildren(slotEl: HTMLSlotElement): HTMLCalciteListIte .map((group) => Array.from(group.querySelectorAll(listItemSelector))) .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []); - const listItemChildren = assignedElements.filter( - (el) => el?.matches(listItemSelector), + const listItemChildren = assignedElements.filter((el) => + el?.matches(listItemSelector), ) as HTMLCalciteListItemElement[]; const listItemListChildren = (assignedElements.filter((el) => el?.matches(listSelector)) as HTMLCalciteListElement[]) diff --git a/packages/calcite-components/src/components/pick-list/pick-list.tsx b/packages/calcite-components/src/components/pick-list/pick-list.tsx index 12f79b49c14..9560b5bb606 100644 --- a/packages/calcite-components/src/components/pick-list/pick-list.tsx +++ b/packages/calcite-components/src/components/pick-list/pick-list.tsx @@ -24,6 +24,7 @@ import { } from "../../utils/loadable"; import { createObserver } from "../../utils/observers"; import { HeadingLevel } from "../functional/Heading"; +import type { ValueUnion } from "../types"; import { ICON_TYPES } from "./resources"; import { calciteInternalListItemValueChangeHandler, @@ -296,7 +297,7 @@ export class PickList< // // -------------------------------------------------------------------------- - getIconType(): ICON_TYPES { + getIconType(): ValueUnion { return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle; } diff --git a/packages/calcite-components/src/components/pick-list/resources.ts b/packages/calcite-components/src/components/pick-list/resources.ts index 649e8d8e862..92d7b86c731 100644 --- a/packages/calcite-components/src/components/pick-list/resources.ts +++ b/packages/calcite-components/src/components/pick-list/resources.ts @@ -1,12 +1,17 @@ +import { ValueUnion } from "../types"; + export const CSS = { sticky: "sticky-pos", }; -export enum ICON_TYPES { - circle = "circle", - square = "square", - grip = "grip", -} +export const ICON_TYPES = { + circle: "circle", + square: "square", + grip: "grip", +}; + +export type ICON_TYPES = ValueUnion; + export const TEXT = { filterResults: "Filter results", }; diff --git a/packages/calcite-components/src/components/resources.ts b/packages/calcite-components/src/components/resources.ts index 8281c622ad5..b64461ecf90 100644 --- a/packages/calcite-components/src/components/resources.ts +++ b/packages/calcite-components/src/components/resources.ts @@ -1,7 +1,7 @@ -export enum KindIcons { - brand = "lightbulb", - danger = "exclamationMarkTriangle", - info = "information", - success = "checkCircle", - warning = "exclamationMarkTriangle", -} +export const KindIcons = { + brand: "lightbulb", + danger: "exclamationMarkTriangle", + info: "information", + success: "checkCircle", + warning: "exclamationMarkTriangle", +}; diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx index bf93b121061..3bb883a710c 100644 --- a/packages/calcite-components/src/components/text-area/text-area.tsx +++ b/packages/calcite-components/src/components/text-area/text-area.tsx @@ -10,6 +10,7 @@ import { Method, Host, State, + forceUpdate, } from "@stencil/core"; import { throttle } from "lodash-es"; import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form"; @@ -76,16 +77,20 @@ export class TextArea { //-------------------------------------------------------------------------- // - // Properties + // Global attributes // //-------------------------------------------------------------------------- - /** - * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus. - * - * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) - */ - @Prop({ reflect: true }) autofocus = false; + @Watch("autofocus") + handleGlobalAttributesChanged(): void { + forceUpdate(this); + } + + //-------------------------------------------------------------------------- + // + // Properties + // + //-------------------------------------------------------------------------- /** * Specifies the component's number of columns. @@ -279,7 +284,7 @@ export class TextArea aria-describedby={this.guid} aria-invalid={toAriaBoolean(this.isCharacterLimitExceeded())} aria-label={getLabelText(this)} - autofocus={this.autofocus} + autofocus={this.el.autofocus} class={{ [CSS.readOnly]: this.readOnly, [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(), @@ -293,7 +298,7 @@ export class TextArea onChange={this.handleChange} onInput={this.handleInput} placeholder={this.placeholder} - readonly={this.readOnly} + readOnly={this.readOnly} required={this.required} rows={this.rows} value={this.value} diff --git a/packages/calcite-components/src/components/types.ts b/packages/calcite-components/src/components/types.ts new file mode 100644 index 00000000000..9ab05af8848 --- /dev/null +++ b/packages/calcite-components/src/components/types.ts @@ -0,0 +1,4 @@ +/** + * This type is used to represent a union of all possible values in a given object. + */ +export type ValueUnion = T[keyof T]; diff --git a/packages/calcite-components/src/components/value-list/resources.ts b/packages/calcite-components/src/components/value-list/resources.ts index 7255a5678a3..bd4f40e2e20 100644 --- a/packages/calcite-components/src/components/value-list/resources.ts +++ b/packages/calcite-components/src/components/value-list/resources.ts @@ -1,10 +1,16 @@ +import { ValueUnion } from "../types"; + export const CSS = { container: "container", handle: "handle", }; -export enum ICON_TYPES { - grip = "grip", -} + +export const ICON_TYPES = { + grip: "grip", +}; + +export type ICON_TYPES = ValueUnion; + export const TEXT = { filterResults: "Filter results", }; diff --git a/packages/calcite-components/src/components/value-list/value-list.tsx b/packages/calcite-components/src/components/value-list/value-list.tsx index 92406a11446..b4af4f1354e 100644 --- a/packages/calcite-components/src/components/value-list/value-list.tsx +++ b/packages/calcite-components/src/components/value-list/value-list.tsx @@ -482,7 +482,7 @@ export class ValueList< // // -------------------------------------------------------------------------- - getIconType(): ICON_TYPES | null { + getIconType(): typeof ICON_TYPES | null { let type = null; if (this.dragEnabled) { type = ICON_TYPES.grip;