@@ -1321,7 +1337,7 @@ export class Combobox
onClick={this.clickHandler}
onKeyDown={this.keyDownHandler}
role="combobox"
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={this.setReferenceEl}
>
diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
index 457edeef090..0bc524ba1e9 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx
@@ -165,7 +165,7 @@ export class DatePickerMonthHeader {
pattern="\d*"
type="text"
value={localizedYear}
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={(el) => (this.yearInput = el)}
/>
{suffix && {suffix}}
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
index a40c9e4524a..6559fdd091b 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
+++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.tsx
@@ -472,7 +472,7 @@ export class DatePickerMonth {
selected={this.isSelected(date)}
startOfRange={this.isStartOfRange(date)}
value={date}
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={(el: HTMLCalciteDatePickerDayElement) => {
// when moving via keyboard, focus must be updated on active date
if (ref && active && this.activeFocus) {
diff --git a/packages/calcite-components/src/components/date-picker/assets/date-picker/nls/zh-CN.json b/packages/calcite-components/src/components/date-picker/assets/date-picker/nls/zh-CN.json
index bb9f9d58f6d..06c35391016 100644
--- a/packages/calcite-components/src/components/date-picker/assets/date-picker/nls/zh-CN.json
+++ b/packages/calcite-components/src/components/date-picker/assets/date-picker/nls/zh-CN.json
@@ -2,7 +2,7 @@
"default-calendar": "gregorian",
"separator": "/",
"unitOrder": "YYYY/MM/DD",
- "weekStart": 7,
+ "weekStart": 1,
"placeholder": "YYYY/MM/DD",
"days": {
"abbreviated": ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
index b362c01424d..9bb35dd4c20 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -162,7 +162,7 @@ export class DropdownItem implements LoadableComponent {
rel={this.rel}
tabIndex={-1}
target={this.target}
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={(el) => (this.childLink = el)}
>
{slottedContent}
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index 0a0d3f4541b..e7603d4e0aa 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -2,7 +2,7 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing";
import dedent from "dedent";
import { html } from "../../../support/formatting";
import { focusable, accessible, defaults, disabled, floatingUIOwner, hidden, renders } from "../../tests/commonTests";
-import { GlobalTestProps } from "../../tests/utils";
+import { GlobalTestProps, getFocusedElementProp } from "../../tests/utils";
import { CSS } from "./resources";
const simpleDropdownHTML = html`
@@ -819,6 +819,76 @@ describe("calcite-dropdown", () => {
});
});
+ describe("Focus order with Tab key", () => {
+ it("closes dropdown and focuses the next focusable element on Tab", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+ Open dropdown
+
+ Dropdown Item Content
+ Dropdown Item Content
+
+
+ Click
+ `);
+ const element = await page.find("calcite-dropdown");
+ const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
+ const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
+ const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
+ const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
+
+ expect(await dropdownWrapper.isVisible()).toBe(false);
+ await trigger.click();
+ await page.waitForChanges();
+ expect(await dropdownWrapper.isVisible()).toBe(true);
+ expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
+ expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
+ expect(await getFocusedElementProp(page, "id")).toBe("item-2");
+
+ await element.press("Tab");
+ await page.waitForChanges();
+ expect(await getFocusedElementProp(page, "id")).toBe("button-1");
+ expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+ expect(await dropdownWrapper.isVisible()).toBe(false);
+ });
+
+ it("closes dropdown and focuses the trigger on Shift+Tab", async () => {
+ const page = await newE2EPage();
+ await page.setContent(html`
+
+ Open dropdown
+
+ Dropdown Item Content
+ Dropdown Item Content
+
+
+ Click
+ `);
+ const element = await page.find("calcite-dropdown");
+ const trigger = await element.find("calcite-action[slot='trigger'] >>> button");
+ const dropdownWrapper = await page.find(`calcite-dropdown >>> .calcite-dropdown-wrapper`);
+ const calciteDropdownClose = await element.spyOnEvent("calciteDropdownClose");
+ const calciteDropdownOpen = await element.spyOnEvent("calciteDropdownOpen");
+
+ expect(await dropdownWrapper.isVisible()).toBe(false);
+ await trigger.click();
+ await page.waitForChanges();
+ expect(await dropdownWrapper.isVisible()).toBe(true);
+ expect(calciteDropdownOpen).toHaveReceivedEventTimes(1);
+ expect(calciteDropdownClose).toHaveReceivedEventTimes(0);
+ expect(await getFocusedElementProp(page, "id")).toBe("item-2");
+
+ await page.keyboard.down("Shift");
+ await element.press("Tab");
+ await page.keyboard.up("Shift");
+ await page.waitForChanges();
+ expect(await getFocusedElementProp(page, "id")).toBe("trigger");
+ expect(calciteDropdownClose).toHaveReceivedEventTimes(1);
+ expect(await dropdownWrapper.isVisible()).toBe(false);
+ });
+ });
+
it("closes existing open dropdown when opened", async () => {
const page = await newE2EPage();
await page.setContent(html`
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 6adfc16b1be..b31570c4a5b 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -239,7 +239,7 @@ export class Dropdown
id={`${guid}-menubutton`}
onClick={this.openCalciteDropdown}
onKeyDown={this.keyDownHandler}
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={this.setReferenceEl}
>
,
@@ -212,7 +212,7 @@ export class InlineEditable
onClick={this.confirmChangesHandler}
scale={this.scale}
type="button"
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={(el) => (this.confirmEditingButton = el)}
/>,
]}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ar.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ar.json
index 01670cabd86..b4444eb0ba5 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ar.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ar.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "اختر تاريخ"
+ "chooseDate": "اختر تاريخ",
+ "dateFormat": "تنسيق التاريخ:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_bg.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_bg.json
index 7c15c61c956..321df73345b 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_bg.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_bg.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Избор на дата"
+ "chooseDate": "Избор на дата",
+ "dateFormat": "Формат на дата:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_bs.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_bs.json
index ba303f439be..2a85e873575 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_bs.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_bs.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Odaberite datum"
+ "chooseDate": "Odaberite datum",
+ "dateFormat": "Format datuma:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ca.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ca.json
index 75eca961e22..cb8b8755445 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ca.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ca.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Trieu una data"
+ "chooseDate": "Trieu una data",
+ "dateFormat": "Format de data:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_cs.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_cs.json
index b0e0725dfac..6da21c33bdb 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_cs.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_cs.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Zvolit datum"
+ "chooseDate": "Zvolit datum",
+ "dateFormat": "Formát data:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_da.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_da.json
index 9087566c6a0..972c3c2c3f8 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_da.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_da.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Vælg dato"
+ "chooseDate": "Vælg dato",
+ "dateFormat": "Datoformat:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_de.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_de.json
index 9def5515ab3..6cd89b7f44a 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_de.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_de.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Datum auswählen"
+ "chooseDate": "Datum auswählen",
+ "dateFormat": "Datumsformat:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_el.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_el.json
index 35f0631e172..a0c54813386 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_el.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_el.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Επιλογή ημερομηνίας"
+ "chooseDate": "Επιλογή ημερομηνίας",
+ "dateFormat": "Μορφότυπο ημερομηνίας:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_es.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_es.json
index 67051cc0df7..b5aba868429 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_es.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_es.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Elegir fecha"
+ "chooseDate": "Elegir fecha",
+ "dateFormat": "Formato de fecha:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_et.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_et.json
index 406ad126239..5ad0b93756d 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_et.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_et.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Valige kuupäev"
+ "chooseDate": "Valige kuupäev",
+ "dateFormat": "Kuupäevavorming:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_fi.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_fi.json
index 59dbcc18352..32e64bab60e 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_fi.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_fi.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Valitse päivämäärä"
+ "chooseDate": "Valitse päivämäärä",
+ "dateFormat": "Päivämäärän muoto:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_fr.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_fr.json
index 4583f092443..33631fac463 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_fr.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_fr.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Choisir la date"
+ "chooseDate": "Choisir la date",
+ "dateFormat": "Format de date :"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_he.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_he.json
index ae5284314d1..5f3e3b2a50a 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_he.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_he.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "בחר תאריך"
+ "chooseDate": "בחר תאריך",
+ "dateFormat": "פורמט תאריך:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_hr.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_hr.json
index ba303f439be..2a85e873575 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_hr.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_hr.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Odaberite datum"
+ "chooseDate": "Odaberite datum",
+ "dateFormat": "Format datuma:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_hu.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_hu.json
index 21fa524e766..612ca187b0e 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_hu.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_hu.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Válasszon dátumot"
+ "chooseDate": "Válasszon dátumot",
+ "dateFormat": "Dátumformátum:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_id.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_id.json
index 051076ea527..82dbb3f20aa 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_id.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_id.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Pilih tanggal"
+ "chooseDate": "Pilih tanggal",
+ "dateFormat": "Format Tanggal:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_it.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_it.json
index 71d404eb62e..f3be5524da7 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_it.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_it.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Selezionare la data"
+ "chooseDate": "Selezionare la data",
+ "dateFormat": "Formato data:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ja.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ja.json
index 368e3c74d0a..8eca66f5a1c 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ja.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ja.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "日付の選択"
+ "chooseDate": "日付の選択",
+ "dateFormat": "日付形式:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ko.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ko.json
index fac79c2be33..fe2512fb33e 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ko.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ko.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "날짜 선택"
+ "chooseDate": "날짜 선택",
+ "dateFormat": "날짜 형식:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_lt.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_lt.json
index bf56f880ed6..c0ab2708777 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_lt.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_lt.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Pasirinkite datą"
+ "chooseDate": "Pasirinkite datą",
+ "dateFormat": "Datos formatas:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_lv.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_lv.json
index e07f4eadf87..be03921d90d 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_lv.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_lv.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Izvēlieties datumu"
+ "chooseDate": "Izvēlieties datumu",
+ "dateFormat": "Datuma formāts:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_nl.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_nl.json
index 7fdbea342c0..88c47f9ceac 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_nl.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_nl.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Datum kiezen"
+ "chooseDate": "Datum kiezen",
+ "dateFormat": "Datumindeling:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_no.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_no.json
index b85b5be689b..1454f6df00d 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_no.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_no.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Velg dato"
+ "chooseDate": "Velg dato",
+ "dateFormat": "Datoformat:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pl.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pl.json
index 827cd7e068c..17d6e3aefab 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pl.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pl.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Wybierz datę"
+ "chooseDate": "Wybierz datę",
+ "dateFormat": "Format daty:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-BR.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-BR.json
index 21b58cde385..ea0195d06fc 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-BR.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-BR.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Escolher data"
+ "chooseDate": "Escolher data",
+ "dateFormat": "Formato da Data:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-PT.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-PT.json
index 3eb9f6aa5a6..ee9f9f7f582 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-PT.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_pt-PT.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Selecionar data"
+ "chooseDate": "Selecionar data",
+ "dateFormat": "Formato de Data:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ro.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ro.json
index 1a4e8d2733a..2db35916089 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ro.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ro.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Alegeți data"
+ "chooseDate": "Alegeți data",
+ "dateFormat": "Format dată:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ru.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ru.json
index 21111911c3c..5d264f9e82e 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ru.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_ru.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Выбрать дату"
+ "chooseDate": "Выбрать дату",
+ "dateFormat": "Формат даты:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sk.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sk.json
index 193f9bdf923..cc8474f97f1 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sk.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sk.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Vyberte dátum"
+ "chooseDate": "Vyberte dátum",
+ "dateFormat": "Formát dátumu:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sl.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sl.json
index 2a9545f82be..610b9f825fe 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sl.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sl.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Izberi datum"
+ "chooseDate": "Izberi datum",
+ "dateFormat": "Format datuma:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sr.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sr.json
index ba303f439be..2a85e873575 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sr.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sr.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Odaberite datum"
+ "chooseDate": "Odaberite datum",
+ "dateFormat": "Format datuma:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sv.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sv.json
index af845ed6538..c524984468e 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sv.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_sv.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Välj datum"
+ "chooseDate": "Välj datum",
+ "dateFormat": "Datumformat:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_th.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_th.json
index 71ab249f64d..066a776a4a2 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_th.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_th.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "เลือกวันที่"
+ "chooseDate": "เลือกวันที่",
+ "dateFormat": "รูปแบบวันที่:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_tr.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_tr.json
index cd63cf74d85..834085a81dd 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_tr.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_tr.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Tarih seç"
+ "chooseDate": "Tarih seç",
+ "dateFormat": "Tarih Biçimi:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_uk.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_uk.json
index e8951b82184..1f6d5364456 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_uk.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_uk.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Вибрати дату"
+ "chooseDate": "Вибрати дату",
+ "dateFormat": "Формат дати:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_vi.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_vi.json
index 76e745a20cc..5e1a749244a 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_vi.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_vi.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "Chọn ngày"
+ "chooseDate": "Chọn ngày",
+ "dateFormat": "Định dạng Ngày:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-CN.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-CN.json
index e85ee19f84d..eb542f33d39 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-CN.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-CN.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "选择日期"
+ "chooseDate": "选择日期",
+ "dateFormat": "日期格式:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-HK.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-HK.json
index de7c3dd04c6..ea965df94d0 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-HK.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-HK.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "選擇日期"
+ "chooseDate": "選擇日期",
+ "dateFormat": "日期格式:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-TW.json b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-TW.json
index de7c3dd04c6..ea965df94d0 100644
--- a/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-TW.json
+++ b/packages/calcite-components/src/components/input-date-picker/assets/input-date-picker/t9n/messages_zh-TW.json
@@ -1,3 +1,4 @@
{
- "chooseDate": "選擇日期"
+ "chooseDate": "選擇日期",
+ "dateFormat": "日期格式:"
}
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 26a3610e13a..3383705be8c 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -80,6 +80,12 @@ export const laoNumberingSystemAndMediumIconForLargeInput_TestOnly = (): string
`;
+export const readOnlyHasNoDropdownAffordance_TestOnly = (): string => html`
+
+
+
+`;
+
export const darkModeRTL_TestOnly = (): string => html`
- {this.renderToggleIcon(this.open && this.focusedInput === "start")}
+ {!this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start")}
Date Format: {this.localeData?.placeholder}
@@ -559,7 +559,7 @@ export class InputDatePicker
}}
id={this.dialogId}
role="dialog"
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={this.setFloatingEl}
>
@@ -613,7 +613,7 @@ export class InputDatePicker
- {this.renderToggleIcon(this.open && this.focusedInput === "end")}
+ {!this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end")}
)}
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 a14a339da22..4a7a7a5854c 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -1004,7 +1004,7 @@ export class InputNumber
readOnly={this.readOnly}
type="text"
value={this.localizedValue}
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={this.setChildNumberElRef}
/>
);
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index f857fd09af3..b20c6ec344f 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -653,7 +653,7 @@ export class InputText
tabIndex={this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null}
type="text"
value={this.value}
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={this.setChildElRef}
/>
);
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
index ed436ce903c..c58275bb4c2 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
@@ -84,3 +84,7 @@ export const arabicLocaleNumberingSystem_TestOnly = (): string => html`
>
`;
+
+export const readOnlyHasNoDropdownAffordance_TestOnly = (): string => html`
+
+`;
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index 2c7bffc9085..20649d58ed0 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -822,10 +822,10 @@ export class InputTimePicker
role="combobox"
scale={this.scale}
step={this.step}
- // eslint-disable-next-line react/jsx-sort-props
+ // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
ref={this.setCalciteInputEl}
/>
- {this.renderToggleIcon(this.open)}
+ {!this.readOnly && this.renderToggleIcon(this.open)}