Improve cookbook examples (#634)

* Improve cookbook examples

* Fix lint

* Add autofocus & fix closing

* Fix demo style

Author: mkszepp

docs/app/components/snippets/datepicker-1.gts

@@ -3,17 +3,44 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
-import PowerCalendar from 'ember-power-calendar/components/power-calendar';
+import PowerSelect from 'ember-power-select/components/power-select';
+import PowerCalendar, {
+  type PowerCalendarDefaultBlock,
+} from 'ember-power-calendar/components/power-calendar';
 import {
   formatDate,
   type NormalizeCalendarValue,
   type PowerCalendarDay,
 } from 'ember-power-calendar/utils';
+import { fn } from '@ember/helper';
+import type { Dropdown } from 'ember-basic-dropdown/types';
+import type { Select, Selected } from 'ember-power-select/types';
 
 export default class extends Component {
   @tracked center: Date | undefined = undefined;
   @tracked selected: Date | undefined = undefined;
 
+  dropdownApi: Dropdown | null = null;
+
+  months: string[] = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  years: string[] = Array(...(Array(120) as never[])).map(
+    (_, i) => `${i + 1940}`,
+  );
+
   @action
   onCenterChange(selected: NormalizeCalendarValue) {
     this.center = selected.date;
@@ -22,27 +49,94 @@ export default class extends Component {
   @action
   onSelect(selected: PowerCalendarDay) {
     this.selected = selected.date;
+
+    this.dropdownApi?.actions.close();
+  }
+
+  @action
+  onClose(dropdown: Dropdown, e?: Event): boolean {
+    // Avoid closing date picker when cursor is inside input field
+    if (
+      e?.type === 'click' &&
+      document.activeElement === e?.target &&
+      (e?.target as HTMLElement).tagName === 'INPUT' &&
+      (e?.target as HTMLElement)?.closest(
+        `[data-ebd-id="${dropdown.uniqueId}-trigger"]`,
+      )
+    ) {
+      return false;
+    }
+
+    // Avoid closing date picker when cursor is inside the dropdown
+    if (
+      e?.type === 'click' &&
+      document.activeElement?.closest(
+        `[id="ember-basic-dropdown-content-${dropdown.uniqueId}"]`,
+      )
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
+  @action
+  async changeCenter(
+    unit: 'month' | 'year',
+    calendar: PowerCalendarDefaultBlock,
+    selectedValue: Selected<string>,
+    _select: Select<string>,
+    e?: Event,
+  ) {
+    const newCenter = new Date(calendar.center);
+
+    switch (unit) {
+      case 'month': {
+        const value = this.months.indexOf(selectedValue ?? '');
+        newCenter.setMonth(value);
+        break;
+      }
+
+      case 'year':
+        newCenter.setFullYear(parseInt(selectedValue ?? ''));
+        break;
+    }
+
+    if (calendar.actions.changeCenter && e) {
+      await calendar.actions.changeCenter(newCenter, calendar, e);
+    }
+  }
+
+  @action
+  registerAPI(api: Dropdown | null) {
+    this.dropdownApi = api;
   }
 
   <template>
-    <BasicDropdown as |dropdown|>
-      <div>
-        <label for="datepicker-1">Date picker</label>
-      </div>
-
-      <input
-        type="text"
-        data-ebd-id="{{dropdown.uniqueId}}-trigger"
-        class="datepicker-demo-input"
-        value={{if this.selected (formatDate this.selected "DD-MM-YYYY")}}
-        id="datepicker-1"
-        readonly
-        {{on "focus" dropdown.actions.toggle}}
-      />
+    <BasicDropdown
+      @onClose={{this.onClose}}
+      @renderInPlace={{false}}
+      @registerAPI={{this.registerAPI}}
+      as |dropdown|
+    >
+      <dropdown.Trigger tabindex="-1">
+        <div>
+          <label for="datepicker-1">Date picker</label>
+        </div>
+
+        <input
+          type="text"
+          class="datepicker-demo-input"
+          value={{if this.selected (formatDate this.selected "DD-MM-YYYY")}}
+          id="datepicker-1"
+          readonly
+          {{on "focus" dropdown.actions.toggle}}
+        />
+      </dropdown.Trigger>
 
       <dropdown.Content class="datepicker-demo-dropdown">
         <PowerCalendar
-          class="demo-calendar-small"
+          class="demo-calendar-small nav-with-power-select-demo"
           @center={{this.center}}
           @onCenterChange={{this.onCenterChange}}
           @selected={{this.selected}}
@@ -51,7 +145,25 @@ export default class extends Component {
           @autofocus={{true}}
           as |calendar|
         >
-          <calendar.Nav />
+          <calendar.Nav>
+            <PowerSelect
+              @options={{this.months}}
+              @selected={{formatDate calendar.center "MMMM"}}
+              @matchTriggerWidth={{false}}
+              @onChange={{fn this.changeCenter "month" calendar}}
+              as |month|
+            >
+              {{month}}
+            </PowerSelect>
+            <PowerSelect
+              @options={{this.years}}
+              @selected={{formatDate calendar.center "YYYY"}}
+              @onChange={{fn this.changeCenter "year" calendar}}
+              as |year|
+            >
+              {{year}}
+            </PowerSelect>
+          </calendar.Nav>
           <calendar.Days />
         </PowerCalendar>
       </dropdown.Content>

docs/app/components/snippets/nav-select-1.gts

@@ -28,7 +28,7 @@ export default class extends Component {
     'December',
   ];
 
-  years: string[] = Array(...(Array(80) as never[])).map(
+  years: string[] = Array(...(Array(120) as never[])).map(
     (_, i) => `${i + 1940}`,
   );
 

docs/app/components/snippets/nav-select-2.gts

@@ -64,6 +64,18 @@ export default class extends Component {
       groupName: "00's",
       options: Array(...(Array(10) as never[])).map((_, i) => `${i + 2000}`),
     },
+    {
+      groupName: "10's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 2010}`),
+    },
+    {
+      groupName: "20's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 2020}`),
+    },
+    {
+      groupName: "30's",
+      options: Array(...(Array(10) as never[])).map((_, i) => `${i + 2030}`),
+    },
   ];
 
   @action

docs/app/components/snippets/nav-select-3.gts

@@ -60,7 +60,7 @@ export default class extends Component {
         <input
           type="number"
           min="1940"
-          max="2020"
+          max="2040"
           value={{formatDate cal.center "YYYY"}}
           {{on "input" (fn this.changeYear cal)}}
         />

docs/app/styles/app.scss

@@ -237,6 +237,7 @@
   .ember-power-select-trigger {
     border: none;
     box-shadow: none;
+    white-space: nowrap;
     min-width: 70px;
   }
 }