From 24c45b3004ced7dcd01a6ac3d42b7fc075e177e1 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 18 Jun 2024 16:03:38 -0700 Subject: [PATCH] fix(combobox): no longer hides input when a selected item chip is focused (#9625) **Related Issue:** #6750 ## Summary - no longer hides input when a selected item chip is focused --- .../calcite-components/src/components.d.ts | 84 ------------------- .../src/components/combobox/combobox.scss | 4 - .../src/components/combobox/combobox.tsx | 1 - 3 files changed, 89 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 74896a54302..47dc8d40b8c 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -1595,46 +1595,6 @@ export namespace Components { */ "startDate"?: Date; } - interface CalciteDatePickerMonthFloatingMenu { - /** - * Active date - */ - "activeDate": Date; - /** - * Defines the available placements that can be used when a flip occurs. - */ - "flipPlacements": FlipPlacement[]; - /** - * CLDR locale data for translated calendar info. - */ - "localeData": DateLocaleData; - /** - * When `true`, month will be abbreviated. - */ - "monthAbbreviations": boolean; - /** - * Whether the component is opened. - */ - "open": boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - "overlayPositioning": OverlayPositioning; - /** - * Specifies the placement of the `calcite-date-picker` relative to the component. - * @default "bottom-start" - */ - "placement": MenuPlacement; - /** - * Specifies the position of the component in a range date-picker. - */ - "position": "start" | "end"; - /** - * Updates the position of the component. - * @param delayed - */ - "reposition": (delayed?: boolean) => Promise; - } interface CalciteDatePickerMonthHeader { /** * The focused date is indicated and will become the selected date if the user proceeds. @@ -6539,12 +6499,6 @@ declare global { prototype: HTMLCalciteDatePickerMonthElement; new (): HTMLCalciteDatePickerMonthElement; }; - interface HTMLCalciteDatePickerMonthFloatingMenuElement extends Components.CalciteDatePickerMonthFloatingMenu, HTMLStencilElement { - } - var HTMLCalciteDatePickerMonthFloatingMenuElement: { - prototype: HTMLCalciteDatePickerMonthFloatingMenuElement; - new (): HTMLCalciteDatePickerMonthFloatingMenuElement; - }; interface HTMLCalciteDatePickerMonthHeaderElementEventMap { "calciteInternalDatePickerSelect": Date; } @@ -7882,7 +7836,6 @@ declare global { "calcite-date-picker": HTMLCalciteDatePickerElement; "calcite-date-picker-day": HTMLCalciteDatePickerDayElement; "calcite-date-picker-month": HTMLCalciteDatePickerMonthElement; - "calcite-date-picker-month-floating-menu": HTMLCalciteDatePickerMonthFloatingMenuElement; "calcite-date-picker-month-header": HTMLCalciteDatePickerMonthHeaderElement; "calcite-dropdown": HTMLCalciteDropdownElement; "calcite-dropdown-group": HTMLCalciteDropdownGroupElement; @@ -9462,41 +9415,6 @@ declare namespace LocalJSX { */ "startDate"?: Date; } - interface CalciteDatePickerMonthFloatingMenu { - /** - * Active date - */ - "activeDate"?: Date; - /** - * Defines the available placements that can be used when a flip occurs. - */ - "flipPlacements"?: FlipPlacement[]; - /** - * CLDR locale data for translated calendar info. - */ - "localeData"?: DateLocaleData; - /** - * When `true`, month will be abbreviated. - */ - "monthAbbreviations"?: boolean; - /** - * Whether the component is opened. - */ - "open"?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - "overlayPositioning"?: OverlayPositioning; - /** - * Specifies the placement of the `calcite-date-picker` relative to the component. - * @default "bottom-start" - */ - "placement"?: MenuPlacement; - /** - * Specifies the position of the component in a range date-picker. - */ - "position"?: "start" | "end"; - } interface CalciteDatePickerMonthHeader { /** * The focused date is indicated and will become the selected date if the user proceeds. @@ -13864,7 +13782,6 @@ declare namespace LocalJSX { "calcite-date-picker": CalciteDatePicker; "calcite-date-picker-day": CalciteDatePickerDay; "calcite-date-picker-month": CalciteDatePickerMonth; - "calcite-date-picker-month-floating-menu": CalciteDatePickerMonthFloatingMenu; "calcite-date-picker-month-header": CalciteDatePickerMonthHeader; "calcite-dropdown": CalciteDropdown; "calcite-dropdown-group": CalciteDropdownGroup; @@ -13981,7 +13898,6 @@ declare module "@stencil/core" { "calcite-date-picker": LocalJSX.CalciteDatePicker & JSXBase.HTMLAttributes; "calcite-date-picker-day": LocalJSX.CalciteDatePickerDay & JSXBase.HTMLAttributes; "calcite-date-picker-month": LocalJSX.CalciteDatePickerMonth & JSXBase.HTMLAttributes; - "calcite-date-picker-month-floating-menu": LocalJSX.CalciteDatePickerMonthFloatingMenu & JSXBase.HTMLAttributes; "calcite-date-picker-month-header": LocalJSX.CalciteDatePickerMonthHeader & JSXBase.HTMLAttributes; "calcite-dropdown": LocalJSX.CalciteDropdown & JSXBase.HTMLAttributes; "calcite-dropdown-group": LocalJSX.CalciteDropdownGroup & JSXBase.HTMLAttributes; diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss index 6a0a9c652c6..cec2a8608b2 100644 --- a/packages/calcite-components/src/components/combobox/combobox.scss +++ b/packages/calcite-components/src/components/combobox/combobox.scss @@ -139,10 +139,6 @@ } } -.input--transparent { - @apply opacity-0; -} - .input--single { @apply p-0; margin-block: var(--calcite-internal-combobox-input-margin-block); diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index b25ef9d15de..c6586cf5d93 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -1596,7 +1596,6 @@ export class Combobox class={{ [CSS.input]: true, "input--single": true, - "input--transparent": this.activeChipIndex > -1, "input--hidden": showLabel, "input--icon": this.showingInlineIcon && !!this.placeholderIcon, }}