@lumx/react 4.24.0-next.0 → 4.24.0-next.2

package/index.d.ts

@@ -4762,6 +4762,13 @@ interface SideNavigationItemProps extends GenericProps$1, HasCloseMode$1 {
     isOpen?: boolean;
     /** Whether the component is selected or not. */
     isSelected?: boolean;
+    /**
+     * Whether the link points to the current page or not.
+     * Sets `aria-current="page"` on the link, which produces the selected style.
+     * This does not set the `--is-selected` modifier class: a link component set in `linkAs` can set the
+     * attribute by itself, and React never sees it, so the attribute is the only reliable signal.
+     */
+    isCurrentPage?: boolean;
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
     /** Props to pass to the link (minus those already set by the SideNavigationItem props). */

package/index.js

@@ -19292,6 +19292,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     icon,
     isOpen,
     isSelected,
+    isCurrentPage,
     label,
     linkAs,
     linkProps,
@@ -19305,6 +19306,9 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
+
+  // Mark the link as the current page. A link component set in `linkAs` can also set it by itself.
+  const ariaCurrent = isCurrentPage ? 'page' : undefined;
   const contentId = useId();
   const ariaProps = {};
   if (hasContent) {
@@ -19324,6 +19328,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
       className: element$a('wrapper'),
       children: [RawClickable({
         as: linkAs || (linkProps?.href ? 'a' : 'button'),
+        'aria-current': ariaCurrent,
         ...linkProps,
         className: element$a('link'),
         handleClick: onClick,
@@ -19348,6 +19353,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
       })]
     }) : RawClickable({
       as: linkAs || (linkProps?.href ? 'a' : 'button'),
+      'aria-current': ariaCurrent,
       ...linkProps,
       className: element$a('link'),
       handleClick: onClick,
@@ -22577,7 +22583,7 @@ function timeOfDayMinutes(date) {
 /** Options for `buildTimeList`. */
 
 const MINUTES_IN_HOUR = 60;
-const MINUTES_IN_DAY = 24 * MINUTES_IN_HOUR;
+const MINUTES_IN_DAY$1 = 24 * MINUTES_IN_HOUR;
 
 /**
  * Build a full-day list of `TimeOfDay` entries spaced `step` minutes apart.
@@ -22597,7 +22603,7 @@ function buildTimeList(options = {}) {
   const minMinutes = minTime ? timeOfDayMinutes(minTime) : undefined;
   const maxMinutes = maxTime ? timeOfDayMinutes(maxTime) : undefined;
   const list = [];
-  for (let minutes = 0; minutes < MINUTES_IN_DAY; minutes += step) {
+  for (let minutes = 0; minutes < MINUTES_IN_DAY$1; minutes += step) {
     const hour = Math.floor(minutes / MINUTES_IN_HOUR);
     const minute = minutes % MINUTES_IN_HOUR;
     const outOfRange = minMinutes !== undefined && minutes < minMinutes || maxMinutes !== undefined && minutes > maxMinutes || undefined;
@@ -22663,24 +22669,42 @@ function parseTimeInput(raw) {
   };
 }
 
+const MINUTES_IN_DAY = 24 * 60;
+function ceilToStep(minutes, step) {
+  return Math.ceil(minutes / step) * step;
+}
+function floorToStep(minutes, step) {
+  return Math.floor(minutes / step) * step;
+}
+function minutesToTimeOfDay(minutes) {
+  return {
+    hour: Math.floor(minutes / 60),
+    minute: minutes % 60
+  };
+}
+
 /**
- * Clamp `time` to `[minTime, maxTime]`. Inputs strictly before `minTime` snap
- * up; inputs strictly after `maxTime` snap down; otherwise returned unchanged.
- * Only the time-of-day of `minTime`/`maxTime` is used.
+ * Clamp `time` to `[minTime, maxTime]`, snapping to the nearest `step`-aligned
+ * option (as generated by `buildTimeList`) rather than to the raw bound.
+ * Inputs below the effective `minTime` snap up to it. Inputs above the
+ * effective `maxTime` snap down to it. Others are returned unchanged. When no
+ * `step`-aligned option exists inside `[minTime, maxTime]`, `time` is returned
+ * unchanged since there is nothing to snap to. Only the time-of-day of
+ * `minTime`/`maxTime` is used.
  */
-function snapTimeToBounds(time, minTime, maxTime) {
+function snapTimeToBounds(time, minTime, maxTime, step = 30) {
   const totalMinutes = time.hour * 60 + time.minute;
-  if (minTime && totalMinutes < timeOfDayMinutes(minTime)) {
-    return {
-      hour: minTime.getHours(),
-      minute: minTime.getMinutes()
-    };
+  const effectiveMin = minTime ? ceilToStep(timeOfDayMinutes(minTime), step) : undefined;
+  const effectiveMax = maxTime ? floorToStep(timeOfDayMinutes(maxTime), step) : undefined;
+  const noOptionInBounds = effectiveMin !== undefined && (effectiveMin >= MINUTES_IN_DAY || effectiveMax !== undefined && effectiveMin > effectiveMax);
+  if (noOptionInBounds) {
+    return time;
   }
-  if (maxTime && totalMinutes > timeOfDayMinutes(maxTime)) {
-    return {
-      hour: maxTime.getHours(),
-      minute: maxTime.getMinutes()
-    };
+  if (effectiveMin !== undefined && totalMinutes < effectiveMin) {
+    return minutesToTimeOfDay(effectiveMin);
+  }
+  if (effectiveMax !== undefined && totalMinutes > effectiveMax) {
+    return minutesToTimeOfDay(effectiveMax);
   }
   return time;
 }
@@ -22759,11 +22783,11 @@ const TimePickerField = props => {
       hour: value.getHours(),
       minute: value.getMinutes()
     };
-    const clamped = snapTimeToBounds(timeOfDay, minTime, maxTime);
+    const clamped = snapTimeToBounds(timeOfDay, minTime, maxTime, step);
     if (clamped.hour !== value.getHours() || clamped.minute !== value.getMinutes()) {
       onChange(getDateAtTime(clamped, value), name);
     }
-  }, [boundsMode, value, minTime, maxTime, onChange, name]);
+  }, [boundsMode, value, step, minTime, maxTime, onChange, name]);
   const handleChange = useCallback(next => {
     const date = next ? getDateAtTime(next, value) : undefined;
     onChange(date, name);
@@ -22776,10 +22800,10 @@ const TimePickerField = props => {
     if (!parsed) return;
 
     // Snap to bounds if needed, then dedup against the current value.
-    const time = snapTimeToBounds(parsed, minTime, maxTime);
+    const time = snapTimeToBounds(parsed, minTime, maxTime, step);
     if (value && isDateOnTime(value, time)) return;
     onChange(getDateAtTime(time, value), name);
-  }, [maxTime, minTime, name, onChange, searchValue, value]);
+  }, [maxTime, minTime, name, onChange, searchValue, step, value]);
   const searchInputValue = value ? formatTime(value, locale) : undefined;
   return TimePickerField$1({
     ...forwardedProps,