@k2b/ui 0.50.0 → 0.52.0

package/dist/browser/inputs/DatePicker.js

@@ -346,7 +346,9 @@ function PresetRail(props) {
     }
   });
 }
-function DatePickerPanel(props) {
+
+/** One month of days. Exported for composite pickers in this package (the period picker shows two side by side). */
+export function DatePickerPanel(props) {
   const messages = useUiMessages();
   const [view, setView] = createSignal("days");
   const context = createMemo(() => pickerContext(props.dateConfig));
@@ -440,8 +442,9 @@ function DatePickerPanel(props) {
   const focusDate = date => {
     const targetKey = dateKey(date, context());
     if (blocked(targetKey)) return;
-    if (!dates.isSameMonth(date, props.visibleMonth(), context())) props.setVisibleMonth(date);
-    queueMicrotask(() => calendar?.querySelector(`[data-date-day="${targetKey}"]`)?.focus());
+    const shown = props.isShown ? props.isShown(date) : dates.isSameMonth(date, props.visibleMonth(), context());
+    if (!shown) props.setVisibleMonth(date);
+    queueMicrotask(() => (props.focusRoot?.() ?? calendar)?.querySelector(`[data-date-day="${targetKey}"]:not([data-hidden="true"])`)?.focus());
   };
   const handleDayKeyDown = (event, day) => {
     const deltas = {
@@ -514,10 +517,10 @@ function DatePickerPanel(props) {
               };
               _$insert(_el$50, name);
               _$effect(_p$ => {
-                var _v$10 = index() === month().month,
-                  _v$11 = index() === month().month ? "true" : undefined;
-                _v$10 !== _p$.e && _$setAttribute(_el$50, "aria-pressed", _p$.e = _v$10);
-                _v$11 !== _p$.t && _$setAttribute(_el$50, "data-selected", _p$.t = _v$11);
+                var _v$12 = index() === month().month,
+                  _v$13 = index() === month().month ? "true" : undefined;
+                _v$12 !== _p$.e && _$setAttribute(_el$50, "aria-pressed", _p$.e = _v$12);
+                _v$13 !== _p$.t && _$setAttribute(_el$50, "data-selected", _p$.t = _v$13);
                 return _p$;
               }, {
                 e: undefined,
@@ -573,10 +576,10 @@ function DatePickerPanel(props) {
             children: band => (() => {
               var _el$53 = _$getNextElement(_tmpl$13);
               _$effect(_p$ => {
-                var _v$12 = `${band.start + 1} / span ${band.span}`,
-                  _v$13 = `1 / span ${dayRows().length}`;
-                _v$12 !== _p$.e && _$setStyleProperty(_el$53, "grid-column", _p$.e = _v$12);
-                _v$13 !== _p$.t && _$setStyleProperty(_el$53, "grid-row", _p$.t = _v$13);
+                var _v$14 = `${band.start + 1} / span ${band.span}`,
+                  _v$15 = `1 / span ${dayRows().length}`;
+                _v$14 !== _p$.e && _$setStyleProperty(_el$53, "grid-column", _p$.e = _v$14);
+                _v$15 !== _p$.t && _$setStyleProperty(_el$53, "grid-row", _p$.t = _v$15);
                 return _p$;
               }, {
                 e: undefined,
@@ -589,7 +592,8 @@ function DatePickerPanel(props) {
             get each() {
               return dayRows();
             },
-            children: week => (() => {
+            children: week => // A week of a neighbouring month only, left empty beside a second month, is hidden as a whole.
+            (() => {
               var _el$54 = _$getNextElement(_tmpl$14);
               _$insert(_el$54, _$createComponent(For, {
                 each: week,
@@ -602,6 +606,7 @@ function DatePickerPanel(props) {
                   const active = () => selected() || isRangeEdge(cell.key, range());
                   const focusable = () => cell.key === defaultFocus();
                   const today = () => cell.key === todayKey();
+                  const hidden = () => Boolean(props.hideOutside && cell.outside);
                   const label = () => {
                     const name = today() ? todayLabel(cell.label) : cell.label;
                     return blocked(cell.key) ? inputMessages().notSelectable({
@@ -621,28 +626,30 @@ function DatePickerPanel(props) {
                     _el$55.$$click = () => props.onSelect(cell.key);
                     _$insert(_el$55, () => cell.number);
                     _$effect(_p$ => {
-                      var _v$14 = cell.key,
-                        _v$15 = focusable() ? "true" : undefined,
-                        _v$16 = cell.outside ? "true" : undefined,
-                        _v$17 = weekendColumns()[cellIndex()] ? "true" : undefined,
-                        _v$18 = inRange(cell.key, range()) && !active() ? "true" : undefined,
-                        _v$19 = today() ? "true" : undefined,
-                        _v$20 = today() ? "date" : undefined,
-                        _v$21 = label(),
-                        _v$22 = active(),
-                        _v$23 = blocked(cell.key),
-                        _v$24 = focusable() ? 0 : -1;
-                      _v$14 !== _p$.e && _$setAttribute(_el$55, "data-date-day", _p$.e = _v$14);
-                      _v$15 !== _p$.t && _$setAttribute(_el$55, "data-date-focus", _p$.t = _v$15);
-                      _v$16 !== _p$.a && _$setAttribute(_el$55, "data-outside", _p$.a = _v$16);
-                      _v$17 !== _p$.o && _$setAttribute(_el$55, "data-weekend", _p$.o = _v$17);
-                      _v$18 !== _p$.i && _$setAttribute(_el$55, "data-in-range", _p$.i = _v$18);
-                      _v$19 !== _p$.n && _$setAttribute(_el$55, "data-today", _p$.n = _v$19);
-                      _v$20 !== _p$.s && _$setAttribute(_el$55, "aria-current", _p$.s = _v$20);
-                      _v$21 !== _p$.h && _$setAttribute(_el$55, "aria-label", _p$.h = _v$21);
-                      _v$22 !== _p$.r && _$setAttribute(_el$55, "aria-selected", _p$.r = _v$22);
-                      _v$23 !== _p$.d && _$setProperty(_el$55, "disabled", _p$.d = _v$23);
-                      _v$24 !== _p$.l && _$setAttribute(_el$55, "tabindex", _p$.l = _v$24);
+                      var _v$16 = cell.key,
+                        _v$17 = focusable() ? "true" : undefined,
+                        _v$18 = cell.outside ? "true" : undefined,
+                        _v$19 = hidden() ? "true" : undefined,
+                        _v$20 = weekendColumns()[cellIndex()] ? "true" : undefined,
+                        _v$21 = inRange(cell.key, range()) && !active() ? "true" : undefined,
+                        _v$22 = today() ? "true" : undefined,
+                        _v$23 = today() ? "date" : undefined,
+                        _v$24 = label(),
+                        _v$25 = active(),
+                        _v$26 = blocked(cell.key),
+                        _v$27 = focusable() ? 0 : -1;
+                      _v$16 !== _p$.e && _$setAttribute(_el$55, "data-date-day", _p$.e = _v$16);
+                      _v$17 !== _p$.t && _$setAttribute(_el$55, "data-date-focus", _p$.t = _v$17);
+                      _v$18 !== _p$.a && _$setAttribute(_el$55, "data-outside", _p$.a = _v$18);
+                      _v$19 !== _p$.o && _$setAttribute(_el$55, "data-hidden", _p$.o = _v$19);
+                      _v$20 !== _p$.i && _$setAttribute(_el$55, "data-weekend", _p$.i = _v$20);
+                      _v$21 !== _p$.n && _$setAttribute(_el$55, "data-in-range", _p$.n = _v$21);
+                      _v$22 !== _p$.s && _$setAttribute(_el$55, "data-today", _p$.s = _v$22);
+                      _v$23 !== _p$.h && _$setAttribute(_el$55, "aria-current", _p$.h = _v$23);
+                      _v$24 !== _p$.r && _$setAttribute(_el$55, "aria-label", _p$.r = _v$24);
+                      _v$25 !== _p$.d && _$setAttribute(_el$55, "aria-selected", _p$.d = _v$25);
+                      _v$26 !== _p$.l && _$setProperty(_el$55, "disabled", _p$.l = _v$26);
+                      _v$27 !== _p$.u && _$setAttribute(_el$55, "tabindex", _p$.u = _v$27);
                       return _p$;
                     }, {
                       e: undefined,
@@ -655,13 +662,15 @@ function DatePickerPanel(props) {
                       h: undefined,
                       r: undefined,
                       d: undefined,
-                      l: undefined
+                      l: undefined,
+                      u: undefined
                     });
                     _$runHydrationEvents();
                     return _el$55;
                   })();
                 }
               }));
+              _$effect(() => _$setAttribute(_el$54, "aria-hidden", props.hideOutside && week.every(cell => cell.outside) ? "true" : undefined));
               return _el$54;
             })()
           }), _el$41, _co$1);
@@ -694,22 +703,28 @@ function DatePickerPanel(props) {
     }), _el$48, _co$11);
     _$effect(_p$ => {
       var _v$7 = messages().calendar,
-        _v$8 = stepBlocked(-1),
-        _v$9 = previousLabel(),
-        _v$0 = stepBlocked(1),
-        _v$1 = nextLabel();
+        _v$8 = props.nav === "next" ? "true" : undefined,
+        _v$9 = stepBlocked(-1),
+        _v$0 = previousLabel(),
+        _v$1 = props.nav === "previous" ? "true" : undefined,
+        _v$10 = stepBlocked(1),
+        _v$11 = nextLabel();
       _v$7 !== _p$.e && _$setAttribute(_el$27, "aria-label", _p$.e = _v$7);
-      _v$8 !== _p$.t && _$setProperty(_el$29, "disabled", _p$.t = _v$8);
-      _v$9 !== _p$.a && _$setAttribute(_el$29, "aria-label", _p$.a = _v$9);
-      _v$0 !== _p$.o && _$setProperty(_el$31, "disabled", _p$.o = _v$0);
-      _v$1 !== _p$.i && _$setAttribute(_el$31, "aria-label", _p$.i = _v$1);
+      _v$8 !== _p$.t && _$setAttribute(_el$29, "data-hidden", _p$.t = _v$8);
+      _v$9 !== _p$.a && _$setProperty(_el$29, "disabled", _p$.a = _v$9);
+      _v$0 !== _p$.o && _$setAttribute(_el$29, "aria-label", _p$.o = _v$0);
+      _v$1 !== _p$.i && _$setAttribute(_el$31, "data-hidden", _p$.i = _v$1);
+      _v$10 !== _p$.n && _$setProperty(_el$31, "disabled", _p$.n = _v$10);
+      _v$11 !== _p$.s && _$setAttribute(_el$31, "aria-label", _p$.s = _v$11);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined,
+      s: undefined
     });
     _$runHydrationEvents();
     return _el$27;
@@ -812,12 +827,12 @@ function DateStatusLine(props) {
     typeof _ref$4 === "function" ? _$use(_ref$4, _el$62) : props.ref = _el$62;
     _$insert(_el$62, () => props.text);
     _$effect(_p$ => {
-      var _v$25 = props.id,
-        _v$26 = props.tone,
-        _v$27 = typeof props.text === "string" && props.text ? props.text : undefined;
-      _v$25 !== _p$.e && _$setAttribute(_el$62, "id", _p$.e = _v$25);
-      _v$26 !== _p$.t && _$setAttribute(_el$62, "data-tone", _p$.t = _v$26);
-      _v$27 !== _p$.a && _$setAttribute(_el$62, "title", _p$.a = _v$27);
+      var _v$28 = props.id,
+        _v$29 = props.tone,
+        _v$30 = typeof props.text === "string" && props.text ? props.text : undefined;
+      _v$28 !== _p$.e && _$setAttribute(_el$62, "id", _p$.e = _v$28);
+      _v$29 !== _p$.t && _$setAttribute(_el$62, "data-tone", _p$.t = _v$29);
+      _v$30 !== _p$.a && _$setAttribute(_el$62, "title", _p$.a = _v$30);
       return _p$;
     }, {
       e: undefined,
@@ -1151,10 +1166,10 @@ function DateTextField(props) {
             input?.focus();
           };
           _$effect(_p$ => {
-            var _v$28 = text() ? undefined : "true",
-              _v$29 = uiMessages().clearDate;
-            _v$28 !== _p$.e && _$setAttribute(_el$68, "data-hidden", _p$.e = _v$28);
-            _v$29 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$29);
+            var _v$31 = text() ? undefined : "true",
+              _v$32 = uiMessages().clearDate;
+            _v$31 !== _p$.e && _$setAttribute(_el$68, "data-hidden", _p$.e = _v$31);
+            _v$32 !== _p$.t && _$setAttribute(_el$68, "aria-label", _p$.t = _v$32);
             return _p$;
           }, {
             e: undefined,
@@ -1180,14 +1195,14 @@ function DateTextField(props) {
           var _ref$7 = toggle;
           typeof _ref$7 === "function" ? _$use(_ref$7, _el$69) : toggle = _el$69;
           _$effect(_p$ => {
-            var _v$30 = props.owner.disabled,
-              _v$31 = calendar.open() ? t().closeCalendar : t().openCalendar,
-              _v$32 = calendar.open() || sheetOpen(),
-              _v$33 = sheetOpen() ? sheetId : popoverId;
-            _v$30 !== _p$.e && _$setProperty(_el$69, "disabled", _p$.e = _v$30);
-            _v$31 !== _p$.t && _$setAttribute(_el$69, "aria-label", _p$.t = _v$31);
-            _v$32 !== _p$.a && _$setAttribute(_el$69, "aria-expanded", _p$.a = _v$32);
-            _v$33 !== _p$.o && _$setAttribute(_el$69, "aria-controls", _p$.o = _v$33);
+            var _v$33 = props.owner.disabled,
+              _v$34 = calendar.open() ? t().closeCalendar : t().openCalendar,
+              _v$35 = calendar.open() || sheetOpen(),
+              _v$36 = sheetOpen() ? sheetId : popoverId;
+            _v$33 !== _p$.e && _$setProperty(_el$69, "disabled", _p$.e = _v$33);
+            _v$34 !== _p$.t && _$setAttribute(_el$69, "aria-label", _p$.t = _v$34);
+            _v$35 !== _p$.a && _$setAttribute(_el$69, "aria-expanded", _p$.a = _v$35);
+            _v$36 !== _p$.o && _$setAttribute(_el$69, "aria-controls", _p$.o = _v$36);
             return _p$;
           }, {
             e: undefined,
@@ -1267,14 +1282,14 @@ function DateTextField(props) {
         }
       }), _el$81, _co$17);
       _$effect(_p$ => {
-        var _v$34 = calendar.open() ? "true" : undefined,
-          _v$35 = props.owner.readOnly ? "true" : undefined,
-          _v$36 = invalid() ? "true" : undefined,
-          _v$37 = fieldName(props.owner) ?? uiMessages().datePicker;
-        _v$34 !== _p$.e && _$setAttribute(_el$64, "data-open", _p$.e = _v$34);
-        _v$35 !== _p$.t && _$setAttribute(_el$64, "data-readonly", _p$.t = _v$35);
-        _v$36 !== _p$.a && _$setAttribute(_el$65, "data-invalid", _p$.a = _v$36);
-        _v$37 !== _p$.o && _$setAttribute(_el$70, "aria-label", _p$.o = _v$37);
+        var _v$37 = calendar.open() ? "true" : undefined,
+          _v$38 = props.owner.readOnly ? "true" : undefined,
+          _v$39 = invalid() ? "true" : undefined,
+          _v$40 = fieldName(props.owner) ?? uiMessages().datePicker;
+        _v$37 !== _p$.e && _$setAttribute(_el$64, "data-open", _p$.e = _v$37);
+        _v$38 !== _p$.t && _$setAttribute(_el$64, "data-readonly", _p$.t = _v$38);
+        _v$39 !== _p$.a && _$setAttribute(_el$65, "data-invalid", _p$.a = _v$39);
+        _v$40 !== _p$.o && _$setAttribute(_el$70, "aria-label", _p$.o = _v$40);
         return _p$;
       }, {
         e: undefined,
@@ -1808,10 +1823,10 @@ function DateRangeTextField(props) {
             startInput?.focus();
           };
           _$effect(_p$ => {
-            var _v$38 = startText() || endText() ? undefined : "true",
-              _v$39 = uiMessages().clearDate;
-            _v$38 !== _p$.e && _$setAttribute(_el$103, "data-hidden", _p$.e = _v$38);
-            _v$39 !== _p$.t && _$setAttribute(_el$103, "aria-label", _p$.t = _v$39);
+            var _v$41 = startText() || endText() ? undefined : "true",
+              _v$42 = uiMessages().clearDate;
+            _v$41 !== _p$.e && _$setAttribute(_el$103, "data-hidden", _p$.e = _v$41);
+            _v$42 !== _p$.t && _$setAttribute(_el$103, "aria-label", _p$.t = _v$42);
             return _p$;
           }, {
             e: undefined,
@@ -1836,14 +1851,14 @@ function DateRangeTextField(props) {
           var _ref$10 = toggle;
           typeof _ref$10 === "function" ? _$use(_ref$10, _el$104) : toggle = _el$104;
           _$effect(_p$ => {
-            var _v$40 = props.owner.disabled,
-              _v$41 = calendar.open() ? t().closeCalendar : t().openCalendar,
-              _v$42 = calendar.open() || sheetOpen(),
-              _v$43 = sheetOpen() ? sheetId : popoverId;
-            _v$40 !== _p$.e && _$setProperty(_el$104, "disabled", _p$.e = _v$40);
-            _v$41 !== _p$.t && _$setAttribute(_el$104, "aria-label", _p$.t = _v$41);
-            _v$42 !== _p$.a && _$setAttribute(_el$104, "aria-expanded", _p$.a = _v$42);
-            _v$43 !== _p$.o && _$setAttribute(_el$104, "aria-controls", _p$.o = _v$43);
+            var _v$43 = props.owner.disabled,
+              _v$44 = calendar.open() ? t().closeCalendar : t().openCalendar,
+              _v$45 = calendar.open() || sheetOpen(),
+              _v$46 = sheetOpen() ? sheetId : popoverId;
+            _v$43 !== _p$.e && _$setProperty(_el$104, "disabled", _p$.e = _v$43);
+            _v$44 !== _p$.t && _$setAttribute(_el$104, "aria-label", _p$.t = _v$44);
+            _v$45 !== _p$.a && _$setAttribute(_el$104, "aria-expanded", _p$.a = _v$45);
+            _v$46 !== _p$.o && _$setAttribute(_el$104, "aria-controls", _p$.o = _v$46);
             return _p$;
           }, {
             e: undefined,
@@ -1893,18 +1908,18 @@ function DateRangeTextField(props) {
         }
       }), _el$111, _co$24);
       _$effect(_p$ => {
-        var _v$44 = calendar.open() ? "true" : undefined,
-          _v$45 = props.owner.readOnly ? "true" : undefined,
-          _v$46 = props.owner.label ? meta.labelId : undefined,
-          _v$47 = props.owner.label ? undefined : props.owner["aria-label"],
-          _v$48 = invalid() ? "true" : undefined,
-          _v$49 = name() ?? uiMessages().datePicker;
-        _v$44 !== _p$.e && _$setAttribute(_el$96, "data-open", _p$.e = _v$44);
-        _v$45 !== _p$.t && _$setAttribute(_el$96, "data-readonly", _p$.t = _v$45);
-        _v$46 !== _p$.a && _$setAttribute(_el$97, "aria-labelledby", _p$.a = _v$46);
-        _v$47 !== _p$.o && _$setAttribute(_el$97, "aria-label", _p$.o = _v$47);
-        _v$48 !== _p$.i && _$setAttribute(_el$97, "data-invalid", _p$.i = _v$48);
-        _v$49 !== _p$.n && _$setAttribute(_el$105, "aria-label", _p$.n = _v$49);
+        var _v$47 = calendar.open() ? "true" : undefined,
+          _v$48 = props.owner.readOnly ? "true" : undefined,
+          _v$49 = props.owner.label ? meta.labelId : undefined,
+          _v$50 = props.owner.label ? undefined : props.owner["aria-label"],
+          _v$51 = invalid() ? "true" : undefined,
+          _v$52 = name() ?? uiMessages().datePicker;
+        _v$47 !== _p$.e && _$setAttribute(_el$96, "data-open", _p$.e = _v$47);
+        _v$48 !== _p$.t && _$setAttribute(_el$96, "data-readonly", _p$.t = _v$48);
+        _v$49 !== _p$.a && _$setAttribute(_el$97, "aria-labelledby", _p$.a = _v$49);
+        _v$50 !== _p$.o && _$setAttribute(_el$97, "aria-label", _p$.o = _v$50);
+        _v$51 !== _p$.i && _$setAttribute(_el$97, "data-invalid", _p$.i = _v$51);
+        _v$52 !== _p$.n && _$setAttribute(_el$105, "aria-label", _p$.n = _v$52);
         return _p$;
       }, {
         e: undefined,
@@ -2136,10 +2151,10 @@ export function DateTimePicker(props) {
                   var _el$125 = _$getNextElement(_tmpl$27);
                   _el$125.$$click = removeTime;
                   _$effect(_p$ => {
-                    var _v$50 = messages().removeTime,
-                      _v$51 = messages().removeTime;
-                    _v$50 !== _p$.e && _$setAttribute(_el$125, "aria-label", _p$.e = _v$50);
-                    _v$51 !== _p$.t && _$setAttribute(_el$125, "title", _p$.t = _v$51);
+                    var _v$53 = messages().removeTime,
+                      _v$54 = messages().removeTime;
+                    _v$53 !== _p$.e && _$setAttribute(_el$125, "aria-label", _p$.e = _v$53);
+                    _v$54 !== _p$.t && _$setAttribute(_el$125, "title", _p$.t = _v$54);
                     return _p$;
                   }, {
                     e: undefined,