@proyecto-viviana/solid-stately 0.5.0 → 0.6.0-rc.0

package/src/calendar/createDatePickerState.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/datepicker/useDatePickerState.ts
+
 /**
  * DatePickerState for Solid-Stately
  *
@@ -5,7 +19,8 @@
  * Based on @react-stately/datepicker useDatePickerState
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import {
   type DateValue,
   type CalendarDateTime,
@@ -16,7 +31,7 @@ import {
   toZoned,
   getLocalTimeZone,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import type { ValidationState } from "./createCalendarState";
 import type { TimeValue } from "./createTimeFieldState";
 
@@ -76,18 +91,21 @@ export function createDatePickerState<T extends DateValue = DateValue>(
   const timeZone = getLocalTimeZone();
 
   // Internal signals for value and overlay state
-  const [internalValue, setInternalValue] = createSignal<T | null>(props.defaultValue ?? null);
-  const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);
+  const [internalValue, setInternalValue] = createInternalSignal<T | null>(
+    props.defaultValue ?? null,
+  );
+  const [internalOpen, setInternalOpen] = createInternalSignal(props.defaultOpen ?? false);
 
   // Transient selections for date and time
-  const [selectedDate, setSelectedDate] = createSignal<DateValue | null>(null);
-  const [selectedTime, setSelectedTime] = createSignal<TimeValue | null>(null);
+  const [selectedDate, setSelectedDate] = createInternalSignal<DateValue | null>(null);
+  const [selectedTime, setSelectedTime] = createInternalSignal<TimeValue | null>(null);
 
-  // Controlled vs uncontrolled value
-  const value = createMemo<T | null>(() => {
+  // Controlled vs uncontrolled value. Function (not memo) so same-turn
+  // methods and tests see the live internal write.
+  const value: Accessor<T | null> = () => {
     const controlled = access(props.value);
     return controlled !== undefined ? controlled : internalValue();
-  });
+  };
 
   // Granularity: auto-detect from value type if not provided
   const granularity = createMemo<Granularity>(() => {
@@ -109,7 +127,7 @@ export function createDatePickerState<T extends DateValue = DateValue>(
   const isDisabled = createMemo(() => access(props.isDisabled) ?? false);
   const isReadOnly = createMemo(() => access(props.isReadOnly) ?? false);
   const validationState = createMemo(() => access(props.validationState));
-  const isOpen: Accessor<boolean> = () => access(props.isOpen) ?? internalOpen();
+  const isOpen: Accessor<boolean> = () => access(props.isOpen) ?? readNow(internalOpen);
 
   // Date and time portions of the current value
   const dateValue = createMemo<DateValue | null>(() => {
@@ -187,7 +205,7 @@ export function createDatePickerState<T extends DateValue = DateValue>(
   const setDateValue = (date: DateValue) => {
     if (isDisabled() || isReadOnly()) return;
 
-    const currentTime = selectedTime();
+    const currentTime = readNow(selectedTime);
     const currentValue = value();
     const shouldClose =
       typeof props.shouldCloseOnSelect === "function"
@@ -222,7 +240,7 @@ export function createDatePickerState<T extends DateValue = DateValue>(
   const setTimeValue = (time: TimeValue) => {
     if (isDisabled() || isReadOnly()) return;
 
-    const currentDate = selectedDate();
+    const currentDate = readNow(selectedDate);
     const currentValue = value();
 
     if (currentDate) {
@@ -252,8 +270,8 @@ export function createDatePickerState<T extends DateValue = DateValue>(
       // When closing, only commit if both date and time are available (when time is required).
       // Don't auto-commit partial selections with placeholder time to avoid phantom values.
       const currentValue = value();
-      const currentDate = selectedDate();
-      const currentTime = selectedTime();
+      const currentDate = readNow(selectedDate);
+      const currentTime = readNow(selectedTime);
 
       if (!currentValue && currentDate && hasTime() && currentTime) {
         // Both date and time explicitly selected — safe to commit

package/src/calendar/createRangeCalendarState.ts

@@ -1,11 +1,31 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/useCalendarState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/useRangeCalendarState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/calendar/utils.ts
+
 /**
  * RangeCalendarState for Solid-Stately
  *
  * Provides state management for range calendar components.
- * Based on @react-stately/calendar useRangeCalendarState
+ * Ported from:
+ * - packages/react-stately/src/calendar/useRangeCalendarState.ts
+ * - packages/react-stately/src/calendar/useCalendarState.ts
+ * - packages/react-stately/src/calendar/utils.ts
  */
 
