From 7597061d3b8eb4e7fff01caf150aff46daefca6c Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 12 Apr 2024 11:53:26 -0700 Subject: [PATCH 1/6] chore(linting): restore @stencil-community ESLint rules --- packages/calcite-components/.eslintrc.cjs | 5 +- .../calcite-components/src/components.d.ts | 206 +++++++++--------- .../src/components/action-bar/action-bar.tsx | 4 +- .../src/components/action-pad/action-pad.tsx | 8 +- .../components/input-message/interfaces.ts | 10 +- .../components/input-number/input-number.tsx | 43 ++-- .../src/components/input-text/input-text.tsx | 43 ++-- .../src/components/input/input.tsx | 49 ++--- .../src/components/list-item/utils.ts | 4 +- .../src/components/panel/panel.tsx | 4 +- .../pick-list-item/pick-list-item.tsx | 2 +- .../src/components/pick-list/pick-list.tsx | 2 +- .../src/components/pick-list/resources.ts | 11 +- .../src/components/resources.ts | 14 +- .../src/components/select/select.tsx | 4 +- .../components/shell-panel/shell-panel.tsx | 4 +- .../src/components/table/table.tsx | 5 +- .../src/components/text-area/text-area.tsx | 23 +- .../value-list-item/value-list-item.tsx | 2 +- .../src/components/value-list/resources.ts | 6 +- .../src/components/value-list/value-list.tsx | 2 +- 21 files changed, 211 insertions(+), 240 deletions(-) diff --git a/packages/calcite-components/.eslintrc.cjs b/packages/calcite-components/.eslintrc.cjs index af56cba790e..5c4a962ac73 100644 --- a/packages/calcite-components/.eslintrc.cjs +++ b/packages/calcite-components/.eslintrc.cjs @@ -42,16 +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": [ diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 682c3adbd4b..11f768e0071 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -8,80 +8,174 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +import { ActionMessages } from "./components/action/assets/action/t9n"; import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; +import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, Sync } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; +import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; +import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +import { ButtonMessages } from "./components/button/assets/button/t9n"; +import { CardMessages } from "./components/card/assets/card/t9n"; +import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; +import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; +import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; +import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; +import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; +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 { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; +import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; +import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +import { MenuMessages } from "./components/menu/assets/menu/t9n"; +import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterLabelType } from "./components/meter/interfaces"; +import { ModalMessages } from "./components/modal/assets/modal/t9n"; +import { NoticeMessages } from "./components/notice/assets/notice/t9n"; +import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; -import { ICON_TYPES } from "./components/pick-list/resources"; +import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +import { PopoverMessages } from "./components/popover/assets/popover/t9n"; +import { RatingMessages } from "./components/rating/assets/rating/t9n"; +import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent } from "./components/table/interfaces"; +import { TableMessages } from "./components/table/assets/table/t9n"; +import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +import { TipMessages } from "./components/tip/assets/tip/t9n"; +import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +export { ActionMessages } from "./components/action/assets/action/t9n"; export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; +export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, Sync } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; +export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; +export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +export { ButtonMessages } from "./components/button/assets/button/t9n"; +export { CardMessages } from "./components/card/assets/card/t9n"; +export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; +export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; +export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; +export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; +export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; +export { InputMessages } from "./components/input/assets/input/t9n"; +export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; +export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; +export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +export { MenuMessages } from "./components/menu/assets/menu/t9n"; +export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterLabelType } from "./components/meter/interfaces"; +export { ModalMessages } from "./components/modal/assets/modal/t9n"; +export { NoticeMessages } from "./components/notice/assets/notice/t9n"; +export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; -export { ICON_TYPES } from "./components/pick-list/resources"; +export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +export { PopoverMessages } from "./components/popover/assets/popover/t9n"; +export { RatingMessages } from "./components/rating/assets/rating/t9n"; +export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent } from "./components/table/interfaces"; +export { TableMessages } from "./components/table/assets/table/t9n"; +export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +export { TipMessages } from "./components/tip/assets/tip/t9n"; +export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { @@ -1850,11 +1944,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. */ @@ -1865,11 +1954,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 @@ -1891,11 +1975,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. */ @@ -2183,11 +2262,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. */ @@ -2198,11 +2272,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. */ @@ -2220,11 +2289,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. */ @@ -2350,11 +2414,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. */ @@ -2365,11 +2424,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. */ @@ -2383,11 +2437,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. */ @@ -3522,7 +3571,7 @@ export namespace Components { * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon": ICON_TYPES | null; + "icon": typeof ICON_TYPES | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -4806,11 +4855,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) @@ -5324,7 +5368,7 @@ export namespace Components { * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: ICON_TYPES | null; + "icon"?: typeof ICON_TYPES | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -9325,11 +9369,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. */ @@ -9340,11 +9379,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 @@ -9366,11 +9400,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. */ @@ -9671,11 +9700,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. */ @@ -9686,11 +9710,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. */ @@ -9708,11 +9727,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. */ @@ -9840,11 +9854,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. */ @@ -9855,11 +9864,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. */ @@ -9873,11 +9877,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. */ @@ -11085,7 +11084,7 @@ declare namespace LocalJSX { * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: ICON_TYPES | null; + "icon"?: typeof ICON_TYPES | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12423,11 +12422,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) @@ -12959,7 +12953,7 @@ declare namespace LocalJSX { * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: ICON_TYPES | null; + "icon"?: typeof ICON_TYPES | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 66bfe786c95..ae9959fe3ef 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -378,8 +378,8 @@ export class ActionBar }; handleTooltipSlotChange = (event: Event): void => { - const tooltips = slotChangeGetAssignedElements(event).filter( - (el) => el?.matches("calcite-tooltip"), + const tooltips = slotChangeGetAssignedElements(event).filter((el) => + el?.matches("calcite-tooltip"), ) as HTMLCalciteTooltipElement[]; this.expandTooltip = tooltips[0]; diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx index fc621667259..477e56b3b2e 100755 --- a/packages/calcite-components/src/components/action-pad/action-pad.tsx +++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx @@ -244,16 +244,16 @@ export class ActionPad } handleDefaultSlotChange = (event: Event): void => { - const groups = slotChangeGetAssignedElements(event).filter( - (el) => el?.matches("calcite-action-group"), + const groups = slotChangeGetAssignedElements(event).filter((el) => + el?.matches("calcite-action-group"), ) as HTMLCalciteActionGroupElement[]; this.setGroupLayout(groups); }; handleTooltipSlotChange = (event: Event): void => { - const tooltips = slotChangeGetAssignedElements(event).filter( - (el) => el?.matches("calcite-tooltip"), + const tooltips = slotChangeGetAssignedElements(event).filter((el) => + el?.matches("calcite-tooltip"), ) as HTMLCalciteTooltipElement[]; this.expandTooltip = tooltips[0]; 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 f3d51097761..1f444287d8a 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; @@ -1041,11 +1032,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. @@ -624,15 +615,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; @@ -1130,11 +1121,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} @@ -1162,15 +1153,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/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx index 4ae45d556bc..1fafafdaabc 100644 --- a/packages/calcite-components/src/components/panel/panel.tsx +++ b/packages/calcite-components/src/components/panel/panel.tsx @@ -303,8 +303,8 @@ export class Panel }; handleActionBarSlotChange = (event: Event): void => { - const actionBars = slotChangeGetAssignedElements(event).filter( - (el) => el?.matches("calcite-action-bar"), + const actionBars = slotChangeGetAssignedElements(event).filter((el) => + el?.matches("calcite-action-bar"), ) as HTMLCalciteActionBarElement[]; actionBars.forEach((actionBar) => (actionBar.layout = "horizontal")); diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx index 3d6ab74bb32..4fb7a9576ae 100644 --- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx +++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx @@ -91,7 +91,7 @@ export class PickListItem * * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - @Prop({ reflect: true }) icon: ICON_TYPES | null = null; + @Prop({ reflect: true }) icon: typeof ICON_TYPES | null = null; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; 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..0724739c788 100644 --- a/packages/calcite-components/src/components/pick-list/pick-list.tsx +++ b/packages/calcite-components/src/components/pick-list/pick-list.tsx @@ -296,7 +296,7 @@ export class PickList< // // -------------------------------------------------------------------------- - getIconType(): ICON_TYPES { + getIconType(): typeof ICON_TYPES { 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..d6658562d2f 100644 --- a/packages/calcite-components/src/components/pick-list/resources.ts +++ b/packages/calcite-components/src/components/pick-list/resources.ts @@ -2,11 +2,12 @@ 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 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/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx index 8c7cc4a71f5..1f42eeac21d 100644 --- a/packages/calcite-components/src/components/select/select.tsx +++ b/packages/calcite-components/src/components/select/select.tsx @@ -284,8 +284,8 @@ export class Select this.clearInternalSelect(); - optionsAndGroups.forEach( - (optionOrGroup) => this.selectEl?.append(this.toNativeElement(optionOrGroup)), + optionsAndGroups.forEach((optionOrGroup) => + this.selectEl?.append(this.toNativeElement(optionOrGroup)), ); }; diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index e7028c8d209..2233e80fafc 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -663,8 +663,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, }; handleActionBarSlotChange = (event: Event): void => { - const actionBars = slotChangeGetAssignedElements(event).filter( - (el) => el?.matches("calcite-action-bar"), + const actionBars = slotChangeGetAssignedElements(event).filter((el) => + el?.matches("calcite-action-bar"), ) as HTMLCalciteActionBarElement[]; this.actionBars = actionBars; diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 93847016948..93b10785be0 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -278,8 +278,9 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen break; } - const destinationCount = this.allRows?.find((row) => row.positionAll === rowPosition) - ?.cellCount; + const destinationCount = this.allRows?.find( + (row) => row.positionAll === rowPosition, + )?.cellCount; const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition; 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/value-list-item/value-list-item.tsx b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx index d1fb45e6457..71f10ebf65a 100644 --- a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx +++ b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx @@ -84,7 +84,7 @@ export class ValueListItem * * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - @Prop({ reflect: true }) icon?: ICON_TYPES | null = null; + @Prop({ reflect: true }) icon?: typeof ICON_TYPES | null = null; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/value-list/resources.ts b/packages/calcite-components/src/components/value-list/resources.ts index 7255a5678a3..b63061fc722 100644 --- a/packages/calcite-components/src/components/value-list/resources.ts +++ b/packages/calcite-components/src/components/value-list/resources.ts @@ -2,9 +2,9 @@ export const CSS = { container: "container", handle: "handle", }; -export enum ICON_TYPES { - grip = "grip", -} +export const ICON_TYPES = { + grip: "grip", +}; 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; From 48088f66ac149caef2747e0768353ebf2e5f8774 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 12 Apr 2024 12:54:36 -0700 Subject: [PATCH 2/6] enable @typescript-eslint/no-duplicate-enum-values --- packages/calcite-components/.eslintrc.cjs | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/calcite-components/.eslintrc.cjs b/packages/calcite-components/.eslintrc.cjs index 5c4a962ac73..2741fa767cd 100644 --- a/packages/calcite-components/.eslintrc.cjs +++ b/packages/calcite-components/.eslintrc.cjs @@ -49,7 +49,6 @@ module.exports = { "@stencil-community/own-props-must-be-private": "off", "@stencil-community/prefer-vdom-listener": "warn", "@stencil-community/required-jsdoc": "off", - "@typescript-eslint/no-duplicate-enum-values": "off", "@typescript-eslint/ban-types": "warn", "@typescript-eslint/explicit-module-boundary-types": [ "error", From 08effe8e7e42e40f49862bf432a75a87d4369415 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 12 Apr 2024 12:56:49 -0700 Subject: [PATCH 3/6] enable @jest/expect-expect --- packages/calcite-components/.eslintrc.cjs | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/calcite-components/.eslintrc.cjs b/packages/calcite-components/.eslintrc.cjs index 2741fa767cd..a47348f6553 100644 --- a/packages/calcite-components/.eslintrc.cjs +++ b/packages/calcite-components/.eslintrc.cjs @@ -72,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", From 374c1522fd1fd050749c46419548c12798403ed8 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 12 Apr 2024 16:29:00 -0700 Subject: [PATCH 4/6] fix build error --- packages/calcite-components/src/components.d.ts | 10 ++++++---- .../src/components/pick-list-item/pick-list-item.tsx | 3 ++- .../src/components/pick-list/pick-list.tsx | 3 ++- .../src/components/value-list-item/value-list-item.tsx | 3 ++- 4 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 11f768e0071..ad3a94dcbd8 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -64,6 +64,7 @@ import { NoticeMessages } from "./components/notice/assets/notice/t9n"; import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; +import { ValueUnion } from "./components/types"; import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; import { PopoverMessages } from "./components/popover/assets/popover/t9n"; import { RatingMessages } from "./components/rating/assets/rating/t9n"; @@ -150,6 +151,7 @@ export { NoticeMessages } from "./components/notice/assets/notice/t9n"; export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; +export { ValueUnion } from "./components/types"; export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; export { PopoverMessages } from "./components/popover/assets/popover/t9n"; export { RatingMessages } from "./components/rating/assets/rating/t9n"; @@ -3571,7 +3573,7 @@ export namespace Components { * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon": typeof ICON_TYPES | null; + "icon": ValueUnion | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5368,7 +5370,7 @@ export namespace Components { * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: typeof ICON_TYPES | null; + "icon"?: ValueUnion | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11084,7 +11086,7 @@ declare namespace LocalJSX { * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: typeof ICON_TYPES | null; + "icon"?: ValueUnion | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12953,7 +12955,7 @@ declare namespace LocalJSX { * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: typeof ICON_TYPES | null; + "icon"?: ValueUnion | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx index 4fb7a9576ae..7d82e04eb08 100644 --- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx +++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx @@ -38,6 +38,7 @@ import { updateMessages, } from "../../utils/t9n"; import { ICON_TYPES } from "../pick-list/resources"; +import type { ValueUnion } from "../types"; import { PickListItemMessages } from "./assets/pick-list-item/t9n"; import { CSS, ICONS, SLOTS } from "./resources"; @@ -91,7 +92,7 @@ export class PickListItem * * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - @Prop({ reflect: true }) icon: typeof ICON_TYPES | null = null; + @Prop({ reflect: true }) icon: ValueUnion | null = null; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; 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 0724739c788..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(): typeof ICON_TYPES { + getIconType(): ValueUnion { return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle; } diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx index 71f10ebf65a..04d7af664ff 100644 --- a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx +++ b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx @@ -32,6 +32,7 @@ import { } from "../../utils/loadable"; import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources"; import { ICON_TYPES } from "../pick-list/resources"; +import type { ValueUnion } from "../types"; import { ListItemAndHandle } from "./interfaces"; import { ICONS, SLOTS } from "./resources"; @@ -84,7 +85,7 @@ export class ValueListItem * * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - @Prop({ reflect: true }) icon?: typeof ICON_TYPES | null = null; + @Prop({ reflect: true }) icon?: ValueUnion | null = null; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; From de346aa52d0653f2f0ff257c270244bffe409da4 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 12 Apr 2024 16:52:06 -0700 Subject: [PATCH 5/6] add missing types.ts file --- packages/calcite-components/src/components/types.ts | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 packages/calcite-components/src/components/types.ts 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]; From bc9ef6b78db3a2d4111de9d40125e1ad049d5e48 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Fri, 12 Apr 2024 17:06:31 -0700 Subject: [PATCH 6/6] fix type resolution error --- packages/calcite-components/src/components.d.ts | 12 ++++++------ .../src/components/pick-list-item/pick-list-item.tsx | 3 +-- .../src/components/pick-list/resources.ts | 4 ++++ .../components/value-list-item/value-list-item.tsx | 3 +-- .../src/components/value-list/resources.ts | 6 ++++++ 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index ad3a94dcbd8..533acd0956e 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -64,7 +64,7 @@ import { NoticeMessages } from "./components/notice/assets/notice/t9n"; import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; -import { ValueUnion } from "./components/types"; +import { ICON_TYPES } from "./components/pick-list/resources"; import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; import { PopoverMessages } from "./components/popover/assets/popover/t9n"; import { RatingMessages } from "./components/rating/assets/rating/t9n"; @@ -151,7 +151,7 @@ export { NoticeMessages } from "./components/notice/assets/notice/t9n"; export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; -export { ValueUnion } from "./components/types"; +export { ICON_TYPES } from "./components/pick-list/resources"; export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; export { PopoverMessages } from "./components/popover/assets/popover/t9n"; export { RatingMessages } from "./components/rating/assets/rating/t9n"; @@ -3573,7 +3573,7 @@ export namespace Components { * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon": ValueUnion | null; + "icon": ICON_TYPES | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -5370,7 +5370,7 @@ export namespace Components { * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: ValueUnion | null; + "icon"?: ICON_TYPES | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -11086,7 +11086,7 @@ declare namespace LocalJSX { * Determines the icon SVG symbol that will be shown. Options are `"circle"`, `"square"`, `"grip"` or `null`. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: ValueUnion | null; + "icon"?: ICON_TYPES | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @@ -12955,7 +12955,7 @@ declare namespace LocalJSX { * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null. * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - "icon"?: ValueUnion | null; + "icon"?: ICON_TYPES | null; /** * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx index 7d82e04eb08..3d6ab74bb32 100644 --- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx +++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx @@ -38,7 +38,6 @@ import { updateMessages, } from "../../utils/t9n"; import { ICON_TYPES } from "../pick-list/resources"; -import type { ValueUnion } from "../types"; import { PickListItemMessages } from "./assets/pick-list-item/t9n"; import { CSS, ICONS, SLOTS } from "./resources"; @@ -92,7 +91,7 @@ export class PickListItem * * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - @Prop({ reflect: true }) icon: ValueUnion | null = null; + @Prop({ reflect: true }) icon: ICON_TYPES | null = null; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/pick-list/resources.ts b/packages/calcite-components/src/components/pick-list/resources.ts index d6658562d2f..92d7b86c731 100644 --- a/packages/calcite-components/src/components/pick-list/resources.ts +++ b/packages/calcite-components/src/components/pick-list/resources.ts @@ -1,3 +1,5 @@ +import { ValueUnion } from "../types"; + export const CSS = { sticky: "sticky-pos", }; @@ -8,6 +10,8 @@ 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-item/value-list-item.tsx b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx index 04d7af664ff..d1fb45e6457 100644 --- a/packages/calcite-components/src/components/value-list-item/value-list-item.tsx +++ b/packages/calcite-components/src/components/value-list-item/value-list-item.tsx @@ -32,7 +32,6 @@ import { } from "../../utils/loadable"; import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources"; import { ICON_TYPES } from "../pick-list/resources"; -import type { ValueUnion } from "../types"; import { ListItemAndHandle } from "./interfaces"; import { ICONS, SLOTS } from "./resources"; @@ -85,7 +84,7 @@ export class ValueListItem * * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5) */ - @Prop({ reflect: true }) icon?: ValueUnion | null = null; + @Prop({ reflect: true }) icon?: ICON_TYPES | null = null; /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */ @Prop({ reflect: true }) iconFlipRtl = false; diff --git a/packages/calcite-components/src/components/value-list/resources.ts b/packages/calcite-components/src/components/value-list/resources.ts index b63061fc722..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 const ICON_TYPES = { grip: "grip", }; + +export type ICON_TYPES = ValueUnion; + export const TEXT = { filterResults: "Filter results", };