jsl-ui 9.28.7 → 10.0.0

package/lib/ui/date.picker/mode/base-mode.js

@@ -7,6 +7,7 @@ import yearPicker from '../views/year-picker';
 import { bufferFn, noop } from '../lib/fns';
 import { on, CustomEvent, Key } from '../lib/dom';
 import { constrainDate } from '../lib/date-manip';
+import { helper } from '../../../core/helper';
 var views = {
     day: dayPicker,
     year: yearPicker,
@@ -16,23 +17,30 @@ export default function BaseMode(input, emit, opts) {
     var detatchInputEvents; // A function that detaches all events from the input
     var closing = false; // A hack to prevent calendar from re-opening when closing.
     var selectedDate; // The currently selected date
+    var silentUpdate = false;
+    var originalControls = input.getAttribute('aria-controls');
+    var originalExpanded = input.getAttribute('aria-expanded');
+    var originalHasPopup = input.getAttribute('aria-haspopup');
     var dp = {
         // The root DOM element for the date picker, initialized on first open.
         el: undefined,
         opts: opts,
+        destroyed: false,
         shouldFocusOnBlur: true,
         shouldFocusOnRender: true,
         state: initialState(),
         adjustPosition: noop,
         containerHTML: '<div class="dp"></div>',
         attachToDom: function () {
-            opts.appendTo.appendChild(dp.el);
+            (opts.appendTo || input.closest('.jsl-dialog') || document.body).appendChild(dp.el);
         },
         updateInput: function (selectedDate) {
             var e = new CustomEvent('change', { bubbles: true });
             e.simulated = true;
             input.value = selectedDate ? opts.format(selectedDate) : '';
-            input.dispatchEvent(e);
+            if (!silentUpdate) {
+                input.dispatchEvent(e);
+            }
         },
         computeSelectedDate: function () {
             return opts.parse(input.value);
@@ -41,17 +49,29 @@ export default function BaseMode(input, emit, opts) {
             return views[dp.state.view];
         },
         open: function () {
-            if (closing) {
+            if (closing || dp.destroyed || input.disabled || dp.isVisible()) {
                 return;
             }
             if (!dp.el) {
                 dp.el = createContainerElement(opts, dp.containerHTML);
+                dp.el.id = helper.newDomGuid();
+                if (opts.mode !== 'dp-permanent') {
+                    input.setAttribute('aria-controls', dp.el.id);
+                }
                 attachContainerEvents(dp);
             }
-            selectedDate = constrainDate(dp.computeSelectedDate(), opts.min, opts.max);
+            try {
+                selectedDate = constrainDate(dp.computeSelectedDate(), opts.min, opts.max);
+            }
+            catch (_a) {
+                selectedDate = null;
+            }
             dp.state.hilightedDate = selectedDate || opts.hilightedDate;
             dp.state.view = 'day';
             dp.attachToDom();
+            if (opts.mode !== 'dp-permanent') {
+                input.setAttribute('aria-expanded', 'true');
+            }
             dp.render();
             emit('open');
         },
@@ -69,6 +89,7 @@ export default function BaseMode(input, emit, opts) {
         },
         close: function (becauseOfBlur) {
             var el = dp.el;
+            var hadFocus = dp.hasFocus();
             if (!dp.isVisible()) {
                 return;
             }
@@ -77,7 +98,8 @@ export default function BaseMode(input, emit, opts) {
                 parent && parent.removeChild(el);
             }
             closing = true;
-            if (becauseOfBlur && dp.shouldFocusOnBlur) {
+            input.setAttribute('aria-expanded', 'false');
+            if (!dp.destroyed && (hadFocus || (becauseOfBlur && dp.shouldFocusOnBlur))) {
                 focusInput(input);
             }
             // When we close, the input often gains refocus, which
@@ -89,32 +111,59 @@ export default function BaseMode(input, emit, opts) {
             emit('close');
         },
         destroy: function () {
+            var _a;
+            dp.destroyed = true;
             dp.close();
+            (_a = dp.el) === null || _a === void 0 ? void 0 : _a.remove();
             detatchInputEvents();
+            [['aria-controls', originalControls], ['aria-expanded', originalExpanded], ['aria-haspopup', originalHasPopup]].forEach(function (entry) {
+                if (entry[1] == null) {
+                    input.removeAttribute(entry[0]);
+                }
+                else {
+                    input.setAttribute(entry[0], entry[1]);
+                }
+            });
         },
         render: function () {
-            if (!dp.el) {
+            if (!dp.isVisible() || dp.destroyed) {
                 return;
             }
             var hadFocus = dp.hasFocus();
             var html = dp.currentView().render(dp);
             html && (dp.el.firstChild.innerHTML = html);
             dp.adjustPosition();
-            if (hadFocus || dp.shouldFocusOnRender) {
+            if (hadFocus || (!silentUpdate && dp.shouldFocusOnRender)) {
                 focusCurrent(dp);
             }
         },
         // Conceptually similar to setState in React, updates
         // the view state and re-renders.
-        setState: function (state) {
-            for (var key in state) {
-                dp.state[key] = state[key];
+        setState: function (state, silent = false) {
+            var previousSilent = silentUpdate;
+            silentUpdate = silent;
+            try {
+                for (var key in state) {
+                    if (key === 'hilightedDate' && !state[key]) {
+                        continue;
+                    }
+                    dp.state[key] = state[key];
+                }
+                if (!silent) {
+                    emit('statechange');
+                }
+                dp.render();
+            }
+            finally {
+                silentUpdate = previousSilent;
             }
-            emit('statechange');
-            dp.render();
         },
     };
     detatchInputEvents = attachInputEvents(input, dp);
+    if (opts.mode !== 'dp-permanent') {
+        input.setAttribute('aria-haspopup', 'dialog');
+        input.setAttribute('aria-expanded', 'false');
+    }
     // Builds the initial view state
     // selectedDate is a special case and causes changes to hilightedDate
     // hilightedDate is set on open, so remains undefined initially
@@ -125,8 +174,11 @@ export default function BaseMode(input, emit, opts) {
                 return selectedDate;
             },
             set selectedDate(dt) {
-                if (dt && !opts.inRange(dt)) {
-                    return;
+                if (dt) {
+                    dt = opts.parse(dt);
+                    if (!dt || !opts.inRange(dt)) {
+                        return;
+                    }
                 }
                 if (dt) {
                     selectedDate = new Date(dt);
@@ -136,8 +188,10 @@ export default function BaseMode(input, emit, opts) {
                     selectedDate = dt;
                 }
                 dp.updateInput(selectedDate);
-                emit('select');
-                dp.close();
+                if (!silentUpdate) {
+                    emit('select');
+                    dp.close();
+                }
             },
             view: 'day',
             hilightedDate: undefined
@@ -148,11 +202,19 @@ export default function BaseMode(input, emit, opts) {
 function createContainerElement(opts, containerHTML) {
     var el = document.createElement('div');
     el.className = opts.mode;
+    el.setAttribute('role', opts.mode === 'dp-permanent' ? 'group' : 'dialog');
+    el.setAttribute('aria-label', 'Choose a date');
+    if (opts.mode === 'dp-modal') {
+        el.setAttribute('aria-modal', 'true');
+    }
     el.innerHTML = containerHTML;
     return el;
 }
 function attachInputEvents(input, dp) {
     var bufferShow = bufferFn(5, function () {
+        if (dp.destroyed) {
+            return;
+        }
         if (dp.shouldHide()) {
             dp.close();
         }
@@ -162,7 +224,7 @@ function attachInputEvents(input, dp) {
     });
     var off = [
         on('blur', input, bufferFn(150, function () {
-            if (!dp.hasFocus()) {
+            if (!dp.destroyed && !dp.hasFocus()) {
                 dp.close(true);
             }
         })),
@@ -172,6 +234,21 @@ function attachInputEvents(input, dp) {
             }
         }),
         on('focus', input, bufferShow),
+        on('keydown', input, function (e) {
+            if (e.key === 'Escape' && dp.isVisible()) {
+                e.preventDefault();
+                e.stopPropagation();
+                dp.close();
+            }
+            else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                e.stopPropagation();
+                dp.open();
+                if (dp.isVisible()) {
+                    focusCurrent(dp);
+                }
+            }
+        }),
         on('input', input, function (e) {
             try {
                 var date = dp.opts.parse(e.target.value);
@@ -192,7 +269,7 @@ function attachInputEvents(input, dp) {
     };
 }
 function focusCurrent(dp) {
-    var current = dp.el.querySelector('.dp-current');
+    var current = dp.el.querySelector('.dp-current:not(:disabled)') || dp.el.querySelector('button:not(:disabled)');
     return current && current.focus();
 }
 function attachContainerEvents(dp) {
@@ -201,6 +278,9 @@ function attachContainerEvents(dp) {
     // Hack to get iOS to show active CSS states
     el.ontouchstart = noop;
     function onClick(e) {
+        if (e.target.disabled) {
+            return;
+        }
         e.target.className.split(' ').forEach(function (evt) {
             var handler = dp.currentView().onClick[evt];
             handler && handler(e, dp);
@@ -213,15 +293,25 @@ function attachContainerEvents(dp) {
     // would be to set context.redrawing = true on redraw and
     // set it to false in the blur event.
     on('blur', calEl, bufferFn(150, function () {
-        if (!dp.hasFocus()) {
+        if (!dp.destroyed && !dp.hasFocus()) {
             dp.close(true);
         }
     }));
     on('keydown', el, function (e) {
-        if (e.keyCode === Key.enter) {
-            onClick(e);
+        var _a;
+        if (e.key === 'Tab' && dp.opts.mode === 'dp-modal') {
+            var buttons = Array.from(el.querySelectorAll('button:not(:disabled)[tabindex="0"], button:not(:disabled):not([tabindex])'));
+            var index = buttons.indexOf(document.activeElement);
+            if (e.shiftKey && index <= 0 || !e.shiftKey && index === buttons.length - 1) {
+                e.preventDefault();
+                (_a = buttons[e.shiftKey ? buttons.length - 1 : 0]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
         }
-        else {
+        else if (e.keyCode !== Key.enter && e.key !== ' ') {
+            if (e.keyCode === Key.esc || [Key.left, Key.right, Key.up, Key.down].indexOf(e.keyCode) >= 0) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
             dp.currentView().onKeyDown(e, dp);
         }
     });

package/lib/ui/date.picker/mode/dropdown-mode.d.ts

@@ -1,9 +1,7 @@
-/**
- * @file Defines the dropdown date picker behavior.
- */
 export default function DropdownMode(input: any, emit: any, opts: any): {
     el: any;
     opts: any;
+    destroyed: boolean;
     shouldFocusOnBlur: boolean;
     shouldFocusOnRender: boolean;
     state: {
@@ -24,5 +22,5 @@ export default function DropdownMode(input: any, emit: any, opts: any): {
     close: (becauseOfBlur?: boolean) => void;
     destroy: () => void;
     render: () => void;
-    setState: (state: any) => void;
+    setState: (state: any, silent?: boolean) => void;
 };

package/lib/ui/date.picker/mode/dropdown-mode.js

@@ -1,50 +1,37 @@
-/**
- * @file Defines the dropdown date picker behavior.
- */
-import BaseMode from './base-mode';
+import BaseMode from "./base-mode";
 export default function DropdownMode(input, emit, opts) {
     var dp = BaseMode(input, emit, opts);
     dp.shouldFocusOnBlur = false;
-    Object.defineProperty(dp, 'shouldFocusOnRender', {
-        get: function () {
-            return input !== document.activeElement;
-        }
+    Object.defineProperty(dp, "shouldFocusOnRender", {
+        get: function () { return input !== document.activeElement; }
     });
     dp.adjustPosition = function () {
-        autoPosition(input, dp);
+        if (!dp.isVisible()) {
+            return;
+        }
+        var cal = dp.el;
+        var rect = input.getBoundingClientRect();
+        cal.style.left = "0px";
+        cal.style.top = "0px";
+        // A transformed dialog establishes its own fixed-position containing block.
+        var origin = cal.getBoundingClientRect();
+        var left = Math.max(8, Math.min(rect.left, window.innerWidth - cal.offsetWidth - 8));
+        var above = rect.bottom + 8 + cal.offsetHeight > window.innerHeight && rect.top > cal.offsetHeight + 8;
+        var top = above ? rect.top - cal.offsetHeight - 8 : rect.bottom + 8;
+        top = Math.max(8, Math.min(top, window.innerHeight - cal.offsetHeight - 8));
+        cal.style.left = (left - origin.left) + "px";
+        cal.style.top = (top - origin.top) + "px";
+        cal.classList.toggle("dp-is-above", above);
+        cal.classList.toggle("dp-is-below", !above);
+    };
+    var reposition = () => dp.adjustPosition();
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    var destroy = dp.destroy;
+    dp.destroy = function () {
+        window.removeEventListener("resize", reposition);
+        window.removeEventListener("scroll", reposition, true);
+        destroy();
     };
     return dp;
 }
-function autoPosition(input, dp) {
-    var inputPos = input.getBoundingClientRect();
-    var win = window;
-    adjustCalY(dp, inputPos, win);
-    adjustCalX(dp, inputPos, win);
-    dp.el.style.visibility = '';
-}
-function adjustCalX(dp, inputPos, win) {
-    var cal = dp.el;
-    var scrollLeft = win.pageXOffset;
-    var inputLeft = inputPos.left + scrollLeft;
-    var maxRight = win.innerWidth + scrollLeft;
-    var offsetWidth = cal.offsetWidth;
-    var calRight = inputLeft + offsetWidth;
-    var shiftedLeft = maxRight - offsetWidth;
-    var left = calRight > maxRight && shiftedLeft > 0 ? shiftedLeft : inputLeft;
-    cal.style.left = left + 'px';
-}
-function adjustCalY(dp, inputPos, win) {
-    var cal = dp.el;
-    var scrollTop = win.pageYOffset;
-    var inputTop = scrollTop + inputPos.top;
-    var calHeight = cal.offsetHeight;
-    var belowTop = inputTop + inputPos.height + 8;
-    var aboveTop = inputTop - calHeight - 8;
-    var isAbove = (aboveTop > 0 && belowTop + calHeight > scrollTop + win.innerHeight);
-    var top = isAbove ? aboveTop : belowTop;
-    if (cal.classList) {
-        cal.classList.toggle('dp-is-above', isAbove);
-        cal.classList.toggle('dp-is-below', !isAbove);
-    }
-    cal.style.top = top + 'px';
-}

package/lib/ui/date.picker/mode/index.d.ts

@@ -4,6 +4,7 @@
 export default function Mode(input: any, emit: any, opts: any): {
     el: any;
     opts: any;
+    destroyed: boolean;
     shouldFocusOnBlur: boolean;
     shouldFocusOnRender: boolean;
     state: {
@@ -24,5 +25,5 @@ export default function Mode(input: any, emit: any, opts: any): {
     close: (becauseOfBlur?: boolean) => void;
     destroy: () => void;
     render: () => void;
-    setState: (state: any) => void;
+    setState: (state: any, silent?: boolean) => void;
 };

package/lib/ui/date.picker/mode/modal-mode.d.ts

@@ -1,6 +1,7 @@
 export default function ModalMode(input: any, emit: any, opts: any): {
     el: any;
     opts: any;
+    destroyed: boolean;
     shouldFocusOnBlur: boolean;
     shouldFocusOnRender: boolean;
     state: {
@@ -21,5 +22,5 @@ export default function ModalMode(input: any, emit: any, opts: any): {
     close: (becauseOfBlur?: boolean) => void;
     destroy: () => void;
     render: () => void;
-    setState: (state: any) => void;
+    setState: (state: any, silent?: boolean) => void;
 };

package/lib/ui/date.picker/mode/modal-mode.js

@@ -6,12 +6,14 @@ export default function ModalMode(input, emit, opts) {
     var dp = BaseMode(input, emit, opts);
     // In modal mode, users really shouldn't be able to type in
     // the input, as all input is done via the calendar.
-    input.readonly = true;
+    var wasReadOnly = input.readOnly;
+    input.readOnly = true;
     // In modal mode, we need to know when the user has tabbed
     // off the end of the calendar, and set focus to the original
     // input. To do this, we add a special element to the DOM.
     // When the user tabs off the bottom of the calendar, they
     // will tab onto this element.
-    dp.containerHTML += '<a href="#" class="dp-focuser">.</a>';
+    var destroy = dp.destroy;
+    dp.destroy = function () { destroy(); input.readOnly = wasReadOnly; };
     return dp;
 }

package/lib/ui/date.picker/mode/permanent-mode.d.ts

@@ -5,6 +5,7 @@ import { noop } from '../lib/fns';
 export default function PermanentMode(root: any, emit: any, opts: any): {
     el: any;
     opts: any;
+    destroyed: boolean;
     shouldFocusOnBlur: boolean;
     shouldFocusOnRender: boolean;
     state: {
@@ -25,5 +26,5 @@ export default function PermanentMode(root: any, emit: any, opts: any): {
     close: (becauseOfBlur?: boolean) => void;
     destroy: () => void;
     render: () => void;
-    setState: (state: any) => void;
+    setState: (state: any, silent?: boolean) => void;
 };

package/lib/ui/date.picker/views/day-picker.js

@@ -2,7 +2,7 @@
  * @file Manages the calendar / day-picker view.
  */
 import { Key } from '../lib/dom';
-import { now, datesEq, shiftMonth, shiftDay } from '../lib/date-manip';
+import { now, datesEq, shiftMonth, shiftDay, constrainDate } from '../lib/date-manip';
 export default {
     onKeyDown: keyDown,
     onClick: {
@@ -35,14 +35,14 @@ function render(dp) {
     var today = now().getTime();
     return ('<div class="dp-cal">' +
         '<header class="dp-cal-header">' +
-        '<button tabindex="-1" type="button" class="dp-prev">Prev</button>' +
-        '<button tabindex="-1" type="button" class="dp-cal-month">' +
+        '<button type="button" class="dp-prev" aria-label="Previous month">‹</button>' +
+        '<button type="button" class="dp-cal-month">' +
         lang.months[hilightedMonth] +
         '</button>' +
-        '<button tabindex="-1" type="button" class="dp-cal-year">' +
+        '<button type="button" class="dp-cal-year">' +
         hilightedDate.getFullYear() +
         '</button>' +
-        '<button tabindex="-1" type="button" class="dp-next">Next</button>' +
+        '<button type="button" class="dp-next" aria-label="Next month">›</button>' +
         '</header>' +
         '<div class="dp-days">' +
         dayNames.map(function (name, i) {
@@ -58,16 +58,19 @@ function render(dp) {
             className += (datesEq(date, selectedDate) ? ' dp-selected' : '');
             className += (isDisabled ? ' dp-day-disabled' : '');
             className += (isToday ? ' dp-day-today' : '');
-            className += ' ' + opts.dateClass(date, dp);
-            return ('<button tabindex="-1" type="button" class="' + className + '" data-date="' + date.getTime() + '">' +
+            className += ' ' + (opts.dateClass(date, dp) || '');
+            return ('<button tabindex="' + (datesEq(date, hilightedDate) && !isDisabled ? '0' : '-1') +
+                '" type="button" class="' + className + '" data-date="' + date.getTime() +
+                '" aria-label="' + date.toDateString() + '" aria-pressed="' + !!datesEq(date, selectedDate) + '"' +
+                (isToday ? ' aria-current="date"' : '') + (isDisabled ? ' disabled' : '') + '>' +
                 date.getDate() +
                 '</button>');
         }) +
         '</div>' +
         '<footer class="dp-cal-footer">' +
-        '<button tabindex="-1" type="button" class="dp-today">' + lang.today + '</button>' +
-        '<button tabindex="-1" type="button" class="dp-clear">' + lang.clear + '</button>' +
-        '<button tabindex="-1" type="button" class="dp-close">' + lang.close + '</button>' +
+        '<button type="button" class="dp-today"' + (opts.inRange(now()) ? '' : ' disabled') + '>' + lang.today + '</button>' +
+        '<button type="button" class="dp-clear">' + lang.clear + '</button>' +
+        '<button type="button" class="dp-close">' + lang.close + '</button>' +
         '</footer>' +
         '</div>');
 }
@@ -89,8 +92,17 @@ function keyDown(e, dp) {
     }
     else if (shiftBy) {
         e.preventDefault();
+        var target = constrainDate(shiftDay(dp.state.hilightedDate, shiftBy), dp.opts.min, dp.opts.max);
+        var direction = shiftBy < 0 ? -1 : 1;
+        while (target && !dp.opts.inRange(target)) {
+            var next = shiftDay(target, direction);
+            if (next < dp.opts.min || next > dp.opts.max) {
+                return;
+            }
+            target = next;
+        }
         dp.setState({
-            hilightedDate: shiftDay(dp.state.hilightedDate, shiftBy)
+            hilightedDate: target
         });
     }
 }
@@ -138,13 +150,10 @@ function mapDays(currentDate, dayOffset, fn) {
     var result = '';
     var iter = new Date(currentDate);
     iter.setDate(1);
-    iter.setDate(1 - iter.getDay() + dayOffset);
+    iter.setDate(1 - (iter.getDay() - dayOffset + 7) % 7);
     // If we are showing monday as the 1st of the week,
     // and the monday is the 2nd of the month, the sunday won't
     // show, so we need to shift backwards
-    if (dayOffset && iter.getDate() === dayOffset + 1) {
-        iter.setDate(dayOffset - 6);
-    }
     // We are going to have 6 weeks always displayed to keep a consistent
     // calendar size
     for (var day = 0; day < (6 * 7); ++day) {

package/lib/ui/date.picker/views/month-picker.js

@@ -32,7 +32,7 @@ function render(dp) {
         months.map(function (month, i) {
             var className = 'dp-month';
             className += (currentMonth === i ? ' dp-current' : '');
-            return ('<button tabindex="-1" type="button" class="' + className + '" data-month="' + i + '">' +
+            return ('<button tabindex="' + (currentMonth === i ? '0' : '-1') + '" type="button" class="' + className + '" data-month="' + i + '">' +
                 month +
                 '</button>');
         }).join('') +

package/lib/ui/date.picker/views/year-picker.js

@@ -17,15 +17,16 @@ export default {
  * @returns {string}
  */
 function render(dp) {
+    var _a;
     var state = dp.state;
     var currentYear = state.hilightedDate.getFullYear();
-    var selectedYear = state.selectedDate.getFullYear();
+    var selectedYear = (_a = state.selectedDate) === null || _a === void 0 ? void 0 : _a.getFullYear();
     return ('<div class="dp-years">' +
         mapYears(dp, function (year) {
             var className = 'dp-year';
             className += (year === currentYear ? ' dp-current' : '');
             className += (year === selectedYear ? ' dp-selected' : '');
-            return ('<button tabindex="-1" type="button" class="' + className + '" data-year="' + year + '">' +
+            return ('<button tabindex="' + (year === currentYear ? '0' : '-1') + '" type="button" class="' + className + '" data-year="' + year + '">' +
                 year +
                 '</button>');
         }) +

package/lib/ui/date.picker.d.ts

@@ -9,6 +9,7 @@ export interface IDatePickerLangOptions {
 export interface IDatePickerOptions {
     lang?: IDatePickerLangOptions;
     mode?: 'dp-modal' | 'dp-below' | 'dp-permanent';
+    appendTo?: HTMLElement;
     hilightedDate?: string | Date;
     min?: string | Date;
     max?: string | Date;
@@ -48,7 +49,7 @@ export interface IDatePicker {
         selectedDate?: Date;
         view?: string;
         hilightedDate?: Date;
-    }): void;
+    }, silent?: boolean): void;
     readonly state: {
         selectedDate?: Date;
         view?: string;