-import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { createMemo, createEffect } from "solid-js";
+import type { Accessor } from "solid-js";
 import {
   type Calendar as InternationalizedCalendar,
   type CalendarDate,
@@ -28,7 +48,7 @@ import {
   toCalendar as intlToCalendar,
   toCalendarDate as intlToCalendarDate,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import type { CalendarDayOfWeek, ValidationState } from "./createCalendarState";
 import { getFormatOptions } from "./createDateFieldState";
 
@@ -172,6 +192,11 @@ export interface RangeCalendarState<T extends DateValue = DateValue> {
   selectFocusedDate: () => void;
   /** Selects a specific date. */
   selectDate: (date: CalendarDate) => void;
+  /**
+   * After a keyboard range-start selection, move focus to the next available
+   * day so the in-progress range is visible. RAC `focusNearestAvailableDate`.
+   */
+  focusNearestAvailableDate: (anchorDate: CalendarDate) => void;
   /** Whether focus is currently within the calendar. */
   isFocused: Accessor<boolean>;
   /** Sets whether focus is within the calendar. */
@@ -216,7 +241,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const calendar = createMemo(() =>
     (props.createCalendar ?? intlCreateCalendar)(resolvedOptions().calendar as CalendarIdentifier),
   );
-  const visibleMonths = Math.max(1, Number(access(props.visibleMonths) ?? 1));
+  const visibleMonths = createMemo(() => Math.max(1, Number(access(props.visibleMonths) ?? 1)));
   const firstDayOfWeekName = (): CalendarDayOfWeek | undefined =>
     props.firstDayOfWeek == null ? undefined : dayOfWeekNames[props.firstDayOfWeek];
 
@@ -226,7 +251,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // The anchor date is the first selected date during a range drag. Declared up
   // here (ahead of constrainDate) because the available-range derivation below
   // depends on it, and constrainDate consults that range.
-  const [anchorDate, setAnchorDate] = createSignal<CalendarDate | null>(null);
+  const [anchorDate, setAnchorDate] = createInternalSignal<CalendarDate | null>(null);
 
   // Mirrors @react-stately/calendar useRangeCalendarState getAvailableRange: once
   // a range selection is anchored and unavailable dates exist, contiguous ranges
@@ -238,8 +263,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     if (anchor && props.isDateUnavailable && !props.allowsNonContiguousRanges) {
       const predicate = (date: CalendarDate): boolean => props.isDateUnavailable!(date, anchor);
       return {
-        start: nextUnavailableDate(anchor, predicate, visibleMonths, -1),
-        end: nextUnavailableDate(anchor, predicate, visibleMonths, 1),
+        start: nextUnavailableDate(anchor, predicate, visibleMonths(), -1),
+        end: nextUnavailableDate(anchor, predicate, visibleMonths(), 1),
       };
     }
     return null;
@@ -281,7 +306,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const visibleRangeEndFromStart = (start: CalendarDate): CalendarDate => {
     let end = endOfMonth(start);
 
-    for (let i = 1; i < visibleMonths; i++) {
+    for (let i = 1; i < visibleMonths(); i++) {
       end = endOfMonth(end.add({ months: 1 }));
     }
 
@@ -291,7 +316,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   const rawAlignStart = (date: CalendarDate): CalendarDate => startOfMonth(date);
 
   const rawAlignEnd = (date: CalendarDate): CalendarDate =>
-    startOfMonth(date).subtract({ months: Math.max(visibleMonths - 1, 0) });
+    startOfMonth(date).subtract({ months: Math.max(visibleMonths() - 1, 0) });
 
   const constrainVisibleRangeStart = (date: CalendarDate, aligned: CalendarDate): CalendarDate => {
     const minValue = access(props.minValue);
@@ -322,8 +347,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     constrainVisibleRangeStart(date, rawAlignEnd(date));
 
   const alignCenter = (date: CalendarDate): CalendarDate => {
-    let offset = Math.floor(visibleMonths / 2);
-    if (offset > 0 && visibleMonths % 2 === 0) {
+    let offset = Math.floor(visibleMonths() / 2);
+    if (offset > 0 && visibleMonths() % 2 === 0) {
       offset--;
     }
 
@@ -373,16 +398,17 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   };
 
   // State signals
-  const [internalValue, setInternalValue] = createSignal<RangeValue<T> | null>(
+  const [internalValue, setInternalValue] = createInternalSignal<RangeValue<T> | null>(
     props.defaultValue ?? null,
   );
   const initialFocusedDate = constrainDate(getInitialFocusedDate());
-  const [focusedDate, setFocusedDateInternal] = createSignal<CalendarDate>(initialFocusedDate);
-  const [visibleRangeStart, setVisibleRangeStart] = createSignal<CalendarDate>(
+  const [focusedDate, setFocusedDateInternal] =
+    createInternalSignal<CalendarDate>(initialFocusedDate);
+  const [visibleRangeStart, setVisibleRangeStart] = createInternalSignal<CalendarDate>(
     alignVisibleRangeStart(initialFocusedDate),
   );
-  const [isFocused, setFocused] = createSignal(false);
-  const [isDragging, setDragging] = createSignal(false);
+  const [isFocused, setFocused] = createInternalSignal(false);
+  const [isDragging, setDragging] = createInternalSignal(false);
 
   // Controlled vs uncontrolled value
   const sourceValue = createMemo<RangeValue<T> | null>(() => {
@@ -448,7 +474,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return { start: focused, end: anchor };
   });
 
-  // Visible range based on React Stately's selection alignment rules.
+  // The visible range follows React Stately's selection alignment rules.
   const visibleRange = createMemo(() => {
     const start = visibleRangeStart();
     return { start, end: visibleRangeEndFromStart(start) };
@@ -461,9 +487,10 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // on out-of-range keeps a same-month focus from re-firing visibleRangeStart
   // with a fresh equal-valued object, which would otherwise recompute the grid
   // and recreate every cell on focus.
-  const syncVisibleRangeForFocusedDate = (nextFocusedDate: CalendarDate) => {
-    const range = visibleRange();
-
+  const syncVisibleRangeForFocusedDate = (
+    nextFocusedDate: CalendarDate,
+    range: { start: CalendarDate; end: CalendarDate },
+  ) => {
     if (nextFocusedDate.compare(range.start) < 0) {
       setVisibleRangeStart(alignEnd(nextFocusedDate));
     } else if (nextFocusedDate.compare(range.end) > 0) {
@@ -471,56 +498,73 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     }
   };
 
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (!controlledFocused) {
-      return;
-    }
-
-    const nextFocusedDate = constrainDate(toDisplayCalendarDate(controlledFocused));
-    const currentFocusedDate = focusedDate();
-
-    if (
-      nextFocusedDate.compare(currentFocusedDate) !== 0 ||
-      !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      setFocusedDateInternal(nextFocusedDate);
-      setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-    }
-  });
-
-  createEffect(() => {
-    const controlledFocused = access(props.focusedValue);
-    if (controlledFocused) {
-      return;
-    }
-
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = constrainDate(currentFocusedDate);
-
-    if (
-      nextFocusedDate.compare(currentFocusedDate) === 0 &&
-      isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
-    ) {
-      return;
-    }
-
-    setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-    props.onFocusChange?.(nextFocusedDate);
-  });
-
-  createEffect(() => {
-    const currentFocusedDate = focusedDate();
-    const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (!controlledFocused) return null;
+      const nextFocusedDate = constrainDate(toDisplayCalendarDate(controlledFocused));
+      return {
+        nextFocusedDate,
+        currentFocusedDate: focusedDate(),
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      const { nextFocusedDate, currentFocusedDate, alignedStart } = data;
+      if (
+        nextFocusedDate.compare(currentFocusedDate) !== 0 ||
+        !isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        setFocusedDateInternal(nextFocusedDate);
+        setVisibleRangeStart(alignedStart);
+      }
+    },
+  );
 
-    if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
-      return;
-    }
+  createEffect(
+    () => {
+      const controlledFocused = access(props.focusedValue);
+      if (controlledFocused) return null;
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = constrainDate(currentFocusedDate);
+      if (
+        nextFocusedDate.compare(currentFocusedDate) === 0 &&
+        isEqualCalendar(nextFocusedDate.calendar, currentFocusedDate.calendar)
+      ) {
+        return null;
+      }
+      return {
+        nextFocusedDate,
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      setFocusedDateInternal(data.nextFocusedDate);
+      setVisibleRangeStart(data.alignedStart);
+      props.onFocusChange?.(data.nextFocusedDate);
+    },
+  );
 
-    setFocusedDateInternal(nextFocusedDate);
-    setVisibleRangeStart(alignVisibleRangeStart(nextFocusedDate));
-  });
+  createEffect(
+    () => {
+      const currentFocusedDate = focusedDate();
+      const nextFocusedDate = toDisplayCalendarDate(currentFocusedDate);
+      if (isEqualCalendar(currentFocusedDate.calendar, nextFocusedDate.calendar)) {
+        return null;
+      }
+      return {
+        nextFocusedDate,
+        alignedStart: alignVisibleRangeStart(nextFocusedDate),
+      };
+    },
+    (data) => {
+      if (!data) return;
+      setFocusedDateInternal(data.nextFocusedDate);
+      setVisibleRangeStart(data.alignedStart);
+    },
+  );
 
   // Format week days for headers
   const weekDays = createMemo(() => {
@@ -581,7 +625,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
       return;
     }
 
-    syncVisibleRangeForFocusedDate(constrained);
+    syncVisibleRangeForFocusedDate(constrained, visibleRange());
     setFocusedDateInternal(constrained);
     props.onFocusChange?.(constrained);
   };
@@ -691,7 +735,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   // the window, so a single-month page whose focus stays in view would never
   // advance the grid.
   const focusPreviousPage = () => {
-    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths;
+    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
     const nextFocusedDate = constrainDate(focusedDate().subtract({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
     setVisibleRangeStart(startOfMonth(visibleRangeStart().subtract({ months: pageMonths })));
@@ -699,7 +743,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
   };
 
   const focusNextPage = () => {
-    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths;
+    const pageMonths = access(props.pageBehavior) === "single" ? 1 : visibleMonths();
     const nextFocusedDate = constrainDate(focusedDate().add({ months: pageMonths }));
     setFocusedDateInternal(nextFocusedDate);
     setVisibleRangeStart(startOfMonth(visibleRangeStart().add({ months: pageMonths })));
@@ -785,7 +829,7 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     );
     if (!selectableDate) return;
 
-    const anchor = anchorDate();
+    const anchor = readNow(anchorDate);
 
     if (!anchor) {
       // First click - set anchor
@@ -836,6 +880,20 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     return week;
   };
 
+  const focusNearestAvailableDate = (anchor: CalendarDate) => {
+    // RAC `useRangeCalendarState.ts:261-273`: prefer anchor+1, else −1, skip invalid.
+    const isDateInvalid = (candidate: CalendarDate) =>
+      isInvalid(candidate) || isDateOutsideAllowedRange(candidate);
+    let nextDay = anchor.add({ days: 1 });
+    if (isDateInvalid(nextDay)) {
+      nextDay = anchor.subtract({ days: 1 });
+    }
+    if (!isDateInvalid(nextDay)) {
+      setFocusedDate(nextDay);
+      setFocused(true);
+    }
+  };
+
   // Get number of weeks in a month
   const getWeeksInMonthFn = (date?: CalendarDate): number => {
     const monthDate = date ?? focusedDate();
@@ -858,7 +916,8 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
 
     const start = v.start as unknown as DateValue;
     const end = v.end as unknown as DateValue;
-    const startTimeZone = "timeZone" in start ? (start as { timeZone: string }).timeZone : undefined;
+    const startTimeZone =
+      "timeZone" in start ? (start as { timeZone: string }).timeZone : undefined;
     const startGranularity = "minute" in start ? "minute" : "day";
     const endTimeZone = "timeZone" in end ? (end as { timeZone: string }).timeZone : undefined;
     const endGranularity = "minute" in end ? "minute" : "day";
@@ -965,13 +1024,16 @@ export function createRangeCalendarState<T extends DateValue = CalendarDate>(
     focusPageEnd,
     selectFocusedDate,
     selectDate,
+    focusNearestAvailableDate,
     isFocused,
     setFocused,
     getDatesInWeek,
     getWeeksInMonth: getWeeksInMonthFn,
     weekDays,
     title,
-    visibleMonths,
+    get visibleMonths() {
+      return visibleMonths();
+    },
     isDragging,
     setDragging,
     formatValue,

package/src/calendar/createTimeFieldState.ts

@@ -1,8 +1,23 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/datepicker/useTimeFieldState.ts
+
 /**
  * TimeFieldState for Solid-Stately
  *
- * Faithful port of `@react-stately/datepicker` `useTimeFieldState`, which is a
- * thin wrapper over `useDateFieldState`: a time-only `Time` value is converted
+ * Faithful port of
+ * `packages/react-stately/src/datepicker/useTimeFieldState.ts`, which is a thin
+ * wrapper over `useDateFieldState`: a time-only `Time` value is converted
  * to a `CalendarDateTime` (anchored on today's date, or a zoned date when the
  * value/default carries a time zone) and fed to the date-field state machine
  * with `maxGranularity: 'hour'` so the date segments drop away and only
@@ -19,7 +34,10 @@
  * invoke and freeze them, breaking reactivity.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, type MaybeAccessor } from "../utils";
+
 import {
   Time,
   type CalendarDate,
@@ -33,7 +51,6 @@ import {
   toCalendarDateTime,
   GregorianCalendar,
 } from "@internationalized/date";
-import { access, type MaybeAccessor } from "../utils";
 import type { ValidationState } from "./createCalendarState";
 import type { ValidationBehavior, ValidationFunction } from "../form";
 import {
@@ -73,7 +90,7 @@ export interface TimeFieldStateProps<T extends TimeValue = Time> {
   /** Whether the value is invalid (controlled). */
   isInvalid?: boolean;
   /** The locale to use for formatting. */
-  locale?: string;
+  locale?: MaybeAccessor<string | undefined>;
   /** The granularity (hour, minute, second). */
   granularity?: "hour" | "minute" | "second";
   /** Whether to show 12 or 24 hour format. */
@@ -137,7 +154,9 @@ export function createTimeFieldState<T extends TimeValue = Time>(
   const placeholderValue: TimeValue = props.placeholderValue ?? new Time();
 
   // Controlled/uncontrolled Time value (mirrors useControlledState).
-  const [internalValue, setInternalValue] = createSignal<T | null>(props.defaultValue ?? null);
+  const [internalValue, setInternalValue] = createInternalSignal<T | null>(
+    props.defaultValue ?? null,
+  );
   const value = (): T | null => {
     const controlled = access(props.value);
     return controlled !== undefined ? controlled : internalValue();