Merge remote-tracking branch 'origin/main' into benelan/8057-input-me…

…ssage * origin/main: fix(input-date-picker): respect the numberingSystem property when rendering the input (#8383) fix(action-menu): keep internal popover open property in sync (#8387)
Esri · Dec 9, 2023 · 21463bd · 21463bd
2 parents b0bfb71 + 395b538
commit 21463bd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
@@ -139,6 +139,8 @@ describe("calcite-action-menu", () => {
 
     expect(await popover.getProperty("autoClose")).toBe(true);
 
+    expect(await popover.getProperty("open")).toBe(true);
+
     expect(await actionMenu.getProperty("open")).toBe(true);
 
     const outside = await page.find("#outside");
@@ -148,6 +150,8 @@ describe("calcite-action-menu", () => {
     await page.waitForChanges();
 
     expect(await actionMenu.getProperty("open")).toBe(false);
+
+    expect(await popover.getProperty("open")).toBe(false);
   });
 
   it("should close menu if slotted action is clicked", async () => {

diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -43,6 +43,10 @@ export class ActionMenu implements LoadableComponent {
   //
   // --------------------------------------------------------------------------
 
+  connectedCallback(): void {
+    this.connectMenuButtonEl();
+  }
+
   componentWillLoad(): void {
     setUpLoadableComponent(this);
   }
@@ -294,6 +298,7 @@ export class ActionMenu implements LoadableComponent {
         label={label}
         offsetDistance={0}
         onCalcitePopoverClose={this.handlePopoverClose}
+        onCalcitePopoverOpen={this.handlePopoverOpen}
         open={open}
         overlayPositioning={overlayPositioning}
         placement={placement}
@@ -500,6 +505,10 @@ export class ActionMenu implements LoadableComponent {
     this.open = value;
   };
 
+  private handlePopoverOpen = (): void => {
+    this.open = true;
+  };
+
   private handlePopoverClose = (): void => {
     this.open = false;
   };

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
@@ -180,16 +180,18 @@ export const scales_TestOnly = (): string =>
     </div>
   `;
 
-export const darkModeRTL_TestOnly = (): string => html`
+export const arabicLocaleDarkModeRTL_TestOnly = (): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
       class="calcite-mode-dark"
       dir="rtl"
       value="2020-12-12"
+      numbering-system="arab"
+      lang="ar"
     ></calcite-input-date-picker
   </div>
 `;
-darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
+arabicLocaleDarkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const widthSetToBreakpoints_TestOnly = (): string =>
   createBreakpointStories(

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -58,7 +58,7 @@ import {
 } from "../../utils/loadable";
 import {
   connectLocalized,
-  defaultNumberingSystem,
+  getSupportedNumberingSystem,
   disconnectLocalized,
   LocalizedComponent,
   NumberingSystem,
@@ -133,8 +133,7 @@ export class InputDatePicker
    *
    * When not set, the component will be associated with its ancestor form element, if any.
    */
-  @Prop({ reflect: true })
-  form: string;
+  @Prop({ reflect: true }) form: string;
 
   /**
    * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
@@ -1026,14 +1025,12 @@ export class InputDatePicker
     const formattingOptions = {
       // we explicitly set numberingSystem to prevent the browser-inferred value
       // see https://github.com/Esri/calcite-design-system/issues/3079#issuecomment-1168964195 for more info
-      numberingSystem: defaultNumberingSystem,
+      numberingSystem: getSupportedNumberingSystem(this.numberingSystem),
     };
 
-    const localizedDate =
-      date && this.formatNumerals(date.toLocaleDateString(this.effectiveLocale, formattingOptions));
+    const localizedDate = date && date.toLocaleDateString(this.effectiveLocale, formattingOptions);
     const localizedEndDate =
-      endDate &&
-      this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale, formattingOptions));
+      endDate && endDate.toLocaleDateString(this.effectiveLocale, formattingOptions);
 
     this.setInputValue(localizedDate ?? "", "start");
     this.setInputValue((this.range && localizedEndDate) ?? "", "end");