@descope-ui/descope-month-day-field-picker 3.13.0

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@descope-ui/descope-month-day-field-picker",
+  "version": "3.13.0",
+  "files": [
+    "src",
+    "stories"
+  ],
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/MonthDayFieldPickerClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.58.2",
+    "e2e-utils": "3.13.0",
+    "test-drivers": "3.13.0"
+  },
+  "dependencies": {
+    "@descope-ui/common": "3.13.0",
+    "@descope-ui/theme-globals": "3.13.0",
+    "@descope-ui/theme-input-wrapper": "3.13.0",
+    "@descope-ui/descope-combo-box": "3.13.0"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/src/component/MonthDayFieldPickerClass.js

@@ -0,0 +1,354 @@
+import { createBaseInputClass } from '@descope-ui/common/base-classes';
+import { compose } from '@descope-ui/common/utils';
+import {
+  forwardAttrs,
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
+import {
+  componentNameValidationMixin,
+  createStyleMixin,
+  draggableMixin,
+} from '@descope-ui/common/components-mixins';
+
+import { DAYS_PER_MONTH, months as DEFAULT_MONTHS } from './consts';
+
+export const componentName = getComponentName('month-day-field-picker');
+
+const observedAttrs = [
+  'initial-value',
+  'picker-months',
+  'st-host-direction',
+  'disabled',
+  'full-width',
+];
+
+const BaseInputClass = createBaseInputClass({
+  componentName,
+  baseSelector: 'div',
+});
+
+const isValidMonthNamesArr = (arr) =>
+  Array.isArray(arr) && arr.length === 12 && arr.filter(Boolean).length === 12;
+
+const ensureMonthNamesArr = (attrVal) => {
+  const arr = attrVal?.split(',');
+  return isValidMonthNamesArr(arr) ? arr : DEFAULT_MONTHS;
+};
+
+// Build descope-combo-box items via DOM (textContent / setAttribute) rather than an
+// innerHTML template. picker-months is a user-facing attribute (localized strings,
+// admin-configured copy) so labels must never be parsed as HTML.
+const buildOptions = (entries, parent) => {
+  const fragment = document.createDocumentFragment();
+  entries.forEach(({ id, name }) => {
+    const item = document.createElement('div');
+    item.className = 'combo-box-item';
+    item.setAttribute('data-id', String(id));
+    item.setAttribute('data-name', name);
+    item.textContent = name;
+    fragment.appendChild(item);
+  });
+  parent.replaceChildren(fragment);
+};
+
+const monthEntries = (names) =>
+  names.map((name, idx) => ({ id: idx + 1, name }));
+
+const dayEntries = (count) =>
+  Array.from({ length: count }, (_, i) => ({ id: i + 1, name: String(i + 1) }));
+
+class RawMonthDayPicker extends BaseInputClass {
+  static get observedAttributes() {
+    return [].concat(BaseInputClass.observedAttributes || [], observedAttrs);
+  }
+
+  // 1..12 or null
+  #month = null;
+
+  // 1..N (N depends on month) or null
+  #day = null;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+      <div class="picker">
+        <div class="inputs-row">
+          <descope-combo-box
+            class="month-input"
+            bordered="true"
+            label-type="static"
+            allow-custom-value="false"
+            full-width="true"
+            item-label-path="data-name"
+            item-value-path="data-id"
+          ></descope-combo-box>
+          <descope-combo-box
+            class="day-input"
+            bordered="true"
+            label-type="static"
+            allow-custom-value="false"
+            full-width="true"
+            item-label-path="data-name"
+            item-value-path="data-id"
+          ></descope-combo-box>
+        </div>
+      </div>
+    `;
+
+    injectStyle(
+      `
+      :host {
+        display: inline-block;
+        box-sizing: border-box;
+        max-width: 100%;
+        user-select: none;
+        -webkit-user-select: none;
+      }
+
+      .inputs-row {
+        display: flex;
+      }
+
+      .inputs-row > descope-combo-box {
+        flex: 1;
+        min-width: 0;
+      }
+      `,
+      this,
+    );
+
+    // Bind refs here so attributeChangedCallback (which fires before init) can
+    // render into the combos instead of bailing on unbound refs and being redone.
+    this.monthInput = this.shadowRoot.querySelector('.month-input');
+    this.dayInput = this.shadowRoot.querySelector('.day-input');
+  }
+
+  // ---- public API ----
+
+  get month() {
+    return this.#month;
+  }
+
+  set month(val) {
+    const n = Number(val);
+    if (!Number.isInteger(n) || n < 1 || n > 12) {
+      this.#month = null;
+    } else {
+      this.#month = n;
+    }
+    // If the previously selected day no longer exists in the newly selected month
+    // (e.g. April 30 → February), reset to day 1. Days that still fit are kept
+    // (e.g. April 30 → January keeps 30).
+    if (
+      this.#day != null &&
+      this.#month != null &&
+      this.#day > DAYS_PER_MONTH[this.#month - 1]
+    ) {
+      this.#day = 1;
+    }
+    this.#syncMonthInput();
+    this.#renderDayOptions();
+    this.#syncDayInput();
+    this.#dispatchChange();
+  }
+
+  get day() {
+    return this.#day;
+  }
+
+  set day(val) {
+    const n = Number(val);
+    if (!Number.isInteger(n) || n < 1) {
+      this.#day = null;
+    } else if (this.#month != null && n > DAYS_PER_MONTH[this.#month - 1]) {
+      this.#day = null;
+    } else {
+      this.#day = n;
+    }
+    this.#syncDayInput();
+    this.#dispatchChange();
+  }
+
+  /**
+   * Sets both month and day from a string `"MM/DD"`. Empty / null / undefined resets to
+   * today's date (current real-world month + current day). Other formats are silently ignored.
+   */
+  set value(val) {
+    if (!val) {
+      this.#defaultToToday();
+      return;
+    }
+    const match = /^(0?[1-9]|1[0-2])\D(0?[1-9]|[12][0-9]|3[01])$/.exec(
+      String(val).trim(),
+    );
+    if (!match) return;
+    const m = Number(match[1]);
+    const d = Number(match[2]);
+    this.month = m;
+    // Re-assign day after month so the DAYS_PER_MONTH ceiling check uses the new month.
+    this.day = d;
+  }
+
+  #defaultToToday() {
+    const now = new Date();
+    this.month = now.getMonth() + 1;
+    this.day = now.getDate();
+  }
+
+  /** Returns `"MM/DD"` when both values are set; empty string otherwise. */
+  get value() {
+    if (this.#month == null || this.#day == null) return '';
+    return `${String(this.#month).padStart(2, '0')}/${String(this.#day).padStart(2, '0')}`;
+  }
+
+  // ---- lifecycle ----
+
+  init() {
+    super.init?.();
+
+    this.#initMonthInput();
+    this.#initDayInput();
+
+    // If we have neither initial-value nor an explicit month, default to today's date
+    // (current real-world month + current day). The month/day setters paint the combos.
+    const initial = this.getAttribute('initial-value');
+    if (initial) {
+      this.value = initial;
+    } else if (this.#month == null) {
+      this.#defaultToToday();
+    }
+
+    forwardAttrs(this, this.monthInput, {
+      includeAttrs: ['disabled', 'size', 'st-host-direction'],
+    });
+    forwardAttrs(this, this.dayInput, {
+      includeAttrs: ['disabled', 'size', 'st-host-direction'],
+    });
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback?.(name, oldVal, newVal);
+    if (oldVal === newVal) return;
+
+    if (name === 'initial-value') {
+      this.value = newVal;
+    } else if (name === 'picker-months') {
+      this.#renderMonthOptions();
+    }
+  }
+
+  // ---- internals ----
+
+  get #monthNames() {
+    return ensureMonthNamesArr(this.getAttribute('picker-months'));
+  }
+
+  #initMonthInput() {
+    this.#renderMonthOptions();
+    this.monthInput.addEventListener('input', this.#onMonthChange.bind(this));
+  }
+
+  #initDayInput() {
+    // Day options are populated lazily — they depend on the selected month.
+    this.dayInput.addEventListener('input', this.#onDayChange.bind(this));
+  }
+
+  #renderMonthOptions() {
+    buildOptions(monthEntries(this.#monthNames), this.monthInput);
+    this.#syncMonthInput();
+  }
+
+  #renderDayOptions() {
+    const count = DAYS_PER_MONTH[this.#month - 1] ?? 0;
+    buildOptions(dayEntries(count), this.dayInput);
+  }
+
+  #syncMonthInput() {
+    if (!this.monthInput) return;
+    // Defer one tick: descope-combo-box indexes its options via MutationObserver
+    // (microtask). Setting `.value` synchronously right after appending options
+    // silently fails to select an item, leaving the combo empty. Calendar uses
+    // the same setTimeout workaround for its year input.
+    setTimeout(() => {
+      if (!this.monthInput) return;
+      this.monthInput.value = this.#month != null ? String(this.#month) : '';
+    });
+  }
+
+  #syncDayInput() {
+    // Same microtask deferral as #syncMonthInput: the combo-box indexes its options
+    // via MutationObserver, so setting `.value` synchronously after rendering options
+    // silently no-ops.
+    setTimeout(() => {
+      if (!this.dayInput) return;
+      this.dayInput.value = this.#day !== null ? String(this.#day) : '';
+    });
+  }
+
+  #onMonthChange(e) {
+    const raw = e.target?.value;
+    const next = raw ? Number(raw) : null;
+    if (next === this.#month) return;
+    this.month = next;
+  }
+
+  #onDayChange(e) {
+    const raw = e.target?.value;
+    const next = raw ? Number(raw) : null;
+    if (next === this.#day) return;
+    this.day = next;
+  }
+
+  // Emitted on every month/day mutation (user or programmatic) so a host can observe
+  // the picker's value/validity — e.g. to drive an external submit button's enabled
+  // state. The host (descope-month-day-field) owns the Done/Cancel buttons.
+  #dispatchChange() {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: { month: this.#month, day: this.#day },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  // The picker is popover content, not a form field, so it has no validation semantics.
+  // Returning an empty validity object satisfies inputValidationMixin (the base class
+  // default returns undefined and crashes the mixin's getErrorMessage destructure).
+  getValidity() {
+    return {};
+  }
+}
+
+const { picker, monthInput, dayInput, inputsRow } = {
+  picker: { selector: () => '.picker' },
+  monthInput: { selector: () => '.month-input' },
+  dayInput: { selector: () => '.day-input' },
+  inputsRow: { selector: () => '.inputs-row' },
+};
+
+export const MonthDayFieldPickerClass = compose(
+  createStyleMixin({
+    componentNameOverride: getComponentName('input-wrapper'),
+  }),
+  createStyleMixin({
+    mappings: {
+      fontSize: {},
+      fontFamily: {},
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDirection: { property: 'direction' },
+
+      pickerPadding: { ...picker, property: 'padding' },
+
+      inputsRowGap: { ...inputsRow, property: 'gap' },
+      inputWidth: [
+        { ...monthInput, property: 'width' },
+        { ...dayInput, property: 'width' },
+      ],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawMonthDayPicker);

package/src/component/consts.js

@@ -0,0 +1,18 @@
+// February shows 29 days even though Feb 29 only exists in leap years —
+// the picker intentionally has no year, so Feb 29 is unconditionally allowed.
+export const DAYS_PER_MONTH = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+export const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];

package/src/component/index.js

@@ -0,0 +1,10 @@
+import '@descope-ui/descope-combo-box';
+
+import {
+  componentName,
+  MonthDayFieldPickerClass,
+} from './MonthDayFieldPickerClass';
+
+customElements.define(componentName, MonthDayFieldPickerClass);
+
+export { MonthDayFieldPickerClass, componentName };

package/src/theme.js

@@ -0,0 +1,25 @@
+import { refs } from '@descope-ui/theme-input-wrapper';
+import { MonthDayFieldPickerClass } from './component/MonthDayFieldPickerClass';
+
+const vars = MonthDayFieldPickerClass.cssVarList;
+
+const monthDayFieldPicker = {
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.fontSize]: refs.fontSize,
+  [vars.hostDirection]: refs.direction,
+
+  [vars.inputWidth]: '130px',
+
+  // Calendar-style padding around the content. Combos use flex:1 (see class CSS)
+  // to share the remaining horizontal space, landing at ~130px each at default
+  // font size — same breathing-room calendar's two combos have.
+  [vars.pickerPadding]: '1em 1em',
+  [vars.inputsRowGap]: '0.5em',
+
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default monthDayFieldPicker;
+export { vars };

package/stories/descope-month-day-field-picker.stories.js

@@ -0,0 +1,61 @@
+import { componentName } from '../src/component';
+import {
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+} from '@descope-ui/common/sb-controls';
+
+const Template = ({
+  size,
+  direction,
+  disabled,
+  'full-width': fullWidth,
+  'initial-value': initialValue,
+  'picker-months': pickerMonths,
+}) => `
+      <descope-month-day-field-picker
+        size="${size}"
+        disabled="${disabled || false}"
+        initial-value="${initialValue || ''}"
+        full-width="${fullWidth || false}"
+        st-host-direction="${direction ?? ''}"
+        picker-months="${pickerMonths || ''}"
+      ></descope-month-day-field-picker>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-month-day-field-picker',
+  decorators: [
+    (story) => {
+      setTimeout(() => {
+        const picker = document.querySelector('descope-month-day-field-picker');
+        picker.addEventListener('change', (e) =>
+          console.log('change', e.detail),
+        );
+      });
+      return story();
+    },
+  ],
+  argTypes: {
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...directionControl,
+    'initial-value': {
+      name: 'Initial Value',
+      control: { type: 'text' },
+    },
+    'picker-months': {
+      name: 'Custom Months',
+      control: { type: 'text' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+};